前端程序员请注意！首个截图就能生成现代前端代码的AI来了 | 已开源

动态交互、模块化架构也能支持

原标题：前端程序员请注意！首个截图就能生成现代前端代码的AI来了 | 已开源
文章来源：量子位
内容字数：4032字

面向现代前端代码生成的开源多模态大模型Flame

本文介绍了Flame，一个面向现代前端代码生成的开源多模态大模型。它解决了现有模型在生成符合现代前端开发规范的动态交互代码方面存在的不足，并在性能测试中取得了显著的提升。

1. 现有模型的局限性

现有的顶尖模型，例如GPT-4和Gemini 1.5 Flash，在生成前端代码时，往往只能生成静态组件，无法满足现代前端开发中组件化、状态管理和数据驱动渲染等核心需求。这些静态代码缺乏模块化架构，难以支持动态交互，任何细微的需求变更都可能需要大量定制化代码甚至推倒重来。

2. Flame模型的核心突破：数据合成

大型视觉语言模型(LVLM)在生成专业前端代码方面表现不佳的根本原因在于高质量训练数据的稀缺。为了解决这个问题，Flame团队采用了一种数据合成方法，设计了一套自反思的智能体工作流，自动从公共代码库提取真实数据并自主合成数据，生成专业、多样化的前端代码。

3. 三种数据合成方法

Flame团队设计了三种数据合成方法：

1. 基于进化的数据合成 (Evolution-Based Synthesis): 借鉴WizardLM的Evol-Instruct方法，通过随机进化生成多样化的代码，包括宽度进化（改变功能和视觉风格）和深度进化（增加代码复杂度，优化组件处理、状态管理和性能）。
2. 基于瀑布模型的数据合成 (Waterfall-Model-Based Synthesis): 模拟传统软件开发的瀑布模型，从需求分析开始，逐步生成符合模块化和可扩展性要求的代码。
3. 基于增量开发的数据合成 (Additive Development Synthesis): 在现有代码基础上，逐步增加功能和复杂性，例如集成状态管理、交互逻辑或API等模块。

这三种方法共同丰富了数据集的规模和多样性，并确保了数据质量和实际应用价值。通过这些方法，Flame团队针对React框架构建了超过400k的多模态数据集。

4. 性能评测及开源

Flame团队人工构建了一个包含80道测试题目的高质量测试集，并使用改进后的Pass@k指标进行评测。结果显示，Flame在Pass@1指标上达到了52%以上，远超GPT-4o和Gemini 1.5 Flash的11%，展现了其强大的代码生成能力。值得注意的是，Flame仅使用约20万的数据量就取得了这一成果，验证了数据合成方法的有效性。

Flame的训练数据、数据合成流程、模型和测试集均已全面开源，GitHub地址：https://github.com/Flame-Code-VLM/Flame-Code-VLM/blob/main/README.md

5. 总结

Flame模型通过创新的数据合成方法，有效解决了现有模型在生成现代前端代码方面的不足，为前端开发带来了新的可能性。其开源的特性也促进了前端代码生成领域的发展。

联系作者

文章来源：量子位
作者微信：
作者简介：追踪人工智能新趋势，关注科技行业新突破