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. 应用案例和最佳实践
数据准备
数据准备包括以下三个主要步骤:
- 生成自包含的组件代码片段
从 GitHub 上的仓库生成自包含的组件代码片段,可以运行以下命令:
bash scripts/collect_gh_code_run.sh
在 collect_gh_code.sh
脚本中,有收集仓库、提取组件和提取代码中使用的图片的三个步骤。你可以根据需要指定脚本中的参数。
- 将代码片段渲染为图片
首先指定参数:
CODE_DIR= # 代码片段所在目录
SCREENSHOT_DIR= # 渲染图片的输出目录
然后运行以下命令:
bash scripts/renderer_run.sh
- 为代码片段生成指令
首先指定参数:
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 进行了优化,但由于其方法论和管道的高度可扩展性,可以轻松扩展到其他框架。
本项目提供了一个完整的数据准备管道、模型训练过程和评估套件,为多模态前端代码生成研究提供了宝贵的资源。
创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考