基于视觉反馈的自我蒸馏策略优化：连接代码与视觉制品

# 基于视觉反馈的自蒸馏策略优化：弥合代码与视觉制品之间的鸿沟 来源: https://arxiv.org/html/2606.10334

###### 摘要  
代码生成式大语言模型（LLMs）越来越多地通过编写程序来生成图表、网页和幻灯片等视觉制品，这些程序由不可微渲染器执行，模型在观察到渲染结果之前就须提交代码。因此，本应可执行的代码往往会产生带有明显视觉缺陷的制品，例如元素重叠、文本被裁剪、对齐错乱、对比度低和内容溢出。我们研究针对代码生成的视觉制品的视觉反馈自蒸馏方法。我们提出 Visual-SDPO，一种自蒸馏策略优化框架，该框架将渲染后的视觉反馈作为权重共享教师的**特权上下文**，并将此反馈蒸馏到编码学生中。为了使监督具有空间针对性而非均匀性，我们引入**视觉接地代码信用加权**，该方法将每一个检测到的缺陷回溯到导致该缺陷的元素所对应的代码语句，并放大这些语句上的蒸馏信号。一个序列级别的 GRPO（组相对策略优化）项补充了密集的 token 级目标函数，即使在代码执行失败的回合中也能提供有用的训练信号。我们基于统一的 Qwen3-VL-8B-Instruct 骨干网络，为图表、网页/UI 和幻灯片生成实现了 Visual-SDPO。在图表到代码、UI 到代码和幻灯片生成基准测试（ChartMimic、Design2Code 和 AeSlides）中，Visual-SDPO 在主要指标上比零样本基线提升了超过 10 个绝对百分点，并且比 GRPO 至少高出 2.4 个百分点，同时训练步骤更少，且无需增加推理时间成本。

## 1 引言  
代码驱动的视觉制品生成——图表、幻灯片和网页——已成为通用助手的一项核心能力[30 (https://arxiv.org/html/2606.10334#bib.bib4),9 (https://arxiv.org/html/2606.10334#bib.bib27),38 (https://arxiv.org/html/2606.10334#bib.bib1)]。然而，模型优化的目标（代码）与用户或基准测试评估的目标（渲染后的像素）之间隔着一个不可微的渲染步骤。模型必须在看到渲染结果之前提交代码，因此语法上有效的程序常常产生明显有缺陷的视觉制品：图例与数据重叠、文本在框架边界处被裁剪、元素碰撞、形状不对称。  

参考图注  

图 1：Visual-SDPO 概览。  
**学生 LLM** 生成一个代码序列（简化为 token 条，顶部中央）；**渲染器**（matplotlib、Playwright 或 python-pptx）产生渲染后的制品。一个**缺陷检测器**返回视觉问题周围的区域（示例中图例与数据线重叠），一个**评分规则提取器**生成结构化的二进制缺陷表。两者都输入**教师 LLM**，该教师与学生共享权重，但额外以该特权视觉上下文为条件。**空间映射**将每个缺陷区域反向引用到负责的代码语句，生成每条语句的责任分数 \(\mathrm{resp}(s)\)，这些分数由该语句中的每个 token 共享，并转换为每个 token 的权重 \(w_t = 1 + (\alpha - 1) \cdot \mathrm{resp}(s(t))\)，并进行归一化。这些权重缩放学生和教师分布之间的 token 级 KL 散度，将蒸馏梯度集中在产生缺陷区域的代码语句上。序列级别的 GRPO 奖励（右下角）与该蒸馏损失结合，构成完整的训练目标。推理时，学生无需渲染器、缺陷检测器、评分规则提取器或教师传递即可运行。

现有方法主要通过两种方式应对这种代码-视觉鸿沟，两者都有重要局限。**推理时视觉反思**[38 (https://arxiv.org/html/2606.10334#bib.bib1),21 (https://arxiv.org/html/2606.10334#bib.bib2)] 运行渲染-批评-修订循环，直到 VLM 批评者接受该制品。每次迭代都重新执行渲染器、重新查询批评者并重新生成代码，因此部署成本随着优化轮次增加而增长，并且在推理时需要同时具备渲染器和 VLM 批评者。**视觉奖励强化学习**[20 (https://arxiv.org/html/2606.10334#bib.bib3),30 (https://arxiv.org/html/2606.10334#bib.bib4),3 (https://arxiv.org/html/2606.10334#bib.bib5),5 (https://arxiv.org/html/2606.10334#bib.bib6),25 (https://arxiv.org/html/2606.10334#bib.bib7),34 (https://arxiv.org/html/2606.10334#bib.bib8)] 则针对图像级别的标量奖励优化 GRPO 或 DPO。这种监督是稀疏且轨迹级别的：每个元素的诊断信息在能够影响梯度之前就被压缩成一个单一数字。

我们提出第三条路径，总结于图 1 (https://arxiv.org/html/2606.10334#S1.F1)：利用渲染后的视觉反馈作为自蒸馏 [11 (https://arxiv.org/html/2606.10334#bib.bib9)] 的**特权上下文**。教师以渲染后的制品或其结构化摘要为条件，而学生仅以原始提示为条件。然后，token 级蒸馏将视觉理解转移到推理时无需渲染器的学生。与标量奖励不同，这种反馈是**可定位**的：它识别哪个元素重叠、哪段文本被裁剪、哪种颜色组合不可读。

然而，均匀的 token 级蒸馏可能通过匹配与视觉结果无关位置（控制流 token、变量声明和其他非视觉脚手架）上的教师 logits 而导致策略漂移。为了缓解这一问题，我们将蒸馏梯度引导向产生渲染缺陷的代码语句，同时保留非缺陷语句上的基线梯度。我们将此机制形式化为**视觉接地代码信用加权**。我们将 token 级目标与序列级 GRPO 奖励配对，因为这两个信号是互补的：蒸馏提供密集、可本地化的监督，而轨迹级奖励则锚定训练并在各领域间迁移。它们共同使训练既稳定又高效。

Visual-SDPO 位于特权自蒸馏、视觉反馈训练和代码生成视觉制品的交叉点。

#### 贡献。
1. **Visual-SDPO**，一种针对代码生成视觉制品的视觉反馈自蒸馏框架，其中权重共享的教师观察渲染后的制品作为特权上下文，并将该反馈蒸馏到编码学生中。
2. **视觉接地代码信用加权**，一种视觉接地代码信用分配机制，它将渲染出的视觉缺陷回溯到负责的代码语句，并使用它们加权 token 级蒸馏。我们将此 token 级信号与互补的序列级 GRPO 奖励相结合。
3. 一种统一的实现和评估，涵盖图表到代码、UI 到代码和幻灯片生成基准——ChartMimic、Design2Code 和 AeSlides，基于单一的 Qwen3-VL-8B-Instruct 骨干网络，在主要指标上比零样本基线提升超过 10 个绝对百分点。

## 2 方法

### 2.1 问题设置  
令 \(x\) 表示任务输入——一条自然语言指令，可选配参考图像（例如，要复现的截图）。策略 \(\pi_\theta\) 生成代码序列 \(y = (y_1, \dots, y_T)\)。确定性渲染器 \(R\) 将 \(y\) 映射为渲染后的制品 \(R(y)\)，例如 HTML 页面、图表图像或幻灯片组。视觉诊断提取器将渲染后的制品转换为特权视觉上下文 \(v\)：可以是渲染图像本身，也可以是对齐、重叠、对比度和溢出等缺陷类别的评分规则结构化得分向量。从同一渲染制品中，缺陷检测器返回一组检测到的视觉缺陷 \(D = \{(\mathrm{region}_i, \mathrm{severity}_i)\}\)，每个缺陷带有二进制严重性标签。区域到代码的映射 \(M\) 识别出 \(y\) 中每条语句 \(s\)（图表的 Python 源代码行、网页的 HTML 元素、或幻灯片中 python-pptx 创建形状的调用）所产生的渲染区域。

### 2.2 视觉反馈自蒸馏  
学生仅接受原始输入 \(x\)，生成条件分布 \(p_S(y_t \mid y_{<t}, x)\)。教师接受相同的输入加上特权上下文 \(v(R(y))\)，生成条件分布 \(p_T(y_t \mid y_{<t}, x, v)\)。蒸馏目标是最小化两个分布之间的逐位置 KL 散度，在学生的自生成序列（即轨迹）上求期望。权重 \(\lambda_t\) 缩放每个 token 位置的梯度，根据该 token 对视觉缺陷的负责程度。

### 2.3 视觉接地代码信用加权  
对于每个渲染后的轨迹，区域到代码的映射 \(M\) 提供每个缺陷区域与产生它的代码语句之间的对应关系。对于每条语句 \(s\)，我们计算其主要视觉责任分数 \(\mathrm{resp}(s)\)，该分数聚合了生成区域中缺陷的覆盖程度。然后，语句 \(s\) 中每个 token \(y_t\) 的权重 \(w_t\) 定义为：
\[
w_t = 1 + (\alpha - 1) \cdot \mathrm{resp}(s(t))
\]
其中 \(\alpha > 1\) 放大负责语句的权重，而 \(\{s(t)\}\) 是 token \(t\) 所属的语句。权重在批次内进行归一化。

### 2.4 GRPO 与蒸馏的结合  
蒸馏损失 \(\mathcal{L}_{\text{distill}}\) 提供密集的 token 级信号。为了锚定训练并补充序列级信号，我们添加一个 GRPO 奖励项 \(\mathcal{R}(y, R(y))\)，该奖励可能基于渲染制品的可验证属性（例如，图表相似度、布局对齐分数、幻灯片美学规则）。最终目标是两种损失（按比例 \(\beta\) 混合）与 KL 惩罚项的组合，以确保学生分布不会偏离教师过远。

### 2.5 训练与推理  
训练时，每个批次中学生生成轨迹，渲染器渲染它们，缺陷检测器和映射计算信用分数，然后计算蒸馏损失和 GRPO 奖励。教师在同一前向传递中运行。推理时，仅使用学生模型 \(p_S(y \mid x)\)，无需渲染器或教师。

## 3 实验  

### 3.1 设置  
我们在三个基准上评估 Visual-SDPO：**ChartMimic**[参见 https://arxiv.org/html/2606.10334#bib.bib0]（图表到代码）、**Design2Code**（UI 到代码）和 **AeSlides**（幻灯片生成）。所有方法均基于 Qwen3-VL-8B-Instruct 骨干网络。基线包括零样本、SFT、GRPO（视觉奖励 RL）和 Only Privileged Self-Distillation（OPSD，教师接收参考代码而非渲染反馈）。主要指标是每领域的标准度量：ChartMimic 的图表相似度、Design2Code 的视觉 match 分数以及 AeSlides 的四轴平均分。

### 3.2 主要结果——图表领域（表 1）  
表 1：ChartMimic 结果。平均相似度是四个图表 AI 指标（内容、位置、样式、重叠）的加权平均。所有消融实验（高亮行）均使用 Qwen3-VL-8B-Instruct。OPSD 观察参考代码和学生草图代码之间的差异，但不关注渲染质量。

#### 消融分析。  
(1) **+ SFT** 在 ChartMimic-4k-train 上（+3.5 平均相似度）学习图表的通用语法模式，如正确的绘图函数调用和轴标签放置，但不优化图表的视觉保真度。(2) **+ OPSD**（+0.8 超过 SFT）添加了代码级教师，但该教师只能看到代码差异，无法直接观察到渲染结果；其增益有限，因为它无法识别渲染中哪些缺陷源于特定代码选择。(3) **+ Visual-SDPO**（+7.2 超过 SFT，+6.4 超过 OPSD）通过视觉接地代码信用加权，在 token 级别直接定位视觉缺陷并修正相关语句，从而在视觉保真度上取得了大幅提升。(4) **+ GRPO**（+5.8 超过 SFT）与该视觉奖励空间的目标函数对齐，提供序列级的全局信号。(5) **+ Visual-SDPO + GRPO**（+10.7 超过 SFT，+4.9 超过纯 GRPO）将两者结合：密集的 token 级蒸馏信号修补局部渲染错误，而序列级 GRPO 锚定了有效的宏观布局模式。  

图 2：ChartMimic 的视觉比较，展示了从视觉反馈中学习到的元素位置调整、图例优化和文本清晰度。

### 3.3 主要结果——UI 领域（表 2）  
表 2：Design2Code 结果。匹配分数（Match Score）是 Design2Code 的官方度量，基于布局 DTD 比对。视觉 mIoU 测量像素级交并比。所有消融实验（高亮行）均使用 Qwen3-VL-8B-Instruct。

#### 消融分析。  
在 Design2Code 上，趋势与 ChartMimic 类似：  
(1) **+ SFT**（+2.8 匹配分数，+3.2 mIoU）学习 HTML/CSS 布局的一般结构，但无法修复细粒度的对齐或溢出问题。(2) **+ OPSD**（+1.1 超过 SFT）的增益有限，因为代码差异无法捕捉到未对齐的浮动元素或超出右边界溢出等渲染问题。(3) **+ Visual-SDPO**（+5.6 超过 SFT，+4.5 超过 OPSD）通过视觉接地加权，精确地定位到需要修改 CSS 宽度或位置属性的句子，从而大幅提升匹配度。

### 3.4 主要结果——幻灯片领域（表 3）  
表 3：AeSlides 在 AeSlides-7k-eval 分割上的结果（保留幻灯片组）。平均分是四个 AeSlides 可验证轴（宽高比合规性、空白空间、碰撞、不平衡）的算术平均值，经归一化以便更高分数代表更高品质。所有消融实验（高亮行）均使用 Qwen3-VL-8B-Instruct。省略了 OPSD，因为仅含指令的幻灯片语料库没有特权教师的参考代码。

#### 消融分析。  
在 AeSlides 上，单阶段提升最大来自可验证奖励（GRPO）阶段；此处省略了 OPSD，因为仅含指令的幻灯片语料库没有特权教师的参考代码。(1) **+ SFT** 在 AeSlides-7k-train 上（+3.3 平均分）在各领域中提升最小：它教授了通用的幻灯片页面结构，但并未直接优化作为评估依据的四条规则化指标。(2) **+ GRPO** 配合 4 轴可验证奖励（+5.4 超过 SFT）是单步贡献最大的，这与奖励与评估指标一致相符，使序列级 RL 能够直接优化四个可验证轴。(3) **+ Visual-SDPO**（+2.5 超过 GRPO，+11.2 超过基线）表明，在指标对齐的 GRPO 基础上，token 级信用分配仍然增加了价值：逐条语句的责任机制将每个宽高比违规与负责的形状/布局语句联系起来，而非仅奖励整个序列。

#### 训练效率。  
密集的逐 token 蒸馏信号也使 Visual-SDPO 比序列级 RL 更具样本效率：它能够以更少的序列生成和渲染器评估次数达到 GRPO 在完整训练时的性能——在三个领域中平均仅使用 GRPO 约 29% 的序列预算——并且相应地减少了实际训练时间。

## 4 相关工作  

### 4.1 基于特权信息的自蒸馏  
Visual-SDPO 将基于策略的自蒸馏和特权信息蒸馏从文本推理或代码反馈扩展到渲染后的视觉反馈。自蒸馏方法训练一个学生和一个教师，它们共享权重但接收不同的输入上下文，然后最小化学生自身序列上两者分布之间的 token 级散度。蒸馏的特权信息视角可追溯到 Lopez-Paz 等人 [18 (https://arxiv.org/html/2606.10334#bib.bib14)]，他们将知识蒸馏与 Vapnik 的特权信息框架统一起来，并由 Agarwal 等人 [1 (https://arxiv.org/html/2606.10334#bib.bib15)] 扩展到基于策略的语言模型蒸馏，他们提出从学生自身的生成结果而非固定数据集学习。近期工作探索了多种形式的特权上下文：数学中的真实答案或参考推理轨迹（OPSD[22 (https://arxiv.org/html/2606.10334#bib.bib16)], HDPO[7 (https://arxiv.org/html/2606.10334#bib.bib17)]）；代码中的环境错误反馈或成功兄弟序列（SDPO[11 (https://arxiv.org/html/2606.10334#bib.bib9)]）；以及基于共识或不确定性对散度信号进行门控 [29 (https://arxiv.org/html/2606.10334#bib.bib19),13 (https://arxiv.org/html/2606.10334#bib.bib20)]。关于基于策略蒸馏的更广泛文献 [28 (https://arxiv.org/html/2606.10334#bib.bib21)] 进一步记录了这一设计空间，而一条互补的反自蒸馏路线 [26 (https://arxiv.org/html/2606.10334#bib.bib18)] 则警告不要对特权信号未标识的位置进行 token 均匀的 KD。我们在两个正交方向扩展了该系列：(i) 特权通道变为**视觉**信号——可以是渲染后的制品本身，也可以是评分规则结构化的视觉摘要；(ii) 我们引入**视觉接地代码信用加权**，从而脱离均匀的 token 加权，该方法将检测到的视觉缺陷映射回产生这些缺陷的具体代码语句。

### 4.2 代码生成的视觉反馈训练  
Visual-SDPO 与用于图表到代码、UI 到代码和幻灯片生成的视觉奖励 RL 方法不同，它将渲染后的反馈同时用作特权教师上下文和 token 级代码信用信号。越来越多的工作利用生成代码的渲染视觉表面作为训练信号。对于图表代码生成，MSRL[3 (https://arxiv.org/html/2606.10334#bib.bib5)] 和 ChartMaster[30 (https://arxiv.org/html/2606.10334#bib.bib4)] 通过图表相似度奖励优化图表到代码生成，而 ChartEditor[4 (https://arxiv.org/html/2606.10334#bib.bib24)] 研究用于鲁棒图表编辑的 RL；RRVF[5 (https://arxiv.org/html/2606.10334#bib.bib6)] 仅从渲染图像中学习；RLRF[25 (https://arxiv.org/html/2606.10334#bib.bib7)] 将渲染感知的 RL 应用于矢量图形。对于网页/UI 生成，UI2CodeN[34 (https://arxiv.org/html/2606.10334#bib.bib8)] 将 UI 到代码视为测试时可扩展的交互式视觉优化，VinciCoder[36 (https://arxiv.org/html/2606.10334#bib.bib22)] 使用由粗到细的视觉 RL，ReLook[17 (https://arxiv.org/html/2606.10334#bib.bib23)] 将 RL 植根于多模态 LLM 批评者，ScreenCoder[12 (https://arxiv.org/html/2606.10334#bib.bib25)] 通过多模态智能体模块化前端生成，DesignCoder[6 (https://arxiv.org/html/2606.10334#bib.bib30)] 增加层次感知的自我修正。对于幻灯片，AeSlides[20 (https://arxiv.org/html/2606.10334#bib.bib3)] 使用渲染幻灯片页面上的可验证美学奖励。数据方面由 WebSight[15 (https://arxiv.org/html/2606.10334#bib.bib26)]、WebCode2M[9 (https://arxiv.org/html/2606.10334#bib.bib27)] 和 Web2Code[35 (https://arxiv.org/html/2606.10334#bib.bib28)] 支持，Pix2Struct[16 (https://arxiv.org/html/2606.10334#bib.bib31)] 和 Pix2Code[2 (https://arxiv.org/html/2606.10334#bib.bib32)] 作为基础先例；推理时系统如 DCGen[31 (https://arxiv.org/html/2606.10334#bib.bib29)]、PPTAgent[38 (https://arxiv.org/html/2606.10334#bib.bib1)] 和 Paper2Poster[21 (https://arxiv.org/html/2606.10334#bib.bib2)] 进一步证明了执行、渲染或评估循环在视觉制品生成中的重要性。

在两个维度上，现有方法可以根据视觉信号是**标量奖励**还是**结构化诊断**，以及批评者是**与策略相同的模型**还是**外部 VLM** 进行分类。在上述训练方法中，许多将渲染后的反馈简化为标量图像级奖励，并使用外部 VLM、学习型评判器或基于嵌入的指标优化 GRPO 或 DPO；即使是暴露评分规则类别的方法，通常也会将它们聚合回每序列的标量。视觉信号最终必须归因于负责的代码。将渲染输出映射回其源代码在 LLM 训练之外有着悠久历史：程序切片 [32 (https://arxiv.org/html/2606.10334#bib.bib38)] 和 Whyline[14 (https://arxiv.org/html/2606.10334#bib.bib33)] 为人工调试提供负责语句；DWARF 调试格式 [8 (https://arxiv.org/html/2606.10334#bib.bib34)] 将程序计数器映射到源代码行；浏览器开发者工具将 DOM 节点链接到 HTML/CSS 源位置；RenderDoc 和 Nsight 着色器调试器 [24 (https://arxiv.org/html/2606.10

--- 

**注意**：用户输入末尾似乎被截断，但翻译任务基于现有内容完成。原文中所有引用的数字编号和超链接均按原样保留。您提供的内容似乎被截断了，但我已经完成了截至所提供文本的翻译。如果您需要我继续翻译后续部分（包括4.2节后半段、5结论、致谢、参考文献等），请补充提供剩余内容。