斯坦福 && 微软 | 发布前端代码生成大模型：Design2Code-18B，助力前端自动化！

引言

近年来，生成式人工智能取得了快速发展，在多模态理解和代码生成方面展现前所未有的能力。为此，斯坦福、微软等研究人员提出了利用多模态大模型进行前端开发，制定了一个「Design2Code测试基准」，并开发了一套「多模态提示方法」，实验表明64%的生成网页要比原始参考网页要好，49% 的生成网页可以直接取代原本的网；除此之外还发布了一个开源「网页代码生成模型：Design2Code-18B」，其效果堪比Gemini Pro Vision 。

https://arxiv.org/pdf/2403.03163.pdf

背景介绍

将网页视觉设计转换成功能性代码是一项挑战性的工作，这需要人们得懂得怎么把那些好看的图案和布局变成电脑能懂的结构性代码。基于该技能背景。使得许多外行人无法构建自己的网络应用，即便他们对要构建或设计的东西有明确的想法。而且，因为做网页还需要各种专业知识，所以得找不同技能的人一起合作，有时候做出来的网页和最初想的不一样。「但如果我们能让电脑自己看懂设计图，然后自动写出代码，那做网页就简单多了，不懂编程的人也能轻松上手」。

虽然近年来随着自然语言处理的发展，大模型在代码生成展现出了强大的性能，但是从用户界面（UI）设计实现代码生成却没有得到太多关注，因为这其中存在许多挑战，比如用户界面上视觉和文字信息的多样性。其实，早在2017年Beltramelli等人就尝试使用卷积神经网络（CNN）和循环神经网络（RNN）模型生成了一些简单的用户界面设计。多年来，「尽管陆陆续续也有很多研究人员尝试，但这些生成的用户界面都比较简单，对于现实世界中的前端开发应用来说几乎没什么用」。

直到最近，多模态大模型（LLMs）的发展进入了一个新的时代，这些大规模预训练模型能够处理视觉和文本，并能够为各种视觉任务进行文本输出，代表性的例子有Flamingo、GPT-4V和Gemini。这样的进步为这个长期未解决的任务开辟了全新的方式：拍摄用户网站设计的截图，然后将这个图像交给系统，以获得可以完全端到端渲染成所需网页的完整代码实现。我们称这个任务为Design2Code。

Design2Code基准

为了进行严格的系统化测试，本文构建了首个现实的Design2Code基准测试，旨在衡量多模态大型语言模型（LLMs）在将视觉设计转换为代码实现任务上的性能。如下图所示：

为了能够最好地反映真实用例，作者采用现实网页作为测试示例，而不是像之前的作品那样使用合成网页。作者从C4验证集中抓取网页，并对手头的所有示例进行仔细的人工筛选，以「获得一组484个高质量、具有挑战性、多样化的网页」，这些网页代表了不同复杂度级别下的各种真实用例，并涵盖了各种HTML标签。

为了有效评估模型性能，作者们开发了一套自动评估指标，这些指标不仅考虑了生成网页与参考网页之间的高级别视觉相似性，还涵盖了低级别的元素匹配，如块匹配、文本内容、位置和颜色。这些指标为模型的评估提供了细致的维度，有助于诊断模型在特定方面的弱点。

多模态提示方法

完成了Design2Code基准设计，作者研究了当前的多模态大型语言模型（如GPT-4V和Gemini）在这项基准测试集上的表现。为了激发它们的模型潜力，作者引入了3种提示方法:

• 「直接提示」：这是最基本的提示方法，直接向模型提供一个网页截图，并附上指令，要求模型生成一个HTML文件，该文件使用HTML和CSS代码来重现给定的网站。这个过程中，模型需要处理所有的文本和布局元素，并生成相应的代码。
• 「文本增强提示」：首先从原始网页中提取所有文本元素，然后将这些文本附加到指令提示中，与截图输入一起提供给模型。这样做的目的是减轻模型OCR识别的负担，让模型更专注于布局设计。模型可以从提示中复制文本内容，并将其插入到正确的位置。
• 「自我修订提示」这种方法受到最近关于使用LLMs自我改进生成内容的研究的启发。在这种方法中，模型首先使用文本增强提示生成一个初始的网页代码，然后模型被要求改进这个初始代码，使其更接近参考网页。这要求模型理解参考截图和初始生成网页之间的差异，并在修改的HTML代码中相应地反映这些差异。

Design2Code-18B

尽管GPT-4V、Gemini等这些商业模型在Design2Code测试基准上展示出了最先进的性能，但它们的模型就是一个黑盒，缺乏一定的透明度。为此，本文作者训练了一个开源的18B（18亿参数）微调模型：Design2Code-18B，旨在将视觉设计转换为代码实现。

「该模型基于CogAgent-18B」(一个支持高分辨率输入的预训练模型)，它在多种数据集上进行了预训练，包括文本-图像对、合成文档、LaTeX论文和少量网站数据。为了微调，作者们使用了Huggingface发布的WebSight数据集，该数据集包含网站截图和对应的代码实现对。

尽管原始数据集庞大，但由于计算资源有限，作者们仅从中随机抽取了20%的样本进行训练。微调过程中，「采用了LoRA技术」，通过在语言解码器中添加LoRA模块，并设置了适当的训练参数。训练完成后，通过在一个小的开发集上评估所有自动指标的平均值来选择最佳检查点。

在性能评估方面，Design2Code-18B优于原始的CogAgent-18B。然而，在位置和颜色相似性方面，它的表现略逊于WebSight VLM-8B，这可能与基础模型的强度和训练数据量有关。在人类评估中，Design2Code-18B与Gemini Pro Vision直接提示方法的表现相当，显示出开源模型在这一任务上的竞争力。

实验结果

如下图所示，GPT-4V在所有维度上表现最佳，除了颜色相似性方面，WebSight VLM-8B领先。文本增强提示方法在GPT-4V和Gemini Pro Vision上都提高了块匹配分数和文本相似性分数，

如下图所示：在人类评估中，GPT-4V在所有维度上都优于其他基线模型。文本增强提示和自我修订提示可以进一步提高直接提示的性能。