对话式AI前端界面

AURION MCP 前端

AURION MCP前端是一个充满丰富动画效果的对话界面，它将交互式的3D灵感角色、电影级用户界面和实时语音功能融为一体，打造出一个未来感十足的操作员控制台。它是AURION的主要用户界面，AURION是一个多模式AI助手，能够在开发者、伴侣和隐形模式之间切换。

特点/特性

• 沉浸式角色渲染器 – TerminalCharacter 它结合了连续的全身动作、情感感知的手势以及鼠标响应式追踪，创造出栩栩如生的AI形象。
• 动态对话流程 – useAurionChat() 为每个助手回复协调欢迎提示、流式响应和自动语音合成。
• 语音交互 – 集成文本转语音（TTS）和语音识别（通过 useSpeechRecognition) 无双手操作交互和生动的唇形同步。
• 对话历史面板 – ConversationHistory 保持一个持久且可滚动的日志，带有语音指示器和自适应布局。
• 可定制模式 – “设置”上下文切换不同的个性预设（开发者、伴侣、潜行），这些预设决定了提示语、语气和视觉效果。
• 未来感十足的用户界面外壳 – InteractiveBackground， SideNavigation，以及 RightSidebar 提供遥测风格的可视化界面、环境效果和快速操作功能。

技术栈

• 框架使用TypeScript的Next.js 14（App Router）
• 造型设计使用自定义玻璃质感和霓虹渐变的Tailwind CSS
• 动画利用React Hooks requestAnimationFrame 用于60帧每秒的运动
• 音频浏览器语音API，可选集成ElevenLabs

入门指南/开始使用

克隆仓库并安装依赖项：

npm install

启动开发服务器：

npm run dev

该应用程序在 http://localhost:3000 翻译为中文是：“本地主机：3000 端口”。不过，在中文语境中，我们通常会直接说网址或地址，而不是详细解释其含义，所以也可以简化为“http://localhost:3000（本地地址）”。但如果是需要解释其含义，那么“本地主机：3000 端口”是一个合适的翻译对文件内的编辑 src/app/ 并且 src/components/ 自动热重载。

环境设置

• 环境变量复制 env.example 到；向；朝；对于；在（表示时间或地点） .env 并填充凭据（例如，TTS提供商、后端端点）。
• 音频权限启用语音识别功能时，浏览器可能会提示访问麦克风。

项目结构

├── src/
│   ├── app/               # App Router entrypoints, global layout, styles
│   ├── components/        # Character renderer, UI panels, controls
│   ├── hooks/             # Animation, speech, settings, and API hooks
│   ├── context/           # Shared settings state (mode, audio options)
│   └── services/          # Chat API client, TTS utilities
├── public/                # Static assets (audio cues, 3D models, icons)
├── assets/                # Project documentation imagery (e.g., ui.png)
├── CHARACTER_3D_SETUP.md  # Deep dive into animation system
├── TTS_SETUP.md           # Text-to-Speech configuration guide
└── README.md

可用脚本

• npm run dev – 启动带有热重载功能的 Next.js 开发服务器
• npm run build – 生成优化的生产构建
• npm run start – 在本地运行生产构建
• npm run lint – 使用配置的 ESLint 规则集运行代码检查

资产

• UI 预览： assets/ui.png 提供了主要对话屏幕的快照。请更新此图像，以确保文档与最新的用户界面保持一致。

贡献

1. 克隆该仓库并创建一个功能分支。
2. 遵循现有的代码风格并使用 npm run lint 在提交您的更改之前。
3. 提交一个拉取请求，描述该功能、提供截图（如果涉及用户界面更改）以及测试步骤。

附加文件

• CHARACTER_3D_SETUP.md – 角色动画与情感系统的架构。
• TTS_SETUP.md – ElevenLabs与浏览器基础语音合成的集成详情。

许可证

该项目目前采用私有/内部许可协议进行分发。请联系维护人员获取使用权限。