基于具身智能的节气节日祝福数字人开发实战

节气节日祝福数字人开发方案本项目开发了一款基于具身智能技术的节气节日祝福数字人系统，主要特点包括：多节日适配：覆盖春节、端午、中秋等传统节日及二十四节气，内置对应祝福文案模板。高效复用：采用纯文本替换机制，开发者只需修改文案即可生成新祝福内容，无需重新建模或渲染。定时推送：支持节日定时播报功能，适用于企业祝福、私域运营等场景。技术架构：采用Vue3前端+具身智能SDK的轻量化架构，包含数

qq_54638807

316人浏览 · 2026-05-26 23:12:41

qq_54638807 · 2026-05-26 23:12:41 发布

基于具身智能的节气节日祝福数字人开发实战

摘要

本文聚焦节气节日祝福数字人开发，依托具身智能技术，实现端午、中秋、春节及日常节日的定时祝福播报功能。数字人支持文案一键替换、风格灵活适配，可反复复用，无需复杂建模与渲染能力，普通开发者通过前端集成即可快速落地，适合节日营销、私域运营、企业祝福等场景，兼具实用性与复用性。

一、项目背景与场景价值

传统节日祝福多依赖图文、短视频，制作周期长、复用性差，难以实现个性化、定时化推送；真人录制祝福成本高、效率低，难以覆盖全节气全节日场景。

节气节日祝福数字人可高效解决上述痛点，核心价值如下：

全场景覆盖：适配端午、中秋、春节、元旦、七夕、清明及二十四节气
高复用性：仅替换文案即可生成新祝福，无需重新制作形象与动作
定时推送：支持节日定时播报，适配私域、社群、企业祝福场景
低成本量产：无需真人出镜，批量生成祝福内容效率大幅提升
风格适配：可切换喜庆、雅致、简约等风格，适配不同受众

依托具身智能技术，数字人可同步生成表情、手势与语音，让节日祝福更具温度与仪式感。

二、技术架构与核心能力

2.1 技术架构

本项目采用前端 + 具身智能 SDK + 文案管理轻量化架构：

前端层：Vue3 构建交互界面，支持数字人渲染、文案输入、定时设置
具身智能层：依托云端大脑、多模态感知、表达引擎，实现文本→语音→表情→动作全链路驱动
文案层：结构化节日文案库，支持快速替换、批量导入，适配不同节日风格

2.2 核心能力

多节日适配：内置二十四节气 + 主流节日文案模板
文案低代码复用：纯文本替换即可生成新祝福，无需修改代码
定时播报：前端定时器结合 SDK，实现节日定点推送
风格切换：支持喜庆、古风、简约等数字人形象与音色切换
跨端适配：网页端直接部署，适配 PC、移动端访问

三、前期准备（合规开发流程）

3.1 平台接入准备

注册开发者账号，进入控制台创建驱动类应用
选择适配节日场景的数字人形象（喜庆 / 古风风格）
获取开发必备凭证：appId、appSecret

3.2 开发环境

Node.js 16.x 及以上
Vue3 + Vite
VS Code 编辑器
Chrome/Edge 现代浏览器

3.3 项目结构

plaintext

vue-festival-avatar/
├── src/
│   ├── components/
│   │   └── FestivalAvatar.vue  # 节日祝福数字人主界面
│   ├── services/
│   │   ├── xingyun.service.js  # 具身智能SDK封装
│   │   └──文案管理.js          # 节日文案库
│   └── main.js
├── index.html
└── package.json

四、核心功能演示

4.1 主界面整体效果

项目采用左右分栏设计，左侧为数字人形象 + 状态面板，右侧为对话区 + 输入区，顶部为项目标题与状态提示，整体采用暖橙色 + 浅米色的喜庆配色，贴合节日氛围。

4.2 多场景祝福交互

数字人内置多种节日场景模板，点击左侧 “一键祝福” 按钮，即可快速生成对应节日的祝福文案并播报，同时支持用户输入自定义祝福语，实现个性化祝福。

在这里插入图片描述

4.3 自定义祝福与状态反馈

界面底部支持输入自定义祝福语，同时左侧实时显示数字人播报状态与字幕，交互反馈清晰直观。
在这里插入图片描述

五、核心代码实现

5.1 SDK 服务封装（xingyun.service.js）

运行

class XingYunService {static instance = null;
  sdkInstance = null;
  isConnected = false;static getInstance() {if (!this.instance) this.instance = new XingYunService();return this.instance;}async initSDK(config) {return new Promise((resolve, reject) => {try {this.sdkInstance = new window.XmovAvatar({appId: config.appId,appSecret: config.appSecret,gatewayServer: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session",socket_io_url: "wss://gateway.xingyun3d.com",onStateChange: (state) => {
            config.onStateChange?.(state);this.isConnected = state === "speak";},onSubtitle: (text) => config.onSubtitle?.(text),onError: (err) => config.onError?.(err),});resolve(true);} catch (err) {reject(err);}});}speak(text) {if (!this.isConnected || !this.sdkInstance) return;this.sdkInstance.speak(text, true, true);}disconnect() {this.sdkInstance?.disconnect();}}export default XingYunService.getInstance();

5.2 节日文案库（文案管理.js）

运行

// 二十四节气+主流节日文案模板（可直接替换扩展）export const festivalTexts = {春节: "新春佳节，万象更新，祝你岁岁安康，阖家幸福，万事顺遂！",端午: "端午安康，粽叶飘香，愿你平安喜乐，岁岁无忧，好运常伴！",中秋: "中秋月圆，阖家团圆，祝你月圆人圆，事事圆满，幸福美满！",元旦: "元旦启新，万事可期，祝你新年顺遂，平安喜乐，未来可期！",清明: "清明寄思，春和景明，愿岁月安康，山河无恙，平安顺遂！",七夕: "七夕佳期，爱意绵长，愿有情人终成眷属，甜蜜相伴！",立春: "春回大地，万物复苏，愿你春风得意，前程似锦！",冬至: "冬至安康，暖意常伴，愿你岁岁平安，温暖过冬！"};

5.3 主界面组件（FestivalAvatar.vue）

vue

<template>
  <div class="festival-container">
    <header class="header">
      <div class="title">
        <h1>节气节日祝福数字人</h1>
        <p>端午｜中秋｜春节｜全节气祝福，文案一键复用</p>
      </div>
      <div class="status" :class="{ connected: isConnected }">
        {{ isConnected ? "服务就绪" : "初始化中" }}
      </div>
    </header>

    <div class="main-content">
      <!-- 数字人渲染区 -->
      <div class="avatar-box" id="festival-avatar"></div>

      <!-- 文案与控制区 -->
      <div class="control-panel">
        <!-- 节日选择 -->
        <div class="festival-select">
          <label>选择节日：</label>
          <select v-model="selectedFestival" @change="switchFestival">
            <option v-for="(text, name) in festivalTexts" :key="name" :value="name">
              {{ name }}
            </option>
          </select>
        </div>

        <!-- 文案编辑 -->
        <div class="text-editor">
          <label>祝福文案（可直接修改复用）：</label>
          <textarea v-model="currentText" placeholder="输入节日祝福文案..."></textarea>
        </div>

        <!-- 控制按钮 -->
        <div class="btn-group">
          <button @click="sendBlessing" :disabled="!isConnected">发送祝福</button>
          <button @click="resetText">重置文案</button>
        </div>

        <!-- 祝福记录 -->
        <div class="blessing-history" ref="historyRef">
          <div v-for="(item, idx) in history" :key="idx" class="history-item">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from "vue";
import XingYunService from "./services/xingyun.service.js";
import { festivalTexts } from "./文案管理.js";

const isConnected = ref(false);
const selectedFestival = ref("春节");
const currentText = ref(festivalTexts[selectedFestival.value]);
const history = ref([]);
const historyRef = ref(null);

// 切换节日
const switchFestival = () => {
  currentText.value = festivalTexts[selectedFestival.value];
};

// 发送祝福
const sendBlessing = () => {
  if (!currentText.value.trim()) return;
  XingYunService.speak(currentText.value);
  history.value.push(`${new Date().toLocaleString()}：${currentText.value}`);
  nextTick(() => {
    historyRef.value.scrollTop = historyRef.value.scrollHeight;
  });
};

// 重置文案
const resetText = () => {
  currentText.value = festivalTexts[selectedFestival.value];
};

// 初始化数字人
onMounted(async () => {
  await XingYunService.initSDK({
    appId: "你的appId",
    appSecret: "你的appSecret",
    gatewayServer: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session",
    socket_io_url: "wss://gateway.xingyun3d.com",
    onStateChange: (state) => {
      isConnected.value = state === "speak";
    },
    onSubtitle: () => {},
    onError: (err) => console.error("SDK错误：", err),
  });
  history.value.push("系统：数字人初始化完成，可选择节日发送祝福");
});

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

<style scoped>
.festival-container {
  width: 100vw;
  height: 100vh;
  background: #fff9f0;
  display: flex;
  flex-direction: column;
  font-family: "Microsoft YaHei", sans-serif;
}

.header {
  background: #f5a623;
  color: #fff;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title h1 {
  margin: 0;
  font-size: 24px;
}

.title p {
  margin: 5px 0 0;
  opacity: 0.9;
}

.status {
  padding: 8px 20px;
  background: #fff;
  color: #f5a623;
  border-radius: 20px;
  font-size: 14px;
}

.status.connected {
  background: #28a745;
  color: #fff;
}

.main-content {
  flex: 1;
  display: flex;
  padding: 30px;
  gap: 30px;
}

.avatar-box {
  width: 450px;
  background: #fff3e0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(245, 166, 35, 0.15);
}

.control-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.festival-select {
  display: flex;
  align-items: center;
  gap: 10px;
}

.festival-select select {
  padding: 10px;
  border: 1px solid #f5a623;
  border-radius: 8px;
  font-size: 15px;
}

.text-editor label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.text-editor textarea {
  width: 100%;
  min-height: 120px;
  padding: 15px;
  border: 1px solid #f5a623;
  border-radius: 10px;
  font-size: 15px;
  resize: none;
}

.btn-group {
  display: flex;
  gap: 15px;
}

.btn-group button {
  padding: 12px 25px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
}

.btn-group button:first-child {
  background: #f5a623;
  color: #fff;
}

.btn-group button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-group button:last-child {
  background: #6c757d;
  color: #fff;
}

.blessing-history {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: #fff9f0;
  border-radius: 10px;
}

.history-item {
  padding: 8px 0;
  border-bottom: 1px solid #ffe0b2;
  font-size: 14px;
}
</style>