前端程序员请注意：首个截图就能生成现代前端代码的 AI 开源

当前生成代码截图方面已达到新高度 - 第一个现代前端代码生成的多模态大模型解决方案已经来临！而且是那种开源的。

（注：现代前端代码开发具有组件化、状态管理和数据驱动渲染、开发规范严格以及动态交互性强等特点。这些特点相互关联，共同构成了现代前端开发的复杂体系，对代码生成提出了更高要求。如基于 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

本文来自微信公众号：量子位（ID：QbitAI），作者：关注前沿科技

广告声明：文内含有的对外跳转链接（包括不限于超链接、二维码、口令等形式），用于传递更多信息，节省甄选时间，结果仅供参考。