跳转至

Code2World: A GUI World Model via Renderable Code Generation

会议: NeurIPS 2026
arXiv: 2602.09856
OpenReview: https://openreview.net/forum?id=aG2jCapnlk
代码: https://github.com/Code2World/Code2World
领域: 代码智能
关键词: GUI世界模型, 可渲染代码生成, 强化学习, 视觉反馈修正, 智能体规划

一句话总结

本文提出面向图形用户界面(GUI)的世界模型 Code2World,摒弃传统抽象文本与连续像素扩散合成路线,将下一状态预测显式建模为可渲染的结构化 HTML 代码生成,并通过视觉反馈数据集构建与渲染感知强化学习(RARL)对齐视觉保真度与交互因果,显著提升下游 GUI 智能体的离线与在线长程导航规划能力。

研究背景与动机

近年来,大型多模态模型驱动的自主 GUI 智能体在移动端与网页平台自动化交互中展现出巨大潜力,但在多步导航等复杂长程任务中与人类水平仍存在显著差距。人类用户在真实界面操作时具备强大的前瞻心智模拟能力,能够在执行点击或滑动前预估界面响应并在脑中评估分支后果;相比之下,现有 GUI 智能体绝大多数处于无预测试错的直接执行模式,单步决策失误极易引发不可逆的系统状态变更(如误删关键数据或触发支付确认),面临高昂的纠错成本甚至直接导致任务失败。为了提供安全的试错沙盒并赋予智能体前瞻规划能力,构建能够模拟动作条件状态转移的 GUI 世界模型成为近年来的研究焦点。

然而,现有 GUI 世界模型在状态表征路径上陷入了两难困境。基于自然语言或 DOM 差分的纯文本方法虽然能够抽象表述语义意图,却完全剥离了关键的像素级视觉空间布局与细粒度外观反馈,无法支撑依赖直观视觉信号的多模态智能体闭环推理;而基于扩散模型的纯像素生成方案试图在连续像素空间中捕捉界面元素的离散状态突变,在处理富文本界面时极易产生文字畸变、结构坍塌与失真,难以保证精确的几何可控性。GUI 界面天然由可渲染的程序代码(如 HTML/CSS)构建而成,具有确定性几何约束与高度结构化的符号特性。核心 idea:将 GUI 状态转移模拟重构为结构化可渲染代码生成,以原生 HTML 为表征桥梁兼顾精确几何控制与确定性高保真视觉渲染,并通过视觉反馈迭代修正构建高质量数据集与渲染感知强化学习实现视觉与动作逻辑双重对齐。

方法详解

整体框架

Code2World 将下一状态预测(Next UI Prediction)形式化为两阶段条件生成任务:给定当前界面视觉观察截图 \(I_t\)、用户执行动作 \(a_t\) 以及高层任务目标 \(\mathcal{G}\),首先由多模态代码生成模型 \(\mathcal{M}_\theta\) 生成预测的结构化 HTML 代码 \(\hat{C}_{t+1}\),随后利用确定性浏览器渲染引擎 \(\mathcal{R}\) 将代码解析渲染为未来视觉观察截图 \(\hat{I}_{t+1}=\mathcal{R}(\hat{C}_{t+1})\)。整个系统的核心由三大模块协同支撑:首先构建覆盖 80K 样本的高保真双模态语料 AndroidCode,随后在基座视觉语言模型上执行代码级监督微调(SFT)奠定语法与布局先验,最后借助渲染感知强化学习(RARL)利用渲染结果作为反馈信号全面优化视觉与因果一致性。在下游应用时,模型以即插即用模拟器的形式嵌入“提议-模拟-选择”(Propose, Simulate, Select)决策管线,为智能体多动作分支提供视觉前瞻。

%%{init: {'flowchart': {'rankSpacing': 24, 'nodeSpacing': 28, 'padding': 6, 'wrappingWidth': 400}}}%%
flowchart TD
    A["输入上下文<br/>(当前截图 It, 动作 at, 目标 G)"] --> B["高保真代码语料构建<br/>受约束合成 + 视觉反馈迭代修正"]
    B --> C["代码级监督微调 (SFT)<br/>建立 HTML 语法与布局冷启动策略"]
    C --> D["渲染感知强化学习 (RARL)<br/>双重渲染奖励 + GRPO 策略优化"]
    D --> E["即插即用智能体前瞻应用<br/>Propose → Simulate → Select 决策闭环"]

关键设计

1. 高保真代码语料构建:约束合成与视觉反馈修正闭环

直接利用商业多模态模型从截图反编译 HTML 面临不可控幻觉与渲染崩溃的严峻挑战。为构建大规模高质量轨迹代码语料 AndroidCode,本文基于 AndroidControl 真实交互轨迹设计了两阶段自动化合成管线。在受约束初始合成阶段,模型强制在固定像素尺寸的标准化根容器内组织 DOM 坐标系,严禁引入不可信外部网络静态资源,而是采用语义占位符策略(如将未加载图片抽象为 [IMG: 描述] 文本块,矢量图标转换为内联 SVG 代码),保证生成的 HTML 具备确定性、自包含且免依赖。随后引入带视觉反馈的迭代修正机制:对生成的 HTML 实时渲染截图,计算其与真实未来界面的 SigLIP 视觉余弦相似度分数。若对齐分数未达到阈值 \(\tau=0.9\),则将真实截图、渲染截图与当前代码拼接返回多模态编码器,触发视觉比对修正。该机制通过真实画面差异强力驱动代码修复,最终在过滤低质样本后沉淀出超过 80K 条高质量屏幕-动作-代码三元组。

2. 渲染感知强化学习:双重渲染结果奖励引导策略优化

单纯经过代码级 SFT 训练的模型仅将 HTML 当作离散文本词表进行最大似然拟合,策略本质上处于对最终浏览器视觉渲染结果“盲目”的状态,易产生布局重叠、CSS 坍塌或动作逻辑违背。为此,本文设计了渲染感知强化学习(Render-Aware Reinforcement Learning, RARL)策略,直接从浏览器渲染产物抽取标量奖励指导策略优化。为了避免传统单一像素相似度在抽象占位符面前的误判,本文基于统一的 VLM-as-a-Judge 判别器构建了双重解耦奖励机制: - 视觉语义保真奖励(\(R_{\text{sem}}\)):利用多模态评判模型评估渲染生成图 \(\hat{I}_{t+1}\) 与真实目标图 \(I^*_{t+1}\) 之间的全局语义对齐度,专注整体结构层次、组件相对排布与包含关系,容忍语义占位符带来的局部渲染风格差异,防止过拟合表层像素噪声: $\(R_{\text{sem}} = \text{VLM}_{\text{judge}}(\hat{I}_{t+1}, I^*_{t+1})\)$ - 动作因果一致性奖励(\(R_{\text{act}}\)):状态转移必须符合用户动作的因果逻辑,将交互三元组 \((I_t, a_t, \hat{I}_{t+1})\) 注入判别模型,验证生成状态的变化是否严格归因于动作 \(a_t\) 的执行,严厉惩罚发生幻觉或动作执行前后状态无变化的逻辑脱节: $\(R_{\text{act}} = \text{VLM}_{\text{judge}}(I_t, a_t, \hat{I}_{t+1})\)$

综合总奖励采用加权平衡 \(R_{\text{total}} = \lambda_1 R_{\text{sem}} + \lambda_2 R_{\text{act}}\)。优化算法采用组相对策略优化(GRPO),针对每个输入采样 \(G=4\) 个候选代码分支,计算组内优势函数并在截断替代目标下更新参数,外加 KL 散度约束防止策略偏离基准 SFT 分布,有效实现了符号代码生成与真实视觉物理规律的对齐。

3. 即插即用智能体前瞻规划:“提议-模拟-选择”协同闭环

训练完成的 Code2World 模型作为独立的世界模型沙盒,可无缝增强任意下游 GUI 导航智能体。在测试时推断阶段,系统构建三步闭环机制:首先由基础智能体依据当前界面状态生成 \(K\) 个包含推理链与坐标的候选动作提议 \(\mathcal{P}_t = \{(r_t^{(k)}, a_t^{(k)}, c_t^{(k)})\}_{k=1}^K\);接着 Code2World 针对每个动作并行合成 HTML 代码并即时渲染出对应的未来界面预测 \(\hat{I}_{t+1}^{(k)}\);最后引入多模态验证器 \(\mathcal{S}\),综合评估任务全局目标 \(\mathcal{G}\) 与每个分支的未来视觉预测状态,打分筛选出最能推进任务进度、避免死循环与无效分支的最优动作: $\(a_t^\star = \arg\max_{a_t^{(i)} \in \mathcal{A}_t} \mathcal{S}(I_t, \mathcal{G}, a_t^{(i)}, \hat{I}_{t+1}^{(i)})\)$ 该机制有效纠正了智能体单步视野的盲目性,在诸如重复保存导致死循环或滑动遗漏关键入口等场景中实现了直观的前瞻校验。

一个完整示例

以 AndroidWorld 中的备忘录保存任务为例: 1. 当前状态与候选提议:智能体当前停留在备忘录编辑页面,由于在前一步已经执行过保存,页面右上角的保存图标其实已处于禁用灰显状态。但基础智能体缺乏视觉精细感知,生成了候选动作 1(再次点击保存图标)与候选动作 2(点击返回导航按钮)。 2. 代码生成与即时渲染:Code2World 分别对两个候选动作进行模拟。针对候选动作 1,模型预测生成的 HTML 经渲染后显示界面毫无变化,保持原状;针对候选动作 2,模型预测生成的 HTML 渲染出应用退出至备忘录总列表界面的全新视图。 3. 前瞻验证与决策修正:验证器比对两组模拟未来帧与任务目标“创建并退出备忘录”,检测到动作 1 的模拟结果属于无效的无反馈重复操作,从而果断剪枝淘汰动作 1,促使系统采纳动作 2,避免了智能体陷入陷入死循环崩溃。

损失函数 / 训练策略

在 Stage 1 监督微调中,基于 Qwen3-VL-8B-Instruct 架构,冻结视觉编码器与多模态投影层,全参数微调语言模型解码器,在 8 张 NVIDIA H20 GPU 上使用 DeepSpeed ZeRO-2 与 Flash Attention 训练 2 个 epoch,序列截断长度设为 24,576 tokens 以容纳高分辨率截图编码与冗长 HTML 结构。在 Stage 2 强化学习中,采用 GRPO 算法,组大小 \(G=4\),采样温度 1.0,学习率 \(1\times 10^{-6}\),KL 散度惩罚系数 \(\beta=0.01\),双重奖励权重均设为 0.5。

实验关键数据

主实验

评估涵盖两项核心评测:其一是针对世界模型本身的基础 UI 预测能力,在域内基准 Android Control 与跨应用域外(OOD)基准 GUI Odyssey 上对比图像生成与代码生成模型,采用动作遵循度 \(S_{\text{ad}}\)、动作可辨识度 \(S_{\text{id}}\)、元素对齐度 \(S_{\text{ele}}\)、布局完整性 \(S_{\text{lay}}\) 及 SigLIP、DINO 指标;其二是下游 AndroidControl-High 离线单步决策与 AndroidWorld 在线长程导航成功率评测。

模型类别 代表模型 Android Control (ID) \(S_{\text{ad}}\) Android Control \(S_{\text{lay}}\) GUI Odyssey (OOD) \(S_{\text{ad}}\) GUI Odyssey \(S_{\text{lay}}\)
图像生成模型 Gemini-3-Pro-Image 92.63 63.67 88.50 42.30
图像生成模型 Doubao-Seedream-4.5 85.36 55.82 89.30 40.75
代码生成模型 GPT-5 (Zero-shot) 94.02 69.78 93.45 60.33
代码生成模型 Qwen2.5-VL-72B 73.34 48.26 56.12 20.73
代码生成模型 Qwen3-VL-8B (Base) 59.20 42.70 34.60 14.00
本文方法 Code2World-8B 94.28 70.32 92.73 49.78

在下游 AndroidControl-High 离线导航评测中,Code2World 为各类智能体带来系统性提升:

基础智能体 增强配置 动作类别准确率 (Type) 定位准确率 (Grounding) 整体成功率 (SR)
Qwen2.5-VL-7B Standalone 76.66% 69.64% 65.16%
Qwen2.5-VL-7B + Code2World 78.74% (+2.08) 74.87% (+5.23) 66.47% (+1.31)
Mobile-Agent-v3-7B Standalone 82.05% 75.16% 67.20%
Mobile-Agent-v3-7B + Code2World 84.13% (+2.09) 78.78% (+3.62) 68.41% (+1.21)

在真实模拟器在线长程交互基准 AndroidWorld 上,Code2World 赋予智能体前瞻规划能力,将 Gemini-2.5-Flash 的长程任务成功率从基线的 41.4% 显著提升至 50.9%(绝对增益达 +9.5%)。

消融实验

在 Android Control 基准上对各个训练阶段及奖励组件进行逐步消融分析:

训练配置 动作遵循 \(S_{\text{ad}}\) 动作辨识 \(S_{\text{id}}\) 元素对齐 \(S_{\text{ele}}\) 布局完整 \(S_{\text{lay}}\) SigLIP 相似度
Qwen3-VL-8B (Base) 59.20 65.80 43.10 42.70 63.88
+ SFT 阶段 (Cold Start) 78.45 79.12 58.65 56.30 71.50
+ SFT + 仅视觉语义奖励 (\(R_{\text{sem}}\)) 78.90 78.85 65.40 61.20 76.10
+ SFT + 仅动作因果奖励 (\(R_{\text{act}}\)) 88.20 84.53 60.10 57.80 74.80
Code2World 完整模型 (SFT + RARL) 94.28 88.64 71.35 70.32 79.44

关键发现

  • 双重奖励相辅相成:单独使用视觉语义奖励 \(R_{\text{sem}}\) 会使模型诱发奖励破解,过分迁就局部像素排布而使逻辑动作遵循度停滞不前;单独使用动作因果奖励 \(R_{\text{act}}\) 则大幅增强转移因果逻辑,但在界面几何对齐与排版保真度上提升有限。两者结合才能兼顾视觉质量与因果连贯性。
  • 参数效率优异:仅凭 8B 参数规模的 Code2World 在布局完整性与动作遵循度上全面超越参数量超过其 10 倍的开源巨兽模型(如 Qwen2.5-VL-72B、InternVL3-78B),并比肩顶级闭源商业模型 GPT-5。
  • 跨域泛化能力出众:在未曾见过的 GUI Odyssey 跨设备多应用测试中,\(S_{\text{ad}}\) 仍维持在 92.73 的高位,表明模型内化了通用 GUI 交互动态规律而非单纯过拟合训练界面的像素模式。

亮点与洞察

  • 表征范式突破:打破传统“文本 vs 连续扩散像素”的非此即彼二元划分,创新性地将确定性代码渲染引擎纳入生成回路,以结构化 HTML 兼顾离散几何控制与高保真视觉渲染。
  • 渲染感知强化闭环:不仅在数据构造端利用多模态视觉反馈迭代纠错代码,在模型训练端亦将浏览器动态渲染结果转化为强化学习奖励信号,真正打通了符号文本生成与视觉世界规律的对齐通道。
  • 时间演化涌现特性:定性结果显示模型甚至学会了根据交互动作细微推移状态栏时间显示(如 5:46 演化至 5:47),展现了对隐式数字世界物理钟表的深刻建模能力。

局限与展望

  • 复杂动画与动态渲染瓶颈:当前 HTML 模拟侧重静态页面跳转与瞬时排版响应,对于复杂的长程过渡动画、视频播放流或高度依赖 Canvas/WebGL 的图形界面支持有限。
  • 前瞻推断延迟增加:在下游智能体闭环推理中引入并行候选动作渲染与多模态检验评估,使单步决策的计算开销与推理时延成倍增加,未来亟需探索代码投机采样或紧凑表征加速。
  • 跨系统架构扩展:目前高质量训练集主要聚焦移动端 Android 生态,未来可进一步拓展至桌面端复杂多窗口(Windows/macOS)以及专业软件操作环境。

相关工作与启发

  • vs Web/Mobile World Models (Chae et al., 2024; Gu et al., 2024):以往基于语言模型的世界模型仅预测抽象自然语言差分或纯 DOM 变化,缺乏直观视觉反馈;Code2World 通过代码渲染提供了真实视觉观察,使视觉智能体得以无缝验证动作。
  • vs 扩散基 GUI 世界模型 (ViMo, Luo et al., 2025a; Wei et al., 2023):扩散模型在连续高维像素空间内难以稳定生成精确文字和清晰控件边界;Code2World 依靠 HTML 语法天然保持了文本清晰度与元素排版的确定性结构。

评分

  • 新颖性: ⭐⭐⭐⭐⭐ 首次提出基于可渲染代码生成的 GUI 世界模型范式,思路极具启发性。
  • 实验充分度: ⭐⭐⭐⭐⭐ 涵盖离线模拟质量、OOD 跨应用泛化、离线导航决策与在线 live 模拟器评测,消融深入。
  • 写作质量: ⭐⭐⭐⭐⭐ 概念清晰,图表完备,方法与强化学习目标形式化叙述严密。
  • 价值: ⭐⭐⭐⭐⭐ 为自主 GUI 智能体的安全试错与长程前瞻规划提供了极具实用价值的虚拟沙盒基础设施。