Paper Survey · 视觉反馈 + 强化学习
完整调研页（含搜索）：paper-survey.html →围绕 “生成 → 渲染 → 视觉反馈 → 优化” 闭环范式的 7 篇核心论文。单纯的 “生成—截图—点评—修改” 已不够新颖；前沿工作沿迭代视觉优化 + RL、多视口 browser trace、视觉缺陷归因到代码语句、浏览器 Agent-as-a-Judge、纯图像学习的验证非对称性等方向推进。
分类 Taxonomy
RL + 视觉反馈
浏览器交互式评估
缺陷归因 / Credit
Benchmark / 评测
时间线
核心论文详解
闭环框架：Reasoning（推理生成代码）→ Rendering（渲染为图像）→ Visual Feedback（与源图像比较得到奖励），用 GRPO 端到端优化，支持多轮自我修正。最终模型甚至超越用于生成训练期视觉反馈的更强 MLLM。
方法详情 & 对比
方法框架
- Reasoning：MLLM 深度视觉推理生成结构化代码（matplotlib / HTML）
- Rendering：代码渲染为可视化输出
- Visual Feedback：渲染输出 vs 源图像计算视觉相似度作奖励
- RL：GRPO；支持多轮 self-correction
关键特点
- 完全摆脱 image-text paired supervision
- 奖励仅来自视觉比较，无需人工标注
- “学生超越老师”
与其他工作
- vs UI2Code^N：RRVF 无需任何文本监督
- vs Visual-SDPO：RRVF 用全局视觉奖励，后者做细粒度代码归因
- vs MSRL：都用 GRPO，但 RRVF 针对 chart+web 通用场景
将 UI-to-code 从单次生成重新定义为闭环迭代优化：生成 → 渲染 → 视觉检查 → 基于反馈修改。三阶段训练（持续预训练、SFT、RVPO）；9B 开源模型在 drafting / polishing / editing 上超越更大模型。
方法详情
RVPO
- 对同一输入生成多个候选并渲染
- 对视觉输出做相对排序而非绝对评分
- 用相对偏好信号做 preference-based RL
绝对评分 vs 相对排序
- 噪声敏感性：绝对高 / 相对低
- 标定：绝对需校准尺度 / 相对只需判断好坏顺序
Browser experience 框架：(1) 多视口多交互状态执行并录制轨迹；(2) state-guided repair engine 诊断 → 选择修复策略 → 验证；(3) 通过质检的页面导出为 SFT 数据。从 97K prompt corpus 产出 40K refined SFT 数据集。
方法详情 & 结果
Browser Evaluation
- 跨 desktop / tablet / mobile 执行
- 记录 scroll / hover / click / resize / gameplay 状态
- 给 VLM curated keyframes 而非孤立截图
结果
- HTMLBench-400：HTMLCure-27B-Refined 50.6，deterministic test pass 45.2%
- MiniAppBench：平均 81.2，比原始 27B SFT 提升 15.3 分
Self-distillation policy optimization：权重共享的 teacher 接收渲染后视觉反馈作 privileged context，蒸馏给 coding student。基于 Qwen3-VL-8B，在 ChartMimic、Design2Code、AeSlides 上均超 zero-shot base 10+ 分，over GRPO +2.4 分且推理无额外开销。
方法详情
归因流程
- Visual defect → 受影响 DOM element → 责任代码语句 → 放大训练信号
互补目标
- Sequence-level GRPO 奖励可执行、高质量 rollouts
- 失败样本也可学：execution errors 作 privileged context
覆盖 Web 工程全生命周期（generation / editing / repair）的多模态评测基准，输入支持 text / image / video。关键发现：aesthetics 是最持久瓶颈（尤其开源模型），Vue 持续具有挑战性。
方法详情 & 发现
评测设计
- 3 输入模态 × 3 任务类型 = 7 种组合；难度 Easy/Medium/Hard
- 覆盖 15 生成域、16 编辑操作、11 修复缺陷类型
关键发现
- 闭源模型仍更强；Aesthetics 是最持久瓶颈；Vue 持续具挑战
系统揭示 Chart-to-code 中 SFT 的性能天花板并用多模态结构化 RL 突破。3M chart-code pairs（来自 arXiv 真实数据），多粒度奖励，课程式训练。ChartMimic +6.2%，ReachQA +9.9%，超越所有现有方法。
方法详情
课程训练
- Stage 1：仅 textual rewards（建立代码正确性）
- Stage 2：引入 visual rewards（提升视觉保真度），避免早期噪声干扰
将 SVG 生成建模为 VLM 代码生成任务，通过渲染反馈的 RL 优化。由于 autoregressive SVG 的可微渲染器尚不可用，RLRF 用 evaluative feedback 而非梯度，显著优于 SFT，生成更精确、高效、语义连贯的 SVG。
研究空白 & 对本项目的启示
尚未被覆盖的研究空白 / 潜在机会
- 交互性 + RL：HTMLCure 的 browser trace 仅用于 SFT 数据生成，尚未将交互状态反馈直接嵌入 RL 训练循环
- 细粒度归因 + 浏览器交互：Visual-SDPO 的归因在静态渲染上，未考虑交互状态下的缺陷归因
- Agent 自动测试 → reward：WebCompass 的 Agent-as-Judge 可作更丰富的 reward signal，目前仅用于评测
- 跨模态一致性：多数工作关注视觉保真度，较少关注代码质量（可维护性、语义性、accessibility）
- responsive 设计：仅 HTMLCure 考虑多视口，其他工作基本在单一分辨率评估
对本项目的启示
1. 超越静态截图：至少需考虑多视口或交互状态，单一截图评估不够全面——对应 verifier 的 evidence-aware 与 state-consistency 场景族。
2. 归因机制有价值：Visual-SDPO 证明缺陷 → 代码归因能加速训练，与 actionable / localizable feedback 原则高度契合。
3. Agent 循环可整合更多信号：WebCompass 的 Agent 探索 + HTMLCure 的 browser trace + Visual-SDPO 的归因，共同指向更完整的验证闭环。
4. 验证 ≠ 生成：这些工作多为生成 / 训练框架；本文的差异化在于把 verification 抬升为通用 loop-level 能力，强调 false-accept 风险与可审计 oracle。