React 实时语音转文本系统

基于 React + WebSocket + YAMNet + Whisper 的实时语音识别系统，支持人声活动检测和离线语音转文本。

🏗️ 技术架构

前端（浏览器端）

• Web Speech API: 捕获麦克风音频流
• Web Audio API: 处理音频数据（采样率转换、分帧）
• WebSocket: 建立与后端的实时连接，发送音频流
• React + TypeScript: 用户界面和状态管理

后端（本地服务器）

• Flask/FastAPI: REST API 服务器
• WebSocket: 接收前端音频流
• YAMNet: 声音事件检测，实现人声活动检测（VAD）
• Whisper: 语音转文本模型（离线运行）

模型分工

• YAMNet: 检测人声活动（VAD），过滤非语音片段，提高处理效率
• Whisper: 将人声音频转换为文本，支持多语言识别

🚀 功能特性

• ✅ 实时音频捕获和处理
• ✅ 智能人声活动检测
• ✅ 高精度语音转文本
• ✅ WebSocket 实时通信
• ✅ 现代化 React UI
• ✅ TypeScript 类型安全
• ✅ 离线运行，保护隐私

📋 系统要求

前端

• Node.js 16+
• 现代浏览器（支持 Web Audio API）
• 麦克风权限

后端

• Python 3.8+
• CUDA（可选，用于 GPU 加速）
• 至少 4GB RAM

🛠️ 安装和运行

1. 前端设置

# 安装依赖
npm install

# 启动开发服务器
npm start

前端将在 http://localhost:3000 运行

2. 后端设置

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# 安装依赖
pip install -r backend/requirements.txt

# 启动后端服务器
cd backend
python app.py

后端将在 http://localhost:8765 运行

📁 项目结构

react-realtime-stt/
├── public/                 # 静态资源
├── src/                    # React 前端源码
│   ├── components/         # React 组件
│   │   ├── AudioRecorder.tsx
│   │   ├── TranscriptDisplay.tsx
│   │   └── StatusIndicator.tsx
│   ├── hooks/             # 自定义 Hooks
│   │   ├── useAudioRecorder.ts
│   │   └── useWebSocket.ts
│   ├── utils/             # 工具函数
│   │   └── audioUtils.ts
│   ├── types/             # TypeScript 类型定义
│   │   └── index.ts
│   └── App.tsx            # 主应用组件
├── backend/               # Python 后端
│   ├── models/            # AI 模型相关
│   │   ├── yamnet_model.py
│   │   └── whisper_model.py
│   ├── utils/             # 工具函数
│   │   └── audio_processing.py
│   ├── app.py             # Flask/FastAPI 应用
│   └── requirements.txt   # Python 依赖
├── package.json
├── tsconfig.json
└── README.md

🎯 使用方法

1. 启动系统: 分别启动前端和后端服务
2. 授权麦克风: 浏览器会请求麦克风权限
3. 开始录音: 点击录音按钮开始实时语音识别
4. 查看结果: 转录文本会实时显示在界面上
5. 停止录音: 点击停止按钮结束录音

🔧 配置选项

音频设置

• 采样率: 16kHz（Whisper 推荐）
• 音频格式: WAV/PCM
• 缓冲区大小: 可配置

模型设置

• YAMNet 阈值: 调整人声检测敏感度
• Whisper 模型: base/small/medium/large
• 语言设置: 自动检测或指定语言

🚨 注意事项

• 首次运行会下载模型文件（约 1-5GB）
• 建议使用 HTTPS 以确保麦克风权限正常工作
• GPU 加速可显著提升处理速度
• 网络延迟会影响实时性能

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• Whisper 官方文档
• YAMNet 模型
• Web Audio API
• WebSocket API