### PerformanceOptimizer Usage Example

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Example demonstrating how to use the PerformanceOptimizer singleton to get device information, recommended configurations, and monitor FPS.

```typescript
// 使用示例
const optimizer = PerformanceOptimizer.getInstance()

// 获取设备信息
const deviceInfo = optimizer.getDeviceInfo()
console.log('设备信息:', deviceInfo)
// 输出: { isMobile: false, isTablet: false, gpuTier: 'high', memory: 8, cores: 8, connection: '4g' }

// 获取推荐配置
const config = optimizer.getRecommendedConfig()
console.log('推荐配置:', config)
// 输出: { quality: 'high', maxFPS: 60, enableShadow: true, textureResolution: 1024, renderScale: 1.0, enableCache: true, preloadAssets: true }

// 监控FPS
const getFPS = optimizer.monitorPerformance((fps) => {
  console.log(`当前FPS: ${fps}`)
  if (fps < 30) {
    console.warn('性能不足，建议降低画质')
  }
})

// 监听性能降级事件
window.addEventListener('performance-downgrade', (event: CustomEvent) => {
  console.log('性能降级建议:', event.detail.suggestion)
})
```

--------------------------------

### ResourceManager Usage Example

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Example demonstrating how to instantiate ResourceManager, manually trigger cleanup, and destroy the manager on component unmount.

```typescript
// 使用示例
const resourceManager = new ResourceManager(avatarStore.instance)

// 手动触发清理
await resourceManager.cleanup()

// 组件卸载时销毁
onUnmounted(() => {
  resourceManager.destroy()
})
```

--------------------------------

### AvatarErrorHandler Usage Example

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Example demonstrating how to use AvatarErrorHandler to catch and handle errors during avatar store initialization, including retrying network errors and resetting retry counts.

```typescript
// 使用示例
const errorHandler = new AvatarErrorHandler()

try {
  await avatarStore.initialize(XINGYUN_CONFIG)
} catch (error) {
  await errorHandler.handleError(error as Error, '数字人初始化')
}

// 重置重试计数
errorHandler.resetRetryCount()
```

--------------------------------

### ResourceManager for Resource Management

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Manages resource cleanup, memory monitoring, and scheduled cleanup tasks. It starts monitoring memory usage upon instantiation and can be manually triggered to clean up resources.

```typescript
export class ResourceManager {
  private avatarInstance: any
  private cleanupTimer: number | null = null
  private memoryThreshold = 500 // MB

  constructor(instance: any) {
    this.avatarInstance = instance
    this.startMonitoring()
  }

  // 启动内存监控（每5分钟检查一次）
  startMonitoring() {
    this.cleanupTimer = window.setInterval(() => {
      this.checkMemoryUsage()
    }, 5 * 60 * 1000)
  }

  // 检查内存使用
  async checkMemoryUsage() {
    if ('memory' in performance) {
      const memory = (performance as any).memory
      const usedMB = memory.usedJSHeapSize / 1024 / 1024
      console.log(`当前内存使用: ${usedMB.toFixed(2)}MB`)

      if (usedMB > this.memoryThreshold) {
        console.warn('内存使用过高，执行清理...')
        await this.cleanup()
      }
    }
  }

  // 清理资源
  async cleanup() {
    if (this.avatarInstance?.clearAnimationCache) {
      await this.avatarInstance.clearAnimationCache()
    }
    if (this.avatarInstance?.clearUnusedTextures) {
      await this.avatarInstance.clearUnusedTextures()
    }
    console.log('资源清理完成')
  }

  // 销毁管理器
  destroy() {
    this.stopMonitoring()
    this.cleanup()
  }
}
```

--------------------------------

### Control Panel Component

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

The control panel component provides interactive buttons for common actions like greeting, introducing the exhibition, guiding, and stopping speech. It also includes a custom input for text-to-speech functionality.

```vue
<!-- src/components/ControlPanel.vue - 控制面板组件 -->
<template>
  <div class="control-panel">
    <div class="quick-actions">
      <TouchButton @click="handleGreeting">👋 打招呼</TouchButton>
      <TouchButton @click="handleIntroduce">📢 展厅介绍</TouchButton>
      <TouchButton @click="handleGuide">🗺️ 路线指引</TouchButton>
      <TouchButton @click="handleStop" :disabled="!avatarStore.isSpeaking">
        ⏹️ 停止
      </TouchButton>
    </div>

    <div class="custom-input">
      <input v-model="customText" placeholder="输入要播报的内容..." @keyup.enter="handleCustomSpeak" />
      <TouchButton @click="handleCustomSpeak" :disabled="!customText.trim()">发送</TouchButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAvatarStore } from '../stores/avatar'

const avatarStore = useAvatarStore()
const customText = ref('')

const handleGreeting = async () => {
  await avatarStore.speak('您好！欢迎来到我们的展厅。')
  await avatarStore.playAction('wave', 2000)
}

const handleIntroduce = async () => {
  await avatarStore.speak('欢迎来到我们的企业展厅。展厅分为四个主要区域...')
  await avatarStore.playAction('explain', 3000)
}

const handleGuide = async () => {
  await avatarStore.speak('建议您按照左侧企业文化区开始参观...')
  await avatarStore.playAction('point-right', 2000)
}

const handleStop = () => avatarStore.stopSpeaking()

const handleCustomSpeak = async () => {
  if (!customText.value.trim()) return
  await avatarStore.speak(customText.value)
  customText.value = ''
}
</script>
```

--------------------------------

### 构建与运行Docker容器

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

执行Docker命令构建镜像并启动容器服务。

```bash
docker build -t xingyun-demo .
docker run -d -p 80:80 xingyun-demo
```

--------------------------------

### 初始化数字人 - initialize()

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

初始化魔珐星云SDK数字人实例，配置进度、就绪和错误回调。在Vue组件的mounted钩子中调用。

```typescript
// src/stores/avatar.ts
async function initialize(config: any) {
  isLoading.value = true

  try {
    const XingyunSDK = (window as any).XmovAvatar

    if (!XingyunSDK) {
      throw new Error('魔珐星云SDK未加载，请检查script标签')
    }

    instance.value = new XingyunSDK({
      ...config,
      onProgress: (progress: number) => {
        loadProgress.value = progress
      },
      onReady: () => {
        isReady.value = true
        isLoading.value = false
        console.log('数字人初始化完成')
      },
      onError: (error: Error) => {
        console.error('数字人初始化失败:', error)
        isLoading.value = false
        throw error
      }
    })

    await instance.value.init()
  } catch (error) {
    console.error('初始化异常:', error)
    isLoading.value = false
    throw error
  }
}

// 在Vue组件中使用
onMounted(async () => {
  try {
    await avatarStore.initialize(XINGYUN_CONFIG)
  } catch (err) {
    error.value = '数字人初始化失败，请刷新页面重试'
    console.error(err)
  }
})

onUnmounted(() => {
  avatarStore.destroy()
})

```

--------------------------------

### 创建Docker镜像配置

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

使用多阶段构建方式创建包含Nginx的生产环境镜像。

```dockerfile
FROM node:18-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

--------------------------------

### 配置生产环境变量

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

在项目根目录创建.env.production文件以定义生产环境所需的凭证和配置。

```env
VITE_XINGYUN_APP_ID=your_production_app_id
VITE_XINGYUN_APP_SECRET=your_production_app_secret
VITE_SENTRY_DSN=your_sentry_dsn
```

--------------------------------

### 执行项目构建

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

运行构建命令生成生产环境所需的静态文件。

```bash
npm run build
```

--------------------------------

### 重启Nginx服务

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

测试Nginx配置并重新加载服务以应用更改。

```bash
sudo nginx -t
sudo systemctl reload nginx
```

--------------------------------

### 项目快速开始与构建命令

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/README.md

包含项目克隆、依赖安装、环境变量配置及开发服务器启动的常用命令，以及生产环境的构建与预览指令。

```bash
# 1. 克隆仓库
git clone https://github.com/bailucool/xingyun-exhibition-demo.git
cd xingyun-exhibition-demo

# 2. 安装依赖
npm install

# 3. 配置环境变量
cp .env.example .env.development

# 编辑 .env.development 文件，填入以下信息：
# VITE_XINGYUN_APP_ID=你的魔珐星云AppID
# VITE_XINGYUN_APP_SECRET=你的魔珐星云AppSecret
# VITE_SENTRY_DSN=你的Sentry DSN（可选）

# 4. 启动开发服务器
npm run dev

# 5. 访问应用
# 浏览器打开 http://localhost:5173
```

```bash
# 构建
npm run build

# 预览构建结果
npm run preview
```

--------------------------------

### 上传文件至服务器

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

使用scp命令将构建产物上传至远程服务器指定目录。

```bash
scp -r dist/* user@server:/var/www/xingyun-demo
```

--------------------------------

### Initialize and Use MonitoringService

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Implements a singleton MonitoringService to manage Sentry error tracking, performance metrics, and custom event logging.

```typescript
// src/utils/monitoring.ts
import * as Sentry from '@sentry/vue'

export class MonitoringService {
  private static instance: MonitoringService
  private performanceMetrics: Map<string, number[]> = new Map()

  static getInstance(): MonitoringService {
    if (!MonitoringService.instance) {
      MonitoringService.instance = new MonitoringService()
    }
    return MonitoringService.instance
  }

  // 初始化Sentry
  initSentry(app: App) {
    const dsn = import.meta.env.VITE_SENTRY_DSN
    if (!dsn) return

    Sentry.init({
      app, dsn,
      integrations: [
        new Sentry.BrowserTracing({
          tracingOrigins: ['localhost', 'xingyun3d.com', /^\//],
        }),
        new Sentry.Replay({ maskAllText: false, blockAllMedia: false }),
      ],
      tracesSampleRate: 1.0,
      replaysSessionSampleRate: 0.1,
      replaysOnErrorSampleRate: 1.0,
      environment: import.meta.env.MODE,
    })
  }

  // 监控数字人事件
  monitorAvatarEvents(avatarInstance: any) { /* ... */ }

  // 记录性能指标
  recordMetric(name: string, value: number) { /* ... */ }

  // 生成性能报告
  generatePerformanceReport() { /* ... */ }
}

// 使用示例
import { createApp } from 'vue'
const app = createApp(App)

const monitoring = MonitoringService.getInstance()
monitoring.initSentry(app)

// 监控数字人事件
monitoring.monitorAvatarEvents(avatarStore.instance)

// 记录自定义指标
monitoring.recordMetric('custom_event', Date.now())

// 获取性能报告
const report = monitoring.generatePerformanceReport()
console.log('性能报告:', report)
// 输出: { avatar_load_time: { average: '1234.56', min: '1000.00', max: '1500.00', count: 5 } }

// 追踪自定义事件
monitoring.trackCustomEvent('user_click_button', { button: 'greeting' })
```

--------------------------------

### Implement Text-to-Speech with speak()

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Controls digital human speech output with configurable voice, speed, and emotion parameters. Requires the avatar instance to be ready.

```typescript
// src/stores/avatar.ts
async function speak(text: string, options?: any) {
  if (!canInteract.value) {
    console.warn('数字人未就绪或正在播报')
    return
  }

  isSpeaking.value = true

  try {
    await instance.value.speak(text, {
      voice: 'female-01',    // 语音类型
      speed: 1.0,            // 语速 (0.5-2.0)
      emotion: 'friendly',   // 情感：friendly, professional, excited
      ...options
    })
  } finally {
    isSpeaking.value = false
  }
}

// 使用示例
// 基础播报
await avatarStore.speak('欢迎来到我们的展厅！')

// 带参数播报
await avatarStore.speak('这是我们的核心产品介绍。', {
  voice: 'male-01',
  speed: 1.2,
  emotion: 'professional'
})

// 预设话术播报
const GREETINGS = [
  '您好！欢迎来到我们的展厅，我是您的智能导览助手。',
  '很高兴为您服务，请问有什么可以帮助您的吗？'
]
const greeting = GREETINGS[Math.floor(Math.random() * GREETINGS.length)]
await avatarStore.speak(greeting)
await avatarStore.playAction('wave', 2000)
```

--------------------------------

### 配置Nginx服务器

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

配置Nginx以托管静态文件，并启用gzip压缩与静态资源缓存策略。

```nginx
server {
    listen 80;
    server_name your-domain.com;
    
    root /var/www/xingyun-demo;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # 启用gzip压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    
    # 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

--------------------------------

### SDK配置 - XINGYUN_CONFIG

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

配置魔珐星云SDK的基础认证信息、事件回调和Widget代理配置。环境变量用于敏感信息和开发环境日志开关。

```typescript
// src/config/xingyun.config.ts
export const XINGYUN_CONFIG = {
  // 基础配置
  containerId: '#avatar-container',
  appId: import.meta.env.VITE_XINGYUN_APP_ID || '',
  appSecret: import.meta.env.VITE_XINGYUN_APP_SECRET || '',
  gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session',

  // 事件监听配置
  onMessage: (message: string) => {
    console.log('SDK Message:', message)
  },

  onNetworkInfo: (networkInfo: any) => {
    console.log('Network Info:', networkInfo)
  },

  onStateChange: (state: string) => {
    console.log('SDK State Change:', state)
  },

  onStatusChange: (status: string) => {
    console.log('SDK Status Change:', status)
  },

  onStateRenderChange: (state: string, duration: number) => {
    console.log('SDK State Render Change:', state, duration)
  },

  onVoiceStateChange: (status: string) => {
    console.log('SDK Voice Status:', status)
  },

  // Widget事件处理
  onWidgetEvent: (data: any) => {
    console.log('Widget Event:', data)
  },

  // 代理Widget（轮播图、视频等功能）
  proxyWidget: {
    widget_slideshow: (data: any) => {
      console.log('Slideshow Widget:', data)
    },
    widget_video: (data: any) => {
      console.log('Video Widget:', data)
    }
  },

  // 日志配置
  enableLogger: import.meta.env.DEV  // 开发环境开启，生产环境关闭
}

// 环境变量配置示例 (.env.development)
// VITE_XINGYUN_APP_ID=your_app_id_here
// VITE_XINGYUN_APP_SECRET=your_app_secret_here
// VITE_SENTRY_DSN=your_sentry_dsn_here
// VITE_TONGYI_API_KEY=your_tongyi_api_key_here

```

--------------------------------

### 环境变量配置示例

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/README.md

展示了魔珐星云SDK及Sentry监控服务的环境变量配置格式。

```env
# 魔珐星云配置（必填）
VITE_XINGYUN_APP_ID=your_app_id_here
VITE_XINGYUN_APP_SECRET=your_app_secret_here

# Sentry监控配置（可选）
VITE_SENTRY_DSN=your_sentry_dsn_here
```

--------------------------------

### 配置CDN资源路径

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

在vite.config.ts中修改base路径以支持CDN加速。

```typescript
# 修改vite.config.ts
export default defineConfig({
  base: 'https://cdn.your-domain.com/',
  // ...
})
```

--------------------------------

### 配置Nginx访问日志

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

在Nginx配置中指定访问日志与错误日志的存储路径。

```nginx
access_log /var/log/nginx/xingyun-demo-access.log;
error_log /var/log/nginx/xingyun-demo-error.log;
```

--------------------------------

### 项目目录结构概览

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/README.md

展示了项目的核心文件布局，包括源代码、组件、配置及文档目录。

```text
xingyun-exhibition-demo/
├── README.md                       # 项目说明文档
├── CHANGELOG.md                    # 版本更新日志
├── LICENSE                         # MIT开源协议
├── package.json                    # 项目依赖配置
├── tsconfig.json                   # TypeScript配置
├── vite.config.ts                  # Vite构建配置
├── .env.example                    # 环境变量示例
├── .gitignore                      # Git忽略文件
├── docs/                           # 详细文档
│   ├── deployment.md              # 部署指南
│   ├── api-reference.md           # API参考
│   └── troubleshooting.md         # 常见问题
├── public/                         # 静态资源
│   └── favicon.ico
└── src/                            # 源代码
    ├── main.ts                    # 应用入口
    ├── App.vue                    # 根组件
    ├── assets/                    # 资源文件
    │   └── styles/
    │       └── main.css          # 全局样式
    ├── components/                # Vue组件
    │   ├── AvatarView.vue        # 数字人展示组件（核心）
    │   ├── ControlPanel.vue      # 控制面板组件
    │   ├── LoadingScreen.vue     # 加载动画组件
    │   ├── ErrorToast.vue        # 错误提示组件
    │   └── TouchButton.vue       # 触摸按钮组件
    ├── config/                    # 配置文件
    │   └── xingyun.config.ts     # 魔珐星云SDK配置
    ├── stores/                    # Pinia状态管理
    │   └── avatar.ts             # 数字人状态管理
    └── utils/                     # 工具函数
        ├── llm.ts                # 大模型接口封装
        ├── monitoring.ts         # 监控服务
        ├── performanceOptimizer.ts # 性能优化工具
        ├── resourceManager.ts    # 资源管理器
        ├── errorHandler.ts       # 错误处理
        └── avatarConfig.ts       # 数字人环境配置
```

--------------------------------

### 部署至Vercel

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

使用Vercel CLI进行快速静态网站托管部署。

```bash
# 安装Vercel CLI
npm i -g vercel

# 登录
vercel login

# 部署
vercel --prod
```

--------------------------------

### 配置HTTPS证书

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/docs/deployment.md

使用Certbot为Nginx自动配置Let's Encrypt证书。

```bash
sudo certbot --nginx -d your-domain.com
```

--------------------------------

### PerformanceOptimizer Singleton

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Singleton class for optimizing performance by detecting device info, recommending configurations, and monitoring FPS. Use getInstance() to access the single instance.

```typescript
export interface DeviceInfo {
  isMobile: boolean
  isTablet: boolean
  gpuTier: 'high' | 'medium' | 'low'
  memory: number
  cores: number
  connection: string
}

export interface OptimalConfig {
  quality: 'low' | 'medium' | 'high'
  maxFPS: number
  enableShadow: boolean
  textureResolution: number
  renderScale: number
  enableCache: boolean
  preloadAssets: boolean
}

export class PerformanceOptimizer {
  private static instance: PerformanceOptimizer

  static getInstance(): PerformanceOptimizer {
    if (!PerformanceOptimizer.instance) {
      PerformanceOptimizer.instance = new PerformanceOptimizer()
    }
    return PerformanceOptimizer.instance
  }

  // 检测设备信息
  detectDevice(): DeviceInfo { /* ... */ }

  // 获取网络类型
  getConnectionType(): string { /* ... */ }

  // 获取推荐配置
  getRecommendedConfig(): OptimalConfig { /* ... */ }

  // 监控性能
  monitorPerformance(callback?: (fps: number) => void) { /* ... */ }
}
```

--------------------------------

### PerformanceOptimizer API

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

The PerformanceOptimizer is a singleton utility that handles device capability detection, provides recommended rendering configurations, and monitors frame rates.

```APIDOC
## PerformanceOptimizer

### Description
A singleton class used to detect hardware capabilities and optimize rendering performance based on device tiers.

### Methods
- **getInstance()**: Returns the singleton instance of the optimizer.
- **detectDevice()**: Returns a DeviceInfo object containing mobile/tablet status, GPU tier, memory, and connection type.
- **getRecommendedConfig()**: Returns an OptimalConfig object with suggested quality settings, max FPS, and asset loading preferences.
- **monitorPerformance(callback)**: Starts an FPS monitoring loop that executes the provided callback with the current FPS value.
```

--------------------------------

### 数字人状态管理 - useAvatarStore

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

使用Pinia管理数字人的状态，包括初始化、播报、动作播放等。提供交互状态计算属性。

```typescript
// src/stores/avatar.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useAvatarStore = defineStore('avatar', () => {
  // 状态
  const instance = ref<any>(null)
  const isLoading = ref(false)
  const isReady = ref(false)
  const currentAction = ref<string>('')
  const isSpeaking = ref(false)
  const loadProgress = ref(0)

  // 计算属性 - 判断是否可以交互
  const canInteract = computed(() => isReady.value && !isSpeaking.value)

  return { 
    instance, isLoading, isReady, currentAction,
    isSpeaking, loadProgress, canInteract,
    initialize, speak, playAction, stopSpeaking, destroy
  }
})

// 使用示例
import { useAvatarStore } from './stores/avatar'
import { XINGYUN_CONFIG } from './config/xingyun.config'

const avatarStore = useAvatarStore()

// 初始化数字人
await avatarStore.initialize(XINGYUN_CONFIG)

// 播报文本
await avatarStore.speak('欢迎来到展厅，我是您的智能导览助手。', {
  voice: 'female-01',
  speed: 1.0,
  emotion: 'friendly'
})

// 播放动作
await avatarStore.playAction('wave', 2000)  // 挥手动作，持续2秒

// 停止播报
avatarStore.stopSpeaking()

// 销毁实例
avatarStore.destroy()

```

--------------------------------

### Manage Avatar Environment Lighting

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Provides methods to automatically adjust lighting based on brightness or apply custom environment configurations to a 3D avatar instance.

```typescript
// src/utils/avatarConfig.ts
export class AvatarEnvironmentManager {
  private avatarInstance: any

  constructor(instance: any) {
    this.avatarInstance = instance
  }

  // 根据环境光自动调整
  autoAdjustLighting() {
    const brightness = this.detectBrightness()

    let ambientLight = 1.0, directionalLight = 0.6

    if (brightness > 80) {        // 强光环境
      ambientLight = 1.5
      directionalLight = 0.8
    } else if (brightness > 50) { // 正常光环境
      ambientLight = 1.2
      directionalLight = 0.7
    } else {                      // 弱光环境
      ambientLight = 0.9
      directionalLight = 0.5
    }

    this.avatarInstance.setEnvironment({
      ambientLight, directionalLight,
      shadowIntensity: 0.3,
      backgroundColor: '#f5f5f5'
    })
  }

  // 设置自定义环境
  setCustomEnvironment(config: {
    ambientLight?: number
    directionalLight?: number
    shadowIntensity?: number
    backgroundColor?: string
  }) {
    this.avatarInstance.setEnvironment(config)
  }

  // 重置为默认环境
  resetEnvironment() {
    this.avatarInstance.setEnvironment({
      ambientLight: 1.0,
      directionalLight: 0.6,
      shadowIntensity: 0.3,
      backgroundColor: '#f5f5f5'
    })
  }
}

// 使用示例
const envManager = new AvatarEnvironmentManager(avatarStore.instance)

// 自动调整光照
envManager.autoAdjustLighting()

// 自定义环境配置
envManager.setCustomEnvironment({
  ambientLight: 1.3,
  directionalLight: 0.8,
  shadowIntensity: 0.5,
  backgroundColor: '#ffffff'
})

// 重置为默认
envManager.resetEnvironment()
```

--------------------------------

### Integrate TongyiLLM for Intelligent Dialogue

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Provides an interface for the Tongyi Qianwen API, supporting custom system prompts and fallback mock responses if the API key is missing.

```typescript
// src/utils/llm.ts
export interface LLMResponse {
  text: string
  error?: string
}

export class TongyiLLM {
  private apiKey: string
  private apiUrl = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation'

  constructor(apiKey?: string) {
    this.apiKey = apiKey || import.meta.env.VITE_TONGYI_API_KEY || ''
  }

  async chat(message: string, systemPrompt?: string): Promise<string> {
    if (!this.apiKey) {
      console.warn('未配置通义千问API Key，返回模拟回复')
      return this.getMockResponse(message)
    }

    const response = await fetch(this.apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.apiKey}`
      },
      body: JSON.stringify({
        model: 'qwen-turbo',
        input: {
          messages: [
            {
              role: 'system',
              content: systemPrompt || '你是一个专业的展厅导览助手，请用简洁友好的语言回答问题。'
            },
            { role: 'user', content: message }
          ]
        },
        parameters: { result_format: 'message' }
      })
    })

    const data = await response.json()
    return data.output.choices[0].message.content
  }
}

// 工厂函数创建LLM实例
export function createLLM(type: 'tongyi' | 'gpt' = 'tongyi') {
  return new TongyiLLM()
}

// 使用示例
import { createLLM } from './utils/llm'

const llm = createLLM('tongyi')

// 基础对话
const response = await llm.chat('介绍一下展厅')
await avatarStore.speak(response)

// 自定义系统提示词
const techResponse = await llm.chat(
  '介绍一下你们的核心技术',
  '你是一位技术专家，请用专业但易懂的语言介绍公司技术。'
)
await avatarStore.speak(techResponse)
```

--------------------------------

### playAction() - Digital Human Animation

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Plays pre-configured animations for the digital human, such as waving, pointing, or explaining.

```APIDOC
## playAction(action, duration)

### Description
Triggers a specific pre-defined animation for the digital human.

### Parameters
#### Request Body
- **action** (string) - Required - The identifier of the animation to play (e.g., 'wave', 'explain', 'point-right').
- **duration** (number) - Optional - The duration in milliseconds for the animation.

### Request Example
await avatarStore.playAction('wave', 2000);
```

--------------------------------

### POST /api/v1/services/aigc/text-generation/generation

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Communicates with the TongyiLLM service to generate intelligent responses based on user input and system prompts.

```APIDOC
## POST /api/v1/services/aigc/text-generation/generation

### Description
Sends a message to the TongyiLLM model to receive a generated response.

### Method
POST

### Parameters
#### Request Body
- **model** (string) - Required - The model identifier (e.g., 'qwen-turbo').
- **input** (object) - Required - Contains the message history.
- **parameters** (object) - Required - Configuration for response format.

### Request Example
{
  "model": "qwen-turbo",
  "input": {
    "messages": [
      { "role": "system", "content": "You are a professional guide." },
      { "role": "user", "content": "Tell me about the exhibition." }
    ]
  },
  "parameters": { "result_format": "message" }
}

### Response
#### Success Response (200)
- **output** (object) - The generated response data containing the message content.
```

--------------------------------

### 数字人动作触发与大模型接口扩展

Source: https://github.com/bailucool/xingyun-exhibition-demo/blob/main/README.md

展示了如何通过Pinia状态管理触发数字人动作，以及如何通过类扩展集成新的大模型接口。

```typescript
// src/stores/avatar.ts
async function playCustomAction() {
  await playAction('custom-action-name', 3000)
}
```

```typescript
// src/utils/llm.ts
// 参考现有实现，添加新的大模型接口
export class CustomLLM {
  async chat(message: string): Promise<string> {
    // 实现你的大模型调用逻辑
  }
}
```

--------------------------------

### Execute Digital Human Actions with playAction()

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Triggers pre-defined animations for the digital human. Can be combined with speech for synchronized behavior.

```typescript
// src/stores/avatar.ts
async function playAction(action: string, duration?: number) {
  if (!isReady.value) return

  currentAction.value = action
  await instance.value.playAnimation(action, duration)
  currentAction.value = ''
}

// 使用示例
// 挥手打招呼
await avatarStore.playAction('wave', 2000)

// 解释动作
await avatarStore.playAction('explain', 3000)

// 指向右侧（用于路线引导）
await avatarStore.playAction('point-right', 2000)

// 组合使用：播报+动作
const handleGreeting = async () => {
  await avatarStore.speak('您好！欢迎来到我们的展厅。')
  await avatarStore.playAction('wave', 2000)
}

const handleGuide = async () => {
  await avatarStore.speak('请沿着右侧路线参观。')
  await avatarStore.playAction('point-right', 2000)
}
```

--------------------------------

### Vue App Main Component

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

The main Vue application component orchestrates the display of loading screens, the digital human view, control panels, and error toasts. It initializes the digital human store on mount and cleans up on unmount.

```vue
<!-- src/App.vue -->
<template>
  <div class="app-container">
    <!-- 加载状态 -->
    <LoadingScreen
      v-if="avatarStore.isLoading"
      :progress="avatarStore.loadProgress"
    />

    <!-- 数字人容器 -->
    <AvatarView v-show="avatarStore.isReady" />

    <!-- 控制面板 -->
    <ControlPanel v-if="avatarStore.isReady" />

    <!-- 错误提示 -->
    <ErrorToast v-if="error" :message="error" @close="error = null" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useAvatarStore } from './stores/avatar'
import { XINGYUN_CONFIG } from './config/xingyun.config'
import AvatarView from './components/AvatarView.vue'
import ControlPanel from './components/ControlPanel.vue'
import LoadingScreen from './components/LoadingScreen.vue'
import ErrorToast from './components/ErrorToast.vue'

const avatarStore = useAvatarStore()
const error = ref<string | null>(null)

onMounted(async () => {
  try {
    await avatarStore.initialize(XINGYUN_CONFIG)
  } catch (err) {
    error.value = '数字人初始化失败，请刷新页面重试'
    console.error(err)
  }
})

onUnmounted(() => {
  avatarStore.destroy()
})
</script>
```

--------------------------------

### speak() - Digital Human Text Broadcasting

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

Triggers the digital human to speak specific text with configurable voice, speed, and emotion parameters.

```APIDOC
## speak(text, options)

### Description
Allows the digital human to broadcast specified text. Supports configuration for voice type, speech speed, and emotional tone.

### Parameters
#### Request Body
- **text** (string) - Required - The text content for the digital human to speak.
- **options** (object) - Optional - Configuration object:
  - **voice** (string) - Optional - Voice type (e.g., 'female-01', 'male-01').
  - **speed** (number) - Optional - Speech speed (range 0.5-2.0).
  - **emotion** (string) - Optional - Emotional tone (e.g., 'friendly', 'professional', 'excited').

### Request Example
await avatarStore.speak('Hello!', { voice: 'male-01', speed: 1.2, emotion: 'professional' });
```

--------------------------------

### ResourceManager API

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

The ResourceManager monitors memory usage and performs automated cleanup of textures and animation caches to prevent memory leaks.

```APIDOC
## ResourceManager

### Description
Manages memory resources by monitoring heap usage and triggering cleanup tasks when thresholds are exceeded.

### Methods
- **startMonitoring()**: Initializes a periodic check (every 5 minutes) of the JS heap memory usage.
- **checkMemoryUsage()**: Compares current memory usage against the 500MB threshold and triggers cleanup if exceeded.
- **cleanup()**: Manually triggers the clearing of animation caches and unused textures.
- **destroy()**: Stops monitoring and performs a final cleanup of resources.
```

--------------------------------

### AvatarErrorHandler for Error Handling

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

A centralized error handler that supports network error retries, timeout handling, and user notifications. It logs errors and applies specific handling logic based on error messages.

```typescript
export class AvatarErrorHandler {
  private retryCount = 0
  private maxRetries = 3
  private retryDelay = 2000

  async handleError(error: Error, context: string): Promise<void> {
    console.error(`[${context}] 错误:`, error)

    if (error.message.includes('network')) {
      await this.handleNetworkError(error)
    } else if (error.message.includes('timeout')) {
      await this.handleTimeoutError(error)
    } else if (error.message.includes('resource')) {
      await this.handleResourceError(error)
    } else {
      await this.handleUnknownError(error)
    }
  }

  private async handleNetworkError(error: Error) {
    if (this.retryCount < this.maxRetries) {
      this.retryCount++
      console.log(`网络错误，${this.retryDelay}ms后重试 (${this.retryCount}/${this.maxRetries})`)
      await this.delay(this.retryDelay)
      window.location.reload()
    } else {
      this.showErrorMessage('网络连接失败，请检查网络设置')
    }
  }

  resetRetryCount() {
    this.retryCount = 0
  }
}
```

--------------------------------

### AvatarErrorHandler API

Source: https://context7.com/bailucool/xingyun-exhibition-demo/llms.txt

The AvatarErrorHandler provides a centralized mechanism for handling network, timeout, and resource-related errors with built-in retry logic.

```APIDOC
## AvatarErrorHandler

### Description
Handles application errors by categorizing them and applying specific recovery strategies like automatic retries for network failures.

### Methods
- **handleError(error, context)**: Processes an error based on its message content (network, timeout, resource).
- **resetRetryCount()**: Resets the internal retry counter to zero.

### Error Handling Logic
- **Network Errors**: Retries up to 3 times with a 2-second delay before prompting the user.
- **Timeout/Resource Errors**: Handled via specific internal methods for recovery.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.