DeepSeek + 魔珐星云:10 分钟打造一个会望闻问切的 AI 健康顾问数字人
大模型的时代,大家身体不舒服第一反应是什么?搜百度?问DeepSeek?确实,现在越来越多的人习惯先问AI再决定要不要去医院。但纯文字聊天总归少了点什么——你面对的是一个冷冰冰的对话框,没有表情、没有语气、没有温度。![[图片]](https://i-blog.csdnimg.cn/direct/47675ecf622b4b3dbb4d00a3ed3ce5e4.png)
我一直在想,如果AI能有一个"身体",能像真实的健康顾问一样看着你、对你微笑、用温柔的语气跟你交流,那体验感是不是直接拉满?
直到我遇到了魔珐星云——一个让你10分钟就能搭出3D高拟真数字人的平台。依托平台具身驱动 SDK,搭配 DeepSeek 大模型的医疗知识推理能力,我快速搭建出健康咨询场景的具身交互智能体,效果真的惊艳到我了。![[图片]](https://i-blog.csdnimg.cn/direct/31f7c1b503034708a5474d30bf2989ee.png)
今天这篇文章,手把手带你从零搭建一个属于自己的AI健康顾问,保姆级教程,照着做就行。
一、为什么选魔珐星云?
做过拟人交互开发的开发者大多清楚,行业里一直有个"不可能三角":高质量、低成本、低延迟,三者最多只能取其二。想要逼真的3D数字人?得砸钱请专业团队做建模和动捕。想要低成本?2D纸片人凑合用。想要低延迟?那就得上昂贵的GPU服务器。
魔珐星云直接把这个三角给打破了。核心亮点:
- 端侧渲染技术:不需要GPU服务器,普通设备甚至RK3566芯片都能跑,延迟控制在500ms级别
- 文生3D多模态动作大模型:不是简单的口型同步,而是根据说话内容自动生成肢体动作和表情
- 开箱即用的SDK:一个JS文件引入,几行代码初始化,真的10分钟上手
- 可视化后台配置:选形象、选音色、选动作风格,全程零代码
整套架构实现分层分工:DeepSeek 大模型承担认知推理,魔珐星云补齐具身交互智能表达层。Agent 负责任务推理,具身交互智能解决人与 AI 自然沟通的完整界面。
说真的,第一次跑通Demo的时候我愣了几秒——这流畅度、这表情自然度,比我之前花两周用Unity折腾出来的效果好太多。
二、搭建前的准备工作
开始之前,你需要准备以下东西:
-
魔珐星云账号:去官网注册,注册时可以填我的邀请码 JMWAGFUI8Z(注册页面上可以看到)
![[图片]](https://i-blog.csdnimg.cn/direct/0f57ba56a7214d22b5e2389ef5f21112.png)
-
DeepSeek API Key:去DeepSeek开放平台申请,新用户有免费额度

-
一个代码编辑器:VS Code、WebStorm都行,AI编辑器也可以,比如TreaAi,cursor等

就这三样,没有别的了。不需要GPU、不需要Unity、不需要3D建模软件。
三、后台配置:打造你的专属健康顾问形象
3.1 创建应用
登录魔珐星云控制台后,点击「应用管理」→「创建应用」,填写应用名称(比如"AI健康顾问"),选择应用类型。![[图片]](https://i-blog.csdnimg.cn/direct/1be6ccecdaaf4515939fbf2695217278.png)
创建完成后你会看到两个关键信息:
- App ID:应用的唯一标识
- App Secret:应用密钥
这两个值后面代码里要用,先记下来。![[图片]](https://i-blog.csdnimg.cn/direct/bbf3211e5bbc4b06b9b9e1e7454918a0.png)
3.2 选择数字人形象
进入「数字人管理」页面,这里有一个形象库,涵盖了商务、休闲、职业装等多种风格。作为健康顾问,我选了一个穿白大褂、形象亲和的女性形象——看起来专业又不失温暖。
你也可以根据自己的喜好选择,甚至可以上传自定义形象(需要一定的3D模型基础)。![[图片]](https://i-blog.csdnimg.cn/direct/f71cdf96d23144af96abeba6ccc6f2a2.png)
3.3 配置音色
健康顾问的语音需要温和、清晰、有耐心。在「音色管理」里,我试了好几个音色,最终选了一个偏成熟女声的音色,语速设置为0.9(稍微慢一点,让用户听得清楚)。
魔珐星云的音色库很丰富,支持多语言、多情感色彩,甚至可以定制专属音色。![[图片]](https://i-blog.csdnimg.cn/direct/41632993551b4c46948ad3ac3b3d05b4.png)
3.4 设置表演风格
这一步是魔珐星云区别于其他数字人平台的核心竞争力。在「表演风格」里,你可以设置数字人的肢体动作风格:
- 待机动作:呼吸、微小的身体晃动,让数字人看起来"活着"
- 说话动作:根据语义自动生成手势,比如说到"心脏"会指向胸口
- 情绪表达:可以设置默认情绪为"温和友善"
对于健康顾问场景,我选了"温和专业"风格,动作幅度适中,不会太夸张。
3.5 选择场景
场景就是数字人所在的背景环境。魔珐星云提供了多种内置场景:办公室、客厅、诊室等。我选了一个简洁的背景,搭配白大褂形象,氛围感直接拉满。
配置完成后点击「保存」,然后进入「预览调试」页面测试一下效果。输入一段文字,点击"说话",看看数字人的表现——如果满意,就可以进入代码开发阶段了。
四、SDK接入:核心代码讲解
4.1 整体架构
我们的AI健康顾问架构非常简洁:
用户语音/文字输入 → DeepSeek大模型生成回复 → 魔珐星云SDK驱动数字人说话
整个流程就三步,代码量不到200行。
4.2 引入SDK
魔珐星云的SDK只需要一行script标签引入:
<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>
4.3 初始化数字人
const sdk = new XmovAvatar({
containerId: "#sdk-container", // 数字人渲染容器的DOM选择器
appId: "YOUR_APP_ID", // 替换为你的App ID
appSecret: "YOUR_APP_SECRET", // 替换为你的App Secret
gatewayServer: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session",
onStateChange(state) {
console.log('数字人状态变化:', state);
},
onVoiceStateChange(status) {
console.log('语音状态:', status);
}
});
// 初始化SDK,加载数字人资源
await sdk.init({
onDownloadProgress(progress) {
console.log(`资源加载进度: ${progress}%`);
}
});
这段代码做了两件事:创建SDK实例和初始化加载资源。onStateChange 回调会告诉你数字人当前处于什么状态(idle/listen/think/speak),onDownloadProgress 则用于展示加载进度条。
4.4 接入DeepSeek大模型
async function getAIResponse(messages) {
const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer YOUR_DEEPSEEK_API_KEY` // 替换为你的DeepSeek API Key
},
body: JSON.stringify({
model: "deepseek-chat",
messages: messages,
temperature: 0.7,
max_tokens: 500
})
});
const data = await response.json();
return data.choices[0].message.content;
}
这里用DeepSeek的Chat Completion接口,temperature设为0.7保证回复既有专业性又不会太机械。max_tokens限制在500,因为数字人说话太长用户体验并不好。
端到端约 500ms 响应在实际体验中确实感受明显——数字人不会出现"卡一下再开口"的停顿感,整个交互非常流畅。
4.5 驱动数字人说话
拿到DeepSeek的回复后,调用SDK的speak方法:
// 数字人开始说话
sdk.speak(aiReply, true, true);
// 状态控制
sdk.idle(); // 待机状态
sdk.listen(); // 倾听状态(用户说话时)
sdk.think(); // 思考状态(等待AI回复时)
sdk.interactiveidle(); // 互动待机(微动作)
speak方法的三个参数分别是:文本内容、是否开始、是否结束。对于完整的一句话,两个布尔值都传true即可。
4.6 System Prompt设计
健康顾问的灵魂在于System Prompt。我精心设计了这样一个角色设定:
const systemPrompt = {
role: "system",
content: `你是一位专业的AI健康顾问,名叫"小慧"。你的职责是:
1. 倾听用户的健康问题,给出温和、专业的建议
2. 对于常见的小症状(感冒、头痛、消化不良等),提供实用的缓解方法
3. 对于严重或不确定的症状,建议用户及时就医
4. 语言要亲切温暖,避免使用过于专业的医学术语
5. 每次回复控制在3-4句话以内,适合语音播报
6. 在结尾适当加上关怀语,如"注意休息哦"、"祝你早日康复"
请记住,你不是医生,不能给出确诊和处方,只能提供健康建议。`
};
这段Prompt定义了角色的身份、职责、语言风格、行为边界,非常关键。
五、完整可运行代码
下面是完整的HTML文件,复制保存为.html文件,替换App ID、App Secret和DeepSeek API Key后直接浏览器打开即可运行:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI健康顾问 - 小慧</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.header {
width: 100%;
background: rgba(255,255,255,0.9);
padding: 16px 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
text-align: center;
}
.header h1 { color: #2e7d32; font-size: 22px; }
.header p { color: #666; font-size: 13px; margin-top: 4px; }
.main-container {
display: flex;
gap: 20px;
width: 100%;
max-width: 1200px;
padding: 20px;
flex: 1;
}
.avatar-section {
flex: 1;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
overflow: hidden;
min-height: 500px;
position: relative;
}
#sdk-container {
width: 100%;
height: 100%;
min-height: 500px;
}
.loading-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10;
}
.loading-overlay.hidden { display: none; }
.loading-spinner {
width: 48px; height: 48px;
border: 4px solid #e0e0e0;
border-top-color: #2e7d32;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { margin-top: 16px; color: #666; font-size: 14px; }
.status-badge {
position: absolute;
top: 12px; right: 12px;
background: rgba(46,125,50,0.9);
color: #fff;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
z-index: 5;
}
.chat-section {
width: 380px;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
display: flex;
flex-direction: column;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
max-height: 400px;
}
.message {
margin-bottom: 12px;
max-width: 85%;
padding: 10px 14px;
border-radius: 12px;
font-size: 14px;
line-height: 1.6;
}
.message.user {
background: #e3f2fd;
margin-left: auto;
text-align: right;
}
.message.ai {
background: #e8f5e9;
border-left: 3px solid #2e7d32;
}
.message .role {
font-size: 11px;
color: #888;
margin-bottom: 4px;
}
.input-area {
padding: 12px 16px;
border-top: 1px solid #eee;
display: flex;
gap: 8px;
}
.input-area input {
flex: 1;
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
outline: none;
transition: border-color 0.3s;
}
.input-area input:focus { border-color: #2e7d32; }
.input-area button {
padding: 10px 20px;
background: #2e7d32;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s;
}
.input-area button:hover { background: #1b5e20; }
.input-area button:disabled { background: #aaa; cursor: not-allowed; }
.quick-questions {
padding: 8px 16px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.quick-questions button {
padding: 4px 10px;
background: #f1f8e9;
border: 1px solid #c5e1a5;
border-radius: 16px;
font-size: 12px;
color: #558b2f;
cursor: pointer;
transition: all 0.3s;
}
.quick-questions button:hover {
background: #dcedc8;
}
</style>
</head>
<body>
<div class="header">
<h1>AI健康顾问 · 小慧</h1>
<p>Powered by 魔珐星云 × DeepSeek | 仅供参考,不能替代专业医疗诊断</p>
</div>
<div class="main-container">
<!-- 数字人展示区 -->
<div class="avatar-section">
<div class="status-badge" id="status-badge">初始化中...</div>
<div id="sdk-container"></div>
<div class="loading-overlay" id="loading-overlay">
<div class="loading-spinner"></div>
<div class="loading-text" id="loading-text">正在加载数字人资源,请稍候...</div>
</div>
</div>
<!-- 聊天交互区 -->
<div class="chat-section">
<div class="chat-messages" id="chat-messages">
<div class="message ai">
<div class="role">小慧 · 健康顾问</div>
你好呀,我是小慧,你的AI健康顾问。有什么不舒服的地方尽管告诉我,我会尽力帮你分析~
</div>
</div>
<div class="quick-questions">
<button onclick="fillQuestion('最近总是失眠怎么办?')">最近总是失眠</button>
<button onclick="fillQuestion('吃完饭胃胀不舒服')">饭后胃胀</button>
<button onclick="fillQuestion('换季嗓子疼有什么缓解方法?')">换季嗓子疼</button>
<button onclick="fillQuestion('经常久坐腰酸背痛怎么改善?')">久坐腰酸</button>
</div>
<div class="input-area">
<input type="text" id="user-input" placeholder="描述你的症状或健康问题..."
onkeypress="if(event.key==='Enter') sendMessage()">
<button id="send-btn" onclick="sendMessage()">发送</button>
</div>
</div>
</div>
<!-- 魔珐星云SDK -->
<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>
<script>
// ========== 配置区 ==========
const CONFIG = {
APP_ID: "xxx",
APP_SECRET: "xxx",
DEEPSEEK_API_KEY: "xxx",
GATEWAY: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session"
};
const SYSTEM_PROMPT = {
role: "system",
content: `你是一位专业的AI健康顾问,名叫"小慧"。你的职责是:
1. 倾听用户的健康问题,给出温和、专业的建议
2. 对于常见的小症状(感冒、头痛、消化不良等),提供实用的缓解方法
3. 对于严重或不确定的症状,建议用户及时就医
4. 语言要亲切温暖,避免使用过于专业的医学术语
5. 每次回复控制在3-4句话以内,适合语音播报
6. 在结尾适当加上关怀语,如"注意休息哦"、"祝你早日康复"
请记住,你不是医生,不能给出确诊和处方,只能提供健康建议。`
};
// ========== 全局状态 ==========
let sdk = null;
let messages = [SYSTEM_PROMPT];
let isResponding = false;
// ========== 初始化数字人 ==========
async function initAvatar() {
try {
sdk = new XmovAvatar({
containerId: "#sdk-container",
appId: CONFIG.APP_ID,
appSecret: CONFIG.APP_SECRET,
gatewayServer: CONFIG.GATEWAY,
onStateChange(state) {
console.log('[SDK] 状态变化:', state);
updateStatusBadge(state);
},
onVoiceStateChange(status) {
console.log('[SDK] 语音状态:', status);
}
});
await sdk.init({
onDownloadProgress(progress) {
document.getElementById('loading-text').textContent = `正在加载数字人资源 ${progress}%...`
}
});
// 加载完成,隐藏Loading
document.getElementById('loading-overlay').classList.add('hidden');
document.getElementById('status-badge').textContent = '待机中';
// 数字人打招呼
const greeting = "你好呀,我是小慧,你的AI健康顾问。有什么不舒服的地方尽管告诉我,我会尽力帮你分析。";
addMessage('ai', greeting);
sdk.speak(greeting, true, true);
} catch (error) {
console.error('初始化失败:', error);
document.getElementById('loading-text').textContent =
'加载失败,请检查App ID和App Secret是否正确';
}
}
// ========== 状态标签更新 ==========
function updateStatusBadge(state) {
const badge = document.getElementById('status-badge');
const stateMap = {
'idle': '待机中',
'listen': '倾听中',
'think': '思考中',
'speak': '回答中'
};
badge.textContent = stateMap[state] || state;
}
// ========== 调用DeepSeek获取回复 ==========
async function getAIResponse(userMessage) {
messages.push({ role: "user", content: userMessage });
const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": 'Bearer ' + CONFIG.DEEPSEEK_API_KEY
},
body: JSON.stringify({
model: "deepseek-chat",
messages: messages,
temperature: 0.7,
max_tokens: 500
})
});
const data = await response.json();
const aiReply = data.choices[0].message.content;
messages.push({ role: "assistant", content: aiReply });
return aiReply;
}
// ========== 发送消息 ==========
async function sendMessage() {
const input = document.getElementById('user-input');
const text = input.value.trim();
if (!text || isResponding) return;
isResponding = true;
document.getElementById('send-btn').disabled = true;
input.value = '';
// 添加用户消息到聊天区
addMessage('user', text);
// 数字人进入"思考"状态
sdk.think();
try {
// 获取AI回复
const aiReply = await getAIResponse(text);
// 添加AI消息到聊天区
addMessage('ai', aiReply);
// 数字人说话
sdk.speak(aiReply, true, true);
} catch (error) {
console.error('请求失败:', error);
addMessage('ai', '抱歉,我暂时无法回应,请稍后再试。');
sdk.idle();
} finally {
isResponding = false;
document.getElementById('send-btn').disabled = false;
}
}
// ========== 添加消息到聊天界面 ==========
function addMessage(role, content) {
const messagesDiv = document.getElementById('chat-messages');
const msgDiv = document.createElement('div');
msgDiv.className = 'message ' + role;
const roleLabel = role === 'user' ? '我' : '小慧 · 健康顾问';
msgDiv.innerHTML = `<div class="role">${roleLabel}</div>${content}`;
messagesDiv.appendChild(msgDiv);
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
// ========== 快捷问题填充 ==========
function fillQuestion(text) {
document.getElementById('user-input').value = text;
document.getElementById('user-input').focus();
}
// ========== 启动 ==========
window.addEventListener('load', initAvatar);
</script>
</body>
</html>
代码结构说明:
整个页面分为左右两部分——左侧是数字人渲染区域,右侧是文字聊天区域。顶部状态标签实时显示数字人当前状态(待机/倾听/思考/回答)。底部有快捷问题按钮,方便用户直接点击常见症状进行咨询。
核心交互流程是:用户输入文字 → sendMessage() 被调用 → 数字人进入think状态 → 调用DeepSeek API获取回复 → 数字人speak说出回复。整个过程异步进行,用户可以实时看到数字人状态变化。
六、实际体验效果
跑起来之后,我测试了几个典型场景:
场景一:“最近总是失眠怎么办?”
小慧回复:“失眠确实很困扰人呢。建议你睡前一小时放下手机,可以试试泡个热水脚或者听些轻柔的音乐。白天适当运动也有助于改善睡眠质量。如果持续两周以上没有好转,建议去看看医生哦。注意休息呀~”
同时数字人会做出温和的手势,表情带着关切,语气柔和——这个体验和打字聊天完全不是一个级别。
场景二:“吃完饭胃胀不舒服”
小慧回复:“饭后胃胀可能是消化不太好的表现。建议你吃饭时细嚼慢咽,少吃容易产气的食物比如豆类和碳酸饮料。饭后可以散散步帮助消化,不要马上躺下。如果经常出现这种情况,最好去医院检查一下胃肠道。祝你早日舒适起来~”
场景三:“胸口突然很疼”
小慧回复:“胸口疼痛不容忽视,可能是心脏或其他严重问题。建议你立刻停止当前活动,如果伴有呼吸困难、出汗等症状,请立即拨打120急救电话。这种情况下一定要及时就医,不要拖延。请一定要注意安全!”
可以看到,对于严重症状,System Prompt的约束发挥了作用——小慧会建议立即就医,而不是随意给出"缓解方法"。
延迟表现:从用户发送消息到数字人开始说话,整体延迟在1-2秒左右(主要是DeepSeek生成时间),数字人说话的延迟几乎可以忽略不计。端侧渲染的流畅度非常不错。
七、应用场景拓展
健康顾问只是一个起点,基于这套架构你还可以拓展出很多场景:
- 企业健康管家:为公司员工提供日常健康咨询、体检报告解读
- 养老陪护助手:为独居老人提供24小时健康提醒和情感陪伴
- 药店智能导购:在药店大屏上部署数字人,根据顾客症状推荐合适的非处方药
- 社区健康驿站:在社区卫生服务站提供基础健康咨询和分诊引导
魔珐星云AI 端侧解算 + 参数流架构的核心优势在以上场景充分体现:无需云端 GPU 算力,普通终端硬件就可以承载完整具身交互智能体运行。
总结
这次基于魔珐星云搭配 DeepSeek 搭建健康咨询类 Agent Demo,有几点很深的开发体会: 第一,开发接入门槛低。完成账号注册到跑通可交互原型,操作顺利的情况下十分钟就可以完成;SDK 接口设计清晰,配套开发者文档完善,降低了具身交互能力的落地成本。
第二,具身交互智能重构沟通体验。同样一套健康咨询建议,纯文本输出读起来更像冰冷的百科词条;当大模型推理结果转化为具备表情、关怀手势、情绪语调的完整具身交互输出,就会建立起温度与信任感。这里并不是虚拟形象本身带来价值,而是整套多模态交互体系补齐了 Agent 缺失的沟通界面。
第三,AI 端侧解算 + 参数流架构是落地杀手锏。不依赖云端 GPU 服务器,大幅压低规模化部署成本,非常适合健康咨询这类需要大面积落地到各类终端的业务场景。
大模型与 Agent 负责思考和任务执行,魔珐星云补齐面向终端的具身交互智能表达界面。
相关资源:
更多推荐





所有评论(0)