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

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

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

項目鏈接：??https://mbzuai-llm.github.io/webpage2code/??

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

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

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

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

?二、論文的簡單介紹

2.1 論文的背景?

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

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

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

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

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

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

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

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

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

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

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

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

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

2.2.1 統(tǒng)計與分析

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

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

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

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

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

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

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

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

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

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

2.3 網(wǎng)頁的新評估框架?

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

2.3.1 HTML代碼生成的評估指標

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

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

論文提出兩個基準用于評估網(wǎng)頁理解和代碼生成能力

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

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

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

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

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