一、结论写在前面
论文标题：Web2Code: A Large-scale Webpage-to-Code>论文链接：
项目链接：
多模态大型语言模型（MLLMs）在图像、视频和音频等多种模态的理解和生成任务中展现了显著的成功。然而，现有的MLLMs在理解网页截图并生成相应HTML代码方面表现惊人地差。
为了解决这一问题，这是一个由高质量、大规模的网页到代码指令调优数据集(包含1179.7k条目)和评估套件组成的基准，用于评估多模态大语言模型的网页理解和网页到HTML转换能力。在数据集构建方面，论文利用预训练的LLMs增强现有的网页转代码数据集，并生成多样化的网页渲染图像池。具体而言，输入是网页图像和指令，而输出是网页的HTML代码。论文进一步在响应中包含关于网页内容的多样化自然语言QA对，以实现对网页内容的更全面理解。
为了评估模型在这些任务中的性能，论文开发了一个评估框架，用于测试MLLMs在网页理解和网页转代码生成方面的能力。大量实验表明，论文提出的数据集不仅对所提出的任务有益，而且在通用视觉领域也表现出优势，而先前的数据集则导致性能下降。
然而，Web2Code的主要局限性包括：潜在的数据集偏差可能无法涵盖所有可能的HTML编码场景，可能导致模型性能出现差距；一些包含人物的网页可能涉及隐私敏感问题。确保高质量的注释和全面覆盖所有可能的HTML和代码结构是具有挑战性的。此外，处理复杂的、真实世界的HTML和代码场景可能仍超出了在此数据集上训练的模型的当前能力。此外，提出的评估框架可能无法捕捉代码生成质量的所有方面，如代码效率、可读性或对最佳实践的遵守。
二、论文的简单介绍
2.1 论文的背景
现有的MLLMs在理解网页截图并生成表达其潜在状态的HTML代码方面表现惊人地差。例如，给定指令“解析此网页的HTML代码”，知名的LLaVA-1.5生成了通用的、苍白的代码，未能保留原始网页的大部分特征（见图1），这阻碍了其在UI原型设计、自动化代理和可访问性（例如，根据网页截图注明可用按钮和选项）等应用中的实用性。
图1：论文构建Web2Code数据集的动机源于先前模型的局限性，例如LLaVA [33]，这些模型在通用数据集上训练，难以生成高质量的网页，如第二行所示。论文的数据集旨在显著提升网页生成的质量，如第三行所示，同时保持强大的通用多模态能力
MLLMs进展背后的关键要素可以说是大规模指令数据集和评估基准——前者用于将多模态输入与LLMs中的海量知识对齐，后者用于标准化比较，促进模型开发。然而，现有的指令数据集和基准通常关注通用设置（例如，视觉问答和推理），对网页理解和网页到代码生成关注不足，这需要光学字符识别（OCR）、空间推理、长文本生成等能力的独特组合。尽管先前的工作已经为这些任务开发了数据集，它们缺乏指令信息，不适合与通用MLLMs集成。另一方面，流行的基准单独评估了一些所需能力，但没有完全结合进行网页的视觉解析和推理。
为了填补这一空白，论文提出了一种新的指令调优数据集和评估套件，名为Web2Code。Web2Code总共包含1179.7万个基于网页的指令-响应对。这些响应不仅包括IHTML代码，还包括关于网页的结构化问题和答案，这些有助于模型更好地理解其信息。在数据集收集方面，论文使用GPT-3.5和GPT-4来清理现有数据（例如WebSRC ）以及生成全新的HTML代码网页。为了评估MLLM在网页理解和HTML解析方面的成功，论文提出了网页理解基准（WUB）和网页代码生成基准（WCGB），这两个任务分别测试模型回答网页相关问题和生成其HTML代码的能力。对于后一个任务，论文发现传统的文本相似度指标不足以评估生成代码的忠实度，因此提出将输出HTML渲染回网页截图，并使用GPT-4V 来评估生成的网页质量。
为了展示论文数据集的实用性，论文在指令微调阶段包括论文的数据集来训练LLaVA风格的MLLM。定量结果显示，在论文的数据集上进行微调不仅明显提高了MLLM的图像到HTML代码转换能力，还略微提升了模型在一般基准上的感知和推理能力。相比之下，包含之前的数据集而不进行论文的数据转换会导致整体性能下降，这表明论文的数据集适合纳入MLLM指令微调，以增加额外能力而不影响现有能力。
2.2 数据集构建
概述。论文的Web2Code指令调优数据集构建和指令生成过程涉及四个关键组件：（1）创建新的网页图像-代码对数据：论文遵循CodeAlpaca提示[6]使用GPT-3.5生成高质量的HTML网页-代码对，并将其转换为遵循指令的数据。（2）改进现有网页代码生成数据：论文将包括WebSight和Pix2Code在内的现有数据集转换为类似于LLaVA数据[33]的遵循指令的数据格式，以便它们可以作为遵循指令的数据用于训练多模态大型语言模型（MLLMs）。（3）创建新的文本问答对数据：论文利用从（1）中生成的新GPT-3.5数据，为网页理解生成新的问答对数据集。（4）改进现有网页理解数据：论文使用GPT-4改进WebSRC[10]问答数据，以提高其质量。每个组件详细说明如下：
DWCG：为代码生成创建新的网页图像-代码对数据。为了增强论文的数据集，论文使用GPT-3.5按照CodeAlpaca中的指南和提示生成了60K个HTML页面。然后使用Selenium WebDriver从生成的HTML代码中创建网页截图。这些网页图像-代码对随后被转换为类似于LLaVA数据格式的遵循指令的数据格式，使其可用于训练多模态大型语言模型（MLLMs）。指令的示例如图16所示。指令的生成分两个阶段使用输入到GPT-4的提示完成：（a）在第1阶段，如图12所示的提示产生了通用指令。（b）随后，通过使用GPT生成的指令增强（a）中的指令使用图13所示的提示，包含样式信息。这使得模型能够学习两种样式：现代风格和Bootstrap风格，分别如图21和图22所示
图2：生成的问答对数据集的定性示例。问题涵盖了网页理解的多个方面
图3：WebSRC数据改进以提高质量。左：改进前；右：改进后，质量得到提升，重复内容已被排除
DWCGR：现有网页代码生成数据的细化。为了增强模型在HTML代码生成任务中的能力，论文利用了Pix2code 和WebSight 数据集。为了减轻Pix2Code数据中随机字母对模型性能的负面影响，论文使用GPT-4将这些随机字母替换为有意义的文本，从而将网页细化为包含产品落地页、个人作品集、博客等多个类别的多样化网页。然后，论文通过截取每个网页的浏览器视图来对其进行可视化渲染。进一步地，论文使用与DWCG相同的策略将所有这些数据转换为LLaVA指令遵循数据格式。论文注意到，DWCG和WebSight网页遵循现代风格，而Pix2Code遵循Bootstrap风格。
DWU：网页理解新问题-答案对数据的创建。为了通过指令遵循方式微调论文的模型，论文利用了GPT-4的能力生成基于网页代码的问题-答案对。论文对24.35K网页数据子集使用GPT-4生成了10个问题-答案对，共计产生了243.5K问题-答案数据点。这包括一组230K针对基于GPT-3.5网页的问题-答案对，以及一组13.5K为精细化的Pix2Code图像新生成的问题答案对。这些对子精心设计，以符合论文的基于图像的评估标准，确保每个问题都能深入探究生成网页图像中反映的视觉和内容质量的特定方面。此策略通过将评估参数的细致理解融入学习过程中，提升了模型的性能。图2展示了一个来自论文生成的问题-答案对的定性示例。问题-答案生成的提示语如图11所示。
DWUR：现有网页理解数据的细化。为了增加高质量指令遵循示例的指令遵循数据集，论文将WebSRC数据集整合到论文的训练机制中。在纳入之前，论文精心筛选了WebSRC数据集中现有的问答对，以确保相关性和质量。这包括去重和质量优化，如图3所示。具体而言，论文发现WebSRC数据包含多个与同一答案相关的问题。为此，论文首先移除了这些重复项，然后使用GPT-4评估并提升答案质量。这一过程不仅将数据集精炼为51.5K高质量指令数据，还确保模型训练受到高保真、指令性强的数据影响，从而提高其遵循复杂网页指令的能力。
2.2.1 统计与分析
图4展示了论文问题-答案数据集中答案集的词云。词云突出了最常出现的术语，其中“section”、“color”、“button”和“website”最为显著，表明数据对结构和设计元素的强烈关注。这反映了数据集对布局和视觉方面的细致关注。
图5展示了论文GPT-3.5生成的HTML数据中最常见HTML标签的分布情况。该分布显示了如<div>、<p>、<meta>、<img>和<a>等基本结构标签的高频出现，表明生成的页面包含了丰富多样的元素，这些元素是构成丰富和多样网页内容的必要组成部分。<h2>、<input>、<html>、<head>和<body>标签的显著存在进一步强化了生成HTML文档的完整性和结构完整性。
为了估计论文基于HTML的网页数据集的难度水平，论文提供了几个定量指标，并与近期及类似的现有数据集进行比较，即WebSight [22]、Design2Code [50]和Pix2Code [4]（见表1）。
Design2Code主要用于测试，且样本量较小（484个示例），限制了其多功能性和鲁棒性。相比之下，论文的数据集旨在用于训练和测试，样本量显著更大（884.7K个示例）且更复杂，更适合开发鲁棒模型。总体而言，与WebSight等先前努力相比，论文的基准示例更具挑战性，涵盖了更广泛的复杂性范围。
表1：网页代码生成数据集之间的数据统计比较：WebSight、Design2Code、Pix2Code、论文的DWCG以及论文的DWCGp。DWCG是一个新近基于GPT-3.5生成的数据集，而DWCGp是利用WebSight和Pix2Code数据集精炼的数据集
2.2.2 数据分布
论文的指令遵循数据集包含 1，179.7K 条指令数据点。这包括 884.7K 网页图像-代码对和 295K 问答对。
295K 问答对由 243.5K 基于 GPT-4 的问答对（DWU 数据）和 51.5K 来自 WebSRC 图像数据的问答对组成，如表 2 所示。论文的评估数据集包含 1，198 个网页截图图像来源多样，包括WebSight、Pix2Code、基于GPT-3.5的数据以及人工处理，确保广泛代表网页内容。此外，论文利用GPT-4 Vision API生成的5，990对“是”/“否”问答对用于论文的网页理解基准测试，如第4.1节所示。
表 2：DWU 和 DWU 数据集的分布。两个数据集均包含高质量的网页理解问答对。
图4：基于GPT4的DWU数据集答案集的词云图。
2.3 网页的新评估框架
论文提出的评估框架包括两种方案：(1) 网页理解基准（WUB）：使用“是”/“否”问题的离线评估。(2) 网页代码生成基准（WCGB）：基于图像相似度的在线评估（使用GPT4 Vision）。
2.3.1 HTML代码生成的评估指标
在评估代码质量，特别是最终视觉效果和整体功能方面，依赖代码相似度指标的现有方法存在不足。这些传统方法往往缺乏对代码效果进行细致评估所需的精确性和可靠性。为解决这些不足，论文开发了一种新方法：使用模型预测的HTML代码重新生成网页，并捕获这些生成网页的屏幕截图。此过程通过Python中的Selenium WebDriver扩展实现自动化，将重点从不太可靠的代码相似度评估转向更准确和视觉导向的方法。通过比较生成网页的图像，论文可以更有效地评估代码的美观和功能方面，提供对其质量更全面的理解。
图6：网页生成与网页理解的评估基准。左侧：WCGB利用基于GPT4 Vision的在线评估进行图像级比较；右侧：WUB采用基于问答对的离线评估
论文提出两个基准用于评估网页理解和代码生成能力
WUB: 这个基准包含5，990对高质量的问答对，由GPT-4 Vision API基于1，198张网页截图生成(见提示15)，每个答案要么是"是"要么是"否"。这些图像来源广泛，包括WebSight、Pix2Code、GPT-3.5和人工处理，确保了网页内容的广泛代表性。图10展示了论文用于WUB的定性样本数据。论文通过比较预测答案和真实答案来测试各种多模态图像理解模型，最终准确率作为评估指标，如图6右侧所示。论文WUB基准中的定性数据示例如图10所示。
WCGB: 使用与WUB相同的图像，这个基准评估多模态模型根据特定指令从网页图像生成HTML代码的能力。与传统的代码级评估不同，这个基准在图像级别评估生成网页的保真度。论文使用Selenium WebDriver将预测的HTML代码转回图像，以便与真实图像进行直接视觉比较。如图6左侧所示的评估考虑了10个不同方面，这些方面进一步使用GPT-4 Vision API分为四个评估矩阵。这种图像级评估提供了对模型代码生成能力更准确的衡量，承认相同的网页可以由不同的代码构建。用于评估的提示如图14所示。该框架包括10个不同的标准，论文将其分为四类，每类包含特定标准，按0-10的尺度评分，如附录D节所示。
2.3.2 多模态大语言模型HTML代码生成的定量评估
论文使用各种数据配置和骨干网络评估了训练模型在论文的WUB和WCGB基准上的表现。模型在代码生成基准上的性能如表3所示，而网页理解的结果如表4所示。
本文转载自，作者：