【开源】基于魔珐星云SDK的AI实时交互教育数字人实战
tags: 开源 数字人 Vue3 FastAPI Python AI 魔珐星云
需求背景
在做在线教育产品的过程中，我一直思考一个问题：如何让AI教学更有温度？
传统的AI教学助手，要么是纯文字问答，要么是冰冷的对话框。用户流失率高、完课率低——因为缺乏"存在感"。
于是我开始研究数字人技术，想让AI"活"起来。最终选择接入魔珐星云的具身驱动SDK，开发了这个开源项目：
🔗 AI实时交互教育数字人 - 基于魔珐星云SDK + 通义千问的智能教学平台
项目地址：
- ModelScope创空间
- GitHub同步维护中
技术方案
整体架构
┌─────────────────────────────────────────────────────┐
│ 前端 (Vue 3 + TS) │
│ ┌─────────┐ ┌──────────┐ ┌───────────────────┐ │
│ │ 数字人渲染 │ │ 课程面板 │ │ 终端模拟器 │ │
│ └────┬────┘ └────┬─────┘ └─────────┬─────────┘ │
└───────┼────────────┼──────────────────┼────────────┘
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────────┐
│ 后端 (FastAPI + Python) │
│ ┌──────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ 魔珐星云SDK │ │ 通义千问API │ │ 腾讯云ASR │ │
│ └──────────────┘ └────────────┘ └────────────┘ │
└─────────────────────────────────────────────────────┘
核心技术栈
| 模块 | 技术选型 | 说明 |
|---|---|---|
| 前端框架 | Vue 3 + TypeScript | 组件化开发，类型安全 |
| 构建工具 | Vite | 极速开发体验 |
| 后端框架 | FastAPI | 高性能异步API |
| 数字人SDK | 魔珐星云 | 超写实数字人渲染 |
| 大模型 | 通义千问(Qwen) | 智能对话能力 |
| 语音识别 | 腾讯云ASR | 语音输入支持 |
核心功能实现
1. 数字人渲染接入
魔珐星云SDK提供了标准化的Web接入方案，核心代码如下：
// 初始化数字人
import { Avatar } from '@xingyun/avatar-sdk';
const avatar = new Avatar({
appId: process.env.AVATAR_APP_ID,
appSecret: process.env.AVATAR_APP_SECRET,
container: '#avatar-container'
});
// 监听对话事件
avatar.on('speak', (text) => {
console.log('数字人正在说:', text);
});
avatar.on('action', (action) => {
console.log('执行动作:', action);
});
2. 对接通义千问
# app.py
from fastapi import FastAPI
import httpx
app = FastAPI()
@app.post("/api/chat")
async def chat(message: str):
async with httpx.AsyncClient() as client:
response = await client.post(
"https://api.modelscope.cn/v1/qwen/chat",
headers={"Authorization": f"Bearer {os.getenv('MODEL_SCOPE_API_KEY')}"},
json={"query": message}
)
return response.json()
3. 语音识别集成
// 使用腾讯云ASR进行语音转文字
const recognizeSpeech = async (audioBlob: Blob) => {
const formData = new FormData();
formData.append('audio', audioBlob);
const response = await fetch('/api/asr', {
method: 'POST',
body: formData
});
const { text } = await response.json();
return text;
};
项目结构
Magic_Nebula_Digital_Human/
├── app.py # FastAPI 后端
├── Dockerfile # Docker部署
├── README.md
└── 基础接入demo/
├── src/
│ ├── components/ # Vue组件
│ │ ├── AvatarPlayer.vue # 数字人播放器
│ │ ├── ChatPanel.vue # 对话面板
│ │ └── Terminal.vue # 终端模拟器
│ ├── services/
│ │ ├── avatar.ts # 数字人服务
│ │ ├── llm.ts # 大模型服务
│ │ └── asr.ts # 语音识别
│ └── stores/ # 状态管理
└── package.json
快速部署
方式一：ModelScope 创空间（推荐）
# Fork项目到ModelScope
# 在创空间「设置」→「环境变量」中配置：
AVATAR_APP_ID=你的AppID
AVATAR_APP_SECRET=你的AppSecret
MODEL_SCOPE_API_KEY=你的APIKey
方式二：本地开发
# 克隆项目
git clone https://www.modelscope.cn/studios/Joe2yyo/Magic_Nebula_Digital_Human.git
cd Magic_Nebula_Digital_Human/基础接入demo
# 安装依赖
npm install
# 启动前端
npm run dev
# 新开终端，启动后端
cd ..
pip install fastapi uvicorn httpx websockets
python app.py
方式三：Docker
docker build -t magic-nebula-digital-human .
docker run -p 7860:7860 \
-e AVATAR_APP_ID=xxx \
-e AVATAR_APP_SECRET=xxx \
-e MODEL_SCOPE_API_KEY=xxx \
magic-nebula-digital-human
效果演示
🎬 B站演示视频： m.bilibili.com/video/BV1SR…
视频演示了：
- 数字人语音对话交互
- Git/Docker课程实操教学
- 终端命令执行与AI即时反馈
踩坑总结
1. 跨域问题
后端使用FastAPI，前端Vite开发时需要配置代理：
// vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:7860',
changeOrigin: true
}
}
}
})
2. SDK连接稳定性
生产环境建议增加断线重连机制：
avatar.on('disconnect', () => {
console.log('连接断开，3秒后重连...');
setTimeout(() => avatar.connect(), 3000);
});
3. 语音延迟优化
使用WebSocket实时传输，避免轮询造成的延迟感。
后续计划
- 支持更多课程内容（K8s、数据库等）
- 增加多数字人切换
- 接入更多国产大模型
- Web端实时终端
欢迎PR和Star！🙏
写在最后
魔珐星云的具身驱动技术确实让AI"活"了起来。如果你也想做数字人相关的项目，不妨先注册体验一下：
👉 注册链接： c.c1nd.cn/9C9WW 💎 邀请码： J3VA6QNSW2
未来已来，期待与各位在星云中相遇 🌌
如果对你有帮助，欢迎点赞、评论交流！
