从“会展示”到“会讲解”：基于魔珐星云 + 大模型打造企业数字展厅AI讲解员（开源实战）

如果你也在做企业展厅、管理驾驶舱、发布会大屏，想让"数据可视化"真正走向"可理解、可互动、可运营"，这篇实战直接复用。

演示视频：https://www.bilibili.com/video/BV1NwikBUEmf

魔珐星云邀请码（新用户可用）：J3GAY6LS8W，(要使用专属邀请码)可免费获取1000积分，体验数字人2000分钟！

一、项目背景：为什么大屏越来越"炫"，却不一定"好用"？

很多企业已经有了数据大屏，但实际接待客户、领导巡检或跨部门汇报时，常见问题依然明显：

1. 数据很多，但缺乏讲解逻辑：访客看得到数字，却不理解业务含义。
2. 过度依赖人工讲解：人员培训成本高，且难以保证讲解质量一致。
3. 互动能力不足：传统看板偏"播放型"，访客无法即时提问。
4. 异常和任务提醒不及时：信息在屏幕上"出现过"，但未必被真正感知。

这也是我们做这个项目的出发点：让企业大屏从"静态展示工具"，升级为"可讲解、可问答、可播报"的智能展示系统。

---

二、项目简介：我们做了什么？

本项目是一个基于 Vue3 + Vite 的企业数字展厅应用，核心整合了两类AI能力：

1. 魔珐星云数字人 SDK：实现拟真数字人讲解、任务播报、状态切换。
2. 大模型流式问答：支持访客输入问题，实时生成回答并由数字人播报。

项目地址：https://gitcode.com/Mrxiao_bo/mofa-large-screen

已落地的核心功能

1. AI数字人讲解：一键开始讲解，自动解读企业核心指标与业务结构。
2. 智能问答：访客可直接提问，系统实时回答并语音播报。
3. 任务分发播报：任务信息支持一键播报，适配管理驾驶舱场景。
4. 异常告警提醒：指标越界触发视觉报警，可扩展语音告警。
5. 待机省成本机制：讲解结束自动进入待机，减少无效消耗。

---

三、系统架构设计：展示层、AI能力层、数据层三位一体

从工程角度看，这个项目的关键不是"一个页面里放了多少卡片"，而是形成完整闭环：

• 用户看数据 -> 系统能讲解
• 用户提问题 -> 系统能理解并回答
• 数据有异常 -> 系统能主动提醒
• 任务要分发 -> 系统能标准播报

这意味着它不仅是一个前端展示页面，而是一个"可表达的业务界面"。

---

四、解决的痛点与业务价值

1）降本：降低讲解人员压力

展厅讲解不再完全依赖人工，数字人可承接高频标准化讲解场景。

2）增效：提升信息触达效率

同一批数据，通过"图表 + 口播 + 互动问答"三种表达方式，更易被理解与记忆。

3）提质：统一对外讲解口径

企业介绍、技术实力、业务结构可以沉淀为标准讲解模板，避免不同讲解员风格差异。

4）可运营：从一次展示变成长期资产

通过参数化配置与接口预留，后续可接入真实业务数据、CRM、任务系统、告警系统，持续演进。

---

五、快速启动（本地运行）

# 1) 安装依赖
npm install

# 2) 启动开发环境
npm run dev

# 3) 打包构建
npm run build

访问后建议按以下顺序验证：

1. 点击右上角"开始讲解"验证数字人加载与语音链路。
2. 在问答输入框提问，验证模型调用与播报闭环。
3. 点击任务播报按钮，验证语音播报模板。
4. 观察指标变化与异常提示逻辑。

---

六、魔珐星云配置教程（手把手）

第1步：注册并登录

进入魔珐星云平台完成注册。新用户可使用邀请码：J3GAY6LS8W，可免费获取1000积分，体验数字人2000分钟！

第2步：创建应用并获取凭证

创建应用后记录以下配置：

• appId
• appSecret
• gatewayServer

第3步：在项目中填入配置

在 src/composables/useXingyunAvatar.js 中配置：

const config = {
  appId: 'your_app_id',
  appSecret: 'your_app_secret',
  gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session'
}

第4步：验证效果

点击"开始讲解"，若数字人成功加载、状态切换正常并可播报，说明配置成功。

---

七、大模型配置教程（OpenAI兼容接口）

第1步：选择模型服务商

可使用 OpenAI 官方或兼容 OpenAI 格式的模型服务。

第2步：创建 API Key 与模型 ID

在服务商控制台创建密钥并确认模型名。

第3步：在项目中配置

在 src/composables/useGPT.js 中填入：

const config = {
  apiUrl: 'https://your-api-domain/v1/chat/completions',
  apiKey: 'your_api_key',
  model: 'your_model_name'
}

第4步：优化系统提示词

建议在 systemPrompt 中明确角色边界：

• 你是企业展厅讲解员
• 回答控制在简洁范围
• 优先围绕企业业务和展厅指标回答

第5步：验证问答链路

输入问题后，确认以下流程成功：

1. 请求发送成功
2. 返回文本内容可用
3. 数字人完成语音播报

---

八、工程实践建议：如何从 Demo 走向可上线

1）密钥安全

当前为了演示便利，配置在前端可快速跑通；但生产环境必须改为后端代理 ，避免 appSecret 和 apiKey 暴露。

2）异常兜底

模型请求超时、SDK初始化失败时，建议加入统一兜底话术，避免体验中断。

3）可观测性

建议增加请求耗时、播报成功率、问答成功率等指标，为后续优化提供依据。

4）真实数据接入

项目已具备接口抽象能力，可逐步对接真实 dashboard/tasks/alerts 数据源，替换模拟数据。

5）场景化扩展

同一套能力可以迁移到：

• 企业展厅接待
• 年会/发布会数据讲解
• 运营监控驾驶舱
• 工厂中控室语音提醒

---

九、为什么这套方案值得做？

因为它不是简单"加一个数字人"。

它本质上是把企业可视化系统从"数据堆叠"升级到"认知交互系统"：

• 让系统自己解释数据
• 让访客可以和系统对话
• 让关键信息能被主动表达

当一个大屏真正具备"表达能力"，它就不再只是展示层，而是企业数字化对外沟通能力的一部分。

---

十、结语与资源

如果你正在推进企业数字展厅、智能接待或管理驾驶舱项目，这套思路可以低成本起步：

1. 先实现"可讲解"
2. 再实现"可问答"
3. 最后实现"可配置、可运营、可扩展"

资源入口：

• 演示视频：https://www.bilibili.com/video/BV1NwikBUEmf
• 项目地址：https://gitcode.com/Mrxiao_bo/mofa-large-screen
• 魔珐星云邀请码：J3GAY6LS8W

如果这篇文章对你有帮助，欢迎收藏、转发，也欢迎一起完善这个项目，让AI数字人真正成为企业展示场景中的"生产力工具"。