diff --git a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md index c8b2185db..cc92e5014 100644 --- a/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md +++ b/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md @@ -21,7 +21,7 @@ - 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、快速编辑提示词，以及角色规范 / 常规参考图 / 图标规范 / 编辑参考图等参考图卡片，并提供“复制信息”复制当前可见字段。参考图输入快照只保存 `refType/refId` 行引用，其中 `refType="project-resource"` 指向 `editor_project_resource.resourceId`，`refType="asset"` 指向 `editor_asset.assetId`；不得把图片 Data URL、普通 URL 或 `objectKey` 写入 `generationInputs.references`。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。 - 生成类产物的工具栏动作 `改造` 不在原产物上原地修改，而是把当次生成输入恢复到对应面板，允许编辑后生成新产物。按钮显隐只按 action capability 判断：确定性派生等不支持改造的 action 隐藏；支持改造的 action 即使参数损坏或必需来源丢失也保留按钮，点击后再显示准确错误，禁止用恢复状态静默隐藏入口。`image.edit` 明确不属于可改造 action：图片快速编辑使用 `targetLayerId` 原位替换画布层，结果层就是被覆盖后的原层，其配方 source 指向替换前的编辑目标，不能再可靠恢复为“改造”新产物；这类结果继续显示“快速编辑”，不显示“改造”。 - V2 恢复严格按顶层 `action`、`fields[].id` 和 `references[].id/refType/refId` 定位，`title` / `label` 只是展示快照，不作为参数键。引用只在当前已 hydrate 的画布图层中按 `refType/refId` 匹配，媒体类型取匹配图层的运行时数据，不重复写入 `generationInputs.references`，也不新增 owner-only 工程资源 / 素材库查询。面板直接上传的参考素材不进入素材库、不是画布图层，因此改造时不恢复；原参考图层已移出画布时同样不恢复。**引用在提交时是否必填，不是恢复时拒绝打开面板的依据**：凡目标面板提供重新选择入口的槽位，无论可选还是必填，缺失时都必须 best effort 打开面板、留空槽位并提示用户重新选择，最终由提交门禁校验；例如角色生成缺少必填角色规范、图标生成缺少必填图标规范、普通图片 / 视频缺少参考图时，都必须打开原 action 面板让用户补选。只有已支持改造但目标面板没有手动替换入口、缺少 source 就无法构造请求时才允许拒绝，当前严格限定为两个例外：`character-animation.generate` 的 source 决定角色动作面板绑定的原角色图层，面板内部不能换角色；`ui-design.extract-assets` 的 source 同时决定框选覆盖层的坐标系，素材提取面板不能改绑另一张设计图。两个例外仍按 action capability 保留改造按钮；source 缺失时点击按钮才显示“无法改造”并分别说明不可替换原因，点击后 source 变化也必须在恢复路径再次校验并拒绝；该失败规则不得用于任何可手动补选的槽位。 -- 改造恢复顺序为：有效 V2；完整的历史生成对话框；按 `assetKind/mediaType`、历史中英文标题别名、资源模型 / 尺寸 / 时长 / `sourceResourceId` 的 legacy adapter，最后缺失值使用当前默认值并显示“已按旧版数据恢复，部分参数可能使用当前默认值。”。legacy adapter 必须先按 `assetKind/mediaType` 映射角色、图标、UI、场景、视频、音频等原工具；只有图片族且 `assetKind` 为空或未知时才使用默认的普通图片生成工具。legacy adapter 只恢复映射后目标 action / 工具声明的输入，不得额外把当前图片附加为参考图，也不得把普通图片生成改写为 `quick-edit` 或 `character` 请求。无法映射到可用工具时准确提示无法改造。一旦识别为有效 V2，即使引用缺失也不得降级到 legacy adapter。禁止从中文标题、产物尺寸或 prompt 反推 V2 参数；legacy fallback 除外，但不得回退展示 `actualPrompt` 中的后端拼接 Prompt。当前 BGM 是字段语义上的例外：其新记录中的 `prompt` 与 `actualPrompt` 必须等于输入框已经写回的 canonical `gpt_description_prompt`，不得包含隐藏内容；但改造输入仍只从 `generationInputs.fields` 恢复，不能因此放宽为从资源审计字段回退。 +- 改造恢复顺序为：有效 V2；完整的历史生成对话框；按 `assetKind/mediaType`、历史中英文标题别名、资源模型 / 尺寸 / 时长 / `sourceResourceId` 的 legacy adapter，最后缺失值使用当前默认值并显示“已按旧版数据恢复，部分参数可能使用当前默认值。”。legacy adapter 必须先按 `assetKind/mediaType` 映射角色、图标、UI、场景、视频、音频等原工具；只有图片族且 `assetKind` 为空或未知时才使用默认的普通图片生成工具。legacy adapter 只恢复映射后目标 action / 工具声明的输入，不得额外把当前图片附加为参考图，也不得把普通图片生成改写为 `quick-edit` 或 `character` 请求。无法映射到可用工具时准确提示无法改造。一旦识别为有效 V2，即使引用缺失也不得降级到 legacy adapter。禁止从中文标题、产物尺寸或 prompt 反推 V2 参数；legacy fallback 除外，但不得回退展示 `actualPrompt` 中的后端拼接 Prompt。当前 BGM 是字段语义上的例外：其新记录中的 `prompt` 与 `actualPrompt` 必须等于输入框已经写回的 canonical `gpt_description_prompt`，不得包含隐藏内容；但改造输入仍只从 `generationInputs.fields` 恢复，不能因此放宽为从资源审计字段回退。定向测试必须至少覆盖未知图片回退普通 `image.generate` 和一种已知 `assetKind` 恢复原工具的真实提交闭环，并校验请求输入、V2 action / references、结果落点及 dialog / composer 终态。 - V2 资源 / 素材 hydrate 为前向兼容读取：顶层、`fields[]` 和 `references[]` 出现未来可选属性时只复制当前已知字段，不得让整份配方消失；完美像素操作快照等精确重放路径仍执行递归白名单，并保留历史空字符串的字节级兼容。hydrate 结果必须保留 `absent | valid | invalid-versioned` 运行时来源状态：只有 `absent` 可走 legacy adapter；结构损坏或版本不支持的版本化配方标为 `invalid-versioned`，所有恢复入口都必须拒绝自动降级，并提示“保存的生成参数版本不受支持或数据损坏，无法可靠恢复”。该标记不属于持久化 generationInputs 契约，也不得把原始损坏 JSON 回写。对模型、比例、尺寸、时长、开关等具有明确运行默认值的 V2 参数，缺失与非法值统一补写默认值并告警；允许为空的提示词 / 表单自由文本不因缺失产生参数失效告警。 - 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine。普通生成和生成规范保留既有 `gpt-image-2` 路径；图片快速编辑统一打开框选区域 + 单提示词 + 模型选择面板，默认沿用原图模型，不展示参考图或比例 / 尺寸控件；其中生成规范类图片固定 `16:9`、`2K`、`gpt-image-2`，面板底部用与可编辑面板一致的比例 / 尺寸 / 模型胶囊按钮展示固定参数，但按钮为禁用态，不允许在该面板改比例、尺寸或模型。`生成角色形象` 与 `生成图标素材` 支持 `nanobanana2`（`gemini-3.1-flash-image-preview`）和 `gpt-image-2`，默认 `nanobanana2`，并在两类面板之间沿用用户上次选择的模型；两类面板不展示抠图背景色或抠图模型选择；前端用户路径固定提交 `screenColor=auto` 和 `segModel=birefnet`，由后端自动决策具体抠图背景色，`anime-seg` 作为内部保留能力不在用户界面暴露。`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`。`生成视频` 走 `/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 避让后创建选中的灰色占位框，输入框跟随占位框显示；普通图片、角色、图标图集、UI 设计图及其改造入口必须在比例或清晰度恢复、切换时同步把占位框 `width/height/originalWidth/originalHeight` 更新为目标像素尺寸，生成中不得继续显示默认 1K 框；UI 素材提取的 1K / 2K 图集占位和旧图片修改入口也分别使用本次目标尺寸与源图真实尺寸。待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图或视频落在最新占位框位置，输入框继续跟随新生成图层；占位图失焦时隐藏高亮边框、左上角生成器名称和右上角原始尺寸，重新聚焦时再显示，且名称 / 尺寸在画布缩小时按 viewport 反向缩放保持屏幕尺寸稳定；点击所有图片 / 视频生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。图片快速编辑在调用图片 BFF 前必须把当前图层图片解析为已上传的 objectKey 或资源 ID；浏览器临时图片需先上传 OSS；视频素材快速编辑走视频生成 BFF，不允许走图片模型；角色动作的 `生成动画` 仍固定使用 `seedance2.0-fast` 动作 / 视频模型，角色动作素材的 `快速编辑` 按当前帧图片走图片编辑。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。 - 图片画布抠图统一通过唯一、只监听 loopback 的 `bgfilter-worker` 调用 BgFilter provider。手动去除背景面向用户任意图片，仍走登录态同源 BFF `POST /api/editor/images/background-removals` 和外部生成队列；API 在入队前拒绝 `data:` / `blob:` 内联媒体，父流程将稳定引用解析为当前账号已登记且归属已校验的私有 OSS object key，并在同一轮账号项目 / 素材快照读取中同时恢复用户可见源模型，禁止为 object key、所有权和源模型分别重复拉取全量快照；随后只通过一次内部 HTTP RPC 传递 object key、排队预算 `maxQueueWaitMs`、调用预算 `callBudgetMs` 和固定的 `background_mode=complex`、`seg_model=birefnet`、`cross_check=off`，不传源图字节、签名 URL、`file` 或 `screen_color`。子 worker 在每次真实 provider attempt 前签发 600 秒 URL，承担默认 `Q=2048` admission 保险丝、provider 并发 `N=16`、严格最多两次顺序 attempt、响应字节与图片尺寸校验，并把成功图片作为内部 HTTP 二进制 body 直接返回；父流程同步等待该响应且不重试已被 worker 接收的内部 RPC（连接从未建立时按调度方案 §5.1 有界重连）。排队只消耗 `maxQueueWaitMs`，取得 provider permit 后才启动 `callBudgetMs`；attempt 按 `N × est × 2`、调用预算按 `2 × attempt + 1s` 派生，冻结 `est=5000ms` 时分别为 `160s / 321s`。complex 的真实 provider 失败会累计并打开自身熔断，但与 flat 状态隔离；complex 任意失败或熔断仍直接返回父流程失败，不接入阿里云 / 本地键色降级。provider 配置继续统一使用 `GENARRATIVE_EDITOR_BGFILTER_BASE_URL` 和 `GENARRATIVE_EDITOR_BGFILTER_TOKEN`，父子共同使用 `GENARRATIVE_BGFILTER_WORKER_CONCURRENCY` 与 `GENARRATIVE_EDITOR_BGFILTER_SINGLE_IMAGE_ESTIMATE_MS` 派生预算；旧 `GENARRATIVE_EDITOR_BACKGROUND_REMOVAL_TOKEN` 只作为 provider token 兼容别名；内部调用另使用 `GENARRATIVE_BGFILTER_WORKER_BASE_URL` 和独立内部 Token。所有令牌只在服务端注入，前端不持有令牌。成功字节返回父流程后，仍由父流程完成最终处理、OSS / asset object 持久化、结果图层与最新项目快照写回；接口只向前端返回 `queueState`，有项目上下文时前端同时创建去背景生成占位并把 `canvasCompletion` 交给后端。 diff --git a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx index 60bda118e..635e9d74c 100644 --- a/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx +++ b/src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx @@ -500,6 +500,14 @@ function GenerationWorkflowHarness({ ) .join('|')} + + {layers + .map( + (layer) => + `${layer.id}:${layer.x}:${layer.y}:${layer.width}:${layer.height}`, + ) + .join('|')} + {activeDialog ? `${activeDialog.mode}:${activeDialog.status}:${activeDialog.composerOpen !== false ? 'open' : 'closed'}:${activeDialog.generatedLayerId ?? '-'}:${activeDialog.placeholder ? 'placeholder' : '-'}` @@ -1592,10 +1600,26 @@ describe('useImageCanvasGenerationWorkflow', () => { ); }); - it('opens image remodel without an origin action in the default image tool', () => { - render(); + it('submits legacy image remodel without an origin action through the default image tool', async () => { + generateEditorImageMock.mockResolvedValueOnce( + createGenerated({ prompt: '旧版森林场景' }), + ); + render( + , + ); - fireEvent.click(screen.getByRole('button', { name: '打开生成' })); fireEvent.click(screen.getByRole('button', { name: '打开图片改造' })); expect(screen.getByTestId('dialog').textContent).toBe( @@ -1603,8 +1627,109 @@ describe('useImageCanvasGenerationWorkflow', () => { ); expect(screen.getByTestId('quick-edit').textContent).toBe('-'); expect(screen.getByTestId('placeholder').textContent).toContain('1024:768'); + const expectedResultPlacement = + screen.getByTestId('placeholder').textContent; + fireEvent.click(screen.getByRole('button', { name: '提交生成' })); + + await waitFor(() => { + expect(generateEditorImageMock).toHaveBeenCalledWith( + expect.objectContaining({ + prompt: '旧版森林场景', + model: IMAGE_MODEL_GPT_IMAGE_2, + generationInputs: expect.objectContaining({ + version: 2, + action: 'image.generate', + references: [], + }), + }), + ); + }); + const request = generateEditorImageMock.mock.calls[0]?.[0]; + expect(request).not.toHaveProperty('referenceImageSrcs'); + expect(request).not.toHaveProperty('sourceResourceId'); + await waitFor(() => { + expect(screen.getByTestId('layers').textContent).toContain( + 'layer-generated-1:生成图片 1:-:-', + ); + }); + expect(screen.getByTestId('layer-placements').textContent).toContain( + `layer-generated-1:${expectedResultPlacement}`, + ); + expect(screen.getByTestId('dialog').textContent).toBe( + 'generate:idle:open:layer-generated-1:placeholder', + ); expect(screen.getByTestId('generation-dialogs').textContent).toBe( - 'generation-dialog-1:generate:closed|generation-dialog-2:generate:open', + 'generation-dialog-1:generate:open', + ); + }); + + it('submits legacy character remodel through the character tool selected by asset kind', async () => { + generateEditorImageMock.mockResolvedValueOnce( + createGenerated({ prompt: '红发骑士' }), + ); + render( + , + ); + + fireEvent.click(screen.getByRole('button', { name: '打开图片改造' })); + + expect(screen.getByTestId('dialog').textContent).toBe( + 'character:idle:open:-:placeholder', + ); + expect(screen.getByTestId('dialog-prompt').textContent).toBe('红发骑士'); + const expectedResultPlacement = + screen.getByTestId('placeholder').textContent; + fireEvent.click(screen.getByRole('button', { name: '选择角色规范' })); + fireEvent.click(screen.getByRole('button', { name: '提交生成' })); + + await waitFor(() => { + expect(generateEditorImageMock).toHaveBeenCalledWith( + expect.objectContaining({ + prompt: '红发骑士', + kind: 'character', + model: IMAGE_MODEL_GPT_IMAGE_2, + referenceImageSrcs: ['resource-character-spec'], + generationInputs: expect.objectContaining({ + version: 2, + action: 'character.generate', + references: [ + expect.objectContaining({ + id: 'specReference', + refType: 'project-resource', + refId: 'resource-character-spec', + }), + ], + }), + }), + ); + }); + await waitFor(() => { + expect(screen.getByTestId('layers').textContent).toContain( + 'layer-generated-1:角色形象 1:-:character', + ); + }); + expect(screen.getByTestId('layer-placements').textContent).toContain( + `layer-generated-1:${expectedResultPlacement}`, + ); + expect(screen.getByTestId('dialog').textContent).toBe( + 'character:idle:open:layer-generated-1:placeholder', + ); + expect(screen.getByTestId('generation-dialogs').textContent).toBe( + 'generation-dialog-1:character:open', ); });