VibeChat - AI 群聊社交平台

一个基于AI的智能群聊社交平台，支持多角色对话、声音克隆、剧本杀游戏等创新功能

功能特性 • 快速开始 • 使用文档 • 技术栈

---

✨ 功能特性

🎭 多角色对话系统

• 角色广场：预置多种性格的AI角色（职场、情感、娱乐等）
• 自定义角色：创建专属AI角色，自定义性格、语气和对话风格
• 智能对话：基于AI的自然语言交互，支持上下文理解
• 模式切换：支持"争吵模式"和"冷静模式"，营造不同对话氛围

👥 群组聊天

• 多人群聊：创建不同主题的群组（职场、游戏、社交等）
• 角色扮演：在群组中添加多个AI角色，观察他们之间的互动
• 消息管理：完整的聊天历史记录，支持导出和分享
• 智能提及：在对话中@特定角色，触发专属回应

🎙️ 声音克隆

• 录音上传：支持录制或上传3-30秒的音频样本
• 声音克隆：基于MiniMax API的高质量声音复制
• 实时反馈：录音进度条、时长验证、错误提示
• 本地保存：录音文件自动下载备份

🕵️ 剧本杀游戏

• 完整游戏系统：基于状态机的剧本杀游戏引擎
• 多剧本支持：
  • 📦 密室消失的宝石（入门级）
  • ❄️ 雪山山庄的连续杀人（中级）
  • 🚂 午夜列车的失踪案（高级）
  • 💎 诅咒的宝藏（中级）
• 游戏流程：
  • 开场阶段（GM旁白 + 角色介绍）
  • 调查阶段（询问、搜查、线索发现）
  • 讨论阶段（矛盾点质询）
  • 投票阶段（指认真凶）
  • 结案阶段（真相揭露）
• 智能推理：
  • 四链闭环设计（时间链、动机链、手法链、证据链）
  • 多层次口供系统（初始、追问、证据揭露）
  • 线索管理与公开机制
  • 嫌疑度可视化

🎨 精美UI设计

• 极光青色主题：2024-2025最新UI配色趋势
• 毛玻璃效果：多层毛玻璃卡片设计
• 动态光晕：背景渐变光斑动画
• 响应式布局：适配各种屏幕尺寸

---

🚀 快速开始

环境要求

• Node.js 16+
• 现代浏览器（Chrome、Edge、Firefox等）

安装步骤

1. 克隆仓库

git clone https://github.com/your-username/vibechat.git
cd vibechat

2. 安装依赖

npm install

3. 启动代理服务器

node proxy_server.js

4. 访问应用

打开浏览器访问 http://localhost:7860

配置API密钥

在应用中配置以下API：

• AI对话：支持通义千问、MiniMax等API
• 声音克隆：MiniMax API
• 文本转语音：可选配置

进入"设置"页面，填入您的API密钥即可。

---

📖 使用文档

基础使用

1. 创建角色

1. 点击左侧导航栏的"🎭 角色广场"
2. 点击右上角"➕ 新建角色"
3. 填写角色信息：
   • 角色名称
   • 选择图标
   • 角色分类
   • 性格描述
   • 语气风格
4. 点击"创建角色"

2. 创建群组

1. 点击"👥 我的群组"
2. 点击"➕ 新建群组"
3. 填写群组信息：
   • 群组名称
   • 选择图标
   • 群组分类
   • 添加角色成员
4. 点击"创建群组"

3. 开始对话

1. 在群组页面，底部输入框输入消息
2. 点击发送或按Enter键
3. AI角色会自动回复
4. 点击角色头像可@特定角色

4. 声音克隆

1. 点击"🎙️ 声音克隆"
2. 选择录音方式：
   • 麦克风录音（最少3秒）
   • 上传音频文件
3. 等待克隆完成
4. 生成克隆声音

5. 剧本杀游戏

1. 在群组页面，点击"🔍 剧本杀"
2. 选择剧本
3. 游戏开始后：
   • 阅读开场旁白
   • 执行调查动作（询问、搜查）
   • 发现线索
   • 推进阶段
   • 投票指认真凶

---

🛠️ 技术栈

前端

• HTML5 + CSS3：页面结构与样式
• JavaScript (ES6+)：业务逻辑
• Tailwind CSS：实用优先的CSS框架
• 毛玻璃特效：backdrop-filter实现

后端

• Node.js：运行时环境
• Express：Web框架
• HTTP代理：API转发与CORS处理

核心架构

• 状态管理：LocalStorage持久化
• 路由系统：基于Hash的单页应用路由
• 事件驱动：DOM事件监听与委托
• 模块化设计：清晰的职责分离

---

📂 项目结构

vibechat/
├── index.html              # 主应用文件（包含所有HTML/CSS/JS）
├── proxy_server.js         # API代理服务器
├── README.md              # 项目文档
├── ARCHITECTURE_MYSTERY_GAME.md  # 剧本杀架构文档
├── MYSTERY_GAME_IMPLEMENTATION_REPORT.md  # 实施报告
└── package.json           # 项目依赖

核心模块

// 数据管理
DataManager          // 数据存储与读取

// 角色系统
RoleManager          // 角色CRUD操作

// 群组系统
GroupManager         // 群组管理
GroupChatManager     // 群聊消息处理
GroupChatRenderer    // 消息渲染

// 声音克隆
VoiceCloner          // 声音克隆逻辑

// 剧本杀游戏
ScriptManager        // 剧本管理
GameStateManager     // 游戏状态管理
ActionValidator      // 动作验证
GameMaster           // GM控制器
MysteryUI            // UI管理
MysteryGame          // 游戏控制器

// UI组件
Router               // 路由系统
Settings             // 设置管理

---

🎮 剧本杀系统详解

数据模型

每个剧本包含：

• 角色（Roles）：3-4个NPC，每个有3层口供
• 地点（Locations）：可搜查的场景
• 线索（Clues）：8+条线索，分4类（时间/动机/手法/证据）
• 真相（Truth）：凶手、动机、手法、时间线
• 矛盾点（Contradictions）：口供中的矛盾

游戏流程

开场 → 调查（3回合）→ 讨论（3回合）→ 投票 → 结案
  ↓
GM旁白 + 角色介绍
  ↓
询问 / 搜查 / 出示线索
  ↓
发现线索 → 公开线索
  ↓
推进阶段
  ↓
投票指认真凶
  ↓
真相揭露

设计原则

• KISS原则：简洁直观的UI和逻辑
• DRY原则：复用核心管理器
• YAGNI原则：仅实现必需功能
• SOLID原则：单一职责、依赖注入

---

🔧 配置说明

API配置

支持以下AI服务：

服务商	用途	获取地址
通义千问	AI对话	https://dashscope.aliyun.com/
MiniMax	对话+声音克隆	https://www.minimaxi.com/
ChatGPT	AI对话	https://platform.openai.com/

Proxy配置

// proxy_server.js
const PORT = 7860;
const TARGET_API = 'https://api.minimaxi.com'; // 修改为您的目标API

---

📊 功能路线图

✅ 已完成（v1.0）

• 多角色对话系统
• 群组聊天功能
• 声音克隆
• 4个剧本杀剧本
• 完整游戏流程
• 极光青色UI主题
• LocalStorage持久化

🚧 开发中（v1.1）

• LLM真实对话集成
• 讨论阶段矛盾点质询
• 投票系统完善
• 多结局逻辑
• 消息样式定制

📋 计划中（v2.0）

• 多人在线模式（WebSocket）
• 剧本编辑器
• 剧本分享市场
• 语音交互
• 成就系统

---

🤝 贡献指南

欢迎提交Issue和Pull Request！

开发流程

1. Fork本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启Pull Request

代码规范

• 使用ES6+语法
• 遵循JSDoc注释规范
• 保持代码简洁（KISS原则）
• 避免重复（DRY原则）

---

📝 更新日志

v1.0.0 (2026-01-17)

• ✨ 初始版本发布
• 🎭 多角色对话系统
• 👥 群组聊天功能
• 🎙️ 声音克隆功能
• 🕵️ 剧本杀游戏系统
  • 密室消失的宝石
  • 雪山山庄的连续杀人
  • 午夜列车的失踪案
  • 诅咒的宝藏
• 🎨 极光青色UI主题

---

📄 许可证

本项目采用 MIT 许可证 - 详见 LICENSE 文件

---

🙏 致谢

• Tailwind CSS - CSS框架
• MiniMax API - AI和声音克隆服务
• 通义千问 - AI对话服务
• 经典推理小说（阿加莎·克里斯蒂、东野圭吾）- 剧本杀灵感来源

---

📮 联系方式

• 项目主页：https://github.com/your-username/vibechat
• 问题反馈：GitHub Issues

---

如果觉得这个项目有帮助，请给个⭐️Star支持一下！

Made with ❤️ by VibeChat Team