svg-redraw-comparison git:20260911.c57f35aA

Immutable. This exact content is served forever at /api/v1/blob/d3aa415286407cb3.

---
name: svg-redraw-comparison
description: 将参考图临摹成分阶段绘制的 SVG，再制作原图与绘制过程的对比视频及可播放 Demo。支持横图上下排版、竖图左右排版、暂停拖动与确定性逐帧 MP4 导出；用户要求大模型SVG重绘过程视频时使用。
---

# 基于大模型的SVG临摹重绘

交付目标是**对比视频＋播放 Demo＋完整 SVG**，不是单独一份 SVG。图像只用于原图展示和视觉参考，不得偷偷嵌入绘制区充当重绘结果。

## 1. 确定输入和输出

使用用户本次指定的图片；没有提供时可用 `assets/reference.png` 演示。确认时长、排版和是否需要音乐。默认横图上下、竖图左右，30fps，静音。用户指定 GPT-6 Astra 时使用其可用入口；模型不可用则说明缺项，不能冒称由该模型完成。

建立用户项目目录，保留原文件。运行[制作步骤](references/workflow.md)中的无损重编码工具，去掉文字、EXIF等元数据，并核对处理前后解码像素一致。输入不是PNG时先明确转换方式和色彩处理，不能把有损转换称作无损。

## 2. 实际看图，再生成 SVG

列出构图、主体相对位置、轮廓、服装、颜色、光源与主要细节。以本图为唯一视觉依据，不搜索另一张图替代。把[重绘提示词](prompts/redraw.prompt.txt)交给绘图模型，保存实际模型名与提示词。

模型输出完整 `redraw.svg`，使用真正的 path、形状和渐变；分为 sketch、ink、color、shadow、detail 五组。逐图检查内容，修正错位、缺漏和身份偏差。附带示例仅演示流程，用户换图时必须重新绘制，不能继续用示例人物。

## 3. 构建完整播放页

按[制作步骤](references/workflow.md)运行 `build_demo.py`。它检查 SVG 的安全结构、阶段组和比例，再输出可独立打开的 HTML。参考图始终保持不动；另一画布从空白逐步完成。

线稿用路径长度显现，上色与细节按独立图形显现。临时起稿/线稿随上色退出，最终轮廓应在对应形块上，避免被遮住的边线穿透人物。不要把整张成品一次淡入，也不要把随机像素块出现称作绘画。

## 4. 检查播放并导出视频

打开 Demo 检查开始、中间和结束；播放、暂停、拖动、重置都应有效。输入横图时上方是完整原图，下方为同比例绘图区，标签不覆盖画面。

运行 `export_video.cjs` 导出 MP4。导出器按 `frame_index / fps` 逐帧调用同一渲染函数，不依赖播放时的真实屏幕帧率。预览卡顿不能通过丢导出帧解决。

## 5. 验收与交付

核对解码帧数、尺寸、FPS、时长；检查起始绘图区为空白、绘制阶段可见、结尾完整并保留停留时间。再与原图比较构图和内容，明确存在的简化或偏差，不能把管线通过写成高相似度通过。

交付 MP4、HTML、SVG、干净参考图与简短参数记录。加音乐是独立后期步骤，使用有权使用的音轨；不复制灵感视频的配乐。此次绘图子任务中“只输出代码”的要求不取消最终的视频交付。

## 失败恢复

- SVG 含位图、脚本、外链、错误阶段或比例：修正SVG后重建，不跳过检查。
- 浏览器缺失：指定现有Chromium浏览器，或补齐已授权的环境；不要谎称已录制。
- 导出中断：保留 SVG、HTML 与参数，只重做导出；不重新调用绘图模型。
- 仅图形细节不符：修改SVG并重新导出，保留旧版，不改原图来迎合重绘。