[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-Flame-Code-VLM--Flame-Code-VLM":3,"tool-Flame-Code-VLM--Flame-Code-VLM":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",140436,2,"2026-04-05T23:32:43",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":70,"readme_en":71,"readme_zh":72,"quickstart_zh":73,"use_case_zh":74,"hero_image_url":75,"owner_login":67,"owner_name":67,"owner_avatar_url":76,"owner_bio":77,"owner_company":78,"owner_location":78,"owner_email":78,"owner_twitter":78,"owner_website":78,"owner_url":79,"languages":80,"stars":101,"forks":102,"last_commit_at":103,"license":104,"difficulty_score":105,"env_os":106,"env_gpu":107,"env_ram":106,"env_deps":108,"category_tags":117,"github_topics":118,"view_count":23,"oss_zip_url":78,"oss_zip_packed_at":78,"status":16,"created_at":138,"updated_at":139,"faqs":140,"releases":180},3507,"Flame-Code-VLM\u002FFlame-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.","Flame-Code-VLM 是一款开源的多模态人工智能系统，专为将 UI 设计稿直接转化为高质量的 React 代码而打造。它旨在解决当前主流大模型（如 GPT-4o）在前端开发中的痛点：生成的代码往往过于静态，缺乏模块化、可复用性及动态交互能力，难以满足现代工程化标准。\n\n通过融合视觉语言建模与自动化数据合成技术，Flame-Code-VLM 能够理解设计意图并输出符合最佳实践的结构化组件代码。其核心亮点在于构建了一套独特的自动化数据合成流水线，利用“进化式”、“瀑布模型”及“增量开发”等多种策略，生成了大规模、高保真的图像 - 代码配对数据集，显著提升了模型对视觉细节的理解与逻辑推理能力。此外，项目还配备了涵盖语法精度、功能正确性及视觉一致性的全方位评估体系，确保产出代码的真实可用性。\n\n这款工具非常适合前端开发者、UI 设计师以及从事多模态大模型研究的研究人员使用。开发者可利用它加速从设计到原型的转化过程，减少重复编码工作；设计师能更直观地验证设计方案的可行性；研究人员则可借助其开放的数据管道与训练框架，探索前端代码生成领域的前沿技术。虽然目前主要优化于 React 生态，但其","Flame-Code-VLM 是一款开源的多模态人工智能系统，专为将 UI 设计稿直接转化为高质量的 React 代码而打造。它旨在解决当前主流大模型（如 GPT-4o）在前端开发中的痛点：生成的代码往往过于静态，缺乏模块化、可复用性及动态交互能力，难以满足现代工程化标准。\n\n通过融合视觉语言建模与自动化数据合成技术，Flame-Code-VLM 能够理解设计意图并输出符合最佳实践的结构化组件代码。其核心亮点在于构建了一套独特的自动化数据合成流水线，利用“进化式”、“瀑布模型”及“增量开发”等多种策略，生成了大规模、高保真的图像 - 代码配对数据集，显著提升了模型对视觉细节的理解与逻辑推理能力。此外，项目还配备了涵盖语法精度、功能正确性及视觉一致性的全方位评估体系，确保产出代码的真实可用性。\n\n这款工具非常适合前端开发者、UI 设计师以及从事多模态大模型研究的研究人员使用。开发者可利用它加速从设计到原型的转化过程，减少重复编码工作；设计师能更直观地验证设计方案的可行性；研究人员则可借助其开放的数据管道与训练框架，探索前端代码生成领域的前沿技术。虽然目前主要优化于 React 生态，但其方法论具备良好的扩展性，为未来适配 Vue、Angular 等框架奠定了基础。","\u003Ch1 align=\"center\">Flame: Advancing vision-language models in front-end development via data synthesis\u003C\u002Fh1>\n\u003Cdiv align=\"center\" style=\"line-height: 1;\">\n  \u003Ca href=\"https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\" target=\"_blank\" style=\"margin: 2px;\">\n    \u003Cimg alt=\"Datasets&Models\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F%F0%9F%A4%97%20Datasets & Models-aaaaaa?color=555555&logoColor=white\" style=\"display: inline-block; vertical-align: middle;\"\u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Farxiv.org\u002Fabs\u002F2503.01619\" target=\"_blank\" style=\"margin: 2px;\">\n    \u003Cimg alt=\"Datasets&Models\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpaper-ffc107\" style=\"display: inline-block; vertical-align: middle;\"\u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003Cp align=\"center\">\n  \u003Ca href=\"README.md\">English\u003C\u002Fa> | \u003Ca href=\"README_zh.md\">中文\u003C\u002Fa>\n\u003C\u002Fp>\n\n- [Introduction](#introduction)\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Dataset](#dataset)\n- [Model](#model)\n- [Contributing](#contributing)\n- [License](#license)\n- [Acknowledgements](#acknowledgements)\n\n## Introduction\nState-of-the-art models like GPT-4o, while powerful in generating code for webpage creation, fall short in meeting the dynamic requirements of modern front-end (FE) workflows. The code they generate is often static, lacking essential features like modularity, reusability, and dynamic behavior, which are critical for building scalable, interactive user interfaces. This leads to inefficient and incompatible code that deviates from best development practices.\n\nTo overcome these limitations, we introduce a comprehensive framework that includes a data synthesis pipeline, model training process, and evaluation suite, forming a fully integrated vision-language model (VLM) solution for front-end code generation. Using this framework, we developed Flame, a front-end language assistant with multimodal expertise, by integrating the Siglip Vision encoder and the Deepseek coder model for React code generation.\n\nOne of the primary challenges in developing a robust large-scale VLM for front-end development is the lack of high-quality image-text data. To address this, we propose an automated data synthesis pipeline that extracts, renders, and annotates self-contained front-end code snippets. This pipeline ensures the generation of large, diverse, and high-fidelity datasets, capable of producing both single-image and multi-image inputs, along with detailed image descriptions for improving visual chain-of-thought (CoT) reasoning. In this process, we leverage DeepSeek's API to integrate both the DeepSeek V2 and V3 models for dataset construction.\n\nTo evaluate Flame’s performance, we have established a comprehensive evaluation suite that measures three key factors: syntactic precision, functional correctness, and visual consistency in the generated code. This ensures that Flame generates code that aligns with real-world development standards.\n\nCurrently, the framework is designed and optimized for React-based development, taking advantage of its component-based architecture to produce structured, reusable UI components. However, the methodology and pipeline are highly extensible and can be adapted to other front-end frameworks, such as Vue and Angular, with minimal modifications.\n\nThis repository provides the full implementation of Flame’s data preparation pipeline, model training process, and evaluation suite, making it an invaluable resource for advancing multimodal front-end code generation research.\n\n## Features\n\n![image not found](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_59be304aac7c.png)\n\n- Comprehensive Data Preparation Pipeline: The repository includes scripts and tools for extracting, synthesizing, and structuring multimodal datasets using three distinct data synthesis methods:\n    - Evolution-Based Synthesis\n    - Waterfall-Model-Based Synthesis\n    - Additive Development Synthesis\n- End-to-End Training Pipeline: Implementation of Flame’s three-stage training strategy, incorporating:\n    - Vision encoder pretraining with public datasets\n    - Image layout interpretation training with synthesized datasets\n    - Full instruction-tuning for image-to-code generation\n- Evaluation Pipeline for React Code Generation: The repository provides:\n    - The Flame-React-Eval benchmarking dataset\n    - Automated testing scripts for functional correctness and visual fidelity evaluation\n    - Implementation of pass@k evaluation metrics using cosine similarity of rendered outputs\nSupport for Multi-Image Inputs: The model and pipeline enable iterative UI refinement by processing multiple versions of design mockups and updating generated code accordingly.\n\nThis repository provides all necessary scripts, models, and evaluation tools to reproduce our experiments and extend Flame for further research in multimodal front-end code generation.\n\n## Installation\nTo install, follow these steps:\n\n1. Clone the repository:\n    ```sh\n    git clone \n    ```\n2. Navigate to the project directory:\n    ```sh\n    cd Flame\n    ```\n3. Create conda environment:\n    ```sh\n    conda env create -f environment.yml\n    conda activate flame\n    ```\n4. Install the node dependencies:\n    ```sh\n    npm install\n    ```\n\n## Usage\n\n### Data Preparation\nThere are 3 main steps in the data preparation pipeline:\n\n#### 1. Generating self-contained component code snippets\n\nTo generate self-contained component code snippets from the repositories on Github, you can run the following command:\n\n```sh\nbash scripts\u002Fcollect_gh_code_run.sh\n```\n\nWithin the _collect_gh_code.sh_ script, there are 3 steps to collect the repositories, extract the components, and extract the images used in the code, respectively. You can specify the parameters in the script according to your needs:\n\n```sh\necho \"Step 1: Collecting repositories...\"\npython3 -B data_collect\u002Frepo_collector\u002Fcollect_info.py \\\n  --language 'target language' \\\n  --start_date 'target starting date in the format \"YYYY-MM-DD\"' \\\n  --end_date 'target ending date in the format \"YYYY-MM-DD\"' \\\n  --per_page 'N repos to clone in one page by GitHub API' \\\n  --sleep_time 'sleep time between each request to GitHub API' \\\n  --star 'min stars of the target repo' \\\n  --time_range 'time range' \\\n  --kw 'keyword' \\\n  --output_repo_path 'output dir to store repos' &\n\necho \"Step 2: Collecting components...\"\npython3 -B data_collect\u002Fcomponent_collector\u002Fdistiller\u002Fdistiller_cls.py \\\n  --threads 'N' \\\n  --repo_path 'dir of the downloaded repos' \\\n  --output_path 'output dir to store the generated self-contained component code snippets' &\n\necho \"Step 3: Extracting images used in code...\"\nnode data_collect\u002Fcomponent_collector\u002Fdistiller\u002Fimg_distiller.js \\\n  'dir of the downloaded repos' \\\n  'dir of the component code snippets of the downloaded repos' &\n```\n\n#### 2. Rendering code snippets to images\n\nTo render the code snippets to images, you can first specify the parameters:\n\n```sh\nCODE_DIR='dir of the component code snippets of the downloaded repos'\nSCREENSHOT_DIR=\"output dir to store the rendered images\"\n```\n\nthen run the following command:\n\n```sh\nbash scripts\u002Frenderer_run.sh\n```\n\n#### 3. Generating instructions for code snippets\n\nTo generate instructions for the code snippets, you can first specify the parameters:\n\n```sh\nINST_PATH=\"output dir to store the final multimodal data\"\nnohup python -B -u data_collect\u002Fcomponent_collector\u002Fdescriber\u002Fgen_inst.py \\\n  --screenshot_path 'dir of the rendered images' \\\n  --code_path 'dir of the component code snippets of the downloaded repos' \\\n  --inst_path $INST_PATH \\\n  --ori_img_path $INST_PATH\u002Fori_images \\\n  --cropped_img_path $INST_PATH\u002Fcropped_images >log\u002Fbatch_inst.log 2>&1 &\n```\n\nthen run the following command:\n\n```sh\nbash scripts\u002Fgen_inst.sh\n```\n\n#### Data Synthesis\n\nTo synthesize the data with the waterfall-model-based method, you can first specify the parameters in the _run_batch_variation_no_code.sh_ script:\n\n```sh\nnohup python3 -B -u data_collect\u002Fcomponent_collector\u002Fvariater\u002Fvariation_waterfall_no_code.py \\\n    --iter_num='# of times to iterate the whole engineering process' \\\n    --max_system_infer='# of systems to infer in the beginning' \\\n    --screenshot_path='dir of the screenshots of the collected component code snippets' \\\n    --repo_path='dir of the collected repos' \\\n    --variation_path='output dir to save the systhesized code snippets'>log\u002Fcomp_variation_waterfall.log 2>&1 &\n```\n\nthen run the following command:\n\n```sh\nbash scripts\u002Frun_batch_variation_no_code.sh\n```\n\nTo synthesize the data with the additive development method, you can first specify the parameters in the _run_batch_variation_with_code.sh_ script:\n\n```sh\nnohup python3 -B -u data_collect\u002Fcomponent_collector\u002Fvariater\u002Fvariation_waterfall_with_init_code.py \\\n    --iter_num='# of times to iterate the whole engineering process' \\\n    --screenshot_path='dir of the screenshots of the collected component code snippets' \\\n    --repo_path='dir of the collected repos' \\\n    --variation_path='output dir to save the systhesized code snippets'>log\u002Fcomp_variation_waterfall_with_init_code.log 2>&1 &\n```\n\nthen run the following command:\n\n```sh\nbash scripts\u002Frun_batch_variation_with_code.sh\n```\n\n### Modeling & Training \nWe build Flame by connecting the Siglip Vision Encoder and the deepseek-coder models with a 2-layer MLP. This repository includes a modified version of the modeling implementation (Flame-Code-VLM\u002Fmodel) based on LLaVA-VL\u002FLLaVA-NeXT [https:\u002F\u002Fgithub.com\u002FLLaVA-VL\u002FLLaVA-NeXT](https:\u002F\u002Fgithub.com\u002FLLaVA-VL\u002FLLaVA-NeXT). To use it, simply replace the corresponding code files in the original repository with those from this repo.\n\n### Evaluation\nTo evaluate the model, you can first generate codes with the model using the following command:\n\nAfter the code generation, you can then render those code and get the screenshots by first specify the parameters in the _batch_eval_renderer.sh_ script:\n```sh\nGEN_CODE_DIR=\"\u003CDIR_OF_GENERATED_CODE>\"\nSCREENSHOT_DIR=\"\u003CDIR_TO_SAVE_SCREENSHOTS>\"\n```\n\nThen run the following command:\n```sh\nbash scripts\u002Fbatch_eval_renderer_run.sh\n```\n\nFinally, get the pass@k score by first add your model names in _eval_score.sh_:\n```sh\nMODEL_NAMES=(\"name of models to evaluate\")\n```\nThen run:\n```sh\nbash scripts\u002Feval_score_run.sh\n```\n\n## Dataset\nWe have opensourced our datasets constructed with our data collection and synthesis methods, as well as our test dataset used for evaluation:\n- Flame-Waterfall-React: \u003Chttps:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Waterfall-React>\n- Flame-Additive-React: \u003Chttps:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Additive-React>\n- Flame-Evo-React: \u003Chttps:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Evo-React>\n- Flame-Eval-React: \u003Chttps:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Eval-React>\n\n## Model\n- Flame_waterfall_7b: \u003Chttps:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fflame_waterfall_7b>\n- Llava-qwen2-7b-ov-flamewaterfall: \u003Chttps:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fllava-qwen2-7b-ov-flamewaterfall>\n\n### Comparative Study\nIn the following is an example of the comparative study between the generated code snippets of GPT-4o and Flame:\n\u003Cfigure>\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_12aca3e87aeb.png\" alt=\"GPT Example\">\n  \u003Cfigcaption style=\"text-align:center; color:#bbb; font-style:italic;\">Screenshot of the target page (left) and the generated code by GPT-4o (right)\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cfigure>\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_8083e3f4c952.png\" alt=\"Flame Example\">\n  \u003Cfigcaption style=\"text-align:center; color:#bbb; font-style:italic;\">Code generated by Flame including the style code (left), component code (middle), and rendered result (right).\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\n### Case Study\nExamples of the test pages and the rendered result of the code generated by Flame\n\n| Test Images | Screenshots of rendering results of code generated with Flame |\n| --- | --- |\n| \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_c6a5f7e6c6d7.png\" width=\"300\" \u002F> | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_9685d8fbef7f.png\" width=\"300\" \u002F> | \n| \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_1d47358b7a50.png\" width=\"300\" \u002F> | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_a761ff745695.png\" width=\"300\" \u002F> | \n| \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_5eaaaa83e7aa.png\" width=\"300\" \u002F> | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_abc0c5e8837f.png\" width=\"300\" \u002F> | \n\n## Contributing\nWe welcome contributions from the open-source community to improve Flame’s dataset, model, and evaluation pipeline. If you're interested in contributing, please follow these steps:\n1. Fork the repository.\n2. Create a new branch for your changes.\n3. Submit a pull request with a clear description of your modifications.\n\n## License\nFlame is released under the Apache 2.0 License. See the [LICENSE](LICENSE) file for more details.\n\n## Acknowledgements\nThis project was inspired by recent advancements in large vision-language models and automated front-end development. We acknowledge the contributions of the open-source community and prior research in vision-language modeling and automated code generation.\n\n\n## Citation\nIf Flame is useful for your research, please cite:\n```\n@article{ge2025advancing,\n  title={Advancing vision-language models in front-end development via data synthesis},\n  author={Ge, Tong and Liu, Yashu and Ye, Jieping and Li, Tianyi and Wang, Chao},\n  journal={arXiv preprint arXiv:2503.01619},\n  year={2025}\n}\n```\n","\u003Ch1 align=\"center\">Flame：通过数据合成推进前端开发中的视觉-语言模型\u003C\u002Fh1>\n\u003Cdiv align=\"center\" style=\"line-height: 1;\">\n  \u003Ca href=\"https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\" target=\"_blank\" style=\"margin: 2px;\">\n    \u003Cimg alt=\"Datasets&Models\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F%F0%9F%A4%97%20Datasets & Models-aaaaaa?color=555555&logoColor=white\" style=\"display: inline-block; vertical-align: middle;\"\u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Farxiv.org\u002Fabs\u002F2503.01619\" target=\"_blank\" style=\"margin: 2px;\">\n    \u003Cimg alt=\"Datasets&Models\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpaper-ffc107\" style=\"display: inline-block; vertical-align: middle;\"\u002F>\n  \u003C\u002Fa>\n\u003C\u002Fdiv>\n\u003Cp align=\"center\">\n  \u003Ca href=\"README.md\">English\u003C\u002Fa> | \u003Ca href=\"README_zh.md\">中文\u003C\u002Fa>\n\u003C\u002Fp>\n\n- [简介](#introduction)\n- [特性](#features)\n- [安装](#installation)\n- [使用](#usage)\n- [数据集](#dataset)\n- [模型](#model)\n- [贡献](#contributing)\n- [许可证](#license)\n- [致谢](#acknowledgements)\n\n## 简介\n像GPT-4o这样的最先进模型虽然在生成网页代码方面非常强大，但却无法满足现代前端（FE）工作流的动态需求。它们生成的代码往往是静态的，缺乏模块化、可重用性和动态行为等关键特性，而这些特性对于构建可扩展的交互式用户界面至关重要。这导致生成的代码效率低下且不兼容，偏离了最佳开发实践。\n\n为了克服这些局限性，我们引入了一个综合框架，包括数据合成流水线、模型训练流程和评估套件，形成了一个用于前端代码生成的完全集成的视觉-语言模型（VLM）解决方案。利用这个框架，我们结合Siglip视觉编码器和Deepseek编码器模型来生成React代码，开发出了具有多模态专长的前端语言助手Flame。\n\n在开发用于前端开发的强大大规模VLM时，主要挑战之一是缺乏高质量的图像-文本数据。为了解决这个问题，我们提出了一种自动化的数据合成流水线，能够提取、渲染并标注自包含的前端代码片段。该流水线确保生成大量、多样化且高保真的数据集，既可以产生单张图像输入，也可以生成多张图像输入，并附带详细的图像描述，以提升视觉链式思维（CoT）推理能力。在此过程中，我们利用DeepSeek的API整合了DeepSeek V2和V3模型来进行数据集构建。\n\n为了评估Flame的性能，我们建立了一个全面的评估套件，用于衡量三个关键因素：生成代码的语法精确性、功能正确性和视觉一致性。这确保了Flame生成的代码符合实际开发标准。\n\n目前，该框架专为基于React的开发设计和优化，充分利用其组件化架构来生成结构化、可重用的UI组件。然而，这种方法和流水线具有高度的可扩展性，只需进行少量修改即可适配其他前端框架，如Vue和Angular。\n\n本仓库提供了Flame的数据准备流水线、模型训练流程和评估套件的完整实现，使其成为推动多模态前端代码生成研究的宝贵资源。\n\n## 特性\n\n![image not found](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_59be304aac7c.png)\n\n- 综合数据准备流水线：该仓库包含用于提取、合成和构建多模态数据集的脚本和工具，采用了三种不同的数据合成方法：\n    - 基于演进的合成\n    - 基于瀑布模型的合成\n    - 增量式开发合成\n- 端到端训练流水线：实现了Flame的三阶段训练策略，包括：\n    - 使用公开数据集进行视觉编码器预训练\n    - 使用合成数据集进行图像布局解读训练\n    - 针对图像到代码生成的完整指令调优\n- React代码生成评估流水线：该仓库提供：\n    - Flame-React-Eval基准测试数据集\n    - 用于功能正确性和视觉保真度评估的自动化测试脚本\n    - 使用渲染输出的余弦相似度实现pass@k评估指标\n支持多图像输入：该模型和流水线可以通过处理多个版本的设计原型图，并相应更新生成的代码，从而实现UI的迭代优化。\n\n本仓库提供了所有必要的脚本、模型和评估工具，以便重现我们的实验，并进一步扩展Flame以开展多模态前端代码生成的研究。\n\n## 安装\n请按照以下步骤进行安装：\n\n1. 克隆仓库：\n    ```sh\n    git clone \n    ```\n2. 进入项目目录：\n    ```sh\n    cd Flame\n    ```\n3. 创建conda环境：\n    ```sh\n    conda env create -f environment.yml\n    conda activate flame\n    ```\n4. 安装node依赖：\n    ```sh\n    npm install\n    ```\n\n## 使用\n\n### 数据准备\n数据准备流程包含三个主要步骤：\n\n#### 1. 生成自包含的组件代码片段\n要从 GitHub 上的仓库中生成自包含的组件代码片段，可以运行以下命令：\n\n```sh\nbash scripts\u002Fcollect_gh_code_run.sh\n```\n\n在 `collect_gh_code.sh` 脚本中，包含了收集仓库、提取组件以及提取代码中使用的图片这三个步骤。你可以根据需求在脚本中指定参数：\n\n```sh\necho \"步骤1：收集仓库...\"\npython3 -B data_collect\u002Frepo_collector\u002Fcollect_info.py \\\n  --language '目标语言' \\\n  --start_date '目标起始日期，格式为“YYYY-MM-DD”' \\\n  --end_date '目标结束日期，格式为“YYYY-MM-DD”' \\\n  --per_page '每页通过 GitHub API 克隆的仓库数量' \\\n  --sleep_time '每次请求 GitHub API 之间的休眠时间' \\\n  --star '目标仓库的最小星数' \\\n  --time_range '时间范围' \\\n  --kw '关键词' \\\n  --output_repo_path '存储仓库的输出目录' &\n\necho \"步骤2：收集组件...\"\npython3 -B data_collect\u002Fcomponent_collector\u002Fdistiller\u002Fdistiller_cls.py \\\n  --threads 'N' \\\n  --repo_path '已下载仓库的目录' \\\n  --output_path '存储生成的自包含组件代码片段的输出目录' &\n\necho \"步骤3：提取代码中使用的图片...\"\nnode data_collect\u002Fcomponent_collector\u002Fdistiller\u002Fimg_distiller.js \\\n  '已下载仓库的目录' \\\n  '已下载仓库的组件代码片段目录' &\n```\n\n#### 2. 将代码片段渲染为图片\n要将代码片段渲染为图片，首先需要指定参数：\n\n```sh\nCODE_DIR='已下载仓库的组件代码片段目录'\nSCREENSHOT_DIR=\"存储渲染后图片的输出目录\"\n```\n\n然后运行以下命令：\n\n```sh\nbash scripts\u002Frenderer_run.sh\n```\n\n#### 3. 生成代码片段的指令\n要为代码片段生成指令，首先需要指定参数：\n\n```sh\nINST_PATH=\"存储最终多模态数据的输出目录\"\nnohup python -B -u data_collect\u002Fcomponent_collector\u002Fdescriber\u002Fgen_inst.py \\\n  --screenshot_path '渲染后的图片目录' \\\n  --code_path '已下载仓库的组件代码片段目录' \\\n  --inst_path $INST_PATH \\\n  --ori_img_path $INST_PATH\u002Fori_images \\\n  --cropped_img_path $INST_PATH\u002Fcropped_images >log\u002Fbatch_inst.log 2>&1 &\n```\n\n然后运行以下命令：\n\n```sh\nbash scripts\u002Fgen_inst.sh\n```\n\n#### 数据合成\n要使用瀑布模型方法合成数据，首先需要在 `run_batch_variation_no_code.sh` 脚本中指定参数：\n\n```sh\nnohup python3 -B -u data_collect\u002Fcomponent_collector\u002Fvariater\u002Fvariation_waterfall_no_code.py \\\n    --iter_num='# 次迭代整个工程过程' \\\n    --max_system_infer='# 开始时推断的系统数量' \\\n    --screenshot_path='收集到的组件代码片段截图目录' \\\n    --repo_path='收集到的仓库目录' \\\n    --variation_path='保存合成代码片段的输出目录'>log\u002Fcomp_variation_waterfall.log 2>&1 &\n```\n\n然后运行以下命令：\n\n```sh\nbash scripts\u002Frun_batch_variation_no_code.sh\n```\n\n若要使用增量开发方法合成数据，首先需要在 `run_batch_variation_with_code.sh` 脚本中指定参数：\n\n```sh\nnohup python3 -B -u data_collect\u002Fcomponent_collector\u002Fvariater\u002Fvariation_waterfall_with_init_code.py \\\n    --iter_num='# 次迭代整个工程过程' \\\n    --screenshot_path='收集到的组件代码片段截图目录' \\\n    --repo_path='收集到的仓库目录' \\\n    --variation_path='保存合成代码片段的输出目录'>log\u002Fcomp_variation_waterfall_with_init_code.log 2>&1 &\n```\n\n然后运行以下命令：\n\n```sh\nbash scripts\u002Frun_batch_variation_with_code.sh\n```\n\n### 建模与训练\n我们通过一个两层的 MLP 将 Siglip 视觉编码器和 deepseek-coder 模型连接起来，构建了 Flame 模型。该仓库包含基于 LLaVA-VL\u002FLLaVA-NeXT [https:\u002F\u002Fgithub.com\u002FLLaVA-VL\u002FLLaVA-NeXT](https:\u002F\u002Fgithub.com\u002FLLaVA-VL\u002FLLaVA-NeXT) 的修改版建模实现（Flame-Code-VLM\u002Fmodel）。使用时，只需将原仓库中的相应代码文件替换为此仓库中的文件即可。\n\n### 评估\n要评估模型，首先可以使用以下命令让模型生成代码：\n\n代码生成完成后，可以通过先在 `batch_eval_renderer.sh` 脚本中指定参数来渲染这些代码并获取截图：\n```sh\nGEN_CODE_DIR=\"\u003C生成代码的目录>\"\nSCREENSHOT_DIR=\"\u003C保存截图的目录>\"\n```\n\n然后运行以下命令：\n```sh\nbash scripts\u002Fbatch_eval_renderer_run.sh\n```\n\n最后，通过在 `eval_score.sh` 中添加你的模型名称来计算 pass@k 分数：\n```sh\nMODEL_NAMES=(\"待评估的模型名称\")\n```\n\n然后运行：\n```sh\nbash scripts\u002Feval_score_run.sh\n```\n\n## 数据集\n我们开源了使用数据收集和合成方法构建的数据集，以及用于评估的测试数据集：\n- Flame-Waterfall-React：[https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Waterfall-React](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Waterfall-React)\n- Flame-Additive-React：[https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Additive-React](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Additive-React)\n- Flame-Evo-React：[https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Evo-React](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Evo-React)\n- Flame-Eval-React：[https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Eval-React](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM\u002FFlame-Eval-React)\n\n## 模型\n- Flame_waterfall_7b：[https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fflame_waterfall_7b](https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fflame_waterfall_7b)\n- Llava-qwen2-7b-ov-flamewaterfall：[https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fllava-qwen2-7b-ov-flamewaterfall](https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fllava-qwen2-7b-ov-flamewaterfall)\n\n### 对比研究\n以下是 GPT-4o 和 Flame 生成的代码片段对比示例：\n\u003Cfigure>\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_12aca3e87aeb.png\" alt=\"GPT 示例\">\n  \u003Cfigcaption style=\"text-align:center; color:#bbb; font-style:italic;\">目标页面截图（左）和 GPT-4o 生成的代码（右）\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\u003Cfigure>\n  \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_8083e3f4c952.png\" alt=\"Flame 示例\">\n  \u003Cfigcaption style=\"text-align:center; color:#bbb; font-style:italic;\">Flame 生成的代码，包括样式代码（左）、组件代码（中）和渲染结果（右）。\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\n### 案例研究\nFlame 生成代码的测试页面及渲染结果示例：\n\n| 测试图片 | 使用 Flame 生成的代码的渲染结果截图 |\n| --- | --- |\n| \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_c6a5f7e6c6d7.png\" width=\"300\" \u002F> | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_9685d8fbef7f.png\" width=\"300\" \u002F> | \n| \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_1d47358b7a50.png\" width=\"300\" \u002F> | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_a761ff745695.png\" width=\"300\" \u002F> | \n| \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_5eaaaa83e7aa.png\" width=\"300\" \u002F> | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_readme_abc0c5e8837f.png\" width=\"300\" \u002F> |\n\n## 贡献\n我们欢迎开源社区为改进 Flame 的数据集、模型和评估流程做出贡献。如果您有兴趣参与贡献，请按照以下步骤操作：\n1. 克隆仓库并创建分支。\n2. 为您的更改创建一个新分支。\n3. 提交包含清晰修改说明的拉取请求。\n\n## 许可证\nFlame 采用 Apache 2.0 许可证发布。更多详情请参阅 [LICENSE](LICENSE) 文件。\n\n## 致谢\n本项目受到大型视觉-语言模型及自动化前端开发领域最新进展的启发。我们感谢开源社区以及先前在视觉-语言建模和自动化代码生成方面的研究工作所作出的贡献。\n\n\n## 引用\n如果 Flame 对您的研究有所帮助，请引用以下文献：\n```\n@article{ge2025advancing,\n  title={通过数据合成推进视觉-语言模型在前端开发中的应用},\n  author={Ge, Tong 和 Liu, Yashu 和 Ye, Jieping 和 Li, Tianyi 和 Wang, Chao},\n  journal={arXiv 预印本 arXiv:2503.01619},\n  year={2025}\n}\n```","# Flame-Code-VLM 快速上手指南\n\nFlame 是一个专为前端开发设计的视觉 - 语言模型（VLM），能够根据设计图生成高质量、模块化且可复用的 React 代码。本项目提供了完整的数据合成流水线、模型训练框架及评估套件。\n\n## 环境准备\n\n在开始之前，请确保您的系统满足以下要求：\n\n*   **操作系统**: Linux (推荐 Ubuntu 20.04+) 或 macOS\n*   **Python**: 3.8+ (推荐使用 Conda 管理环境)\n*   **Node.js**: 已安装并配置好 `npm` (用于渲染截图和依赖安装)\n*   **GPU**: 建议配备 NVIDIA GPU (支持 CUDA)，显存建议 16GB 以上以进行推理或微调\n*   **Git**: 用于克隆仓库\n\n**前置依赖检查：**\n确保已安装 `conda` 和 `node\u002Fnpm`。若未安装 Node.js，请访问 [Node.js 官网](https:\u002F\u002Fnodejs.org\u002F) 下载。\n\n## 安装步骤\n\n### 1. 克隆项目\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame.git\ncd Flame\n```\n> **提示**：如果 GitHub 访问较慢，可使用国内镜像源加速：\n> `git clone https:\u002F\u002Fgitee.com\u002Fmirror\u002FFlame-Code-VLM.git` (如有对应镜像) 或使用代理。\n\n### 2. 创建 Python 环境\n使用项目提供的 `environment.yml` 文件创建隔离环境：\n```sh\nconda env create -f environment.yml\nconda activate flame\n```\n> **加速建议**：若 conda 下载缓慢，建议配置清华或中科大镜像源：\n> ```sh\n> conda config --add channels https:\u002F\u002Fmirrors.tuna.tsinghua.edu.cn\u002Fanaconda\u002Fpkgs\u002Fmain\u002F\n> conda config --add channels https:\u002F\u002Fmirrors.tuna.tsinghua.edu.cn\u002Fanaconda\u002Fpkgs\u002Ffree\u002F\n> ```\n\n### 3. 安装 Node.js 依赖\n项目包含用于代码渲染和截图的脚本，需安装 JS 依赖：\n```sh\nnpm install\n```\n\n### 4. 模型权重准备\n从 Hugging Face 下载预训练模型权重。\n> **注意**：若无法直接访问 Hugging Face，建议使用国内镜像站（如 ModelScope 或 Hugging Face 镜像）下载后放入本地目录。\n> *   模型地址：https:\u002F\u002Fhuggingface.co\u002FFlame-Code-VLM\u002Fflame_waterfall_7b\n\n## 基本使用\n\nFlame 的核心功能是将前端组件截图转换为 React 代码。以下是基于已有模型进行代码生成的简化流程。\n\n### 第一步：准备输入数据\n确保你有一张前端界面的截图（例如 `input_design.png`），并将其放置在指定目录。\n\n### 第二步：运行代码生成\n虽然完整的推理脚本可能需要根据具体任务配置，但核心调用逻辑基于加载 Siglip Vision Encoder 和 Deepseek Coder 模型。\n\n若使用项目提供的评估脚本来测试生成效果，可参考以下流程（需先配置好模型路径）：\n\n1.  **生成代码**：\n    加载模型并对输入图像进行推理（具体推理脚本需根据 `model` 目录下的实现编写，或复用评估流程中的生成部分）。\n\n2.  **渲染与评估（可选）**：\n    如果你需要验证生成代码的视觉效果，可以使用内置的渲染流水线。\n\n    设置生成代码目录和截图保存目录：\n    ```sh\n    export GEN_CODE_DIR=\".\u002Fgenerated_codes\"\n    export SCREENSHOT_DIR=\".\u002Frendered_screenshots\"\n    ```\n\n    运行渲染脚本将生成的代码转为图片：\n    ```sh\n    bash scripts\u002Fbatch_eval_renderer_run.sh\n    ```\n\n    计算 Pass@k 指标（评估代码功能正确性与视觉一致性）：\n    编辑 `scripts\u002Feval_score.sh` 填入你的模型名称：\n    ```sh\n    MODEL_NAMES=(\"flame_waterfall_7b\")\n    ```\n    然后执行：\n    ```sh\n    bash scripts\u002Feval_score_run.sh\n    ```\n\n### 进阶：数据合成（可选）\n如果你希望构建自己的训练数据，可以使用项目提供的数据合成流水线。例如，从 GitHub 收集组件并生成指令数据：\n\n1.  **收集仓库与组件**：\n    ```sh\n    bash scripts\u002Fcollect_gh_code_run.sh\n    ```\n    *(需在脚本内配置语言、时间范围、Star 数等参数)*\n\n2.  **渲染组件为图片**：\n    ```sh\n    export CODE_DIR=\".\u002Fcomponent_snippets\"\n    export SCREENSHOT_DIR=\".\u002Fcomponent_images\"\n    bash scripts\u002Frenderer_run.sh\n    ```\n\n3.  **生成指令数据**：\n    ```sh\n    export INST_PATH=\".\u002Fmultimodal_dataset\"\n    bash scripts\u002Fgen_inst.sh\n    ```\n\n---\n**更多资源**：\n*   **数据集下载**: [HuggingFace Datasets](https:\u002F\u002Fhuggingface.co\u002Fdatasets\u002FFlame-Code-VLM)\n*   **论文详情**: [ArXiv Paper](https:\u002F\u002Farxiv.org\u002Fabs\u002F2503.01619)","某电商初创团队的设计师刚在 Figma 中完成了一套包含复杂交互逻辑的“商品详情页”高保真原型，急需将其转化为可投入生产的 React 代码以赶上下周的产品上线。\n\n### 没有 Flame-Code-VLM 时\n- **人工还原耗时漫长**：前端工程师需对着设计图手动编写 JSX 结构和 CSS 样式，将静态图片转为代码通常需要数天时间。\n- **代码缺乏复用性**：直接生成的代码往往是“一次性”的硬编码，缺乏组件化思维，难以在后续页面中重复利用。\n- **动态行为缺失**：通用大模型生成的代码多为静态展示，无法自动实现轮播图切换、库存动态更新等关键交互逻辑。\n- **视觉还原度低**：人工编码或普通工具生成的界面常出现间距偏差、字体不一致等问题，需反复调整才能对齐设计稿。\n\n### 使用 Flame-Code-VLM 后\n- **秒级生成高质量代码**：Flame-Code-VLM 直接读取设计截图，利用其视觉语言建模能力，瞬间输出结构完整、语法精准的 React 组件代码。\n- **原生支持组件化架构**：得益于针对 React 的深度训练，生成的代码自动拆分为独立的子组件，天然具备高复用性和可维护性。\n- **智能实现动态交互**：工具能理解界面逻辑，自动补全状态管理和事件处理函数，让生成的页面不仅“长得像”，而且“动得对”。\n- **像素级视觉一致性**：通过自动化数据合成训练，Flame-Code-VLM 确保了输出代码在布局、色彩和细节上与原始设计稿高度一致，几乎无需二次微调。\n\nFlame-Code-VLM 将原本需要数天的“设计转代码”流程压缩至分钟级，真正打通了从创意原型到生产级前端代码的最后一公里。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FFlame-Code-VLM_Flame-Code-VLM_12aca3e8.png","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FFlame-Code-VLM_7aeffeda.png","",null,"https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM",[81,85,89,93,97],{"name":82,"color":83,"percentage":84},"Python","#3572A5",67.7,{"name":86,"color":87,"percentage":88},"JavaScript","#f1e05a",22.2,{"name":90,"color":91,"percentage":92},"Shell","#89e051",8.4,{"name":94,"color":95,"percentage":96},"CSS","#663399",1,{"name":98,"color":99,"percentage":100},"HTML","#e34c26",0.7,559,48,"2026-04-03T17:21:08","Apache-2.0",4,"未说明","未说明 (模型基于 Siglip Vision Encoder 和 Deepseek Coder，通常训练\u002F推理需要 NVIDIA GPU，但 README 未明确具体型号或显存要求)",{"notes":109,"python":110,"dependencies":111},"1. 项目依赖 Conda 管理 Python 环境（需运行 'conda env create -f environment.yml'）。2. 数据渲染和处理流程需要 Node.js 环境（需运行 'npm install'）。3. 模型架构基于 LLaVA-NeXT 修改，连接了 Siglip 视觉编码器和 Deepseek Coder 模型。4. 数据合成 pipeline 依赖 DeepSeek API (V2\u002FV3) 进行数据集构建。5. 评估环节包含自动化测试脚本以验证功能正确性和视觉一致性。","3.x (通过 conda environment.yml 安装，具体版本未在文本中列出)",[112,113,114,115,116],"conda (environment.yml)","node\u002Fnpm","Siglip Vision Encoder","Deepseek Coder","LLaVA-VL\u002FLLaVA-NeXT (修改版)",[14,51,15,13,54,26],[119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137],"code-generation","data-synthesis","frontend-development","vision-language-model","ai","deep-learning","frontend","multimodal","open-source","react","vlm","deepseek","design-to-code","front-end","image-to-code","image-to-text","llm","vue","screen-to-code","2026-03-27T02:49:30.150509","2026-04-06T08:10:25.786599",[141,146,151,156,161,166,171,175],{"id":142,"question_zh":143,"answer_zh":144,"source_url":145},16077,"运行 flame_waterfall_7b 模型的最低硬件配置要求是什么？","官方测试过 RTX8000 推理没有问题。对于 T4 GPU 或 Apple M3 等配置，官方未进行完整测试，用户反馈可能存在推理时间过长或无结果的情况。建议参考 Hugging Face 上的示例代码，并确保显存充足（如 8G 显存可能较慢）。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F6",{"id":147,"question_zh":148,"answer_zh":149,"source_url":150},16078,"如何在 Cursor 等 AI IDE 中集成使用该模型？","目前项目仅在 Hugging Face 开源了模型和数据，未提供独立的 API 服务。若想在 Cursor 中使用，需要自行寻找 proxy 进行部署，将其转换为第三方 API 接口后接入。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F7",{"id":152,"question_zh":153,"answer_zh":154,"source_url":155},16079,"模型推理的具体参数设置和 Batch Size 是多少？","推理参数建议设置为：do_sample=True, temperature=0.1, max_new_tokens=4096, top_p=0.95, repetition_penalty=1.05。Batch inference 的 Batch Size 根据机器配置调整，官方测试时设置为 4。详细代码可参考 Hugging Face 模型页中的 Model Cards。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F12",{"id":157,"question_zh":158,"answer_zh":159,"source_url":160},16080,"在 Mac 上运行脚本遇到路径或包引用错误如何解决？","这是 Python 引用路径问题。可以在执行脚本的 shell 开头添加环境变量配置：export PYTHONPATH=\"${PYTHONPATH}:\u003CPATH_TO_YOUR_PROJECT>\"（将 \u003CPATH_TO_YOUR_PROJECT> 替换为项目实际路径），或者直接在系统中配置环境变量。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F9",{"id":162,"question_zh":163,"answer_zh":164,"source_url":165},16081,"该模型是否支持业务逻辑代码（如 API 请求、状态管理）的生成？","支持。Flame 不仅生成 UI 代码，还涵盖常规数据处理和交互逻辑（如 API 请求、状态管理等）。对于定制化业务逻辑，用户可以在生成代码基础上自行扩展，或利用项目提供的方案基于私域代码数据集微调模型以优化效果。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F5",{"id":167,"question_zh":168,"answer_zh":169,"source_url":170},16082,"在 Windows 系统上安装依赖报错怎么办？","如果在 Windows 下遇到特定库的安装报错，可以尝试删除依赖列表中的这三个库（通常指 Linux\u002FMac 特有的系统级依赖库），一般不影响核心功能运行。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F3",{"id":172,"question_zh":173,"answer_zh":174,"source_url":150},16083,"与 Claude 3.7 相比，Flame 模型在前端生成场景有什么优势？","目前的 SOTA 模型通常主要生成 HTML，若要生成符合开发习惯的 React 代码，往往需要非常详细的 Prompt 限制或配合 Agent 使用。Flame 的目标是能够直接通过图片（无需复杂 Prompt，仅需类似“生成下图对应的 react 代码”的简单指令）生成与前端开发习惯一致的 React 代码。",{"id":176,"question_zh":177,"answer_zh":178,"source_url":179},16084,"未来有计划支持 Vue 框架的代码生成吗？","团队目前对 Vue 版本暂无明确规划。但理论上现有代码迁移成本不大，如果有强烈需求，团队可以提供技术支持协助迁移。","https:\u002F\u002Fgithub.com\u002FFlame-Code-VLM\u002FFlame-Code-VLM\u002Fissues\u002F2",[]]