現在(zài)截圖生成代碼，已經來(lái)到(dào)了(le／liǎo)一(yī / yì ／yí)個(gè)新高度——

⾸個(gè)⾯向現代前端代碼⽣成的(de)多模态⼤模型解決⽅案，來(lái)了(le／liǎo)！

而(ér)且是(shì)開源的(de)那種。

（注：現代前端代碼開發具有組件化、狀态管理和(hé / huò)數據驅動渲染、開發規範嚴格以(yǐ)及動态交互性強等特點。這(zhè)些特點相互關聯，共同構成了(le／liǎo)現代前端開發的(de)複雜體系，對代碼生成提出(chū)了(le／liǎo)更高要(yào / yāo)求。如基于(yú)React、Vue等框架的(de)開發。）

這(zhè)個(gè)模型叫做Flame，話不(bù)多說(shuō)，直接來(lái)看效果。

例如截圖讓AI生成下面這(zhè)個(gè)界面：

Flame模型在(zài)“看”完圖片之(zhī)後，給出(chū)來(lái)的(de)代碼是(shì)這(zhè)樣：

不(bù)難看出(chū)，Flame⽣成代碼明顯是(shì)符合現代前端開發規範的(de)，包括⽐較清晰的(de)外聯樣式以(yǐ)及模塊化組件結構。

同時(shí)在(zài)組件的(de)實現中正确定義了(le／liǎo)組件的(de)各個(gè)狀态、事件響應、以(yǐ)及基于(yú)數據的(de)組件動态渲染。

然而(ér)，誠如GPT-4o這(zhè)樣頂尖的(de)SOTA模型，可能也(yě)與現代前端開發的(de)核⼼需求背道(dào)⽽馳，因爲(wéi / wèi)局限在(zài)于(yú)端到(dào)端複刻設計圖的(de)過程中隻能産出(chū)靜态組件。

例如同樣的(de)界面，GPT-4o的(de)解法是(shì)這(zhè)樣的(de)：

問題根源在(zài)于(yú)這(zhè)類靜态代碼既⽆法⽀撐模塊化架構，也(yě)難以(yǐ)⽀撐動态交互。

每個(gè)組件都是(shì)“⼀次性産物”，任何細微的(de)需求開發和(hé / huò)叠代，可能都要(yào / yāo)開發者開發⼤量定制化代碼，甚⾄是(shì)推倒重來(lái)。

那麽Flame模型又是(shì)如何解決這(zhè)個(gè)問題的(de)呢？

核心問題：數據稀缺

⼤型視覺語⾔模型（LVLM）在(zài)⽣成專業前端代碼上(shàng)表現不(bù)盡⼈意的(de)根本原因在(zài)于(yú)數據稀缺。

現代前端開發流程⾮常複雜，⽐如像React這(zhè)樣的(de)前端框架，強調組件化、狀态管理和(hé / huò)數據驅動的(de)渲染⽅式。

這(zhè)就(jiù)要(yào / yāo)求⽣成的(de)代碼不(bù)僅要(yào / yāo)能⽤，還要(yào / yāo)符合開發規範，具備動态性和(hé / huò)響應性。

然⽽，開源社區中⽀持前端開發的(de)⾼質量圖像-⽂本（代碼）數據集極度稀缺。

像websight這(zhè)樣的(de)數據集隻涉及靜态HTML，不(bù)适⽤于(yú)現代前端開發。

收集并構建⾼質量的(de)訓練數據⾯臨許多挑戰：

如何從公共代碼庫中提取有效代碼片段？如何在(zài)保持原有代碼效果的(de)情況下進行渲染？如何⽣成符合⼯程師習慣的(de)⼤量、多樣化數據？

針對這(zhè)些問題，Flame模型的(de)團隊給出(chū)了(le／liǎo)解法就(jiù)是(shì)數據合成。

爲(wéi / wèi)提升LVLM在(zài)前端代碼⽣成能⼒，我們設計了(le／liǎo)⼀整套⾃反思的(de)智能體⼯作流，⽤于(yú)⽣成前端開發場景下的(de)⾼質量數據。

該⼯作流不(bù)僅能⾃動從公共代碼庫中提取真實數據，還能夠⾃主合成數據，⽣成專業、多樣化的(de)前端代碼。

團隊設計并實現了(le／liǎo)3種合成⽅法：

基于(yú)進化的(de)數據合成（Evolution-Based Synthesis）

借鑒WizardLM的(de)Evol-Instruct⽅法，通過随機進化⽣成多樣化的(de)代碼。它采⽤兩種策略：⼴度進化和(hé / huò)深度進化。

⼴度進化通過改變代碼的(de)功能和(hé / huò)視覺⻛格，⽣成新變體；深度進化則通過增加代碼的(de)技術複雜度，優化組件處理、狀态管理和(hé / huò)性能，提升代碼的(de)可靠性和(hé / huò)可維護性。

通過不(bù)斷進化，可以(yǐ)得到(dào)⼤量覆蓋不(bù)同需求的(de)前端代碼。

基于(yú)瀑布模型的(de)數據合成（Waterfall-Model-Based Synthesis）

模拟傳統軟件開發的(de)瀑布流模型，确保⽣成的(de)代碼結構清晰、邏輯⼀緻。從需求分析開始，推導出(chū)系統功能需求，設計UI布局和(hé / huò)架構，保證代碼符合現代前端開發的(de)模塊化和(hé / huò)可擴展性要(yào / yāo)求。

接着，通過多輪叠代，将需求轉化爲(wéi / wèi)具體的(de)、可複⽤的(de)前端組件和(hé / huò)⻚⾯。這(zhè)種⽅法⽣成的(de)代碼邏輯清晰，适合複雜功能的(de)開發任務。

基于(yú)增量開發的(de)數據合成（Additive Development Synthesis）

在(zài)現有代碼基礎上(shàng)，逐步增加功能和(hé / huò)複雜性。通過逐步集成狀态管理、交互邏輯或API等功能模塊，⽣成的(de)代碼能更好地(dì / de)滿⾜實際開發需求。

這(zhè)種⽅法強調逐步提升代碼的(de)功能和(hé / huò)複雜度，确保每次擴展都最⼤可能符合最佳實踐。

上(shàng)述的(de)三種⽅法不(bù)僅豐富了(le／liǎo)數據集的(de)規模和(hé / huò)多樣性，還确保了(le／liǎo)數據質量與實際應⽤價值。

這(zhè)些⽅法能夠低成本⼤規模合成特定前端框架的(de)圖⽂數據，借助上(shàng)述⽅法，Flame團隊針對React框架構建了(le／liǎo)超過400k的(de)多模态數據集。

同時(shí)，基于(yú)瀑布模型和(hé / huò)增量開發的(de)⽅法還⽀持多圖場景下的(de)數據合成、視覺思維鏈的(de)合成，爲(wéi / wèi)更複雜場景下的(de)前端代碼⽣成提供了(le／liǎo)更多可能。

Flame：針對前端開發場景的(de)VLM

Flame團隊⼈⼯構建了(le／liǎo)⼀套包含80道(dào)測試題⽬的(de)⾼質量測試集并通過改進後的(de)Pass@k來(lái)評測多模态模型的(de)前端代碼⽣成能⼒。

如果⽣成的(de)代碼能夠通過編譯驗證、符合編碼規範，并且所渲染出(chū)的(de)⻚⾯與輸⼊的(de)設計圖⾜夠相似，則認爲(wéi / wèi)該代碼符合要(yào / yāo)求。

評測結果顯⽰，當前頂級模型如GPT-4o，Gemini 1.5 Flash因其⽣成代碼主要(yào / yāo)爲(wéi / wèi)靜态代碼，嚴重偏離代碼規範，使其最⾼Pass@1僅爲(wéi / wèi)11%，⽽Flame在(zài)相同條件下達到(dào)了(le／liǎo)52%+，展現出(chū)了(le／liǎo)極⼤的(de)潛⼒。

同時(shí)，同時(shí)，Flame僅⽤20w左右的(de)數據量級即取得以(yǐ)上(shàng)成果，進⼀步驗證了(le／liǎo)上(shàng)述數據合成⽅法的(de)價值以(yǐ)及⾼質量數據集在(zài)多模态模型能⼒提升中的(de)關鍵作⽤。

值得一(yī / yì ／yí)提的(de)是(shì)，将訓練數據、數據合成流程、模型及測試集已經全⾯開源，感興趣的(de)小夥伴趕緊去看看吧~

GitHub地(dì / de)址：

https://github.com/Flame-Code-VLM/Flame-Code-VLM/blob/main/README.md

— 完 —

量子(zǐ)位 QbitAI · 頭條号簽約

關注我們，第一(yī / yì ／yí)時(shí)間獲知前沿科技動态