# vue-xingyun-ai-customer-service

**Repository Path**: nickygitee/vue-xingyun-ai-customer-service

## Basic Information

- **Project Name**: vue-xingyun-ai-customer-service
- **Description**: 基于魔珐星云sdk实现的智能客服
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-04
- **Last Updated**: 2025-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-xingyun-ai-customer-service

#### 介绍
基于魔珐星云SDK与Vue框架开发的智能3D数字人客服系统，集成了豆包大模型提供自然语言交互能力。该系统实现了用户与3D数字人之间的实时对话功能，通过AI驱动的语音交互和生动的数字人表情动作，为用户提供沉浸式的智能服务体验。

核心功能：
- 3D数字人实时渲染与动作驱动
- 豆包大模型提供智能问答支持
- 文本转语音(TTS)与语音合成功能
- 支持流式对话与实时字幕显示
- 响应式界面设计，适配多种设备

#### 软件架构
1. **技术栈**
   - 前端框架：Vue 3 + Vite
   - 构建工具：Vite 4.x
   - 核心依赖：魔珐星云SDK、OpenAI SDK(对接豆包)、Express
   - 样式解决方案：CSS原生 + 组件内样式

2. **核心模块**
   - 数字人渲染引擎：基于魔珐星云SDK实现3D模型渲染与动作控制
   - 对话管理系统：处理用户输入与AI响应的交互逻辑
   - AI交互服务：封装豆包大模型API，提供文本生成能力
   - 前端UI组件：实现用户界面与交互逻辑

3. **通信方式**
   - 豆包大模型：HTTP接口通信
   - 数字人控制：WebSocket实时通信
   - 前后端交互：RESTful API

#### 项目结构
```
vue-xingyun-ai-customer-service/
├── .gitignore                 # Git忽略文件配置
├── index.html                 # 入口HTML文件
├── package.json               # 项目依赖配置
├── package-lock.json          # 依赖版本锁定文件
├── README.md                  # 项目说明文档
├── README.en.md               # 英文说明文档
├── vite.config.js             # Vite配置文件
├── src/
│   ├── main.ts                # 应用入口文件
│   ├── App.vue                # 根组件
│   ├── styles/
│   │   └── main.css           # 全局样式
│   ├── services/              # 服务层
│   │   ├── llm.service.js     # 豆包大模型服务封装
│   │   └── xingyun.service.js # 魔珐星云SDK服务封装
│   ├── components/            # 业务组件
│   │   └── CustomerService.vue # 客服主组件
│   ├── config/                # 配置文件
│   └── utils/                 # 工具函数
└── dist/                      # 构建输出目录(执行build后生成)
```

#### 安装教程
1. 克隆仓库到本地
   ```bash
   git clone <仓库地址>
   cd vue-xingyun-ai-customer-service
   ```

2. 安装依赖
   ```bash
   npm install
   ```

3. 配置环境变量
   - 复制`.env.example`为`.env`
   - 填写魔珐星云SDK的appId和appSecret
   - 配置豆包大模型的API密钥

4. 启动开发服务器
   ```bash
   npm run dev
   ```

5. 构建生产版本
   ```bash
   npm run build
   ```

6. 预览生产版本
   ```bash
   npm run preview
   ```

#### 使用说明
1. **初始化配置**
   - 在`src/config`中设置魔珐星云SDK密钥与豆包API信息
   - 可配置数字人形象、对话参数、界面主题等

2. **核心服务调用**
   - 数字人控制：通过`XingYunService`调用`speak()`方法实现语音播报
   - AI对话：使用`LLMService`的`sendMessage()`或`sendMessageStream()`获取回答

3. **组件使用**
   - `CustomerService.vue`为客服主组件，包含数字人展示区和对话交互区
   - 可通过props自定义组件行为，通过events处理交互事件

#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

#### 特技
1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)