低算力端侧渲染实战：传统车机与政务大屏的 AI 具身化改造

一、项目背景：从「机械交互」到「拟人服务」的必然升级

在近期的政务大屏和智能座舱项目中，我们发现传统的屏幕交互模式正面临严峻的体验瓶颈。作为屏幕集成开发者，我们亟需解决以下核心挑战：

交互体验僵硬（核心业务痛点）：传统自助机或车机系统本质是「图形界面（GUI）点击+预设语音播报」，属于被动式的机械交互。在政务办事引导或车载智能导游场景中，用户期待的是面对真人般的「拟人化服务」，而非冷冰冰的机器提示音。
硬件算力局限（核心技术痛点）：虽然云端视频流数字人画质较好，但高昂的云端算力与持续的带宽成本让硬件集成项目极难盈利。若采用本地渲染，传统 3D 引擎对车机或大屏（如常见的百元级芯片）要求极高，极易导致卡顿和高延迟。
集成链路复杂（核心开发痛点）：硬件与前端团队通常缺乏 3D 图形引擎开发经验，亟需一种能直接在 Web 前端框架（如 Vue）中快速调用、快速成型的标准化集成方案。

二、技术解法与星云能力映射

端到端多模态引擎（解决机械交互问题）：星云打通了「大模型理解 → 动作表情同步生成」的链路。AI 能够解析文本意图，实时输出口型、微表情与肢体语言，赋予屏幕具身表达能力。
参数流端侧 AI 渲染（解决算力与成本问题）：摒弃高带宽的视频流，星云采用「云端发参数、端侧做解算渲染」的创新架构。这使得 100% 兼容国产信创硬件成为可能，百元级芯片即可跑通 500ms 内的低延迟交互。
标准化轻量级 SDK（解决开发集成问题）：官方提供成熟的 Web 端 SDK 封装，开发者仅需掌握基本的 JavaScript/Vue 知识，即可完成 3D 智能体的实例化与状态流转。

三、Vue 3 实战：车载导游智能体的核心开发链路

以下是我们团队在工程化落地（Vue 3 项目）中，基于官方 SDK 串联语音识别（ASR）、大语言模型（LLM）与星云表达引擎的核心开发步骤。

步骤 1：引入依赖与实例化连接

首先在工程 HTML 文件中引入底层脚本：

<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>

随后，在服务层构建配置对象，并向平台发起连接与回调绑定：

// 1. Auth and gateway config
const config = {
  appId: 'YOUR_APP_ID',
  appSecret: 'YOUR_APP_SECRET'
}

// 2. UI callbacks (subtitles, engine state)
const callbacks = {
  onSubtitleOn: (text: string) => {
    console.log('subtitle sync:', text)
  },
  onSubtitleOff: () => {
    console.log('subtitle off')
  },
  onStateChange: (state: string) => {
    console.log('engine state:', state)
  }
}

// 3. Connect to Nebula
const avatar = await avatarService.connect(config, callbacks)

步骤 2：打通感知（ASR）与理解（LLM）链路

为了实现自然对话，我们需要捕获用户的语音指令，并交由大语言模型处理。工程中封装了 useAsr 钩子函数获取语音，并通过状态管理（appStore）发起 LLM 请求：

// ASR: start listening
const { start, stop, asrText } = useAsr(config, vadTime)
start()

// Stop and read transcript
stop()
console.log('ASR text:', asrText.value)

// Send user text to LLM (e.g. route or POI question)
const answer = await appStore.sendToLLM(asrText.value)
console.log('LLM reply:', answer)

步骤 3：多模态驱动与状态管理封装

获取大模型的返回文本后，调用星云引擎的驱动接口让数字人进行播报。同时，为了增强智能体在不同业务节点下的「生命感」，我们封装了专属的状态控制方法：

// Drive avatar (SSML / stream flags as supported)
avatar.instance.speak(answer, true, false)

// --- State helpers ---

// 1. Idle when no user (ambient motion)
idle(avatar: any): void {
  avatar.idle()
}

// 2. Idle between conversational turns
interactiveIdle(avatar: any): void {
  avatar.interactiveidle()
}

// 3. Listening pose while ASR is active
listen(avatar: any): void {
  avatar.listen()
}