# AIChatHub

**Repository Path**: vebicoding/aichat-hub

## Basic Information

- **Project Name**: AIChatHub
- **Description**: AIChatHub是一个移动端优先的 H5 大模型工作台，前端基于 uni-app，后端基于 Spring Boot，数据库使用 MySQL。系统支持用户登录、模型配置、流式聊天、会话记忆、Markdown 代码展示和 AI 生图，可对接OpenAI-Compatible 主流大模型服务。用户可自定义 Base URL、接口路径、模型名称和 API Key，聊天记录、生图历史及配置信息持久化
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2026-05-14
- **Last Updated**: 2026-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# H5 大模型聊天与生图工作台

一个移动端优先的 AI 工作台项目，支持用户登录、模型配置、流式聊天、会话记忆、AI 生图和历史记录持久化。

项目采用前后端分离架构：

- 前端：`uni-app` H5
- 后端：`Spring Boot`
- 数据库：`MySQL`
- 模型协议：OpenAI-Compatible API

## 功能特性

- ✅ 用户注册、登录和退出
- ✅ 支持配置聊天模型和生图模型
- ✅ 支持自定义 Base URL、接口路径、模型名称和 API Key
- ✅ 支持 OpenAI-Compatible 服务商接入
- ✅ 聊天支持流式输出
- ✅ 聊天支持 Markdown 和代码块展示
- ✅ 聊天会话支持记忆和历史记录保存
- ✅ 聊天对话支持新增、切换和删除
- ✅ 生图支持图片比例选择
- ✅ 生图历史记录持久化
- ✅ 生图历史图片支持删除
- ✅ API Key 后端加密存储，前端只展示脱敏内容
- ✅ H5 页面适配手机端访问

## 技术栈

### 前端

- uni-app
- Vue 3
- Vite
- H5

### 后端

- Java 17
- Spring Boot 3.3.5
- Spring Web
- Spring Data JPA
- Bean Validation
- MySQL

## 项目结构

```
.
├── chat-api                 # Spring Boot 后端
│   ├── src/main/java
│   │   └── com/example/chatai
│   │       ├── config       # Web、鉴权、日志、业务配置
│   │       ├── controller   # REST API 控制器
│   │       ├── dto          # 请求和响应对象
│   │       ├── entity       # JPA 实体
│   │       ├── repository   # 数据访问层
│   │       ├── service      # 业务逻辑和大模型调用
│   │       └── util         # 密码哈希、密钥加解密
│   └── src/main/resources
│       └── application.yml  # 后端配置
│
├── chat-h5                  # uni-app H5 前端
│   ├── pages                # 页面
│   ├── services             # API 封装
│   ├── utils                # 请求工具
│   ├── static               # 静态资源
│   └── vite.config.js       # H5 开发代理配置
│
├── ARCHITECTURE.md          # 架构设计说明
└── README.md
```

## 系统架构

```
uni-app H5
  ├── 登录注册
  ├── 模型配置
  ├── 流式聊天
  └── AI 生图
        │
        | HTTP / SSE
        v
Spring Boot API
  ├── Auth 鉴权
  ├── Model Config 模型配置
  ├── Chat 会话与记忆
  ├── Image 生图代理
  └── LLM Adapter 大模型适配
        │
        v
MySQL
  ├── users
  ├── login_tokens
  ├── model_configs
  ├── chat_sessions
  ├── chat_messages
  └── image_generations
```

前端不直接请求第三方大模型。用户在 H5 页面中配置模型信息，后端负责加密保存 API Key，并通过 OpenAI-Compatible 协议调用对应模型服务。

## 本地运行

### 1. 创建数据库

```sql
CREATE DATABASE chat_ai DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

### 2. 修改后端配置

编辑 `chat-api/src/main/resources/application.yml`，修改 MySQL 连接信息和业务密钥：

```yaml
spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/chat_ai?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&useSSL=false
    username: root
    password: root

app:
  secret: replace-with-a-strong-random-secret
```

### 3. 启动后端

```bash
cd chat-api
mvn spring-boot:run
```

后端默认端口：`http://localhost:8080`

### 4. 启动前端

使用 HBuilderX 打开 `chat-h5`，运行到浏览器 H5。

开发环境下前端请求 `/api`，`vite.config.js` 已配置代理到 `http://localhost:8080`。

## 模型配置说明

进入 H5 页面后，在「配置」页添加模型配置。

### 聊天模型示例

```
配置类型：聊天模型
Base URL：https://api.openai.com
聊天接口：/v1/chat/completions
聊天模型：按服务商实际模型填写
API Key：当前服务商的 API Key
记忆消息数：例如 12
```

如果服务商使用 Responses API，可以将聊天接口配置为 `/v1/responses`。

### 生图模型示例

```
配置类型：生图模型
Base URL：https://api.openai.com
生图接口：/v1/images/generations
生图模型：按服务商实际模型填写
API Key：当前服务商的 API Key
```

只要服务商提供 OpenAI-Compatible 接口，就可以使用同一套配置方式接入。

## 主要接口

```text
POST   /api/auth/register       # 用户注册
POST   /api/auth/login         # 用户登录
POST   /api/auth/logout        # 用户登出

GET    /api/model-configs       # 获取模型配置列表
POST   /api/model-configs       # 创建模型配置
PUT    /api/model-configs/{id}  # 更新模型配置
POST   /api/model-configs/{id}/active  # 激活配置
GET    /api/model-configs/{id}/secret  # 获取解密后的 API Key
DELETE /api/model-configs/{id}  # 删除模型配置

GET    /api/chat/sessions                    # 获取会话列表
POST   /api/chat/sessions                  # 创建会话
DELETE /api/chat/sessions/{id}             # 删除会话
GET    /api/chat/sessions/{id}/messages     # 获取消息历史
POST   /api/chat/sessions/{id}/messages    # 发送消息
POST   /api/chat/sessions/{id}/messages/stream  # 流式聊天

GET    /api/images/generations             # 获取生图历史
POST   /api/images/generations            # 生成图片
GET    /api/images/generations/{id}/content # 获取图片内容
DELETE /api/images/generations/{id}       # 删除图片记录
```

## 数据持久化

系统会将以下数据保存到 MySQL：

- 用户账号信息
- 登录 token
- 模型配置（加密后的 API Key）
- 聊天会话
- 聊天消息（包含会话记忆）
- 生图记录（图片 URL 或本地 base64 内容）

## 安全说明

- 前端不会直接暴露第三方模型 API Key
- API Key 在后端使用 AES-GCM 加密后保存到数据库
- 配置列表接口只返回脱敏后的 API Key
- 图片内容接口支持 token 校验

## 适用场景

- 个人 AI 工作台
- 多模型聊天测试
- OpenAI-Compatible 服务商聚合入口
- 简单的 AI 生图历史管理
- Spring Boot + uni-app 前后端分离学习项目