1 changed files with 0 additions and 160 deletions
@ -1,160 +0,0 @@ |
|||||
# Realtime 实时语音聊天模块 |
|
||||
|
|
||||
## ⚠️ 当前状态 |
|
||||
|
|
||||
**此模块为功能预览版本,提供完整的实时语音对话功能。** |
|
||||
|
|
||||
通过原生插件实现语音识别、AI对话和语音合成的完整语音交互体验。 |
|
||||
|
|
||||
## 概述 |
|
||||
|
|
||||
Realtime模块实现了类似ChatGPT app的实时语音对话功能,当前版本提供: |
|
||||
|
|
||||
- ✅ **完整语音交互** - 实时语音识别、AI对话和语音合成 |
|
||||
- ✅ **状态管理** - 聆听、思考、回答状态的可视化 |
|
||||
- ✅ **动画效果** - 基于Shader的流动云效果,支持音频振幅驱动 |
|
||||
- ✅ **字幕显示** - 可选择开启/关闭的字幕模式 |
|
||||
- ✅ **智能UI** - 根据连接状态自动调整按钮可用性 |
|
||||
|
|
||||
## 界面设计 |
|
||||
|
|
||||
### 布局结构 |
|
||||
- **顶部状态区域** - 显示当前状态和字幕模式切换按钮 |
|
||||
- **中间可视化区域** - 圆形Shader动画,根据音频振幅呈现呼吸效果 |
|
||||
- **底部控制区域** - 主控制按钮和状态指示器 |
|
||||
|
|
||||
### 状态指示 |
|
||||
- 🔵 **聆听状态** - 蓝色动画,接收用户语音输入 |
|
||||
- 🟠 **思考状态** - 橙色动画,AI处理中 |
|
||||
- 🟢 **回答状态** - 绿色动画,AI语音输出 |
|
||||
- ⚪ **空闲状态** - 灰色静态,等待交互 |
|
||||
|
|
||||
### 字幕模式 |
|
||||
- **默认关闭** - 初始状态下不显示任何字幕内容 |
|
||||
- **手动切换** - 通过右上角按钮手动开启/关闭字幕 |
|
||||
- **完整隐藏** - 关闭时字幕区域完全不显示,不占用界面空间 |
|
||||
- **智能布局** - 开启时圆形动画自动上移,字幕区域占据下半屏 |
|
||||
|
|
||||
### 交互控制 |
|
||||
- **录音按钮** - 仅在成功连接AI服务器且开始录音后可用 |
|
||||
- **连接状态** - 未连接时录音按钮显示不可用状态 |
|
||||
- **状态反馈** - 按钮颜色和可点击性根据连接状态动态调整 |
|
||||
|
|
||||
## 使用方法 |
|
||||
|
|
||||
### 路由导航 |
|
||||
|
|
||||
```dart |
|
||||
// 跳转到实时语音对话页面 |
|
||||
Get.toNamed(Routes.realtime); |
|
||||
``` |
|
||||
|
|
||||
### 交互流程 |
|
||||
|
|
||||
1. **自动连接** - 页面加载后自动尝试连接AI服务器 |
|
||||
2. **等待连接** - 录音按钮在连接成功前保持不可用状态 |
|
||||
3. **开始录音** - 连接成功后自动开始录音,录音按钮变为可用 |
|
||||
4. **语音对话** - 用户说话 → AI处理 → 语音回复 |
|
||||
5. **字幕控制** - 可随时通过右上角按钮切换字幕显示 |
|
||||
|
|
||||
## 技术架构 |
|
||||
|
|
||||
### 控制器 (RealtimeController) |
|
||||
- **连接管理**: WebSocket连接到AI服务器 |
|
||||
- **状态同步**: `isConnected`, `isListening`, `isSpeaking` |
|
||||
- **字幕控制**: `isSubtitleMode` 默认为false,用户手动控制 |
|
||||
- **消息管理**: 智能去重,避免流式响应重复显示 |
|
||||
- **音频处理**: 原生层计算RMS值,Flutter层接收并控制动画 |
|
||||
|
|
||||
### 视图组件 |
|
||||
- **RealtimeView** - 主视图容器,响应式布局 |
|
||||
- **ShaderMicFlow** - 基于GLSL Shader的流动云动画组件 |
|
||||
- **AutoScrollList** - 自动滚动的字幕列表 |
|
||||
|
|
||||
### 原生集成 |
|
||||
- **RealtimeService** - 原生音频处理和WebSocket通信 |
|
||||
- **音频格式** - 16kHz, 1声道, 16位PCM |
|
||||
- **实时传输** - 低延迟音频流处理 |
|
||||
- **RMS计算** - 原生层实时计算音频振幅 |
|
||||
|
|
||||
## 默认行为 |
|
||||
|
|
||||
### 字幕模式 |
|
||||
- **初始状态**: 关闭 (`isSubtitleMode.value = false`) |
|
||||
- **显示逻辑**: 仅在用户手动开启时显示字幕内容 |
|
||||
- **空间占用**: 关闭时字幕区域高度为0,不影响其他UI元素 |
|
||||
- **切换效果**: 平滑动画过渡,圆形动画位置和大小同步调整 |
|
||||
|
|
||||
### 按钮状态 |
|
||||
- **录音按钮**: 默认不可用,连接成功且开始录音后才可点击 |
|
||||
- **状态指示**: 通过颜色和图标变化反映当前可用性 |
|
||||
- **交互反馈**: 不可用时点击无效果,避免误操作 |
|
||||
|
|
||||
## 开发计划 |
|
||||
|
|
||||
### 已完成功能 ✅ |
|
||||
- [x] 完整语音交互流程 |
|
||||
- [x] 实时WebSocket通信 |
|
||||
- [x] Shader流动云动画 |
|
||||
- [x] RMS音频振幅计算 |
|
||||
- [x] 智能UI状态管理 |
|
||||
- [x] 字幕模式控制 |
|
||||
- [x] 消息去重优化 |
|
||||
|
|
||||
### 计划增强 ⏳ |
|
||||
- [ ] 多语言语音识别 |
|
||||
- [ ] 语音中断检测 |
|
||||
- [ ] 音频质量自适应 |
|
||||
- [ ] 离线降级处理 |
|
||||
- [ ] 语音情感识别 |
|
||||
|
|
||||
## 注意事项 |
|
||||
|
|
||||
1. **网络依赖** - 需要连接到AI服务器 (ws://192.168.1.11:8000/ws) |
|
||||
2. **麦克风权限** - 需要获取麦克风使用权限 |
|
||||
3. **音频会话** - 自动管理音频会话,支持蓝牙设备 |
|
||||
4. **资源管理** - 页面关闭时自动清理音频资源和网络连接 |
|
||||
|
|
||||
## 自定义配置 |
|
||||
|
|
||||
### 修改服务器地址 |
|
||||
|
|
||||
```dart |
|
||||
// 在RealtimeController中修改连接URL |
|
||||
await _realtimeService.initialize( |
|
||||
serverUrl: 'ws://your-server:port/ws', |
|
||||
// ... 其他参数 |
|
||||
); |
|
||||
``` |
|
||||
|
|
||||
### 调整UI布局 |
|
||||
|
|
||||
```dart |
|
||||
// 修改字幕模式下圆形动画位置 |
|
||||
alignment: controller.isSubtitleMode.value |
|
||||
? const Alignment(0, -0.9) // 调整Y轴位置 |
|
||||
: const Alignment(0, -0.25), |
|
||||
``` |
|
||||
|
|
||||
### 音频参数调优 |
|
||||
|
|
||||
```dart |
|
||||
// 在初始化时调整音频参数 |
|
||||
sampleRate: 16000, // 采样率 |
|
||||
channels: 1, // 声道数 |
|
||||
bitsPerSample: 16, // 位深度 |
|
||||
``` |
|
||||
|
|
||||
## 技术栈 |
|
||||
|
|
||||
- **Flutter SDK**: >= 3.0.0 |
|
||||
- **GetX**: >= 4.6.5 (状态管理) |
|
||||
- **Flutter Shaders**: >= 0.0.6 (Shader动画) |
|
||||
- **原生插件**: Realtime服务 (音频处理) |
|
||||
- **WebSocket**: 实时通信协议 |
|
||||
|
|
||||
## 版本信息 |
|
||||
|
|
||||
- **当前版本**: v1.0.0 (Production) |
|
||||
- **最后更新**: 2024年 |
|
||||
- **状态**: 完整功能实现 |
|
||||
Loading…
Reference in new issue