Web2Code 适用于多模态大模型的大规模网页转代码数据集与评价框架
一、论断写在前面
论文题目：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所示。
本文转载自，作者：
