voice-chat-web/README.md

语音交互网页

基于 Qwen2-Audio 的语音对话网页，点击按钮录音，AI 实时回复。

端口

• 服务端口: 19019
• 模型服务: 19018（需要单独部署）

功能

• 点击按钮录音（再次点击停止）
• 录音状态可视化（波形动画）
• 多轮对话支持
• 服务状态检测
• 清除对话功能

架构

┌─────────────┐      ┌─────────────────┐      ┌───────────────────┐
│  浏览器前端  │ ──── │  本机后端(19019) │ ──── │  模型服务(19018)   │
│  (录音/播放) │ HTTP │  (转发代理)      │ HTTP │  (Qwen2-Audio)    │
└─────────────┘      └─────────────────┘      └───────────────────┘

部署

1. 安装依赖

pip install -r requirements.txt

2. 启动模型服务（另一台电脑）

参考 qwen-audio-server 项目，在 GPU 机器上部署。

3. 启动网页服务

# 默认端口 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 接口

语音对话

POST /api/voice/chat
Content-Type: multipart/form-data

参数:
- audio: 音频文件
- conversation_id: 对话ID（可选）

返回:
{
  "reply": "AI回复文本",
  "conversation_id": "xxx",
  "timestamp": "..."
}

服务状态

GET /api/status

返回:
{
  "status": "ok",
  "model_service": "http://...",
  "model_online": true
}

前端功能

功能	说明
录音按钮	点击开始/停止录音
波形动画	录音时显示动态波形
消息列表	显示对话历史
状态指示	模型服务连接状态
清除对话	重置对话历史

注意事项

1. 需要浏览器支持 MediaRecorder API（Chrome/Firefox/Edge）
2. 需要用户授权麦克风权限
3. 模型推理较慢（约10-30秒），请耐心等待
4. 录音格式为 WebM，模型服务会自动转换