城市展厅数字人

# 城市展厅数字人讲解系统 基于魔珐星云具身驱动SDK的城市展厅数字人讲解系统，为参观者提供城市历史、文化、规划等内容的深度讲解。 ## 技术栈 - **前端框架**: React 18 + TypeScript - **构建工具**: Vite - **路由**: React Router - **数字人驱动**: 魔珐星云具身驱动SDK (JS版本) ## 快速开始 ### 环境要求 - Node.js >= 18 - npm >= 9 ### 安装依赖 ```bash npm install ``` ### 配置环境变量 复制 `.env.example` 为 `.env`，并填写相关配置： ```bash cp .env.example .env ``` 编辑 `.env` 文件，填入您的配置： ```env # 星云 SDK 配置 VITE_XMOV_APP_ID=your_app_id VITE_XMOV_APP_SECRET=your_app_secret # 大模型 API 配置 VITE_LLM_API_KEY=your_api_key ``` ### 获取星云 SDK 配置 1. 访问 [魔珐星云](https://xingyun3d.com/) 2. 注册并登录账号 3. 进入应用中心，创建驱动应用 4. 选择角色、音色、表演风格 5. 获取 App ID 和 App Secret ### 开发模式 ```bash npm run dev ``` 访问 `http://localhost:3000` ### 构建生产版本 ```bash npm run build ``` ### 预览生产构建 ```bash npm run preview ``` ## 项目结构 ``` CityExhibitionHall/ ├── public/ # 静态资源 ├── src/ │ ├── components/ # 通用组件 │ │ ├── Layout/ # 布局组件 │ │ ├── DigitalHuman/ # 数字人组件 │ │ ├── Charts/ # 图表组件 │ │ ├── VoiceControl/ # 语音控制 │ │ └── QuestionPanel/ # 问题面板 │ ├── pages/ # 页面组件 │ ├── services/ # 服务层 │ ├── store/ # 状态管理 │ ├── hooks/ # 自定义Hooks │ ├── utils/ # 工具函数 │ ├── types/ # TypeScript类型 │ └── styles/ # 样式文件 ├── .env.example # 环境变量示例 ├── index.html ├── package.json ├── vite.config.ts └── tsconfig.json ``` ## 核心功能 - [x] 项目框架搭建 - [ ] 数字人集成 - [ ] 语音交互 - [ ] 智能对话 - [ ] 大屏数据可视化 - [ ] 讲解内容管理 ## 注意事项 1. 本项目需要在 HTTPS 或 localhost 环境下运行 2. 建议使用 Chrome 浏览器以获得最佳兼容性 3. 使用 HTTPS 时需要配置有效的 SSL 证书 ## 开发文档 详细的开发文档请查看 [claude.md](./claude.md) ## 许可证 MIT