3 月 9 日央視的一檔節(jié)目上，百度創(chuàng)始人、董事長(zhǎng)兼 CEO 李彥宏指出，以后不會(huì)存在「程序員」這種職業(yè)了，因?yàn)橹灰獣?huì)說話，人人都會(huì)具備程序員的能力?！肝磥淼木幊陶Z(yǔ)言只會(huì)剩下兩種，一種叫做英文，一種叫做中文?！?/span>

自大模型技術(shù)突破以來，越來越多的行業(yè)擁有了自動(dòng)化的趨勢(shì)，這其中進(jìn)度最快的領(lǐng)域似乎是軟件開發(fā)本身。

根據(jù)你的自然語(yǔ)言指令，ChatGPT 這樣的工具可以和你邊聊邊生成代碼，結(jié)果逐漸靠譜且速度很快。在最近多模態(tài)技術(shù)進(jìn)步以后，甚至截個(gè)圖讓 AI 自行領(lǐng)會(huì)意圖也能生成你想要的設(shè)計(jì)：

這種方法是裝裝樣子還是來真的？AI 距離「替代程序員」還有多遠(yuǎn)？有研究告訴我們：已經(jīng)很可怕了。

我們離自動(dòng)化前端工程還有多遠(yuǎn)？

將視覺設(shè)計(jì)實(shí)現(xiàn)成執(zhí)行功能的代碼是一項(xiàng)頗具挑戰(zhàn)性的任務(wù)，因?yàn)檫@需要理解視覺元素和它們的布局，然后將它們翻譯成結(jié)構(gòu)化的代碼。

這個(gè)過程需要復(fù)雜的技能，也因此讓很多普通人無法構(gòu)建自己的網(wǎng)絡(luò)應(yīng)用，即便他們已經(jīng)有了非常具體的構(gòu)建或設(shè)計(jì)思路。不僅如此，由于這個(gè)過程需要不同領(lǐng)域的專業(yè)知識(shí)，因此往往需要具備不同技能的人互相合作，這就會(huì)讓整個(gè)網(wǎng)頁(yè)構(gòu)建過程更加復(fù)雜，甚至可能導(dǎo)致目標(biāo)設(shè)計(jì)與實(shí)際實(shí)現(xiàn)之間出現(xiàn)偏差。

如果能基于視覺設(shè)計(jì)有效地自動(dòng)生成功能性代碼，那么勢(shì)必有望實(shí)現(xiàn)前端網(wǎng)頁(yè)應(yīng)用開發(fā)的大眾化，也就是讓非專家人士也能輕松快捷地構(gòu)建應(yīng)用。

近些年，基于自然語(yǔ)言的代碼生成領(lǐng)域發(fā)展迅速，但少有人研究基于用戶界面（UI）設(shè)計(jì)來自動(dòng)生成代碼實(shí)現(xiàn)，原因包括用戶界面存在多樣化的視覺和文本信號(hào)、結(jié)果代碼的搜索空間巨大等。

最近，多模態(tài) LLM 進(jìn)入了新的發(fā)展時(shí)代，大規(guī)模預(yù)訓(xùn)練模型可以針對(duì)多種基于視覺的任務(wù)通過處理視覺和文本輸入來生成文本輸出，其中代表性的模型包括 Flamingo、GPT-4V 和 Gemini。

這樣的進(jìn)展為上述任務(wù)帶來了全新的解決方案范式：取一張用戶網(wǎng)站設(shè)計(jì)的截圖并將其提供給系統(tǒng)，就能得到完整的代碼實(shí)現(xiàn)，然后這些代碼又可以被渲染成用戶想要的網(wǎng)頁(yè)。整個(gè)過程是完全端到端式的。

近日，斯坦福大學(xué)、佐治亞理工學(xué)院等機(jī)構(gòu)的一個(gè)聯(lián)合團(tuán)隊(duì)評(píng)估了當(dāng)前的多模態(tài)模型在這一任務(wù)上的表現(xiàn)。

• 論文標(biāo)題：Design2Code: How Far Are We From Automating Front-End Engineering?
• 論文地址：https://arxiv.org/pdf/2403.03163.pdf
• 項(xiàng)目主頁(yè)：https://salt-nlp.github.io/Design2Code/

他們將這個(gè)任務(wù)稱為 Design2Code。通過一系列的基準(zhǔn)評(píng)測(cè)，我們可以從這些結(jié)果中了解自動(dòng)化前端工程已經(jīng)發(fā)展到哪一步了。

為了實(shí)現(xiàn)系統(tǒng)化和嚴(yán)格的基準(zhǔn)評(píng)測(cè)，該團(tuán)隊(duì)為 Design2Code 任務(wù)構(gòu)建了首個(gè)真實(shí)世界基準(zhǔn)。表 1 給出了一些示例。

為了最好地反映真實(shí)用例，他們使用了真實(shí)世界的網(wǎng)頁(yè)，而非用生成方法得到合成網(wǎng)頁(yè)。他們收集了 C4 驗(yàn)證集中的網(wǎng)頁(yè)，并對(duì)所有樣本進(jìn)行了仔細(xì)的人工調(diào)整，最終得到了 484 個(gè)高質(zhì)量、高難度和多樣化的網(wǎng)頁(yè)。它們可代表不同復(fù)雜度的多種真實(shí)世界用例。他們執(zhí)行了定性和定量分析，證明這個(gè)基準(zhǔn)數(shù)據(jù)集覆蓋了廣泛的 HTML 標(biāo)簽用法、領(lǐng)域和復(fù)雜度。

此外，為了促進(jìn)高效的評(píng)估和模型開發(fā)，該團(tuán)隊(duì)還為這個(gè)任務(wù)開發(fā)了一些評(píng)估指標(biāo) —— 可自動(dòng)比較生成網(wǎng)頁(yè)的截圖與給定的截圖輸入。這些新指標(biāo)考慮的維度很全面，包括邊界框匹配、文本內(nèi)容、位置和所有已匹配視覺元素的顏色。

然后，該團(tuán)隊(duì)調(diào)查了 GPT-4V 和 Gemini 等當(dāng)前的多模態(tài) LLM 在這一任務(wù)上的表現(xiàn)。為了讓這些模型能展現(xiàn)出自己的最優(yōu)能力，該團(tuán)隊(duì)使用了一些不同的 prompt 設(shè)計(jì)方案，包括文本增強(qiáng)式 prompt 設(shè)計(jì)和自我修正式 prompt 設(shè)計(jì)。其中文本增強(qiáng)式 prompt 設(shè)計(jì)是為視覺輸入提供文本元素作為補(bǔ)充，從而可以降低光學(xué)字符識(shí)別（OCR）的任務(wù)負(fù)載；自我修正式 prompt 設(shè)計(jì)則是讓模型比較之前的生成結(jié)果與輸入的網(wǎng)頁(yè)截圖，讓其自我改進(jìn)。

研究者發(fā)現(xiàn)，在 GPT-4V 和 Gemini Pro 上，相比于使用直接 prompt 設(shè)計(jì)法，文本增強(qiáng)式 prompt 設(shè)計(jì)都能帶來提升，但自我修正式方法只能為 GPT-4V 帶來積極影響。

盡管這些商用模型的表現(xiàn)是當(dāng)前最佳的，但它們都是缺乏透明度的黑箱。因此，該團(tuán)隊(duì)還為這一任務(wù)貢獻(xiàn)了一個(gè)開源的 18B 參數(shù)的已微調(diào)模型：Design2Code-18B。

具體來說，該模型基于當(dāng)前最佳的開源模型 CogAgent 構(gòu)建，并使用合成的 Design2Code 數(shù)據(jù)進(jìn)行了微調(diào)。令人驚訝的是，在新提出的基準(zhǔn)上，盡管合成的訓(xùn)練數(shù)據(jù)與真實(shí)的測(cè)試數(shù)據(jù)之間存在差異，但這個(gè)「小型」開源模型的表現(xiàn)依然頗具競(jìng)爭(zhēng)力 —— 足以媲美 Gemini Pro Vision。這說明專用型的「小型」開放模型是有發(fā)展?jié)摿Φ?，并且模型也可以從合成?shù)據(jù)中學(xué)習(xí)獲取技能。

Design2Code 基準(zhǔn)

為了得到基準(zhǔn)數(shù)據(jù)，該團(tuán)隊(duì)首先收集了 C4 驗(yàn)證集中的所有網(wǎng)站鏈接。然后他們將所有 CSS 代碼嵌入到了 HTML 文件中，從而讓每個(gè)網(wǎng)頁(yè)都只有一個(gè)代碼實(shí)現(xiàn)文件。這樣得到了共計(jì) 12.79 萬個(gè)網(wǎng)頁(yè)。然后他們又執(zhí)行了進(jìn)一步的過濾和處理，包括自動(dòng)調(diào)整和人工調(diào)節(jié)。最終他們得到了包含 484 個(gè)測(cè)試樣本的基準(zhǔn)。下表 1 比較了新提出的 Design2Code 與 Huggingface 的 WebSight 數(shù)據(jù)集。

圖 2 總結(jié)了 Design2Code 的主要主題。

至于評(píng)估指標(biāo)，該團(tuán)隊(duì)提出了一種高層級(jí)的視覺相似度指標(biāo)，即比較參考網(wǎng)頁(yè)和生成網(wǎng)頁(yè)的相似度。另外他們還使用了一組低層級(jí)的元素匹配指標(biāo)，包括塊元素、位置、文本和顏色等的匹配程度。

結(jié)果自動(dòng)評(píng)估和人類評(píng)估

自動(dòng)評(píng)估

表 2 和圖 3 給出了自動(dòng)評(píng)估的結(jié)果。請(qǐng)注意，這里的比較并不是公平的，因?yàn)椴煌Ｐ陀胁煌哪Ｐ痛笮『陀?xùn)練數(shù)據(jù)。

可以觀察到：

• GPT-4V 在顏色之外的所有維度上都表現(xiàn)最好，而在顏色維度上領(lǐng)先的是 WebSight VLM-8B。
• 對(duì)于 GPT-4V 和 Gemini Pro Vision，文本增強(qiáng)式 prompt 設(shè)計(jì)均可以成功提升塊元素匹配分?jǐn)?shù)和文本相似度分?jǐn)?shù)，這說明提供提取出的文本元素是有用的。
• 對(duì) GPT-4V 而言，自我修正式 prompt 設(shè)計(jì)可以為塊元素匹配和位置相似度帶來少量提升，但對(duì) Gemini Pro Vision 來說卻并無提升?？赡艿脑蚴牵涸跊]有外部反饋的前提下，LLM 執(zhí)行內(nèi)部自我校正的能力有限。
• 通過比較 Design2Code-18B 和基礎(chǔ)版本的 CogAgent-18B，可以看出微調(diào)能為所有維度帶來顯著提升。
• 相比于 WebSight VLM-8B，該團(tuán)隊(duì)微調(diào)得到的 Design2Code-18B 在塊元素匹配和文本相似度指標(biāo)上表現(xiàn)更好，但在位置相似度和顏色相似度指標(biāo)上表現(xiàn)更差。

該團(tuán)隊(duì)表示，前兩個(gè)觀察可以歸因于更強(qiáng)更大的基礎(chǔ)模型，而后兩個(gè)則可歸功于更大量的微調(diào)數(shù)據(jù)。

人類評(píng)估

該團(tuán)隊(duì)也進(jìn)行了人類評(píng)估。下面是主要的評(píng)估協(xié)議和結(jié)果。每一個(gè)問題都由 5 位人類標(biāo)注者給出評(píng)估意見，最終結(jié)果遵從多數(shù)意見。

成對(duì)模型比較：也就是讓標(biāo)注者給一對(duì)生成的網(wǎng)頁(yè)排名（一個(gè)來自基線方法，另一個(gè)來自受測(cè)方法），以決定哪一個(gè)與參考網(wǎng)頁(yè)更相似。這里的基線是對(duì) Gemini Pro Vision 采用直接 prompt 設(shè)計(jì)，收集的數(shù)據(jù)是其它七種方法與這種基線方法的勝 / 平 / 負(fù)的比例。

結(jié)果見圖 4，可以看出：

• GPT-4V 顯著優(yōu)于其它基線，而且文本增強(qiáng)式 prompt 設(shè)計(jì)和自我修正式 prompt 設(shè)計(jì)能在直接 prompt 設(shè)計(jì)的基礎(chǔ)上進(jìn)一步提升。
• 文本增強(qiáng)式 prompt 設(shè)計(jì)可以少量提升 Gemini，但進(jìn)一步增加自我修正方法卻沒有幫助。
• WebSight VLM-8B 優(yōu)于 Gemini 直接 prompt 設(shè)計(jì)方法（54% 的勝率和 35% 的敗率），這說明在大量數(shù)據(jù)上進(jìn)行微調(diào)可以在特定領(lǐng)域比肩商用模型。
• 新模型 Design2Code-18B 的表現(xiàn)與 Gemini Pro Vision 直接 prompt 設(shè)計(jì)方法相當(dāng)（38% 的勝率和 37% 的敗率）。

直接評(píng)估：盡管有這些比較，但讀者可能還是會(huì)問：「我們離自動(dòng)化前端工程還有多遠(yuǎn)？」

為了得到一個(gè)更直觀的答案，該團(tuán)隊(duì)進(jìn)一步讓人類標(biāo)注者比較了參考網(wǎng)頁(yè)與最佳的 AI 生成網(wǎng)頁(yè)（使用了 GPT-4V 自我修正式 prompt 設(shè)計(jì)）。他們從兩個(gè)方面進(jìn)行了直接評(píng)估：

1.AI 生成的網(wǎng)頁(yè)能否替代原始網(wǎng)頁(yè)？

人類標(biāo)注者認(rèn)為：AI 生成的網(wǎng)頁(yè)中，49% 可與參考網(wǎng)頁(yè)互換。

2. 參考網(wǎng)頁(yè)和 AI 生成的網(wǎng)頁(yè)哪個(gè)更好？

結(jié)果有點(diǎn)出人意料：在 64% 的案例中，人類標(biāo)注者更偏愛 GPT-4V 生成的網(wǎng)頁(yè)，也就是說他們認(rèn)為 AI 生成的網(wǎng)頁(yè)比原始參考圖像的設(shè)計(jì)更好！

自動(dòng)評(píng)估 vs 人類評(píng)估

該團(tuán)隊(duì)也研究了自動(dòng)指標(biāo)與人類配對(duì)偏好之間的相關(guān)性。結(jié)果發(fā)現(xiàn)，人類通常更關(guān)注高層級(jí)的視覺效果和布局，而不是細(xì)節(jié)內(nèi)容，這說明人類的思考方式是自上而下的。

不過，針對(duì)論文給出的結(jié)果，有人提出了不同意見，認(rèn)為前端的工作流程遠(yuǎn)比表面看上去復(fù)雜，因此真正實(shí)現(xiàn)「自動(dòng)化前端工程」還需要一段時(shí)間。

對(duì)于這個(gè)問題，你怎么看？