发布时间：2024 年 06 月 28 日
代码编写
Web2Code: A Large-scale Webpage-to-Code Dataset and Evaluation Framework for Multimodal LLMs
摘要：多模态大型语言模型（MLLMs）在跨图像、视频和音频等多种任务中表现卓越。然而，它们在理解网页截图和生成 HTML 代码方面却表现不佳。为此，我们提出 Web2Code，包含一个大规模网页到代码数据集和评估框架，旨在提升 MLLMs 在这两方面的能力。我们利用预训练 LLMs 增强现有数据集并生成多样网页图像，输入为网页图像和指令，输出为 HTML 代码，并加入网页内容的自然语言 QA 对以深化理解。我们还开发了评估框架来测试 MLLMs 在这两方面的能力。实验证明，我们的数据集不仅提升了我们提出的任务性能，也在一般视觉领域表现更佳。我们期待这项工作能推动适用于网页内容生成和自动化的通用 MLLMs 的发展。相关数据和代码将在指定链接提供。
https://arxiv.org//pdf/2406.20098
1. 背景
多模态大语言模型这两年得到了迅猛发展，在多项任务中都表现出不错的效果。但是在网页解析、生成网页HTML代码这个任务上表现欠佳，大大限制了多模态大模型在UI原型设计、自动化代码等领域的发展。
指令集数据和评估测试数据集往往是推动大语言模型和多模态大语言模型进步的关键因素；指令集数据用于将多模态输入与LLMs的海量知识相结合，测试数据集（测试基准）为模型发展提供了标准化的比较。
现有数据集的局限性：
• 但现有的数据集和基准多集中在通用场景，如视觉问答和推理，而对网页理解和网页到代码的转换关注不足，这些任务需要结合- OCR、空间推理和长文本生成等特殊能力。
• 虽然已有研究开发了针对这些任务的数据集，但它们缺乏指令信息，不适合与通用MLLMs集成。
• 同时，流行的基准测试虽然评估了部分所需能力，但并未全面结合视觉解析和网页推理。
因此，本文作者提出了 Web2Code 的全新指令数据集和评估工具，包含117.97万个基于网页的指令集数据。为了评估MLLM在网页理解和HTML解析方面的表现，设计了网页理解基准（WUB）和网页代码生成基准（WCGB），分别测试模型回答网页相关问题和生成网页HTML代码的能力。
为了验证指令数据集的效果，作者用数据集训练通过指令微调的方式训练了一个LLaVA风格的多模态大模型。
2. 构建数据集
Web2Code数据集包括四个核心要素：
• (1) 网页-代码对数据数据的创建：利用 GPT-3.5 根据 CodeAlpaca 风格提示词生成了高质量的 HTML 网页-代码对，并将它们转化为遵循指令的数据；
• (2) 现有网页-代码对数据的优化：将 WebSight和 Pix2Code 等现有数据集转化为与 LLaVA 数据类似的遵循指令的数据格式，使其能够作为训练 MLLMs 的指令遵循数据；
• (3) 新文本问答对数据的生成：从 (1) 步骤中创建了一个新的网页理解问答对数据集。
• (4) 现有网页理解数据的精炼：我们利用 GPT-4 对 WebSRC 的问答数据进行质量提升。
2.1 DWCG：网页-代码对数据集生成
利用 GPT-3.5 根据 CodeAlpaca 的规范和提示，生成了 60,000 个 HTML 页面，并采用 Selenium WebDriver 技术抓取这些页面的截图。
将这些图像-代码对被转换成与 LLaVA 数据格式类似的指令遵循格式，以便用于多模态大型语言模型（MLLMs）的训练（如下图）。
分两步使用 GPT-4 生成指令：
• (a) 第一阶段，如上图所示的提示创建了通用指令；
• (b) 第二阶段，通过上图所示的提示，进一步丰富了指令内容，加入了风格信息，使模型能够掌握现代和 Bootstrap 两种设计风格，如下图：
现代设计风格
2.2 DWCGR：现有网页-代码对数据集的优化
为了增强模型在 HTML 代码生成方面的能力，对 Pix2code 和 WebSight 数据集进行了深度利用。为了避免 Pix2Code 数据中的随机字母对模型性能产生负面影响，使用 GPT-4 将这些随机字母替换为有意义的文本，使网页类型更加多样化，包括产品落地页、个人简历、博客等。然后，通过截取浏览器视图的屏幕截图来可视化每个样本，并将所有数据转换为遵循 LLaVA 指令格式的数据，策略与 DWCG 相同。值得注意的是，DWCG 和 WebSight 的网页遵循现代风格，而 Pix2Code 遵循 Bootstrap 风格。
2.3 DWU：创建了新的问答对数据
通过 GPT-4 的强大功能，生成了基于网页代码的 10 组问答对，每组针对 24.35K 网页数据的一个子集，总共产生了 243.5K 个问答数据点。包括基于 GPT-3.5 的网页生成的 230K 问答对，优化后的 Pix2Code 图像新生成的 13.5K 问答对。
问答对经过精心设计，以满足图像基础评估标准，确保每个问题都能深入探讨生成的网页图像中的视觉和内容质量的特定方面。下图展示了生成的问答对的定性示例和用于生成问答对的提示的示例。
2.4 DWUR：现有问答对数据的优化
为了提升指令数据集的质量，为网页增加更多高质量的指令遵循示例，将 WebSRC 数据集整合到我们的训练体系中。
在整合前，对 WebSRC 数据集中的问答对进行了严格的筛选，确保了它们的相关性和质量，包括去除重复项和优化质量，如上图 所示。
特别是，发现 WebSRC 数据中存在多个与同一答案相关的问题。为此，首先去除了这些重复项，然后利用 GPT-4 对答案的质量进行了评估和提升。这个过程不仅将数据集精炼为 51.5K 高质量的指令数据，而且还确保了模型训练受到了高保真、指令合理的数据的影响，从而提高了其遵循复杂基于网络的指令的能力。
3. 数据集特征
上图呈现了问答数据集答案集的词云图，其中“章节”、“颜色”、“按钮”和“网页”等词汇频繁出现，显示出数据集中对结构和设计元素的重点强调。反映出数据集布局和视觉元素的细致关注。
上图展示了 GPT-3.5 创造的 HTML 数据中最常见的 HTML 标签分布，其中 <div>、<p>、<meta>、<img> 和 <a> 等关键结构标签的高频出现，显示出生成页面包含了构建多样化网页内容所需的丰富元素。<h2>、<input>、<html>、<head> 和 <body> 标签的显著占比进一步印证了生成 HTML 文档的完整性与结构严谨性。
上图展示了网页代码生成数据集与WebSight、Design2Code、Pix2Code的对比。
Design2Code 主要用于测试，规模较小，仅包含 484 个样本，这限制了其应用广泛性和模型稳健性。
Web2Code 指令数据集囊括了117.97万条指令数据。这涵盖了88.47万对网站图像与代码，以及29.5万个问答配对。
在这些问答配对中，有24.35万对是GPT-4驱动的（DWU数据），另外5.15万对则来源于WebSRC的图像基础数据。
评估数据集由1198张网页截图组成，这些截图来源多样，包括WebSight、Pix2Code、基于GPT-3.5的数据以及手工操作，确保了对网页内容的全面覆盖。
还使用了5990对由GPT-4视觉API生成的“是”或“否”问答对，用于网页理解基准测试。
4. 测评框架
提出了一套新的网页评估框架，涵盖两种方案：
-（1）网页理解基准测试（WUB，Webpage Understanding Benchmark）：离线评估，仅使用Yes / No来进行评估
-（2）网页代码生成基准测试（WCGB，Webpage Code Generation Benchmark）：基于图像相似性的在线评估（GPT4）。
4.1 生成代码的质量评估
传统的代码代码质量评估，往往采用的是代码相似度评估，这种方法在评估生成代码视觉效果、特别是评估整体功能性方面是存在很大的局限性的。
推荐阅读：
所以本文作者提出了一种新的评估方法：利用模型生成的的 HTML 代码重新渲染网页，并用这些代码生成网页和截图。利用 Python 的 Selenium WebDriver 将这一流程自动化，将焦点从较不可靠的代码相似度评估转移到更准确、更视觉化的方法上来。通过对比生成网页的图像，能更有效地评价代码的美观性和功能性，从而全面理解其品质。
作者设立了两个测试基准：
WUB：此基准测试包含 5990 对高质量的问答对，由 GPT-4 视觉 API 生成（提示词如下图）。截图来源多样，包括 WebSight、Pix2Code、GPT-3.5 和手工操作，确保了网页内容的广泛覆盖。上图展示了在 WUB 中使用的定性样本数据。
通过将预测的答案与真实情况相比较，在多种多模态图像理解模型上进行测试，最终的准确度得分作为评估标准（如下图）。
WCGB：此基准测试使用与 WUB 相同的图像，评估多模态模型根据具体指令从网页图像生成 HTML 代码的能力。与常规的代码层面评估不同，此基准在图像层面上评价生成网页的相似度。使用 Selenium WebDriver 将预测的 HTML 代码转换为图像，以便与真实图像进行直观的视觉对比。如上图左侧所示的评估，涵盖了 10 个不同的维度，这些维度进一步通过 GPT-4 视觉 API 分类为四个评估矩阵。这种基于图像的评估方式，为模型的代码生成能力提供了更精确的衡量，同时认识到相同的网页可以通过不同的代码实现。评估使用的提示词见下图。
该框架包含 10 个独立标准，将其归为四大类别，每个类别包含特定的评分标准，依照 0 到 10 的评分尺度进行评定：
• 视觉结构与对齐
• 布局一致性：
评价网页结构元素如页眉、页脚、侧边栏的布局排列。
• 元素对齐：
检查图像、按钮和文本框的对齐状况。
• 比例准确性：
核实视觉元素的尺寸和比例的一致性。
• 视觉和谐：
审视设计的整体平衡与和谐度。
• 色彩与美学设计
• 色彩方案与美学匹配：
着眼于色彩方案的相似度，涵盖色调与饱和度。
• 美学相似性：
观察整体的美学吸引力和设计风格（如现代、简约、传统等）。
• 文字与内容一致性
• 字体特征与一致性：
评估字体类型、尺寸、风格和粗细的一致性。
• 文本内容匹配：
对比单词和句子的匹配度。
• 数值与特殊字符准确性：
检验数字、日期和特殊字符的一致性。
• 用户界面与交互性
• 用户界面一致性：
评价用户界面元素如菜单、按钮、表单在设计语言和外观上的相似度。
4.2 MLLMs 的 HTML 代码生成定量评估
根据 WUB 和 WCGB 基准，对不同数据配置和模型架构训练的模型进行了全面评估。模型在代码生成任务上的性能详见上图，而网页理解能力的结果则展示于下表。
在引入 DWU、DWCG 加 DWU，以及 DWCGR加 DWUR后，网页代码生成的品质得到了显著提升。
以指令微调的 CrystalChat 为例，在 WCGB 基准上加入 DWCG 加 DWU 和 DWCGR加 DWUR后，整体评分从 4.825 提高至 8.530。
值得注意的是，仅使用通用领域数据的指令微调 CrystalChat-7B 在 WCGB 上表现不佳，而在 WUB 上的表现则与其他网页数据集的使用效果相当。Vicuna1.5-7B 模型架构也呈现了类似的趋势，加入所提出的数据集后，整体评分显著提升至 7.598。
指令微调的 CrystalCoder-7B 的四组结果表明，使用 DWCG 配合 DWU 不仅能够维持语言理解能力不下降，完整的数据集组件甚至能够进一步提升网页理解能力。总体来看，发现所提出的数据集能够在各类大型语言模型（LLM）架构下，增强模型的网页理解与代码生成能力，其中 LLaMA3-8B 在这两项任务上均实现了最佳性能。
4.3 可视化定性分析
如上图展示的对比中，与真实网页样本的原始图像相比，基于 Vicuna1.5-7B 和 CrystalChat-7B 这两种大型语言模型（LLM）生成的渲染图像有所区别。
作为增强了代码能力的 LLM，CrystalChat-7B 在生成质量上超越了 Vicuna1.5-7B，尽管其在通用多模态领域的性能略有不足。进一步地，上图展示了模型经过 web 数据集训练后，所渲染的网页与原始图像高度相似，这突显了 web2code 数据集的正面效果。此外，为了测试模型的适应性，上图还展示了模型处理手绘网页输入时的生成效果。
5. 局限性
• 比如数据集可能存在偏见，未能涵盖所有 HTML 编码情景，这可能导致模型性能上的不足。
• 包含人物的网页可能涉及隐私问题。
• 处理复杂的现实世界 HTML 和代码场景，可能仍超出了当前在此数据集上训练的模型的能力。
• 所提出的评估框架可能未能全面评估代码生成的质量，包括代码的效率、可读性或对最佳实践的遵循情况。
