From Visual Widgets to UI Code: Efficient Tool-Grounded Generation
本文介绍了 WidgetGen，这是一个轻量级的工具落地框架，通过选择性地落地可观测的文本和颜色证据以直接生成 JSX，从而改善了截图到代码生成中的保真度与效率之间的权衡，其性能优于直接提示和结构化流水线，同时也实现了对开源权重模型的有效微调。
原始论文采用 CC BY 4.0 许可（http://creativecommons.org/licenses/by/4.0/）。 这是对下方论文的AI生成解释。它不是由作者撰写或认可的。如需技术准确性，请参阅原始论文。 阅读完整免责声明
想象一下，你正试图教一个机器人仅仅通过观察一张房子的照片来画出一座房子。这就是“截图转代码”（screenshot-to-code）的世界，它是计算机科学的一个分支，人工智能试图将网站或应用程序的静态图像转化为构建它的实际编程指令（代码）。长期以来，科学家们一直在争论实现这一目标的最佳方式。一种方法是让机器人一次性猜出整个画面，就像一个没有教科书的学生在参加考试；这种方法快速且灵活，但机器人经常会产生幻觉，凭空捏造并不存在的窗户或者弄错颜色。另一种方法是强迫机器人按照严格的、预先批准的蓝图，一砖一瓦地盖房子。这种方法更准确，因为机器人无法自创规则，但它缓慢且僵化，如果房子形状奇特，超出了蓝图的覆盖范围，机器人就会陷入困境。
研究人员提出的核心问题是：我们能否兼得两者的优点？我们能否给机器人提供恰到好处的“参考资料”，以防止它进行疯狂的猜测，同时又不强迫它遵循死板、枯燥的蓝图？这正是论文《从视觉组件到 UI 代码：高效的工具落地生成》（From Visual Widgets to UI Code: Efficient Tool-Grounded Generation）所探讨的问题。它专注于“组件”（widgets）——即你在手机和电脑上随处可见的那些微小且独立的模块，比如天气卡片、音乐播放器或股票图表。这些组件非常棘手，因为它们虽然体积小，却包含了密集的文本、颜色和形状，其中任何一个微小的错误都会毁掉整个组件。作者们想要探究的是，是否可以在不通过复杂的自定义规则来降低速度的情况下，让机器人变得更聪明、更准确。
研究人员引入了一种名为 WidgetGen 的新方法，它就像一个聪明的助手，在机器人开始绘画之前，先递给它几个特定的线索。WidgetGen 不再让机器人从零开始猜测文本或颜色（这通常会导致错误），而是使用专门的工具直接从截图中“读取”文本并“测量”颜色。想象一下，这就像是给了机器人一个放大镜和一张色卡。一旦机器人掌握了这些确凿的事实，它就会利用自己的大脑来构思布局，然后直接编写代码。
研究发现，这种“选择性工具落地”（selective tool-grounding）的效果出奇地好。当他们使用六种不同的 AI 模型对 1,000 个不同的组件进行测试时，WidgetGen 在大多数类别中都击败了“猜测”法和“死板蓝图”法。具体而言，WidgetGen 生成的代码看起来与原图更加相似，具有更好的文本可读性、更准确的颜色，并且其布局与原始组件的大小和形状几乎完美匹配。事实上，在“几何结构”（geometry）评分（即形状匹配程度）方面，WidgetGen 在他们测试的所有模型中都达到了完美的 100.00，而其他方法往往难以超过 90。
作者还发现这种方法是非常高效的。虽然死板的蓝图法需要许多额外的步骤和时间来编译其特殊的规则，但 WidgetGen 运行起来更快、成本更低，同时还能产生更高质量的结果。他们甚至展示了 WidgetGen 生成的代码可以作为“训练数据”，用来教导其他更小的 AI 模型如何更好地完成这项工作，有效地将机器人的成功绘画变成了其“年幼兄弟姐妹”的学习教材。
然而，论文也谨慎地指出了其局限性。研究结果是基于来自单一数据集的 1,000 个特定组件，因此我们目前还不知道这种方法是否适用于世界上每一种类型的应用或网站。此外，测试仅检查了最终生成的图片看起来是否正确，并未测试按钮是否真的可以点击，或者代码是否易于人类后续阅读和修改。但对于将小组件的截图转化为可用代码这一特定任务而言，WidgetGen 表明，给 AI 提供一些可靠的事实，比强迫它遵循一套严格且缺乏灵活性的规则手册是更好的策略。
您所在领域的论文太多了？
获取与您研究关键词匹配的最新论文每日摘要——附技术摘要，使用您的语言。