From b753ef3302652484e2da89ee4fb405a46340081f Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 12 Mar 2025 23:35:01 +0800
Subject: [PATCH] fix(stage-web): elevenlabs

Co-authored-by: RainbowBird <44741987+luoling8192@users.noreply.github.com>
---
 packages/stage-ui/src/components/Widgets/Stage.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/stage-ui/src/components/Widgets/Stage.vue b/packages/stage-ui/src/components/Widgets/Stage.vue
index 0a0ed58b5..047064259 100644
--- a/packages/stage-ui/src/components/Widgets/Stage.vue
+++ b/packages/stage-ui/src/components/Widgets/Stage.vue
@@ -71,26 +71,27 @@ const audioQueue = useQueue<{ audioBuffer: AudioBuffer, text: string }>({
 })
 
 const speechStore = useSpeechStore()
+const { voiceId, ssmlEnabled, activeSpeechProvider, activeSpeechModel } = storeToRefs(speechStore)
 
 async function handleSpeechGeneration(ctx: { data: string }) {
   try {
-    if (!speechStore.activeSpeechProvider) {
+    if (!activeSpeechProvider.value) {
       console.warn('No active speech provider configured')
       return
     }
 
-    const provider = providersStore.getProviderInstance(speechStore.activeSpeechProvider) as SpeechProvider
+    const provider = providersStore.getProviderInstance(activeSpeechProvider.value) as SpeechProvider
     if (!provider) {
       console.error('Failed to initialize speech provider')
       return
     }
 
     const res = await generateSpeech({
-      ...provider.speech(speechStore.activeSpeechModel),
+      ...provider.speech(activeSpeechModel.value),
       input: ctx.data,
-      voice: speechStore.voiceId,
+      voice: voiceId.value,
       // Optional: Add SSML wrapping if enabled
-      ...(speechStore.ssmlEnabled && {
+      ...(ssmlEnabled.value && {
         input: speechStore.generateSSML(ctx.data),
       }),
       voiceSettings: {