AI-CHAT-UI

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

页面展示

✨ 核心功能

前端功能

功能	详细描述
对话历史	支持多对话管理、置顶、重命名、删除
新建对话	快捷键 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. 克隆仓库

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

2. 安装前端依赖

npm install

3. 安装后端依赖

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 文件，添加以下配置：

# 智谱 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. 启动服务

启动后端服务器

# 在 server 目录下
python main.py

启动前端开发服务器

# 在项目根目录下
npm run dev

6. 构建生产版本

# 构建前端
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 兼容聊天接口，支持流式输出。

请求示例:

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

响应示例:

{
  "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

获取所有可用模型列表。

响应示例:

{
  "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 数据库设置

<EFBFBD> 项目结构

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           # 项目说明

<EFBFBD>📄 许可证

本项目采用 MIT 许可证 - 详见 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
• 参与项目讨论

---

_{Made with ❤️ using Vue & FastAPI}