svg-redraw-comparison · diff
git:20260911.c57f35a to git:20260911.6a6fc04
19 added, 22 removed. Audit A to A.
---
name: svg-redraw-comparison
- description: 将参考图临摹成分阶段绘制的 SVG，再制作原图与绘制过程的对比视频及可播放 Demo。支持横图上下排版、竖图左右排版、暂停拖动与确定性逐帧 MP4 导出；用户要求大模型SVG重绘过程视频时使用。
+ description: 用参考图制作高精度 SVG 临摹绘制过程视频，交付纯 SVG 网页、独立 SVG 和原图对照 MP4。禁止 Canvas、位图嵌入与外链，按构图、线稿、固有色、阴影、高光、细节重放；横图上下、竖图左右合成。
---
# 基于大模型的SVG临摹重绘
- 交付目标是**对比视频＋播放 Demo＋完整 SVG**，不是单独一份 SVG。图像只用于原图展示和视觉参考，不得偷偷嵌入绘制区充当重绘结果。
+ **完成条件：用户拿到对比视频、可播放 Demo 和完整 SVG。只完成 SVG 或网页不算任务完成。**
- ## 1. 确定输入和输出
+ ## 1. 固定输入与方式
- 使用用户本次指定的图片；没有提供时可用 `assets/reference.png` 演示。确认时长、排版和是否需要音乐。默认横图上下、竖图左右，30fps，静音。用户指定 GPT-6 Astra 时使用其可用入口；模型不可用则说明缺项，不能冒称由该模型完成。
+ 实际读取用户本次参考图。只有用户未提供图片时，才使用本模板示例。先保存原件，再无损重编码并去元数据；核对解码像素和比例。使用用户指定的大模型；不可用时说明缺项，不冒称模型来源。
- 建立用户项目目录，保留原文件。运行[制作步骤](references/workflow.md)中的无损重编码工具，去掉文字、EXIF等元数据，并核对处理前后解码像素一致。输入不是PNG时先明确转换方式和色彩处理，不能把有损转换称作无损。
+ 阅读[完整作者提示词](prompts/author-original.prompt.txt)和[工作步骤](references/workflow.md)。作者要求完整构图、比例、轮廓、色彩、线条、细节与图层；不能擅自改成简化风格稿。
- ## 2. 实际看图，再生成 SVG
+ ## 2. 先完成静态重绘，再制作过程
- 列出构图、主体相对位置、轮廓、服装、颜色、光源与主要细节。以本图为唯一视觉依据，不搜索另一张图替代。把[重绘提示词](prompts/redraw.prompt.txt)交给绘图模型，保存实际模型名与提示词。
+ 优先让大模型以参考图为唯一视觉依据，编写原生 SVG 与自包含 HTML。SVG图层/元素使用语义化名称，保持viewBox比例。页面不含Canvas、image/img、Base64图片、外链、外部字体/框架/脚本；JS/CSS须内联。
- 模型输出完整 `redraw.svg`，使用真正的 path、形状和渐变；分为 sketch、ink、color、shadow、detail 五组。逐图检查内容，修正错位、缺漏和身份偏差。附带示例仅演示流程，用户换图时必须重新绘制，不能继续用示例人物。
+ 逐项比较人物五官、姿态比例、服装细节、物件、背景、光影与遮挡。粗稿应继续修正，不把“视频能导出”当成临摹通过。不能用完成图整张淡入、隐藏原图、背景贴图或逐像素矩形网格绕过要求。
- ## 3. 构建完整播放页
+ 本次高精度示例使用轮廓矢量化辅助路径。沿用此方法时，按工作步骤提供该图专属区域标注，明确记录“连续色域轮廓矢量化”，不冒称大模型手工逐笔绘制。不要把示例区域坐标套用其他图片。量化色差不为零时不能称“完全1:1”。
- 按[制作步骤](references/workflow.md)运行 `build_demo.py`。它检查 SVG 的安全结构、阶段组和比例，再输出可独立打开的 HTML。参考图始终保持不动；另一画布从空白逐步完成。
+ ## 3. 构建绘制流程
- 线稿用路径长度显现，上色与细节按独立图形显现。临时起稿/线稿随上色退出，最终轮廓应在对应形块上，避免被遮住的边线穿透人物。不要把整张成品一次淡入，也不要把随机像素块出现称作绘画。
+ 组织构图定位 → 线稿 → 固有色 → 阴影 → 高光 → 细节，并在末尾保留完整画面。各阶段按人物、服装、场景等实际区域推进，避免整图一次性出现。过程为绘制步骤重放，不是模型内部思考录屏。
- ## 4. 检查播放并导出视频
+ Demo必须能播放、暂停、重置和拖动；提供 `window.replay.duration` 与 `window.replay.renderAt(seconds)`，同一时间点结果必须一致。若模型生成了SMIL或CSS动画，为它添加内联适配函数控制动画时间，不依赖实际播放速度。
- 打开 Demo 检查开始、中间和结束；播放、暂停、拖动、重置都应有效。输入横图时上方是完整原图，下方为同比例绘图区，标签不覆盖画面。
+ 本包辅助生成工具用于具备相应区域结构的轮廓SVG；其他SVG或完整HTML应按其真实结构适配，不能硬塞进示例构建器。
- 运行 `export_video.cjs` 导出 MP4。导出器按 `frame_index / fps` 逐帧调用同一渲染函数，不依赖播放时的真实屏幕帧率。预览卡顿不能通过丢导出帧解决。
+ ## 4. 导出真正的视频
- ## 5. 验收与交付
+ 按[导出步骤](references/workflow.md)运行 `export_video.cjs`：浏览器只截取原生SVG；FFmpeg另外读取干净参考PNG，横图上下、竖图左右合成。原图可以出现在对比视频中，不能嵌入纯SVG网页冒充重绘。
- 核对解码帧数、尺寸、FPS、时长；检查起始绘图区为空白、绘制阶段可见、结尾完整并保留停留时间。再与原图比较构图和内容，明确存在的简化或偏差，不能把管线通过写成高相似度通过。
+ 固定帧率、逐帧取时，不以录屏卡顿决定时长。导出失败只重做视频阶段，保留已完成SVG/HTML，不重新调用绘图模型。
- 交付 MP4、HTML、SVG、干净参考图与简短参数记录。加音乐是独立后期步骤，使用有权使用的音轨；不复制灵感视频的配乐。此次绘图子任务中“只输出代码”的要求不取消最终的视频交付。
+ ## 5. 验收并交付
- ## 失败恢复
+ 检查空白起点、线稿、上色、最终画面；原图面板保持固定，末尾完整图可看清。核对视频帧数、尺寸、帧率与完整解码，区分SVG色差和视频压缩损失。
- - SVG 含位图、脚本、外链、错误阶段或比例：修正SVG后重建，不跳过检查。
- - 浏览器缺失：指定现有Chromium浏览器，或补齐已授权的环境；不要谎称已录制。
- - 导出中断：保留 SVG、HTML 与参数，只重做导出；不重新调用绘图模型。
- - 仅图形细节不符：修改SVG并重新导出，保留旧版，不改原图来迎合重绘。
+ 交付 MP4、HTML、SVG 和参数/验证记录，给出可打开的文件位置。只有输出文件实际存在并通过检查才报告完成。保留真实方法及仍存在的偏差；用户只收到网页时，继续完成视频，不结束任务。