多模態(tài)大模型在前端開(kāi)發(fā)領(lǐng)域的應(yīng)用探索
一、大模型生成前端代碼
1.GPT4自動(dòng)生成前端網(wǎng)頁(yè)
GPT4展示了一個(gè)功能，畫一張草圖，并把它拍照發(fā)給GPT-4，GPT-4可以從圖片中提取文字信息并輸出HTML，自動(dòng)生成網(wǎng)站的原型圖。
輸入草圖：
圖片
輸出頁(yè)面代碼：
圖片
2.微調(diào)的必要性
一些開(kāi)源項(xiàng)目基于GPT4做出比較驚艷的效果，例如：
https://github.com/abi/screenshot-to-code
這個(gè)工程可以將屏幕截圖轉(zhuǎn)換為代碼（HTML/Tailwind CSS，或者 React 或 Bootstrap 或 Vue）。它使用 GPT-4 Vision（或 Claude 3）來(lái)生成代碼，并使用 DALL-E 3 來(lái)生成類似外觀的圖像。
我們看下該工程實(shí)際調(diào)用gpt4的提示：
You are an expert Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps
using Tailwind, HTML and JS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).
- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family,
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
In terms of libraries,
- Use this script to include Tailwind: <script src="https://cdn.tailwindcss.com"></script>
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" ></link>
Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.從提示內(nèi)容看：
- 任務(wù)目標(biāo)：根據(jù)輸入的網(wǎng)頁(yè)截圖，生成相應(yīng)的html代碼，盡量和輸入的截圖保持一致
- 細(xì)節(jié)要求：文本內(nèi)容、顏色、背景、字體等盡量精確
- 頁(yè)面中的圖片，在 https://placehold.co上尋找圖片作為圖片組件的placeholder
- 自我修正：可以接收第二張圖片（上一步生成的網(wǎng)頁(yè)），并更新生成的網(wǎng)頁(yè)代碼內(nèi)容，讓他更接近原始截圖輸入
- 引入cdn.tailwindcss.com，從而不需要再生成css代碼
效果比較亮眼，但實(shí)際使用還存在一些問(wèn)題，現(xiàn)有的大模型如GPT4、Gemini等支持的圖片生成前端代碼，大多輸出的是html代碼，但實(shí)際開(kāi)發(fā)中，前端一般會(huì)將UI界面不同粒度的物料組件化，例如搜索框、按鈕這種基礎(chǔ)組件，或者計(jì)時(shí)器、券、視頻、輪播等這種帶有業(yè)務(wù)屬性的組件，又或者更大顆粒度的 UI 區(qū)塊。html代碼可能對(duì)前端開(kāi)發(fā)的用處不大。
二、大模型出現(xiàn)之前的前端代碼生成
其實(shí)在大模型出現(xiàn)之前，就有很多頁(yè)面生成的工作，比如pix2code、Sketch2Code，他們使用深度學(xué)習(xí)技術(shù)實(shí)現(xiàn)從一張 UI 截圖識(shí)別生成 UI 結(jié)構(gòu)描述，然后將 UI 結(jié)構(gòu)描述轉(zhuǎn)成 HTML代碼；
也有一些實(shí)際生產(chǎn)任務(wù)的工作，比如阿里的imgcook可以通過(guò)識(shí)別設(shè)計(jì)稿（Sketch/PSD/圖片）智能生成 React、Vue、Flutter、小程序等不同種類的代碼，并在同年雙 11 大促中自動(dòng)生成了 79.34% 的前端代碼，智能生成代碼不再只是一個(gè)線下實(shí)驗(yàn)產(chǎn)品，而是真正產(chǎn)生了價(jià)值。
圖片
imgcook本質(zhì)是通過(guò)設(shè)計(jì)工具插件從設(shè)計(jì)稿中提取 JSON 描述信息，通過(guò)規(guī)則系統(tǒng)、計(jì)算機(jī)視覺(jué)和機(jī)器學(xué)習(xí)等智能還原技術(shù)對(duì) JSON 進(jìn)行處理和轉(zhuǎn)換，最終得到一個(gè)符合代碼結(jié)構(gòu)和代碼語(yǔ)義的 JSON，再用一個(gè) DSL 轉(zhuǎn)換器，轉(zhuǎn)換為前端代碼。DSL 轉(zhuǎn)換器就是一個(gè) JS 函數(shù)，輸入是一個(gè)JSON，輸出就是我們需要的代碼。例如 React DSL 的輸出就是符合 React 開(kāi)發(fā)規(guī)范的 React 代碼。
imgcook中包含多個(gè)機(jī)器學(xué)習(xí)、圖像識(shí)別、自然語(yǔ)言的AI模型；我們看其中一個(gè)組件識(shí)別的例子；
圖片
如果希望能生成組件粒度的代碼， 需要能識(shí)別視覺(jué)稿中的組件，并且轉(zhuǎn)化成對(duì)應(yīng)的組件化代碼。例如以下視覺(jué)稿中電飯煲位置處是一個(gè)視頻，但從視覺(jué)稿中只能提取到圖片信息，并生成如右側(cè)的代碼。
如何識(shí)別組件類別，有兩種方法，一個(gè)是目標(biāo)檢測(cè)、，另外一個(gè)是圖像分類；
圖片
訓(xùn)練目標(biāo)檢測(cè)模型需要輸入大量樣本，樣本是視覺(jué)稿的整張圖片，并且需要給圖片標(biāo)記你想要模型識(shí)別的組件，訓(xùn)練出可以識(shí)別組件的目標(biāo)檢測(cè)模型，當(dāng)有的新的需要識(shí)別的設(shè)計(jì)稿時(shí)，將設(shè)計(jì)稿圖像輸入給模型識(shí)別，最終得到模型識(shí)別的結(jié)果。
使用目標(biāo)檢測(cè)的方案會(huì)存在一些問(wèn)題：
樣本完全需要人工打標(biāo)，需要收集 UI 圖片，對(duì)圖片中的組件進(jìn)行標(biāo)記。如果要新增一個(gè)分類，需要給每張圖片重新打標(biāo)，打標(biāo)成本很大；
既需要識(shí)別出正確的位置，還需要識(shí)別出正確的類別。視覺(jué)稿圖像中背景是很復(fù)雜的，容易被誤識(shí)別；
就算識(shí)別出的類型是準(zhǔn)確的，也會(huì)有位置偏差。
圖片
imgcook是基于設(shè)計(jì)稿的，因此可以從設(shè)計(jì)稿中獲取圖像的 JSON 描述信息，圖像中每個(gè)文本節(jié)點(diǎn)和圖像節(jié)點(diǎn)都已經(jīng)具備位置信息，并且經(jīng)過(guò) imgcook 智能還原后能生成較為合理的布局樹(shù)。所以我們可以基于這個(gè)布局樹(shù)，以容器節(jié)點(diǎn)為粒度將可能的組件節(jié)點(diǎn)裁剪出來(lái)。
例如我們可以把這里的 div/view 節(jié)點(diǎn)都裁剪出來(lái)，就可以得到一個(gè)小的圖片的集合，然后將這些圖片送給一個(gè)圖片分類模型預(yù)測(cè)，這樣我們把一個(gè)目標(biāo)檢測(cè)問(wèn)題轉(zhuǎn)換成了一個(gè)圖片分類問(wèn)題。
模型會(huì)給每張圖片在每一個(gè)分類中分配一個(gè)概率值，某個(gè)分類的概率值越大表示模型預(yù)測(cè)該圖片是這個(gè)分類的概率越大。我們可以設(shè)置一個(gè)置信度為 0.7，當(dāng)概率值大于置信度 0.7 時(shí)則認(rèn)為是最終分類的結(jié)果，例如上圖中，最終只有兩張圖片是可信的識(shí)別結(jié)果。如果對(duì)分類的準(zhǔn)確度要求很高，就可以將置信度設(shè)置高一點(diǎn)。
相比目標(biāo)檢測(cè)，使用圖片分類方案，樣本可以用程序自動(dòng)生成，無(wú)需人工打標(biāo)；只需要識(shí)別類別，類別準(zhǔn)確則位置信息絕對(duì)準(zhǔn)確。所以我們改用基于布局識(shí)別結(jié)果的圖片分類方案，識(shí)別準(zhǔn)確度大大提升。
三、大模型實(shí)現(xiàn)前端代碼生成的近期工作
介紹一篇最近的大模型在前端代碼生成上的工作
Design2Code: How Far Are We From Automating Front-End Engineering
整體貢獻(xiàn)：
- 提出了前端代碼生成的benchmark，包含484張真實(shí)網(wǎng)頁(yè)數(shù)據(jù)；
- 提出一種前端代碼生成的自動(dòng)評(píng)估方案，包括圖像高級(jí)相似度、細(xì)節(jié)相似度、人工評(píng)價(jià)等；
- 提出提示改進(jìn)的方法，提高大模型在前端代碼生成的效果；
- 微調(diào)design2code-18B模型，效果和gemini相當(dāng)；
數(shù)據(jù)集構(gòu)建：
- 代碼文件中刪除所有注釋，然后應(yīng)用長(zhǎng)度過(guò)濾器來(lái)排除源代碼文件具有超過(guò)10萬(wàn)個(gè)標(biāo)記（基于GPT-2標(biāo)記器）的示例。過(guò)濾所有布局僅由圖像或文本組成的網(wǎng)頁(yè)，布局設(shè)計(jì)過(guò)于簡(jiǎn)單，不適合進(jìn)行基準(zhǔn)測(cè)試。這將在過(guò)濾和重復(fù)數(shù)據(jù)消除后產(chǎn)生14k個(gè)網(wǎng)頁(yè)。
- 剝離了所有此類外部文件依賴項(xiàng)，使所有網(wǎng)頁(yè)獨(dú)立，這包括：刪除所有＜script＞＜audio＞＜iframe＞＜map＞＜svg＞標(biāo)記，刪除所有鏈接到外部網(wǎng)站的＜link＞標(biāo)記，移除＜a＞標(biāo)記中的所有href鏈接，以及移除＜o(jì)bject＞元素中的所有外部文件。圖像和視頻文件，我們將它們替換為占位符文件，在基準(zhǔn)測(cè)試期間，我們將指示模型在適用的地方插入此占位符文件，以保留原始布局。
- 最后一輪手動(dòng)策展過(guò)濾：（1）網(wǎng)頁(yè)沒(méi)有外部文件依賴性，可以從處理后的代碼文件和提供的占位符圖像文件中獨(dú)立呈現(xiàn)。（2） 該網(wǎng)頁(yè)不包含任何私人、敏感或潛在有害信息（例如，我們從約會(huì)網(wǎng)站上刪除了個(gè)人資料頁(yè)面）。（3） 所呈現(xiàn)的網(wǎng)頁(yè)格式良好（例如，不同布局元素之間不應(yīng)存在重疊，并且上述自動(dòng)處理不應(yīng)干擾網(wǎng)頁(yè)設(shè)計(jì)的任何部分）。獲得了484個(gè)測(cè)試示例，作為我們的基準(zhǔn)。
自動(dòng)評(píng)估方案：
- 整體視覺(jué)相似度:利用CLIP模型計(jì)算兩個(gè)網(wǎng)頁(yè)截圖的特征相似度
- 元素匹配度:分別檢測(cè)兩個(gè)網(wǎng)頁(yè)中的視覺(jué)元素,計(jì)算它們的匹配程度
- 文本相似度:比較匹配元素的文本內(nèi)容相似度
- 位置相似度:比較匹配元素的位置坐標(biāo)相似度
- 顏色相似度:比較匹配元素的顏色相似度
提示改進(jìn)：
- 直接prompt:直接將網(wǎng)頁(yè)截圖作為輸入,要求模型生成對(duì)應(yīng)的HTML/CSS代碼。這是最簡(jiǎn)單直接的方式
- 文本增強(qiáng)prompt:在網(wǎng)頁(yè)截圖之外,還將網(wǎng)頁(yè)中的文本內(nèi)容提取出來(lái)一并輸入給模型。這樣可以減輕模型進(jìn)行OCR的負(fù)擔(dān),使其專注于網(wǎng)頁(yè)布局、樣式等方面
- 自我修正prompt:先用文本增強(qiáng)prompt生成初版網(wǎng)頁(yè),再要求模型將其與參考網(wǎng)頁(yè)截圖進(jìn)行比較,找出差異并進(jìn)行自我修正,迭代優(yōu)化。
各個(gè)模型的表現(xiàn)：
圖片
四、結(jié)合低代碼平臺(tái)
低代碼平臺(tái)通過(guò)提供直觀的圖形界面和拖放式組件，使非技術(shù)用戶或開(kāi)發(fā)者能夠輕松地構(gòu)建和部署應(yīng)用程序的前端界面，從而顯著降低了前端開(kāi)發(fā)的技術(shù)門檻和時(shí)間成本。
讓大模型生成低代碼平臺(tái)內(nèi)部的json DSL語(yǔ)法，輸入可以是文本描述，或者網(wǎng)頁(yè)截圖，從而減少拖拉拽的人工操作，應(yīng)該是比較好的結(jié)合點(diǎn)，相比直接生成html文件來(lái)說(shuō)，大模型和低代碼平臺(tái)的結(jié)合可能根據(jù)實(shí)際應(yīng)用價(jià)值。
數(shù)據(jù)樣例：
text：生成一個(gè) amis 表單，包含用戶名、密碼輸入框
DSL:
{
"type": "form",
"title": "表單",
"body": [
{"type": "input-text", "name": "username", "label": "用戶名"},
{"type": "input-password", "name": "password", "label": "密碼"}
]
}image：
圖片
如何獲取數(shù)據(jù)，參考百度低代碼平臺(tái)愛(ài)速搭和大模型結(jié)合的案例：
- 通過(guò)程序化排列組合，比如表單項(xiàng)有很多通用配置項(xiàng)，類似必填、尺寸等，每個(gè)表單項(xiàng)都會(huì)生成一遍，避免了人工重復(fù)編寫。
- 問(wèn)題自動(dòng)擴(kuò)充，比如同一句話可以有不同說(shuō)法，通過(guò)大模型的方式來(lái)擴(kuò)充類似問(wèn)題，可以成倍擴(kuò)充問(wèn)題數(shù)。
- 根據(jù)答案反向生成問(wèn)題，這是參考 Humpback 里的思路，訓(xùn)練一個(gè)反向生成問(wèn)題的模型，然后拿一堆 amis schema 來(lái)反向生成問(wèn)題。
有了數(shù)據(jù)，可以基于多模態(tài)大模型微調(diào)，實(shí)現(xiàn)頁(yè)面截圖到DSL代碼的生成，并且嵌入到低代碼平臺(tái)中，做為輔助編程助手。
