RILA：浏览器渲染进闭环，9B小模型交互开发反超GPT-5.5
Rendering-in-the-Loop: An Execution-Driven Agent for Interactive Web Development
前端网页开发正在经历一场由多模态大模型推动的范式迁移。从简单的草图转 HTML，到直接上传设计截图乃至完整的人机交互视频，大模型生成复杂网页前端代码的门槛已经被大幅拉低。然而，任何真正调试过大模型前端代码的工程师都会遭遇一种强烈的割裂感：很多页面在静态截图中看起来光鲜亮丽、排版整饬，但一旦在浏览器里点击某个按钮、展开二级菜单或输入表单，整个交互逻辑就会瞬间崩塌——事件绑定丢失、状态机跳转错乱、DOM 节点重叠遮挡或异步资源加载失败。
ArXiv URL：https://arxiv.org/abs/2609.02088
出现这一顽疾的根源，在于现有技术路线在开发闭环上的认知错位。此前的多模态网页生成模型，大都把优化目标押注在“静态渲染保真度”（Visual Fidelity）上，依托无交互的静态截图比对进行端到端生成；而传统的软件工程 Agent（SWE Agent）虽然具备编译器与单元测试的闭环检查能力，却根本无法感知浏览器运行时的图形渲染与视觉呈现。交互缺陷无法被纯文本日志捕获，视觉缺陷又无法靠单纯的静态代码检测修复。这导致“视觉好看”与“功能可用”长期处于孤立优化的脱节状态。
由百度与华中科技大学联合团队提出的 RILA（Rendering-In-the-Loop Agent），正是为了斩断这一死结。RILA 首次将真实的浏览器端到端渲染与运行交互深度引入大模型开发回路，构建了“动作交互验证–多模态诊断–增量工具修复”的动态闭环机制。配合严格依赖执行验证的高质量数据合成管线，该方案带来了一个极具冲击力的实验结果：在交互式网页重建基准 IWR-Bench 上，仅有 90 亿参数的紧凑型开源模型 Qwen3.5-9B 在经过 RILA 驱动与微调后，评分从 40.40% 跃升至 57.52%，全面超越了参数规模高达 1 万亿的 Kimi-K2.6（55.61%）与闭源顶流商业模型 GPT-5.5（55.74%）的单次生成表现。
为什么网页开发必须把“浏览器渲染”拉进循环？
要理解 RILA 的设计初衷，首先要重新审视现代交互式 Web 应用的脆弱性。前端页面的复杂性从来不仅由 HTML 标记和 CSS 排版决定，其灵魂在于 JavaScript 驱动的动态行为。一个典型的操作轨迹往往是一连串有因果关联的动作序列：用户点击展开侧边栏，触发异步请求，随后在动态渲染出的列表项中完成选中与提交。
现有大模型在处理这类多模态代码合成任务时，主要存在两种极端路线：
第一种是多模态单次生成（One-shot Generation）及静态修正方案。这类方法将设计图或视频关键帧投喂给视觉大模型，要求其直接输出完整的工程代码，部分工作会引入专门的前端审查模块，依据静态截图与设计规范比对间距、字体和颜色。然而，静态截图是完全“静止”的，模型根本看不到按钮按下后是否触发了预期的动画或弹窗，更无法捕获由于作用域污染或未处理异常导致的静默崩溃。
第二种是以 SWE-agent、Agentless 为代表的代码修复智能体。这类系统通常依托终端命令、测试用例和异常调用栈（Stack Trace）运作。但在前端开发中，大量灾难性的视觉破损并不会在控制台抛出任何语法错误或警告——例如，某个 z-index 层叠上下文设置错误导致浮动层被遮挡，或者弹性盒子（Flexbox）在动态数据注入后发生挤压形变，代码在逻辑上是“顺利执行”的，页面在物理呈现上却早已报废。
RILA 的核心破局点，在于把网页的生命周期还原到真实的无头浏览器（Headless Browser）环境中，不再盲信纯文本的静态分析，而是以“运行时交互反馈”作为代码迭代的最高准则。
核心机制：AIV、ERS 与增量代码编辑协同
如图所示，RILA 的工作流程不是简单地写提示词让大模型“重新生成一遍”，而是由一套严密的执行驱动控制回路组成。整体闭环主要由动作交互验证、执行感知评分、结构化多模态诊断以及软件工程工具链四大模块咬合推进。
首先是 动作交互验证（Action Interaction Verification，AIV）模块。为了在绝对公平且贴近真实用户的场景下检验代码，AIV 模块利用 Playwright 框架接管真实的浏览器实例。当代码模型生成一组候选代码后，AIV 会将其实时部署并加载，首先解析当前 DOM 树与页面交互元素，将参考动作序列中的高层意图对齐到当前页面的具体元素上。
随后，AIV 模块开始逐一回放参考交互轨迹 $A = {a_1, a_2, \dots, a_N}$。这里的每个动作 $a_i$ 都对应着真实的物理操作，如精准点击、字符输入或页面滚动。尤为关键的是其执行阻断策略：在回放过程中，Playwright 会在每一个动作执行成功后捕获即时的渲染快照和事件日志；一旦前置的某一动作（例如打开折叠栏）失败，后续动作将被立即终止并跳过。这种设计严谨地模拟了人类用户的真实体验——当第一步交互断裂时，后续所有依赖该状态的深层交互在客观上都是不可触达的。生成的观察结果 $O_t$ 完整记录了整个交互链条的存活深度与逐帧视觉变化。需要特别指出的是，参考轨迹 $A$ 仅作为后验回放的测试脚本，在生成阶段对代码模型完全隐蔽，模型必须仅凭视觉输入自行推断合理的交互架构。
第二项关键创新是 执行感知渲染评分（Execution-Aware Rendering Score，ERS）。在代码迭代过程中，大模型的修改极易引入“修好了一个 Bug，却破坏了三个原有特性”的退化现象。为了保证优化曲线的单调稳定，必须拥有可靠的量化门标。ERS 通过结合交互正确性得分 $S_{\mathrm{int}}$ 与视觉多维保真度得分 $S_{\mathrm{vis}}$，为代码质量建立标尺：
\[\mathrm{ERS}(C_t) = \frac{1}{\lvert \mathcal{T} \rvert}\sum_{S\in\mathcal{T}}S,\quad\mathcal{T}=\{S_{\mathrm{int}},\,S_{\mathrm{vis}}\}\]其中，视觉保真度 $S_{\mathrm{vis}}$ 并未停留在单一的像素对比，而是综合了结构相似性、文本识别匹配度以及全局语义特征的多维度均值：
\[S_{\mathrm{vis}} = \frac{1}{\lvert \mathcal{M} \rvert}\sum_{S\in\mathcal{M}}S,\quad\mathcal{M}=\{S_{\mathrm{SSIM}},\,S_{\mathrm{OCR}},\,S_{\mathrm{SEM}}\}\]在每一轮迭代中，RILA 都会计算当前代码候选 $C_t$ 的 ERS。系统并不盲目采用最新一轮的修改结果，而是始终在内存中锚定历史最高分的实现 $C^*$。只有当新的修改在真实交互与视觉度量上确实超越前代时，系统才会更新基线，从而在数学上锁定了优化的下界，杜绝因多轮交互产生的性能漂移。
随后，多模态批判模型介入。批判模型同时接收当前最优实现的运行时动态快照 $O^*$ 以及任务原始参考示范 $R$。它所执行的诊断不仅涵盖功能层面的事件响应是否准确，更穿透到布局网格、间距对齐、响应式排版乃至无障碍设计规范。批判模型不会直接吐出整段新代码，而是将其抽象为具备高度指导性的结构化修复建议 $\Delta_t$：指明定位的具体缺陷、列举浏览器给出的运行时铁证、并下发局部的重构指南。
最后，系统调用软件工程（SWE）工具模块实施 增量式代码编辑。很多早期研究往往在发现错误后要求模型将整份 HTML、CSS、JS 代码从头到尾重写一遍，这种暴力重写不仅消耗极其庞大的 Token 预算，更致命的是极不稳定，经常导致之前已经完美呈现的样式被意外洗掉。RILA 引入代码检索、文件局部补丁工具，让大模型只针对报错的选择器、未生效的函数回调或样式规则进行外科手术式的局部微调，随后再次将新补丁提交给 AIV 进行下一轮浏览器实测，构建起稳定收敛的 $K$ 轮循环。
高质量合成数据：以真实执行作为质量筛选闸口
除在推理阶段部署动态闭环外，团队意识到，基座模型之所以在交互前端开发上频频失误，另一大主因是市面上绝大多数前端代码训练集都是静态的，缺失了深度的行为语义。为此，RILA 构建了一套完全由真实执行检验驱动的交互数据合成管线。
该管线的运作逻辑严谨遵循从分类拓扑到端到端验证的闭环：
-
结构化拓扑解耦与兼容性矩阵过滤：团队从现存的大型 Web 交互数据集中提炼出一套完备的分类体系，覆盖 32 个行业内容领域、110 种精细交互能力以及 308 类视觉设计风格。为了防止采样出逻辑混乱或美学冲突的组合（例如将冷峻严肃的银行风控控制台与极度卡通夸张的潮玩动效强行拼凑），管线引入大模型预先构建的兼容性矩阵，从源头上剔除荒谬的提示词种子。
-
多模态资产本地化与自包含打包：采样出的合法种子被展开为结构化的网页生成需求配方，由代码大模型具体实现交互逻辑。为了彻底规避前端代码常见的“图裂”与外链失效问题，管线建立了类型化图像占位符匹配机制，调用本地开源设计资产库精准注水，并统一转换为相对路径，确保每个合成网页都能在零外部网络依赖的离线沙箱中进行确定性渲染。
-
残酷的交互全通测试筛选：所有合成出来的完整工程，必须无条件放入无头浏览器中进行全量交互回放验证。只有当网页内定义的全部预设交互动作均能平稳执行、且无任何静默崩溃的样本，才能被收录至最终训练集。在实际运行中，这一道冷酷的“执行门禁”直接淘汰了约三分之一的初筛种子，虽然牺牲了合成产量，却清洗掉了所有“看着能跑、一碰就碎”的劣质代码垃圾。
基于该管线，团队在 16 块 H800 GPU 上对 Qwen3.5-9B 的语言核心基座进行了全参数微调。为了完整承载复杂的前端单体工程，序列上下文长度拉伸至 65,536 个 Token，为后续的推理迭代注入了深厚的交互编码先验。
实验检验：小模型能否依靠闭环击穿尺度定律？
评估代码生成系统在真实工业场景下的表现，需要足够严苛且贴合实际的测试基准。研究团队采用了近期提出的交互式网页重建基准 IWR-Bench。与此前单纯评估静态 HTML 视觉重构的基准不同，IWR-Bench 包含了来自 100 个真实商业网站的 113 个极具挑战性的交互任务，每个任务不仅提供设计指令和视觉截图，更配备了动态的人机交互录屏与全套素材资产，模型必须还原出具有高度动态一致性、逻辑完全闭环的单页应用。
实验对比揭示了两个极具说服力的核心结论：
第一，无论基座模型的体量与原始能力如何，RILA 的执行闭环机制均能带来普遍的、不可逆的大幅跃升。在未经过任何领域微调的原生 Qwen3.5-9B 上，仅依靠 RILA 引入的浏览器运行时反馈进行推理期自我修正，模型的最终得分便从 40.40% 快速跃升至 50.34%，净增 9.94 个百分点，且其在功能交互维度与视觉一致性维度的表现呈现双双同步上扬的稳健态势。
第二，高质量的领域代码微调与强大的推理期执行回路存在高度的互补效应，足以跨越极其巨大的模型参数代差。当加载了经过执行验证数据微调的 Qwen3.5-9B† 时，结合 Kimi-K2.6 充当其多模态批判模型，这个仅有 90 亿参数的轻量级模型最终跑出了 57.52% 的高分。这个成绩不仅远超其自身单次生成的原始水准，更将目前参数量处于第一梯队的工业级重器甩在身后：拥有万亿级参数的 Kimi-K2.6 在直接单次生成时的基准得分为 55.61%，而未开源的前沿商业大模型 GPT-5.5 在单次生成下的得分也仅为 55.74%。
当然，当 RILA 的闭环体系反哺给最顶级的庞大基座时，其天花板同样被进一步推高。在以 Kimi-K2.6 作为批判模型的前提下，GPT-5.5 经由 RILA 驱动的迭代修复，综合得分从 55.74% 拔高至 63.00%；而 Kimi-K2.6 在为自己的代码循环提供运行时审查时，更是打出了全场最高的 65.85%。这表明即便是最顶尖的代码模型，在面对没有执行反馈的前端单次生成时，依然存在海量的盲区与视觉幻觉，执行感知所捕获的信息增量对任何量级的模型都具有不可替代的纠偏价值。
在随后的消融分析中，团队剥离了系统的各个组件。结果清晰地表明：如果移除了基于历史最优得分（Best-so-far）的拦截机制，模型由于退化修改导致的性能回落会直接抵消后期的迭代收益；而如果将真实的 Playwright 动作回放退化为普通静态截图对比，模型在交互维度的得分暴跌最为剧烈；一旦剥离软件工程局部补丁工具、强行退回全量重写模式，长序列生成的不稳定性会呈指数级攀升。
此外，为了验证该机制是否仅仅在单项基准上过拟合，团队进一步在另一个独立的交互式代码生成基准 Interaction2Code 上进行了泛化检验。在全部 375 个跨域测试任务中，RILA 不仅大幅提高了页面的真实交互实现率（Interaction Implementation Rate），在两组对比方案均能成功触发交互的严苛成对子集中，各项多模态相似度指标同样呈现全局性的领先优势。
总结与技术启示
RILA 的成功给当下火热的大模型软件工程与 Agent 开发带来了极具深度的启示：
长久以来，业界在应对复杂生成任务时往往陷入了对“参数规模”与“预训练算力”的路径依赖，试图凭借更大体量的模型在单次前向传播中把所有细节“脑补”正确。然而，软件工程本质上是经验主义和实证主义的产物，任何资深工程师都无法做到提笔写完千行代码而不经单测、不刷页面、一次点亮。动态交互的前端开发更是如此，脱离了浏览器的真实宿主环境，静态视觉与纯文本分析都只是盲人摸象。
RILA 用严密的架构证明：将真实的执行环境（Browser Runtime）深度内嵌到模型的推理与优化核心，不仅能够补齐纯文本与静态多模态模型对动态因果律的感知缺失，更能依托“小参数代码执行者 + 强批判模型审查 + 增量微创手术”的协作架构，彻底释放较小模型的推理潜力。在未来的 Agentic AI 演进路径上，如何构筑更具保真度的沙箱、如何将物理世界或数字终端的真实执行流转化为结构化的奖励与反馈信号，或许比单纯追求下一个万亿级参数基座拥有更直接、更具生产力价值的工业前景。