✨ 让对话更自然，让交流更智能 - 基于 WebSocket 的实时语音交互引擎
AI角色对话系统是一个功能丰富的智能语音交互平台，支持多角色、多场景的实时语音对话体验。系统集成了先进的语音识别、语音合成技术，为用户提供沉浸式的角色扮演对话体验。🎯 在线体验
💡 提示: 建议使用 Chrome 浏览器，并确保麦克风设备可用以获得最佳语音交互体验
AI角色对话系统是一个功能丰富的智能语音交互平台，支持多角色、多场景的实时语音对话体验。系统集成了先进的语音识别、语音合成技术，为用户提供沉浸式的角色扮演对话体验。
| 功能模块 | 特性描述 | 技术亮点 |
|---|---|---|
| 🎙️ 实时语音交互 | 支持浏览器原生录音，实时语音对话 | Web Audio API + WebSocket |
| 💬 多模态对话 | 文本/语音双模式输入输出 | 智能消息路由 + 状态管理 |
| 🎭 角色管理系统 | 预设角色库 + 自定义角色创建 | 角色收藏 + 个性化配置 |
| 🏞️ 沉浸式场景 | 多场景切换 + 背景氛围定制 | 动态场景加载 + 视觉优化 |
| 🔊 多音色支持 | 动态切换语音合成音色 | 七牛云TTS集成 |
| 💾 智能会话管理 | 多轮对话上下文维护 | 精准记忆 + 历史记录 |
| 📱 响应式设计 | 完美适配桌面与移动端 | 自适应布局 + 触摸优化 |
- Node.js: 16.0+
- 包管理器: npm 或 yarn
- 浏览器: Chrome 90+ / Firefox 88+ / Safari 14+
- 硬件: 麦克风设备（语音输入）
前端代码在master分支
# 1. 克隆项目
git clone git@github.com:programeGreenhand/AI-role-paly-frontend.git
# 2. 进入项目目录
cd AI-role-paly-frontend
# 3. 安装依赖
npm install
# 4. 启动开发服务器
npm run dev后端项目地址：roleEnd
# 1. 克隆后端项目
git clone https://github.com/programeGreenhand/roleEnd.git
# 2. 进入项目目录
cd roleEnd
# 3. 安装依赖
npm install
# 4. 配置环境变量
cp server.env.example server.env.production
# 编辑 server.env.production 文件，配置数据库和API密钥
# 5. 启动服务
npm start核心职责: 管理实时双向通信
- 📡 连接管理: 自动重连机制 + 心跳检测
- 📨 消息路由: 音频/文本消息智能分发
- 🔄 状态同步: 连接状态 + 会话状态管理
- 🛡️ 错误处理: 网络异常恢复 + 数据校验
核心职责: 语音输入输出全流程处理
- ⏺️ 录音控制: 开始/停止/暂停状态管理
- 🔊 音频处理: 格式转换 + 数据编码优化
- 🎚️ 音色配置: 动态切换 + 参数管理
- 📊 状态指示: 可视化录音/播放状态
核心职责: 对话上下文智能维护
- 🆔 会话标识: 唯一会话ID生成机制
- 📝 消息历史: 对话记录持久化存储
- 🔄 上下文维护: 多轮对话记忆管理
核心职责: 角色系统完整生命周期管理
- 🟡 角色收藏: 用户偏好角色管理
- 🩹 角色自定义: 个性化角色创建与配置
- 🎨 角色展示: 角色信息可视化呈现
graph LR
A[🎤 用户语音输入] --> B[🔊 VoiceStore]
C[📝 用户文本输入] --> D[💬 ChatStore]
B --> E[🌐 WebSocket]
D --> E
E --> F[🖥️ 后端服务]
F --> G[🔊 TTS + ASR]
G --> E
E --> H[💬 会话更新]
H --> I[🔊 音频播放]
I --> J[👂 用户听到回复]
| 功能亮点 | 详细描述 | 技术实现 |
|---|---|---|
| 🎙️ 实时语音对话 | 按住说话，松开发送的流畅体验 | Web Audio API + 流式传输 |
| 🎵 动态音色切换 | 支持多种音色实时切换 | 七牛云TTS + 参数配置 |
| 🥳 多模态输入 | 文字/语音双模式自由选择 | 智能消息路由 + 状态管理 |
| 🔗 智能重连机制 | 网络中断自动恢复 | WebSocket心跳检测 + 重连策略 |
| 📱 多端适配 | 桌面端与移动端完美体验 | 响应式设计 + 触摸优化 |
| 📕 上下文记忆 | 智能记忆对话历史 | 会话管理 + 上下文维护 |
| 🦸♀️ 角色管理 | 完整的角色创建与收藏系统 | 角色收藏 + 个性化配置 |
| 🎨 美工设计 | 精美的界面与交互设计 | Element Plus + 自定义主题 |
| 技术领域 | 技术选型 | 版本 | 核心功能 |
|---|---|---|---|
| 前端框架 | Vue 3 + TypeScript | 3.3.x | 响应式组件开发 |
| 状态管理 | Pinia | 2.1.x | 全局状态管理 |
| UI组件库 | Element Plus | 2.3.x | 现代化UI组件 |
| 路由管理 | Vue Router | 4.2.x | SPA路由控制 |
| 实时通信 | WebSocket (原生) | - | 双向实时通信 |
| 构建工具 | Vite | 4.4.x | 快速构建与热更新 |
| 语音处理 | Web Audio API | - | 浏览器原生录音 |
| 技术领域 | 技术选型 | 版本 | 核心功能 |
|---|---|---|---|
| 核心框架 | Node.js + Express.js | 18.x + 4.x | 服务端API开发 |
| 数据库 | MySQL | 8.0+ | 数据持久化存储 |
| 实时通信 | WebSocket | - | 实时消息推送 |
| 语音服务 | 七牛云语音合成 | - | 高质量TTS服务 |
| AI引擎 | DeepSeek API | - | 智能对话生成 |
| 文件存储 | 阿里云OSS | - | 多媒体文件存储 |
| 进程管理 | PM2 | - | 进程守护管理 |
| 反向代理 | Nginx | - | 负载均衡代理 |
| 部署环境 | CentOS | 7.9 | 生产环境部署 |
| 指标类型 | 性能表现 | 测试环境 | 优化措施 |
|---|---|---|---|
| 🚀 连接建立 | < 200ms | Chrome 115+ | WebSocket优化连接 |
| 🎙️ 语音延迟 | < 1.5s | 100Mbps网络 | 音频流式传输 |
| 🔄 端到端响应 | < 2s | 标准服务器配置 | 全链路优化 |
| 📊 并发支持 | 1000+ 连接 | 4核8G服务器 | 连接池管理 |
| 💾 内存占用 | < 100MB | 单用户会话 | 内存优化策略 |
| 模块 | 负责人 | 主要职责 | 技术实现 |
|---|---|---|---|
| 语音处理 | 余加福 | 录音控制、音频编解码、音色管理 | Web Audio API、音频格式转换、音色参数配置 |
| 网络通信 | 余加福 | WebSocket连接、消息协议、错误处理 | 自动重连机制、心跳检测、消息序列化 |
| 会话管理 | 余加福 | 会话维护、上下文管理、状态同步 | 多轮对话记忆、历史记录管理、状态持久化 |
| 角色管理 | 余加福 | 角色系统设计、场景背景设计 | 角色属性定义、场景切换逻辑、个性化配置 |
| 前端集成 | 余加福 | Vue组件、用户交互、响应式设计 | 组件化开发、状态管理、移动端适配 |
| 登录注册 | 余加福 | 认证系统、状态管理 | JWT认证、权限控制、用户状态同步 |
| 系统架构 | 余加福 | 整体技术方案设计 | 前后端分离架构、微服务设计、性能优化 |
| 部署运维 | 余加福 | 生产环境部署与维护 | 服务器配置、负载均衡、监控告警 |
| 应用场景 | 具体用途 | 核心价值 |
|---|---|---|
| 🤖 智能客服 | 24/7语音客服系统 | 降低人力成本 + 提升服务效率 |
| 🎓 员工培训 | 模拟对话训练平台 | 实战演练 + 技能提升 |
| 📊 会议助手 | 智能会议记录与总结 | 信息整理 + 决策支持 |
| 💼 业务咨询 | 产品介绍与客户服务 | 标准化服务 + 个性化体验 |
| 应用场景 | 具体用途 | 核心价值 |
|---|---|---|
| 🌍 语言学习 | 外语口语练习平台 | 沉浸式学习 + 实时反馈 |
| 👨🏫 教学辅助 | 智能教学对话助手 | 个性化教学 + 资源优化 |
| 🏠 在线辅导 | 一对一学习辅导 | 灵活安排 + 专业指导 |
| 📚 知识问答 | 智能问答系统 | 知识普及 + 学习支持 |
| 应用场景 | 具体用途 | 核心价值 |
|---|---|---|
| 🎭 角色扮演 | 沉浸式角色对话体验 | 情感陪伴 + 娱乐放松 |
| 💬 语音社交 | 语音互动社交平台 | 真实交流 + 社交拓展 |
| 🎯 游戏辅助 | 游戏内智能对话系统 | 增强互动 + 提升体验 |
| 🎨 创意表达 | 个性化角色创作 | 创意发挥 + 自我表达 |
我们欢迎所有形式的贡献！请阅读以下指南开始参与：
如果您发现任何bug或有问题，请通过 Issues 页面报告。
问题报告模板：
- 📝 问题描述: 清晰描述遇到的问题
- 🔍 重现步骤: 详细的重现步骤
- 💻 环境信息: 操作系统、浏览器版本等
- 📸 截图/日志: 相关截图或错误日志
有新的功能想法？欢迎在 Discussions 中分享。
功能建议模板：
- 🎯 功能描述: 详细的功能需求
- 💡 使用场景: 具体的使用场景说明
- 🔧 技术实现: 建议的技术实现方案
- 📊 优先级: 功能的重要程度评估
- 🍴 Fork 本项目
- 🌿 创建特性分支 (
git checkout -b feature/AmazingFeature) - 💾 提交更改 (
git commit -m 'Add some AmazingFeature') - 📤 推送到分支 (
git push origin feature/AmazingFeature) - 🔄 开启 Pull Request
代码规范要求：
- ✅ TypeScript: 严格类型检查
- 📝 注释规范: 必要的代码注释
- 🧪 单元测试: 新增功能需包含测试
- 📚 文档更新: 相关文档同步更新
- 项目问题: yujiafushinc@163.com
本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。