WebSight 資料集與 Sightseer 模型

Hugging Face 已發布 WebSight，一個大規模合成資料集，旨在讓視覺語言模型（VLM）將網站螢幕截圖轉換為功能性 HTML 程式碼。此開發旨在減少開發者將 UI 設計轉換為可運作網站所需的手動工作，並降低非開發者建立網頁介面的門檻。

WebSight：大規模合成 UI 轉換資料集

WebSight 提供大量的螢幕截圖與 HTML 程式碼配對，以訓練 AI 模型將視覺化的網頁設計轉譯為程式碼。透過使用合成資料，該資料集避免了真實 HTML 常見的噪音與複雜性，從而促進更有效的模型學習。

該資料集已透過兩個主要版本演進：

  • WebSight-v0.1：於 2024 年 1 月推出，包含 823,000 組 HTML 程式碼與相應螢幕截圖的配對。
  • WebSight-v0.2：更新版擴增至 200 萬筆範例。此版本在螢幕截圖中加入真實影像，並從傳統 CSS 轉換為 Tailwind CSS。

Sightseer：將螢幕截圖轉換為功能性 HTML

Sightseer 是在 WebSight 資料集上微調的視覺語言模型。該模型能夠以網頁螢幕截圖作為輸入，產生相應的功能性 HTML 程式碼。

除了基本的結構與樣式外，Sightseer 還能在產生的 HTML 中加入與原始輸入螢幕截圖中圖像高度相似的圖片。

對網頁開發與 UI 設計的影響

WebSight 與類似 Sightseer 的模型的可用性指向 UI 開發工作流程的轉變。透過快速將視覺設計（包括紙本 UI 草圖）轉換為功能性程式碼，這些工具能顯著縮短專業開發者的迭代時間。

此外，這項技術讓沒有正式程式設計經驗的個人也能更容易建立功能性網頁介面，展示了視覺語言模型在低程式碼軟體開發中的實用應用。

Sources