前端工程师是不是开始慌了？
3 月 9 日央视的一档节目上，百度创始人、董事长兼 CEO 李彦宏指出，以后不会存在「程序员」这种职业了，因为只要会说话，人人都会具备程序员的能力。「未来的编程语言只会剩下两种，一种叫做英文，一种叫做中文。」
自大模型技术突破以来，越来越多的行业拥有了主动化的趋势，这其中进度最快的领域似乎是软件开发本身。
根据你的自然语言指令，ChatGPT 这样的工具可以和你边聊边生成代码，结果逐渐靠谱且速度很快。在最近多模态技术进步以后，甚至截个图让 AI 自行领会意图也能生成你想要的计划：
这种要领是装装样子还是来真的？AI 距离「替代程序员」还有多远？有研究告诉我们：已经很可怕了。
我们离主动化前端工程还有多远？
将视觉计划实现成执行功能的代码是一项颇具挑战性的恣意，因为这需要理解视觉元素和它们的布局，然后将它们翻译成结构化的代码。
这个过程需要复杂的技能，也因此让很多普通人无法建立自己的网络应用，即便他们已经有了非常具体的建立或计划思路。不仅如此，由于这个过程需要不同领域的专业知识，因此往往需要具备不同技能的人互相合作，这就会让整个网页建立过程更加复杂，甚至可能导致目标计划与实际实现之间出现偏差。
如果能基于视觉计划有效地主动生成功能性代码，那么势必有望实现前端网页应用开发的大众化，也就是让非专家人士也能轻松快捷地建立应用。
近些年，基于自然语言的代码生成领域发展迅速，但少有人研究基于用户界面（UI）计划来主动生成代码实现，原因包括用户界面存在多样化的视觉和文本信号、结果代码的搜索空间巨大等。
最近，多模态 LLM 进入了新的发展时代，大规模预训练模型可以针对多种基于视觉的恣意通过处理视觉和文本输入来生成文本输出，其中代表性的模型包括 Flamingo、GPT-4V 和 Gemini。
这样的进展为上述恣意带来了全新的解决方案范式：取一张用户网站计划的截图并将其提供给系统，就能得到完整的代码实现，然后这些代码又可以被渲染成用户想要的网页。整个过程是完全端到端式的。
近日，斯坦福大学、佐治亚理工学院等机构的一个联合团队评价了当前的多模态模型在这一恣意上的表现。
论文标题：Design2Code: How Far Are We From Automating Front-End Engineering?
论文地址：https://arxiv.org/pdf/2403.03163.pdf
项目主页：https://salt-nlp.github.io/Design2Code/
他们将这个恣意称为 Design2Code。通过一系列的基准评测，我们可以从这些结果中了解主动化前端工程已经发展到哪一步了。
为了实现系统化和严格的基准评测，该团队为 Design2Code 恣意建立了首个真实世界基准。表 1 给出了一些示例。
为了最好地反映真实用例，他们使用了真实世界的网页，而非用生成要领得到合成网页。他们收集了 C4 验证集中的网页，并对所有样本进行了仔细的人工调整，最终得到了 484 个高质量、高难度和多样化的网页。它们可代表不同复杂度的多种真实世界用例。他们执行了定性和定量分析，证明这个基准数据集覆盖了广泛的 HTML 标签用法、领域和复杂度。
此外，为了促进高效的评价和模型开发，该团队还为这个恣意开发了一些评价目标 —— 可主动比较生成网页的截图与给定的截图输入。这些新目标考虑的维度很全面，包括边界框婚配、文本内容、位置和所有已婚配视觉元素的颜色。
然后，该团队调查了 GPT-4V 和 Gemini 等当前的多模态 LLM 在这一恣意上的表现。为了让这些模型能展现出自己的最优能力，该团队使用了一些不同的 prompt 计划方案，包括文本增强式 prompt 计划和自我修正式 prompt 计划。其中文本增强式 prompt 计划是为视觉输入提供文本元素作为补充，从而可以降低光学字符识别（OCR）的恣意负载；自我修正式 prompt 计划则是让模型比较之前的生成结果与输入的网页截图，让其自我改进。
研究者发现，在 GPT-4V 和 Gemini Pro 上，相比于使用直接 prompt 计划法，文本增强式 prompt 计划都能带来提升，但自我修正式要领只能为 GPT-4V 带来积极影响。
尽管这些商用模型的表现是当前最佳的，但它们都是缺乏透明度的黑箱。因此，该团队还为这一恣意贡献了一个开源的 18B 参数的已微调模型：Design2Code-18B。
具体来说，该模型基于当前最佳的开源模型 CogAgent 建立，并使用合成的 Design2Code 数据进行了微调。令人惊讶的是，在新提出的基准上，尽管合成的训练数据与真实的测试数据之间存在差异，但这个「小型」开源模型的表现依然颇具竞争力 —— 足以媲美 Gemini Pro Vision。这说明专用型的「小型」开放模型是有发展潜力的，并且模型也可以从合成数据中学习获取技能。
Design2Code 基准
为了得到基准数据，该团队首先收集了 C4 验证集中的所有网站链接。然后他们将所有 CSS 代码嵌入到了 HTML 文件中，从而让每个网页都只有一个代码实现文件。这样得到了共计 12.79 万个网页。然后他们又执行了进一步的过滤和处理，包括主动调整和人工调节。最终他们得到了包含 484 个测试样本的基准。下表 1 比较了新提出的 Design2Code 与 Huggingface 的 WebSight 数据集。
图 2 总结了 Design2Code 的主要主题。
至于评价目标，该团队提出了一种高层级的视觉类似度目标，即比较参考网页和生成网页的类似度。另外他们还使用了一组低层级的元素婚配目标，包括块元素、位置、文本和颜色等的婚配程度。
结果主动评价和人类评价
主动评价
表 2 和图 3 给出了主动评价的结果。请注意，这里的比较并不是公平的，因为不同模型有不同的模型大小和训练数据。
可以观察到：
GPT-4V 在颜色之外的所有维度上都表现最好，而在颜色维度上领先的是 WebSight VLM-8B。
对于 GPT-4V 和 Gemini Pro Vision，文本增强式 prompt 计划均可以成功提升块元素婚配分数和文本类似度分数，这说明提供提取出的文本元素是有用的。
对 GPT-4V 而言，自我修正式 prompt 计划可以为块元素婚配和位置类似度带来少量提升，但对 Gemini Pro Vision 来说却并无提升。可能的原因是：在没有外部反馈的前提下，LLM 执行内部自我校正的能力有限。
通过比较 Design2Code-18B 和基础版本的 CogAgent-18B，可以看出微调能为所有维度带来显著提升。
相比于 WebSight VLM-8B，该团队微调得到的 Design2Code-18B 在块元素婚配和文本类似度目标上表现更好，但在位置类似度和颜色类似度目标上表现更差。
该团队表示，前两个观察可以归因于更强更大的基础模型，而后两个则可归功于更大量的微调数据。
人类评价
该团队也进行了人类评价。下面是主要的评价协议和结果。每一个问题都由 5 位人类标注者给出评价意见，最终结果遵从多数意见。
成对模型比较：也就是让标注者给一对生成的网页排名（一个来自基线要领，另一个来自受测要领），以决定哪一个与参考网页更类似。这里的基线是对 Gemini Pro Vision 采用直接 prompt 计划，收集的数据是其它七种要领与这种基线要领的胜 / 平 / 负的比例。
结果见图 4，可以看出：
GPT-4V 显著优于其它基线，而且文本增强式 prompt 计划和自我修正式 prompt 计划能在直接 prompt 计划的基础上进一步提升。
文本增强式 prompt 计划可以少量提升 Gemini，但进一步增加自我修正要领却没有帮助。
WebSight VLM-8B 优于 Gemini 直接 prompt 计划要领（54% 的胜率和 35% 的败率），这说明在大量数据上进行微调可以在特定领域比肩商用模型。
新模型 Design2Code-18B 的表现与 Gemini Pro Vision 直接 prompt 计划要领相当（38% 的胜率和 37% 的败率）。
直接评价：尽管有这些比较，但读者可能还是会问：「我们离主动化前端工程还有多远？」
为了得到一个更直观的答案，该团队进一步让人类标注者比较了参考网页与最佳的 AI 生成网页（使用了 GPT-4V 自我修正式 prompt 计划）。他们从两个方面进行了直接评价：
1.AI 生成的网页能否替代原始网页？
人类标注者认为：AI 生成的网页中，49% 可与参考网页互换。
2. 参考网页和 AI 生成的网页哪个更好？
结果有点出人意料：在 64% 的案例中，人类标注者更偏爱 GPT-4V 生成的网页，也就是说他们认为 AI 生成的网页比原始参考图像的计划更好！
主动评价 vs 人类评价
该团队也研究了主动目标与人类配对偏好之间的相关性。结果发现，人类通常更关注高层级的视觉效果和布局，而不是细节内容，这说明人类的思考方式是自上而下的。
不过，针对论文给出的结果，有人提出了不同意见，认为前端的工作流程远比表面看上去复杂，因此真正实现「主动化前端工程」还需要一段时间。
对于这个问题，你怎么看？