Skip to content

image-design-to-editable-ppt.md

Latest commit

 

History

History
239 lines (176 loc) · 9.88 KB

image-design-to-editable-ppt.md

File metadata and controls

239 lines (176 loc) · 9.88 KB
Raw

图片设计稿到可编辑 PPT 的复原文档

本文定义“图片设计稿 / 截图 / 多页 PDF / 图片版 PPT → 可编辑 PowerPoint”的处理方法。目标是让用户得到一个可以继续编辑文字、形状、图片资产和备注的 .pptx，而不是只有一张整页截图的 PPT。

1. 输入输出契约

输入

  • 单张设计稿图片：输出 1 页 PPT。
  • 多张图片：每张图片对应 1 页 PPT，按输入顺序排列。
  • 多页 PDF：第 N 页对应 PPT 第 N 页。
  • 图片版 PPT/PPTX：每页渲染成图片后重建，原备注按页复制。

输出

output/<job-id>/
  deck_manifest.json
  pages/
    page_001/
      source.png
      layout.json
      manifest.json
      assets/
      page.pptx
      preview.png
      validation.json
  final/
    editable.pptx
    validation.json

最终交付：final/editable.pptx。

2. Image-first 到可编辑重建的核心原则

这一类任务不能被理解成“自动 OCR 转 PPT”，也不能理解成“把整页参考图塞进 PPT”。正确做法是把流程拆成两个明确阶段：

内容 / 提示词 / 资料
  -> image2 / imagegen 生成单页 PPT 视觉参考图
  -> 逐页锁定视觉版式、配色、层级和复杂视觉资产
  -> 局部截图保留复杂插图、图标、地图、纹理、复杂图表卡片
  -> 用 PowerPoint 原生文本框、形状、线条、表格、图表重建可编辑结构
  -> 渲染预览并逐页对照参考图修正
  -> 输出可编辑 PPTX

一句话：image2 负责视觉定稿，PowerPoint / Presentations 负责可编辑重建。

2.1 两种输入模式

模式 适用情况 关键产物 决策依据
文档到参考图 用户只有主题、报告、逐页提示词或零散材料 slideXX_reference.png 先用 image2 / imagegen 生成每页真实视觉稿
参考图到可编辑 PPT 已经有单页参考 PNG / 截图 / PDF 页面图 editable.pptx + previews 只以当前单页参考图作为版式和视觉标准

进入第二种模式后，不要再用原始文档重新发明版式。原始文档只用于核对文字语义；页面位置、视觉层级、配色、插图风格和卡片关系以单页参考图为准。

2.2 必须保持可编辑的对象

以下对象只要可读、边界清晰，就应重建为 PPT 原生对象：

  • 章节号、页码、标题、副标题、正文、脚注。
  • 数字卡片、指标说明、标签、气泡标注、结论条。
  • 圆角卡片、分隔线、箭头、连接线、流程节点、时间线。
  • 表格文字、图例、轴标签、普通柱状 / 折线 / 面积图的数据文字。
  • 可用简单形状稳定复现的徽章、底板、色块、浅色背景纹理。

普通段落必须放在一个自然文本框里，让 PowerPoint 自动换行；不要为了对齐而在正文、卡片文案、项目符号里硬插 \n。

2.3 应当局部截图保留的对象

以下对象优先作为局部图片资产插入，而不是强行矢量重画：

  • image2 / imagegen 生成的复杂插画、人物、产品图、地图、流域图、徽章、纹理。
  • 复杂饼图、环形图、放射状图、密集关系图等很难可靠复现比例的图表卡片。
  • 需要完全匹配风格的小图标组、图标 + 标题条、复杂装饰角标。
  • 与插画深度融合、强行拆分会明显变脏或失真的局部文字。
  • 无法用纯色 / 渐变 / 简单形状干净复现的背景碎片。

局部截图要“够大但不越界”：必须包含完整图标边缘、引线、标签、底部说明和卡片圆角，但不能把无关正文、相邻卡片或整页背景残影一起带进去。截图区域一旦接近整页，就说明拆层失败。

2.4 参考图生成约束

为了让后续重建质量稳定，生成参考图时应主动降低拆层难度：

  • 每次只生成一页，文件命名为 slide01_reference.png、slide02_reference.png 等。
  • 不要用多页合集图、contact sheet 或缩略图作为单页重建依据。
  • 背景尽量干净：纯白、浅灰、浅纹理、低透明装饰优先。
  • 文字区、卡片区、表格区不要压在复杂插画或高对比纹理上。
  • 统一母版元素：章节徽章、页眉线、页脚、结论条、品牌色必须跨页一致。
  • 对中文学术 / 答辩类 PPT，优先规划足够留白和可读字号，避免海报式高密度堆叠。

2.5 逐页 QA 闭环

每页都必须经历“构建 -> 渲染 -> 对照 -> 局部修复”：

  1. 只打开当前页参考图，识别标题区、正文区、卡片、图表、插图、箭头、结论条、页脚。
  2. 明确每个对象的策略：editable_text、editable_shape、editable_table、editable_chart、local_crop、clean_background。
  3. 先搭背景和结构，再放局部截图资产，最后放文本，避免图片遮挡可编辑文字。
  4. 导出当前页预览 PNG，与参考图检查位置、字号、色彩、层级、裁图边缘和文字溢出。
  5. 只修失败对象：文本错只修文本框，裁图缺边只重切该资产，层级错只调 z-index。
  6. 当前页通过后再进入下一页，多页任务再生成 contact sheet 做总览检查。

2.6 失败红线

出现以下情况必须返工：

  • 最终 PPT 页面本质上是一张整页截图。
  • 标题、正文、卡片、标签、结论条不可编辑。
  • 为了制造换行手动插入大量 \n，导致用户后续难以编辑。
  • 图标、地图、环形图等复杂资产被粗糙重画，明显不如参考图。
  • 局部截图切掉标签、箭头、圆角、阴影或底部说明。
  • 局部截图带入相邻文字残影、脏背景或无关边框。
  • 文字出框、贴边、被插图遮挡，或中英文混排字体明显漂移。

3. PPT 复原的核心策略

3.1 先拆层，再重建

  1. 背景层：纯色、渐变、规则纹理优先用 slide background 或 shape；复杂照片/插画用 clean base 图片。
  2. 结构层：网格、卡片、分栏、图表容器、时间线、箭头、装饰线用 PowerPoint shape。
  3. 文本层：标题、正文、标注、图表数值恢复为 text box。
  4. 资产层：logo、icon、插画、照片、复杂装饰拆为独立图片。
  5. 备注层：如果输入是 PPT/PPTX，备注原样复制，不交给视觉 worker 改写。

3.2 对象复原优先级

原生文本 > 原生形状 > 原生图表/表格 > 独立透明图片 > 整页背景图

只有当对象复杂、低清、语义不确定或无法稳定编辑时，才退化为图片资产。

4. 页面分析步骤

Step 1：画布与版式识别

  • 读取源图宽高，确定 PPT 页面比例：16:9、4:3、A4 或自定义。
  • 识别安全边距、主视觉区域、标题区、页脚、导航/章节标识。
  • 建立坐标转换：source px -> ppt point/EMU。

Step 2：文本 inventory

对每段文字记录：

{
  "id": "txt_001",
  "text": "年度业绩概览",
  "bbox": [80, 96, 540, 64],
  "font_size": 42,
  "font_weight": 700,
  "color": "#111827",
  "align": "left",
  "line_height": 1.18,
  "confidence": 0.96
}

处理规则：

  • 可读文字必须变成文本框。
  • 文字过小或模糊时，保留视觉近似并标记 needs_review。
  • 中英文混排要记录字体 fallback。
  • 同一段落不要拆成过多文本框，避免用户编辑困难。

Step 3：形状与图表重建

  • 矩形、圆角矩形、圆形、线条、箭头、虚线、阴影用 PowerPoint shape。
  • 表格优先用 PowerPoint table；如果样式复杂，可用线条 + 文本框。
  • 图表若能读出数据，使用可编辑 chart；否则用形状拟合柱/线/饼，并把数据标记为估算。

Step 4：复杂资产拆分

复杂资产包括：照片、人物、产品图、复杂插画、纹理背景、手绘风装饰等。

处理方式：

  1. 从源图裁切候选区域。
  2. 需要透明背景时进行抠图或 chroma-key asset sheet。
  3. 对每个资产记录 source_bbox、hash、处理方式、置信度。
  4. 在 PPT 中用图片对象插入，而不是嵌入整页截图。

Step 5：生成页面 manifest

manifest.json 负责描述 PPT 构建需要的所有对象：

{
  "slide": { "width": 13.333, "height": 7.5, "unit": "inch" },
  "objects": [
    { "type": "shape", "shape": "rect", "x": 0, "y": 0, "w": 13.333, "h": 7.5, "fill": "#F7F8FA" },
    { "type": "text", "text": "年度业绩概览", "x": 0.74, "y": 0.62, "w": 5.0, "h": 0.5 }
  ],
  "assets": []
}

5. 构建 PPTX

推荐使用确定性脚本执行构建：

  1. 读取 manifest.json。
  2. 创建空白 slide。
  3. 先绘制背景，再绘制结构形状，再插入资产，最后放置文字。
  4. 应用主题字体、颜色、母版页脚。
  5. 复制备注。
  6. 保存 page.pptx，最终合并为 editable.pptx。

6. QA 标准

维度 通过标准
页数 输出页数与输入页数一致
文字 关键标题、正文、数值无缺失，文本可选中编辑
位置 主要对象 bbox 与源图视觉偏差在可接受范围内
层级 遮挡、阴影、浮层顺序正确
资产 复杂图像独立存在，有 provenance
可编辑性 不把整页截图作为唯一内容
备注 PPT/PPTX 输入备注按页原样保留

7. 局部修复策略

  • 文本错：只修对应文本框内容、字号或位置。
  • 图标错：只重切或重生成该图标。
  • 背景破：只修 clean base 或局部背景块。
  • 层级错：只调整 z-index。
  • 页面比例错：重新计算全页坐标，但不要改变已确认的文本内容。

8. 给傻瓜用户的 App 流程建议

  1. 用户上传图片/PDF/PPT。
  2. App 展示页面缩略图，并提示“先试 1 页”。
  3. 后端生成 layout.json 和可编辑 PPT 预览。
  4. 用户在 App 中选择“更像原图”或“更方便编辑”。
  5. 对失败项执行局部修复。
  6. 导出 .pptx，同时提供“可编辑对象清单”和“需要人工复核项”。