從螢幕截圖到 HTML 程式碼：WebSight 資料集介紹
在 Web 開發領域，將設計稿轉化為功能性網站通常需要大量的編碼和仔細的測試。如果我們能簡化這個過程，讓網頁設計能更輕鬆、更快速地轉換成可用的網站，那會怎麼樣呢？WebSight 是一個新的資料集，旨在構建能夠將螢幕截圖轉換為 HTML 程式碼的人工智慧系統。
挑戰
將網站設計或螢幕截圖轉換成 HTML 程式碼通常需要經驗豐富的開發人員。但如果這個過程能更高效呢？受此問題的啟發，我們研究瞭如何利用視覺語言模型（VLM）進行 Web 開發，以建立提高效率的低程式碼解決方案。
如今，實現這一目標的主要挑戰是缺乏為這項任務量身定製的高質量資料集。WebSight 旨在填補這一空白。
WebSight：一個大型的螢幕截圖/HTML 程式碼對合成資料集
在 2024 年 1 月，我們推出了 WebSight-v0.1，這是一個包含 82.3 萬對 HTML 程式碼及其對應螢幕截圖的合成數據集。該資料集旨在訓練 AI 模型處理視覺網頁設計並將其轉換為功能性 HTML 程式碼。透過專注於合成數據，我們成功繞過了真實世界 HTML 中常見的噪音和複雜性，使 AI 模型能夠高效學習。
根據我們最初的釋出和社群的反饋，我們將資料集更新到 WebSight-v0.2，並引入了重大改進。這些改進包括在螢幕截圖中使用了真實影像，以及切換到 Tailwind CSS（而不是傳統的 CSS）。我們進一步將資料集擴充套件到了 200 萬個樣本。
Sightseer：一個在 WebSight 上微調的模型
利用 WebSight 資料集，我們對即將推出的基礎視覺語言模型進行了微調，得到了 Sightseer，這是一個能夠將網頁螢幕截圖轉換為功能性 HTML 程式碼的模型。Sightseer 還展示了將與原始螢幕截圖非常相似的影像整合到生成的 HTML 中的能力。
邁向由視覺語言模型解鎖的更強大工具
透過對 WebSight 的迭代，我們的目標是構建更強大的 AI 系統，以簡化將 UI 設計轉換為功能程式碼的過程。這可以透過將紙上的 UI 草圖快速轉換為功能程式碼來縮短開發人員的迭代時間，同時讓非開發人員也更容易接觸到這個過程。這是視覺語言模型的眾多實際應用之一。透過開源 WebSight，我們鼓勵社群與我們合作，共同構建更強大的 UI 開發工具。
