Files

T

lhk229 5c9b5ef69e 动作视频/生图背景色链路升级 + 阿里云抠图接入 (#75 )

主要改动
1. 阿里云通用抠图接入（新增 platform-matting crate）

手搓阿里云 VIAPI 通用抠图接口（ACS3-HMAC-SHA256 签名），跨区输入走临时桶通道。
图片抠图升级为三档降级：BgFilter → 阿里云 → 本地键色兜底。
动作视频逐帧抠图改用阿里云，remove_editor_generated_green_screen_background 降为最后兜底。
2. 背景色不再写死绿色，改多背景色自动决策

动作视频背景色和生图一样从候选调色板自动选，选项继承。
3. 视觉背景色决策（修"蓝撞蓝"）

让 LLM 看参考图选背景色（gpt-4o-mini 视觉模型，路由到 VectorEngine 视觉客户端），修复原纯文本盲选。
4. 背景色候选硬过滤器（新增 editor_screen_background_filter）

按参考图前景配色算 Lab 危险质量 + 皮肤专属三判据（ΔE 距离 / 色调投影 / RGB 分离）剔除撞色候选，LLM 只在安全集合里审美选。露肤角色自动收敛到冷区。新增"灰竹绿"候选补齐安全弧绿色段。
5. 源图合成到背景色（修视频背景变白）

透明源图先填成选定实色再发给 Ark，视频背景确定性等于抠图键色，不再赌模型服从提示词。
6. screenColorHex 结构化记录 + 死代码清理

四条链路统一把实际背景色写进 generation_inputs，修复生图链路"抠图背景色"字段从未生效的旧逻辑。
清理前端抠绿 + qwenSprite 死代码，移除一次性探针示例。

Reviewed-on: https://git.genarrative.world/git/GenarrativeAI/Genarrative/pulls/75
Reviewed-by: kdletters <kdletters@qq.com>
Co-authored-by: Linghong <ink29535@proton.me>
Co-committed-by: Linghong <ink29535@proton.me>

2026-07-10 18:22:17 +08:00

5.5 KiB

Raw Blame History

【编辑器】画板UI设计图生成入口设计

日期：2026-06-17

入口与画布状态

底部 AI 画布工具栏新增 生成UI设计图。
点击后立即在画布中新建 UI设计图生成占位图，不复用普通新建图片的空白样式。
占位图默认 16:9 展示，生成成功后替换为 assetKind: "ui-design" 的画布图层。
用户点击 assetKind: "ui-design" 图层后，图片上方浮动工具栏在 去除背景按钮 后显示 提取素材 按钮；普通图片、角色图和图标图层不显示该入口。

生成面板

占位图下方打开独立生成面板，标题为 生成UI设计图。
面板复用普通 生成图片 / 生成角色形象 / 生成视频 的生成类 shell：首行参考图区域、中央单文本输入、底部参数与生成按钮区。
面板第一个模块为 图标规范，并放在首行参考图区域。
点击图标规范卡片后，在卡片旁弹出来源菜单：
- 从画布中选择
- 新建图标规范
- 上传图片
从画布中选择 只接受 assetKind: "icon-spec" 的图层；普通图片、其他类别图层和不携带标签的图片不绑定。
新建图标规范 复用现有图标规范生成表单。
上传图片 仅绑定到当前 UI 设计面板的图标规范参考，不自动添加为画布图层。
图标规范之外可继续上传普通参考图，用于约束 UI 设计图的布局风格、配色或材质；普通参考图不替代图标规范。

生成参数

支持自定义画面比例和大小尺寸。
模型固定为 gpt-image-2，模型展示对齐角色规范面板底部固定模型样式，不响应点击、不弹出模型切换菜单；历史草稿如果残留其他模型，提交时也必须强制改为 gpt-image-2。
默认画面比例为 16:9，默认大小为 1K。
UI 素材提取面板不展示抠图背景色或抠图模型选择；前端用户路径固定提交 screenColor=auto 和 segModel=birefnet。后端先在 12 个候选色中自动决策具体 hex，最多重试 3 次，失败兜底 #CFEFFF；后端调用 BgFilter 时只把解析后的具体 hex 作为 screen_color 传入。后端仍识别内部保留的 anime-seg，但该选项不对用户可见。

提示词契约

后端收到 kind: "ui-design" 时固定拼接：

生成玩法UI原型图
【用户输入】<用户输入>

如果用户设置了图标规范参考图，则追加：

参考图1为图标规范，请在UI图标、按钮符号、描边、材质、圆角、阴影和状态层级上严格遵循参考图1的素材规范。

生成请求固定使用 gpt-image-2。有参考图时走图片编辑请求；无参考图时走图片生成请求。前端提交时会把图标规范作为第一张参考图，并把用户上传的普通参考图按顺序追加到同一个 referenceImageSrcs 数组；上传参考图优先提交 objectKey。

提取素材

点击浮动工具栏 提取素材 后，进入 UI 设计图素材框选编辑状态，不立即提交提取接口。
框选状态参考微信截图工具栏布局，默认矩形框选，并支持矩形框选、椭圆框选和画笔自由框选三种工具。
用户可在同一张 UI 设计图上多次框选；未至少框选一个区域时，工具栏 提取 按钮不可点击。
可上传普通参考图辅助 UI 素材提取，用于约束被框选素材的风格、配色或材质；普通参考图会以 objectKey 随合成后的红框 UI 设计图一起提交。
点击 提取 后，前端把所有框选的红色轮廓绘入原 UI 设计图，生成合成图片 Data URL，再提交到 POST /api/editor/ui-designs/assets/extractions。
后端固定使用 gpt-image-2 图片编辑链路，并固定提示词：

仅提取被红色框框选的素材并整理成spritesheet，图集背景必须使用后端自动决策出的抠图背景色。纯色背景必须平整无纹理、无渐变、无阴影、无地面、无环境、无道具，方便后续扣除背景；素材自身不要出现与背景色相同或相近的描边、底板、投影或反光。

后端收到 spritesheet 后先把带解析后纯色背景的源图写入 OSS，再调用 BgFilter 按默认 segModel=birefnet 透明化，并复用图标素材的连通域拆分能力；未知素材数量时按从上到下、从左到右自动命名为 素材 1、素材 2。
前端先把 spritesheet 原图作为 assetKind: "icon-spritesheet" 图集图层放在 UI 设计图右侧，再把拆分出的独立素材作为 assetKind: "icon" 图标图层继续放到画布。

验收点

点击 生成UI设计图 后出现 UI 设计占位图和独立生成面板。
面板第一模块为图标规范，来源菜单包含三个动作。
从画布选择时只能绑定图标规范图片。
请求参数包含 kind: "ui-design"、model: "gpt-image-2"、比例、大小与可选参考图。
上传普通参考图后，请求参考图数组同时包含图标规范和普通参考图，生成图层信息面板展示 用户输入、图标规范 与普通参考图。
选中 UI 设计图时浮动工具栏显示 提取素材；点击后进入红框素材框选状态，至少框选一个区域后才能调用固定 gpt-image-2 提取接口，请求包含 screenColor，画布同时出现透明 spritesheet 图集和拆分后的独立素材。
UI 素材提取面板上传普通参考图后，提取请求参考图数组同时包含红框 UI 设计图和普通参考图，生成图层信息面板展示 UI设计图 与普通参考图。

5.5 KiB Raw Blame History