現在截圖生成代碼，已經來到了一個新高度——

?個?向現代前端代碼?成的多模態?模型解決?案，來了！

而且是開源的那種。

（注：現代前端代碼開發具有組件化、狀態管理和數據驅動渲染、開發規范嚴格以及動態交互性強等特點。這些特點相互關聯，共同構成了現代前端開發的復雜體系，對代碼生成提出了更高要求。如基于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