Vue3 融合大模型标准协议接入魔珐星云：开发高拟真生活助手

// src/services/llm.service.js
import OpenAI from 'openai';

class LLMService {
  constructor() {
    // 复用 OpenAI 标准客户端，直连火山引擎
    this.openai = new OpenAI({
      apiKey: import.meta.env.VITE_LLM_API_KEY, 
      baseURL: 'https://ark.cn-beijing.volces.com/api/v3',
      dangerouslyAllowBrowser: true // 仅作前端 Demo 演示开启，生产环境需经由后端转发
    });
  }

  async sendMessage(userText) {
    const messages = [
      {
        role: 'system',
        content: `你是 AI 生活小助理，性格温暖、治愈。回答需简短、亲切。`
      },
      { role: 'user', content: userText }
    ];

    const res = await this.openai.chat.completions.create({
      model: 'doubao-1-5-pro-32k-250115', // 指定业务模型
      messages,
      temperature: 0.7
    });
    return res.choices[0].message.content;
  }
}
export default new LLMService();

// src/services/xingyun.service.js
class XingYunService {
  constructor() {
    this.sdkInstance = null;
    this.isInitialized = false;
  }

  async initSDK(config) {
    try {
      this.sdkInstance = new window.XmovAvatar({
        containerId: config.containerId,
        appId: config.appId,
        appSecret: config.appSecret,
        gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',
        onStateChange: config.onStateChange
      });

      await this.sdkInstance.init();
      this.isInitialized = true;
    } catch (e) {
      console.error('引擎初始化异常', e);
    }
  }

  // 结合 SSML <ue4event> 标签实现多模态动作注入
  speakWithAction(text, actionSemantic = 'Hello') {
    if (!this.isInitialized) return;
    const ssml = `
      <speak>
        <ue4event>
          <type>ka</type>
          <data><action_semantic>${actionSemantic}</action_semantic></data>
        </ue4event>
        ${text}
      </speak>`;
    this.sdkInstance.speak(ssml, true, true);
  }
  
  destroy() {
    if (this.sdkInstance) {
      this.sdkInstance.destroy();
      this.isInitialized = false;
    }
  }
}
export default new XingYunService();

<template>
  <div class="assistant-wrapper">
    <div id="avatar-viewport" style="width: 300px; height: 420px;"></div>
    <!-- 对话框 UI 略 -->
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import XingYun from '@/services/xingyun.service';
import LLM from '@/services/llm.service';

onMounted(async () => {
  await XingYun.initSDK({
    containerId: '#avatar-viewport',
    appId: import.meta.env.VITE_APP_ID,
    appSecret: import.meta.env.VITE_APP_SECRET,
    onStateChange: (state) => console.log('底层状态:', state)
  });
  
  // 初始化完成后主动发起带有“挥手”动作的问候
  XingYun.speakWithAction('你好呀，我是你的专属生活助理！', 'Hello');
});

async function handleUserSubmit(text) {
  // 1. 请求大模型认知大脑
  const reply = await LLM.sendMessage(text);
  // 2. 驱动 3D 具身躯干进行语音及动作反馈
  XingYun.speakWithAction(reply, 'Explain');
}

onUnmounted(() => {
  XingYun.destroy();
});
</script>