一、結(jié)論寫在前面

論文標(biāo)題：Web2Code: A Large-scale Webpage-to-Code Dataset and Evaluation Framework for Multimodal LLMs

論文鏈接：??https://arxiv.org/pdf/2406.20098??

項(xiàng)目鏈接：??https://mbzuai-llm.github.io/webpage2code/??

多模態(tài)大型語(yǔ)言模型（MLLMs）在圖像、視頻和音頻等多種模態(tài)的理解和生成任務(wù)中展現(xiàn)了顯著的成功。然而，現(xiàn)有的MLLMs在理解網(wǎng)頁(yè)截圖并生成相應(yīng)HTML代碼方面表現(xiàn)驚人地差。

為了解決這一問(wèn)題，這是一個(gè)由高質(zhì)量、大規(guī)模的網(wǎng)頁(yè)到代碼指令調(diào)優(yōu)數(shù)據(jù)集(包含1179.7k條目)和評(píng)估套件組成的基準(zhǔn)，用于評(píng)估多模態(tài)大語(yǔ)言模型的網(wǎng)頁(yè)理解和網(wǎng)頁(yè)到HTML轉(zhuǎn)換能力。在數(shù)據(jù)集構(gòu)建方面，論文利用預(yù)訓(xùn)練的LLMs增強(qiáng)現(xiàn)有的網(wǎng)頁(yè)轉(zhuǎn)代碼數(shù)據(jù)集，并生成多樣化的網(wǎng)頁(yè)渲染圖像池。具體而言，輸入是網(wǎng)頁(yè)圖像和指令，而輸出是網(wǎng)頁(yè)的HTML代碼。論文進(jìn)一步在響應(yīng)中包含關(guān)于網(wǎng)頁(yè)內(nèi)容的多樣化自然語(yǔ)言QA對(duì)，以實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)內(nèi)容的更全面理解。    

為了評(píng)估模型在這些任務(wù)中的性能，論文開(kāi)發(fā)了一個(gè)評(píng)估框架，用于測(cè)試MLLMs在網(wǎng)頁(yè)理解和網(wǎng)頁(yè)轉(zhuǎn)代碼生成方面的能力。大量實(shí)驗(yàn)表明，論文提出的數(shù)據(jù)集不僅對(duì)所提出的任務(wù)有益，而且在通用視覺(jué)領(lǐng)域也表現(xiàn)出優(yōu)勢(shì)，而先前的數(shù)據(jù)集則導(dǎo)致性能下降。

然而，Web2Code的主要局限性包括：潛在的數(shù)據(jù)集偏差可能無(wú)法涵蓋所有可能的HTML編碼場(chǎng)景，可能導(dǎo)致模型性能出現(xiàn)差距；一些包含人物的網(wǎng)頁(yè)可能涉及隱私敏感問(wèn)題。確保高質(zhì)量的注釋和全面覆蓋所有可能的HTML和代碼結(jié)構(gòu)是具有挑戰(zhàn)性的。此外，處理復(fù)雜的、真實(shí)世界的HTML和代碼場(chǎng)景可能仍超出了在此數(shù)據(jù)集上訓(xùn)練的模型的當(dāng)前能力。此外，提出的評(píng)估框架可能無(wú)法捕捉代碼生成質(zhì)量的所有方面，如代碼效率、可讀性或?qū)ψ罴褜?shí)踐的遵守。

?二、論文的簡(jiǎn)單介紹

2.1 論文的背景?

現(xiàn)有的MLLMs在理解網(wǎng)頁(yè)截圖并生成表達(dá)其潛在狀態(tài)的HTML代碼方面表現(xiàn)驚人地差。例如，給定指令“解析此網(wǎng)頁(yè)的HTML代碼”，知名的LLaVA-1.5生成了通用的、蒼白的代碼，未能保留原始網(wǎng)頁(yè)的大部分特征（見(jiàn)圖1），這阻礙了其在UI原型設(shè)計(jì)、自動(dòng)化代理和可訪問(wèn)性（例如，根據(jù)網(wǎng)頁(yè)截圖注明可用按鈕和選項(xiàng)）等應(yīng)用中的實(shí)用性。

圖1：論文構(gòu)建Web2Code數(shù)據(jù)集的動(dòng)機(jī)源于先前模型的局限性，例如LLaVA [33]，這些模型在通用數(shù)據(jù)集上訓(xùn)練，難以生成高質(zhì)量的網(wǎng)頁(yè)，如第二行所示。論文的數(shù)據(jù)集旨在顯著提升網(wǎng)頁(yè)生成的質(zhì)量，如第三行所示，同時(shí)保持強(qiáng)大的通用多模態(tài)能力

MLLMs進(jìn)展背后的關(guān)鍵要素可以說(shuō)是大規(guī)模指令數(shù)據(jù)集和評(píng)估基準(zhǔn)——前者用于將多模態(tài)輸入與LLMs中的海量知識(shí)對(duì)齊，后者用于標(biāo)準(zhǔn)化比較，促進(jìn)模型開(kāi)發(fā)。然而，現(xiàn)有的指令數(shù)據(jù)集和基準(zhǔn)通常關(guān)注通用設(shè)置（例如，視覺(jué)問(wèn)答和推理），對(duì)網(wǎng)頁(yè)理解和網(wǎng)頁(yè)到代碼生成關(guān)注不足，這需要光學(xué)字符識(shí)別（OCR）、空間推理、長(zhǎng)文本生成等能力的獨(dú)特組合。盡管先前的工作已經(jīng)為這些任務(wù)開(kāi)發(fā)了數(shù)據(jù)集，它們?nèi)狈χ噶钚畔ⅲ贿m合與通用MLLMs集成。另一方面，流行的基準(zhǔn)單獨(dú)評(píng)估了一些所需能力，但沒(méi)有完全結(jié)合進(jìn)行網(wǎng)頁(yè)的視覺(jué)解析和推理。

為了填補(bǔ)這一空白，論文提出了一種新的指令調(diào)優(yōu)數(shù)據(jù)集和評(píng)估套件，名為Web2Code。Web2Code總共包含1179.7萬(wàn)個(gè)基于網(wǎng)頁(yè)的指令-響應(yīng)對(duì)。這些響應(yīng)不僅包括IHTML代碼，還包括關(guān)于網(wǎng)頁(yè)的結(jié)構(gòu)化問(wèn)題和答案，這些有助于模型更好地理解其信息。在數(shù)據(jù)集收集方面，論文使用GPT-3.5和GPT-4來(lái)清理現(xiàn)有數(shù)據(jù)（例如WebSRC ）以及生成全新的HTML代碼網(wǎng)頁(yè)。為了評(píng)估MLLM在網(wǎng)頁(yè)理解和HTML解析方面的成功，論文提出了網(wǎng)頁(yè)理解基準(zhǔn)（WUB）和網(wǎng)頁(yè)代碼生成基準(zhǔn)（WCGB），這兩個(gè)任務(wù)分別測(cè)試模型回答網(wǎng)頁(yè)相關(guān)問(wèn)題和生成其HTML代碼的能力。對(duì)于后一個(gè)任務(wù)，論文發(fā)現(xiàn)傳統(tǒng)的文本相似度指標(biāo)不足以評(píng)估生成代碼的忠實(shí)度，因此提出將輸出HTML渲染回網(wǎng)頁(yè)截圖，并使用GPT-4V 來(lái)評(píng)估生成的網(wǎng)頁(yè)質(zhì)量。    

為了展示論文數(shù)據(jù)集的實(shí)用性，論文在指令微調(diào)階段包括論文的數(shù)據(jù)集來(lái)訓(xùn)練LLaVA風(fēng)格的MLLM。定量結(jié)果顯示，在論文的數(shù)據(jù)集上進(jìn)行微調(diào)不僅明顯提高了MLLM的圖像到HTML代碼轉(zhuǎn)換能力，還略微提升了模型在一般基準(zhǔn)上的感知和推理能力。相比之下，包含之前的數(shù)據(jù)集而不進(jìn)行論文的數(shù)據(jù)轉(zhuǎn)換會(huì)導(dǎo)致整體性能下降，這表明論文的數(shù)據(jù)集適合納入MLLM指令微調(diào)，以增加額外能力而不影響現(xiàn)有能力。

2.2 數(shù)據(jù)集構(gòu)建

概述。論文的Web2Code指令調(diào)優(yōu)數(shù)據(jù)集構(gòu)建和指令生成過(guò)程涉及四個(gè)關(guān)鍵組件：（1）創(chuàng)建新的網(wǎng)頁(yè)圖像-代碼對(duì)數(shù)據(jù)：論文遵循CodeAlpaca提示[6]使用GPT-3.5生成高質(zhì)量的HTML網(wǎng)頁(yè)-代碼對(duì)，并將其轉(zhuǎn)換為遵循指令的數(shù)據(jù)。（2）改進(jìn)現(xiàn)有網(wǎng)頁(yè)代碼生成數(shù)據(jù)：論文將包括WebSight和Pix2Code在內(nèi)的現(xiàn)有數(shù)據(jù)集轉(zhuǎn)換為類似于LLaVA數(shù)據(jù)[33]的遵循指令的數(shù)據(jù)格式，以便它們可以作為遵循指令的數(shù)據(jù)用于訓(xùn)練多模態(tài)大型語(yǔ)言模型（MLLMs）。（3）創(chuàng)建新的文本問(wèn)答對(duì)數(shù)據(jù)：論文利用從（1）中生成的新GPT-3.5數(shù)據(jù)，為網(wǎng)頁(yè)理解生成新的問(wèn)答對(duì)數(shù)據(jù)集。（4）改進(jìn)現(xiàn)有網(wǎng)頁(yè)理解數(shù)據(jù)：論文使用GPT-4改進(jìn)WebSRC[10]問(wèn)答數(shù)據(jù)，以提高其質(zhì)量。每個(gè)組件詳細(xì)說(shuō)明如下：

DWCG：為代碼生成創(chuàng)建新的網(wǎng)頁(yè)圖像-代碼對(duì)數(shù)據(jù)。為了增強(qiáng)論文的數(shù)據(jù)集，論文使用GPT-3.5按照CodeAlpaca中的指南和提示生成了60K個(gè)HTML頁(yè)面。然后使用Selenium WebDriver從生成的HTML代碼中創(chuàng)建網(wǎng)頁(yè)截圖。這些網(wǎng)頁(yè)圖像-代碼對(duì)隨后被轉(zhuǎn)換為類似于LLaVA數(shù)據(jù)格式的遵循指令的數(shù)據(jù)格式，使其可用于訓(xùn)練多模態(tài)大型語(yǔ)言模型（MLLMs）。指令的示例如圖16所示。指令的生成分兩個(gè)階段使用輸入到GPT-4的提示完成：（a）在第1階段，如圖12所示的提示產(chǎn)生了通用指令。（b）隨后，通過(guò)使用GPT生成的指令增強(qiáng)（a）中的指令使用圖13所示的提示，包含樣式信息。這使得模型能夠?qū)W習(xí)兩種樣式：現(xiàn)代風(fēng)格和Bootstrap風(fēng)格，分別如圖21和圖22所示    

圖2：生成的問(wèn)答對(duì)數(shù)據(jù)集的定性示例。問(wèn)題涵蓋了網(wǎng)頁(yè)理解的多個(gè)方面

圖3：WebSRC數(shù)據(jù)改進(jìn)以提高質(zhì)量。左：改進(jìn)前；右：改進(jìn)后，質(zhì)量得到提升，重復(fù)內(nèi)容已被排除

DWCGR：現(xiàn)有網(wǎng)頁(yè)代碼生成數(shù)據(jù)的細(xì)化。為了增強(qiáng)模型在HTML代碼生成任務(wù)中的能力，論文利用了Pix2code 和WebSight 數(shù)據(jù)集。為了減輕Pix2Code數(shù)據(jù)中隨機(jī)字母對(duì)模型性能的負(fù)面影響，論文使用GPT-4將這些隨機(jī)字母替換為有意義的文本，從而將網(wǎng)頁(yè)細(xì)化為包含產(chǎn)品落地頁(yè)、個(gè)人作品集、博客等多個(gè)類別的多樣化網(wǎng)頁(yè)。然后，論文通過(guò)截取每個(gè)網(wǎng)頁(yè)的瀏覽器視圖來(lái)對(duì)其進(jìn)行可視化渲染。進(jìn)一步地，論文使用與DWCG相同的策略將所有這些數(shù)據(jù)轉(zhuǎn)換為L(zhǎng)LaVA指令遵循數(shù)據(jù)格式。論文注意到，DWCG和WebSight網(wǎng)頁(yè)遵循現(xiàn)代風(fēng)格，而Pix2Code遵循Bootstrap風(fēng)格。    

DWU：網(wǎng)頁(yè)理解新問(wèn)題-答案對(duì)數(shù)據(jù)的創(chuàng)建。為了通過(guò)指令遵循方式微調(diào)論文的模型，論文利用了GPT-4的能力生成基于網(wǎng)頁(yè)代碼的問(wèn)題-答案對(duì)。論文對(duì)24.35K網(wǎng)頁(yè)數(shù)據(jù)子集使用GPT-4生成了10個(gè)問(wèn)題-答案對(duì)，共計(jì)產(chǎn)生了243.5K問(wèn)題-答案數(shù)據(jù)點(diǎn)。這包括一組230K針對(duì)基于GPT-3.5網(wǎng)頁(yè)的問(wèn)題-答案對(duì)，以及一組13.5K為精細(xì)化的Pix2Code圖像新生成的問(wèn)題答案對(duì)。這些對(duì)子精心設(shè)計(jì)，以符合論文的基于圖像的評(píng)估標(biāo)準(zhǔn)，確保每個(gè)問(wèn)題都能深入探究生成網(wǎng)頁(yè)圖像中反映的視覺(jué)和內(nèi)容質(zhì)量的特定方面。此策略通過(guò)將評(píng)估參數(shù)的細(xì)致理解融入學(xué)習(xí)過(guò)程中，提升了模型的性能。圖2展示了一個(gè)來(lái)自論文生成的問(wèn)題-答案對(duì)的定性示例。問(wèn)題-答案生成的提示語(yǔ)如圖11所示。

DWUR：現(xiàn)有網(wǎng)頁(yè)理解數(shù)據(jù)的細(xì)化。為了增加高質(zhì)量指令遵循示例的指令遵循數(shù)據(jù)集，論文將WebSRC數(shù)據(jù)集整合到論文的訓(xùn)練機(jī)制中。在納入之前，論文精心篩選了WebSRC數(shù)據(jù)集中現(xiàn)有的問(wèn)答對(duì)，以確保相關(guān)性和質(zhì)量。這包括去重和質(zhì)量?jī)?yōu)化，如圖3所示。具體而言，論文發(fā)現(xiàn)WebSRC數(shù)據(jù)包含多個(gè)與同一答案相關(guān)的問(wèn)題。為此，論文首先移除了這些重復(fù)項(xiàng)，然后使用GPT-4評(píng)估并提升答案質(zhì)量。這一過(guò)程不僅將數(shù)據(jù)集精煉為51.5K高質(zhì)量指令數(shù)據(jù)，還確保模型訓(xùn)練受到高保真、指令性強(qiáng)的數(shù)據(jù)影響，從而提高其遵循復(fù)雜網(wǎng)頁(yè)指令的能力。

2.2.1 統(tǒng)計(jì)與分析

圖4展示了論文問(wèn)題-答案數(shù)據(jù)集中答案集的詞云。詞云突出了最常出現(xiàn)的術(shù)語(yǔ)，其中“section”、“color”、“button”和“website”最為顯著，表明數(shù)據(jù)對(duì)結(jié)構(gòu)和設(shè)計(jì)元素的強(qiáng)烈關(guān)注。這反映了數(shù)據(jù)集對(duì)布局和視覺(jué)方面的細(xì)致關(guān)注。

圖5展示了論文GPT-3.5生成的HTML數(shù)據(jù)中最常見(jiàn)HTML標(biāo)簽的分布情況。該分布顯示了如<div>、<p>、<meta>、<img>和<a>等基本結(jié)構(gòu)標(biāo)簽的高頻出現(xiàn)，表明生成的頁(yè)面包含了豐富多樣的元素，這些元素是構(gòu)成豐富和多樣網(wǎng)頁(yè)內(nèi)容的必要組成部分。<h2>、<input>、<html>、<head>和<body>標(biāo)簽的顯著存在進(jìn)一步強(qiáng)化了生成HTML文檔的完整性和結(jié)構(gòu)完整性。

為了估計(jì)論文基于HTML的網(wǎng)頁(yè)數(shù)據(jù)集的難度水平，論文提供了幾個(gè)定量指標(biāo)，并與近期及類似的現(xiàn)有數(shù)據(jù)集進(jìn)行比較，即WebSight [22]、Design2Code [50]和Pix2Code [4]（見(jiàn)表1）。

Design2Code主要用于測(cè)試，且樣本量較小（484個(gè)示例），限制了其多功能性和魯棒性。相比之下，論文的數(shù)據(jù)集旨在用于訓(xùn)練和測(cè)試，樣本量顯著更大（884.7K個(gè)示例）且更復(fù)雜，更適合開(kāi)發(fā)魯棒模型。總體而言，與WebSight等先前努力相比，論文的基準(zhǔn)示例更具挑戰(zhàn)性，涵蓋了更廣泛的復(fù)雜性范圍。

表1：網(wǎng)頁(yè)代碼生成數(shù)據(jù)集之間的數(shù)據(jù)統(tǒng)計(jì)比較：WebSight、Design2Code、Pix2Code、論文的DWCG以及論文的DWCGp。DWCG是一個(gè)新近基于GPT-3.5生成的數(shù)據(jù)集，而DWCGp是利用WebSight和Pix2Code數(shù)據(jù)集精煉的數(shù)據(jù)集

2.2.2 數(shù)據(jù)分布

論文的指令遵循數(shù)據(jù)集包含 1，179.7K 條指令數(shù)據(jù)點(diǎn)。這包括 884.7K 網(wǎng)頁(yè)圖像-代碼對(duì)和 295K 問(wèn)答對(duì)。

295K 問(wèn)答對(duì)由 243.5K 基于 GPT-4 的問(wèn)答對(duì)（DWU 數(shù)據(jù)）和 51.5K 來(lái)自 WebSRC 圖像數(shù)據(jù)的問(wèn)答對(duì)組成，如表 2 所示。論文的評(píng)估數(shù)據(jù)集包含 1，198 個(gè)網(wǎng)頁(yè)截圖圖像來(lái)源多樣，包括WebSight、Pix2Code、基于GPT-3.5的數(shù)據(jù)以及人工處理，確保廣泛代表網(wǎng)頁(yè)內(nèi)容。此外，論文利用GPT-4 Vision API生成的5，990對(duì)“是”/“否”問(wèn)答對(duì)用于論文的網(wǎng)頁(yè)理解基準(zhǔn)測(cè)試，如第4.1節(jié)所示。      

表 2：DWU 和 DWU 數(shù)據(jù)集的分布。兩個(gè)數(shù)據(jù)集均包含高質(zhì)量的網(wǎng)頁(yè)理解問(wèn)答對(duì)。

圖4：基于GPT4的DWU數(shù)據(jù)集答案集的詞云圖。

2.3 網(wǎng)頁(yè)的新評(píng)估框架?

論文提出的評(píng)估框架包括兩種方案：(1) 網(wǎng)頁(yè)理解基準(zhǔn)（WUB）：使用“是”/“否”問(wèn)題的離線評(píng)估。(2) 網(wǎng)頁(yè)代碼生成基準(zhǔn)（WCGB）：基于圖像相似度的在線評(píng)估（使用GPT4 Vision）。

2.3.1 HTML代碼生成的評(píng)估指標(biāo)

在評(píng)估代碼質(zhì)量，特別是最終視覺(jué)效果和整體功能方面，依賴代碼相似度指標(biāo)的現(xiàn)有方法存在不足。這些傳統(tǒng)方法往往缺乏對(duì)代碼效果進(jìn)行細(xì)致評(píng)估所需的精確性和可靠性。為解決這些不足，論文開(kāi)發(fā)了一種新方法：使用模型預(yù)測(cè)的HTML代碼重新生成網(wǎng)頁(yè)，并捕獲這些生成網(wǎng)頁(yè)的屏幕截圖。此過(guò)程通過(guò)Python中的Selenium WebDriver擴(kuò)展實(shí)現(xiàn)自動(dòng)化，將重點(diǎn)從不太可靠的代碼相似度評(píng)估轉(zhuǎn)向更準(zhǔn)確和視覺(jué)導(dǎo)向的方法。通過(guò)比較生成網(wǎng)頁(yè)的圖像，論文可以更有效地評(píng)估代碼的美觀和功能方面，提供對(duì)其質(zhì)量更全面的理解。      

圖6：網(wǎng)頁(yè)生成與網(wǎng)頁(yè)理解的評(píng)估基準(zhǔn)。左側(cè)：WCGB利用基于GPT4 Vision的在線評(píng)估進(jìn)行圖像級(jí)比較；右側(cè)：WUB采用基于問(wèn)答對(duì)的離線評(píng)估

論文提出兩個(gè)基準(zhǔn)用于評(píng)估網(wǎng)頁(yè)理解和代碼生成能力

WUB: 這個(gè)基準(zhǔn)包含5，990對(duì)高質(zhì)量的問(wèn)答對(duì)，由GPT-4 Vision API基于1，198張網(wǎng)頁(yè)截圖生成(見(jiàn)提示15)，每個(gè)答案要么是"是"要么是"否"。這些圖像來(lái)源廣泛，包括WebSight、Pix2Code、GPT-3.5和人工處理，確保了網(wǎng)頁(yè)內(nèi)容的廣泛代表性。圖10展示了論文用于WUB的定性樣本數(shù)據(jù)。論文通過(guò)比較預(yù)測(cè)答案和真實(shí)答案來(lái)測(cè)試各種多模態(tài)圖像理解模型，最終準(zhǔn)確率作為評(píng)估指標(biāo)，如圖6右側(cè)所示。論文WUB基準(zhǔn)中的定性數(shù)據(jù)示例如圖10所示。

WCGB: 使用與WUB相同的圖像，這個(gè)基準(zhǔn)評(píng)估多模態(tài)模型根據(jù)特定指令從網(wǎng)頁(yè)圖像生成HTML代碼的能力。與傳統(tǒng)的代碼級(jí)評(píng)估不同，這個(gè)基準(zhǔn)在圖像級(jí)別評(píng)估生成網(wǎng)頁(yè)的保真度。論文使用Selenium WebDriver將預(yù)測(cè)的HTML代碼轉(zhuǎn)回圖像，以便與真實(shí)圖像進(jìn)行直接視覺(jué)比較。如圖6左側(cè)所示的評(píng)估考慮了10個(gè)不同方面，這些方面進(jìn)一步使用GPT-4 Vision API分為四個(gè)評(píng)估矩陣。這種圖像級(jí)評(píng)估提供了對(duì)模型代碼生成能力更準(zhǔn)確的衡量，承認(rèn)相同的網(wǎng)頁(yè)可以由不同的代碼構(gòu)建。用于評(píng)估的提示如圖14所示。該框架包括10個(gè)不同的標(biāo)準(zhǔn)，論文將其分為四類，每類包含特定標(biāo)準(zhǔn)，按0-10的尺度評(píng)分，如附錄D節(jié)所示。      

2.3.2 多模態(tài)大語(yǔ)言模型HTML代碼生成的定量評(píng)估

論文使用各種數(shù)據(jù)配置和骨干網(wǎng)絡(luò)評(píng)估了訓(xùn)練模型在論文的WUB和WCGB基準(zhǔn)上的表現(xiàn)。模型在代碼生成基準(zhǔn)上的性能如表3所示，而網(wǎng)頁(yè)理解的結(jié)果如表4所示。

本文轉(zhuǎn)載自?? AI帝國(guó)??，作者： 無(wú)影寺