小区里的垃圾分类大屏通常能提供基础规则，但很难处理居民在投放时遇到的具体问题：奶茶杯要不要先倒掉残液、废电池应放到哪里、破损陶瓷碗算哪一类。静态内容适合展示规则，问答场景则需要更及时的交互。

这篇文章记录一个实验性 Demo：将大模型问答与 3D 数字人 SDK 接入网页，尝试用于社区、学校或园区的垃圾分类科普。本文重点是实现方式、交互限制和部署注意事项，不讨论产品选型优劣。

上图是原始页面。它具备文字问答能力，但表达形式仍以页面文字为主。下面的版本在同一类页面中加入 3D 形象，用来承载播报、表情和待机状态；这并不改变问答本身的准确性，分类结果仍需要由知识库、提示词和人工校验共同保证。

1. 这个 Demo 想解决什么问题

相较于播放固定视频，问答式页面可以根据提问内容返回不同答案；相较于纯文本聊天窗口，数字人能提供语音和动作反馈。这种形式适合把内容控制在较短的解释内，例如提示用户先清空饮料杯中的残液，再按当地规则投放。

不过，它不是人工讲解员的替代品。地方垃圾分类规则存在差异，复杂物品也可能需要进一步确认。上线前应依据当地主管部门的公开指引整理知识库，并设置“无法确认时请咨询物业或投放点”的兜底回复。

本示例把 DeepSeek 作为对话模型，把魔珐星云的 XmovAvatar SDK 用作 3D 表达层。两者职责不同：前者生成回答，后者负责展示、播报和中断当前发言。替换其中任一部分并不会改变下文的整体思路。

在实际体验中，值得关注的是以下几点：

• 回答是否引用了当地适用的分类规则，而不是只依赖模型的通用知识；
• 首句出现、语音播报与画面状态是否足够快，用户是否愿意等；
• 新问题到来时，能否中断旧回答并清理播放队列；
• 网络异常、SDK 加载失败或模型超时时，界面能否给出明确提示。

2. 页面与交互实现

Demo 使用一个 HTML 页面完成界面、SSE 流式读取和数字人调用。大模型持续返回文本后，页面按句号、问号等标点切分，再将完整句子依次传给 SDK 播报。这样不必等待整段回答生成完毕，表达层可以更早开始工作。

这里的“单文件”仅适用于本地验证交互链路。它不等于生产部署方案：浏览器直接调用大模型接口会暴露密钥，也可能受到跨域策略影响。生产环境应把模型调用放到服务端，并对请求做鉴权、限流、日志脱敏和错误处理。

2.1 准备配置

需要准备两类配置：大模型服务的访问凭证，以及数字人应用的应用标识与密钥。请只在服务端或本地安全环境中保存这些凭证，示例中的 xxx 和 sk-xxx 仅为占位符。

在数字人控制台中创建应用后，可按场景选择形象、音色和待机动作。配置项的名称和可选内容以控制台当前版本为准。

2.2 完整示例代码

此处保留原文的完整 HTML 代码块。代码中已经包含流式解析、初始化状态和停止按钮的实现。发布前建议同步做两处调整：

• 删除前端中的真实 apiKey、appSecret，改为请求自己的后端接口；
• 将提示词改为引用本地垃圾分类规则，并为不确定的问题保留人工确认提示。

2.3 两个实现细节

流式分句。 页面从 SSE 响应中逐步读取文本，遇到句末标点便调用 speak。这种方式主要改善表达层的首句等待；完整回答所需时间仍取决于模型、网络和回答长度。

中断当前发言。 停止按钮会取消当前请求、清空文本缓冲，并调用 SDK 的待机方法。不同 SDK 版本的方法名可能不同，原示例已兼容 interactiveidle 与 interactiveIdle 两种写法；接入时仍应以当前 SDK 文档和实际测试结果为准。

数字人和模型的配置分别放在 CONFIG 中。提示词应尽量短，并明确回答范围、输出长度和兜底策略。与其要求模型“准确分类”，不如直接提供经核对的分类规则和例外情况。

3. 本地运行与上线前检查

不要直接双击打开 HTML 文件。可通过静态文件服务启动本地页面，例如：

cnpm install serve
serve -p 3000

上线前至少检查以下项目：

• 密钥和模型请求是否已移至后端；
• 是否配置了访问控制、频率限制与异常告警；
• 垃圾分类答案是否按部署地规则复核；
• 大屏断网、模型超时、资源加载失败时是否有可理解的提示；
• 是否在目标设备与网络环境中测试了首句响应和中断操作。

4. 小结

这个 Demo 说明了一个简单的组合方式：用大模型提供短问答，用 3D 数字人承载语音与动作，再利用流式文本和停止操作改善交互节奏。它适合用于原型验证或内容展示，但不能绕过知识准确性、密钥安全和设备运维这些基础问题。

如果要扩展到真实社区或校园场景，下一步应优先补齐当地规则库、后端代理与运行监控，再考虑形象、动作和页面视觉等体验项。

参考链接

• DeepSeek 官网
• 魔珐星云官网
• 示例项目仓库