110 lines
2.4 KiB
Markdown
110 lines
2.4 KiB
Markdown
|
# 语音交互网页
|
|||
|
|
|
|||
|
|
基于 Qwen2-Audio 的语音对话网页，点击按钮录音，AI 实时回复。
|
|||
|
|
|
|||
|
|
## 端口
|
|||
|
|
|
|||
|
|
- **服务端口**: 19019
|
|||
|
|
- **模型服务**: 19018（需要单独部署）
|
|||
|
|
|
|||
|
|
## 功能
|
|||
|
|
|
|||
|
|
- 点击按钮录音（再次点击停止）
|
|||
|
|
- 录音状态可视化（波形动画）
|
|||
|
|
- 多轮对话支持
|
|||
|
|
- 服务状态检测
|
|||
|
|
- 清除对话功能
|
|||
|
|
|
|||
|
|
## 架构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
┌─────────────┐ ┌─────────────────┐ ┌───────────────────┐
|
|||
|
|
│ 浏览器前端 │ ──── │ 本机后端(19019) │ ──── │ 模型服务(19018) │
|
|||
|
|
│ (录音/播放) │ HTTP │ (转发代理) │ HTTP │ (Qwen2-Audio) │
|
|||
|
|
└─────────────┘ └─────────────────┘ └───────────────────┘
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 部署
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
pip install -r requirements.txt
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动模型服务（另一台电脑）
|
|||
|
|
|
|||
|
|
参考 `qwen-audio-server` 项目，在 GPU 机器上部署。
|
|||
|
|
|
|||
|
|
### 3. 启动网页服务
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 默认端口 19019
|
|||
|
|
python main.py
|
|||
|
|
|
|||
|
|
# 或指定模型服务地址
|
|||
|
|
MODEL_SERVICE_URL=http://192.168.2.5:19018 python main.py
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 访问网页
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
http://localhost:19019
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 环境变量
|
|||
|
|
|
|||
|
|
| 变量 | 说明 | 默认值 |
|
|||
|
|
|------|------|--------|
|
|||
|
|
| PORT | 服务端口 | 19019 |
|
|||
|
|
| MODEL_SERVICE_URL | 模型服务地址 | http://localhost:19018 |
|
|||
|
|
|
|||
|
|
## API 接口
|
|||
|
|
|
|||
|
|
### 语音对话
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
POST /api/voice/chat
|
|||
|
|
Content-Type: multipart/form-data
|
|||
|
|
|
|||
|
|
参数:
|
|||
|
|
- audio: 音频文件
|
|||
|
|
- conversation_id: 对话ID（可选）
|
|||
|
|
|
|||
|
|
返回:
|
|||
|
|
{
|
|||
|
|
"reply": "AI回复文本",
|
|||
|
|
"conversation_id": "xxx",
|
|||
|
|
"timestamp": "..."
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 服务状态
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
GET /api/status
|
|||
|
|
|
|||
|
|
返回:
|
|||
|
|
{
|
|||
|
|
"status": "ok",
|
|||
|
|
"model_service": "http://...",
|
|||
|
|
"model_online": true
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 前端功能
|
|||
|
|
|
|||
|
|
| 功能 | 说明 |
|
|||
|
|
|------|------|
|
|||
|
|
| 录音按钮 | 点击开始/停止录音 |
|
|||
|
|
| 波形动画 | 录音时显示动态波形 |
|
|||
|
|
| 消息列表 | 显示对话历史 |
|
|||
|
|
| 状态指示 | 模型服务连接状态 |
|
|||
|
|
| 清除对话 | 重置对话历史 |
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 需要浏览器支持 MediaRecorder API（Chrome/Firefox/Edge）
|
|||
|
|
2. 需要用户授权麦克风权限
|
|||
|
|
3. 模型推理较慢（约10-30秒），请耐心等待
|
|||
|
|
4. 录音格式为 WebM，模型服务会自动转换
|