想象一下,你正在教一个机器人成为一名网页设计大师。过去,我们测试这些机器人时,会给它们一张空白画布和一张网站图片,要求它们一次性从头开始构建整个页面。这就像是要求一位厨师瞬间做出一整套五道菜的满汉全席。但在现实世界中,网页设计很少是那样大刀阔斧的。通常情况下,开发者是打开一个现有的网站,发现一个坏掉的按钮、修复一个奇怪的字体,或者添加一张缺失的照片,同时还要确保自己不会意外地删除了页面的其余部分。这更像是一场反复进行的“找不同”和“修复故障”的游戏。这就是“迭代编码”的世界,在这个世界里,机器人必须记住它五分钟前做了什么,并且在修复新问题时不会把事情搞砸。研究人员提出的重大问题是:我们最聪明的 AI 机器人能否应对这种凌乱的、循序渐进的现实情况,还是说它们只在面对一张白纸时表现出色?
这正是论文《MT-Web2Code》所研究的内容。作者创建了一个全新的、极具挑战性的测试——MT-Web2Code,旨在观察 AI 编程智能体在处理这种“边修边改”式工作时的真实水平。他们没有要求 AI 构建整个页面,而是给了它 16 个不同类别(如购物、新闻和政府网站)中的 102 个不同网页,并要求它在多个回合内执行两种特定类型的任务。第一种任务是“局部重建”,就像是告诉机器人:“嘿,页面的这一整个部分缺失了;这是它原本应该有的样子,请只重建这个部分,不要触动其他部分。”第二种是“局部修改”,这甚至更加棘手:“这里有三个看起来不对劲的小地方(也许是按钮颜色错了,或者是线条太粗了);请只修复那几个微小的点。”
为了使这项测试公平且无法规避,研究人员发明了一个巧妙的“逆向破坏”(Reverse-Corruption)引擎。想象一下,他们拿到了一个完美的、金色的网站,然后故意以特定的方式破坏它——隐藏一整个区块或弄乱一些字体。接着,他们记录下了自己是如何破坏它的。AI 的任务是逆转这个过程:观察损坏的页面,找出问题所在,并将其修复回完美状态。因为研究人员完全了解页面是如何被破坏的,所以他们可以极其精确地衡量 AI 的成功程度。他们发现,虽然这些 AI 机器人正在变得越来越好,但在应对这种多回合游戏时仍然感到非常吃力。
结果带来了一次现实的警示。当 AI 尝试重建缺失的区域时,它往往能在新部分做得还不错,但却会意外地弄乱周围的内容,比如原本只想修复菜单,却改变了整个页面的背景颜色。当被要求进行微小、精确的编辑时,机器人经常无法使代码与视觉修复完美对齐,这表明它们缺乏细粒度的控制能力。或许最令人担忧的是,论文发现了“错误雪球效应”。如果 AI 在第一个回合犯了一个小错,这个错误会在接下来的回合中被携带并放大,使得最终结果比每次都从头开始时要糟糕得多。有趣的是,研究人员还发现,给 AI 一段关于损坏部分的文字描述并不总是有帮助;有时,它反而会让机器人感到困惑,使其过度依赖文字而忽略了实际的图片。
简而言之,这篇论文表明,虽然 AI 擅长从零开始构建网站,但它仍在学习如何成为一名细心的、迭代的编辑者。它表明,擅长其中一项并不自动意味着擅长另一项。作者希望,通过使用他们这种全新的、超精确的评分系统——该系统同时检查修复的部分和未触动的部分——他们可以帮助训练未来的 AI,使其成为更可靠的、循序渐进的网页设计师,而不是在修理一扇窗户时把整座房子都拆了。
技术摘要:MT-Web2Code
问题陈述
大型视觉语言模型(LVLMs)的最新进展已展示出从零开始生成 Web UI 的显著能力。然而,现有的基准测试主要侧重于单轮、全页生成,将每个任务视为独立的输入输出问题。这种形式化处理未能捕捉到前端工程的现实情况,即开发者需要参与迭代式工作流:在重建缺失区域以及修改现有代码库中的局部元素的同时,保持未受影响内容的完整性。目前的基准测试无法评估模型是否能够可靠地编辑一个演进中的页面、是否能在多轮交互中保持一致性,或者是否能防止错误传播。在静态 UI 生成基准测试与动态、多轮次的真实 UI 编码需求之间,存在着关键的鸿沟。
元素指纹(Element Fingerprinting): 为了在尽管发生 DOM 重排(reflow)的情况下仍能跨顺序修改追踪元素,系统为 HTML 节点分配了位置无关的元素指纹(标签、文本和属性的哈希值)。这些标识符使系统能够确定性地追踪目标区域及其最近的存活兄弟节点,确保每一轮的“地面真值”(ground truth)都是唯一定义的。