零基础搭建本地探店风格 3D 数字人（具身智能实战教程）

qq_54638807

86人浏览 · 2026-05-22 10:41:27

qq_54638807 · 2026-05-22 10:41:27 发布

在本地生活赛道，探店内容创作需求爆发，但真人出镜耗时、成本高、难量产。现在借助魔珐星云具身智能平台，零基础、零建模、零复杂开发，就能快速打造一个本地探店生活博主数字人，自动生成城市美食、景点推荐、本地生活攻略口播内容，实现 7×24 小时内容输出与实时互动。本文从平台介绍、环境准备、代码搭建、效果优化到内容创作，给出完整可落地指南，新手直接照着做即可上线。

一、场景介绍

1.1 本地探店数字人适配场景

本地探店生活博主数字人，聚焦城市美食、网红景点、平价好物、生活攻略四大核心场景：

美食探店：推荐火锅、奶茶、特色小吃，讲解口味、人均、地址
景点打卡：介绍公园、古镇、网红地，给出游玩路线、拍照机位
本地攻略：分享交通、住宿、周末遛娃、平价消费技巧
实时互动：用户提问 “XX 餐厅好吃吗”，数字人实时回复并口播

二、前期准备

2.1 平台注册与密钥获取

访问魔珐星云官网：https://xingyun3d.com/
注册账号→进入控制台→应用管理→创建驱动应用
选择生活探店风格数字人形象（清新 / 活力人设）
生成并保存 AppID 与 AppSecret（代码必备）

2.2 开发环境准备

安装 Node.js 16+（自带 npm）
代码编辑器：VS Code
浏览器：Chrome/Edge
基础 Vue 项目（或直接使用魔珐星云 Vue Demo）

2.3 项目基础结构

vue-local-blogger/
├── src/
│   ├── components/
│   │   └── LocalBlogger.vue  # 探店数字人主界面
│   ├── services/
│   │   ├── xingyun.service.js  # 星云SDK封装
│   │   └── llm.service.js      # 探店文案生成
│   └── main.ts
├── index.html
└── package.json

三、项目初始化与依赖安装

3.1 安装依赖

npm install

3.2 启动项目

npm run dev

访问：http://localhost:3000，默认数字人加载成功。

四、核心代码修改（探店主题适配）

4.1 配置星云 SDK（xingyun.service.js）

填入你的 AppID 和 AppSecret：

this.sdkInstance = new window.XmovAvatar({appId: '你的AppID',appSecret: '你的AppSecret',gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session'})

4.2 配置探店人设（llm.service.js）

大模型提示词，锁定本地探店博主风格：

systemPrompt = '你是一个专业的本地探店生活博主，擅长美食、景点、本地生活攻略口播文案创作，语言活泼有网感'

4.3 完整主界面代码（CustomerService.vue）

<template>
  <div class="blogger-container">
    <header class="header">
      <div class="logo">
        <h1>本地探店数字人（技术演示）</h1>
        <p>美食｜景点｜生活攻略｜实时互动</p>
      </div>
      <div class="status" :class="{connected:isConnected}">
        {{ isConnected ? '数字人已上线' : '加载中' }}
      </div>
    </header>
    <div class="main">
      <div class="avatar-section">
        <div class="avatar-box" :id="containerId"></div>
        <div class="status-text">{{ currentState }}</div>
      </div>
      <div class="chat-section">
        <div class="quick-btns">
          <button v-for="a in quickActions" :key="a.id" @click="sendQuick(a)">
            {{ a.label }}
          </button>
        </div>
        <div class="chat-history" ref="chatRef">
          <div v-for="(m,i) in chatHistory" :key="i" :class="['msg', m.type]">
            {{ m.content }}
          </div>
        </div>
        <div class="input-area">
          <input
            v-model="text"
            placeholder="输入你的问题..."
            @keyup.enter="send"
          />
          <button @click="send">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import AvatarSDK from '@/services/avatar.service'
import LLM from '@/services/llm.service'

const containerId = 'avatar-box'
const isConnected = ref(false)
const currentState = ref('准备就绪')
const text = ref('')
const chatHistory = ref([])
const chatRef = ref(null)

const quickActions = [
  { id: 1, label: '美食推荐', text: '推荐一家本地好吃的平价火锅', type: 'query' },
  { id: 2, label: '景点打卡', text: '推荐一个免费的网红景点', type: 'query' },
  { id: 3, label: '周末遛娃', text: '推荐亲子游玩好去处', type: 'query' },
  { id: 4, label: '平价奶茶', text: '推荐性价比高的奶茶店', type: 'query' },
  { id: 5, label: '一日游', text: '帮我规划一条城市一日游路线', type: 'query' }
]

onMounted(async () => {
  await AvatarSDK.initSDK({
    appId: '你的AppID',
    appSecret: '你的AppSecret',
    onStateChange: (s) => {
      currentState.value = s
      if (s === 'speak') isConnected.value = true
    },
    onSubtitle: (t) => add('avatar', t)
  })
  add('avatar', '你好，我是本地生活数字助手，有美食、景点相关问题都可以问我。')
})

const send = async () => {
  if (!text.value.trim()) return
  add('user', text.value)
  const reply = await LLM.sendMessage(text.value)
  AvatarSDK.speak(reply)
  add('avatar', reply)
  text.value = ''
}

const sendQuick = (a) => {
  text.value = a.text
  send()
}

const add = (type, content) => {
  chatHistory.value.push({ type, content })
  nextTick(() => {
    chatRef.value.scrollTop = chatRef.value.scrollHeight
  })
}

onUnmounted(() => {
  AvatarSDK.disconnect()
})
</script>