Web2Code：適用于多模態大模型的大規模網頁轉代碼數據集與評估框架
一、結論寫在前面
論文標題：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/??
多模態大型語言模型（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所示。
本文轉載自?? AI帝國??，作者： 無影寺
