# inula-code-generator
**Repository Path**: openInula/inula-code-generator
## Basic Information
- **Project Name**: inula-code-generator
- **Description**: AI生成代码
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 4
- **Forks**: 1
- **Created**: 2024-07-30
- **Last Updated**: 2025-01-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
OpenInula Code Generator Platform
AI视觉模型生成前端代码
Explore the repos »
Request Feature
## 项目介绍
**openInula AI 代码生成工具** 是一个结合大语言模型能力和视觉识别技术，生成基于 openInula 生态和特定 UI 组件库应用页面代码的工具。
### 项目特点
1. **多模态输入**: 支持使用网页设计稿或图片作为输入，生成相应的代码。
2. **openInula 生态适配**: 生成的代码基于 openInula 生态，确保与其框架和规范兼容。
3. **实时编辑与渲染**: 开发者可以手动编辑生成的代码，并实时查看渲染效果。
4. **交互式修改**: 开发者可以向 AI 提出修改需求，AI 将根据当前代码生成修改后的版本。
5. **版本控制**: 支持多版本管理，便于开发者进行代码迭代与回溯。
6. **生态友好**: 大语言模型可根据需要替换，提高工具的灵活性与适应性。
7. **渐进式生成**: 支持分步生成代码，让开发者逐步完善和优化页面。
8. **代码导出**: 允许开发者下载生成的代码，方便后续集成与部署。
### 视频演示
OpenInula AI 代码生成工具 [操作演示视频](Docs/项目展示视频.mp4)
### 系统使用流程
系统使用流程图可参照如下：
## 项目运行
### 后端运行
* 进入后端
```sh
cd inula-code-generator-web\backend
```
* 下载环境配置
```sh
pip install -r requirements.txt
```
* 启动后端
```sh
python manage.py runserver 0.0.0.0:9090
```
### 前端运行
* 进入前端
```sh
cd inula-code-generator-web\frontend
```
* 下载依赖
```sh
npm install
```
* 启动前端
```sh
npm run dev
```
## 项目结构
### 技术架构
本项目首先深入研究**视觉识别**技术在前端开发中的应用，通过YOLOv10模型进行多目标检测，构建高效的组件识别系统；然后，整合识别结果为**结构化的JSON文件**，确保数据的准确性与完整性；最终，利用**大语言模型**基于JSON文件生成符合用户需求的前端代码，实现从设计到代码的快速转化。此外，前后端的高效协作显著提升了系统的响应速度和用户体验，最终形成一个完整的视觉识别与代码生成解决方案。
整体技术方案如下图：
### 项目文档
有关更多技术内容、开发流程等，请参阅[项目文档](Docs)。
- [技术及总结报告](Docs/技术报告.docx)
- [用户手册](Docs/用户手册.md)
- [开发流程](Docs/Development_Docs)
## 许可协议
OpenInula 主要遵循 [Mulan Permissive Software License v2](https://gitee.com/link?target=http%3A%2F%2Flicense.coscl.org.cn%2FMulanPSL2) 协议，详情请参考各代码仓 `LICENSE.txt` 。
## 联系方式
Renlirong - email@renlirong@foxmail.com
仓库链接： [inula-code-generator](https://gitee.com/openInula/inula-code-generator) 