3 月 9 日央視的一檔節(jié)目上，百度創(chuàng)始人、董事長(zhǎng)兼 CEO 李彥宏指出，以后不會(huì)存在「程序員」這種職業(yè)了，因?yàn)橹灰獣?huì)說(shuō)話，人人都會(huì)具備程序員的能力?！肝磥?lái)的編程語(yǔ)言只會(huì)剩下兩種，一種叫做英文，一種叫做中文?！?/p>
自大模型技術(shù)突破以來(lái)，越來(lái)越多的行業(yè)擁有了自動(dòng)化的趨勢(shì)，這其中進(jìn)度最快的領(lǐng)域似乎是軟件開(kāi)發(fā)本身。
根據(jù)你的自然語(yǔ)言指令，ChatGPT 這樣的工具可以和你邊聊邊生成代碼，結(jié)果逐漸靠譜且速度很快。在最近多模態(tài)技術(shù)進(jìn)步以后，甚至截個(gè)圖讓 AI 自行領(lǐng)會(huì)意圖也能生成你想要的設(shè)計(jì)：
這種方法是裝裝樣子還是來(lái)真的？AI 距離「替代程序員」還有多遠(yuǎn)？有研究告訴我們：已經(jīng)很可怕了。
我們離自動(dòng)化前端工程還有多遠(yuǎn)？
將視覺(jué)設(shè)計(jì)實(shí)現(xiàn)成執(zhí)行功能的代碼是一項(xiàng)頗具挑戰(zhàn)性的任務(wù)，因?yàn)檫@需要理解視覺(jué)元素和它們的布局，然后將它們翻譯成結(jié)構(gòu)化的代碼。
這個(gè)過(guò)程需要復(fù)雜的技能，也因此讓很多普通人無(wú)法構(gòu)建自己的網(wǎng)絡(luò)應(yīng)用，即便他們已經(jīng)有了非常具體的構(gòu)建或設(shè)計(jì)思路。不僅如此，由于這個(gè)過(guò)程需要不同領(lǐng)域的專(zhuān)業(yè)知識(shí)，因此往往需要具備不同技能的人互相合作，這就會(huì)讓整個(gè)網(wǎng)頁(yè)構(gòu)建過(guò)程更加復(fù)雜，甚至可能導(dǎo)致目標(biāo)設(shè)計(jì)與實(shí)際實(shí)現(xiàn)之間出現(xiàn)偏差。
如果能基于視覺(jué)設(shè)計(jì)有效地自動(dòng)生成功能性代碼，那么勢(shì)必有望實(shí)現(xiàn)前端網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)的大眾化，也就是讓非專(zhuān)家人士也能輕松快捷地構(gòu)建應(yīng)用。
近些年，基于自然語(yǔ)言的代碼生成領(lǐng)域發(fā)展迅速，但少有人研究基于用戶界面（UI）設(shè)計(jì)來(lái)自動(dòng)生成代碼實(shí)現(xiàn)，原因包括用戶界面存在多樣化的視覺(jué)和文本信號(hào)、結(jié)果代碼的搜索空間巨大等。
最近，多模態(tài) LLM 進(jìn)入了新的發(fā)展時(shí)代，大規(guī)模預(yù)訓(xùn)練模型可以針對(duì)多種基于視覺(jué)的任務(wù)通過(guò)處理視覺(jué)和文本輸入來(lái)生成文本輸出，其中代表性的模型包括 Flamingo、GPT-4V 和 Gemini。
這樣的進(jìn)展為上述任務(wù)帶來(lái)了全新的解決方案范式：取一張用戶網(wǎng)站設(shè)計(jì)的截圖并將其提供給系統(tǒng)，就能得到完整的代碼實(shí)現(xiàn)，然后這些代碼又可以被渲染成用戶想要的網(wǎng)頁(yè)。整個(gè)過(guò)程是完全端到端式的。
近日，斯坦福大學(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ù)稱(chēng)為 Design2Code。通過(guò)一系列的基準(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)估和模型開(kāi)發(fā)，該團(tuán)隊(duì)還為這個(gè)任務(wù)開(kāi)發(fā)了一些評(píng)估指標(biāo) —— 可自動(dòng)比較生成網(wǎng)頁(yè)的截圖與給定的截圖輸入。這些新指標(biāo)考慮的維度很全面，包括邊界框匹配、文本內(nèi)容、位置和所有已匹配視覺(jué)元素的顏色。
然后，該團(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ì)是為視覺(jué)輸入提供文本元素作為補(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ì)都能帶來(lái)提升，但自我修正式方法只能為 GPT-4V 帶來(lái)積極影響。
盡管這些商用模型的表現(xiàn)是當(dāng)前最佳的，但它們都是缺乏透明度的黑箱。因此，該團(tuán)隊(duì)還為這一任務(wù)貢獻(xiàn)了一個(gè)開(kāi)源的 18B 參數(shù)的已微調(diào)模型：Design2Code-18B。
具體來(lái)說(shuō)，該模型基于當(dāng)前最佳的開(kāi)源模型 CogAgent 構(gòu)建，并使用合成的 Design2Code 數(shù)據(jù)進(jìn)行了微調(diào)。令人驚訝的是，在新提出的基準(zhǔn)上，盡管合成的訓(xùn)練數(shù)據(jù)與真實(shí)的測(cè)試數(shù)據(jù)之間存在差異，但這個(gè)「小型」開(kāi)源模型的表現(xiàn)依然頗具競(jìng)爭(zhēng)力 —— 足以媲美 Gemini Pro Vision。這說(shuō)明專(zhuān)用型的「小型」開(kāi)放模型是有發(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 萬(wàn)個(gè)網(wǎng)頁(yè)。然后他們又執(zhí)行了進(jìn)一步的過(guò)濾和處理，包括自動(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í)的視覺(jué)相似度指標(biāo)，即比較參考網(wǎng)頁(yè)和生成網(wǎng)頁(yè)的相似度。另外他們還使用了一組低層級(jí)的元素匹配指標(biāo)，包括塊元素、位置、文本和顏色等的匹配程度。
結(jié)果自動(dòng)評(píng)估和人類(lèi)評(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ù)，這說(shuō)明提供提取出的文本元素是有用的。
- 對(duì) GPT-4V 而言，自我修正式 prompt 設(shè)計(jì)可以為塊元素匹配和位置相似度帶來(lái)少量提升，但對(duì) Gemini Pro Vision 來(lái)說(shuō)卻并無(wú)提升?？赡艿脑蚴牵涸跊](méi)有外部反饋的前提下，LLM 執(zhí)行內(nèi)部自我校正的能力有限。
- 通過(guò)比較 Design2Code-18B 和基礎(chǔ)版本的 CogAgent-18B，可以看出微調(diào)能為所有維度帶來(lái)顯著提升。
- 相比于 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ù)。
人類(lèi)評(píng)估
該團(tuán)隊(duì)也進(jìn)行了人類(lèi)評(píng)估。下面是主要的評(píng)估協(xié)議和結(jié)果。每一個(gè)問(wèn)題都由 5 位人類(lèi)標(biāo)注者給出評(píng)估意見(jiàn)，最終結(jié)果遵從多數(shù)意見(jiàn)。
成對(duì)模型比較：也就是讓標(biāo)注者給一對(duì)生成的網(wǎng)頁(yè)排名（一個(gè)來(lái)自基線方法，另一個(gè)來(lái)自受測(cè)方法），以決定哪一個(gè)與參考網(wǎng)頁(yè)更相似。這里的基線是對(duì) Gemini Pro Vision 采用直接 prompt 設(shè)計(jì)，收集的數(shù)據(jù)是其它七種方法與這種基線方法的勝 / 平 / 負(fù)的比例。
結(jié)果見(jiàn)圖 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)一步增加自我修正方法卻沒(méi)有幫助。
- WebSight VLM-8B 優(yōu)于 Gemini 直接 prompt 設(shè)計(jì)方法（54% 的勝率和 35% 的敗率），這說(shuō)明在大量數(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ì)問(wèn)：「我們離自動(dòng)化前端工程還有多遠(yuǎn)？」
為了得到一個(gè)更直觀的答案，該團(tuán)隊(duì)進(jìn)一步讓人類(lèi)標(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è)？
人類(lèi)標(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% 的案例中，人類(lèi)標(biāo)注者更偏愛(ài) GPT-4V 生成的網(wǎng)頁(yè)，也就是說(shuō)他們認(rèn)為 AI 生成的網(wǎng)頁(yè)比原始參考圖像的設(shè)計(jì)更好！
自動(dòng)評(píng)估 vs 人類(lèi)評(píng)估
該團(tuán)隊(duì)也研究了自動(dòng)指標(biāo)與人類(lèi)配對(duì)偏好之間的相關(guān)性。結(jié)果發(fā)現(xiàn)，人類(lèi)通常更關(guān)注高層級(jí)的視覺(jué)效果和布局，而不是細(xì)節(jié)內(nèi)容，這說(shuō)明人類(lèi)的思考方式是自上而下的。
不過(guò)，針對(duì)論文給出的結(jié)果，有人提出了不同意見(jiàn)，認(rèn)為前端的工作流程遠(yuǎn)比表面看上去復(fù)雜，因此真正實(shí)現(xiàn)「自動(dòng)化前端工程」還需要一段時(shí)間。
對(duì)于這個(gè)問(wèn)題，你怎么看？
