魔珐星云让AI拥有“身体“的具身智能开发平台实战评测

​

在大模型技术飞速发展的今天，AI已经拥有了强大的"大脑"，能够理解和生成高质量的文本内容。然而，真正的智能体不仅需要思维能力，还需要能够感知环境并与之交互的"身体"。魔珐科技最新推出的魔珐星云平台，正是为了解决这一问题而诞生的全球首个具身智能3D数字人开放平台。

​

编辑

魔珐星云平台概述

魔珐星云是魔珐科技面向全球开发者推出的具身智能3D数字人开发平台，致力于让大模型拥有"身体"，真正成为可交互、可感知、可行动的智能体。作为一个完整的基础设施，星云平台为开发者提供了从数字人创建、配置到实时驱动的全链路解决方案，使得在任何终端上实现高质量、低延迟、高并发的3D数字人交互成为可能。

平台的核心理念是"让每一块屏幕都能活起来"，无论是公共服务屏、零售营销屏、个人设备还是沉浸式场景，都可以通过魔珐星云赋予智能化的生命力。

平台使用配置流程详解

应用创建与管理

魔珐星云平台的使用流程设计得极为简洁，即使是初次接触的开发者也能快速上手。以下是详细的操作步骤：

1. 注册与登录

首先访问魔珐星云官网（xingyun3d.com?utm_campaign=daily&utm_source=jixinghuiKoc28），点击右上角的"登录/注册"按钮。平台目前对所有用户免费开放，注册即可获得100积分，如有邀请码还可获得更多积分和额外权益。

​

编辑

1. 创建应用

登录成功后，进入开发者中心，点击"创建应用"按钮。在弹出的窗口中，可以选择应用类型，比如虚拟陪伴、客户服务、教育培训等。

​

编辑

​

编辑

​

编辑

1. 角色选择

平台内置了多种高精度的3D角色库，涵盖超写实、二次元、卡通、美型等多种风格。开发者可以根据应用场景选择合适的角色形象。

​

编辑

​

编辑

数字人配置与调试

1. 动作调试

进入"调试"面板后，可以在右侧代码框中输入指令测试数字人的表现效果。例如：

1开场白："你好，我是今天的面试官。请先做一个简短的自我介绍，并谈谈你对我们公司的了解。"
2

1<speak>
2  <ue4event>
3    <type>ka_intent</type>
4    <data><ka_intent>Welcome</ka_intent></data>
5  </ue4event>
6  你好，我是今天的面试官。请先做一个简短的自我介绍，并谈谈你对我们公司的了解。
7</speak>
8

​

编辑

1. 效果验证

点击发送后，可以观察到数字人流畅地念出测试文本，且眼神、口型、表情和手势完美匹配。这一步确认了数字人的"身体"已经准备就绪。

​

编辑

搭建跑步知识生活助手[SDK使用与开发实战]

在本项目中，我们 构建了一个「跑步知识生活助手」，并集成了 魔珐星云 SDK、语音识别（ASR） 以及 多种 LLM 模型，实现了“可看见、可对话、可倾听、可理解”的全流程交互体验。

这个助手不仅能实时渲染一个可交互的虚拟人，还能听懂你的问题、理解你的跑步场景，并结合专业知识给出建议。你只需要开口提问，它就能给出详细、专业、自然的跑步指导。

本文将从环境准备、核心组件设计、SDK 集成细节、ASR & LLM 交互流程等方面，系统性展示该项目从 0 到 1 的完整搭建过程，是一篇非常适合 数字人开发者 / AI 产品工程师 / 健身类应用开发者 的实战教程。

完整源码下载：

gitee.com/a125efs/mag…

​

编辑

​

编辑

​

编辑

环境准备

搭建跑步知识生活助手的开发环境相对简单。我在基于 Vue 3 + TypeScript + Vite 的数字人交互项目中，集成了 魔珐星云 SDK，同时结合语音识别（ASR）和多种大语言模型（LLM），实现了智能化的人机交互体验。

跑步知识生活助手的配置面板组件

主要负责管理应用的各种设置和用户交互。

核心功能：

1. 应用配置 ：提供虚拟人、语音识别(ASR)、语言模型(LLM)等服务的配置界面
2. 连接控制 ：管理与虚拟人服务的连接状态（连接/断开）
3. 消息交互 ：支持文本输入和语音输入两种交互方式
4. 示例问题 ：提供跑步相关的常见问题，方便用户快速提问

1<template>
2  <div class="config-panel">
3    <!-- 欢迎信息 -->
4    <div class="welcome-section">
5      <div class="welcome-icon">🏃♂️</div>
6      <h2 class="welcome-title">跑步知识生活助手</h2>
7      <p class="welcome-subtitle">获取专业跑步建议，解答跑步相关问题</p>
8    </div>
9
10    <!-- 虚拟人配置 -->
11    <section class="panel-section">
12      <div class="section-header">
13        <span class="section-icon">🤖</span>
14        <h3 class="section-title">虚拟人配置</h3>
15      </div>
16      
17      <div class="form-group">
18        <label class="form-label">应用 APP ID</label>
19        <input 
20          v-model="appState.avatar.appId" 
21          type="text" 
22          class="form-input"
23          placeholder="请输入 APP ID"
24          aria-label="应用 APP ID"
25        />
26      </div>
27      
28      <div class="form-group">
29        <label class="form-label">应用 APP Secret</label>
30        <input 
31          v-model="appState.avatar.appSecret" 
32          type="text" 
33          class="form-input"
34          placeholder="请输入 APP Secret"
35          aria-label="应用 APP Secret"
36        />
37      </div>
38    </section>
39
40    <!-- ASR配置 -->
41    <section class="panel-section">
42      <div class="section-header">
43        <span class="section-icon">🎤</span>
44        <h3 class="section-title">语音识别配置</h3>
45      </div>
46      
47      <div class="form-group">
48        <label class="form-label">ASR 服务商</label>
49        <select v-model="appState.asr.provider" class="form-select">
50          <option value="tx">腾讯云</option>
51        </select>
52      </div>
53      
54      <div class="form-group">
55        <label class="form-label">ASR App ID</label>
56        <input 
57          v-model="appState.asr.appId" 
58          type="text" 
59          class="form-input"
60          placeholder="请输入 ASR App ID"
61          aria-label="ASR App ID"
62        />
63      </div>
64      
65      <div class="form-group">
66        <label class="form-label">ASR Secret ID</label>
67        <input 
68          v-model="appState.asr.secretId" 
69          type="text" 
70          class="form-input"
71          placeholder="请输入 Secret ID"
72          aria-label="ASR Secret ID"
73        />
74      </div>
75      
76      <div class="form-group">
77        <label class="form-label">ASR Secret Key</label>
78        <input 
79          v-model="appState.asr.secretKey" 
80          type="text" 
81          class="form-input"
82          placeholder="请输入 Secret Key"
83          aria-label="ASR Secret Key"
84        />
85      </div>
86    </section>
87
88    <!-- LLM配置 -->
89    <section class="panel-section">
90      <div class="section-header">
91        <span class="section-icon">🧠</span>
92        <h3 class="section-title">语言模型配置</h3>
93      </div>
94      
95      <div class="form-group">
96        <label class="form-label">模型选择</label>
97        <select v-model="appState.llm.model" class="form-select">
98          <option 
99            v-for="model in supportedModels" 
100            :key="model" 
101            :value="model"
102          >
103            {{ model }}
104          </option>
105        </select>
106      </div>
107      
108      <div class="form-group">
109        <label class="form-label">API Key</label>
110        <input 
111          v-model="appState.llm.apiKey" 
112          type="password" 
113          class="form-input"
114          placeholder="请输入 API Key"
115          aria-label="API Key"
116        />
117      </div>
118    </section>
119
120    <!-- 控制按钮 -->
121    <section class="panel-section">
122      <div class="section-header">
123        <span class="section-icon">⚡</span>
124        <h3 class="section-title">连接控制</h3>
125      </div>
126      
127      <div class="button-group">
128        <button 
129          @click="handleConnect" 
130          :disabled="isConnecting || appState.avatar.connected"
131          class="btn btn-primary"
132        >
133          <span class="btn-icon">🔗</span>
134          {{ isConnecting ? '连接中...' : appState.avatar.connected ? '已连接' : '连接' }}
135        </button>
136        
137        <button 
138          @click="handleDisconnect" 
139          :disabled="!appState.avatar.connected"
140          class="btn btn-secondary"
141        >
142          <span class="btn-icon">📴</span>
143          断开
144        </button>
145      </div>
146    </section>
147
148    <!-- 消息交互 -->
149    <section class="panel-section">
150      <div class="section-header">
151        <span class="section-icon">💬</span>
152        <h3 class="section-title">消息交互</h3>
153      </div>
154      
155      <div class="form-group">
156        <label class="form-label">输入您的问题</label>
157        <textarea 
158          v-model="appState.ui.text" 
159          rows="3" 
160          class="form-textarea"
161          placeholder="例如：如何正确热身？跑步后如何拉伸？"
162          aria-label="输入消息"
163        />
164      </div>
165      
166      <div class="button-group">
167        <button 
168          @click="handleVoiceInput" 
169          :disabled="!appState.avatar.connected || appState.asr.isListening"
170          class="btn btn-voice"
171        >
172          <span class="btn-icon">🎙️</span>
173          {{ appState.asr.isListening ? '正在听...' : '语音输入' }}
174        </button>
175        
176        <button 
177          @click="handleSendMessage" 
178          :disabled="!appState.avatar.connected || !appState.ui.text.trim() || isSending"
179          class="btn btn-primary"
180        >
181          <span class="btn-icon">🚀</span>
182          {{ isSending ? '发送中...' : '发送' }}
183        </button>
184      </div>
185    </section>
186
187    <!-- 示例问题 -->
188    <section class="panel-section">
189      <div class="section-header">
190        <span class="section-icon">💡</span>
191        <h3 class="section-title">示例问题</h3>
192      </div>
193      
194      <div class="examples-grid">
195        <button 
196          v-for="example in exampleQuestions" 
197          :key="example" 
198          class="example-btn"
199          @click="appState.ui.text = example"
200          :disabled="!appState.avatar.connected"
201        >
202          {{ example }}
203        </button>
204      </div>
205    </section>
206  </div>
207</template>
208
209<script setup lang="ts">
210import { inject, ref, computed } from 'vue'
211import { useAsr } from '../composables/useAsr'
212import { SUPPORTED_LLM_MODELS } from '../constants'
213import type { AppState, AppStore } from '../types'
214
215// 注入全局状态和方法
216const appState = inject<AppState>('appState')!
217const appStore = inject<AppStore>('appStore')!
218
219// 组件状态
220const isConnecting = ref(false)
221const isSending = ref(false)
222const supportedModels = SUPPORTED_LLM_MODELS
223
224// 跑步相关示例问题
225const exampleQuestions = [
226  '如何正确热身？',
227  '跑步后如何拉伸？',
228  '如何提高跑步速度？',
229  '跑步时如何呼吸？',
230  '如何避免跑步受伤？',
231  '如何选择合适的跑鞋？',
232  '初学者跑步计划推荐',
233  '如何提高耐力？'
234]
235
236// ASR Hook - 使用computed确保配置更新时重新创建
237const asrConfig = computed(() => ({
238  provider: 'tx' as const,
239  appId: appState.asr.appId,
240  secretId: appState.asr.secretId,
241  secretKey: appState.asr.secretKey
242}))
243
244// 初始化ASR hook（用于停止功能）
245const { stop: stopAsr } = useAsr(asrConfig.value)
246
247// 事件处理函数
248async function handleConnect() {
249  if (isConnecting.value) return
250  
251  isConnecting.value = true
252  try {
253    await appStore.connectAvatar()
254  } catch (error) {
255    console.error('连接失败:', error)
256    alert('连接失败，请检查配置信息')
257  } finally {
258    isConnecting.value = false
259  }
260}
261
262function handleDisconnect() {
263  appStore.disconnectAvatar()
264}
265
266function handleVoiceInput() {
267  if (appState.asr.isListening) {
268    stopAsr()
269    appStore.stopVoiceInput()
270    return
271  }
272  
273  // 验证ASR配置
274  const { appId, secretId, secretKey } = appState.asr
275  if (!appId || !secretId || !secretKey) {
276    alert('请先配置ASR信息（App ID、Secret ID、Secret Key）')
277    return
278  }
279  
280  // 创建新的ASR实例（使用当前配置）
281  const { start: startAsrWithConfig, stop: stopAsrWithConfig } = useAsr({
282    provider: 'tx',
283    appId: appState.asr.appId,
284    secretId: appState.asr.secretId,
285    secretKey: appState.asr.secretKey
286  })
287  
288  appStore.startVoiceInput({
289    onFinished: (text: string) => {
290      appState.ui.text = text
291      stopAsrWithConfig()
292      appStore.stopVoiceInput()
293    },
294    onError: (error: any) => {
295      console.error('语音识别错误:', error)
296      stopAsrWithConfig()
297      appStore.stopVoiceInput()
298    }
299  })
300  
301  startAsrWithConfig({
302    onFinished: (text: string) => {
303      appState.ui.text = text
304      appStore.stopVoiceInput()
305    },
306    onError: (error: any) => {
307      console.error('语音识别错误:', error)
308      appStore.stopVoiceInput()
309    }
310  })
311}
312
313async function handleSendMessage() {
314  if (isSending.value || !appState.ui.text.trim()) return
315  
316  isSending.value = true
317  try {
318    await appStore.sendMessage()
319  } catch (error) {
320    console.error('发送消息失败:', error)
321    alert('发送消息失败')
322  } finally {
323    isSending.value = false
324  }
325}
326</script>
327
328<style scoped>
329.config-panel {
330  width: 100%;
331  max-height: 100vh;
332  overflow-y: auto;
333  padding: 20px;
334  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
335  display: flex;
336  flex-direction: column;
337  gap: 20px;
338}
339
340/* 欢迎区域 */
341.welcome-section {
342  text-align: center;
343  padding: 30px 20px;
344  background: rgba(255, 255, 255, 0.95);
345  border-radius: 16px;
346  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
347  backdrop-filter: blur(10px);
348}
349
350.welcome-icon {
351  font-size: 64px;
352  margin-bottom: 16px;
353  display: block;
354}
355
356.welcome-title {
357  font-size: 24px;
358  font-weight: 700;
359  color: #1d1d1f;
360  margin: 0 0 8px 0;
361}
362
363.welcome-subtitle {
364  font-size: 14px;
365  color: #6e6e73;
366  margin: 0;
367  line-height: 1.5;
368}
369
370/* 面板区域 */
371.panel-section {
372  background: rgba(255, 255, 255, 0.95);
373  border-radius: 12px;
374  padding: 20px;
375  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
376  backdrop-filter: blur(10px);
377  transition: transform 0.2s ease, box-shadow 0.2s ease;
378}
379
380.panel-section:hover {
381  transform: translateY(-2px);
382  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
383}
384
385.section-header {
386  display: flex;
387  align-items: center;
388  gap: 8px;
389  margin-bottom: 20px;
390  padding-bottom: 12px;
391  border-bottom: 1px solid #f0f0f5;
392}
393
394.section-icon {
395  font-size: 20px;
396}
397
398.section-title {
399  font-size: 16px;
400  font-weight: 600;
401  color: #1d1d1f;
402  margin: 0;
403}
404
405/* 表单样式 */
406.form-group {
407  margin-bottom: 20px;
408}
409
410.form-group:last-child {
411  margin-bottom: 0;
412}
413
414.form-label {
415  display: block;
416  margin-bottom: 8px;
417  font-size: 13px;
418  font-weight: 500;
419  color: #6e6e73;
420  text-transform: uppercase;
421  letter-spacing: 0.5px;
422}
423
424.form-input,
425.form-select,
426.form-textarea {
427  width: 100%;
428  padding: 12px 16px;
429  border: 1px solid #e5e5ea;
430  border-radius: 8px;
431  font-size: 14px;
432  color: #1d1d1f;
433  background-color: #fafafa;
434  transition: all 0.2s ease;
435  box-sizing: border-box;
436}
437
438.form-input:focus,
439.form-select:focus,
440.form-textarea:focus {
441  outline: none;
442  border-color: #667eea;
443  background-color: white;
444  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
445}
446
447.form-textarea {
448  resize: vertical;
449  min-height: 80px;
450  line-height: 1.5;
451}
452
453/* 按钮样式 */
454.button-group {
455  display: flex;
456  gap: 12px;
457  justify-content: flex-end;
458  margin-top: 20px;
459}
460
461.btn {
462  display: flex;
463  align-items: center;
464  justify-content: center;
465  gap: 8px;
466  padding: 10px 20px;
467  border: none;
468  border-radius: 8px;
469  font-size: 14px;
470  font-weight: 600;
471  cursor: pointer;
472  transition: all 0.2s ease;
473  min-width: 100px;
474  text-transform: uppercase;
475  letter-spacing: 0.5px;
476}
477
478.btn:disabled {
479  opacity: 0.6;
480  cursor: not-allowed;
481  transform: none;
482}
483
484.btn-primary {
485  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
486  color: white;
487}
488
489.btn-primary:hover:not(:disabled) {
490  transform: translateY(-2px);
491  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
492}
493
494.btn-secondary {
495  background: #f5f5f7;
496  color: #6e6e73;
497  border: 1px solid #e5e5ea;
498}
499
500.btn-secondary:hover:not(:disabled) {
501  background: #e5e5ea;
502  transform: translateY(-2px);
503}
504
505.btn-voice {
506  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
507  color: white;
508}
509
510.btn-voice:hover:not(:disabled) {
511  transform: translateY(-2px);
512  box-shadow: 0 4px 12px rgba(17, 153, 142, 0.4);
513}
514
515.btn-icon {
516  font-size: 16px;
517}
518
519/* 示例问题 */
520.examples-grid {
521  display: grid;
522  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
523  gap: 10px;
524}
525
526.example-btn {
527  padding: 10px 12px;
528  border: 1px solid #e5e5ea;
529  border-radius: 8px;
530  background: #fafafa;
531  color: #6e6e73;
532  font-size: 13px;
533  font-weight: 500;
534  cursor: pointer;
535  transition: all 0.2s ease;
536  text-align: center;
537  line-height: 1.4;
538}
539
540.example-btn:hover:not(:disabled) {
541  background: #667eea;
542  color: white;
543  border-color: #667eea;
544  transform: translateY(-1px);
545}
546
547.example-btn:disabled {
548  opacity: 0.5;
549  cursor: not-allowed;
550}
551
552/* 滚动条美化 */
553.config-panel::-webkit-scrollbar {
554  width: 6px;
555}
556
557.config-panel::-webkit-scrollbar-track {
558  background: rgba(255, 255, 255, 0.1);
559  border-radius: 3px;
560}
561
562.config-panel::-webkit-scrollbar-thumb {
563  background: rgba(255, 255, 255, 0.5);
564  border-radius: 3px;
565}
566
567.config-panel::-webkit-scrollbar-thumb:hover {
568  background: rgba(255, 255, 255, 0.7);
569}
570</style>
571

虚拟人渲染组件

主要负责在界面上显示数字人并展示交互状态。

核心功能：

1. 虚拟人渲染 ：提供SDK渲染容器，用于显示数字人形象
2. 状态显示 ：展示虚拟人的连接状态（加载中/就绪）
3. 字幕展示 ：显示虚拟人说话的内容
4. 交互反馈 ：展示语音输入的动态效果

主要模块：

• 头像标题栏 ：显示应用名称和连接状态
• SDK渲染容器 ：数字人形象的显示区域
• 字幕容器 ：展示虚拟人对话内容
• 语音输入动画 ：显示语音识别的进行状态
• 加载状态 ：展示虚拟人连接过程

1<template>
2  <div class="avatar-render-container" ref="containerRef">
3    <div class="avatar-header">
4      <h2 class="avatar-title">跑步知识助手</h2>
5      <div class="avatar-status" :class="{'active': appState.avatar.connected}">
6        {{ !appState.avatar.connected ? '加载中' : '就绪' }}
7      </div>
8    </div>
9    
10    <!-- SDK 渲染容器 -->
11    <div :id="containerId" class="sdk-render-container" />
12    
13    <!-- 字幕显示 -->
14    <div v-show="appState.ui.subTitleText" class="subtitle-container">
15      <div class="subtitle-icon">💬</div>
16      <div class="subtitle-text">{{ appState.ui.subTitleText }}</div>
17    </div>
18    
19    <!-- 语音输入动画 -->
20    <div v-show="appState.asr.isListening" class="voice-input-animation">
21      <div class="voice-animation-dot"></div>
22      <div class="voice-animation-dot"></div>
23      <div class="voice-animation-dot"></div>
24    </div>
25    
26    <!-- 加载状态 -->
27    <div v-if="!appState.avatar.connected" class="loading-container">
28      <div class="loading-spinner"></div>
29      <div class="loading-text">正在加载虚拟助手...</div>
30    </div>
31  </div>
32</template>
33
34<script setup lang="ts">
35import { inject, computed } from 'vue'
36import { avatarService } from '../services/avatar'
37import type { AppState } from '../types'
38
39// 注入全局状态
40const appState = inject<AppState>('appState')!
41const appStore = inject('appStore')
42
43// 获取容器ID
44const containerId = computed(() => avatarService.getContainerId())
45</script>
46
47<style scoped>
48.avatar-render-container {
49  flex: 1;
50  width: 100%;
51  height: 100%;
52  display: flex;
53  flex-direction: column;
54  align-items: center;
55  justify-content: flex-start;
56  position: relative;
57  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
58  border-radius: 12px;
59  overflow: hidden;
60  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
61  border-right: 1px solid #e0e0e0;
62}
63
64.avatar-header {
65  width: 100%;
66  padding: 16px 20px;
67  background-color: rgba(255, 255, 255, 0.1);
68  backdrop-filter: blur(10px);
69  display: flex;
70  justify-content: space-between;
71  align-items: center;
72  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
73}
74
75.avatar-title {
76  font-size: 18px;
77  font-weight: 600;
78  color: white;
79  margin: 0;
80}
81
82.avatar-status {
83  font-size: 12px;
84  padding: 4px 12px;
85  border-radius: 12px;
86  background-color: rgba(255, 255, 255, 0.2);
87  color: white;
88  font-weight: 500;
89  transition: all 0.3s ease;
90}
91
92.avatar-status.active {
93  background-color: rgba(72, 187, 120, 0.8);
94}
95
96.sdk-render-container {
97  width: 100%;
98  height: calc(100% - 160px);
99  background-color: rgba(255, 255, 255, 0.95);
100  display: flex;
101  align-items: center;
102  justify-content: center;
103}
104
105.subtitle-container {
106  position: absolute;
107  bottom: 40px;
108  left: 20px;
109  right: 20px;
110  background-color: rgba(255, 255, 255, 0.95);
111  color: #333;
112  padding: 12px 16px;
113  border-radius: 8px;
114  text-align: left;
115  font-size: 14px;
116  line-height: 1.6;
117  max-width: 90%;
118  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
119  display: flex;
120  align-items: center;
121  gap: 8px;
122  z-index: 100;
123}
124
125.subtitle-icon {
126  font-size: 18px;
127  flex-shrink: 0;
128}
129
130.subtitle-text {
131  flex: 1;
132  word-break: break-word;
133}
134
135.voice-input-animation {
136  position: absolute;
137  bottom: 40px;
138  left: 50%;
139  transform: translateX(-50%);
140  display: flex;
141  gap: 8px;
142  align-items: center;
143  z-index: 101;
144}
145
146.voice-animation-dot {
147  width: 12px;
148  height: 12px;
149  border-radius: 50%;
150  background-color: #48bb78;
151  animation: voice-pulse 1.4s infinite ease-in-out both;
152}
153
154.voice-animation-dot:nth-child(1) {
155  animation-delay: -0.32s;
156}
157
158.voice-animation-dot:nth-child(2) {
159  animation-delay: -0.16s;
160}
161
162@keyframes voice-pulse {
163  0%, 80%, 100% {
164    transform: scale(0);
165  }
166  40% {
167    transform: scale(1.0);
168  }
169}
170
171.loading-container {
172  position: absolute;
173  top: 50%;
174  left: 50%;
175  transform: translate(-50%, -50%);
176  display: flex;
177  flex-direction: column;
178  align-items: center;
179  gap: 10px;
180  background-color: rgba(255, 255, 255, 0.95);
181  padding: 24px;
182  border-radius: 12px;
183  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
184}
185
186.loading-spinner {
187  width: 40px;
188  height: 40px;
189  border: 3px solid rgba(102, 126, 234, 0.2);
190  border-left-color: #667eea;
191  border-radius: 50%;
192  animation: spin 1s linear infinite;
193}
194
195@keyframes spin {
196  to {
197    transform: rotate(360deg);
198  }
199}
200
201.loading-text {
202  font-size: 14px;
203  color: #333;
204  font-weight: 500;
205}
206</style>
207