Flame-Code-VLM 项目安装与配置指南

Flame-Code-VLM 项目安装与配置指南

1. 项目基础介绍

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

该项目主要使用的编程语言是 Python 和 JavaScript。

2. 项目使用的关键技术和框架

• Siglip Vision 编码器：用于处理和解析图像信息。
• DeepseekCoder 模型：专门用于生成 React 代码。
• 自动化数据合成管道：用于创建高质量的图像-文本数据集。
• React：用于构建用户界面的 JavaScript 库。

3. 项目安装和配置的准备工作

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

• 操作系统：建议使用 Ubuntu 18.04 或更高版本。
• Python：Python 3.6 或更高版本。
• Node.js：建议使用 LTS 版本。
• Git：用于克隆项目仓库。
• Conda：用于创建虚拟环境。

安装步骤

1. 克隆项目仓库

   打开终端，运行以下命令来克隆仓库：

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

2. 创建虚拟环境并安装 Python 依赖

   使用 conda 创建一个虚拟环境并安装所需的 Python 包：

   conda env create -f environment.yml
   conda activate flame
   

3. 安装 Node.js 依赖

   在项目目录中，运行以下命令来安装 Node.js 依赖：

   npm install
   

4. 数据准备

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

   • 收集 GitHub 上的代码库：运行以下脚本以收集指定语言和日期范围内的代码库：

     bash scripts/collect_gh_code_run.sh
     

   • 将代码片段渲染为图像：指定代码片段目录和截图输出目录，然后运行渲染脚本：

     bash scripts/renderer_run.sh
     

   • 为代码片段生成说明：指定图像路径、代码路径和输出目录，然后运行以下命令：

     nohup python -B -u data_collect/component_collector/describer/gen_inst.py \
     --screenshot_path <dir_of_rendered_images> \
     --code_path <dir_of_code_snippets> \
     --inst_path <output_dir> \
     --ori_img_path <output_dir>/ori_images \
     --cropped_img_path <output_dir>/cropped_images \
     > log/batch_inst.log 2>&1 &
     

完成以上步骤后，您的 Flame-Code-VLM 项目应该已经安装并配置完毕，可以开始使用了。