Flame：通过数据合成推进前端开发中的视觉-语言模型

English | 中文

• 简介
• 特性
• 安装
• 使用
• 数据集
• 模型
• 贡献
• 许可证
• 致谢

简介

像GPT-4o这样的最先进模型虽然在生成网页代码方面非常强大，但却无法满足现代前端（FE）工作流的动态需求。它们生成的代码往往是静态的，缺乏模块化、可重用性和动态行为等关键特性，而这些特性对于构建可扩展的交互式用户界面至关重要。这导致生成的代码效率低下且不兼容，偏离了最佳开发实践。

为了克服这些局限性，我们引入了一个综合框架，包括数据合成流水线、模型训练流程和评估套件，形成了一个用于前端代码生成的完全集成的视觉-语言模型（VLM）解决方案。利用这个框架，我们结合Siglip视觉编码器和Deepseek编码器模型来生成React代码，开发出了具有多模态专长的前端语言助手Flame。

在开发用于前端开发的强大大规模VLM时，主要挑战之一是缺乏高质量的图像-文本数据。为了解决这个问题，我们提出了一种自动化的数据合成流水线，能够提取、渲染并标注自包含的前端代码片段。该流水线确保生成大量、多样化且高保真的数据集，既可以产生单张图像输入，也可以生成多张图像输入，并附带详细的图像描述，以提升视觉链式思维（CoT）推理能力。在此过程中，我们利用DeepSeek的API整合了DeepSeek V2和V3模型来进行数据集构建。

为了评估Flame的性能，我们建立了一个全面的评估套件，用于衡量三个关键因素：生成代码的语法精确性、功能正确性和视觉一致性。这确保了Flame生成的代码符合实际开发标准。

目前，该框架专为基于React的开发设计和优化，充分利用其组件化架构来生成结构化、可重用的UI组件。然而，这种方法和流水线具有高度的可扩展性，只需进行少量修改即可适配其他前端框架，如Vue和Angular。

本仓库提供了Flame的数据准备流水线、模型训练流程和评估套件的完整实现，使其成为推动多模态前端代码生成研究的宝贵资源。

特性

• 综合数据准备流水线：该仓库包含用于提取、合成和构建多模态数据集的脚本和工具，采用了三种不同的数据合成方法：
  • 基于演进的合成
  • 基于瀑布模型的合成
  • 增量式开发合成
• 端到端训练流水线：实现了Flame的三阶段训练策略，包括：
  • 使用公开数据集进行视觉编码器预训练
  • 使用合成数据集进行图像布局解读训练
  • 针对图像到代码生成的完整指令调优
• React代码生成评估流水线：该仓库提供：
  • Flame-React-Eval基准测试数据集
  • 用于功能正确性和视觉保真度评估的自动化测试脚本
  • 使用渲染输出的余弦相似度实现pass@k评估指标 支持多图像输入：该模型和流水线可以通过处理多个版本的设计原型图，并相应更新生成的代码，从而实现UI的迭代优化。

本仓库提供了所有必要的脚本、模型和评估工具，以便重现我们的实验，并进一步扩展Flame以开展多模态前端代码生成的研究。

安装

请按照以下步骤进行安装：

1. 克隆仓库：

   git clone 
   

2. 进入项目目录：

   cd Flame
   

3. 创建conda环境：

   conda env create -f environment.yml
   conda activate flame
   

4. 安装node依赖：

   npm install
   

使用

数据准备

数据准备流程包含三个主要步骤：

1. 生成自包含的组件代码片段

要从 GitHub 上的仓库中生成自包含的组件代码片段，可以运行以下命令：

bash scripts/collect_gh_code_run.sh

在 collect_gh_code.sh 脚本中，包含了收集仓库、提取组件以及提取代码中使用的图片这三个步骤。你可以根据需求在脚本中指定参数：

echo "步骤1：收集仓库..."
python3 -B data_collect/repo_collector/collect_info.py \
  --language '目标语言' \
  --start_date '目标起始日期，格式为“YYYY-MM-DD”' \
  --end_date '目标结束日期，格式为“YYYY-MM-DD”' \
  --per_page '每页通过 GitHub API 克隆的仓库数量' \
  --sleep_time '每次请求 GitHub API 之间的休眠时间' \
  --star '目标仓库的最小星数' \
  --time_range '时间范围' \
  --kw '关键词' \
  --output_repo_path '存储仓库的输出目录' &

echo "步骤2：收集组件..."
python3 -B data_collect/component_collector/distiller/distiller_cls.py \
  --threads 'N' \
  --repo_path '已下载仓库的目录' \
  --output_path '存储生成的自包含组件代码片段的输出目录' &

echo "步骤3：提取代码中使用的图片..."
node data_collect/component_collector/distiller/img_distiller.js \
  '已下载仓库的目录' \
  '已下载仓库的组件代码片段目录' &

2. 将代码片段渲染为图片

要将代码片段渲染为图片，首先需要指定参数：

CODE_DIR='已下载仓库的组件代码片段目录'
SCREENSHOT_DIR="存储渲染后图片的输出目录"

然后运行以下命令：

bash scripts/renderer_run.sh

3. 生成代码片段的指令

要为代码片段生成指令，首先需要指定参数：

INST_PATH="存储最终多模态数据的输出目录"
nohup python -B -u data_collect/component_collector/describer/gen_inst.py \
  --screenshot_path '渲染后的图片目录' \
  --code_path '已下载仓库的组件代码片段目录' \
  --inst_path $INST_PATH \
  --ori_img_path $INST_PATH/ori_images \
  --cropped_img_path $INST_PATH/cropped_images >log/batch_inst.log 2>&1 &

然后运行以下命令：

bash scripts/gen_inst.sh

数据合成

要使用瀑布模型方法合成数据，首先需要在 run_batch_variation_no_code.sh 脚本中指定参数：

nohup python3 -B -u data_collect/component_collector/variater/variation_waterfall_no_code.py \
    --iter_num='# 次迭代整个工程过程' \
    --max_system_infer='# 开始时推断的系统数量' \
    --screenshot_path='收集到的组件代码片段截图目录' \
    --repo_path='收集到的仓库目录' \
    --variation_path='保存合成代码片段的输出目录'>log/comp_variation_waterfall.log 2>&1 &

然后运行以下命令：

bash scripts/run_batch_variation_no_code.sh

若要使用增量开发方法合成数据，首先需要在 run_batch_variation_with_code.sh 脚本中指定参数：

nohup python3 -B -u data_collect/component_collector/variater/variation_waterfall_with_init_code.py \
    --iter_num='# 次迭代整个工程过程' \
    --screenshot_path='收集到的组件代码片段截图目录' \
    --repo_path='收集到的仓库目录' \
    --variation_path='保存合成代码片段的输出目录'>log/comp_variation_waterfall_with_init_code.log 2>&1 &

然后运行以下命令：

bash scripts/run_batch_variation_with_code.sh

建模与训练

我们通过一个两层的 MLP 将 Siglip 视觉编码器和 deepseek-coder 模型连接起来，构建了 Flame 模型。该仓库包含基于 LLaVA-VL/LLaVA-NeXT https://github.com/LLaVA-VL/LLaVA-NeXT 的修改版建模实现（Flame-Code-VLM/model）。使用时，只需将原仓库中的相应代码文件替换为此仓库中的文件即可。

评估

要评估模型，首先可以使用以下命令让模型生成代码：

代码生成完成后，可以通过先在 batch_eval_renderer.sh 脚本中指定参数来渲染这些代码并获取截图：

GEN_CODE_DIR="<生成代码的目录>"
SCREENSHOT_DIR="<保存截图的目录>"

然后运行以下命令：

bash scripts/batch_eval_renderer_run.sh

最后，通过在 eval_score.sh 中添加你的模型名称来计算 pass@k 分数：

MODEL_NAMES=("待评估的模型名称")

然后运行：

bash scripts/eval_score_run.sh

数据集

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

• Flame-Waterfall-React：https://huggingface.co/datasets/Flame-Code-VLM/Flame-Waterfall-React
• Flame-Additive-React：https://huggingface.co/datasets/Flame-Code-VLM/Flame-Additive-React
• Flame-Evo-React：https://huggingface.co/datasets/Flame-Code-VLM/Flame-Evo-React
• Flame-Eval-React：https://huggingface.co/datasets/Flame-Code-VLM/Flame-Eval-React

模型

• Flame_waterfall_7b：https://huggingface.co/Flame-Code-VLM/flame_waterfall_7b
• Llava-qwen2-7b-ov-flamewaterfall：https://huggingface.co/Flame-Code-VLM/llava-qwen2-7b-ov-flamewaterfall

对比研究

以下是 GPT-4o 和 Flame 生成的代码片段对比示例：

案例研究

Flame 生成代码的测试页面及渲染结果示例：

测试图片	使用 Flame 生成的代码的渲染结果截图

贡献

我们欢迎开源社区为改进 Flame 的数据集、模型和评估流程做出贡献。如果您有兴趣参与贡献，请按照以下步骤操作：

1. 克隆仓库并创建分支。
2. 为您的更改创建一个新分支。
3. 提交包含清晰修改说明的拉取请求。

许可证

Flame 采用 Apache 2.0 许可证发布。更多详情请参阅 LICENSE 文件。

致谢

本项目受到大型视觉-语言模型及自动化前端开发领域最新进展的启发。我们感谢开源社区以及先前在视觉-语言建模和自动化代码生成方面的研究工作所作出的贡献。

引用

如果 Flame 对您的研究有所帮助，请引用以下文献：

@article{ge2025advancing,
  title={通过数据合成推进视觉-语言模型在前端开发中的应用},
  author={Ge, Tong 和 Liu, Yashu 和 Ye, Jieping 和 Li, Tianyi 和 Wang, Chao},
  journal={arXiv 预印本 arXiv:2503.01619},
  year={2025}
}

Flame-Code-VLM 快速上手指南

Flame 是一个专为前端开发设计的视觉 - 语言模型（VLM），能够根据设计图生成高质量、模块化且可复用的 React 代码。本项目提供了完整的数据合成流水线、模型训练框架及评估套件。

环境准备

在开始之前，请确保您的系统满足以下要求：

• 操作系统: Linux (推荐 Ubuntu 20.04+) 或 macOS
• Python: 3.8+ (推荐使用 Conda 管理环境)
• Node.js: 已安装并配置好 npm (用于渲染截图和依赖安装)
• GPU: 建议配备 NVIDIA GPU (支持 CUDA)，显存建议 16GB 以上以进行推理或微调
• Git: 用于克隆仓库

前置依赖检查： 确保已安装 conda 和 node/npm。若未安装 Node.js，请访问 Node.js 官网 下载。

安装步骤

1. 克隆项目

git clone https://github.com/Flame-Code-VLM/Flame.git
cd Flame

提示：如果 GitHub 访问较慢，可使用国内镜像源加速： git clone https://gitee.com/mirror/Flame-Code-VLM.git (如有对应镜像) 或使用代理。

2. 创建 Python 环境

使用项目提供的 environment.yml 文件创建隔离环境：

conda env create -f environment.yml
conda activate flame

加速建议：若 conda 下载缓慢，建议配置清华或中科大镜像源：

conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main/
conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/

3. 安装 Node.js 依赖

项目包含用于代码渲染和截图的脚本，需安装 JS 依赖：

npm install

4. 模型权重准备

从 Hugging Face 下载预训练模型权重。

注意：若无法直接访问 Hugging Face，建议使用国内镜像站（如 ModelScope 或 Hugging Face 镜像）下载后放入本地目录。

• 模型地址：https://huggingface.co/Flame-Code-VLM/flame_waterfall_7b

基本使用

Flame 的核心功能是将前端组件截图转换为 React 代码。以下是基于已有模型进行代码生成的简化流程。

第一步：准备输入数据

确保你有一张前端界面的截图（例如 input_design.png），并将其放置在指定目录。

第二步：运行代码生成

虽然完整的推理脚本可能需要根据具体任务配置，但核心调用逻辑基于加载 Siglip Vision Encoder 和 Deepseek Coder 模型。

若使用项目提供的评估脚本来测试生成效果，可参考以下流程（需先配置好模型路径）：

1. 生成代码： 加载模型并对输入图像进行推理（具体推理脚本需根据 model 目录下的实现编写，或复用评估流程中的生成部分）。

2. 渲染与评估（可选）： 如果你需要验证生成代码的视觉效果，可以使用内置的渲染流水线。

   设置生成代码目录和截图保存目录：

   export GEN_CODE_DIR="./generated_codes"
   export SCREENSHOT_DIR="./rendered_screenshots"
   

   运行渲染脚本将生成的代码转为图片：

   bash scripts/batch_eval_renderer_run.sh
   

   计算 Pass@k 指标（评估代码功能正确性与视觉一致性）： 编辑 scripts/eval_score.sh 填入你的模型名称：

   MODEL_NAMES=("flame_waterfall_7b")
   

   然后执行：

   bash scripts/eval_score_run.sh
   

进阶：数据合成（可选）

如果你希望构建自己的训练数据，可以使用项目提供的数据合成流水线。例如，从 GitHub 收集组件并生成指令数据：

1. 收集仓库与组件：

   bash scripts/collect_gh_code_run.sh
   

   (需在脚本内配置语言、时间范围、Star 数等参数)

2. 渲染组件为图片：

   export CODE_DIR="./component_snippets"
   export SCREENSHOT_DIR="./component_images"
   bash scripts/renderer_run.sh
   

3. 生成指令数据：

   export INST_PATH="./multimodal_dataset"
   bash scripts/gen_inst.sh
   

---

更多资源：

• 数据集下载: HuggingFace Datasets
• 论文详情: ArXiv Paper