# OpenInula-codegen

**Repository Path**: chen-kai01060722/open-inula-codegen

## Basic Information

- **Project Name**: OpenInula-codegen
- **Description**: OpenInula-codegen
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-15
- **Last Updated**: 2024-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OpenInula Codegen

## 项目简介
OpenInula Codegen 是一个利用AI能力，让开发者通过文字描述或者图片生成代码并提供相关开发功能的工具，其生成代码以 OpenInula 作为框架的前端代码为主。使用者可以通过描述或者图片作为输入，让网站生成组件或页面，并通过网站相关功能进行进一步修改与完善。

## 使用效果
### 生成
![效果图](./data/images/example_generation.gif)

### 编辑
![效果图2](./data/images/example_edit.gif)


## 整体架构
![架构图](./data/images/architecture.png)
 整体架构可分为网站前端、服务器后端和 LLM SDK 三个部分,采用了前后端分离的设计。
1. 网站前端主要负责用户交互,包括:
    - 让用户输入页面的文本描述和相关图片
    - 与后端通过 tRPC 通信，发送请求并接收流式的生成代码，同时在页面上渲染
    -  通过在线编辑器功能，允许用户对生成的代码预览、修改和进一步的提问
    - 提供下载命令，让用户通过 inula-cli 一键下载整合代码到项目中
2. 服务器后端的功能:
    - 接收来自前端的 tRPC 请求
    - 调用 LLM SDK 进行代码生成
    - 将 LLM 返回的流式代码数据通过 tRPC(websocket)推送给前端
3. LLM SDK 是对接大语言模型的关键部分:
    - 建立向量数据库，记录openInula的特有能力和生态的语料数据
    - 根据来自服务器的请求，通过 prompt 模板和向量数据库查询，构造对应的 prompt，约束生成代码使用的技术栈，包括框架、组件库和样式
    - 适配不同大语言模型的 API 接口,传入构造好的 prompt
    - 接收大语言模型返回的流式代码数据,转发给服务器后端

## 工作流程
![流程图](./data/images/workflow.png)
```mermaid
sequenceDiagram
Actor User
User->>Website: 描述页面的文本和图片
Website->>Server: 通过trpc请求
Server->>LLM SDK: 调用
LLM SDK->>大语言模型: 通过prompt模板构造prompt
大语言模型-->> LLM SDK: 返回流式代码数据
LLM SDK-->>Server: 返回流式代码数据
Server-->>Website: 通过trpc(websocket)流式推送到页面进行渲染
User->>Website: 通过在线编辑器或者提问，修改代码
Note right of User: 完成代码调整
User->>Website: 点击生成下载命令，通过inula-cli<br/>下载整合代码到项目中
```

## 具体特性
- LLM SDK
    - [x] 生成使用指定技术栈（框架，组件库和样式框架）的页面代码
    - [x] 支持流式数据
    - [ ] 支持代码调整 (直接二次描述和针对局部元素进行描述)
    - [ ] 解决大模型幻觉问题，提高准确率
    - [ ] 支持回答选择
    - [x] 支持 TailwindCSS
    - [ ] 支持使用组件库 (openinula生态组件)
    - [ ] 支持图片资源生成 (DALL·E-3)
- website
    - [x] 输入 prompt 到返回代码全流程打通
    - [x] 显示源代码
    - [x] 支持预览
    - [x] 支持多版本控制
    - [x] 支持组件库 (shadcn / openinula生态组件)
    - [ ] 支持图像 prompt
    - [ ] 支持渐进式页面预览
- devtool
    - [ ] 检查 (inspect) 组件代码
    - [ ] 支持通过 prompt 微调代码 (针对页面元素)
- server
    - [x] 架设服务器
    - [x] 实现与 LLM 对话的 API
    - [ ] 用户系统
- 图像识别
    - [ ] 提取单独元素边框，位置，类型，颜色信息
    - [ ] 打通图像识别 + LLM 生成流程
    - [ ] 图片资源切割
    - [ ] 提取元素层级关系，并列关系，元素角色信息
    - [ ] 识别复杂大组件

## 项目优势

1. 用户友好: 允许用户以文字描述和图片这种更自然、更贴近人类思维方式的形式来表达需求,而不需要掌握复杂的编程技能,大大降低了开发门槛,使得更多人能参与到开发过程中来。
2. 生态友好：支持不同大预言模型和组件库技术。
3. 类型安全：利用 tRPC通过在前端和后端之间共享类型定义,可以在编译时就捕捉到接口调用的类型错误,提高了代码的类型安全性和可维护性。
4. 可拓展性强：通过将不同的功能模块和业务单元拆分为独立的package，通过monorepo集中进行管理，不同的package可以独立拓展进行使用，如LLM SDK为未来集成更多AI能力提供了便利的接口

## 如何开发
1. 在项目根目录创建 .env 文件, 并填入以下变量
```
AZURE_OPENAI_API_ENDPOINT=<your endpoint>
AZURE_OPENAI_API_KEY=<your key>
AZURE_OPENAI_API_DEPLOYMENT_NAME=<deployment name>
```

2. 运行开发服务器
```shell
pnpm i

# in ./packages/server
pnpm run dev # or use `pnpm run dev:mock` to use mock data

# in ./packages/website
pnpm run dev
```