ai-chat-ui/README.md

# AI-CHAT-UI

一个基于 Vue 和 markstream-vue 构建的现代化 AI 对话界面，提供丰富的交互功能和精美的视觉体验。支持多模型集成，包括智谱 GLM、阿里云百炼、OpenAI/Deepseek 等。

## 页面展示

![](screenshots/img.png)
![](screenshots/img_1.png)
![](screenshots/img_2.png)
![](screenshots/img_3.png)
![](screenshots/img_4.png)
![](screenshots/img_5.png)
![](screenshots/img_6.png)

## ✨ 核心功能

### 前端功能

| 功能    | 详细描述                                |
|-------|-------------------------------------|
| 对话历史  | 支持多对话管理、置顶、重命名、删除                   |
| 新建对话  | 快捷键 Ctrl+N 或点击按钮快速创建                |
| 页面布局  | 支持宽屏/标准模式切换，适配不同使用场景                |
| 附件上传  | 支持图片、文件上传和在线预览                      |
| 智能搜索  | 深度搜索/联网搜索，工具栏开关一键切换                 |
| 消息操作  | 消息栏支持点赞、点踩、复制操作                     |
| 精美UI  | 现代化设计，支持暗色主题，视觉体验优秀                 |
| 消息布局  | AI/用户消息左右分布（用户右侧，AI 左侧），符合使用习惯      |
| 多类型消息 | 支持文本、图片、视频、附件、推荐选项等多种消息类型展示         |
| 快捷键系统 | 完整的快捷键支持，提升操作效率                     |
| 流式输出  | 基于 markstream-vue 实现流畅的AI回答流式展示     |
| 渲染展示  | 支持mermaid、代码块、ECharts、Thinking等流式展示 |
| 对话搜索  | 模态框快速搜索历史对话内容                       |
| 全局设置  | 外观、对话默认值、功能开关、隐私设置等全局配置             |
| 对话设置  | 单个对话的模型、温度、提示词等个性化设置                |
| 主题切换  | 支持浅色/深色/跟随系统三种主题模式                  |
| 字体大小  | 小/中/大三档字体大小可选，适配不同阅读习惯              |
| 数据管理  | 导入/导出设置、清除数据，保障数据安全                 |
| 预设提示词 | 快速选择常用角色设定，提升对话效率                   |

### 后端功能

| 功能    | 详细描述                                |
|-------|-------------------------------------|
| OpenAI 兼容 API | 提供标准 OpenAI 兼容接口，支持多模型路由          |
| 多模型支持 | 集成智谱 GLM、阿里云百炼、OpenAI/Deepseek 等平台 |
| 会话管理  | 支持对话历史的保存、加载、删除                   |
| 文件上传  | 支持图片、文档等文件的上传和管理                  |
| 健康检查  | 提供系统状态和可用模型检查                      |
| 日志系统  | 详细的请求日志和响应时间记录                     |

## 🛠 技术栈

### 前端
- **核心框架**: Vue 3
- **流式渲染**: markstream-vue
- **类型系统**: TypeScript
- **UI 设计**: 现代化响应式设计，支持暗色主题
- **交互体验**: 丰富的快捷键系统和消息操作

### 后端
- **核心框架**: FastAPI
- **编程语言**: Python 3.12+
- **数据库**: SQLite
- **API 设计**: RESTful API + OpenAI 兼容接口
- **文件存储**: 本地文件系统

### 模型支持
- **智谱 GLM**: glm-4-flash, glm-4, 等
- **阿里云百炼**: qwen-turbo, qwen-plus, 等
- **OpenAI/Deepseek**: gpt-3.5-turbo, gpt-4, deepseek-chat, 等

## 🚀 快速开始

### 1. 克隆仓库

```bash
git clone https://github.com/zll-it/ai-chat-ui.git
cd ai-chat-ui
```

### 2. 安装前端依赖

```bash
npm install
```

### 3. 安装后端依赖

```bash
cd server
python3 -m venv .venv
source .venv/bin/activate  # Linux/Mac
# .venv\Scripts\activate  # Windows
pip install -r requirements.txt
```

### 4. 配置 API 密钥

在 `server` 目录下创建 `.env` 文件，添加以下配置：

```env
# 智谱 GLM API 配置
ZHIPUAI_API_KEY=your_zhipuai_api_key

# 阿里云百炼 API 配置
DASHSCOPE_API_KEY=your_dashscope_api_key

# OpenAI API 配置（支持 Deepseek 等兼容接口）
OPENAI_API_KEY=your_openai_api_key
OPENAI_API_BASE=https://api.openai.com/v1  # 或其他兼容接口地址

# 服务器配置
PORT=8000
```

### 5. 启动服务

#### 启动后端服务器

```bash
# 在 server 目录下
python main.py
```

#### 启动前端开发服务器

```bash
# 在项目根目录下
npm run dev
```

### 6. 构建生产版本

```bash
# 构建前端
npm run build

# 后端服务可以直接运行
python server/main.py
```

## 📋 使用说明

### 基础操作

- **新建对话**: `Ctrl+N` 快捷键或点击页面右上角 "+" 按钮
- **切换布局**: 点击页面右下角布局切换按钮
- **主题切换**: 设置面板中选择浅色/深色/跟随系统
- **搜索对话**: 使用页面顶部搜索框或快捷键 `Ctrl+K`

### 快捷键一览

| 操作     | 快捷键                 |
|--------|---------------------|
| 新建对话   | Ctrl+N              |
| 搜索对话   | Ctrl+K              |
| 复制当前消息 | Ctrl+C (消息 hover 时) |
| 切换布局   | Ctrl+Shift+L        |

### 模型选择

在对话设置中，可以选择不同的模型：

- **智谱 GLM**: 国内高性能模型，响应速度快
- **阿里云百炼**: 支持多语言和多模态
- **OpenAI**: 全球领先的 GPT 系列模型
- **Deepseek**: 专注于代码和技术领域的模型

## 📡 API 文档

### OpenAI 兼容接口

#### POST /v1/chat/completions

标准的 OpenAI 兼容聊天接口，支持流式输出。

**请求示例**:

```json
{
  "model": "glm-4-flash",
  "messages": [
    {"role": "user", "content": "你好，请介绍一下你自己"}
  ],
  "stream": true,
  "temperature": 0.7
}
```

**响应示例**:

```json
{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677858242,
  "model": "glm-4-flash",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "你好！我是一个基于智谱 GLM 模型的AI助手..."
      },
      "finish_reason": "stop"
    }
  ]
}
```

#### GET /v1/models

获取所有可用模型列表。

**响应示例**:

```json
{
  "object": "list",
  "data": [
    {
      "id": "glm-4-flash",
      "object": "model",
      "created": 1677825464,
      "owned_by": "zhipuai"
    },
    {
      "id": "gpt-3.5-turbo",
      "object": "model",
      "created": 1677610602,
      "owned_by": "openai"
    }
  ]
}
```

### 传统接口

#### POST /api/chat-ui/chat

传统聊天接口，保持向后兼容。

#### GET /api/chat-ui/models

获取模型列表（聚合所有可用平台）。

#### GET /api/chat-ui/conversations

获取所有对话历史。

#### POST /api/chat-ui/upload

上传文件（支持图片、文档等）。

## 🔧 配置说明

### 前端配置

前端配置文件位于 `src/config.ts`，主要配置项：

- **API_BASE_URL**: 后端 API 地址
- **DEFAULT_MODEL**: 默认模型
- **THEME**: 默认主题
- **FONT_SIZE**: 默认字体大小

### 后端配置

后端配置通过 `.env` 文件和 `server/config.py` 进行管理：

- **PORT**: 服务器端口
- **API 密钥**: 各平台的 API 密钥
- **上传目录**: 文件上传的存储路径
- **数据库配置**: SQLite 数据库设置

## <20> 项目结构

```
ai-chat-ui/
├── src/                # 前端源码
│   ├── components/     # Vue 组件
│   ├── services/       # API 服务
│   ├── utils/          # 工具函数
│   ├── App.vue         # 主应用组件
│   └── main.ts         # 入口文件
├── server/             # 后端源码
│   ├── adapters/       # 模型适配器
│   ├── api/            # API 路由
│   ├── database/       # 数据库操作
│   ├── utils/          # 工具函数
│   ├── main.py         # 主入口
│   └── requirements.txt # 依赖文件
├── public/             # 静态资源
├── screenshots/        # 截图
├── package.json        # 前端依赖
├── tsconfig.json       # TypeScript 配置
└── README.md           # 项目说明
```

## <20>📄 许可证

本项目采用 MIT 许可证 - 详见 [LICENSE](LICENSE) 文件

## 💡 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！

### 开发流程

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开 Pull Request

## 🌟 特性亮点

- **多模型集成**: 支持多个 AI 平台的模型，灵活切换
- **现代化界面**: 美观的 UI 设计，支持深色主题
- **流畅体验**: 流式输出和丰富的交互效果
- **功能丰富**: 完整的对话管理和设置选项
- **易于部署**: 简单的配置和启动流程
- **OpenAI 兼容**: 标准的 OpenAI 兼容接口

## 📞 支持

如果您有任何问题或建议，欢迎：

- 提交 Issue
- 发送邮件至：contact@example.com
- 参与项目讨论

---

<div align="center">

<sub>Made with ❤️ using Vue & FastAPI</sub>

</div>