前端不存在了？盲测64%的人更喜欢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 生成的网页能否替代原始网页？