金磊 整理自 投稿
量子位 | 公眾號(hào) QbitAI

現(xiàn)在截圖生成代碼，已經(jīng)來到了一個(gè)新高度——

?個(gè)?向現(xiàn)代前端代碼?成的多模態(tài)?模型解決?案，來了！

而且是開源的那種。

（注：現(xiàn)代前端代碼開發(fā)具有組件化、狀態(tài)管理和數(shù)據(jù)驅(qū)動(dòng)渲染、開發(fā)規(guī)范嚴(yán)格以及動(dòng)態(tài)交互性強(qiáng)等特點(diǎn)。這些特點(diǎn)相互關(guān)聯(lián)，共同構(gòu)成了現(xiàn)代前端開發(fā)的復(fù)雜體系，對(duì)代碼生成提出了更高要求。如基于React、Vue等框架的開發(fā)。）

這個(gè)模型叫做Flame，話不多說，直接來看效果。

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

Flame模型在“看”完圖片之后，給出來的代碼是這樣：

不難看出，F(xiàn)lame?成代碼明顯是符合現(xiàn)代前端開發(fā)規(guī)范的，包括?較清晰的外聯(lián)樣式以及模塊化組件結(jié)構(gòu)。

同時(shí)在組件的實(shí)現(xiàn)中正確定義了組件的各個(gè)狀態(tài)、事件響應(yīng)、以及基于數(shù)據(jù)的組件動(dòng)態(tài)渲染。

然而，誠如GPT-4o這樣頂尖的SOTA模型，可能也與現(xiàn)代前端開發(fā)的核?需求背道?馳，因?yàn)榫窒拊谟诙说蕉藦?fù)刻設(shè)計(jì)圖的過程中只能產(chǎn)出靜態(tài)組件。

例如同樣的界面，GPT-4o的解法是這樣的：

問題根源在于這類靜態(tài)代碼既?法?撐模塊化架構(gòu)，也難以?撐動(dòng)態(tài)交互。

每個(gè)組件都是“?次性產(chǎn)物”，任何細(xì)微的需求開發(fā)和迭代，可能都要開發(fā)者開發(fā)?量定制化代碼，甚?是推倒重來。

那么Flame模型又是如何解決這個(gè)問題的呢？

核心問題：數(shù)據(jù)稀缺

?型視覺語?模型（LVLM）在?成專業(yè)前端代碼上表現(xiàn)不盡?意的根本原因在于數(shù)據(jù)稀缺。

現(xiàn)代前端開發(fā)流程?常復(fù)雜，?如像React這樣的前端框架，強(qiáng)調(diào)組件化、狀態(tài)管理和數(shù)據(jù)驅(qū)動(dòng)的渲染?式。

這就要求?成的代碼不僅要能?，還要符合開發(fā)規(guī)范，具備動(dòng)態(tài)性和響應(yīng)性。

然?，開源社區(qū)中?持前端開發(fā)的?質(zhì)量圖像-?本（代碼）數(shù)據(jù)集極度稀缺。

像websight這樣的數(shù)據(jù)集只涉及靜態(tài)HTML，不適?于現(xiàn)代前端開發(fā)。

收集并構(gòu)建?質(zhì)量的訓(xùn)練數(shù)據(jù)?臨許多挑戰(zhàn)：

• 如何從公共代碼庫中提取有效代碼片段？
• 如何在保持原有代碼效果的情況下進(jìn)行渲染？
• 如何?成符合?程師習(xí)慣的?量、多樣化數(shù)據(jù)？

針對(duì)這些問題，F(xiàn)lame模型的團(tuán)隊(duì)給出了解法就是數(shù)據(jù)合成

為提升LVLM在前端代碼?成能?，我們?cè)O(shè)計(jì)了?整套?反思的智能體?作流，?于?成前端開發(fā)場(chǎng)景下的?質(zhì)量數(shù)據(jù)。

該?作流不僅能?動(dòng)從公共代碼庫中提取真實(shí)數(shù)據(jù)，還能夠?主合成數(shù)據(jù)，?成專業(yè)、多樣化的前端代碼。

團(tuán)隊(duì)設(shè)計(jì)并實(shí)現(xiàn)了3種合成?法

基于進(jìn)化的數(shù)據(jù)合成（Evolution-Based Synthesis）

借鑒WizardLM的Evol-Instruct?法，通過隨機(jī)進(jìn)化?成多樣化的代碼。它采?兩種策略：?度進(jìn)化和深度進(jìn)化。

?度進(jìn)化通過改變代碼的功能和視覺?格，?成新變體；深度進(jìn)化則通過增加代碼的技術(shù)復(fù)雜度，優(yōu)化組件處理、狀態(tài)管理和性能，提升代碼的可靠性和可維護(hù)性。

通過不斷進(jìn)化，可以得到?量覆蓋不同需求的前端代碼。

基于瀑布模型的數(shù)據(jù)合成（Waterfall-Model-Based Synthesis）

模擬傳統(tǒng)軟件開發(fā)的瀑布流模型，確保?成的代碼結(jié)構(gòu)清晰、邏輯?致。從需求分析開始，推導(dǎo)出系統(tǒng)功能需求，設(shè)計(jì)UI布局和架構(gòu)，保證代碼符合現(xiàn)代前端開發(fā)的模塊化和可擴(kuò)展性要求。

接著，通過多輪迭代，將需求轉(zhuǎn)化為具體的、可復(fù)?的前端組件和??。這種?法?成的代碼邏輯清晰，適合復(fù)雜功能的開發(fā)任務(wù)。

基于增量開發(fā)的數(shù)據(jù)合成（Additive Development Synthesis）

在現(xiàn)有代碼基礎(chǔ)上，逐步增加功能和復(fù)雜性。通過逐步集成狀態(tài)管理、交互邏輯或API等功能模塊，?成的代碼能更好地滿?實(shí)際開發(fā)需求。

這種?法強(qiáng)調(diào)逐步提升代碼的功能和復(fù)雜度，確保每次擴(kuò)展都最?可能符合最佳實(shí)踐。

上述的三種?法不僅豐富了數(shù)據(jù)集的規(guī)模和多樣性，還確保了數(shù)據(jù)質(zhì)量與實(shí)際應(yīng)?價(jià)值。

這些?法能夠低成本?規(guī)模合成特定前端框架的圖?數(shù)據(jù)，借助上述?法，F(xiàn)lame團(tuán)隊(duì)針對(duì)React框架構(gòu)建了超過400k的多模態(tài)數(shù)據(jù)集。

同時(shí)，基于瀑布模型和增量開發(fā)的?法還?持多圖場(chǎng)景下的數(shù)據(jù)合成、視覺思維鏈的合成，為更復(fù)雜場(chǎng)景下的前端代碼?成提供了更多可能。

Flame：針對(duì)前端開發(fā)場(chǎng)景的VLM

Flame團(tuán)隊(duì)??構(gòu)建了?套包含80道測(cè)試題?的?質(zhì)量測(cè)試集并通過改進(jìn)后的Pass@k來評(píng)測(cè)多模態(tài)模型的前端代碼?成能?。

如果?成的代碼能夠通過編譯驗(yàn)證、符合編碼規(guī)范，并且所渲染出的??與輸?的設(shè)計(jì)圖?夠相似，則認(rèn)為該代碼符合要求。

評(píng)測(cè)結(jié)果顯?，當(dāng)前頂級(jí)模型如GPT-4o，Gemini 1.5 Flash因其?成代碼主要為靜態(tài)代碼，嚴(yán)重偏離代碼規(guī)范，使其最?Pass@1僅為11%，?Flame在相同條件下達(dá)到了52%+，展現(xiàn)出了極?的潛?。

同時(shí)，同時(shí)，F(xiàn)lame僅?20w左右的數(shù)據(jù)量級(jí)即取得以上成果，進(jìn)?步驗(yàn)證了上述數(shù)據(jù)合成?法的價(jià)值以及?質(zhì)量數(shù)據(jù)集在多模態(tài)模型能?提升中的關(guān)鍵作?。

△左：測(cè)試圖；右：Flame效果圖

值得一提的是，將訓(xùn)練數(shù)據(jù)、數(shù)據(jù)合成流程、模型及測(cè)試集已經(jīng)全?開源，感興趣的小伙伴趕緊去看看吧~

GitHub地址：
https://github.com/Flame-Code-VLM/Flame-Code-VLM/blob/main/README.md