基于DeepSeek3D具身交互智能的垃圾分类助手落地实战如何将我们的产品拟人化先给大家抛出一个问题大家可以思考一下。这两年真的太明显了不管是深圳还是全国人形机器人、具身智能这个赛道直接彻底爆火绝对是 AI 接下来的核心风口。我最近闲下来总刷各类博主的实测测评发现近两年人形硬件机器人赛道热度高涨但实体设备成本高、线上大屏、社区科普等轻量化场景难以复用而纯文本国产大模型又缺少可视化交互载体。很多企业、社区都有疑问官网接待、科普大屏、24 小时宣教这类轻量化线上场景该低成本搭建专属具身交互智能体常规我们的AI对话仅依托 DeepSeek 这类国产大模型搭建纯文本问答交互模式极度单一冰冷没有具象载体支撑自然沟通。是不是看起来蛮死板的接入补齐完整具身交互智能后3D 具身交互智能体搭配同步表情、手势科普交互体验实现质的升级是不是看起来生动形象了很多。早年间我们做线上服务、智能科普方式真的特别简陋。要么靠人工客服24小时值守人力成本巨高还容易出错要么搭个简单的RAG知识库问答交互死板、功能单一毫无体验感用来做垃圾分类科普基本没人愿意看。如今国产大模型能力日趋成熟搭配AI具身智能数字人标准化具身交互智能底座即可实现真人般的细腻表情、自然流畅的肢体动作、贴合场景的语音播报再加上大模型的智能问答能力接入难度极低不用组建专业研发团队就能直接落地到网站、大屏、线上科普场景中。魔珐星云官网点击查看链接二、落地实拍彻底换掉老旧死板的垃圾分类科普大家平时小区里的垃圾分类大屏基本都是摆设几张静态海报、固定文字介绍没人愿意看。社区、学校想做科普要么靠人工值守讲解费人费力要么就是无人问津的展板根本起不到效果。但换成DeepSeek打造的的3D具身垃圾分类助手**之后整个体验直接升级。一块普通大屏直接变成24小时在岗的专属环保讲解员不用人工看管随时有人问就随时答。给大家描述下真实使用场景居民扔垃圾拿不准直接对着大屏提问“奶茶杯是什么垃圾”“废电池怎么扔”“破损陶瓷碗属于哪一类”。屏幕里的3DAI助手会带着自然的表情、抬手、点头一边做动作一边口语化讲解不仅说清分类类别还会提醒投放注意事项。遇到复杂的混合垃圾会一步步拆解说明而且你随时可以打断它、问新问题互动感拉满完全不像机器。对比传统方案是不是看起来很拟人化。三、硬核实战单文件搭建DeepSeekAI数字人垃圾分类智能助手本次实战无需复杂后端架构抛弃Node.js、FastAPI中转仅通过单HTML文件原生SSE流式解析XmovAvatar****具身交互 SDK快速搭建可直接运行、可实时交互的3D具身垃圾分类智能助手。全程前端轻量化部署开发者零门槛复刻快速落地垃圾分类具身AI场景。3.1 前期准备工作咱们先把准备工作说清楚超级简单没有任何复杂操作小白照着弄就行。首先需要两个核心凭证一个是 DeepSeek 大模型的 API Key另一个是AI数字人的应用密钥。Ai-DeepSeek官网https://deepseek.com/DeepSeek 的 Key 大家自己去官网注册、开通额度就能拿到现在国产大模型开户都很方便免费额度完全够咱们测试 Demo 使用我这里就不啰嗦细讲流程了。重点说下数字人这边大家直接点击链接打开官网注册登录之后新建一个自己的具身交互智能应用。里面可以随便选喜欢的数字人形象、适配科普场景的音色、默认待机动作全部可视化操作点点鼠标就能配置好。配置完成之后后台会自动生成两个关键信息App ID、App Secret这两个东西一定要保存好后面代码里必须用到。所有准备工作就这三步搞定之后咱们直接上手写代码、跑项目。先准备好大模型和数字人3D应用的配置这里我是用的deepseek作为大模型底座这个自己去deepseek的平台创建API获取key就OK了 这里就不赘述了3.2 完整可直接运行源码我把所有代码都精简好了整站就一个 HTML 文件不用搭后端、不用装依赖、不用配置环境。大家直接复制下面全部代码新建一个 index.html 文件粘贴进去只需要替换里面三处自己的密钥直接就能跑通完整的垃圾分类数字人交互效果,提示此处Html文件只做学习参考方便大家阅读以及引入数字人SDK密钥要记的加密保存哦通过后端代理中转的方式。代码我也做了中文注释每一块功能都分得清清楚楚方便大家后期自己改样式、改话术、改交互逻辑。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title垃圾分类小助手 - 3D 智能导览/title script srchttps://cdn.jsdelivr.net/npm/tailwindcss/browser4/script script srchttps://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatarlatest.js/script style body { background: linear-gradient(180deg, #022c22 0%, #064e3b 50%, #0f766e 100%); background-attachment: fixed; } #avatar-container { background: linear-gradient(135deg, #047857, #022c22); box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5); } .glass-panel { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); } .category-card { transition: all 0.3s ease; } .category-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .glow-text { text-shadow: 0 0 20px rgba(74, 222, 128, 0.5); } /style /head body classtext-green-50 min-h-screen div classw-full max-w-6xl mx-auto p-4 md:p-6 header classmb-6 text-center div classinline-flex items-center gap-3 mb-2 span classtext-4xl animate-bounce/span h1 classtext-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-green-300 via-emerald-400 to-teal-300 glow-text ♻️ 垃圾分类智能助手 /h1 span classtext-4xl animate-bounce styleanimation-delay: 0.5s/span /div p classtext-green-300/80 text-sm md:text-base智能识别 · 精准分类 · 共建绿色家园/p /header div classgrid grid-cols-4 gap-3 mb-6 div classcategory-card glass-panel rounded-xl p-4 text-center cursor-pointer hover:bg-blue-600/20 div classw-12 h-12 mx-auto mb-2 rounded-full bg-blue-600 flex items-center justify-center text-2xl shadow-lg shadow-blue-600/30♻️/div span classtext-xs md:text-sm font-medium text-green-100可回收物/span /div div classcategory-card glass-panel rounded-xl p-4 text-center cursor-pointer hover:bg-red-600/20 div classw-12 h-12 mx-auto mb-2 rounded-full bg-red-600 flex items-center justify-center text-2xl shadow-lg shadow-red-600/30☠️/div span classtext-xs md:text-sm font-medium text-green-100有害垃圾/span /div div classcategory-card glass-panel rounded-xl p-4 text-center cursor-pointer hover:bg-yellow-500/20 div classw-12 h-12 mx-auto mb-2 rounded-full bg-yellow-500 flex items-center justify-center text-2xl shadow-lg shadow-yellow-500/30/div span classtext-xs md:text-sm font-medium text-green-100厨余垃圾/span /div div classcategory-card glass-panel rounded-xl p-4 text-center cursor-pointer hover:bg-gray-500/20 div classw-12 h-12 mx-auto mb-2 rounded-full bg-gray-500 flex items-center justify-center text-2xl shadow-lg shadow-gray-500/30️/div span classtext-xs md:text-sm font-medium text-green-100其他垃圾/span /div /div div classglass-panel rounded-2xl shadow-2xl overflow-hidden div classrelative h-[450px] md:h-[500px] idavatar-container div idsdk_canvas classw-full h-full/div div idloading-tips classabsolute inset-0 flex flex-col items-center justify-center bg-black/60 p-4 text-center div classanimate-spin rounded-full h-16 w-16 border-4 border-green-400 border-t-transparent mb-4/div p classtext-lg text-green-100环保小助手正在准备中.../p p classtext-sm text-green-400/70 mt-2首次加载需下载资源请耐心等待/p /div div classabsolute top-4 right-4 bg-black/40 backdrop-blur-md px-4 py-2 rounded-full text-sm flex items-center gap-2 border border-green-500/30 span classh-2 w-2 rounded-full bg-emerald-400 animate-pulse shadow-lg shadow-emerald-400/50/span span idstatus-text classtext-green-200环保小助手未就绪/span /div /div div classp-6 md:p-8 bg-green-950/30 div idchat-output classh-[200px] md:h-[250px] overflow-y-auto bg-black/20 rounded-xl p-4 mb-4 text-sm space-y-3 div classtext-center text-green-400/60 text-xs py-4 有任何垃圾分类的问题随时问我哦br span classtext-green-500/50表达层首响更快完整问答耗时仍取决于大模型、网络和文本长度/span /div /div div classspace-y-3 div classflex gap-3 input typetext iduser-input placeholder输入你想问的垃圾分类问题比如苹果核属于什么垃圾 classflex-1 bg-black/30 border border-green-700/50 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-green-400 focus:ring-2 focus:ring-green-400/20 transition-all button idsend-btn classbg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-400 hover:to-emerald-400 px-6 py-3 rounded-xl text-sm font-semibold transition-all shadow-lg shadow-green-500/25 active:scale-95 发送 /button /div button idstop-btn classw-full bg-red-900/30 hover:bg-red-800/50 text-red-200 hover:text-white py-2.5 rounded-xl text-sm font-medium transition-all border border-red-700/30 hover:border-red-500/50 停止发言 /button /div /div /div footer classmt-6 text-center text-green-400/50 text-xs p让垃圾分类成为一种生活习惯 /p /footer /div script // ⚠️ 安全警告此文件仅用于演示目的 // 生产环境中API密钥不应硬编码在前端代码中 // 建议将DeepSeek请求放到后端代理通过/api/chat中转 // 浏览器直连第三方API存在CORS限制和密钥泄露风险 const CONFIG { mofa: { appId: xxx, appSecret: xxx, gatewayServer: https://nebula-agent.xingyun3d.com/user/v1/ttsa/session }, deepseek: { apiKey: sk-xxx, apiUrl: https://api.deepseek.com/v1/chat/completions, systemPrompt: 你是一个名叫‘小绿’的活泼可爱的垃圾分类小助手。你的语言风格亲切、热情就像邻家妹妹一样。专门解答各类垃圾分类问题帮助用户正确识别垃圾种类。回答控制在80字以内适合口语表达不要使用分点列表或代码块。 } }; let mofaSdk null; let isFirstSentence true; let textBuffer ; const punctReg /[。;!?]/; let abortController null; let requestVersion 0; function toInteractiveIdle() { if (!mofaSdk) return; mofaSdk.interactiveidle?.() ?? mofaSdk.interactiveIdle?.(); } function initMofaAvatar() { if (typeof XmovAvatar undefined) { console.error(SDK 脚本未成功加载请检查网络链接。); return; } mofaSdk new XmovAvatar({ containerId: #sdk_canvas, appId: CONFIG.mofa.appId, appSecret: CONFIG.mofa.appSecret, gatewayServer: CONFIG.mofa.gatewayServer, onMessage: function(msg) { console.log(SDK 收到通知:, msg); } }); mofaSdk.init({ onDownloadProgress: (progress) { console.log(资源下载进度:, progress %); document.getElementById(status-text).innerText 正在加载资源: ${progress}%; } }).then(() { console.log(3D 渲染就绪); document.getElementById(loading-tips).style.display none; const statusEl document.getElementById(status-text); statusEl.innerText 环保小助手已就绪; statusEl.classList.add(text-emerald-300); }).catch((err) { console.error(3D 初始化失败:, err); document.getElementById(status-text).innerText 初始化异常; }); } window.addEventListener(load, initMofaAvatar); function processStreamText(textChunk, isFinal false) { textBuffer textChunk; let match; while ((match punctReg.exec(textBuffer)) ! null) { const breakIndex match.index 1; const sentence textBuffer.substring(0, breakIndex).trim(); textBuffer textBuffer.substring(breakIndex); if (sentence.length 0) { driveAvatarSpeak(sentence, false); } } if (isFinal textBuffer.trim().length 0) { driveAvatarSpeak(textBuffer.trim(), true); textBuffer ; } } function driveAvatarSpeak(text, isEnd) { if (!mofaSdk) return; console.log([驱动声音] isStart${isFirstSentence}, isEnd${isEnd}, 文本: ${text}); mofaSdk.speak(text, isFirstSentence, isEnd); if (isFirstSentence) { isFirstSentence false; } } async function handleSendMessage() { const inputEl document.getElementById(user-input); const outputEl document.getElementById(chat-output); const query inputEl.value.trim(); if (!query) return; inputEl.value ; textBuffer ; isFirstSentence true; requestVersion; const currentVersion requestVersion; if (abortController) { abortController.abort(); } abortController new AbortController(); outputEl.innerHTML div classtext-rightspan classbg-green-500 text-white inline-block px-4 py-2 rounded-xl rounded-tr-none max-w-[85%] text-left shadow-lgb你/b${query}/span/div; const aiBubbleContainer document.createElement(div); aiBubbleContainer.className text-left; const aiBubble document.createElement(span); aiBubble.className bg-green-800/80 border border-green-600/50 text-green-100 inline-block px-4 py-2 rounded-xl rounded-tl-none max-w-[85%] shadow-lg; aiBubble.innerHTML b小绿/b; aiBubbleContainer.appendChild(aiBubble); outputEl.appendChild(aiBubbleContainer); outputEl.scrollTop outputEl.scrollHeight; try { const response await fetch(CONFIG.deepseek.apiUrl, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${CONFIG.deepseek.apiKey} }, body: JSON.stringify({ model: deepseek-chat, messages: [ { role: system, content: CONFIG.deepseek.systemPrompt }, { role: user, content: query } ], stream: true }), signal: abortController.signal }); if (!response.ok) throw new Error(HTTP 异常: ${response.status}); const reader response.body.getReader(); const decoder new TextDecoder(utf-8); streamLoop: while (true) { const { done, value } await reader.read(); if (done) { if (currentVersion ! requestVersion) break; processStreamText(, true); break; } const chunkStr decoder.decode(value, { stream: true }); const lines chunkStr.split(\n); for (let line of lines) { line line.trim(); if (!line || line data: [DONE]) continue; if (line.startsWith(data:)) { try { if (currentVersion ! requestVersion) break streamLoop; const jsonStr line.replace(data:, ).trim(); const parsed JSON.parse(jsonStr); const token parsed.choices[0]?.delta?.content || ; if (token) { aiBubble.innerHTML token; outputEl.scrollTop outputEl.scrollHeight; processStreamText(token, false); } } catch (err) {} } } } } catch (error) { if (error.name AbortError) return; console.error(error); aiBubble.innerHTML span classtext-red-400br[连接异常]/span; } } document.getElementById(send-btn).addEventListener(click, handleSendMessage); document.getElementById(user-input).addEventListener(keydown, (e) { if (e.key Enter) handleSendMessage(); }); document.getElementById(stop-btn).addEventListener(click, () { requestVersion; if (abortController) { abortController.abort(); abortController null; } toInteractiveIdle(); textBuffer ; isFirstSentence true; document.getElementById(chat-output).innerHTML div classtext-center italic text-amber-400 text-xs py-2⚠️ 已停止/div; }); /script /body /html温馨提示Tips:本html示例仅作为学习参考ApiKeyappSecret不能硬编码展示在项目中易受CORS和密钥泄露影响,千万不能将我们的密钥给泄露哦~更多项目以及生产环境项目Vue版本参考请移步Gitee:仓库地址https://gitee.com/xiaotietou/wangl-xingyun3.3 核心功能简单讲解这几十行代码就能引入我们的数字人功能。第一彻底解决延迟问题传统预制视频数字人属于单向播报无完整具身交互链路必须等待全文生成再渲染参数流架构分段流式驱动是实现流畅具身交互智能的基础大模型分段文本即可同步驱动表情、语音大幅降低等待延迟。数字人的运行流程我们可以在工作台里面去看到我们可以进行一个测试500ms就能进行从SDK的调用到成功渲染具身智能形象。重点就是这句interactiveIdle()它可以直接清空当前所有播放内容让数字人瞬间回到待机状态。不管它讲到哪你随时提问、随时打断不会出现声音重叠、画面卡死的情况这也是商用级具身智能的核心能力。document.getElementById(stop-btn).addEventListener(click, () { if (mofaSdk) { mofaSdk.interactiveIdle(); textBuffer ; isFirstSentence true; document.getElementById(chat-output).innerHTML div classtext-center italic text-amber-400 text-xs py-2⚠️ 已停止/div; } });第三AI大模型的引入和运行配置文件const CONFIG { mofa: { appId: xxx, appSecret: xxx, gatewayServer: https://nebula-agent.xingyun3d.com/user/v1/ttsa/session }, deepseek: { apiKey: sk-xxx, apiUrl: https://api.deepseek.com/v1/chat/completions, systemPrompt: 你是一个名叫‘小绿’的活泼可爱的垃圾分类小助手。你的语言风格亲切、热情就像邻家妹妹一样。专门解答各类垃圾分类问题帮助用户正确识别垃圾种类。回答控制在80字以内适合口语表达不要使用分点列表或代码块。 } }; 配置文件AI数字人提示词你是一个名叫‘小绿’的活泼可爱的垃圾分类小助手。你的语言风格亲切、热情就像邻家妹妹一样。 专门解答各类垃圾分类问题帮助用户正确识别垃圾种类。回答控制在80字以内适合口语表达不要使用分点列表或代码块。LLM引入大模型const response await fetch(CONFIG.deepseek.apiUrl, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${CONFIG.deepseek.apiKey} }, body: JSON.stringify({ model: deepseek-chat, messages: [ { role: system, content: CONFIG.deepseek.systemPrompt }, { role: user, content: query } ], stream: true }) });五、运行避坑指南很多人第一次跑会翻车基本都是两个小问题我提前给大家避坑百分百能跑通。1. 绝对不能直接双击打开HTML文件cnpm install serve serve -p 3000 然后打开浏览器2. 正式业务一定要后端中转咱们这个Demo为了简单直接把API密钥写在前端了适合测试学习。但如果是社区、学校、企业正式落地一定要把大模型请求、密钥验签放到后端防止密钥泄露这是商用项目的基本规范。六、最后总结现在大家应该彻底看懂了为什么说大模型负责动脑3D具身数字人负责落地。DeepSeek、千问这些国产大模型已经把知识问答、逻辑判断做到极致了垃圾分类这种知识性问题对大模型来说根本没难度。但空有知识只能困在对话框里冷冰冰的没人看、没人用根本落不了地。而的具身交互智能就是给 AI 装上身体、表情和动作通过 AI 端渲、端侧解算与参数流把枯燥的文字问答变成可视化、可交互、有温度、全天候在线的真人级服务。从硬件人形机器人的火爆到软件端具身数字人的普及AI的下半场早就不是“比谁更聪明”而是比谁更贴近场景、更会服务人、更自然好用。大家可以复制html运行也可以在html之上通过AI编辑器进行延申。魔珐星云官网点击跳转官网