金磊 整理自 投稿
量子位 | 公眾號 QbitAI
現在截圖生成程式碼，已經來到了一個新高度——
⾸個⾯向現代前端程式碼⽣成的多模態⼤模型解決⽅案，來了！
而且是開源的那種。
（注：現代前端程式碼開發具有元件化、狀態管理和資料驅動渲染、開發規範嚴格以及動態互動性強等特點。這些特點相互關聯，共同構成了現代前端開發的複雜體系，對程式碼生成提出了更高要求。如基於React、Vue等框架的開發。）
這個模型叫做Flame，話不多說，直接來看效果。
例如截圖讓AI生成下面這個介面：
Flame模型在“看”完圖片之後，給出來的程式碼是這樣：
不難看出，Flame⽣成程式碼明顯是符合現代前端開發規範的，包括⽐較清晰的外聯樣式以及模組化元件結構。
同時在元件的實現中正確定義了元件的各個狀態、事件響應、以及基於資料的元件動態渲染。
然而，誠如GPT-4o這樣頂尖的SOTA模型，可能也與現代前端開發的核⼼需求背道⽽馳，因為侷限在於端到端復刻設計圖的過程中只能產出靜態元件。
例如同樣的介面，GPT-4o的解法是這樣的：
問題根源在於這類靜態程式碼既⽆法⽀撐模組化架構，也難以⽀撐動態互動。
每個元件都是“⼀次性產物”，任何細微的需求開發和迭代，可能都要開發者開發⼤量定製化程式碼，甚⾄是推倒重來。
那麼Flame模型又是如何解決這個問題的呢？
核心問題：資料稀缺
⼤型視覺語⾔模型（LVLM）在⽣成專業前端程式碼上表現不盡⼈意的根本原因在於資料稀缺。
現代前端開發流程⾮常複雜，⽐如像React這樣的前端框架，強調元件化、狀態管理和資料驅動的渲染⽅式。
這就要求⽣成的程式碼不僅要能⽤，還要符合開發規範，具備動態性和響應性。
然⽽，開源社群中⽀持前端開發的⾼質量影像-⽂本（程式碼）資料集極度稀缺。
像websight這樣的資料集只涉及靜態HTML，不適⽤於現代前端開發。
收集並構建⾼質量的訓練資料⾯臨許多挑戰：
-
如何從公共程式碼庫中提取有效程式碼片段？
-
如何在保持原有程式碼效果的情況下進行渲染？
-
如何⽣成符合⼯程師習慣的⼤量、多樣化資料？
針對這些問題，Flame模型的團隊給出瞭解法就是資料合成。
為提升LVLM在前端程式碼⽣成能⼒，我們設計了⼀整套⾃反思的智慧體⼯作流，⽤於⽣成前端開發場景下的⾼質量資料。
該⼯作流不僅能⾃動從公共程式碼庫中提取真實資料，還能夠⾃主合成數據，⽣成專業、多樣化的前端程式碼。
團隊設計並實現了3種合成⽅法：
基於進化的資料合成（Evolution-Based Synthesis）
借鑑WizardLM的Evol-Instruct⽅法，透過隨機進化⽣成多樣化的程式碼。它採⽤兩種策略：⼴度進化和深度進化。
⼴度進化透過改變程式碼的功能和視覺⻛格，⽣成新變體；深度進化則透過增加程式碼的技術複雜度，最佳化元件處理、狀態管理和效能，提升程式碼的可靠性和可維護性。
透過不斷進化，可以得到⼤量覆蓋不同需求的前端程式碼。
基於瀑布模型的資料合成（Waterfall-Model-Based Synthesis）
模擬傳統軟體開發的瀑布流模型，確保⽣成的程式碼結構清晰、邏輯⼀致。從需求分析開始，推匯出系統功能需求，設計UI佈局和架構，保證程式碼符合現代前端開發的模組化和可擴充套件性要求。
接著，透過多輪迭代，將需求轉化為具體的、可復⽤的前端元件和⻚⾯。這種⽅法⽣成的程式碼邏輯清晰，適合複雜功能的開發任務。
基於增量開發的資料合成（Additive Development Synthesis）
在現有程式碼基礎上，逐步增加功能和複雜性。透過逐步整合狀態管理、互動邏輯或API等功能模組，⽣成的程式碼能更好地滿⾜實際開發需求。
這種⽅法強調逐步提升程式碼的功能和複雜度，確保每次擴充套件都最⼤可能符合最佳實踐。
上述的三種⽅法不僅豐富了資料集的規模和多樣性，還確保了資料質量與實際應⽤價值。
這些⽅法能夠低成本⼤規模合成特定前端框架的圖⽂資料，藉助上述⽅法，Flame團隊針對React框架構建了超過400k的多模態資料集。
同時，基於瀑布模型和增量開發的⽅法還⽀持多圖場景下的資料合成、視覺思維鏈的合成，為更復雜場景下的前端程式碼⽣成提供了更多可能。
Flame：針對前端開發場景的VLM
Flame團隊⼈⼯構建了⼀套包含80道測試題⽬的⾼質量測試集並透過改進後的Pass@k來評測多模態模型的前端程式碼⽣成能⼒。
如果⽣成的程式碼能夠透過編譯驗證、符合編碼規範，並且所渲染出的⻚⾯與輸⼊的設計圖⾜夠相似，則認為該程式碼符合要求。
評測結果顯⽰，當前頂級模型如GPT-4o，Gemini 1.5 Flash因其⽣成程式碼主要為靜態程式碼，嚴重偏離程式碼規範，使其最⾼Pass@1僅為11%，⽽Flame在相同條件下達到了52%+，展現出了極⼤的潛⼒。
同時，同時，Flame僅⽤20w左右的資料量級即取得以上成果，進⼀步驗證了上述資料合成⽅法的價值以及⾼質量資料集在多模態模型能⼒提升中的關鍵作⽤。
△左：測試圖；右：Flame效果圖
值得一提的是，將訓練資料、資料合成流程、模型及測試集已經全⾯開源，感興趣的小夥伴趕緊去看看吧~
GitHub地址：
https://github.com/Flame-Code-VLM/Flame-Code-VLM/blob/main/README.md
學術投稿請於工作日發郵件到：
標題註明【投稿】，告訴我們：
你是誰，從哪來，投稿內容
附上論文/專案主頁連結，以及聯絡方式哦
我們會（儘量）及時回覆你
一鍵關注 
點亮星標
點亮星標一鍵三連「點贊」「轉發」「小心心」
歡迎在評論區留下你的想法！