Flame-Code-VLM 开源项目使用教程

Flame-Code-VLM 开源项目使用教程

Flame-Code-VLM Flame is an open-source multimodal AI system designed to translate UI design mockups into high-quality React code. It leverages vision-language modeling, automated data synthesis, and structured training workflows to bridge the gap between design and front-end development. 项目地址: https://gitcode.com/gh_mirrors/fl/Flame-Code-VLM

1. 项目介绍

Flame-Code-VLM 是一个开源的多模态 AI 系统，旨在将 UI 设计草图转换为高质量的 React 代码。该系统利用视觉语言建模、自动化数据合成以及结构化训练工作流程，以弥合设计与前端开发之间的差距。

2. 项目快速启动

以下是快速启动 Flame-Code-VLM 的步骤：

首先，克隆项目仓库：

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

然后，进入项目目录：

cd Flame-Code-VLM

接下来，创建 conda 环境：

conda env create -f environment.yml

激活 conda 环境：

conda activate flame

安装 Node.js 依赖：

npm install

3. 应用案例和最佳实践

数据准备

数据准备包括以下三个主要步骤：

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

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

bash scripts/collect_gh_code_run.sh

在 collect_gh_code.sh 脚本中，有收集仓库、提取组件和提取代码中使用的图片的三个步骤。你可以根据需要指定脚本中的参数。

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 &

4. 典型生态项目

Flame-Code-VLM 的设计允许它与其他前端框架如 Vue 和 Angular 进行集成。当前框架针对 React 进行了优化，但由于其方法论和管道的高度可扩展性，可以轻松扩展到其他框架。

本项目提供了一个完整的数据准备管道、模型训练过程和评估套件，为多模态前端代码生成研究提供了宝贵的资源。

Flame-Code-VLM Flame is an open-source multimodal AI system designed to translate UI design mockups into high-quality React code. It leverages vision-language modeling, automated data synthesis, and structured training workflows to bridge the gap between design and front-end development. 项目地址: https://gitcode.com/gh_mirrors/fl/Flame-Code-VLM