Image editor: hide raw Prompt, use Resolution
Remove backend-assembled raw Prompt and copy action from image info; render a lightweight generationInputs snapshot (user panel inputs + reference thumbnails) stored on canvas layers and shown in the image info dialog. Unify canvas display and info to use originalWidth/originalHeight (Resolution) instead of saved Size and hydrate legacy layout width/height only as fallback. Add model/aspectRatio/imageSize options for character/icon generation (frontend state, tests, and client payloads). Increase Axum JSON body limit for character animation endpoint to 12MB for compatibility and prefer submitting persisted objectKey over large Data URLs. Update tests, docs, and related server/frontend code to reflect these behaviors and validations.
This commit is contained in:
146
docs/superpowers/plans/2026-06-16-editor-image-model-options.md
Normal file
146
docs/superpowers/plans/2026-06-16-editor-image-model-options.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# Editor Image Model Options Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 让图片画布的“生成角色形象”和“生成图标素材”支持 `nanobanana2` 与 `gpt-image-2`，并按模型提供合法的尺寸比例与大小尺寸选项。
|
||||
|
||||
**Architecture:** 前端抽出编辑器图片模型配置，生成面板只保存模型、比例、大小三个轻量状态；后端集中归一模型和尺寸组合，角色图与图标 spritesheet 继续走现有 VectorEngine、去背、OSS 和拆分链路。用户模型偏好用 localStorage 记住，默认 `nanobanana2`。
|
||||
|
||||
**Tech Stack:** React + TypeScript + Vitest；Rust Axum api-server；platform-image VectorEngine provider；Markdown 项目文档。
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
- Modify `C:\Genarrative\src\services\image-editor\editorProjectClient.ts`
|
||||
- 扩展图片生成和图标 spritesheet 请求类型，加入 `aspectRatio` 与 `imageSize`。
|
||||
- 默认图标模型改为 `gemini-3.1-flash-image-preview` 对应的 `nanobanana2`。
|
||||
- Modify `C:\Genarrative\src\services\image-editor\editorProjectClient.test.ts`
|
||||
- 先补失败测试：角色 / 图标请求会带模型、比例、大小。
|
||||
- Modify `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.tsx`
|
||||
- 增加模型配置、选项归一、localStorage 偏好、角色 / 图标面板字段和提交 payload。
|
||||
- Modify `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.test.tsx`
|
||||
- 先补失败测试：默认显示 nanobanana2，切换模型后比例 / 大小选项变更，并在请求中传递。
|
||||
- Modify `C:\Genarrative\server-rs\crates\platform-image\src\vector_engine\request.rs`
|
||||
- 让 `512` 不被 normalize 成非法尺寸，并保留 gpt-image-2 尺寸。
|
||||
- Modify `C:\Genarrative\server-rs\crates\platform-image\tests\vector_engine.rs`
|
||||
- 先补失败测试：nanobanana2 0.5K 请求 body 保留 `512`。
|
||||
- Modify `C:\Genarrative\server-rs\crates\api-server\src\editor_project.rs`
|
||||
- 扩展请求 DTO，集中校验 `nanobanana2 / gpt-image-2` 与尺寸组合。
|
||||
- 角色生成按模型走 with_model 调用；图标生成按模型和组合选择尺寸。
|
||||
- Modify docs:
|
||||
- `C:\Genarrative\docs\【编辑器】画板角色形象生成入口设计-2026-06-15.md`
|
||||
- `C:\Genarrative\docs\【编辑器】画板图标素材生成入口设计-2026-06-15.md`
|
||||
- `C:\Genarrative\docs\technical\【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Client request contract
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:\Genarrative\src\services\image-editor\editorProjectClient.ts`
|
||||
- Test: `C:\Genarrative\src\services\image-editor\editorProjectClient.test.ts`
|
||||
|
||||
- [ ] **Step 1: Write failing tests**
|
||||
|
||||
Add tests asserting `generateEditorImage` and `generateEditorIconSpritesheet` serialize `model`, `aspectRatio`, and `imageSize` when supplied.
|
||||
|
||||
- [ ] **Step 2: Run test to verify failure**
|
||||
|
||||
Run: `npm run test -- src/services/image-editor/editorProjectClient.test.ts -t "image model options"`
|
||||
Expected: FAIL because payloads do not include `aspectRatio` / `imageSize`.
|
||||
|
||||
- [ ] **Step 3: Minimal implementation**
|
||||
|
||||
Extend input types and JSON body builders to include optional `aspectRatio` and `imageSize`; change icon default model constant to `gemini-3.1-flash-image-preview` if not already.
|
||||
|
||||
- [ ] **Step 4: Verify green**
|
||||
|
||||
Run same test command. Expected: PASS.
|
||||
|
||||
### Task 2: Frontend panel state and local preference
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.tsx`
|
||||
- Test: `C:\Genarrative\src\components\image-editor\ImageCanvasEditorView.test.tsx`
|
||||
|
||||
- [ ] **Step 1: Write failing tests**
|
||||
|
||||
Add tests for:
|
||||
1. opening `生成角色形象` defaults to model `nanobanana2` and shows `尺寸比例` / `大小尺寸`;
|
||||
2. switching to `gpt-image-2` limits visible combinations and submits model + mapped size metadata;
|
||||
3. icon spritesheet defaults to `nanobanana2` and submits the chosen model.
|
||||
|
||||
- [ ] **Step 2: Run test to verify failure**
|
||||
|
||||
Run: `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx -t "模型|尺寸比例|大小尺寸"`
|
||||
Expected: FAIL because current UI has placeholder model button only.
|
||||
|
||||
- [ ] **Step 3: Minimal implementation**
|
||||
|
||||
Add model option config, dialog fields `imageModel/aspectRatio/imageSize`, localStorage helpers, option buttons/selects, and submit payload wiring.
|
||||
|
||||
- [ ] **Step 4: Verify green**
|
||||
|
||||
Run same test command. Expected: PASS.
|
||||
|
||||
### Task 3: Backend model and dimension normalization
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:\Genarrative\server-rs\crates\platform-image\src\vector_engine\request.rs`
|
||||
- Modify: `C:\Genarrative\server-rs\crates\api-server\src\editor_project.rs`
|
||||
- Test: `C:\Genarrative\server-rs\crates\platform-image\tests\vector_engine.rs`
|
||||
- Test: existing unit tests inside `editor_project.rs`
|
||||
|
||||
- [ ] **Step 1: Write failing tests**
|
||||
|
||||
Add tests covering:
|
||||
1. `build_vector_engine_image_request_body_with_model("gemini-3.1-flash-image-preview", ..., "512", ...)` keeps `size = "512"`.
|
||||
2. editor character model normalization defaults to nanobanana2 and maps `gpt-image-2 + 2:3 + 1K` to `1024x1536`.
|
||||
3. icon spritesheet model normalization accepts both models.
|
||||
|
||||
- [ ] **Step 2: Run backend tests to verify failure**
|
||||
|
||||
Run:
|
||||
`cargo test -p platform-image --manifest-path server-rs/Cargo.toml vector_engine_request_body_can_use_nanobanana2_half_k -- --nocapture`
|
||||
`cargo test -p api-server --manifest-path server-rs/Cargo.toml editor_project -- --nocapture`
|
||||
Expected: FAIL until normalization functions exist.
|
||||
|
||||
- [ ] **Step 3: Minimal implementation**
|
||||
|
||||
Add constants and helpers:
|
||||
- `EDITOR_IMAGE_MODEL_NANOBANANA2 = "gemini-3.1-flash-image-preview"`
|
||||
- `EDITOR_IMAGE_MODEL_GPT_IMAGE_2 = "gpt-image-2"`
|
||||
- `normalize_editor_image_model`
|
||||
- `normalize_editor_generation_dimensions`
|
||||
Use with_model calls for character and icon generation responses.
|
||||
|
||||
- [ ] **Step 4: Verify green**
|
||||
|
||||
Run the same backend tests. Expected: PASS.
|
||||
|
||||
### Task 4: Documentation and final checks
|
||||
|
||||
**Files:**
|
||||
- Modify docs listed above.
|
||||
|
||||
- [ ] **Step 1: Update docs**
|
||||
|
||||
Document defaults, user preference, model-specific options, and Apifox source URLs.
|
||||
|
||||
- [ ] **Step 2: Run focused verification**
|
||||
|
||||
Run:
|
||||
`npm run test -- src/services/image-editor/editorProjectClient.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`
|
||||
`cargo test -p platform-image --manifest-path server-rs/Cargo.toml vector_engine_request_body_can_use_nanobanana2_half_k -- --nocapture`
|
||||
`cargo test -p api-server --manifest-path server-rs/Cargo.toml editor_project -- --nocapture`
|
||||
`npm run typecheck -- --pretty false`
|
||||
`npm run check:encoding`
|
||||
|
||||
---
|
||||
|
||||
## Self-Review
|
||||
|
||||
- Spec coverage: covers role generation, icon spritesheet generation, default model, user preference, model-specific dimensions, docs.
|
||||
- Placeholder scan: no unresolved placeholders.
|
||||
- Type consistency: frontend uses `model/aspectRatio/imageSize`; backend DTO mirrors camelCase fields.
|
||||
84
docs/superpowers/plans/【编辑器】图片信息生成输入快照落地计划-2026-06-16.md
Normal file
84
docs/superpowers/plans/【编辑器】图片信息生成输入快照落地计划-2026-06-16.md
Normal file
@@ -0,0 +1,84 @@
|
||||
# 图片信息生成输入快照 Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** 图片画布编辑器的图片信息页删除生图 Prompt 字段，改为展示图片生成时的面板输入快照，包括文本字段和参考图。
|
||||
|
||||
**Architecture:** 在 `CanvasLayer` 上新增轻量 `generationInputs` 前端快照，只保存用户可见输入和参考图摘要；生成成功时从对应面板状态构建快照，随画布 layout JSON 持久化。图片信息弹窗只读取该快照渲染，不回退显示后端组装 Prompt。
|
||||
|
||||
**Tech Stack:** React + TypeScript + Vitest + Testing Library；现有 `UnifiedModal`、平台按钮和图片画布 layout snapshot。
|
||||
|
||||
---
|
||||
|
||||
### Task 1: 信息弹窗行为测试
|
||||
|
||||
**Files:**
|
||||
- Test: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.test.tsx`
|
||||
|
||||
- [ ] **Step 1: Write the failing tests**
|
||||
- 修改已有图片信息测试，断言弹窗不出现 `Prompt` 和 `复制Prompt`。
|
||||
- 新增普通生成图片测试：生成后打开信息页，应显示 `生成输入`、`生成提示词` 和用户输入值。
|
||||
- 新增角色生成图片测试：绑定角色规范参考图后生成，信息页应显示 `角色设定`、`角色形象规范` 与参考图名称。
|
||||
- 新增图标素材生成测试：绑定图标素材规范后生成，信息页应显示 `素材描述`、具体描述和 `图标素材规范` 参考图。
|
||||
|
||||
- [ ] **Step 2: Run test to verify it fails**
|
||||
- Run: `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx`
|
||||
- Expected: FAIL because `generationInputs` is not yet implemented and old `Prompt` field still exists.
|
||||
|
||||
### Task 2: 生成输入快照模型与持久化
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.tsx`
|
||||
|
||||
- [ ] **Step 1: Add minimal types**
|
||||
- Add `CanvasGenerationInputField`, `CanvasGenerationInputReference`, `CanvasGenerationInputs`.
|
||||
- Add optional `generationInputs` to `CanvasLayer`.
|
||||
|
||||
- [ ] **Step 2: Serialize and hydrate**
|
||||
- Include `generationInputs` in `serializeLayer`.
|
||||
- Hydrate only trusted shapes: string `title`, string `value`, string `label`, string `src`.
|
||||
|
||||
### Task 3: Build snapshots when creating generated layers
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.tsx`
|
||||
|
||||
- [ ] **Step 1: Add builders**
|
||||
- `buildGenerationInputsForImagePrompt(prompt)`.
|
||||
- `buildGenerationInputsForSpec(specType, specValues)`.
|
||||
- `buildGenerationInputsForCharacter(prompt, specRef, references)`.
|
||||
- `buildGenerationInputsForIcon(iconDescriptions, iconSpecRef)`.
|
||||
- `buildGenerationInputsForEdit(prompt, sourceLayer)`.
|
||||
|
||||
- [ ] **Step 2: Attach snapshots**
|
||||
- Pass `generationInputs` into `addGeneratedResultLayer`, `addQuickEditResultLayer`, and `addIconSpritesheetResultLayers`.
|
||||
- Keep old `prompt/actualPrompt` for backend metadata and backward compatibility, but do not render them in UI.
|
||||
|
||||
### Task 4: Render image info without生图 Prompt
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:/Genarrative/src/components/image-editor/ImageCanvasEditorView.tsx`
|
||||
- Modify: `C:/Genarrative/src/index.css` if existing metadata styles need a reference grid helper.
|
||||
|
||||
- [ ] **Step 1: Replace Prompt row**
|
||||
- Remove `Prompt` dt/dd and `复制Prompt` button.
|
||||
- Render `生成输入` row.
|
||||
|
||||
- [ ] **Step 2: Render fields and references**
|
||||
- If `generationInputs` has fields, render each field title/value.
|
||||
- If it has references, render thumbnail cards with title and image.
|
||||
- If both empty or absent, render `-`.
|
||||
|
||||
### Task 5: Documentation and verification
|
||||
|
||||
**Files:**
|
||||
- Modify: `C:/Genarrative/docs/technical/【前端架构】图片画布编辑器MVP接入方案-2026-06-11.md`
|
||||
|
||||
- [ ] **Step 1: Update documentation**
|
||||
- Add note: image info displays panel input snapshot and references, never assembled generation Prompt.
|
||||
|
||||
- [ ] **Step 2: Run verification**
|
||||
- Run: `npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx`
|
||||
- Run: `npm run typecheck`
|
||||
- Run: `npm run check:encoding`
|
||||
- Run: `git diff --check`
|
||||
@@ -12,11 +12,11 @@
|
||||
- 编辑器左侧为图片素材栏，可展开 / 收起；移动端优先保持素材栏可折叠。
|
||||
- 中央画布支持背景拖拽平移、滚轮缩放、缩放百分比菜单、显示所有元素和固定比例缩放。
|
||||
- 画布左下角提供 Lovart 式状态控件：背景色圆点、素材 / 图层入口、小地图开关；小地图显示图层缩略分布和当前视口框，点击小地图执行显示所有元素。
|
||||
- 画布中的图片可展示、悬浮显示图片尺寸与边框，点击后在图片上方显示浮动工具栏。
|
||||
- 画布中的图片可展示、悬浮显示图片 Resolution 尺寸与边框，点击后在图片上方显示浮动工具栏；图片不再维护独立展示 `Size` 字段，画布显示宽高统一取 `originalWidth/originalHeight`（图片信息中的 `Resolution`）。
|
||||
- 默认工具为选择模式；底部工具栏采用 AI 画布工作流工具组：选择、抓手、上传、生成、局部修改 / 蒙版、文字、形状 / 标注、导出。
|
||||
- 鼠标中键拖拽始终平移画布；长按 Space 临时进入抓手模式，松开后恢复原工具。
|
||||
- 图片拖拽时显示水平 / 垂直吸附参考线，吸附到其它图层或画板的边缘与中心线。
|
||||
- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。
|
||||
- 生成资源右上角显示元数据按钮，点击打开独立元数据窗口。图片信息页不展示后端组装后的生图 Prompt，也不提供复制 Prompt；只展示该图片生成时用户在面板里提交的输入快照，包括普通生成提示词、规范表单字段、角色设定、图标素材描述、修改要求，以及角色形象规范 / 常规参考图 / 图标素材规范 / 修改参考图等参考图卡片。旧数据或上传图片没有输入快照时显示 `-`，禁止回退展示内部 Prompt。
|
||||
- 对生成资源执行修改时，在右侧创建新的生成结果图层，并自动调整视图显示原图和新图。
|
||||
- 图片生成 / 修改统一经 api-server BFF 接入 VectorEngine `gpt-image-2`：纯文本生成走 `/api/editor/images/generations`，基于当前生成图的修改走 `/api/editor/images/edits`。纯文本生成入口采用 Lovart 式画布内占位图 + 锚定生成输入框：点击生成工具后先在画布中心创建选中的灰色占位框，输入框跟随占位框显示；待生成、生成中和失败后保留的占位图都必须继续支持拖动，生成完成时真实生成图落在最新占位框位置，输入框继续跟随新生成图；点击所有图片生成入口并确认请求开始后，必须隐藏对应设置面板，只保留画布内占位图或原图预览，并在预览上显示 Lovart 式生成中遮罩，避免“面板仍占屏”或“预览一起消失”。快速编辑和修改图片在调用后端前必须把当前图层图片源读取为图片 Data URL，来源可以是本地上传 Data URL、站内 public 图片、历史 `/generated-*` 路径或可读取的 OSS generated URL；后端仍只接收图片 Data URL，不把普通 URL 直接透传到 VectorEngine edits。前端不持有 provider 密钥；上游失败或配置缺失时恢复当前生成设置面板展示失败，不创建 mock 成功图。
|
||||
- 底部生成类按钮每次点击都必须创建独立的画布生成对象；新建规范、角色形象或图标素材时，只切换当前编辑面板，不得销毁此前尚未生成或已生成后的其它生成对象状态。归档为非当前编辑对象的生成占位仍可拖动、删除和等待异步完成，完成 / 失败回写必须按生成对象 ID 读取最新占位状态，不能使用提交瞬间的旧快照。
|
||||
@@ -41,7 +41,7 @@
|
||||
- `editor_project_resource` 表保存工程画布引用过的资源快照：`resourceId`、`projectId`、`ownerUserId`、OSS / asset object 引用、图片尺寸、来源类型、prompt、actualPrompt、model、provider、taskId、sourceResourceId、创建时间和更新时间。上传素材被拖入画布时会复制为 project resource，图层只引用 resourceId。
|
||||
- 图片文件本体继续走 OSS，浏览器读取私有 generated 对象仍经 `/api/assets/read-url` 换签。
|
||||
- 当前 MVP 的本地上传先以 data URL 持久化在素材记录中，保证刷新和跨项目可见；后续接入正式 OSS 上传时，只替换 `imageSrc/objectKey/assetObjectId` 的写入方式，账号级素材表和画布资源表不变。
|
||||
- 资源表只保存资源元数据；图层位置、尺寸、缩放、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。图层组第一版是画布内布局语义，不单独建表。
|
||||
- 资源表只保存资源元数据；图层位置、层级、分组选中所需 ID 和 groupId 保存在 `editor_canvas` 的布局 JSON。图层展示尺寸不再作为独立 `Size` 真相保存，刷新与新建图层均按 `Resolution`（`originalWidth/originalHeight`）原分辨率显示。图层组第一版是画布内布局语义，不单独建表。
|
||||
- 前端不直接订阅 SpacetimeDB，统一通过 api-server 的 `/api/editor/projects*` BFF 读写。
|
||||
- 未登录用户可以使用本地演示态，但不触发工程自动保存；真实图片生成 / 修改需要登录。编辑器 API 请求允许使用 refresh cookie 静默补 access token，但 401 / 403 只在编辑器局部提示登录，不清空整站登录态，也不把后端 requestId 直接作为生图弹窗主文案。
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
- 生成工具点击后显示画布内 `Image Generator` 占位框和跟随占位框的生成输入框，生成失败保留占位和输入状态，生成成功后在占位位置创建真实图层，并让输入框继续跟随该生成图。
|
||||
- 生成类入口打开画布内面板时，底部 AI 工具栏必须保持可见；`生成规范`、角色 / 图标规范来源这类轻量菜单通过页面级 fixed portal 渲染，不能留在底部工具栏或参考图横向滚动容器内部，避免被局部 `overflow` 裁切。
|
||||
- 点击生成、生成规范、生成角色形象或生成图标素材后创建的占位图可继续保留；点击画布空白区域让当前图片或占位图失焦时，关闭当前生成面板并移除图片选中样式，但不删除占位图本身。
|
||||
- 生成资源显示元数据按钮，元数据窗口展示来源、prompt、model、provider、task、尺寸和 OSS 引用。
|
||||
- 生成资源显示元数据按钮，元数据窗口展示来源、生成输入快照、model、provider、task、Resolution 和 OSS 引用；生成输入快照只包含用户面板输入和参考图，不包含后端拼接 Prompt，不再展示独立 Size 字段。
|
||||
- 修改生成资源后，右侧出现新生成结果图层，并自动 fit 原图 + 新图。
|
||||
- 快速编辑站内 public 示例图、历史 generated 图或 OSS generated 图时，前端先读取成 `data:image/*;base64,...` 再提交，后端不得再收到 `/creation-type-references/*`、`/generated-*` 或 OSS URL 作为 `referenceImageSrcs/sourceImageSrc`。
|
||||
- 素材文件夹可以新建、折叠、重命名和删除；删除普通文件夹后，其素材移动到“项目素材”。
|
||||
|
||||
@@ -104,8 +104,9 @@
|
||||
### Prompt 与生成契约
|
||||
|
||||
- 前端提交到 `POST /api/editor/character-animations/generations`。
|
||||
- 请求必须带上角色图片来源、原始尺寸、动画描述、分辨率、画面比例、帧数和时长。
|
||||
- 请求必须带上角色图片来源、原始尺寸、动画描述、分辨率、画面比例、帧数和时长。角色图片已经持久化到 OSS 时，`sourceImageSrc` 必须优先传 `objectKey`；只有未持久化的本地临时图片才允许传 Data URL。
|
||||
- 后端使用角色图片作为首帧和尾帧参考，模型固定映射到 seedance2.0 对应后端模型。
|
||||
- 后端路由兼容旧 Data URL 请求并单独放宽 JSON body limit 到 `12MB`，但该限额只作为兼容兜底，不作为新链路默认传大图的方式。
|
||||
- 后端 prompt 使用以下固定骨架，并把面板输入追加到 `动作描述：` 后：
|
||||
|
||||
```text
|
||||
|
||||
Reference in New Issue
Block a user