這波壓力給到前端。
前端工程師是不是開始慌了？
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 人類評估
該團隊也研究了自動指标與人類配對偏好之間的相關性。結果發現，人類通常更關注高層級的視覺效果和布局，而不是細節内容，這說明人類的思考方式是自上而下的。
不過，針對論文給出的結果，有人提出了不同意見，認爲前端的工作流程遠比表面看上去複雜，因此真正實現「自動化前端工程」還需要一段時間。
對于這個問題，你怎麽看？
