多模態大模型在前端開發領域的應用探索
一、大模型生成前端代碼
1.GPT4自動生成前端網頁
GPT4展示了一個功能，畫一張草圖，并把它拍照發給GPT-4，GPT-4可以從圖片中提取文字信息并輸出HTML，自動生成網站的原型圖。
輸入草圖：
圖片
輸出頁面代碼：
圖片
2.微調的必要性
一些開源項目基于GPT4做出比較驚艷的效果，例如：
https://github.com/abi/screenshot-to-code
這個工程可以將屏幕截圖轉換為代碼（HTML/Tailwind CSS，或者 React 或 Bootstrap 或 Vue）。它使用 GPT-4 Vision（或 Claude 3）來生成代碼，并使用 DALL-E 3 來生成類似外觀的圖像。
我們看下該工程實際調用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.從提示內容看：
- 任務目標：根據輸入的網頁截圖，生成相應的html代碼，盡量和輸入的截圖保持一致
- 細節要求：文本內容、顏色、背景、字體等盡量精確
- 頁面中的圖片，在 https://placehold.co上尋找圖片作為圖片組件的placeholder
- 自我修正：可以接收第二張圖片（上一步生成的網頁），并更新生成的網頁代碼內容，讓他更接近原始截圖輸入
- 引入cdn.tailwindcss.com，從而不需要再生成css代碼
效果比較亮眼，但實際使用還存在一些問題，現有的大模型如GPT4、Gemini等支持的圖片生成前端代碼，大多輸出的是html代碼，但實際開發中，前端一般會將UI界面不同粒度的物料組件化，例如搜索框、按鈕這種基礎組件，或者計時器、券、視頻、輪播等這種帶有業務屬性的組件，又或者更大顆粒度的 UI 區塊。html代碼可能對前端開發的用處不大。
二、大模型出現之前的前端代碼生成
其實在大模型出現之前，就有很多頁面生成的工作，比如pix2code、Sketch2Code，他們使用深度學習技術實現從一張 UI 截圖識別生成 UI 結構描述，然后將 UI 結構描述轉成 HTML代碼；
也有一些實際生產任務的工作，比如阿里的imgcook可以通過識別設計稿（Sketch/PSD/圖片）智能生成 React、Vue、Flutter、小程序等不同種類的代碼，并在同年雙 11 大促中自動生成了 79.34% 的前端代碼，智能生成代碼不再只是一個線下實驗產品，而是真正產生了價值。
圖片
imgcook本質是通過設計工具插件從設計稿中提取 JSON 描述信息，通過規則系統、計算機視覺和機器學習等智能還原技術對 JSON 進行處理和轉換，最終得到一個符合代碼結構和代碼語義的 JSON，再用一個 DSL 轉換器，轉換為前端代碼。DSL 轉換器就是一個 JS 函數，輸入是一個JSON，輸出就是我們需要的代碼。例如 React DSL 的輸出就是符合 React 開發規范的 React 代碼。
imgcook中包含多個機器學習、圖像識別、自然語言的AI模型；我們看其中一個組件識別的例子；
圖片
如果希望能生成組件粒度的代碼， 需要能識別視覺稿中的組件，并且轉化成對應的組件化代碼。例如以下視覺稿中電飯煲位置處是一個視頻，但從視覺稿中只能提取到圖片信息，并生成如右側的代碼。
如何識別組件類別，有兩種方法，一個是目標檢測、，另外一個是圖像分類；
圖片
訓練目標檢測模型需要輸入大量樣本，樣本是視覺稿的整張圖片，并且需要給圖片標記你想要模型識別的組件，訓練出可以識別組件的目標檢測模型，當有的新的需要識別的設計稿時，將設計稿圖像輸入給模型識別，最終得到模型識別的結果。
使用目標檢測的方案會存在一些問題：
樣本完全需要人工打標，需要收集 UI 圖片，對圖片中的組件進行標記。如果要新增一個分類，需要給每張圖片重新打標，打標成本很大；
既需要識別出正確的位置，還需要識別出正確的類別。視覺稿圖像中背景是很復雜的，容易被誤識別；
就算識別出的類型是準確的，也會有位置偏差。
圖片
imgcook是基于設計稿的，因此可以從設計稿中獲取圖像的 JSON 描述信息，圖像中每個文本節點和圖像節點都已經具備位置信息，并且經過 imgcook 智能還原后能生成較為合理的布局樹。所以我們可以基于這個布局樹，以容器節點為粒度將可能的組件節點裁剪出來。
例如我們可以把這里的 div/view 節點都裁剪出來，就可以得到一個小的圖片的集合，然后將這些圖片送給一個圖片分類模型預測，這樣我們把一個目標檢測問題轉換成了一個圖片分類問題。
模型會給每張圖片在每一個分類中分配一個概率值，某個分類的概率值越大表示模型預測該圖片是這個分類的概率越大。我們可以設置一個置信度為 0.7，當概率值大于置信度 0.7 時則認為是最終分類的結果，例如上圖中，最終只有兩張圖片是可信的識別結果。如果對分類的準確度要求很高，就可以將置信度設置高一點。
相比目標檢測，使用圖片分類方案，樣本可以用程序自動生成，無需人工打標；只需要識別類別，類別準確則位置信息絕對準確。所以我們改用基于布局識別結果的圖片分類方案，識別準確度大大提升。
三、大模型實現前端代碼生成的近期工作
介紹一篇最近的大模型在前端代碼生成上的工作
Design2Code: How Far Are We From Automating Front-End Engineering
整體貢獻：
- 提出了前端代碼生成的benchmark，包含484張真實網頁數據；
- 提出一種前端代碼生成的自動評估方案，包括圖像高級相似度、細節相似度、人工評價等；
- 提出提示改進的方法，提高大模型在前端代碼生成的效果；
- 微調design2code-18B模型，效果和gemini相當；
數據集構建：
- 代碼文件中刪除所有注釋，然后應用長度過濾器來排除源代碼文件具有超過10萬個標記（基于GPT-2標記器）的示例。過濾所有布局僅由圖像或文本組成的網頁，布局設計過于簡單，不適合進行基準測試。這將在過濾和重復數據消除后產生14k個網頁。
- 剝離了所有此類外部文件依賴項，使所有網頁獨立，這包括：刪除所有＜script＞＜audio＞＜iframe＞＜map＞＜svg＞標記，刪除所有鏈接到外部網站的＜link＞標記，移除＜a＞標記中的所有href鏈接，以及移除＜object＞元素中的所有外部文件。圖像和視頻文件，我們將它們替換為占位符文件，在基準測試期間，我們將指示模型在適用的地方插入此占位符文件，以保留原始布局。
- 最后一輪手動策展過濾：（1）網頁沒有外部文件依賴性，可以從處理后的代碼文件和提供的占位符圖像文件中獨立呈現。（2） 該網頁不包含任何私人、敏感或潛在有害信息（例如，我們從約會網站上刪除了個人資料頁面）。（3） 所呈現的網頁格式良好（例如，不同布局元素之間不應存在重疊，并且上述自動處理不應干擾網頁設計的任何部分）。獲得了484個測試示例，作為我們的基準。
自動評估方案：
- 整體視覺相似度:利用CLIP模型計算兩個網頁截圖的特征相似度
- 元素匹配度:分別檢測兩個網頁中的視覺元素,計算它們的匹配程度
- 文本相似度:比較匹配元素的文本內容相似度
- 位置相似度:比較匹配元素的位置坐標相似度
- 顏色相似度:比較匹配元素的顏色相似度
提示改進：
- 直接prompt:直接將網頁截圖作為輸入,要求模型生成對應的HTML/CSS代碼。這是最簡單直接的方式
- 文本增強prompt:在網頁截圖之外,還將網頁中的文本內容提取出來一并輸入給模型。這樣可以減輕模型進行OCR的負擔,使其專注于網頁布局、樣式等方面
- 自我修正prompt:先用文本增強prompt生成初版網頁,再要求模型將其與參考網頁截圖進行比較,找出差異并進行自我修正,迭代優化。
各個模型的表現：
圖片
四、結合低代碼平臺
低代碼平臺通過提供直觀的圖形界面和拖放式組件，使非技術用戶或開發者能夠輕松地構建和部署應用程序的前端界面，從而顯著降低了前端開發的技術門檻和時間成本。
讓大模型生成低代碼平臺內部的json DSL語法，輸入可以是文本描述，或者網頁截圖，從而減少拖拉拽的人工操作，應該是比較好的結合點，相比直接生成html文件來說，大模型和低代碼平臺的結合可能根據實際應用價值。
數據樣例：
text：生成一個 amis 表單，包含用戶名、密碼輸入框
DSL:
{
"type": "form",
"title": "表單",
"body": [
{"type": "input-text", "name": "username", "label": "用戶名"},
{"type": "input-password", "name": "password", "label": "密碼"}
]
}image：
圖片
如何獲取數據，參考百度低代碼平臺愛速搭和大模型結合的案例：
- 通過程序化排列組合，比如表單項有很多通用配置項，類似必填、尺寸等，每個表單項都會生成一遍，避免了人工重復編寫。
- 問題自動擴充，比如同一句話可以有不同說法，通過大模型的方式來擴充類似問題，可以成倍擴充問題數。
- 根據答案反向生成問題，這是參考 Humpback 里的思路，訓練一個反向生成問題的模型，然后拿一堆 amis schema 來反向生成問題。
有了數據，可以基于多模態大模型微調，實現頁面截圖到DSL代碼的生成，并且嵌入到低代碼平臺中，做為輔助編程助手。
