svg_tutorial

第 12 章：训练流程：预训练、指令微调、偏好对齐与有效性保障

1. 开篇段落

在 SVG-MLLM 的开发周期中，训练阶段是将数据工程（第4章）、模型架构（第11章）与渲染引擎（第7章）熔炼为智能实体的核心过程。与训练普通的文本大模型（LLM）或纯视觉模型（ViT）不同，SVG 模型面临着独特的“三位一体”挑战：它必须具备代码生成的严谨性（XML 语法不能错）、视觉生成的感知力（画出的圆必须像圆）以及自然语言的逻辑性（理解“对齐”、“分布”等抽象概念）。

本章将全景式地拆解 SVG-MLLM 的训练流水线。我们将从预训练（Pre-training）开始，探讨如何让模型建立“文本-矢量-像素”的联合表征；接着进入指令微调（SFT），详细讲解如何构造高质量的合成指令数据；随后深入偏好对齐（Alignment），介绍如何利用渲染反馈（Reward via Rendering）来优化生成的图形质量。最后，我们将重点剖析有效性保障机制，包括训练时的数值策略和推理时的约束解码（Grammar-Guided Decoding），这是保证模型输出 100% 可用性的关键技术。

---

2. 核心难点与训练哲学

在开始具体步骤前，我们需要确立 SVG 训练的几个核心原则（Rule of Thumb）：

1. SVG 是“长序列”与“高密度”的矛盾体：
   • 一个简单的图标可能只有 200 个 token，但一张工程图可能包含 10,000 个坐标点。训练必须兼顾这两种分布。
2. 坐标即语义：
   • 在文本模型中，“苹果”和“香蕉”是独立的 token；但在 SVG 中，M 10 10 和 M 11 11 在几何上极其接近。模型必须学会这种数值连续性。
3. 渲染闭环是必须的：
   • 如果只用 Text Loss（交叉熵）训练，模型会倾向于记住“代码字符串”而非“图形结构”。必须在训练或评估回路中引入渲染器，建立 Code -> Pixel 的反馈。

---

3. 阶段一：预训练 (Pre-training) —— 注入领域知识

预训练的目标是让模型学会 SVG 的“语言语法”和“视觉语义”。

3.1 混合模态数据配比

不要只给模型看 SVG 数据，否则它的自然语言理解能力会退化（Catastrophic Forgetting）。推荐的数据混合策略如下：

• 50% SVG-Text 对：来自 CommonCrawl 筛选的 (SVG Code, Alt Text) 或 (SVG Code, Synthetic Caption)。
• 30% 纯代码（Code）：HTML、XML、Python（matplotlib/cairo 代码）。这有助于模型理解结构嵌套、闭合标签和编程逻辑。
• 20% 纯文本（Text）：通用语料，保持基础的指令遵循和逻辑推理能力。

3.2 预训练任务设计

任务 A：自回归生成 (Causal Language Modeling, CLM)

• 形式：Input: <svg width="100"... -> Target: ...</svg>
• 目的：这是基础。让模型学会 XML 的 tag 顺序、属性规范。
• 技巧：
  • 文件内打乱（Shuffle Attributes）：SVG 属性如 width 和 height 的顺序不影响渲染。在训练时随机交换属性顺序，防止模型过拟合特定的序列模式。

任务 B：掩码跨度预测 (Masked Span Prediction / In-filling)

• 形式：d="M10 10 [MASK] 50 50"
• 目的：强化几何推断能力。
• 场景：遮盖掉 path 中的中间点，强迫模型根据起点和终点插值出平滑曲线；或者遮盖掉闭合标签 z，强迫模型学会闭合图形。

任务 C：视觉一致性对齐 (Visual-Structural Alignment)

这是多模态模型特有的。

• 流程：
  1. 输入：SVG 代码片段。
  2. Encoder 输出：SVG 向量表征 $E_{svg}$。
  3. 渲染：利用 resvg 将 SVG 渲染为图像，通过 Vision Encoder 得到 $E_{img}$。
  4. Loss：最小化 $1 - \text{CosineSimilarity}(E_{svg}, E_{img})$。
• 作用：拉近代码与视觉的距离，让模型明白 <circle> 代码对应“圆形”的视觉特征。

---

4. 阶段二：指令微调 (Instruction Tuning) —— 激发交互能力

预训练后的模型只会“续写”代码，SFT 的目标是让它听懂“指令”。由于高质量的 (Instruction, SVG) 数据极度稀缺，本阶段的核心在于数据合成（Data Synthesis）。

4.1 核心指令数据构造流水线

1. 逆向描述生成 (Captioning-to-Code)

利用 GPT-4V 或 Gemini Pro Vision 等强力多模态模型。

• 输入：一张 SVG 渲染图。
• Prompt：“请详细描述这张图的几何构成、颜色布局，并推测生成它的意图。如果是图标，描述其含义。”
• 数据对：(Model Generated Caption) -> (Original SVG Code)。
• 注意：要控制描述的粒度，生成三种不同层级的描述：
  • High-level: “一个红色的搜索图标。”
  • Mid-level: “一个红色的圆环，右下角有一个向外延伸的长方形手柄。”
  • Low-level: “画一个圆心在(50,50)半径20的圆…“（类似代码注释）。

2. 程序化编辑与指令合成 (Programmatic Editing)

利用 Python 的 xml.etree 或 lxml 库对 SVG 进行随机扰动，生成完美的编辑指令数据。

• 原图：一个蓝色的矩形 <rect fill="blue" ... />。
• 操作：脚本将 fill 属性改为 red。
• 合成指令：模板填充 -> “把蓝色的矩形改成红色” / “Change the color to red”。
• 数据对：User: [Original SVG] + "把颜色变红" -> Assistant: [Modified SVG]。
• 扩展：可以程序化生成“旋转”、“缩放”、“位移”、“加粗边框”等成千上万条精准数据。

3. 思维链 (CoT) 数据增强

为了解决复杂图形生成难的问题，我们需要让模型学会“分步画”。

• 构造方法：解析 SVG DOM 树，将其转化为自然语言步骤。
• 数据样例：
  • User: “画一个房子。”
  • Assistant:
    • <thought> 首先，我需要画一个三角形作为屋顶。然后，在屋顶下方画一个正方形作为主体。最后，在主体中间画一个小矩形作为门。 </thought>
    • <code> </code>

4.2 训练输入格式 (Prompt Engineering)

为了兼容纯文本 LLM 的架构，通常将 SVG 包装在特殊 token 中：

User: Generate a warning icon.
Assistant: <|svg_start|>
<svg viewBox="0 0 24 24">
  <path d="..." />
</svg>
<|svg_end|>

---

5. 有效性保障：数值策略与约束解码

SVG 训练中最大的坑在于生成了无效代码。

5.1 数值表示与 Tokenization

SVG 坐标（如 d="M 12.5 34.2"）对通用 Tokenizer 是噩梦。

• 问题：LLaMA 的 tokenizer 可能把 12.5 切分为 1, 2, ., 5，或者 12, .5。这破坏了数值的连续性。
• 策略 A：坐标离散化（Coordinate Binning）
  • 将所有坐标归一化到 0-1000 的整数。
  • 扩展词表，加入 <0> 到 <1000> 的特殊 token。
  • SVG 代码变为：M <12> <34>。
  • 优点：大大缩短序列长度，模型更容易学习空间关系。
• 策略 B：纯文本数字优化
  • 如果必须保留浮点数，强制将所有数字格式化为固定精度（如保留1位小数），避免模型在 10.000001 和 10 之间纠结。

5.2 约束解码 (Grammar-Guided Decoding / GGD)

这是本章最重要的工程技巧（Rule of Thumb）。 不要在训练中过度追求 100% 语法正确，而应在推理阶段强制约束。

• 原理：在 LLM 生成每一个 token 时，检查该 token 是否符合 SVG/XML 的语法树（CFG）。如果不符合，将其概率设为 0。
• 实现层级：
  1. XML 结构层：当处于 < 后，候选词只能是 svg, path, rect, g, defs 等标签名。
  2. 属性层：当处于 <rect 后，候选词只能是 x, y, width, height, fill 等属性名。
  3. Path 数据层 (最关键)：当处于 d=" 后，进入几何状态机。
     • 如果刚生成了 M (Move to)，接下来必须是两个数字（x, y）。
     • 禁止在数字中间生成字母。
     • 禁止在引号未闭合前生成 >。
• 收益：使用 GGD 可以将生成代码的语法解析成功率从 85% 提升到 99.9%，且不额外消耗训练资源。

---

6. 阶段三：偏好对齐 (Alignment) —— 追求“更可用”

SFT 后的模型能画图，但往往代码冗余（画了100个小线段代替一条曲线）或不美观。我们需要 RLHF 或 DPO。

6.1 奖励模型 (Reward Model) 的多维信号

我们需要计算一个标量 $R$ 来衡量 SVG 的好坏：

\[R = w_1 R_{parse} + w_2 R_{render} + w_3 R_{simplicity} + w_4 R_{aesthetic}\]

1. $R_{parse}$ (语法分)：能被 XML parser 解析 +1，否则 -10。
2. $R_{render}$ (渲染一致性)：渲染图 $I_{gen}$ 与 Ground Truth $I_{gt}$ 的相似度（CLIP Score 或 LPIPS）。
3. $R_{simplicity}$ (奥卡姆剃刀)：
   • 文件大小：越小越好。
   • 指令数：用贝塞尔曲线（C）代替折线（L）得分更高。
   • 原语使用：用 <circle> 代替 <path> 画圆得分更高（语义更清晰）。
4. $R_{aesthetic}$ (美学分)：基于美学评分模型（Aesthetic Scorer）对渲染图打分。

6.2 DPO (Direct Preference Optimization) 实践

相比 RLHF，DPO 更稳定。

• 数据构造：
  • Prompt: “画一个圆角矩形。”
  • Chosen (赢家): <rect x="10" y="10" rx="5" ... /> (使用了 rx 属性，代码短)
  • Rejected (输家): <path d="M 15 10 L ... Q ... " /> (用 path 模拟圆角，代码长且难编辑)
• 训练：让模型增加生成 Chosen 的概率，降低生成 Rejected 的概率。这能有效引导模型写出“人类开发者喜欢”的干净 SVG 代码。

---

7. 课程学习 (Curriculum Learning)

为了稳定训练，建议按难度分级推进：

阶段	数据类型	学习目标	训练重点
Stage 1	基本图元 (Primitives)	坐标空间、基本属性	只有 rect, circle, line。强约束坐标范围。
Stage 2	图标与符号 (Icons)	Path 语言、组合 (Group)	引入 <path d="..."> 和简单的 <g> 嵌套。
Stage 3	复杂插画 (Illustration)	层次结构、色彩、复用	引入 <defs>, <use>, gradient, mask。
Stage 4	动态交互 (Animation)	时间维度、事件	引入 <animate>, <set>。

---

8. 本章小结

SVG-MLLM 的训练不是简单的“文本生成训练”，而是一个代码生成与视觉渲染深度耦合的系统工程。

1. 预训练决定了模型的上限（多模态理解力）。
2. 指令微调决定了模型的可用性（听懂人话）。
3. 约束解码是落地的安全带（保证不报错）。
4. 偏好对齐是通往“专家级”生成的阶梯（代码优雅、结构精简）。

---

9. 练习题

基础题

1. 数据配比：在预训练中，为什么要保留 30% 的非 SVG 代码（如 Python/HTML）？如果去掉这部分会有什么具体影响？
2. 约束解码：请设计一个简单的状态机（FSM）逻辑，用于约束 <rect> 标签内部的生成过程。需要包含哪些状态？
3. Loss 设计：在计算视觉对齐 Loss 时，为什么我们通常使用渲染后的图像 Embedding 计算余弦相似度，而不是直接计算像素级的 MSE（均方误差）？（提示：考虑 SVG 的拓扑不变性）。

挑战题

1. 场景设计：假设你要训练一个专门用于“UI 界面生成”的 SVG 模型。除了通用的 SVG 数据，你还需要构造什么样的特定指令数据？请给出 3 个具体的 Prompt 模板。
2. DPO 构造：编写一个 Python 函数思路，自动判断两个渲染效果相同的 SVG 中，哪一个更优（作为 Chosen）。你需要考虑哪些具体的指标？（Hint: path 节点数、DOM 深度、属性冗余度）。
3. 思考题：SVG 中的 transform="matrix(...)" 属性对于人类和模型都很难直观理解。在训练前的数据预处理阶段，应该保留它，还是将其“烘焙”（Bake）应用到具体的坐标点中？分析两者的利弊。

---

10. 常见陷阱与错误 (Gotchas)

1. “NaN” 梯度爆炸：
   • 现象：训练中 Loss 突然变成 NaN。
   • 原因：SVG 中存在极小或极大的坐标值（如 1e-9 或 1e9），导致回归 Loss 或 Embedding 计算溢出。
   • 对策：在预处理阶段严格执行坐标 Clamping（截断）和 Normalization（归一化）。
2. ViewBox 陷阱：
   • 现象：模型生成的图在画布外，或者只有左上角一点点。
   • 原因：训练数据中混杂了 viewBox="0 0 1024 1024" 和 viewBox="0 0 24 24" 的数据，模型搞混了尺度。
   • 对策：强制重缩放（Rescaling）。在 Data Loader 中，利用正则将所有 SVG 的 path 数据重映射到统一的 0-1024 空间，并覆写 viewBox 属性。
3. 颜色过拟合：
   • 现象：模型不管什么指令都喜欢画黑色的图。
   • 原因：互联网上的 icon 大多是黑色的（默认 fill=”black”）。
   • 对策：色彩增强（Color Augmentation）。在训练时，随机将 SVG 源码中的颜色属性替换为其他随机颜色，并同步修改对应的 Caption（如果 Caption 包含颜色词）。
4. 忽略自交（Self-Intersection）：
   • 现象：生成的图形边缘打结，甚至导致渲染引擎崩溃。
   • 对策：在 DPO 阶段，使用 shapely 等几何库检测 path 是否自交，对严重自交的样本给予极其严厉的负反馈（Negative Reward）。