2025暑期实训作业 · 多模态智能对话
前后端分离的对话演示站：文字聊天、文生图演示、语音识别 / 合成，以及语音连续对话。
公网演示走前端 mock 流式回放，不暴露 LLM / 语音密钥。本地填好 backend/.env 后，可以接真实接口。
功能
- 对话：流式回复、思维链、Markdown / 代码高亮、Token 用量、模型切换、文生图演示
- 语音聊天：录音识别（ASR）、音色切换（TTS）、语音连续对话
- 其它：在线人数、移动端适配
技术栈
| 端 | 技术 |
|---|---|
| 前端 | Vue 3、TypeScript、Vite、Pinia、Vue Router、Tailwind CSS 4、Naive UI |
| 后端 | FastAPI、Uvicorn、WebSocket |
| 能力 | LLM 流式补全、百度语音识别、火山引擎 TTS |
| 部署 | Docker、Gitea Actions（只发前端演示镜像） |
目录
.
├── Dockerfile / Dockerfile.base # 前端演示镜像
├── .gitea/workflows/deploy.yml # push 后自动部署
├── backend/ # FastAPI
│ ├── app/
│ │ ├── main.py
│ │ ├── api/v1/endpoints/ # chat / model / speaker / asr / tts / websocket
│ │ ├── services/
│ │ ├── schemas/
│ │ ├── constants/
│ │ └── core/config.py
│ ├── .env.example
│ └── requirements.txt
└── web/ # Vue 前端
├── src/
│ ├── views/ # 对话、语音聊天
│ ├── components/
│ ├── stores/
│ ├── services/ # 真实接口 + mock_chat
│ └── router/
└── package.json
页面：
| 路径 | 说明 |
|---|---|
/ |
文字对话 |
/voice |
语音聊天 |
后端接口（本地开发）：
| 路径 | 说明 |
|---|---|
POST /v1/chat/completions |
LLM 流式对话 |
GET /v1/model/list |
模型列表 |
GET /v1/speaker/list |
音色列表 |
WS /websocket |
在线人数、ASR、TTS、语音对话 |
本地运行
环境：Node.js 20.19+ / 22.12+、pnpm 10、Python 3.11。
1. 后端
cd backend
python -m venv .venv
.venv/Scripts/activate # Linux / macOS: source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env # 填 LLM、百度 ASR、火山 TTS
密钥只放后端 .env，不要写进前端，也不要提交到 git。
2. 前端
cd web
pnpm i
pnpm dev
pnpm dev 会同时拉起：
- Vite：http://127.0.0.1:5000
- FastAPI：http://127.0.0.1:8000
只起前端：pnpm dev:web
只起后端：pnpm dev:backend（默认用 backend/.venv，也可用环境变量 PYTHON 指定解释器）
开发时 Vite 会把 /v1 和 /websocket 代理到 8000。当前对话 / 语音页默认走 src/services/mock_chat.ts 的演示流，不依赖公网密钥。
部署
仓库根目录的 Gitea 工作流会在 push 后构建前端镜像，容器只跑 pnpm preview（端口 3000，宿主机映射 127.0.0.1:23222）。
演示镜像不打包 backend 和 .env，公网看到的是 mock 页面。
说明
- 这是暑期实训作业，用于课堂演示和本地联调。
- 更细的前后端说明见：