Flame数据集

Flame数据集是通过自动化数据合成管道生成的，用于提高视觉链式思维（CoT）推理的大规模、多样化和高保真的图像-文本数据集。

The Flame Dataset is a large-scale, diverse, and high-fidelity image-text dataset generated via an automated data synthesis pipeline, designed to enhance visual Chain-of-Thought (CoT) reasoning.

原始信息汇总

Flame: Advancing vision-language models in front-end development via data synthesis

数据集概述

简介

Flame是一个面向前端开发的全栈框架，包含数据合成管道、模型训练过程和评估套件，旨在通过生成高质量的图像-文本数据来提升视觉语言模型（VLM）在前端代码生成方面的性能。

特点

• 全面的数据准备管道：包含三种不同的数据合成方法——基于演化的合成、基于瀑布模型的合成和基于增量开发的合成。
• 端到端的训练管道：实现Flame的三阶段训练策略，包括视觉编码器预训练、图像布局解释训练和完整的指令微调。
• 针对React代码生成的评估管道：提供Flame-React-Eval基准数据集、自动化测试脚本以及使用余弦相似度对渲染输出进行pass@k评估的指标。
• 支持多图像输入：模型和管道可以处理多个设计草图版本，相应地更新生成的代码。

安装

1. 克隆仓库
2. 导航到项目目录
3. 创建conda环境
4. 安装node依赖

使用

数据准备包括生成独立的组件代码片段、将代码片段渲染成图像、为代码片段生成指令。数据合成包括基于不同方法的数据合成。

模型和训练

基于Siglip Vision Encoder和deepseek-coder模型构建Flame，并在LLaVA-VL/LLaVA-NeXT的基础上进行修改。

评估

使用模型生成代码，渲染并截取屏幕截图，然后计算pass@k得分。

数据集

开源了使用数据收集和合成方法构建的数据集，以及用于评估的测试数据集：

• Flame-Waterfall-React
• Flame-Additive-React
• Flame-Evo-React
• Flame-Eval-React

贡献

欢迎开源社区贡献，改进Flame的数据集、模型和评估管道。

许可

Flame遵循Apache 2.0许可。

鸣谢

本项目受到大型视觉语言模型和自动化前端开发进展的启发，感谢开源社区和之前在视觉语言建模和自动化代码生成方面的研究贡献。

搜集汇总

数据集介绍

构建方式

Flame数据集的构建方法是采用自动化的数据合成管道，该管道能够从GitHub上提取前端代码片段，并进行渲染和注释，生成大规模、多样化和高保真的图像-文本数据集，以支持单图像和多图像输入以及详细的图像描述，从而提升视觉链式推理能力。

使用方法

使用Flame数据集，用户需要先通过脚本生成自包含的组件代码片段，然后将这些代码片段渲染成图像，并为它们生成指令。数据集还支持基于瀑布模型和加法开发方法的数据合成。此外，该数据集提供了模型训练和评估所需的全部脚本、模型和评估工具。

背景与挑战

背景概述

Flame数据集的研究背景源于现代前端开发中，动态需求难以得到满足的现状。尽管如GPT-4o之类的先进模型在生成网页创建代码方面表现出色，但它们生成的代码往往静态且缺乏模块化、可重用性和动态行为，这些都是构建可扩展、交互式用户界面所必需的。为了克服这些限制，Flame框架应运而生，它包括数据合成管道、模型训练过程和评估套件，形成一个完整的前端代码生成视觉语言模型（VLM）解决方案。Flame框架主要针对React框架进行优化，并有望扩展到其他前端框架。该数据集由相关研究人员和机构创建于近期，旨在推动多模态前端代码生成研究的发展。

当前挑战

Flame数据集在构建过程中面临的主要挑战包括：1) 缺乏高质量图像-文本数据，这是开发用于前端开发的大型VLM的主要障碍；2) 如何确保生成的代码符合实际开发标准，在语法精确性、功能性正确性和视觉一致性方面达到要求。为了应对这些挑战，Flame提出了一种自动化的数据合成管道，并建立了全面的评估套件来衡量生成的代码的质量。

常用场景

经典使用场景

Flame-React-Eval数据集致力于推动前端开发中视觉语言模型的进展，其经典使用场景在于为前端开发者提供一种高效、动态的代码生成方案。通过合成高质量的图像-文本数据，该数据集使得视觉链式推理在代码生成中得以应用，进而提升了代码的模块化、可重用性和动态行为，满足了现代前端工作流程的需求。

解决学术问题

该数据集解决了前端开发中自动化代码生成面临的诸多学术研究问题，如生成的代码静态性过强、缺乏必要的模块化与动态性，以及与最佳开发实践不符等问题。通过提供大规模、多样化的图像-文本数据，Flame-React-Eval使得研究者在视觉语言模型的前端代码生成领域取得了重要进展，为构建可扩展的交互式用户界面提供了可能。

实际应用

在实际应用中，Flame-React-Eval数据集可用于训练和评估前端代码生成模型，帮助开发者自动生成结构化、可重用的UI组件。这对于减少人工编码工作量、加快开发速度以及降低出错率具有重要意义，尤其适用于组件化程度高的React前端框架开发。

数据集最近研究

最新研究方向

Flame数据集致力于推动视觉语言模型在前端开发领域的应用，特别是在代码生成方面。近期研究聚焦于通过数据合成方法解决现代前端工作流程中动态需求的问题。该数据集采用自动化的数据合成管道，生成具有高度保真度、多样性的大规模图像-文本数据集，以提升视觉链式推理能力。当前，Flame框架针对React框架进行了优化，旨在生成结构化、可重用的UI组件。此研究方向对前端代码生成的准确性、功能性及视觉一致性进行了全面评估，为多模态前端代码生成研究提供了重要资源与影响。