前端工程師是不是開始慌了？
3 月 9 日央視的一檔節目上，百度創始人、董事長兼 CEO 李彥宏指出，以後不會存在「程式設計師」這種職業了，因為只要會說話，人人都會具備程式設計師的能力。「未來的程式語言只會剩下兩種，一種叫做英文，一種叫做中文。」
自大模型技術突破以來，越來越多的行業擁有了自動化的趨勢，這其中進度最快的領域似乎是軟體開發本身。
根據你的自然語言指令，ChatGPT 這樣的工具可以和你邊聊邊生成程式碼，結果逐漸靠譜且速度很快。在最近多模態技術進步以後，甚至截個圖讓 AI 自行領會意圖也能生成你想要的設計：
這種方法是裝裝樣子還是來真的？AI 距離「替代程式設計師」還有多遠？有研究告訴我們：已經很可怕了。
我們離自動化前端工程還有多遠？
將視覺設計實現成執行功能的程式碼是一項頗具挑戰性的任務，因為這需要理解視覺元素和它們的佈局，然後將它們翻譯成結構化的程式碼。
這個過程需要複雜的技能，也因此讓很多普通人無法構建自己的網路應用，即便他們已經有了非常具體的構建或設計思路。不僅如此，由於這個過程需要不同領域的專業知識，因此往往需要具備不同技能的人互相合作，這就會讓整個網頁構建過程更加複雜，甚至可能導致目標設計與實際實現之間出現偏差。
如果能基於視覺設計有效地自動生成功能性程式碼，那麼勢必有望實現前端網頁應用開發的大眾化，也就是讓非專家人士也能輕鬆快捷地構建應用。
近些年，基於自然語言的程式碼生成領域發展迅速，但少有人研究基於使用者界面（UI）設計來自動生成程式碼實現，原因包括使用者界面存在多樣化的視覺和文字信號、結果程式碼的搜尋空間巨大等。
最近，多模態 LLM 進入了新的發展時代，大規模預訓練模型可以針對多種基於視覺的任務通過處理視覺和文字輸入來生成文字輸出，其中代表性的模型包括 Flamingo、GPT-4V 和 Gemini。
這樣的進展為上述任務帶來了全新的解決方案正規化：取一張使用者網站設計的截圖並將其提供給系統，就能得到完整的程式碼實現，然後這些程式碼又可以被渲染成使用者想要的網頁。整個過程是完全端到端式的。
近日，史丹佛大學、佐治亞理工學院等機構的一個聯合團隊評估了當前的多模態模型在這一任務上的表現。
- 論文標題：Design2Code: How Far Are We From Automating Front-End Engineering?
- 論文地址：https://arxiv.org/pdf/2403.03163.pdf
- 項目主頁：https://salt-nlp.github.io/Design2Code/
他們將這個任務稱為 Design2Code。通過一系列的基準評測，我們可以從這些結果中了解自動化前端工程已經發展到哪一步了。
為了實現系統化和嚴格的基準評測，該團隊為 Design2Code 任務構建了首個真實世界基準。表 1 給出了一些示例。
為了最好地反映真實用例，他們使用了真實世界的網頁，而非用生成方法得到合成網頁。他們收集了 C4 驗證集中的網頁，並對所有樣本進行了仔細的人工調整，最終得到了 484 個高質量、高難度和多樣化的網頁。它們可代表不同複雜度的多種真實世界用例。他們執行了定性和定量分析，證明這個基準資料集覆蓋了廣泛的 HTML 標籤用法、領域和複雜度。
此外，為了促進高效的評估和模型開發，該團隊還為這個任務開發了一些評估指標 —— 可自動比較生成網頁的截圖與給定的截圖輸入。這些新指標考慮的維度很全面，包括邊界框匹配、文字內容、位置和所有已匹配視覺元素的顏色。
然後，該團隊調查了 GPT-4V 和 Gemini 等當前的多模態 LLM 在這一任務上的表現。為了讓這些模型能展現出自己的最優能力，該團隊使用了一些不同的 prompt 設計方案，包括文字增強式 prompt 設計和自我修正式 prompt 設計。其中文字增強式 prompt 設計是為視覺輸入提供文字元素作為補充，從而可以降低光學字符識別（OCR）的任務負載；自我修正式 prompt 設計則是讓模型比較之前的生成結果與輸入的網頁截圖，讓其自我改進。
研究者發現，在 GPT-4V 和 Gemini Pro 上，相比於使用直接 prompt 設計法，文字增強式 prompt 設計都能帶來提升，但自我修正式方法只能為 GPT-4V 帶來積極影響。
儘管這些商用模型的表現是當前最佳的，但它們都是缺乏透明度的黑箱。因此，該團隊還為這一任務貢獻了一個開源的 18B 參數的已微調模型：Design2Code-18B。
具體來說，該模型基於當前最佳的開源模型 CogAgent 構建，並使用合成的 Design2Code 資料進行了微調。令人驚訝的是，在新提出的基準上，儘管合成的訓練資料與真實的測試資料之間存在差異，但這個「小型」開源模型的表現依然頗具競爭力 —— 足以媲美 Gemini Pro Vision。這說明專用型的「小型」開放模型是有發展潛力的，並且模型也可以從合成資料中學習獲取技能。
Design2Code基準
為了得到基準資料，該團隊首先收集了 C4 驗證集中的所有網站連結。然後他們將所有 CSS 程式碼嵌入到了 HTML 檔案中，從而讓每個網頁都只有一個程式碼實現檔案。這樣得到了共計 12.79 萬個網頁。然後他們又執行了進一步的過濾和處理，包括自動調整和人工調節。最終他們得到了包含 484 個測試樣本的基準。下表 1 比較了新提出的 Design2Code 與 Huggingface 的 WebSight 資料集。
圖 2 總結了 Design2Code 的主要主題。
至於評估指標，該團隊提出了一種高層級的視覺相似度指標，即比較參考網頁和生成網頁的相似度。另外他們還使用了一組低層級的元素匹配指標，包括塊元素、位置、文字和顏色等的匹配程度。
結果自動評估和人類評估
自動評估
表 2 和圖 3 給出了自動評估的結果。請注意，這裡的比較並不是公平的，因為不同模型有不同的模型大小和訓練資料。
可以觀察到：
- GPT-4V 在顏色之外的所有維度上都表現最好，而在顏色維度上領先的是 WebSight VLM-8B。
- 對於 GPT-4V 和 Gemini Pro Vision，文字增強式 prompt 設計均可以成功提升塊元素匹配分數和文字相似度分數，這說明提供提取出的文字元素是有用的。
- 對 GPT-4V 而言，自我修正式 prompt 設計可以為塊元素匹配和位置相似度帶來少量提升，但對 Gemini Pro Vision 來說卻並無提升。可能的原因是：在沒有外部反饋的前提下，LLM 執行內部自我校正的能力有限。
- 通過比較 Design2Code-18B 和基礎版本的 CogAgent-18B，可以看出微調能為所有維度帶來顯著提升。
- 相比於 WebSight VLM-8B，該團隊微調得到的 Design2Code-18B 在塊元素匹配和文字相似度指標上表現更好，但在位置相似度和顏色相似度指標上表現更差。
該團隊表示，前兩個觀察可以歸因於更強更大的基礎模型，而後兩個則可歸功於更大量的微調資料。
人類評估
該團隊也進行了人類評估。下面是主要的評估協議和結果。每一個問題都由 5 位人類標註者給出評估意見，最終結果遵從多數意見。
成對模型比較：也就是讓標註者給一對生成的網頁排名（一個來自基線方法，另一個來自受測方法），以決定哪一個與參考網頁更相似。這裡的基線是對 Gemini Pro Vision 採用直接 prompt 設計，收集的資料是其它七種方法與這種基線方法的勝 / 平 / 負的比例。
結果見圖 4，可以看出：
- GPT-4V 顯著優於其它基線，而且文字增強式 prompt 設計和自我修正式 prompt 設計能在直接 prompt 設計的基礎上進一步提升。
- 文字增強式 prompt 設計可以少量提升 Gemini，但進一步增加自我修正方法卻沒有幫助。
- WebSight VLM-8B 優於 Gemini 直接 prompt 設計方法（54% 的勝率和 35% 的敗率），這說明在大量資料上進行微調可以在特定領域比肩商用模型。
- 新模型 Design2Code-18B 的表現與 Gemini Pro Vision 直接 prompt 設計方法相當（38% 的勝率和 37% 的敗率）。
直接評估：儘管有這些比較，但讀者可能還是會問：「我們離自動化前端工程還有多遠？」
為了得到一個更直觀的答案，該團隊進一步讓人類標註者比較了參考網頁與最佳的 AI 生成網頁（使用了 GPT-4V 自我修正式 prompt 設計）。他們從兩個方面進行了直接評估：
1.AI 生成的網頁能否替代原始網頁？
人類標註者認為：AI 生成的網頁中，49% 可與參考網頁互換。
2. 參考網頁和 AI 生成的網頁哪個更好？
結果有點出人意料：在 64% 的案例中，人類標註者更偏愛 GPT-4V 生成的網頁，也就是說他們認為 AI 生成的網頁比原始參考圖像的設計更好！
自動評估 vs 人類評估
該團隊也研究了自動指標與人類配對偏好之間的相關性。結果發現，人類通常更關注高層級的視覺效果和佈局，而不是細節內容，這說明人類的思考方式是自上而下的。
不過，針對論文給出的結果，有人提出了不同意見，認為前端的工作流程遠比表面看上去複雜，因此真正實現「自動化前端工程」還需要一段時間。
對於這個問題，你怎麼看？