diff --git a/docs/project-memory/shared-memory/decision-log.md b/docs/project-memory/shared-memory/decision-log.md
index bf48efc55..b9a6e5f56 100644
--- a/docs/project-memory/shared-memory/decision-log.md
+++ b/docs/project-memory/shared-memory/decision-log.md
@@ -16,6 +16,14 @@
 
 ---
 
+## 2026-06-29 图片画布抠图走远端 BiRefNet BFF
+
+- 背景：前端 `chromaKey` 和后端绿幕轻量去背对复杂人物、UI 图标边缘和非纯色背景质量不足，且远端 image host 已部署 BiRefNet 服务，需要让画布默认抠图走高质量模型，同时避免把服务令牌暴露到浏览器。
+- 决策：画布手动“去除背景”默认调用登录态同源 BFF `POST /api/editor/images/background-removals`；角色形象生成、图标 spritesheet 生成、UI 设计图素材提取生成后的透明化和角色动作抽帧后的序列帧透明化也默认走同一套 BiRefNet 上游，不再静默回退到本地绿幕抠图。api-server 解析当前图片或生成结果后代理到 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL/remove-background`，默认指向 `http://58.87.105.82/remove-background`，可选 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN` 只在服务端注入。api-server 对上游结果做字节和尺寸上限保护，并先落 OSS / asset object 再返回给前端。
+- 影响范围：api-server 编辑器图片接口、图片画布手动去背景、角色形象生成、图标素材生成、UI 素材提取、角色动作生成、画布右上角任务侧栏、图片画布 MVP 技术文档。
+- 验证方式：运行 `cargo check -p api-server --manifest-path server-rs/Cargo.toml`、`cargo test -p api-server config::tests::from_env_reads_editor_background_removal_settings --manifest-path server-rs/Cargo.toml`、`npm run typecheck`、定向画布 workflow 测试、`npm run check:encoding` 和 `git diff --check`。
+- 关联文档：`docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`。
+
 ## 2026-06-26 React 组件测试按用户行为与稳定契约收敛
 
 - 背景：部分 React 测试把组件内部状态、测试专用 DOM 探针、图标 class、完整按钮顺序或精确长文案当成契约，正常 UI 重构时容易误报，增加维护成本。
diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
index b3561d75a..6a0321784 100644
--- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
+++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md
@@ -21,8 +21,10 @@
 - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词、重绘提示词，以及角色规范 / 常规参考图 / 图标规范 / 编辑参考图等参考图卡片，并提供“复制信息”复制当前可见字段。参考图输入快照只保存 `refType/refId` 行引用，其中 `refType="project-resource"` 指向 `editor_project_resource.resourceId`，`refType="asset"` 指向 `editor_asset.assetId`；不得把图片 Data URL、普通 URL 或 `objectKey` 写入 `generationInputs.references`。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
 - 对生成资源执行重绘时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图；重绘面板不因提交成功自动关闭，便于连续改提示词。重绘 / 改造输入框只允许从 `generationInputs.fields` 中恢复用户可见输入快照，例如普通生成提示词、视频描述、音效 `prompt`、背景音乐 `gpt_description_prompt`、角色设定、UI 用户输入、图标素材描述、规范表单和宣发素材字段；禁止回退展示资源 `prompt` / `actualPrompt` 中的后端拼接 Prompt、固定生成模板或模型默认提示词。没有用户输入快照的旧图层打开改造时保持空输入，等待用户重新填写。
 - 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成、生成规范和重绘保留既有 `gpt-image-2` 路径；图片快速编辑默认从原图模型和分辨率初始化，但提交使用面板当前选择的 `model/aspectRatio/imageSize`；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板底部用与可编辑面板一致的比例 / 尺寸 / 模型胶囊按钮展示固定参数，但按钮为禁用态，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型。`nanobanana2` 走 `/v1beta/models/{model}:generateContent`，请求体写入 `generationConfig.imageConfig.aspectRatio/imageSize`；`gpt-image-2` 走 `/v1/images/generations` 或 `/v1/images/edits`，请求体按 VectorEngine 文档映射 `size`。宣发素材三个工作流（游戏首图、详情五图、运营海报）固定使用 `gpt-image-2`，面板模型胶囊为禁用态，不提供 `nanobanana2` 入口；前端按 workflow 同时提交 `outputSize`、`aspectRatio` 和 `imageSize`，其中游戏首图为 `720x540 / 4:3`、详情单图为 `720x1280 / 9:16`、运营海报为 `1280x720 / 16:9`；后端收到 `kind: "publication-material"` 时也强制归一为 `gpt-image-2` 生成和计费，生成回填图层优先使用生成占位的 `originalWidth/originalHeight`，即使上游回包尺寸漂移也不得把宣发素材卡片变成随机 `1:1` 或 `4:3`。纯文本生成走 `/api/editor/images/generations`，重绘在前端读入当前图层图片 Data URL 后走同一图片生成 BFF，并在原图右侧生成一张新图；普通图层重绘作为 `quick-edit` 参考图提交，角色图层重绘必须按 `kind: "character"` 提交，继续套用角色生成器提示词限定、透明 PNG 后处理和角色资产持久化。`生成视频` 走 `/api/editor/videos/generations`，前端模型入口仅展示 Seedance 2.0 Fast / Seedance 2.0 / Kling 3.0 / Kling 3.0 Omni，不展示 Veo 入口，默认 Seedance 2.0 Fast；视频参数按当前正式面板支持的比例、时长、清晰度和声音开关提交，且 Seedance Fast 与 Seedance 标准版必须按各自真实模型 ID 独立映射，不得混用。生成结果以视频图层加入画布。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成图片后以当前视口世界中心为目标，经统一 placement 避让后创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。图片快速编辑和重绘在调用图片 BFF 前必须把当前图层图片源读取为图片 Data URL；视频素材快速编辑走视频生成 BFF，不允许走图片模型；角色动作快速编辑固定使用 `seedance2.0-fast` 动作 / 视频模型。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
+- 图片画布抠图默认走远端 BiRefNet：手动去除背景走登录态同源 BFF `POST /api/editor/images/background-removals`，角色形象生成、图标 spritesheet 生成、UI 设计图素材提取生成后的透明化和角色动作抽帧后的序列帧透明化也由 api-server 调用 BiRefNet；服务地址为 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL/remove-background`，默认 `http://58.87.105.82/remove-background`。可选访问令牌只来自服务端环境变量 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN`，前端不持有令牌。api-server 对上游结果做响应字节和图片尺寸上限保护，并先落 OSS / asset object，再返回 `imageSrc/objectKey/assetObjectId/taskId`；手动去背景作为画布本地任务展示，记录运行 / 完成 / 失败、耗时和 provider，不写入 SpacetimeDB 外部生成队列。
 - 快速编辑面板对齐其它生成类面板：首行支持额外参考图，最多 8 张；原图 / 原素材作为 `/api/editor/images/edits` 的 `sourceImageSrc` 直接提交，不作为 `referenceImageSrcs` 的最后一张隐式参考，也不在参考图条里固定展示 `图x`。打开快速编辑时画布必须自动平移缩放，让原素材完整落在可视区上半部分，底部面板固定出现在素材下方且不遮挡内容，竖屏 UI 素材也必须完整展示。快速编辑右侧显示矩形、椭圆、画笔框选工具，但进入时不默认启用；点击工具后显示选中态，再点同一工具取消启用。尺寸和模型默认从原素材配置 / 分辨率推断，底部参数胶囊可点击修改；图片快速编辑左下角统一显示 `x:y·xK`，右下角模型胶囊紧贴生成按钮。提交时保留用户提示词里对 `原图`、`当前图片`、`当前图` 或 `图1` 的原始表述，不再改写为 `图N`。点击快速编辑生成后立即创建独立 `Quick Edit Generator` 画布占位播放生成中动画，不再在原图图层上播放生成中遮罩；生成成功后直接用结果覆盖原图图层，该生成中占位可通过键盘 `Delete` / `Backspace` 删除。
 - 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
+- 画布右上角提供自动隐藏任务侧栏。列表为空且侧栏关闭时只保留图标开关；生成或去背景任务进入时默认打开；用户可手动切换开关状态。
 - 所有会新建画布生成占位的入口必须先创建 draft，再统一经过 `ImageCanvasGenerationPlacementModel` 计算落点，禁止各入口自行使用当前视口中心裸坐标或原图右侧固定偏移。当前覆盖入口包括 `生成图片`、`生成规范`、`生成角色形象`、`生成图标素材`、`生成视频`、`生成UI设计图`、`生成角色动作` 和快速编辑提交后创建的 `Quick Edit Generator`。placement 模型的避让对象为所有未隐藏画布图层，以及当前 active / inactive generation dialogs 中仍存在的 placeholder；每个避让矩形按 32px 画布世界坐标间距外扩。候选落点以当前视口世界中心为距离目标，优先选择离视口中心最近且不重叠的占位位置；若中心被占用，会按上下左右和环形候选继续寻找。打开生成面板时必须把避让后的 placeholder 写入 `openCanvasGenerationDialog(...)`，并立即调用 `centerViewportOnPlacement(...)` 居中到新占位中心，保持原 viewport scale 不变；快速编辑提交时同样必须把避让后的 placeholder 写入独立生成占位，生成结果落在该占位位置。
 
 ## 交互规则
@@ -72,9 +74,10 @@
 - `POST /api/editor/assets`：批量或单个创建账号级素材，登录态上传必须写入 OSS / asset object 引用和 `/<objectKey>` 轻量路径，不允许把 Data URL / signed URL 写入素材库。
 - `PATCH /api/editor/assets/{assetId}`：重命名素材或移动素材到文件夹。
 - `DELETE /api/editor/assets/{assetId}`：删除素材。已放入画布的 project resource 不被级联删除，避免旧画布丢图。
-- `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`，宣发素材携带 `kind: "publication-material"` 时固定归一为 `gpt-image-2`，不支持 `nanobanana2`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。普通重绘继续走该接口并把当前图层图片作为参考图；图片快速编辑不走该接口。请求可携带 `projectId`、`assetFolderId`、`assetKind`、`generationInputs` 和 `sourceResourceId`，后端生成成功后创建 project resource / 账号素材并在响应中返回 resource / asset 快照。
-- `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`、`priceMudPoints`、`projectId`、`assetFolderId` 和 `generationInputs`；`priceMudPoints` 必须来自编辑器生成计费配置中对应生图模型的尺寸档位（如 `nanobanana2` 的 `0.5K / 1K / 2K` 或 `gpt-image-2` 的 `1K / 2K`），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`。后端把 spritesheet 和拆分后的 icon 都保存为 project resource / 账号素材，并随响应返回对应快照。
-- `POST /api/editor/ui-designs/assets/extractions`：以前端已绘入红色框选轮廓的 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。` 生成素材 spritesheet，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求必须携带 `aspectRatio: "1:1"`、`imageSize: "1K" | "2K"` 和 `priceMudPoints`；框选数量不超过 6 个时前端按 `1:1·1K` 与 gpt-image-2 1K 价格提交，超过 6 个时按 `1:1·2K` 与 2K 价格提交。后端必须在调用上游前校验比例、尺寸和泥点价格，只允许 `1:1 / 1K / 2K`。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
+- `POST /api/editor/images/generations`：按提示词调用 VectorEngine 生成图片；角色生成可携带 `model`、`aspectRatio`、`imageSize` 和 `referenceImageSrcs`，生成成功后 api-server 调用 BiRefNet 去背景。宣发素材携带 `kind: "publication-material"` 时固定归一为 `gpt-image-2`，不支持 `nanobanana2`。`nanobanana2` 参考图作为 `inline_data` 进入 `generateContent`，`gpt-image-2` 参考图进入 edits。普通重绘继续走该接口并把当前图层图片作为参考图；图片快速编辑不走该接口。请求可携带 `projectId`、`assetFolderId`、`assetKind`、`generationInputs` 和 `sourceResourceId`，后端生成成功后创建 project resource / 账号素材并在响应中返回 resource / asset 快照。
+- `POST /api/editor/images/background-removals`：接收当前图片源，校验登录态后由 api-server 解析为图片文件并转发到 BiRefNet 去背景服务；响应返回 `imageSrc`、`objectKey`、`assetObjectId`、`width`、`height`、`taskId`、`elapsedMs` 和 `provider`。服务地址由 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL` 配置，令牌只在服务端通过 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN` 注入。
+- `POST /api/editor/icon-spritesheets/generations`：按图标规范图和素材描述数组生成 spritesheet，生成成功后 api-server 调用 BiRefNet 透明化，再由后端切分为独立透明图标。请求支持 `model`、`aspectRatio`、`imageSize`、`priceMudPoints`、`projectId`、`assetFolderId` 和 `generationInputs`；`priceMudPoints` 必须来自编辑器生成计费配置中对应生图模型的尺寸档位（如 `nanobanana2` 的 `0.5K / 1K / 2K` 或 `gpt-image-2` 的 `1K / 2K`），后端用 `editor_generation_config` 校验后才调用上游；`nanobanana2` 走原生 `generateContent` 并写入 `generationConfig.imageConfig.aspectRatio/imageSize`，`0.5K` 传 `"512"`；`gpt-image-2` 走 `/v1/images/edits`。后端把 spritesheet 和拆分后的 icon 都保存为 project resource / 账号素材，并随响应返回对应快照。
+- `POST /api/editor/ui-designs/assets/extractions`：以前端已绘入红色框选轮廓的 UI 设计图 Data URL 作为参考图，固定 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。` 生成素材 spritesheet，生成成功后 api-server 调用 BiRefNet 透明化，再按连通域自动拆分为 `素材 1..N`，返回结构复用图标 spritesheet 响应。请求必须携带 `aspectRatio: "1:1"`、`imageSize: "1K" | "2K"` 和 `priceMudPoints`；框选数量不超过 6 个时前端按 `1:1·1K` 与 gpt-image-2 1K 价格提交，超过 6 个时按 `1:1·2K` 与 2K 价格提交。后端必须在调用上游前校验比例、尺寸和泥点价格，只允许 `1:1 / 1K / 2K`。请求可携带 `projectId`、`assetFolderId`、`generationInputs` 和 `spritesheetLabel`，后端保存 spritesheet / 拆分素材并返回对应 resource / asset 快照；前端必须把 spritesheet 原图与拆分素材都加入画布。
 - `POST /api/editor/images/edits`：按提示词、当前图片 Data URL 和最多 8 张额外参考图调用 VectorEngine edits，返回新的生成图片元数据；请求携带 project / asset 上下文时由后端创建新 resource / asset，前端只消费响应快照。
 - `POST /api/editor/videos/generations`：按视频描述、模型、比例、时长、分辨率、模式、声音、默认联网搜索标记和泥点价格生成视频。前端可选模型为 `seedance2.0-fast`、`seedance2.0`、`kling3.0`、`kling3.0-omni`，默认 `seedance2.0-fast`；后端必须将 `seedance2.0-fast` 映射到 `doubao-seedance-2-0-fast-260128`，将 `seedance2.0` 映射到 `doubao-seedance-2-0-260128`，两者不得混用。后端允许 6 类比例、4 到 15 秒整数、`480p / 720p / 1080p`，并拒绝 `seedance2.0-fast + 1080p`；`sound=on/off` 映射 Ark `generate_audio=true/false`。后端复用 Ark / VectorEngine content generation task 轮询链路，下载最终视频并持久化到 OSS；请求携带 `projectId` / `assetFolderId` 时同步创建 project resource / 账号素材并返回 `project` / `asset` 快照，基础响应返回 `videoSrc`、尺寸、prompt、model、provider、taskId、durationSeconds、resolution 和 `priceMudPoints`。
 
@@ -105,7 +108,7 @@
 - 快速编辑面板底部必须显示当前选择的比例 / 尺寸和模型，参数按钮可展开修改且视觉对齐其它可编辑面板；打开时视口聚焦必须预留底部面板空间，面板位于素材下方，不得遮挡原素材，且素材在当前屏幕内完整可见。快速编辑请求只把原图作为 `sourceImageSrc` 直接提交，信息面板输入快照只展示用户额外选择的参考图。
 - 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
 - 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图行引用，不包含后端拼接 Prompt，不再展示独立 Size 字段，也不渲染参考图 Data URL 缩略图。
-- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景使用前端轻量去背并回写为新的工程资源快照；前端轻量去背必须复用共享 `chromaKey` 的绿幕 / 近白背景模型，不再只按四角颜色扩散，避免纯白角色主体或主体内部浅色区域被扣碎。UI设计图的提取素材必须先进入红框素材框选状态，默认启用矩形框选，右侧框选工具与快速编辑统一且可再次点击取消启用态，当前启用工具按钮必须保持高亮。素材提取面板必须在素材下方，使用与生成新素材一致的面板宽度和底部模型 / 按钮样式，提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选区域截图预览、固定模型 `gpt-image-2`、左下角计划规格 `1:1·1K/2K` 和 `提取 · N泥点` 按钮，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。至少框选一个区域后才可提交，前端把红色轮廓绘入原图后固定走 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
+- 图片选中后的浮动工具栏按钮顺序固定为：快速编辑、分割线、裁扩按钮、去除背景按钮、UI设计图专属提取素材、角色图专属生成动画、分割线、重绘、下载按钮。裁扩通过画布边界拖拉完成，不再展示四边数值输入；默认自由比例，选择固定比例后拖拉边界保持对应比例，完成后在原素材旁边新增裁扩结果图层，扩展区域透明填充。去除背景调用同源 BFF `POST /api/editor/images/background-removals`，由 api-server 代理远端 BiRefNet 服务并持久化结果，完成后用新的 project resource 引用替换当前图层，并在右上角本地任务侧栏展示耗时和状态。UI设计图的提取素材必须先进入红框素材框选状态，默认启用矩形框选，右侧框选工具与快速编辑统一且可再次点击取消启用态，当前启用工具按钮必须保持高亮。素材提取面板必须在素材下方，使用与生成新素材一致的面板宽度和底部模型 / 按钮样式，提示语显示 `使用框选工具框选你希望从画面中提取的素材`，并展示按原图坐标准确裁剪的框选区域截图预览、固定模型 `gpt-image-2`、左下角计划规格 `1:1·1K/2K` 和 `提取 · N泥点` 按钮，不显示额外取消按钮；点击素材和面板以外的画布区域即退出 UI 素材提取。至少框选一个区域后才可提交，前端把红色轮廓绘入原图后固定走 `gpt-image-2` 和提示词 `仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用单一纯绿色 #00FF00 / RGB(0,255,0) 绿幕，方便后续扣除背景；素材自身不要出现绿色描边、绿色底板或绿色阴影。`，生成的 spritesheet 原图和拆分后的独立素材都作为画布图层保留。
 - 重绘生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图，且重绘面板保持打开。
 - 快速编辑 / 重绘站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
 - 快速编辑的额外参考图既进入输入快照，也作为 `/api/editor/images/edits` 的 `referenceImageSrcs` 提交给后端；原图仍只作为 `sourceImageSrc`，不占用额外参考图额度。
@@ -113,7 +116,7 @@
 - 上传按钮和拖拽上传都支持多文件；底部工具栏的上传入口选择文件后直接进入“上传素材”并在当前画布视口中心创建画布图层，素材栏文件夹内的上传入口只写入对应素材文件夹、不自动入画布；拖到文件夹或该文件夹内素材时进入目标文件夹；拖到画布时进入“上传素材”并在投放点创建画布图层。上传图片必须在创建占位素材、画布图层和账号级素材记录前先读取原图 Resolution，图层宽高、`originalWidth/originalHeight` 和素材库 `width/height` 都使用图片本身尺寸；上传视频同样在创建素材和图层前读取视频 metadata 宽高，保证单层下载或 ZIP 导出的真实视频文件重新导入后仍按文件自身尺寸入画布；仅在无法解析尺寸时才使用对应媒体兜底尺寸。
 - 音频 / 视频素材卡和画布媒体图层必须提供稳定的非文字视觉预览：优先使用 `thumbnailSrc` / 视频 `poster`，没有真实首帧或音频封面时使用由媒体类型、素材名和地址派生的确定性视觉底图。视频图层使用原生 `<video controls preload="metadata" playsInline>` 播放，外层图层仍承接选择和拖拽语义；音频图层播放前继续通过 `/api/assets/read-url` 换签。画布素材导出按 `mediaType` 保留真实媒体格式：图片进入 `images/`，音频 / 视频进入 `media/`，文件扩展名从响应 MIME、`objectKey` 或源 URL 推断，不得把音频 / 视频导出成 PNG。
 - 画布素材 ZIP 的 `metadata.json` 只保存前端信息弹窗和导出文件列表可见的展示快照：项目标题、导出时间、图层标题、文件路径、类型、生成输入、模型显示名、Task 短 ID、Object 显示值、Resolution / 时长和导出错误。导出的生成输入只保留用户实际填写或选择的内容；系统默认兜底提示词、固定工作流提示词、内置图标描述、UI 提取素材固定提示词等内置提示词即使存在于历史 `generationInputs`，也不得写入导出元数据。不得把 `projectId`、`layerId`、`resourceId`、`sourceAssetId`、`sourceResourceId`、原始 `prompt` / `actualPrompt` / `provider` 或画布坐标、锁定、隐藏等布局状态写入导出元数据；Object 字段仅沿用信息弹窗当前可见值。
-- `生成角色动作` 的完成结果同样按视频素材处理：图层主 `src` 使用后端返回的 `previewVideoPath`，`mediaType` 固定为 `video`，`assetKind` 固定为 `character-animation`，首个透明帧只写入 `thumbnailSrc` 供 poster 和后续动作源使用。下载和 ZIP 导出必须因此得到 mp4/webm/mov 等真实视频文件，不能回退为首帧 PNG；后端抽帧、绿幕去背和帧素材落盘流程仍完整保留。
+- `生成角色动作` 的完成结果同样按视频素材处理：图层主 `src` 使用后端返回的 `previewVideoPath`，`mediaType` 固定为 `video`，`assetKind` 固定为 `character-animation`，首个透明帧只写入 `thumbnailSrc` 供 poster 和后续动作源使用。下载和 ZIP 导出必须因此得到 mp4/webm/mov 等真实视频文件，不能回退为首帧 PNG；后端抽帧后通过 BiRefNet 去背景并落盘帧素材。
 - 素材面板支持按素材名、文件夹名、生成信息、模型、任务和媒体类型搜索，并支持选择模式框选，一次选中多个素材，并可批量移动或删除上传素材。
 - 图层面板支持按图层名、生成信息、模型、任务和媒体类型搜索；支持选择多个图层后创建图层组，组名和 groupId 随画布布局保存。
 - 小地图支持拖拽视口框，拖动时画布 viewport 跟随移动；`pointermove` 更新必须通过 `requestAnimationFrame` 合帧，结束拖拽时 flush 最后一帧，避免高频 pointermove 直接压垮 React 渲染和项目持久化链路。
diff --git a/server-rs/crates/api-server/src/character_animation_assets.rs b/server-rs/crates/api-server/src/character_animation_assets.rs
index 002bd1616..8f5147584 100644
--- a/server-rs/crates/api-server/src/character_animation_assets.rs
+++ b/server-rs/crates/api-server/src/character_animation_assets.rs
@@ -63,9 +63,10 @@ use crate::{
     editor_project::{
         EditorCanvasGeneratedLayerInput, PersistEditorGeneratedAssetRequest,
         build_editor_canvas_generated_layer_item, complete_editor_canvas_generation_with_items,
-        persist_editor_generated_media_asset,
+        persist_editor_generated_media_asset, try_remove_editor_downloaded_image_background,
     },
     http_error::AppError,
+    openai_image_generation::DownloadedOpenAiImage,
     platform_errors::map_oss_error,
     prompt::role_asset_studio::{
         build_role_asset_workflow, normalize_animation_prompt_text_by_key,
@@ -2044,7 +2045,7 @@ async fn extract_and_persist_editor_character_animation_frames(
 ) -> Result<Vec<EditorCharacterAnimationFramePayload>, AppError> {
     let plan = AnimationFrameExtractionPlan {
         frame_count: request.frame_count,
-        apply_chroma_key: true,
+        apply_chroma_key: false,
         sample_start_ratio: 0.0,
         sample_end_ratio: 1.0,
     };
@@ -2058,6 +2059,13 @@ async fn extract_and_persist_editor_character_animation_frames(
         Some(request.duration_seconds as f64),
     )
     .await?;
+    let finalized_frames = remove_editor_character_animation_frame_backgrounds(
+        state,
+        finalized_frames,
+        request.frame_width,
+        request.frame_height,
+    )
+    .await?;
 
     let mut frame_payloads = Vec::with_capacity(finalized_frames.len());
     for (index, frame) in finalized_frames.into_iter().enumerate() {
@@ -2093,6 +2101,36 @@ async fn extract_and_persist_editor_character_animation_frames(
     Ok(frame_payloads)
 }
 
+async fn remove_editor_character_animation_frame_backgrounds(
+    state: &AppState,
+    frames: Vec<FinalizedAnimationFrame>,
+    frame_width: u32,
+    frame_height: u32,
+) -> Result<Vec<FinalizedAnimationFrame>, AppError> {
+    let mut removed_frames = Vec::with_capacity(frames.len());
+    for (index, frame) in frames.into_iter().enumerate() {
+        let file_name = format!("character-animation-frame-{:02}.png", index + 1);
+        let removed = try_remove_editor_downloaded_image_background(
+            state,
+            &DownloadedOpenAiImage {
+                bytes: frame.bytes,
+                mime_type: frame.mime_type,
+                extension: frame.extension,
+            },
+            file_name.as_str(),
+        )
+        .await?;
+        removed_frames.push(finalize_animation_frame_payload(
+            removed.bytes.as_slice(),
+            removed.mime_type.as_str(),
+            frame_width,
+            frame_height,
+            false,
+        )?);
+    }
+    Ok(removed_frames)
+}
+
 async fn publish_animation_set(
     state: &AppState,
     owner_user_id: &str,
@@ -5374,6 +5412,29 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_character_animation_frames_default_to_birefnet_cutout() {
+        let source = include_str!("character_animation_assets.rs");
+        assert_function_contains(
+            source,
+            "async fn extract_and_persist_editor_character_animation_frames",
+            "async fn publish_animation_set",
+            &[
+                "apply_chroma_key: false",
+                "remove_editor_character_animation_frame_backgrounds",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "async fn remove_editor_character_animation_frame_backgrounds",
+            "async fn publish_animation_set",
+            &[
+                "try_remove_editor_downloaded_image_background",
+                "finalize_animation_frame_payload",
+            ],
+        );
+    }
+
     #[test]
     fn editor_character_animation_samples_last_frame_before_decode_tail() {
         let last_frame_seconds = compute_sample_time_seconds(4.0, 31, 32, 0.0, 1.0, false);
diff --git a/server-rs/crates/api-server/src/config.rs b/server-rs/crates/api-server/src/config.rs
index b9baf69d5..f50289e2e 100644
--- a/server-rs/crates/api-server/src/config.rs
+++ b/server-rs/crates/api-server/src/config.rs
@@ -14,6 +14,8 @@ const DEFAULT_INTERNAL_API_SECRET: &str = "genarrative-dev-internal-bridge";
 const SPACETIME_LOCAL_CONFIG_FILE: &str = "spacetime.local.json";
 const DEFAULT_SPACETIME_HEALTH_CHECK_TIMEOUT_SECONDS: u64 = 2;
 pub(crate) const DEFAULT_VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS: u64 = 1_000_000;
+const DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL: &str = "http://58.87.105.82";
+const DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS: u64 = 120_000;
 
 // 集中管理 api-server 的启动配置，避免入口层直接散落环境变量解析逻辑。
 #[derive(Clone, Debug)]
@@ -51,6 +53,9 @@ pub struct AppConfig {
     pub wallet_refund_outbox_flush_interval: Duration,
     pub wallet_refund_outbox_max_bytes: u64,
     pub editor_generation_pricing_override_path: PathBuf,
+    pub editor_background_removal_base_url: String,
+    pub editor_background_removal_token: Option<String>,
+    pub editor_background_removal_request_timeout_ms: u64,
     pub log_filter: String,
     pub otel_enabled: bool,
     pub admin_username: Option<String>,
@@ -273,6 +278,11 @@ impl Default for AppConfig {
             wallet_refund_outbox_max_bytes: 64 * 1024 * 1024,
             editor_generation_pricing_override_path:
                 crate::editor_generation_config::default_editor_generation_pricing_override_path(),
+            editor_background_removal_base_url: DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL
+                .to_string(),
+            editor_background_removal_token: None,
+            editor_background_removal_request_timeout_ms:
+                DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS,
             log_filter: "info,tower_http=info".to_string(),
             otel_enabled: false,
             admin_username: None,
@@ -451,6 +461,18 @@ impl AppConfig {
         {
             config.editor_generation_pricing_override_path = PathBuf::from(pricing_override_path);
         }
+        if let Some(base_url) =
+            read_first_non_empty_env(&["GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL"])
+        {
+            config.editor_background_removal_base_url = base_url;
+        }
+        config.editor_background_removal_token =
+            read_first_non_empty_env(&["GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN"]);
+        if let Some(timeout_ms) = read_first_positive_u64_env(&[
+            "GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS",
+        ]) {
+            config.editor_background_removal_request_timeout_ms = timeout_ms;
+        }
         if let Some(listen_backlog) =
             read_first_positive_i32_env(&["GENARRATIVE_API_LISTEN_BACKLOG"])
         {
@@ -1438,8 +1460,10 @@ fn parse_positive_u16(raw: &str) -> Option<u16> {
 #[cfg(test)]
 mod tests {
     use super::{
-        AppConfig, DEFAULT_VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS, ExternalGenerationMode,
-        LlmProvider, ProcessRole, parse_bool, parse_external_generation_mode, parse_process_role,
+        AppConfig, DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL,
+        DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS,
+        DEFAULT_VECTOR_ENGINE_IMAGE_REQUEST_TIMEOUT_MS, ExternalGenerationMode, LlmProvider,
+        ProcessRole, parse_bool, parse_external_generation_mode, parse_process_role,
     };
     use std::sync::{Mutex, OnceLock};
 
@@ -1453,6 +1477,15 @@ mod tests {
         assert!(config.llm_base_url.is_empty());
         // assert!(config.apimart_base_url.is_empty());
         assert!(config.vector_engine_base_url.is_empty());
+        assert_eq!(
+            config.editor_background_removal_base_url,
+            DEFAULT_EDITOR_BACKGROUND_REMOVAL_BASE_URL
+        );
+        assert_eq!(
+            config.editor_background_removal_request_timeout_ms,
+            DEFAULT_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS
+        );
+        assert!(config.editor_background_removal_token.is_none());
         assert!(config.ark_character_video_base_url.is_empty());
         assert_eq!(config.hyper3d_base_url, "https://api.hyper3d.com/api/v2");
         assert!(config.ark_character_video_model.is_empty());
@@ -2079,6 +2112,46 @@ mod tests {
         }
     }
 
+    #[test]
+    fn from_env_reads_editor_background_removal_settings() {
+        let _guard = ENV_LOCK
+            .get_or_init(|| Mutex::new(()))
+            .lock()
+            .expect("env lock should not poison");
+
+        unsafe {
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS");
+            std::env::set_var(
+                "GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL",
+                "http://10.0.0.12:8090",
+            );
+            std::env::set_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN", "token-1");
+            std::env::set_var(
+                "GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS",
+                "90000",
+            );
+        }
+
+        let config = AppConfig::from_env();
+        assert_eq!(
+            config.editor_background_removal_base_url,
+            "http://10.0.0.12:8090"
+        );
+        assert_eq!(
+            config.editor_background_removal_token.as_deref(),
+            Some("token-1")
+        );
+        assert_eq!(config.editor_background_removal_request_timeout_ms, 90_000);
+
+        unsafe {
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_BASE_URL");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN");
+            std::env::remove_var("GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_REQUEST_TIMEOUT_MS");
+        }
+    }
+
     #[test]
     fn from_env_reads_prefixed_character_animation_ffmpeg_paths() {
         let _guard = ENV_LOCK
diff --git a/server-rs/crates/api-server/src/editor_project.rs b/server-rs/crates/api-server/src/editor_project.rs
index 65c9c6d83..bee07b65b 100644
--- a/server-rs/crates/api-server/src/editor_project.rs
+++ b/server-rs/crates/api-server/src/editor_project.rs
@@ -1,4 +1,4 @@
-use std::{borrow::Cow, collections::BTreeMap};
+use std::{borrow::Cow, collections::BTreeMap, io::Cursor, time::Instant};
 
 use axum::{
     Json,
@@ -12,11 +12,7 @@ use module_assets::{
 };
 use platform_image::{
     DownloadedImage,
-    generated_asset_sheets::{
-        GeneratedAssetSheetAlphaOptions, apply_generated_asset_sheet_alpha_with_options,
-        apply_generated_asset_sheet_green_screen_alpha,
-        slice_generated_icon_spritesheet_all_by_connected_components,
-    },
+    generated_asset_sheets::slice_generated_icon_spritesheet_all_by_connected_components,
 };
 use platform_oss::{
     LegacyAssetPrefix, OssHeadObjectRequest, OssObjectAccess, OssSignedGetObjectUrlRequest,
@@ -227,6 +223,12 @@ pub struct EditorImageEditRequest {
     pub(crate) canvas_completion: Option<EditorCanvasGenerationCompletionRequest>,
 }
 
+#[derive(Clone, Debug, Deserialize, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorBackgroundRemovalRequest {
+    pub(crate) source_image_src: String,
+}
+
 #[derive(Clone, Debug, Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorIconSpritesheetGenerationRequest {
@@ -449,6 +451,19 @@ pub struct EditorImageGenerationResponse {
     project: Option<EditorProjectPayload>,
 }
 
+#[derive(Debug, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct EditorBackgroundRemovalResponse {
+    image_src: String,
+    object_key: String,
+    asset_object_id: String,
+    width: u32,
+    height: u32,
+    task_id: String,
+    elapsed_ms: u64,
+    provider: &'static str,
+}
+
 #[derive(Debug, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct EditorIconSpritesheetIconResponse {
@@ -1288,7 +1303,8 @@ pub(crate) async fn generate_editor_image_for_owner(
         }))
     })?;
     if is_character_generation {
-        image = prepare_editor_character_image_for_response(image);
+        image = try_remove_editor_downloaded_image_background(state, &image, "character-image.png")
+            .await?;
     }
 
     let (width, height) = image::load_from_memory(image.bytes.as_slice())
@@ -1306,6 +1322,7 @@ pub(crate) async fn generate_editor_image_for_owner(
         storage_profile.path_kind,
         "image",
         storage_profile.slot,
+        "vector-engine",
     );
     let persisted = persisted.await?;
     let image_src = editor_media_src_from_object_key(persisted.object_key.as_str());
@@ -1713,6 +1730,7 @@ pub(crate) async fn edit_editor_image_for_owner(
         "edit-images",
         "image",
         "edit",
+        "vector-engine",
     )
     .await?;
     let image_src = editor_media_src_from_object_key(persisted.object_key.as_str());
@@ -1771,6 +1789,251 @@ pub(crate) async fn edit_editor_image_for_owner(
     ))
 }
 
+pub async fn remove_editor_image_background(
+    State(state): State<AppState>,
+    Extension(request_context): Extension<RequestContext>,
+    Extension(authenticated): Extension<AuthenticatedAccessToken>,
+    Json(payload): Json<EditorBackgroundRemovalRequest>,
+) -> Result<Json<Value>, AppError> {
+    let started_at = Instant::now();
+    let caller = EditorGenerationCaller::from_authenticated(&authenticated);
+    let source_image = parse_editor_reference_image(
+        &state,
+        caller.owner_user_id.as_str(),
+        payload.source_image_src.as_str(),
+    )
+    .await?;
+    let removed = request_editor_background_removal_image(&state, source_image).await?;
+    let task_id = format!("background-removal-{}", current_utc_micros());
+    let persisted = persist_editor_generated_image(
+        &state,
+        caller.owner_user_id.as_str(),
+        task_id.as_str(),
+        &removed.image,
+        "remove background",
+        None,
+        "background-removal",
+        "background-removal",
+        "removed-background",
+        "result",
+        "birefnet",
+    )
+    .await?;
+
+    Ok(json_success_body(
+        Some(&request_context),
+        EditorBackgroundRemovalResponse {
+            image_src: editor_media_src_from_object_key(persisted.object_key.as_str()),
+            object_key: persisted.object_key,
+            asset_object_id: persisted.asset_object_id,
+            width: removed.width,
+            height: removed.height,
+            task_id,
+            elapsed_ms: u64::try_from(started_at.elapsed().as_millis()).unwrap_or(u64::MAX),
+            provider: "BiRefNet",
+        },
+    ))
+}
+
+struct EditorBackgroundRemovalImage {
+    image: DownloadedOpenAiImage,
+    width: u32,
+    height: u32,
+}
+
+async fn request_editor_background_removal_image(
+    state: &AppState,
+    source_image: OpenAiReferenceImage,
+) -> Result<EditorBackgroundRemovalImage, AppError> {
+    let url = editor_background_removal_endpoint(state)?;
+    let http_client = reqwest::Client::builder()
+        .timeout(std::time::Duration::from_millis(
+            state
+                .config
+                .editor_background_removal_request_timeout_ms
+                .max(1),
+        ))
+        .build()
+        .map_err(|error| {
+            AppError::from_status(StatusCode::INTERNAL_SERVER_ERROR).with_details(json!({
+                "provider": "birefnet",
+                "message": format!("创建抠图 HTTP 客户端失败：{error}"),
+            }))
+        })?;
+    let file_part = reqwest::multipart::Part::bytes(source_image.bytes)
+        .file_name(source_image.file_name)
+        .mime_str(source_image.mime_type.as_str())
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_REQUEST).with_details(json!({
+                "provider": "birefnet",
+                "message": format!("图片 MIME 类型无效：{error}"),
+            }))
+        })?;
+    let mut request = http_client
+        .post(url.as_str())
+        .multipart(reqwest::multipart::Form::new().part("file", file_part));
+    if let Some(token) = state
+        .config
+        .editor_background_removal_token
+        .as_deref()
+        .map(str::trim)
+        .filter(|token| !token.is_empty())
+    {
+        request = request.header("X-Genarrative-Image-Token", token);
+    }
+    let response = request
+        .send()
+        .await
+        .map_err(map_editor_background_removal_error)?;
+    let status = response.status();
+    if !status.is_success() {
+        let message = response
+            .text()
+            .await
+            .unwrap_or_else(|error| format!("读取上游错误失败：{error}"));
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务返回非成功状态",
+                "upstreamStatus": status.as_u16(),
+                "upstreamMessage": message.chars().take(500).collect::<String>(),
+            })),
+        );
+    }
+    let mime_type = response
+        .headers()
+        .get(reqwest::header::CONTENT_TYPE)
+        .and_then(|value| value.to_str().ok())
+        .and_then(normalize_editor_reference_image_mime_type)
+        .unwrap_or("image/png")
+        .to_string();
+    let bytes = read_editor_background_removal_bytes(response).await?;
+    if bytes.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务未返回图片",
+            })),
+        );
+    }
+    let decoded = decode_editor_background_removal_image(bytes.as_slice())?;
+    let image = DownloadedOpenAiImage {
+        bytes,
+        extension: editor_reference_image_extension(mime_type.as_str()).to_string(),
+        mime_type,
+    };
+
+    Ok(EditorBackgroundRemovalImage {
+        image,
+        width: decoded.width(),
+        height: decoded.height(),
+    })
+}
+
+pub(crate) async fn try_remove_editor_downloaded_image_background(
+    state: &AppState,
+    image: &DownloadedOpenAiImage,
+    file_name: &str,
+) -> Result<DownloadedOpenAiImage, AppError> {
+    let removed = request_editor_background_removal_image(
+        state,
+        OpenAiReferenceImage {
+            bytes: image.bytes.clone(),
+            mime_type: image.mime_type.clone(),
+            file_name: file_name.to_string(),
+        },
+    )
+    .await?;
+    Ok(removed.image)
+}
+
+fn editor_background_removal_endpoint(state: &AppState) -> Result<String, AppError> {
+    let base_url = state.config.editor_background_removal_base_url.trim();
+    if base_url.is_empty() {
+        return Err(
+            AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务地址未配置",
+            })),
+        );
+    }
+    Ok(format!(
+        "{}/remove-background",
+        base_url.trim_end_matches('/')
+    ))
+}
+
+fn map_editor_background_removal_error(error: reqwest::Error) -> AppError {
+    let status = if error.is_timeout() {
+        StatusCode::GATEWAY_TIMEOUT
+    } else {
+        StatusCode::BAD_GATEWAY
+    };
+    AppError::from_status(status).with_details(json!({
+        "provider": "birefnet",
+        "message": format!("请求抠图服务失败：{error}"),
+        "timeout": error.is_timeout(),
+    }))
+}
+
+async fn read_editor_background_removal_bytes(
+    mut response: reqwest::Response,
+) -> Result<Vec<u8>, AppError> {
+    if response.content_length().is_some_and(|content_length| {
+        content_length > EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES as u64
+    }) {
+        return Err(
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": "抠图服务返回图片过大",
+                "maxBytes": EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES,
+            })),
+        );
+    }
+    let mut bytes = Vec::new();
+    while let Some(chunk) = response.chunk().await.map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "birefnet",
+            "message": format!("读取抠图结果失败：{error}"),
+        }))
+    })? {
+        if bytes.len().saturating_add(chunk.len()) > EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES {
+            return Err(
+                AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                    "provider": "birefnet",
+                    "message": "抠图服务返回图片过大",
+                    "maxBytes": EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES,
+                })),
+            );
+        }
+        bytes.extend_from_slice(chunk.as_ref());
+    }
+    Ok(bytes)
+}
+
+fn decode_editor_background_removal_image(bytes: &[u8]) -> Result<image::DynamicImage, AppError> {
+    let mut reader = image::ImageReader::new(Cursor::new(bytes))
+        .with_guessed_format()
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "birefnet",
+                "message": format!("识别抠图结果格式失败：{error}"),
+            }))
+        })?;
+    let mut limits = image::Limits::default();
+    limits.max_image_width = Some(EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION);
+    limits.max_image_height = Some(EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION);
+    limits.max_alloc = Some(EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES as u64 * 4);
+    reader.limits(limits);
+    reader.decode().map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "birefnet",
+            "message": format!("抠图结果不是有效图片：{error}"),
+            "maxDimension": EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION,
+        }))
+    })
+}
+
 pub async fn generate_editor_icon_spritesheet(
     State(state): State<AppState>,
     Extension(request_context): Extension<RequestContext>,
@@ -1918,7 +2181,9 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
             "message": "VectorEngine 未返回图标 spritesheet",
         }))
     })?;
-    let image = prepare_editor_icon_spritesheet_image_for_persist(image)?;
+    let image =
+        try_remove_editor_downloaded_image_background(state, &image, "icon-spritesheet.png")
+            .await?;
     let (spritesheet_width, spritesheet_height) = image::load_from_memory(image.bytes.as_slice())
         .map(|image| (image.width(), image.height()))
         .unwrap_or((512, 512));
@@ -1935,6 +2200,7 @@ pub(crate) async fn generate_editor_icon_spritesheet_for_owner(
         "icon-spritesheets",
         "spritesheet",
         "spritesheet",
+        "vector-engine",
     )
     .await?;
     let spritesheet_image_src =
@@ -2145,6 +2411,8 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             "message": "VectorEngine 未返回 UI 设计图素材 spritesheet",
         }))
     })?;
+    let image =
+        try_remove_editor_downloaded_image_background(state, &image, "ui-spritesheet.png").await?;
     let (spritesheet_width, spritesheet_height) = image::load_from_memory(image.bytes.as_slice())
         .map(|image| (image.width(), image.height()))
         .unwrap_or((512, 512));
@@ -2174,6 +2442,7 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
         "ui-design-spritesheets",
         "spritesheet",
         "spritesheet",
+        "vector-engine",
     )
     .await?;
     let spritesheet_image_src =
@@ -2226,6 +2495,7 @@ pub(crate) async fn extract_editor_ui_design_assets_for_owner(
             "ui-design-assets",
             icon_file_stem.as_str(),
             "asset",
+            "vector-engine",
         )
         .await?;
         let icon_image_src = editor_media_src_from_object_key(icon_persisted.object_key.as_str());
@@ -2500,6 +2770,7 @@ async fn persist_editor_legacy_inline_image(
         path_kind,
         file_stem,
         "legacy-repair",
+        "vector-engine",
     )
     .await
 }
@@ -3688,33 +3959,6 @@ fn build_editor_icon_spritesheet_prompt(icon_descriptions: &[String]) -> String
     )
 }
 
-fn prepare_editor_icon_spritesheet_image_for_persist(
-    image: DownloadedOpenAiImage,
-) -> Result<DownloadedOpenAiImage, AppError> {
-    let decoded = image::load_from_memory(image.bytes.as_slice()).map_err(|error| {
-        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
-            "provider": "editor-icon-spritesheet",
-            "message": format!("图标素材图集解码失败：{error}"),
-        }))
-    })?;
-    let processed = apply_generated_asset_sheet_green_screen_alpha(decoded);
-    let mut encoded = std::io::Cursor::new(Vec::new());
-    processed
-        .write_to(&mut encoded, image::ImageFormat::Png)
-        .map_err(|error| {
-            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
-                "provider": "editor-icon-spritesheet",
-                "message": format!("图标素材图集去绿失败：{error}"),
-            }))
-        })?;
-
-    Ok(DownloadedOpenAiImage {
-        bytes: encoded.into_inner(),
-        mime_type: "image/png".to_string(),
-        extension: "png".to_string(),
-    })
-}
-
 fn build_editor_ui_design_prompt(user_input: &str, has_icon_spec_reference: bool) -> String {
     let mut prompt = vec![
         "生成玩法UI原型图".to_string(),
@@ -3734,41 +3978,6 @@ fn build_editor_character_image_prompt(role_setting: &str) -> String {
     .join("\n")
 }
 
-fn prepare_editor_character_image_for_response(
-    image: DownloadedOpenAiImage,
-) -> DownloadedOpenAiImage {
-    let Ok(decoded) = image::load_from_memory(image.bytes.as_slice()) else {
-        return image;
-    };
-
-    let processed = apply_generated_asset_sheet_alpha_with_options(
-        decoded,
-        editor_general_cutout_alpha_options(),
-    );
-    let mut encoded = std::io::Cursor::new(Vec::new());
-    if processed
-        .write_to(&mut encoded, image::ImageFormat::Png)
-        .is_err()
-    {
-        return image;
-    }
-
-    DownloadedOpenAiImage {
-        bytes: encoded.into_inner(),
-        mime_type: "image/png".to_string(),
-        extension: "png".to_string(),
-    }
-}
-
-fn editor_general_cutout_alpha_options() -> GeneratedAssetSheetAlphaOptions {
-    GeneratedAssetSheetAlphaOptions {
-        remove_muted_green_screen_background: true,
-        detect_internal_holes: true,
-        internal_hole_min_pixels: 16,
-        ..GeneratedAssetSheetAlphaOptions::green_screen()
-    }
-}
-
 #[derive(Debug, Clone, PartialEq, Eq)]
 struct EditorGenerationOptions {
     model: &'static str,
@@ -3794,6 +4003,7 @@ pub(crate) async fn persist_editor_generated_image(
     path_kind: &str,
     file_stem: &str,
     slot: &str,
+    provider: &str,
 ) -> Result<PersistedEditorGeneratedImage, AppError> {
     let oss_client = state.oss_client().ok_or_else(|| {
         AppError::from_status(StatusCode::SERVICE_UNAVAILABLE).with_details(json!({
@@ -3821,7 +4031,7 @@ pub(crate) async fn persist_editor_generated_image(
                 entity_kind: Some(EDITOR_CHARACTER_IMAGE_ENTITY_KIND.to_string()),
                 entity_id: Some(task_id.to_string()),
                 slot: Some(slot.to_string()),
-                provider: Some("vector-engine".to_string()),
+                provider: Some(provider.to_string()),
                 task_id: Some(task_id.to_string()),
             },
             extra_metadata: BTreeMap::from([(
@@ -3887,6 +4097,8 @@ pub(crate) async fn persist_editor_generated_image(
 
 const EDITOR_REFERENCE_IMAGE_READ_EXPIRE_SECONDS: u64 = 300;
 const EDITOR_REFERENCE_IMAGE_MAX_SIZE_BYTES: u64 = 32 * 1024 * 1024;
+const EDITOR_BACKGROUND_REMOVAL_MAX_RESPONSE_BYTES: usize = 32 * 1024 * 1024;
+const EDITOR_BACKGROUND_REMOVAL_MAX_IMAGE_DIMENSION: u32 = 8192;
 
 pub(crate) async fn parse_editor_reference_image(
     state: &AppState,
@@ -4949,170 +5161,6 @@ mod tests {
         assert!(prompt.contains("角色设定：菜市场卖菜大妈"));
     }
 
-    #[test]
-    fn editor_character_image_uses_general_cutout_for_green_screen_background() {
-        let width = 12;
-        let height = 12;
-        let mut image = image::RgbaImage::from_pixel(width, height, image::Rgba([0, 255, 0, 255]));
-        for y in 4..8 {
-            for x in 4..8 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(processed.mime_type, "image/png");
-        assert_eq!(processed.extension, "png");
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(5, 5).0[3], 255);
-    }
-
-    #[test]
-    fn editor_icon_spritesheet_is_persisted_as_transparent_png() {
-        let width = 12;
-        let height = 12;
-        let mut image = image::RgbaImage::from_pixel(width, height, image::Rgba([0, 255, 0, 255]));
-        for y in 4..8 {
-            for x in 4..8 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_icon_spritesheet_image_for_persist(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        })
-        .expect("spritesheet should process");
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(processed.mime_type, "image/png");
-        assert_eq!(processed.extension, "png");
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(5, 5).0[3], 255);
-    }
-
-    #[test]
-    fn editor_character_image_general_cutout_removes_muted_green_background() {
-        let width = 20;
-        let height = 20;
-        let mut image =
-            image::RgbaImage::from_pixel(width, height, image::Rgba([59, 131, 67, 255]));
-        for x in 0..width {
-            image.put_pixel(x, 0, image::Rgba([59, 81, 67, 255]));
-            image.put_pixel(x, height - 1, image::Rgba([63, 84, 70, 255]));
-        }
-        for y in 0..height {
-            image.put_pixel(0, y, image::Rgba([59, 81, 67, 255]));
-            image.put_pixel(width - 1, y, image::Rgba([63, 84, 70, 255]));
-        }
-        for y in 7..13 {
-            for x in 7..13 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(4, 4).0[3], 0);
-        assert_eq!(decoded.get_pixel(10, 10).0[3], 255);
-    }
-
-    #[test]
-    fn editor_character_image_general_cutout_converts_non_png_to_transparent_png() {
-        let width = 12;
-        let height = 12;
-        let mut image =
-            image::RgbImage::from_pixel(width, height, image::Rgb([0_u8, 255_u8, 0_u8]));
-        for y in 4..8 {
-            for x in 4..8 {
-                image.put_pixel(x, y, image::Rgb([188, 82, 45]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgb8(image)
-            .write_to(&mut encoded, image::ImageFormat::Jpeg)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/jpeg".to_string(),
-            extension: "jpg".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(processed.mime_type, "image/png");
-        assert_eq!(processed.extension, "png");
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(5, 5).0[3], 255);
-    }
-
-    #[test]
-    fn editor_character_image_general_cutout_removes_internal_green_holes() {
-        let width = 16;
-        let height = 16;
-        let mut image = image::RgbaImage::from_pixel(width, height, image::Rgba([0, 255, 0, 255]));
-        for y in 3..13 {
-            for x in 3..13 {
-                image.put_pixel(x, y, image::Rgba([188, 82, 45, 255]));
-            }
-        }
-        for y in 6..10 {
-            for x in 6..10 {
-                image.put_pixel(x, y, image::Rgba([0, 255, 0, 255]));
-            }
-        }
-        let mut encoded = std::io::Cursor::new(Vec::new());
-        image::DynamicImage::ImageRgba8(image)
-            .write_to(&mut encoded, image::ImageFormat::Png)
-            .expect("test image should encode");
-
-        let processed = prepare_editor_character_image_for_response(DownloadedOpenAiImage {
-            bytes: encoded.into_inner(),
-            mime_type: "image/png".to_string(),
-            extension: "png".to_string(),
-        });
-        let decoded = image::load_from_memory(processed.bytes.as_slice())
-            .expect("processed image should decode")
-            .to_rgba8();
-
-        assert_eq!(decoded.get_pixel(0, 0).0[3], 0);
-        assert_eq!(decoded.get_pixel(7, 7).0[3], 0);
-        assert_eq!(decoded.get_pixel(4, 4).0[3], 255);
-    }
-
     #[test]
     fn editor_canvas_generation_completion_inserts_result_layer_and_marks_dialog_idle() {
         let layers = json!([
@@ -5599,6 +5647,7 @@ mod tests {
             label: "图标规范".to_string(),
             asset_object_id: Some("asset-object-1".to_string()),
             image_src: "/generated-character-drafts/editor/spec.png".to_string(),
+            thumbnail_src: None,
             object_key: None,
             width: 512,
             height: 512,
@@ -5919,6 +5968,62 @@ mod tests {
         );
     }
 
+    #[test]
+    fn editor_canvas_cutout_generation_defaults_to_birefnet() {
+        let source = include_str!("editor_project.rs");
+        assert_function_contains(
+            source,
+            "pub(crate) async fn generate_editor_image_for_owner",
+            "fn normalize_editor_image_generation_size",
+            &[
+                "try_remove_editor_downloaded_image_background",
+                "\"character-image.png\"",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "pub(crate) async fn generate_editor_icon_spritesheet_for_owner",
+            "pub async fn extract_editor_ui_design_assets",
+            &[
+                "try_remove_editor_downloaded_image_background",
+                "\"icon-spritesheet.png\"",
+            ],
+        );
+        assert_function_contains(
+            source,
+            "pub(crate) async fn extract_editor_ui_design_assets_for_owner",
+            "pub(crate) fn editor_project_payload_from_record",
+            &[
+                "try_remove_editor_downloaded_image_background",
+                "\"ui-spritesheet.png\"",
+            ],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn generate_editor_image_for_owner",
+            "fn normalize_editor_image_generation_size",
+            &[
+                concat!("prepare_editor_", "character_image_for_response"),
+                "Err(_)",
+            ],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn generate_editor_icon_spritesheet_for_owner",
+            "pub async fn extract_editor_ui_design_assets",
+            &[
+                concat!("prepare_editor_", "icon_spritesheet_image_for_persist"),
+                "Err(_)",
+            ],
+        );
+        assert_function_not_contains(
+            source,
+            "pub(crate) async fn extract_editor_ui_design_assets_for_owner",
+            "pub(crate) fn editor_project_payload_from_record",
+            &["Err(_) => image"],
+        );
+    }
+
     #[test]
     fn generated_asset_folder_id_normalizes_project_and_legacy_local_folder() {
         assert_eq!(
@@ -5959,4 +6064,21 @@ mod tests {
             );
         }
     }
+
+    fn assert_function_not_contains(source: &str, start: &str, end: &str, snippets: &[&str]) {
+        let start_index = source
+            .find(start)
+            .unwrap_or_else(|| panic!("missing function start marker: {start}"));
+        let tail = &source[start_index..];
+        let end_index = tail
+            .find(end)
+            .unwrap_or_else(|| panic!("missing function end marker: {end}"));
+        let body = &tail[..end_index];
+        for snippet in snippets {
+            assert!(
+                !body.contains(snippet),
+                "function body starting with {start} should not contain {snippet}"
+            );
+        }
+    }
 }
diff --git a/server-rs/crates/api-server/src/modules/editor_project.rs b/server-rs/crates/api-server/src/modules/editor_project.rs
index 3d11ab36c..977c27b4b 100644
--- a/server-rs/crates/api-server/src/modules/editor_project.rs
+++ b/server-rs/crates/api-server/src/modules/editor_project.rs
@@ -13,9 +13,9 @@ use crate::{
         delete_editor_project, edit_editor_image, extract_editor_ui_design_assets,
         generate_editor_icon_spritesheet, generate_editor_image, get_editor_asset_library,
         get_editor_generation_pricing, get_editor_project, list_editor_projects,
-        list_public_editor_project_resources, load_recent_editor_project, rename_editor_project,
-        save_editor_project_layout, update_editor_asset, update_editor_asset_folder,
-        update_editor_project_resource_showcase,
+        list_public_editor_project_resources, load_recent_editor_project,
+        remove_editor_image_background, rename_editor_project, save_editor_project_layout,
+        update_editor_asset, update_editor_asset_folder, update_editor_project_resource_showcase,
     },
     state::AppState,
 };
@@ -140,6 +140,17 @@ pub fn router(state: AppState) -> Router<AppState> {
                     require_bearer_auth,
                 )),
         )
+        .route(
+            "/api/editor/images/background-removals",
+            post(remove_editor_image_background)
+                .layer(DefaultBodyLimit::max(
+                    EDITOR_IMAGE_REFERENCE_BODY_LIMIT_BYTES,
+                ))
+                .route_layer(middleware::from_fn_with_state(
+                    state.clone(),
+                    require_bearer_auth,
+                )),
+        )
         .route(
             "/api/editor/icon-spritesheets/generations",
             post(generate_editor_icon_spritesheet)
diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
index d99142629..8dd42d51f 100644
--- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx
@@ -132,6 +132,8 @@ function createStageProps(): ImageCanvasStageViewProps {
     hoveredLayerId: null,
     canvasMarquee: null,
     canvasGenerationDialogs: [],
+    backgroundRemovalTasks: [],
+    isTaskSidebarOpen: false,
     generateDialog: null,
     cropExpandPanel: null,
     cropExpandSourceLayer: null,
@@ -173,6 +175,7 @@ function createStageProps(): ImageCanvasStageViewProps {
     onUpdateLayerAssetKind: vi.fn(),
     onGenerationFramePointerDown: vi.fn(),
     onActivateGenerationDialog: vi.fn(),
+    onToggleTaskSidebar: vi.fn(),
     onCropExpandHandlePointerDown: vi.fn(),
     onOpenQuickEditPanel: vi.fn(),
     onOpenRedrawPanel: vi.fn(),
diff --git a/src/components/image-editor/ImageCanvasEditorTypes.ts b/src/components/image-editor/ImageCanvasEditorTypes.ts
index 6524be461..12f20397a 100644
--- a/src/components/image-editor/ImageCanvasEditorTypes.ts
+++ b/src/components/image-editor/ImageCanvasEditorTypes.ts
@@ -248,6 +248,20 @@ export type CanvasGenerationDialogState = GenerateDialogState & {
   mode: CanvasGenerationDialogMode;
 };
 
+export type CanvasTaskStatus = 'pending' | 'running' | 'done' | 'failed';
+
+export type CanvasTaskListItem = {
+  id: string;
+  title: string;
+  detail: string;
+  status: CanvasTaskStatus;
+  startedAt: number;
+  finishedAt?: number;
+  elapsedMs?: number;
+  provider?: string;
+  errorMessage?: string;
+};
+
 export type ImageContextMenuState = {
   layerId: string;
   x: number;
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 8ed190253..7f589ccfc 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1499,6 +1499,8 @@ export function ImageCanvasEditorView() {
     hoveredLayerId,
     canvasMarquee,
     canvasGenerationDialogs,
+    backgroundRemovalTasks: generationSurface.backgroundRemovalTasks,
+    isTaskSidebarOpen: generationSurface.isTaskSidebarOpen,
     generateDialog,
     cropExpandPanel: generationSurface.cropExpandPanel,
     cropExpandSourceLayer: generationSurface.cropExpandSourceLayer,
@@ -1545,6 +1547,7 @@ export function ImageCanvasEditorView() {
     onUpdateLayerAssetKind: updateLayerAssetKind,
     onGenerationFramePointerDown: handleGenerationFramePointerDown,
     onActivateGenerationDialog: activateCanvasGenerationDialog,
+    onToggleTaskSidebar: generationSurface.toggleTaskSidebar,
     onCropExpandHandlePointerDown: generationSurface.startCropExpandFrameResize,
     onOpenQuickEditPanel: openQuickEditPanel,
     onOpenRedrawPanel: openRedrawPanel,
diff --git a/src/components/image-editor/ImageCanvasRasterEditModel.ts b/src/components/image-editor/ImageCanvasRasterEditModel.ts
index 3b5f328c0..905569847 100644
--- a/src/components/image-editor/ImageCanvasRasterEditModel.ts
+++ b/src/components/image-editor/ImageCanvasRasterEditModel.ts
@@ -1,4 +1,4 @@
-import { removeBackgroundFromRgba } from '../../../packages/shared/src/assets/chromaKey';
+import { removeEditorImageBackground } from '../../services/image-editor/editorProjectClient';
 
 export type CropExpandInsets = {
   left: number;
@@ -27,8 +27,13 @@ export type CropExpandFrame = {
 
 export type RasterEditResult = {
   imageSrc: string;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
   width: number;
   height: number;
+  taskId?: string | null;
+  elapsedMs?: number;
+  provider?: string;
 };
 
 function assertCanvasSupport() {
@@ -209,17 +214,5 @@ export async function renderCropExpandImage({
 export async function removeImageBackground(
   source: string,
 ): Promise<RasterEditResult> {
-  const image = await loadImageElement(source);
-  const { width, height } = resolveImageSize(image);
-  const { canvas, context } = createRasterCanvas(width, height);
-  context.drawImage(image, 0, 0, width, height);
-  const imageData = context.getImageData(0, 0, width, height);
-  removeBackgroundFromRgba(imageData.data, width, height);
-
-  context.putImageData(imageData, 0, 0);
-  return {
-    imageSrc: canvas.toDataURL('image/png'),
-    width,
-    height,
-  };
+  return removeEditorImageBackground({ sourceImageSrc: source });
 }
diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx
index 5cdf52807..c167180b8 100644
--- a/src/components/image-editor/ImageCanvasStageView.tsx
+++ b/src/components/image-editor/ImageCanvasStageView.tsx
@@ -14,6 +14,7 @@ import type {
   CanvasClipboard,
   CanvasContextMenuState,
   CanvasGenerationDialogState,
+  CanvasTaskListItem,
   CanvasLayer,
   CanvasMarqueeState,
   CanvasTool,
@@ -28,6 +29,7 @@ import type {
 import type { StageMinimapModel } from './ImageCanvasInteractionModel';
 import { ImageCanvasPanelDockView } from './ImageCanvasPanelDockView';
 import { ImageCanvasSelectedLayerToolbarView } from './ImageCanvasSelectedLayerToolbarView';
+import { ImageCanvasTaskSidebarView } from './ImageCanvasTaskSidebarView';
 import type {
   UiAssetExtractionState,
   UiAssetExtractionTool,
@@ -52,6 +54,8 @@ export type ImageCanvasStageViewProps = {
   hoveredLayerId: string | null;
   canvasMarquee: CanvasMarqueeState | null;
   canvasGenerationDialogs: CanvasGenerationDialogState[];
+  backgroundRemovalTasks: CanvasTaskListItem[];
+  isTaskSidebarOpen: boolean;
   generateDialog: GenerateDialogState | null;
   cropExpandPanel: CropExpandPanelState | null;
   cropExpandSourceLayer: CanvasLayer | null;
@@ -109,6 +113,7 @@ export type ImageCanvasStageViewProps = {
     dialog: CanvasGenerationDialogState,
   ) => void;
   onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
+  onToggleTaskSidebar: () => void;
   onCropExpandHandlePointerDown: (
     event: ReactPointerEvent<HTMLButtonElement>,
     handle: CropExpandResizeHandle,
@@ -186,6 +191,8 @@ export function ImageCanvasStageView({
   hoveredLayerId,
   canvasMarquee,
   canvasGenerationDialogs,
+  backgroundRemovalTasks,
+  isTaskSidebarOpen,
   generateDialog,
   cropExpandPanel,
   cropExpandSourceLayer,
@@ -228,6 +235,7 @@ export function ImageCanvasStageView({
   onUpdateLayerAssetKind,
   onGenerationFramePointerDown,
   onActivateGenerationDialog,
+  onToggleTaskSidebar,
   onCropExpandHandlePointerDown,
   onOpenQuickEditPanel,
   onOpenRedrawPanel,
@@ -424,6 +432,14 @@ export function ImageCanvasStageView({
         onMinimapPointerDown={onMinimapPointerDown}
       />
 
+      <ImageCanvasTaskSidebarView
+        generationDialogs={canvasGenerationDialogs}
+        backgroundRemovalTasks={backgroundRemovalTasks}
+        open={isTaskSidebarOpen}
+        onToggleOpen={onToggleTaskSidebar}
+        onActivateGenerationDialog={onActivateGenerationDialog}
+      />
+
       <ImageCanvasBottomToolbarView
         specToolWrapRef={specToolWrapRef}
         musicToolWrapRef={musicToolWrapRef}
diff --git a/src/components/image-editor/ImageCanvasTaskSidebarView.tsx b/src/components/image-editor/ImageCanvasTaskSidebarView.tsx
new file mode 100644
index 000000000..2d0bc7034
--- /dev/null
+++ b/src/components/image-editor/ImageCanvasTaskSidebarView.tsx
@@ -0,0 +1,207 @@
+import {
+  CheckCircle2,
+  Clock3,
+  ListChecks,
+  Loader2,
+  XCircle,
+} from 'lucide-react';
+import { useMemo } from 'react';
+
+import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import type {
+  CanvasGenerationDialogState,
+  CanvasTaskListItem,
+  CanvasTaskStatus,
+} from './ImageCanvasEditorTypes';
+
+type TaskSidebarItem = {
+  id: string;
+  title: string;
+  detail: string;
+  status: CanvasTaskStatus;
+  elapsedMs?: number;
+  errorMessage?: string;
+  onClick?: () => void;
+};
+
+type ImageCanvasTaskSidebarViewProps = {
+  generationDialogs: CanvasGenerationDialogState[];
+  backgroundRemovalTasks: CanvasTaskListItem[];
+  open: boolean;
+  onToggleOpen: () => void;
+  onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void;
+};
+
+function formatElapsedMs(elapsedMs?: number) {
+  if (typeof elapsedMs !== 'number' || !Number.isFinite(elapsedMs)) {
+    return null;
+  }
+  const seconds = elapsedMs / 1000;
+  return seconds >= 10 ? `${Math.round(seconds)}秒` : `${seconds.toFixed(1)}秒`;
+}
+
+function generationDialogTitle(dialog: CanvasGenerationDialogState) {
+  switch (dialog.mode) {
+    case 'quick-edit':
+      return '局部修改';
+    case 'character-animation':
+      return '角色动画';
+    case 'video':
+      return '视频生成';
+    case 'audio-sound-effect':
+      return '音效生成';
+    case 'audio-background-music':
+      return '背景音乐';
+    case 'icon':
+      return '图标素材';
+    case 'ui-design':
+      return 'UI素材提取';
+    case 'publication':
+      return '宣发素材';
+    case 'character':
+      return '角色图片';
+    case 'spec':
+      return '图片规范';
+    default:
+      return '图片生成';
+  }
+}
+
+function generationDialogDetail(dialog: CanvasGenerationDialogState) {
+  if (dialog.status === 'generating') {
+    return '生成中';
+  }
+  if (dialog.status === 'failed') {
+    return dialog.errorMessage || '生成失败';
+  }
+  return dialog.generatedLayerId ? '生成完成' : '待提交';
+}
+
+function statusLabel(status: CanvasTaskStatus) {
+  if (status === 'pending') {
+    return '待提交';
+  }
+  if (status === 'running') {
+    return '进行中';
+  }
+  if (status === 'failed') {
+    return '失败';
+  }
+  return '完成';
+}
+
+function statusIcon(status: CanvasTaskStatus) {
+  if (status === 'pending') {
+    return <Clock3 className="h-3.5 w-3.5" aria-hidden="true" />;
+  }
+  if (status === 'running') {
+    return <Loader2 className="h-3.5 w-3.5" aria-hidden="true" />;
+  }
+  if (status === 'failed') {
+    return <XCircle className="h-3.5 w-3.5" aria-hidden="true" />;
+  }
+  return <CheckCircle2 className="h-3.5 w-3.5" aria-hidden="true" />;
+}
+
+export function ImageCanvasTaskSidebarView({
+  generationDialogs,
+  backgroundRemovalTasks,
+  open,
+  onToggleOpen,
+  onActivateGenerationDialog,
+}: ImageCanvasTaskSidebarViewProps) {
+  const items = useMemo<TaskSidebarItem[]>(() => {
+    const generationItems: TaskSidebarItem[] = generationDialogs.map(
+      (dialog) => ({
+        id: `generation-${dialog.id}`,
+        title: generationDialogTitle(dialog),
+        detail: generationDialogDetail(dialog),
+        status:
+          dialog.status === 'generating'
+            ? 'running'
+            : dialog.status === 'failed'
+              ? 'failed'
+              : dialog.generatedLayerId
+                ? 'done'
+                : 'pending',
+        errorMessage: dialog.errorMessage,
+        onClick: () => onActivateGenerationDialog(dialog),
+      }),
+    );
+    return [...backgroundRemovalTasks, ...generationItems];
+  }, [backgroundRemovalTasks, generationDialogs, onActivateGenerationDialog]);
+
+  if (!open && items.length === 0) {
+    return (
+      <div className="image-canvas-editor__task-sidebar image-canvas-editor__task-sidebar--closed">
+        <EditorIconButton
+          className="image-canvas-editor__task-sidebar-toggle"
+          label="任务列表"
+          title="任务列表"
+          icon={ListChecks}
+          expanded={false}
+          onClick={onToggleOpen}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <aside
+      className={`image-canvas-editor__task-sidebar ${open ? 'image-canvas-editor__task-sidebar--open' : 'image-canvas-editor__task-sidebar--closed'}`}
+      aria-label="画布任务列表"
+    >
+      <EditorIconButton
+        className="image-canvas-editor__task-sidebar-toggle"
+        label="任务列表"
+        title="任务列表"
+        icon={ListChecks}
+        expanded={open}
+        onClick={onToggleOpen}
+      />
+      {open ? (
+        <div className="image-canvas-editor__task-sidebar-panel">
+          <div className="image-canvas-editor__task-sidebar-header">
+            <strong>任务列表</strong>
+            <span>{items.length}</span>
+          </div>
+          {items.length > 0 ? (
+            <div className="image-canvas-editor__task-sidebar-list">
+              {items.map((item) => {
+                const elapsedLabel = formatElapsedMs(item.elapsedMs);
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    className={`image-canvas-editor__task-sidebar-item image-canvas-editor__task-sidebar-item--${item.status}`}
+                    onClick={item.onClick}
+                    disabled={!item.onClick}
+                  >
+                    <span className="image-canvas-editor__task-sidebar-item-icon">
+                      {statusIcon(item.status)}
+                    </span>
+                    <span className="image-canvas-editor__task-sidebar-item-main">
+                      <span className="image-canvas-editor__task-sidebar-item-title">
+                        {item.title}
+                      </span>
+                      <span className="image-canvas-editor__task-sidebar-item-detail">
+                        {item.detail}
+                        {elapsedLabel ? ` · 耗时 ${elapsedLabel}` : ''}
+                        {item.errorMessage && item.detail !== item.errorMessage
+                          ? ` · ${item.errorMessage}`
+                          : ''}
+                      </span>
+                    </span>
+                    <span className="image-canvas-editor__task-sidebar-item-status">
+                      {statusLabel(item.status)}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </aside>
+  );
+}
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
index 3870cc864..7dd2e2ae8 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx
@@ -249,6 +249,14 @@ function GenerationWorkflowHarness({
       <span data-testid="fit-count">
         {fitLayersMockRef.current.mock.calls.length}
       </span>
+      <span data-testid="background-tasks">
+        {workflow.backgroundRemovalTasks
+          .map(
+            (task) =>
+              `${task.title}:${task.status}:${task.elapsedMs ?? '-'}:${task.provider ?? '-'}`,
+          )
+          .join('|') || '-'}
+      </span>
       <button type="button" onClick={workflow.openGenerateDialog}>
         打开生成
       </button>
@@ -1580,9 +1588,16 @@ describe('useImageCanvasGenerationWorkflow', () => {
       'data:image/png;base64,resolved-character',
     );
     removeImageBackgroundMock.mockResolvedValueOnce({
-      imageSrc: 'data:image/png;base64,no-background',
+      imageSrc:
+        '/generated-character-drafts/editor/background-removal/result.png',
+      objectKey:
+        'generated-character-drafts/editor/background-removal/result.png',
+      assetObjectId: 'asset-object-background-removal',
       width: 512,
       height: 768,
+      taskId: 'background-removal-task',
+      elapsedMs: 1234,
+      provider: 'BiRefNet',
     });
     render(
       <GenerationWorkflowHarness
@@ -1598,18 +1613,18 @@ describe('useImageCanvasGenerationWorkflow', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '去除背景' }));
 
-    await waitFor(() => {
-      expect(resolveEditorImageReferenceDataUrlMock).toHaveBeenCalledWith(
-        'generated-character-drafts/editor/private.png',
-      );
-    });
+    await waitFor(() => expect(removeImageBackgroundMock).toHaveBeenCalled());
+    expect(resolveEditorImageReferenceDataUrlMock).not.toHaveBeenCalled();
     await waitFor(() => {
       expect(removeImageBackgroundMock).toHaveBeenCalledWith(
-        'data:image/png;base64,resolved-character',
+        '/generated-character-drafts/editor/private.png',
       );
     });
     expect(screen.getByTestId('layers').textContent).toContain(
-      'layer-source:源图:-:character',
+      'layer-source:源图:resource-source:character:/generated-character-drafts/editor/background-removal/result.png:background-removal-task',
+    );
+    expect(screen.getByTestId('background-tasks').textContent).toContain(
+      '去背景：源图:done:1234:BiRefNet',
     );
   });
 
diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
index 68730c4c7..07051e086 100644
--- a/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.ts
@@ -18,6 +18,7 @@ import type {
 import { resizeCropExpandFrame } from './ImageCanvasCropExpandModel';
 import type {
   CanvasGenerationDialogState,
+  CanvasTaskListItem,
   CanvasLayer,
   CanvasTool,
   CanvasViewport,
@@ -483,6 +484,11 @@ export function useImageCanvasGenerationWorkflow({
   applyProjectSnapshot,
   onWalletBalanceMayHaveChanged,
 }: GenerationWorkflowOptions) {
+  const [backgroundRemovalTasks, setBackgroundRemovalTasks] = useState<
+    CanvasTaskListItem[]
+  >([]);
+  const [isTaskSidebarOpen, setIsTaskSidebarOpen] = useState(false);
+  const previousTaskCountRef = useRef(canvasGenerationDialogs.length);
   const [isSpecMenuOpen, setIsSpecMenuOpen] = useState(false);
   const [isGenerationReferenceMenuOpen, setIsGenerationReferenceMenuOpen] =
     useState(false);
@@ -538,6 +544,13 @@ export function useImageCanvasGenerationWorkflow({
     null,
   );
   const uiAssetExtractionMarkCounterRef = useRef(0);
+
+  useEffect(() => {
+    if (canvasGenerationDialogs.length > previousTaskCountRef.current) {
+      setIsTaskSidebarOpen(true);
+    }
+    previousTaskCountRef.current = canvasGenerationDialogs.length;
+  }, [canvasGenerationDialogs.length]);
   const quickEditSelectionMarkCounterRef = useRef(0);
   const [characterAnimationPanel, setCharacterAnimationPanel] =
     useState<CharacterAnimationPanelState | null>(null);
@@ -1371,28 +1384,77 @@ export function useImageCanvasGenerationWorkflow({
       setMetadataLayer(null);
       setCropExpandPanel(null);
       setQuickEditPanel(null);
+      const startedAt = Date.now();
+      const taskId = `background-removal-${startedAt}-${Math.random().toString(36).slice(2, 8)}`;
+      setIsTaskSidebarOpen(true);
+      setBackgroundRemovalTasks((currentTasks) => [
+        {
+          id: taskId,
+          title: `去背景：${sourceLayer.title}`,
+          detail: '正在抠图',
+          status: 'running',
+          startedAt,
+        },
+        ...currentTasks,
+      ]);
       try {
-        const sourceImageSrc = await resolveEditorImageReferenceDataUrl(
-          sourceLayer.objectKey?.trim() || sourceLayer.src,
-        );
+        const sourceObjectKey = sourceLayer.objectKey?.trim();
+        const sourceImageSrc = sourceObjectKey
+          ? `/${sourceObjectKey.replace(/^\/+/u, '')}`
+          : await resolveEditorImageReferenceDataUrl(sourceLayer.src);
         const result = await removeImageBackground(sourceImageSrc);
+        const finishedAt = Date.now();
+        const elapsedMs = result.elapsedMs ?? finishedAt - startedAt;
         updateSourceLayer(sourceLayer.id, (layer) => ({
           ...layer,
+          resourceId: `local-resource-${taskId}`,
           src: result.imageSrc,
           width: result.width,
           height: result.height,
           originalWidth: result.width,
           originalHeight: result.height,
-          objectKey: null,
-          assetObjectId: null,
+          sourceType: 'generated',
+          provider: result.provider ?? 'BiRefNet',
+          taskId: result.taskId ?? taskId,
+          objectKey: result.objectKey ?? null,
+          assetObjectId: result.assetObjectId ?? null,
+          sourceResourceId: layer.resourceId,
           sourceAssetId: null,
         }));
+        setBackgroundRemovalTasks((currentTasks) =>
+          currentTasks.map((task) =>
+            task.id === taskId
+              ? {
+                  ...task,
+                  detail: '抠图完成',
+                  status: 'done',
+                  finishedAt,
+                  elapsedMs,
+                  provider: result.provider ?? 'BiRefNet',
+                }
+              : task,
+          ),
+        );
         setActiveSidebarPanel('layers');
       } catch (error) {
-        window.alert(
+        const finishedAt = Date.now();
+        const errorMessage =
           error instanceof Error && error.message.trim()
             ? error.message
-            : '去除背景失败',
+            : '去除背景失败';
+        setBackgroundRemovalTasks((currentTasks) =>
+          currentTasks.map((task) =>
+            task.id === taskId
+              ? {
+                  ...task,
+                  detail: '抠图失败',
+                  status: 'failed',
+                  finishedAt,
+                  elapsedMs: finishedAt - startedAt,
+                  errorMessage,
+                }
+              : task,
+          ),
         );
       }
     },
@@ -2116,6 +2178,9 @@ export function useImageCanvasGenerationWorkflow({
       openCropExpandPanel,
       startCropExpandFrameResize,
       removeSelectedLayerBackground,
+      backgroundRemovalTasks,
+      isTaskSidebarOpen,
+      toggleTaskSidebar: () => setIsTaskSidebarOpen((open) => !open),
       extractUiDesignAssets,
       pickCharacterSpecFromLayer,
       pickGenerationReferenceFromLayer,
@@ -2145,6 +2210,7 @@ export function useImageCanvasGenerationWorkflow({
       closeGenerateComposer,
       cropExpandPanel,
       cropExpandSourceLayer,
+      backgroundRemovalTasks,
       uiAssetExtractionState,
       uiAssetExtractionSourceLayer,
       quickEditSelectionState,
@@ -2177,6 +2243,7 @@ export function useImageCanvasGenerationWorkflow({
       isPickingUiDesignSpecFromCanvas,
       isUiDesignSpecMenuOpen,
       isMusicMenuOpen,
+      isTaskSidebarOpen,
       isPublicationMenuOpen,
       isPublicationReferenceMenuOpen,
       isSpecMenuOpen,
diff --git a/src/index.css b/src/index.css
index b3d49cd74..fa42876ad 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6172,6 +6172,157 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: rgba(255, 255, 255, 0.2);
 }
 
+.image-canvas-editor__task-sidebar {
+  position: absolute;
+  top: 0.85rem;
+  right: 0.85rem;
+  z-index: 20;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.45rem;
+  pointer-events: auto;
+}
+
+.image-canvas-editor__task-sidebar--closed {
+  width: auto;
+}
+
+.image-canvas-editor__task-sidebar-toggle {
+  flex: 0 0 auto;
+  border-color: var(--image-canvas-brand-border-soft);
+  background: #ffffff;
+  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
+}
+
+.image-canvas-editor__task-sidebar-panel {
+  width: min(20rem, calc(100vw - 5.6rem));
+  max-height: min(24rem, calc(100vh - 9rem));
+  overflow: hidden;
+  border: 1px solid var(--image-canvas-brand-border-soft);
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(10px);
+}
+
+.image-canvas-editor__task-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 0.68rem 0.78rem;
+  color: #0f172a;
+}
+
+.image-canvas-editor__task-sidebar-header strong {
+  font-size: 0.8rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-header span {
+  display: inline-flex;
+  min-width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 0.72rem;
+  font-weight: 850;
+}
+
+.image-canvas-editor__task-sidebar-list {
+  display: grid;
+  max-height: calc(min(24rem, calc(100vh - 9rem)) - 2.8rem);
+  overflow-y: auto;
+  padding: 0.35rem;
+}
+
+.image-canvas-editor__task-sidebar-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.55rem;
+  width: 100%;
+  border: 0;
+  border-radius: 0.42rem;
+  background: transparent;
+  padding: 0.55rem;
+  color: #334155;
+  text-align: left;
+}
+
+.image-canvas-editor__task-sidebar-item:disabled {
+  color: #334155;
+  cursor: default;
+  opacity: 1;
+}
+
+.image-canvas-editor__task-sidebar-item:not(:disabled):hover {
+  background: #f8fafc;
+}
+
+.image-canvas-editor__task-sidebar-item-icon {
+  display: inline-flex;
+  width: 1.35rem;
+  height: 1.35rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.image-canvas-editor__task-sidebar-item--running
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #ecfeff;
+  color: #0891b2;
+}
+
+.image-canvas-editor__task-sidebar-item--failed
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.image-canvas-editor__task-sidebar-item--done
+  .image-canvas-editor__task-sidebar-item-icon {
+  background: #f0fdf4;
+  color: #16a34a;
+}
+
+.image-canvas-editor__task-sidebar-item-main {
+  display: grid;
+  min-width: 0;
+  gap: 0.12rem;
+}
+
+.image-canvas-editor__task-sidebar-item-title {
+  overflow: hidden;
+  color: #0f172a;
+  font-size: 0.78rem;
+  font-weight: 850;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-detail {
+  overflow: hidden;
+  color: #64748b;
+  font-size: 0.7rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-canvas-editor__task-sidebar-item-status {
+  color: #64748b;
+  font-size: 0.68rem;
+  font-weight: 800;
+}
+
 .image-canvas-editor__panel-dock {
   position: absolute;
   left: 0.85rem;
diff --git a/src/services/image-editor/editorProjectClient.ts b/src/services/image-editor/editorProjectClient.ts
index c611635bc..6da15c57e 100644
--- a/src/services/image-editor/editorProjectClient.ts
+++ b/src/services/image-editor/editorProjectClient.ts
@@ -8,6 +8,7 @@ const EDITOR_SHOWCASE_RESOURCE_API = '/api/editor/showcase/resources';
 const EDITOR_PROJECT_RESOURCE_API_BASE = '/api/editor/project-resources';
 const EDITOR_IMAGE_GENERATION_API = '/api/editor/images/generations';
 const EDITOR_IMAGE_EDIT_API = '/api/editor/images/edits';
+const EDITOR_BACKGROUND_REMOVAL_API = '/api/editor/images/background-removals';
 const EDITOR_ICON_SPRITESHEET_GENERATION_API =
   '/api/editor/icon-spritesheets/generations';
 const EDITOR_UI_DESIGN_ASSET_EXTRACTION_API =
@@ -198,6 +199,10 @@ export type EditorImageEditInput = {
   canvasCompletion?: EditorCanvasGenerationCompletionInput | null;
 };
 
+export type EditorBackgroundRemovalInput = {
+  sourceImageSrc: string;
+};
+
 export type EditorImageGenerationResult = {
   imageSrc: string;
   objectKey?: string | null;
@@ -216,6 +221,17 @@ export type EditorImageGenerationResult = {
   queueState?: ExternalGenerationJobStatusRecord | null;
 };
 
+export type EditorBackgroundRemovalResult = {
+  imageSrc: string;
+  objectKey?: string | null;
+  assetObjectId?: string | null;
+  width: number;
+  height: number;
+  taskId?: string | null;
+  elapsedMs?: number;
+  provider?: string;
+};
+
 export type EditorIconSpritesheetIconResult = {
   name: string;
   imageSrc: string;
@@ -353,7 +369,6 @@ export type EditorVideoGenerationResult = {
   resource?: EditorProjectResourceSnapshot | null;
   asset?: EditorAssetSnapshot | null;
   project?: EditorProjectSnapshot | null;
-  asset?: EditorAssetSnapshot | null;
   queueState?: ExternalGenerationJobStatusRecord | null;
 };
 
@@ -517,6 +532,7 @@ type EditorAssetResponse = {
 };
 
 type EditorImageGenerationResponse = EditorImageGenerationResult;
+type EditorBackgroundRemovalResponse = EditorBackgroundRemovalResult;
 type EditorIconSpritesheetGenerationResponse =
   EditorIconSpritesheetGenerationResult;
 type EditorVideoGenerationResponse = EditorVideoGenerationResult;
@@ -866,6 +882,22 @@ export async function editEditorImage(input: EditorImageEditInput) {
   );
 }
 
+export async function removeEditorImageBackground(
+  input: EditorBackgroundRemovalInput,
+) {
+  return requestJson<EditorBackgroundRemovalResponse>(
+    EDITOR_BACKGROUND_REMOVAL_API,
+    jsonRequest('POST', {
+      sourceImageSrc: input.sourceImageSrc,
+    }),
+    '去除背景失败',
+    {
+      timeoutMs: 1_200_000,
+      retry: EDITOR_REQUEST_RETRY_OPTIONS,
+    },
+  );
+}
+
 export async function generateEditorCharacterAnimation(
   input: EditorCharacterAnimationGenerationInput,
 ) {