❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！
🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦
🎯 “设计师福音！Flame 开源 AI 模型：UI 设计图秒变高质量前端代码，React 开发效率翻倍！”
大家好，我是蚝油菜花。你是否也遇到过——
- 👉 设计图与开发代码不一致，沟通成本高
- 👉 手动编写前端代码耗时耗力，效率低下
- 👉 复杂交互需求难以快速实现，开发周期长
今天介绍的 Flame，是一款开源的多模态 AI 模型，专为前端开发设计。它能够将 UI 设计图直接转换为高质量的现代前端代码，支持 React 等主流框架，具备动态交互、组件化开发等功能。无论是快速原型开发，还是复杂交互实现，Flame 都能显著提升开发效率。接下来，我们将深入解析 Flame 的核心功能、技术原理及使用方法，带你体验 AI 赋能前端开发的无限可能！
🚀 快速阅读
Flame 是一款开源的多模态 AI 模型，专注于前端代码生成。
- 核心功能：支持将 UI 设计图转换为高质量的前端代码，具备动态交互、组件化开发等功能。
- 技术原理：基于多模态视觉语言模型（VLM）和创新的数据合成方法，生成符合现代前端开发规范的代码。
Flame 是什么
Flame 是一款开源的多模态 AI 模型，专注于将 UI 设计图转换为高质量的现代前端代码。它基于视觉语言建模、自动化数据合成和结构化训练流程，能够生成符合 React 等现代前端框架规范的代码，支持组件化、状态管理和动态交互。
Flame 的创新之处在于其数据合成方法，包括进化合成、瀑布模型合成和增量开发合成，这些方法显著提升了生成代码的质量和多样性。Flame 的训练数据、模型和测试集均已开源，为前端开发提供了高效的设计到代码转化工具。
Flame 的主要功能
- 代码生成：将设计图（如 UI 界面截图）转换为符合现代前端开发规范的代码，支持 React 等主流前端框架。
- 动态交互支持：生成的代码不仅包含静态布局，还支持动态交互、状态管理和数据驱动的渲染，满足复杂前端开发需求。
- 组件化开发：生成的代码基于模块化组件结构，便于复用和扩展，符合现代前端开发的最佳实践。
- 高代码质量：生成的代码逻辑清晰、结构规范，能通过编译验证，与设计图高度相似。
Flame 的技术原理
- 多模态视觉语言模型（VLM）：结合计算机视觉和自然语言处理技术，理解设计图的视觉元素，将其转换为对应的前端代码。模型基于视觉特征提取和文本生成模块，实现从图像到代码的转换。
- 数据合成方法：
- 基于进化的数据合成：随机进化生成多样化代码，包括广度进化（改变功能和视觉风格）和深度进化（增加技术复杂度）。
- 基于瀑布模型的数据合成：模拟传统软件开发流程，确保生成的代码结构清晰、逻辑一致，适合复杂功能开发。
- 基于增量开发的数据合成：在现有代码基础上逐步增加功能和复杂性，生成符合最佳实践的代码。
- 结构化训练流程：基于自反思的智能体工作流，从公共代码库中提取真实数据，自主合成高质量的训练数据。数据覆盖多种前端开发场景，确保模型生成符合实际需求的代码。
- 模型优化：基于改进的 Pass@k 指标进行模型性能评估，确保生成代码的准确性和实用性。
如何运行 Flame
安装 Flame
要运行 Flame，您需要按照以下步骤进行安装：
1. 克隆代码仓库
git clone https://github.com/Flame-Code-VLM/Flame.git
2. 进入项目目录
cd Flame
3. 创建并激活 Conda 环境
conda env create -f environment.yml
conda activate flame
4. 安装 Node.js 依赖
npm install
使用 Flame
Flame 的使用流程包括数据准备、数据合成、模型训练和评估。以下是对每个步骤的详细说明。
数据准备
数据准备是 Flame 的核心部分，包含三个主要步骤：生成自包含的代码片段、将代码片段渲染为图像，以及生成代码片段的指令。
1. 生成自包含的代码片段
运行以下脚本以从 GitHub 仓库中提取前端组件代码：
bash scripts/collect_gh_code_run.sh
该脚本包含三个子步骤：
- 收集仓库：根据指定的参数（如语言、日期范围、关键词等）从 GitHub API 获取目标仓库。
- 提取组件：从下载的仓库中提取前端组件代码。
- 提取图像：从代码中提取使用的图像资源。
您可以根据需求在 collect_gh_code.sh 脚本中调整以下参数：
python3 -B data_collect/repo_collector/collect_info.py \
--language 'JavaScript' \
--start_date '2023-01-01' \
--end_date '2023-12-31' \
--per_page 100 \
--sleep_time 5 \
--star 100 \
--output_repo_path './repos'
2. 将代码片段渲染为图像
首先设置代码目录和输出目录：
CODE_DIR='./repos/component_code'
SCREENSHOT_DIR='./output/screenshots'
然后运行以下命令：
bash scripts/renderer_run.sh
3. 生成代码片段的指令
设置输出路径和相关参数：
INST_PATH="./output/instructions"
nohup python -B -u data_collect/component_collector/describer/gen_inst.py \
--screenshot_path './output/screenshots' \
--code_path './repos/component_code' \
--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
数据合成
Flame 提供了两种数据合成方法：基于瀑布模型的合成和基于加法开发的合成。
1. 瀑布模型合成
在 run_batch_variation_no_code.sh 脚本中设置参数：
nohup python3 -B -u data_collect/component_collector/variater/variation_waterfall_no_code.py \
--iter_num=5 \
--max_system_infer=10 \
--screenshot_path='./output/screenshots' \
--repo_path='./repos' \
--variation_path='./output/variations' >log/comp_variation_waterfall.log 2>&1 &
运行以下命令：
bash scripts/run_batch_variation_no_code.sh
2. 加法开发合成
在 run_batch_variation_with_code.sh 脚本中设置参数：
nohup python3 -B -u data_collect/component_collector/variater/variation_waterfall_with_init_code.py \
--iter_num=5 \
--screenshot_path='./output/screenshots' \
--repo_path='./repos' \
--variation_path='./output/variations' >log/comp_variation_waterfall_with_init_code.log 2>&1 &
运行以下命令：
bash scripts/run_batch_variation_with_code.sh
模型训练
Flame 通过连接 Siglip Vision Encoder 和 Deepseek Coder 模型构建。模型训练分为三个阶段：
- 视觉编码器预训练
- 图像布局解释训练
- 指令微调
要训练模型，请替换原始代码库中的相关文件，并运行训练脚本。
模型评估
评估 Flame 的性能需要以下步骤：
1. 生成代码
使用训练好的模型生成代码。
2. 渲染生成的代码
设置生成代码目录和截图目录：
GEN_CODE_DIR="./output/generated_code"
SCREENSHOT_DIR="./output/eval_screenshots"
运行以下命令：
bash scripts/batch_eval_renderer_run.sh
3. 计算 Pass@K 分数
在 eval_score.sh 脚本中添加模型名称：
MODEL_NAMES=("Flame-Model")
运行以下命令：
bash scripts/eval_score_run.sh
数据集
Flame 提供了多个开源数据集，用于训练和评估模型：
- 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
资源
- GitHub 仓库：https://github.com/Flame-Code-VLM/Flame
❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发感兴趣，我会每日分享大模型与 AI 领域的开源项目和应用，提供运行实例和实用教程，帮助你快速上手AI技术！
🥦 AI 在线答疑 -> 智能检索历史文章和开源项目 -> 尽在微信公众号 -> 搜一搜：蚝油菜花 🥦
