From d6fa00e4bd743eabaea4ac5454807e60fb7c7621 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Fri, 14 Mar 2025 01:26:33 +0800
Subject: [PATCH] feat(stage-web|stage-tamagotchi): playground, better speech
 config

---
 .../pages/settings/providers/elevenlabs.vue   | 522 ++++++++++++------
 .../pages/settings/providers/openrouter.vue   |   6 +-
 .../pages/settings/providers/elevenlabs.vue   | 522 ++++++++++++------
 .../pages/settings/providers/openrouter.vue   |   6 +-
 .../src/stores/modules/consciousness.ts       |   7 +-
 .../stage-ui/src/stores/modules/speech.ts     |  10 -
 packages/stage-ui/src/stores/providers.ts     | 476 ++++++++++------
 7 files changed, 998 insertions(+), 551 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
index 1bdcbfde4..fd56ff35a 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/elevenlabs.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { Voice } from '@proj-airi/stage-ui/constants'
+import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
+
 import { Collapsable } from '@proj-airi/stage-ui/components'
+import { voiceMap } from '@proj-airi/stage-ui/constants'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import { useToggle } from '@vueuse/core'
+import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -11,6 +16,13 @@ const providersStore = useProvidersStore()
 const speechStore = useSpeechStore()
 const { providers } = storeToRefs(providersStore)
 
+// For playground
+const testText = ref('Hello! This is a test of the ElevenLabs voice synthesis.')
+const isGenerating = ref(false)
+const audioUrl = ref('')
+const errorMessage = ref('')
+const audioPlayer = ref<HTMLAudioElement | null>(null)
+
 // Get provider metadata
 const providerId = 'elevenlabs'
 const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
@@ -18,6 +30,13 @@ const providerMetadata = computed(() => providersStore.getProviderMetadata(provi
 const apiKey = ref(providers.value[providerId]?.apiKey || '')
 const baseUrl = ref(providers.value[providerId]?.baseUrl || '')
 
+// Voice settings as individual refs
+const similarityBoost = ref((providers.value[providerId]?.voiceSettings as any)?.similarityBoost || 0.75)
+const stability = ref((providers.value[providerId]?.voiceSettings as any)?.stability || 0.5)
+const speed = ref((providers.value[providerId]?.voiceSettings as any)?.speed || 1.0)
+const style = ref((providers.value[providerId]?.voiceSettings as any)?.style || 0)
+const useSpeakerBoost = ref((providers.value[providerId]?.voiceSettings as any)?.useSpeakerBoost !== false)
+
 // Speech settings
 const selectedLanguage = ref(speechStore.selectedLanguage)
 const selectedVoice = ref(speechStore.voiceName)
@@ -31,7 +50,16 @@ onMounted(() => {
 
   // Initialize refs with current values
   apiKey.value = providers.value[providerId]?.apiKey || ''
-  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.baseUrlDefault || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
+
+  // Initialize voice settings refs
+  if (providers.value[providerId]?.voiceSettings) {
+    similarityBoost.value = (providers.value[providerId].voiceSettings as any)?.similarityBoost ?? 0.75
+    stability.value = (providers.value[providerId].voiceSettings as any)?.stability ?? 0.5
+    speed.value = (providers.value[providerId].voiceSettings as any)?.speed ?? 1.0
+    style.value = (providers.value[providerId].voiceSettings as any)?.style ?? 0
+    useSpeakerBoost.value = (providers.value[providerId].voiceSettings as any)?.useSpeakerBoost !== false
+  }
 
   // Load voices if provider is configured
   if (providersStore.configuredProviders[providerId]) {
@@ -39,10 +67,19 @@ onMounted(() => {
   }
 })
 
-watch([apiKey, baseUrl], () => {
+// Watch all settings and update the provider configuration
+watch([apiKey, baseUrl, similarityBoost, stability, speed, style, useSpeakerBoost], () => {
   providers.value[providerId] = {
+    ...providers.value[providerId],
     apiKey: apiKey.value,
-    baseUrl: baseUrl.value || providerMetadata.value?.baseUrlDefault || '',
+    baseUrl: baseUrl.value || providerMetadata.value?.defaultOptions?.baseUrl || '',
+    voiceSettings: {
+      similarityBoost: similarityBoost.value,
+      stability: stability.value,
+      speed: speed.value,
+      style: style.value,
+      useSpeakerBoost: useSpeakerBoost.value,
+    },
   }
 })
 
@@ -53,6 +90,80 @@ watch(selectedLanguage, (newLanguage) => {
 watch(selectedVoice, (newVoice) => {
   speechStore.setVoiceName(newVoice)
 })
+
+// Function to generate speech
+async function generateTestSpeech() {
+  if (!testText.value.trim())
+    return
+
+  const provider = providersStore.getProviderInstance(providerId) as SpeechProviderWithExtraOptions<string, any>
+  if (!provider) {
+    console.error('Failed to initialize speech provider')
+    return
+  }
+
+  isGenerating.value = true
+  errorMessage.value = ''
+
+  try {
+    // Stop any currently playing audio
+    if (audioUrl.value) {
+      stopTestAudio()
+    }
+
+    const response = await generateSpeech({
+      ...provider.speech('eleven_multilingual_v2', {
+        voiceSettings: {
+          stability: stability.value,
+          similarityBoost: similarityBoost.value,
+          speed: speed.value,
+          style: style.value,
+          useSpeakerBoost: useSpeakerBoost.value,
+        },
+      }),
+      input: testText.value,
+      voice: voiceMap[selectedVoice.value as Voice],
+    })
+
+    // Convert the response to a blob and create an object URL
+    audioUrl.value = URL.createObjectURL(new Blob([response]))
+
+    // Play the audio
+    setTimeout(() => {
+      if (audioPlayer.value) {
+        audioPlayer.value.play()
+      }
+    }, 100)
+  }
+  catch (error) {
+    console.error('Error generating speech:', error)
+    errorMessage.value = error instanceof Error ? error.message : 'An unknown error occurred'
+  }
+  finally {
+    isGenerating.value = false
+  }
+}
+
+// Function to stop audio playback
+function stopTestAudio() {
+  if (audioPlayer.value) {
+    audioPlayer.value.pause()
+    audioPlayer.value.currentTime = 0
+  }
+
+  // Clean up the object URL to prevent memory leaks
+  if (audioUrl.value) {
+    URL.revokeObjectURL(audioUrl.value)
+    audioUrl.value = ''
+  }
+}
+
+// Clean up when component is unmounted
+onUnmounted(() => {
+  if (audioUrl.value) {
+    URL.revokeObjectURL(audioUrl.value)
+  }
+})
 </script>
 
 <template>
@@ -69,201 +180,250 @@ watch(selectedVoice, (newVoice) => {
       </div>
     </h1>
   </div>
-  <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-6">
-    <div>
-      <div flex="~ col gap-6">
-        <div>
-          <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
-            Basic
-          </h2>
-          <div text="neutral-400 dark:neutral-500">
-            <span>Essential settings</span>
-          </div>
-        </div>
-        <div max-w-full>
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                API Key
-                <span class="text-red-500">*</span>
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400" text-nowrap>
-                API Key for {{ providerMetadata?.localizedName }}
-              </div>
-            </div>
-            <input
-              v-model="apiKey" type="password"
-              border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-              transition="border duration-250 ease-in-out"
-              w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-              placeholder="..."
-            >
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <div flex="~ col gap-6">
-      <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
-        Voice Settings
-      </h2>
-      <div flex="~ col gap-6">
-        <label grid="~ cols-2 gap-4">
+  <div flex="~ col md:row gap-6">
+    <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-6" w="full md:40%">
+      <div>
+        <div flex="~ col gap-6">
           <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Language
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Select voice language
-            </div>
-          </div>
-          <select
-            v-model="selectedLanguage"
-            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-            transition="border duration-250 ease-in-out"
-            w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-          >
-            <option v-for="language in speechStore.availableLanguages" :key="language" :value="language">
-              {{ language }}
-            </option>
-          </select>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Voice
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Select preferred voice
-            </div>
-          </div>
-          <select
-            v-model="selectedVoice"
-            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-            transition="border duration-250 ease-in-out"
-            w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-          >
-            <option v-for="voice in availableVoices" :key="voice.id" :value="voice.name">
-              {{ voice.name }}
-            </option>
-          </select>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Pitch
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Adjust voice pitch
-            </div>
-          </div>
-          <div flex="~ row" items-center gap-2>
-            <input
-              v-model="speechStore.pitch"
-              type="range"
-              min="-100"
-              max="100"
-              step="1"
-              w-full
-            >
-            <span class="text-xs">{{ speechStore.pitch }}</span>
-          </div>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Rate
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Adjust speaking rate
-            </div>
-          </div>
-          <div flex="~ row" items-center gap-2>
-            <input
-              v-model="speechStore.rate"
-              type="range"
-              min="0.5"
-              max="2"
-              step="0.1"
-              w-full
-            >
-            <span class="text-xs">{{ speechStore.rate.toFixed(1) }}</span>
-          </div>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              SSML
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Enable SSML support
-            </div>
-          </div>
-          <div>
-            <input
-              v-model="speechStore.ssmlEnabled"
-              type="checkbox"
-              class="mr-2"
-              :disabled="!speechStore.supportsSSML"
-            >
-            <span class="text-sm">{{ speechStore.ssmlEnabled ? 'Enabled' : 'Disabled' }}</span>
-          </div>
-        </label>
-      </div>
-    </div>
-
-    <div>
-      <Collapsable w-full>
-        <template #trigger="slotProps">
-          <button
-            transition="all ease-in-out duration-250"
-            w-full flex items-center gap-1.5 outline-none
-            class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
-            @click="() => slotProps.setVisible(!slotProps.visible) && toggleAdvancedVisible()"
-          >
             <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
-              <span>Advanced</span>
+              Basic
             </h2>
-            <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
-              <div i-solar:alt-arrow-down-bold-duotone />
+            <div text="neutral-400 dark:neutral-500">
+              <span>Essential settings</span>
             </div>
-          </button>
-        </template>
-        <div mt-4>
+          </div>
+          <div max-w-full>
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  API Key
+                  <span class="text-red-500">*</span>
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400" text-nowrap>
+                  API Key for {{ providerMetadata?.localizedName }}
+                </div>
+              </div>
+              <input
+                v-model="apiKey" type="password"
+                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                placeholder="..."
+              >
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div flex="~ col gap-6">
+        <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+          Voice Settings
+        </h2>
+        <div flex="~ col gap-6">
           <label grid="~ cols-2 gap-4">
             <div>
               <div class="flex items-center gap-1 text-sm font-medium">
-                Base URL
+                Similarity Boost
               </div>
               <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Custom base URL (optional)
+                Voice similarity adherence
               </div>
             </div>
-            <input
-              v-model="baseUrl" type="text"
-              border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-              transition="border duration-250 ease-in-out"
-              w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-              :placeholder="providerMetadata?.baseUrlDefault"
-            >
+            <div flex="~ row" items-center gap-2>
+              <input v-model="similarityBoost" type="range" min="0" max="1" step="0.01" w-full>
+              <span class="text-xs">{{ similarityBoost.toFixed(2) }}</span>
+            </div>
           </label>
 
-          <div mt-4>
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Stability
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Voice stability and randomness
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="stability" type="range" min="0" max="1" step="0.01" w-full>
+              <span class="text-xs">{{ stability.toFixed(2) }}</span>
+            </div>
+          </label>
+
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Speed
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Speech generation speed
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="speed" type="range" min="0.7" max="1.2" step="0.01" w-full>
+              <span class="text-xs">{{ speed.toFixed(2) }}</span>
+            </div>
+          </label>
+
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Style
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Voice style exaggeration
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="style" type="range" min="0" max="1" step="0.01" w-full>
+              <span class="text-xs">{{ style.toFixed(2) }}</span>
+            </div>
+          </label>
+
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Speaker Boost
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Enhance speaker similarity
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="useSpeakerBoost" type="checkbox">
+              <span class="text-xs">{{ useSpeakerBoost ? 'Enabled' : 'Disabled' }}</span>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <div>
+        <Collapsable w-full>
+          <template #trigger="slotProps">
             <button
-              border="zinc-300 dark:zinc-800 solid 1"
-              transition="border duration-250 ease-in-out"
-              rounded
-              px-4 py-2 text-sm @click="speechStore.resetVoiceSettings"
+              transition="all ease-in-out duration-250" w-full flex items-center gap-1.5 outline-none
+              class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+              @click="() => slotProps.setVisible(!slotProps.visible) && toggleAdvancedVisible()"
             >
-              Reset Voice Settings
+              <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+                <span>Advanced</span>
+              </h2>
+              <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+                <div i-solar:alt-arrow-down-bold-duotone />
+              </div>
+            </button>
+          </template>
+          <div mt-4>
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Base URL
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  Custom base URL (optional)
+                </div>
+              </div>
+              <input
+                v-model="baseUrl" type="text"
+                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
+              >
+            </label>
+
+            <div mt-4>
+              <button
+                border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
+                py-2 text-sm @click="speechStore.resetVoiceSettings"
+              >
+                Reset Voice Settings
+              </button>
+            </div>
+          </div>
+        </Collapsable>
+      </div>
+    </div>
+    <div flex="~ col gap-6" w="full md:60%">
+      <div rounded-xl>
+        <h2 class="mb-4 text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+          Voice Playground
+        </h2>
+        <div flex="~ col gap-4">
+          <textarea
+            v-model="testText" placeholder="Enter text to test the voice..."
+            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+            transition="border duration-250 ease-in-out" h-24 w-full rounded px-3 py-2 text-sm outline-none
+          />
+          <div flex="~ col gap-6">
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Language
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  Select voice language
+                </div>
+              </div>
+              <select
+                v-model="selectedLanguage"
+                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+              >
+                <option v-for="language in speechStore.availableLanguages" :key="language" :value="language">
+                  {{ language }}
+                </option>
+              </select>
+            </label>
+
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Voice
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  Select preferred voice
+                </div>
+              </div>
+              <select
+                v-model="selectedVoice" border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+              >
+                <option v-for="voice in availableVoices" :key="voice.id" :value="voice.name">
+                  {{ voice.name }}
+                </option>
+              </select>
+            </label>
+          </div>
+          <div flex="~ row" gap-4>
+            <button
+              border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
+              py-2 text-sm :disabled="isGenerating || !testText.trim() || !apiKey"
+              :class="{ 'opacity-50 cursor-not-allowed': isGenerating || !testText.trim() || !apiKey }"
+              @click="generateTestSpeech"
+            >
+              <div flex="~ row" items-center gap-2>
+                <div i-solar:play-circle-bold-duotone />
+                <span>{{ isGenerating ? 'Generating...' : 'Test Voice' }}</span>
+              </div>
+            </button>
+            <button
+              v-if="audioUrl" border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out"
+              rounded px-4 py-2 text-sm @click="stopTestAudio"
+            >
+              <div flex="~ row" items-center gap-2>
+                <div i-solar:stop-circle-bold-duotone />
+                <span>Stop</span>
+              </div>
             </button>
           </div>
+          <div v-if="!apiKey" class="mt-2 text-sm text-red-500">
+            Please enter an API key to test the voice.
+          </div>
+          <div v-if="errorMessage" class="mt-2 text-sm text-red-500">
+            {{ errorMessage }}
+          </div>
+          <audio v-if="audioUrl" ref="audioPlayer" :src="audioUrl" controls class="mt-2 w-full" />
         </div>
-      </Collapsable>
+      </div>
     </div>
   </div>
   <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
diff --git a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue
index d086d8df4..0d6b6c2cd 100644
--- a/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue
+++ b/apps/stage-tamagotchi/src/renderer/src/pages/settings/providers/openrouter.vue
@@ -25,13 +25,13 @@ onMounted(() => {
 
   // Initialize refs with current values
   apiKey.value = providers.value[providerId]?.apiKey || ''
-  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.baseUrlDefault || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
 })
 
 watch([apiKey, baseUrl], () => {
   providers.value[providerId] = {
     apiKey: apiKey.value,
-    baseUrl: baseUrl.value || providerMetadata.value?.baseUrlDefault || '',
+    baseUrl: baseUrl.value || providerMetadata.value?.defaultOptions?.baseUrl || '',
   }
 })
 </script>
@@ -115,7 +115,7 @@ watch([apiKey, baseUrl], () => {
               border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
               transition="border duration-250 ease-in-out"
               w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-              :placeholder="providerMetadata?.baseUrlDefault"
+              :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
             >
           </label>
         </div>
diff --git a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
index 1bdcbfde4..fd56ff35a 100644
--- a/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
+++ b/apps/stage-web/src/pages/settings/providers/elevenlabs.vue
@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { Voice } from '@proj-airi/stage-ui/constants'
+import type { SpeechProviderWithExtraOptions } from '@xsai-ext/shared-providers'
+
 import { Collapsable } from '@proj-airi/stage-ui/components'
+import { voiceMap } from '@proj-airi/stage-ui/constants'
 import { useProvidersStore, useSpeechStore } from '@proj-airi/stage-ui/stores'
 import { useToggle } from '@vueuse/core'
+import { generateSpeech } from '@xsai/generate-speech'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -11,6 +16,13 @@ const providersStore = useProvidersStore()
 const speechStore = useSpeechStore()
 const { providers } = storeToRefs(providersStore)
 
+// For playground
+const testText = ref('Hello! This is a test of the ElevenLabs voice synthesis.')
+const isGenerating = ref(false)
+const audioUrl = ref('')
+const errorMessage = ref('')
+const audioPlayer = ref<HTMLAudioElement | null>(null)
+
 // Get provider metadata
 const providerId = 'elevenlabs'
 const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId))
@@ -18,6 +30,13 @@ const providerMetadata = computed(() => providersStore.getProviderMetadata(provi
 const apiKey = ref(providers.value[providerId]?.apiKey || '')
 const baseUrl = ref(providers.value[providerId]?.baseUrl || '')
 
+// Voice settings as individual refs
+const similarityBoost = ref((providers.value[providerId]?.voiceSettings as any)?.similarityBoost || 0.75)
+const stability = ref((providers.value[providerId]?.voiceSettings as any)?.stability || 0.5)
+const speed = ref((providers.value[providerId]?.voiceSettings as any)?.speed || 1.0)
+const style = ref((providers.value[providerId]?.voiceSettings as any)?.style || 0)
+const useSpeakerBoost = ref((providers.value[providerId]?.voiceSettings as any)?.useSpeakerBoost !== false)
+
 // Speech settings
 const selectedLanguage = ref(speechStore.selectedLanguage)
 const selectedVoice = ref(speechStore.voiceName)
@@ -31,7 +50,16 @@ onMounted(() => {
 
   // Initialize refs with current values
   apiKey.value = providers.value[providerId]?.apiKey || ''
-  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.baseUrlDefault || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
+
+  // Initialize voice settings refs
+  if (providers.value[providerId]?.voiceSettings) {
+    similarityBoost.value = (providers.value[providerId].voiceSettings as any)?.similarityBoost ?? 0.75
+    stability.value = (providers.value[providerId].voiceSettings as any)?.stability ?? 0.5
+    speed.value = (providers.value[providerId].voiceSettings as any)?.speed ?? 1.0
+    style.value = (providers.value[providerId].voiceSettings as any)?.style ?? 0
+    useSpeakerBoost.value = (providers.value[providerId].voiceSettings as any)?.useSpeakerBoost !== false
+  }
 
   // Load voices if provider is configured
   if (providersStore.configuredProviders[providerId]) {
@@ -39,10 +67,19 @@ onMounted(() => {
   }
 })
 
-watch([apiKey, baseUrl], () => {
+// Watch all settings and update the provider configuration
+watch([apiKey, baseUrl, similarityBoost, stability, speed, style, useSpeakerBoost], () => {
   providers.value[providerId] = {
+    ...providers.value[providerId],
     apiKey: apiKey.value,
-    baseUrl: baseUrl.value || providerMetadata.value?.baseUrlDefault || '',
+    baseUrl: baseUrl.value || providerMetadata.value?.defaultOptions?.baseUrl || '',
+    voiceSettings: {
+      similarityBoost: similarityBoost.value,
+      stability: stability.value,
+      speed: speed.value,
+      style: style.value,
+      useSpeakerBoost: useSpeakerBoost.value,
+    },
   }
 })
 
@@ -53,6 +90,80 @@ watch(selectedLanguage, (newLanguage) => {
 watch(selectedVoice, (newVoice) => {
   speechStore.setVoiceName(newVoice)
 })
+
+// Function to generate speech
+async function generateTestSpeech() {
+  if (!testText.value.trim())
+    return
+
+  const provider = providersStore.getProviderInstance(providerId) as SpeechProviderWithExtraOptions<string, any>
+  if (!provider) {
+    console.error('Failed to initialize speech provider')
+    return
+  }
+
+  isGenerating.value = true
+  errorMessage.value = ''
+
+  try {
+    // Stop any currently playing audio
+    if (audioUrl.value) {
+      stopTestAudio()
+    }
+
+    const response = await generateSpeech({
+      ...provider.speech('eleven_multilingual_v2', {
+        voiceSettings: {
+          stability: stability.value,
+          similarityBoost: similarityBoost.value,
+          speed: speed.value,
+          style: style.value,
+          useSpeakerBoost: useSpeakerBoost.value,
+        },
+      }),
+      input: testText.value,
+      voice: voiceMap[selectedVoice.value as Voice],
+    })
+
+    // Convert the response to a blob and create an object URL
+    audioUrl.value = URL.createObjectURL(new Blob([response]))
+
+    // Play the audio
+    setTimeout(() => {
+      if (audioPlayer.value) {
+        audioPlayer.value.play()
+      }
+    }, 100)
+  }
+  catch (error) {
+    console.error('Error generating speech:', error)
+    errorMessage.value = error instanceof Error ? error.message : 'An unknown error occurred'
+  }
+  finally {
+    isGenerating.value = false
+  }
+}
+
+// Function to stop audio playback
+function stopTestAudio() {
+  if (audioPlayer.value) {
+    audioPlayer.value.pause()
+    audioPlayer.value.currentTime = 0
+  }
+
+  // Clean up the object URL to prevent memory leaks
+  if (audioUrl.value) {
+    URL.revokeObjectURL(audioUrl.value)
+    audioUrl.value = ''
+  }
+}
+
+// Clean up when component is unmounted
+onUnmounted(() => {
+  if (audioUrl.value) {
+    URL.revokeObjectURL(audioUrl.value)
+  }
+})
 </script>
 
 <template>
@@ -69,201 +180,250 @@ watch(selectedVoice, (newVoice) => {
       </div>
     </h1>
   </div>
-  <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-6">
-    <div>
-      <div flex="~ col gap-6">
-        <div>
-          <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
-            Basic
-          </h2>
-          <div text="neutral-400 dark:neutral-500">
-            <span>Essential settings</span>
-          </div>
-        </div>
-        <div max-w-full>
-          <label grid="~ cols-2 gap-4">
-            <div>
-              <div class="flex items-center gap-1 text-sm font-medium">
-                API Key
-                <span class="text-red-500">*</span>
-              </div>
-              <div class="text-xs text-zinc-500 dark:text-zinc-400" text-nowrap>
-                API Key for {{ providerMetadata?.localizedName }}
-              </div>
-            </div>
-            <input
-              v-model="apiKey" type="password"
-              border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-              transition="border duration-250 ease-in-out"
-              w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-              placeholder="..."
-            >
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <div flex="~ col gap-6">
-      <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
-        Voice Settings
-      </h2>
-      <div flex="~ col gap-6">
-        <label grid="~ cols-2 gap-4">
+  <div flex="~ col md:row gap-6">
+    <div bg="neutral-50 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4 flex="~ col gap-6" w="full md:40%">
+      <div>
+        <div flex="~ col gap-6">
           <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Language
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Select voice language
-            </div>
-          </div>
-          <select
-            v-model="selectedLanguage"
-            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-            transition="border duration-250 ease-in-out"
-            w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-          >
-            <option v-for="language in speechStore.availableLanguages" :key="language" :value="language">
-              {{ language }}
-            </option>
-          </select>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Voice
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Select preferred voice
-            </div>
-          </div>
-          <select
-            v-model="selectedVoice"
-            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-            transition="border duration-250 ease-in-out"
-            w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-          >
-            <option v-for="voice in availableVoices" :key="voice.id" :value="voice.name">
-              {{ voice.name }}
-            </option>
-          </select>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Pitch
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Adjust voice pitch
-            </div>
-          </div>
-          <div flex="~ row" items-center gap-2>
-            <input
-              v-model="speechStore.pitch"
-              type="range"
-              min="-100"
-              max="100"
-              step="1"
-              w-full
-            >
-            <span class="text-xs">{{ speechStore.pitch }}</span>
-          </div>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              Rate
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Adjust speaking rate
-            </div>
-          </div>
-          <div flex="~ row" items-center gap-2>
-            <input
-              v-model="speechStore.rate"
-              type="range"
-              min="0.5"
-              max="2"
-              step="0.1"
-              w-full
-            >
-            <span class="text-xs">{{ speechStore.rate.toFixed(1) }}</span>
-          </div>
-        </label>
-
-        <label grid="~ cols-2 gap-4">
-          <div>
-            <div class="flex items-center gap-1 text-sm font-medium">
-              SSML
-            </div>
-            <div class="text-xs text-zinc-500 dark:text-zinc-400">
-              Enable SSML support
-            </div>
-          </div>
-          <div>
-            <input
-              v-model="speechStore.ssmlEnabled"
-              type="checkbox"
-              class="mr-2"
-              :disabled="!speechStore.supportsSSML"
-            >
-            <span class="text-sm">{{ speechStore.ssmlEnabled ? 'Enabled' : 'Disabled' }}</span>
-          </div>
-        </label>
-      </div>
-    </div>
-
-    <div>
-      <Collapsable w-full>
-        <template #trigger="slotProps">
-          <button
-            transition="all ease-in-out duration-250"
-            w-full flex items-center gap-1.5 outline-none
-            class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
-            @click="() => slotProps.setVisible(!slotProps.visible) && toggleAdvancedVisible()"
-          >
             <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
-              <span>Advanced</span>
+              Basic
             </h2>
-            <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
-              <div i-solar:alt-arrow-down-bold-duotone />
+            <div text="neutral-400 dark:neutral-500">
+              <span>Essential settings</span>
             </div>
-          </button>
-        </template>
-        <div mt-4>
+          </div>
+          <div max-w-full>
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  API Key
+                  <span class="text-red-500">*</span>
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400" text-nowrap>
+                  API Key for {{ providerMetadata?.localizedName }}
+                </div>
+              </div>
+              <input
+                v-model="apiKey" type="password"
+                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                placeholder="..."
+              >
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div flex="~ col gap-6">
+        <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+          Voice Settings
+        </h2>
+        <div flex="~ col gap-6">
           <label grid="~ cols-2 gap-4">
             <div>
               <div class="flex items-center gap-1 text-sm font-medium">
-                Base URL
+                Similarity Boost
               </div>
               <div class="text-xs text-zinc-500 dark:text-zinc-400">
-                Custom base URL (optional)
+                Voice similarity adherence
               </div>
             </div>
-            <input
-              v-model="baseUrl" type="text"
-              border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
-              transition="border duration-250 ease-in-out"
-              w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-              :placeholder="providerMetadata?.baseUrlDefault"
-            >
+            <div flex="~ row" items-center gap-2>
+              <input v-model="similarityBoost" type="range" min="0" max="1" step="0.01" w-full>
+              <span class="text-xs">{{ similarityBoost.toFixed(2) }}</span>
+            </div>
           </label>
 
-          <div mt-4>
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Stability
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Voice stability and randomness
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="stability" type="range" min="0" max="1" step="0.01" w-full>
+              <span class="text-xs">{{ stability.toFixed(2) }}</span>
+            </div>
+          </label>
+
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Speed
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Speech generation speed
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="speed" type="range" min="0.7" max="1.2" step="0.01" w-full>
+              <span class="text-xs">{{ speed.toFixed(2) }}</span>
+            </div>
+          </label>
+
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Style
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Voice style exaggeration
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="style" type="range" min="0" max="1" step="0.01" w-full>
+              <span class="text-xs">{{ style.toFixed(2) }}</span>
+            </div>
+          </label>
+
+          <label grid="~ cols-2 gap-4">
+            <div>
+              <div class="flex items-center gap-1 text-sm font-medium">
+                Speaker Boost
+              </div>
+              <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                Enhance speaker similarity
+              </div>
+            </div>
+            <div flex="~ row" items-center gap-2>
+              <input v-model="useSpeakerBoost" type="checkbox">
+              <span class="text-xs">{{ useSpeakerBoost ? 'Enabled' : 'Disabled' }}</span>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <div>
+        <Collapsable w-full>
+          <template #trigger="slotProps">
             <button
-              border="zinc-300 dark:zinc-800 solid 1"
-              transition="border duration-250 ease-in-out"
-              rounded
-              px-4 py-2 text-sm @click="speechStore.resetVoiceSettings"
+              transition="all ease-in-out duration-250" w-full flex items-center gap-1.5 outline-none
+              class="[&_.provider-icon]:grayscale-100 [&_.provider-icon]:hover:grayscale-0"
+              @click="() => slotProps.setVisible(!slotProps.visible) && toggleAdvancedVisible()"
             >
-              Reset Voice Settings
+              <h2 class="text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+                <span>Advanced</span>
+              </h2>
+              <div transform transition="transform duration-250" :class="{ 'rotate-180': slotProps.visible }">
+                <div i-solar:alt-arrow-down-bold-duotone />
+              </div>
+            </button>
+          </template>
+          <div mt-4>
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Base URL
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  Custom base URL (optional)
+                </div>
+              </div>
+              <input
+                v-model="baseUrl" type="text"
+                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+                :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
+              >
+            </label>
+
+            <div mt-4>
+              <button
+                border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
+                py-2 text-sm @click="speechStore.resetVoiceSettings"
+              >
+                Reset Voice Settings
+              </button>
+            </div>
+          </div>
+        </Collapsable>
+      </div>
+    </div>
+    <div flex="~ col gap-6" w="full md:60%">
+      <div rounded-xl>
+        <h2 class="mb-4 text-lg text-neutral-500 md:text-2xl dark:text-neutral-400">
+          Voice Playground
+        </h2>
+        <div flex="~ col gap-4">
+          <textarea
+            v-model="testText" placeholder="Enter text to test the voice..."
+            border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+            transition="border duration-250 ease-in-out" h-24 w-full rounded px-3 py-2 text-sm outline-none
+          />
+          <div flex="~ col gap-6">
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Language
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  Select voice language
+                </div>
+              </div>
+              <select
+                v-model="selectedLanguage"
+                border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+              >
+                <option v-for="language in speechStore.availableLanguages" :key="language" :value="language">
+                  {{ language }}
+                </option>
+              </select>
+            </label>
+
+            <label grid="~ cols-2 gap-4">
+              <div>
+                <div class="flex items-center gap-1 text-sm font-medium">
+                  Voice
+                </div>
+                <div class="text-xs text-zinc-500 dark:text-zinc-400">
+                  Select preferred voice
+                </div>
+              </div>
+              <select
+                v-model="selectedVoice" border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
+                transition="border duration-250 ease-in-out" w-full rounded px-2 py-1 text-nowrap text-sm outline-none
+              >
+                <option v-for="voice in availableVoices" :key="voice.id" :value="voice.name">
+                  {{ voice.name }}
+                </option>
+              </select>
+            </label>
+          </div>
+          <div flex="~ row" gap-4>
+            <button
+              border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out" rounded px-4
+              py-2 text-sm :disabled="isGenerating || !testText.trim() || !apiKey"
+              :class="{ 'opacity-50 cursor-not-allowed': isGenerating || !testText.trim() || !apiKey }"
+              @click="generateTestSpeech"
+            >
+              <div flex="~ row" items-center gap-2>
+                <div i-solar:play-circle-bold-duotone />
+                <span>{{ isGenerating ? 'Generating...' : 'Test Voice' }}</span>
+              </div>
+            </button>
+            <button
+              v-if="audioUrl" border="zinc-300 dark:zinc-800 solid 1" transition="border duration-250 ease-in-out"
+              rounded px-4 py-2 text-sm @click="stopTestAudio"
+            >
+              <div flex="~ row" items-center gap-2>
+                <div i-solar:stop-circle-bold-duotone />
+                <span>Stop</span>
+              </div>
             </button>
           </div>
+          <div v-if="!apiKey" class="mt-2 text-sm text-red-500">
+            Please enter an API key to test the voice.
+          </div>
+          <div v-if="errorMessage" class="mt-2 text-sm text-red-500">
+            {{ errorMessage }}
+          </div>
+          <audio v-if="audioUrl" ref="audioPlayer" :src="audioUrl" controls class="mt-2 w-full" />
         </div>
-      </Collapsable>
+      </div>
     </div>
   </div>
   <div fixed bottom-0 right-0 text="neutral-100/80 dark:neutral-500/20">
diff --git a/apps/stage-web/src/pages/settings/providers/openrouter.vue b/apps/stage-web/src/pages/settings/providers/openrouter.vue
index d086d8df4..0d6b6c2cd 100644
--- a/apps/stage-web/src/pages/settings/providers/openrouter.vue
+++ b/apps/stage-web/src/pages/settings/providers/openrouter.vue
@@ -25,13 +25,13 @@ onMounted(() => {
 
   // Initialize refs with current values
   apiKey.value = providers.value[providerId]?.apiKey || ''
-  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.baseUrlDefault || ''
+  baseUrl.value = providers.value[providerId]?.baseUrl || providerMetadata.value?.defaultOptions?.baseUrl || ''
 })
 
 watch([apiKey, baseUrl], () => {
   providers.value[providerId] = {
     apiKey: apiKey.value,
-    baseUrl: baseUrl.value || providerMetadata.value?.baseUrlDefault || '',
+    baseUrl: baseUrl.value || providerMetadata.value?.defaultOptions?.baseUrl || '',
   }
 })
 </script>
@@ -115,7 +115,7 @@ watch([apiKey, baseUrl], () => {
               border="zinc-300 dark:zinc-800 solid 1 focus:zinc-400 dark:focus:zinc-600"
               transition="border duration-250 ease-in-out"
               w-full rounded px-2 py-1 text-nowrap text-sm outline-none
-              :placeholder="providerMetadata?.baseUrlDefault"
+              :placeholder="providerMetadata?.defaultOptions?.baseUrl as string || ''"
             >
           </label>
         </div>
diff --git a/packages/stage-ui/src/stores/modules/consciousness.ts b/packages/stage-ui/src/stores/modules/consciousness.ts
index 1669ec5bd..bb5843986 100644
--- a/packages/stage-ui/src/stores/modules/consciousness.ts
+++ b/packages/stage-ui/src/stores/modules/consciousness.ts
@@ -1,11 +1,12 @@
 import { useLocalStorage } from '@vueuse/core'
-import { defineStore } from 'pinia'
+import { defineStore, storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 
 import { useProvidersStore } from '../providers'
 
 export const useConsciousnessStore = defineStore('consciousness', () => {
   const providersStore = useProvidersStore()
+  const { providerMetadata } = storeToRefs(providersStore)
 
   // State
   const activeProvider = useLocalStorage('settings/consciousness/active-provider', '')
@@ -16,7 +17,7 @@ export const useConsciousnessStore = defineStore('consciousness', () => {
 
   // Computed properties
   const supportsModelListing = computed(() => {
-    return providersStore.supportsModelListing(activeProvider.value)
+    return providerMetadata.value[activeProvider.value]?.capabilities.listModels !== undefined
   })
 
   const providerModels = computed(() => {
@@ -69,7 +70,7 @@ export const useConsciousnessStore = defineStore('consciousness', () => {
   }
 
   async function loadModelsForProvider(provider: string) {
-    if (provider && providersStore.supportsModelListing(provider)
+    if (provider && providerMetadata.value[activeProvider.value]?.capabilities.listModels !== undefined
       && providersStore.getModelsForProvider(provider).length === 0) {
       await providersStore.fetchModelsForProvider(provider)
     }
diff --git a/packages/stage-ui/src/stores/modules/speech.ts b/packages/stage-ui/src/stores/modules/speech.ts
index 966480a66..8000dee33 100644
--- a/packages/stage-ui/src/stores/modules/speech.ts
+++ b/packages/stage-ui/src/stores/modules/speech.ts
@@ -86,14 +86,6 @@ export const useSpeechStore = defineStore('speech', () => {
     return voiceMap[voiceName.value as Voice]
   })
 
-  function setPitch(value: number) {
-    pitch.value = value
-  }
-
-  function setRate(value: number) {
-    rate.value = value
-  }
-
   function setSSMLEnabled(enabled: boolean) {
     ssmlEnabled.value = enabled
   }
@@ -268,8 +260,6 @@ export const useSpeechStore = defineStore('speech', () => {
     setActiveSpeechProvider,
     setActiveSpeechModel,
     setVoiceName,
-    setPitch,
-    setRate,
     setSSMLEnabled,
     setLanguage,
     resetVoiceSettings,
diff --git a/packages/stage-ui/src/stores/providers.ts b/packages/stage-ui/src/stores/providers.ts
index 8ca36e594..e2fa2b319 100644
--- a/packages/stage-ui/src/stores/providers.ts
+++ b/packages/stage-ui/src/stores/providers.ts
@@ -1,5 +1,13 @@
-/* eslint-disable no-case-declarations */
-import type { ChatProvider, EmbedProvider, SpeechProviderWithExtraOptions, TranscriptionProvider } from '@xsai-ext/shared-providers'
+import type {
+  ChatProvider,
+  ChatProviderWithExtraOptions,
+  EmbedProvider,
+  EmbedProviderWithExtraOptions,
+  SpeechProvider,
+  SpeechProviderWithExtraOptions,
+  TranscriptionProvider,
+  TranscriptionProviderWithExtraOptions,
+} from '@xsai-ext/shared-providers'
 
 import { useLocalStorage } from '@vueuse/core'
 import {
@@ -30,11 +38,20 @@ export interface ProviderMetadata {
   icon?: string
   iconColor?: string
   iconImage?: string
-  baseUrlDefault?: string
-  createProvider: (config: Record<string, unknown>) => ChatProvider | EmbedProvider | SpeechProviderWithExtraOptions | TranscriptionProvider
-  modelSelectionType: 'dynamic' | 'manual' | 'hardcoded'
-  fetchModelsManually?: (config: Record<string, unknown>) => Promise<ModelInfo[]>
-  hardcodedModels?: ModelInfo[]
+  defaultOptions?: Record<string, unknown>
+  createProvider: (config: Record<string, unknown>) =>
+    | ChatProvider
+    | ChatProviderWithExtraOptions
+    | EmbedProvider
+    | EmbedProviderWithExtraOptions
+    | SpeechProvider
+    | SpeechProviderWithExtraOptions
+    | TranscriptionProvider
+    | TranscriptionProviderWithExtraOptions
+  capabilities: {
+    listModels?: (config: Record<string, unknown>) => Promise<ModelInfo[]>
+    listVoices?: (config: Record<string, unknown>) => Promise<VoiceInfo[]>
+  }
 }
 
 export interface ModelInfo {
@@ -47,6 +64,16 @@ export interface ModelInfo {
   deprecated?: boolean
 }
 
+export interface VoiceInfo {
+  id: string
+  name: string
+  provider: string
+  description?: string
+  gender?: string
+  language?: string
+  deprecated?: boolean
+}
+
 export const useProvidersStore = defineStore('providers', () => {
   const providerCredentials = useLocalStorage<Record<string, Record<string, unknown>>>('settings/credentials/providers', {})
 
@@ -89,10 +116,15 @@ export const useProvidersStore = defineStore('providers', () => {
       descriptionKey: 'providers.openrouter.description',
       description: 'openrouter.ai',
       icon: 'i-lobe-icons:openrouter',
-      baseUrlDefault: 'https://openrouter.ai/api/v1/',
+      defaultOptions: {
+        baseUrl: 'https://openrouter.ai/api/v1/',
+      },
       createProvider: config => createOpenRouter(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'manual',
-      fetchModelsManually: fetchOpenRouterModels,
+      capabilities: {
+        listModels: async (config) => {
+          return fetchOpenRouterModels(config)
+        },
+      },
     },
     'openai': {
       id: 'openai',
@@ -101,9 +133,26 @@ export const useProvidersStore = defineStore('providers', () => {
       descriptionKey: 'providers.openai.description',
       description: 'openai.com',
       icon: 'i-lobe-icons:openai',
-      baseUrlDefault: 'https://api.openai.com/v1/',
+      defaultOptions: {
+        baseUrl: 'https://api.openai.com/v1/',
+      },
       createProvider: config => createOpenAI(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createOpenAI(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'openai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'ollama-ai': {
       id: 'ollama-ai',
@@ -112,9 +161,26 @@ export const useProvidersStore = defineStore('providers', () => {
       descriptionKey: 'providers.ollama.description',
       description: 'ollama.com',
       icon: 'i-lobe-icons:ollama',
-      baseUrlDefault: 'http://localhost:11434/api/',
+      defaultOptions: {
+        baseUrl: 'http://localhost:11434/api/',
+      },
       createProvider: config => createOllama(config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createOllama(config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'ollama-ai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'vllm': {
       id: 'vllm',
@@ -124,51 +190,54 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'vllm.ai',
       iconColor: 'i-lobe-icons:vllm-color',
       createProvider: config => createOllama(config.baseUrl as string),
-      modelSelectionType: 'hardcoded',
-      hardcodedModels: [
-        {
-          id: 'llama-2-7b',
-          name: 'Llama 2 (7B)',
-          provider: 'vllm',
-          description: 'Meta\'s Llama 2 7B parameter model',
-          contextLength: 4096,
+      capabilities: {
+        listModels: async () => {
+          return [
+            {
+              id: 'llama-2-7b',
+              name: 'Llama 2 (7B)',
+              provider: 'vllm',
+              description: 'Meta\'s Llama 2 7B parameter model',
+              contextLength: 4096,
+            },
+            {
+              id: 'llama-2-13b',
+              name: 'Llama 2 (13B)',
+              provider: 'vllm',
+              description: 'Meta\'s Llama 2 13B parameter model',
+              contextLength: 4096,
+            },
+            {
+              id: 'llama-2-70b',
+              name: 'Llama 2 (70B)',
+              provider: 'vllm',
+              description: 'Meta\'s Llama 2 70B parameter model',
+              contextLength: 4096,
+            },
+            {
+              id: 'mistral-7b',
+              name: 'Mistral (7B)',
+              provider: 'vllm',
+              description: 'Mistral AI\'s 7B parameter model',
+              contextLength: 8192,
+            },
+            {
+              id: 'mixtral-8x7b',
+              name: 'Mixtral (8x7B)',
+              provider: 'vllm',
+              description: 'Mistral AI\'s Mixtral 8x7B MoE model',
+              contextLength: 32768,
+            },
+            {
+              id: 'custom',
+              name: 'Custom Model',
+              provider: 'vllm',
+              description: 'Specify a custom model name',
+              contextLength: 0,
+            },
+          ]
         },
-        {
-          id: 'llama-2-13b',
-          name: 'Llama 2 (13B)',
-          provider: 'vllm',
-          description: 'Meta\'s Llama 2 13B parameter model',
-          contextLength: 4096,
-        },
-        {
-          id: 'llama-2-70b',
-          name: 'Llama 2 (70B)',
-          provider: 'vllm',
-          description: 'Meta\'s Llama 2 70B parameter model',
-          contextLength: 4096,
-        },
-        {
-          id: 'mistral-7b',
-          name: 'Mistral (7B)',
-          provider: 'vllm',
-          description: 'Mistral AI\'s 7B parameter model',
-          contextLength: 8192,
-        },
-        {
-          id: 'mixtral-8x7b',
-          name: 'Mixtral (8x7B)',
-          provider: 'vllm',
-          description: 'Mistral AI\'s Mixtral 8x7B MoE model',
-          contextLength: 32768,
-        },
-        {
-          id: 'custom',
-          name: 'Custom Model',
-          provider: 'vllm',
-          description: 'Specify a custom model name',
-          contextLength: 0,
-        },
-      ],
+      },
     },
     'perplexity-ai': {
       id: 'perplexity-ai',
@@ -177,46 +246,51 @@ export const useProvidersStore = defineStore('providers', () => {
       descriptionKey: 'providers.perplexity.description',
       description: 'perplexity.ai',
       icon: 'i-lobe-icons:perplexity',
-      baseUrlDefault: 'https://api.perplexity.ai',
+      defaultOptions: {
+        baseUrl: 'https://api.perplexity.ai',
+      },
       createProvider: config => createPerplexity(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'hardcoded',
-      hardcodedModels: [
-        {
-          id: 'sonar-small-online',
-          name: 'Sonar Small (Online)',
-          provider: 'perplexity-ai',
-          description: 'Efficient model with online search capabilities',
-          contextLength: 12000,
+      capabilities: {
+        listModels: async () => {
+          return [
+            {
+              id: 'sonar-small-online',
+              name: 'Sonar Small (Online)',
+              provider: 'perplexity-ai',
+              description: 'Efficient model with online search capabilities',
+              contextLength: 12000,
+            },
+            {
+              id: 'sonar-medium-online',
+              name: 'Sonar Medium (Online)',
+              provider: 'perplexity-ai',
+              description: 'Balanced model with online search capabilities',
+              contextLength: 12000,
+            },
+            {
+              id: 'sonar-large-online',
+              name: 'Sonar Large (Online)',
+              provider: 'perplexity-ai',
+              description: 'Powerful model with online search capabilities',
+              contextLength: 12000,
+            },
+            {
+              id: 'codey-small',
+              name: 'Codey Small',
+              provider: 'perplexity-ai',
+              description: 'Specialized for code generation and understanding',
+              contextLength: 12000,
+            },
+            {
+              id: 'codey-large',
+              name: 'Codey Large',
+              provider: 'perplexity-ai',
+              description: 'Advanced code generation and understanding',
+              contextLength: 12000,
+            },
+          ]
         },
-        {
-          id: 'sonar-medium-online',
-          name: 'Sonar Medium (Online)',
-          provider: 'perplexity-ai',
-          description: 'Balanced model with online search capabilities',
-          contextLength: 12000,
-        },
-        {
-          id: 'sonar-large-online',
-          name: 'Sonar Large (Online)',
-          provider: 'perplexity-ai',
-          description: 'Powerful model with online search capabilities',
-          contextLength: 12000,
-        },
-        {
-          id: 'codey-small',
-          name: 'Codey Small',
-          provider: 'perplexity-ai',
-          description: 'Specialized for code generation and understanding',
-          contextLength: 12000,
-        },
-        {
-          id: 'codey-large',
-          name: 'Codey Large',
-          provider: 'perplexity-ai',
-          description: 'Advanced code generation and understanding',
-          contextLength: 12000,
-        },
-      ],
+      },
     },
     'elevenlabs': {
       id: 'elevenlabs',
@@ -225,19 +299,19 @@ export const useProvidersStore = defineStore('providers', () => {
       descriptionKey: 'providers.elevenlabs.description',
       description: 'elevenlabs.io',
       icon: 'i-simple-icons:elevenlabs',
-      baseUrlDefault: 'https://unspeech.hyp3r.link/v1/',
+      defaultOptions: {
+        baseUrl: 'https://unspeech.hyp3r.link/v1/',
+      },
       // TODO: UnElevenLabsOptions
       createProvider: config => createUnElevenLabs(config.apiKey as string, config.baseUrl as string) as SpeechProviderWithExtraOptions<string, any>,
-      modelSelectionType: 'hardcoded',
-      hardcodedModels: [
-        {
-          id: 'sonar-small-online',
-          name: 'Sonar Small (Online)',
-          provider: 'perplexity-ai',
-          description: 'Efficient model with online search capabilities',
-          contextLength: 12000,
+      capabilities: {
+        listModels: async () => {
+          return []
         },
-      ],
+        listVoices: async () => {
+          return []
+        },
+      },
     },
     'xai': {
       id: 'xai',
@@ -247,7 +321,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'x.ai',
       icon: 'i-lobe-icons:xai',
       createProvider: config => createXAI(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createXAI(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'xai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'deepseek': {
       id: 'deepseek',
@@ -257,7 +346,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'deepseek.com',
       iconColor: 'i-lobe-icons:deepseek-color',
       createProvider: config => createDeepSeek(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createDeepSeek(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'deepseek',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'together-ai': {
       id: 'together-ai',
@@ -267,7 +371,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'together.ai',
       iconColor: 'i-lobe-icons:together-color',
       createProvider: config => createTogetherAI(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createTogetherAI(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'together-ai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'novita-ai': {
       id: 'novita-ai',
@@ -277,7 +396,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'novita.ai',
       iconColor: 'i-lobe-icons:novita-color',
       createProvider: config => createNovita(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createNovita(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'novita-ai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'fireworks-ai': {
       id: 'fireworks-ai',
@@ -287,7 +421,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'fireworks.ai',
       icon: 'i-lobe-icons:fireworks',
       createProvider: config => createFireworks(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createFireworks(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'fireworks-ai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'cloudflare-workers-ai': {
       id: 'cloudflare-workers-ai',
@@ -297,7 +446,11 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'cloudflare.com',
       iconColor: 'i-lobe-icons:cloudflare-color',
       createProvider: config => createWorkersAI(config.apiKey as string, config.accountId as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async () => {
+          return []
+        },
+      },
     },
     'mistral-ai': {
       id: 'mistral-ai',
@@ -307,7 +460,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'mistral.ai',
       iconColor: 'i-lobe-icons:mistral-color',
       createProvider: config => createMistral(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createMistral(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'mistral-ai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
     'moonshot-ai': {
       id: 'moonshot-ai',
@@ -317,7 +485,22 @@ export const useProvidersStore = defineStore('providers', () => {
       description: 'moonshot.ai',
       icon: 'i-lobe-icons:moonshot',
       createProvider: config => createMoonshot(config.apiKey as string, config.baseUrl as string),
-      modelSelectionType: 'dynamic',
+      capabilities: {
+        listModels: async (config) => {
+          return (await listModels({
+            ...createMoonshot(config.apiKey as string, config.baseUrl as string).model(),
+          })).map((model) => {
+            return {
+              id: model.id,
+              name: model.id,
+              provider: 'moonshot-ai',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            } satisfies ModelInfo
+          })
+        },
+      },
     },
   }
 
@@ -367,7 +550,7 @@ export const useProvidersStore = defineStore('providers', () => {
     if (!providerCredentials.value[providerId]) {
       const metadata = providerMetadata[providerId]
       providerCredentials.value[providerId] = {
-        baseUrl: metadata.baseUrlDefault || '',
+        baseUrl: metadata.defaultOptions?.baseUrl || '',
       }
     }
   }
@@ -398,17 +581,6 @@ export const useProvidersStore = defineStore('providers', () => {
   const isLoadingModels = ref<Record<string, boolean>>({})
   const modelLoadError = ref<Record<string, string | null>>({})
 
-  // Check if a provider supports model listing (any type)
-  function supportsModelListing(providerId: string): boolean {
-    const metadata = providerMetadata[providerId]
-    if (!metadata)
-      return false
-
-    return metadata.modelSelectionType === 'dynamic'
-      || metadata.modelSelectionType === 'manual'
-      || (metadata.modelSelectionType === 'hardcoded' && !!metadata.hardcodedModels?.length)
-  }
-
   // Function to fetch models for a specific provider
   async function fetchModelsForProvider(providerId: string) {
     const config = providerCredentials.value[providerId]
@@ -423,49 +595,14 @@ export const useProvidersStore = defineStore('providers', () => {
     modelLoadError.value[providerId] = null
 
     try {
-      // Handle different model selection types
-      switch (metadata.modelSelectionType) {
-        case 'dynamic':
-          if (!metadata.createProvider) {
-            throw new Error(`Provider ${providerId} has no createProvider function`)
-          }
+      const models = metadata.capabilities.listModels ? await metadata.capabilities.listModels(config) : []
 
-          const providerInstance = metadata.createProvider(config)
-
-          // Check if provider supports model listing
-          if (!('model' in providerInstance && typeof providerInstance.model === 'function')) {
-            throw new Error(`Provider ${providerId} does not support model listing`)
-          }
-
-          // Get models using the provider's model() function
-          const models = await listModels(providerInstance.model())
-
-          // Transform and store the models
-          availableModels.value[providerId] = models.map(model => ({
-            id: model.id,
-            name: model.id,
-            provider: providerId,
-          }))
-          break
-
-        case 'manual':
-          if (!metadata.fetchModelsManually) {
-            throw new Error(`Provider ${providerId} has no fetchModelsManually function`)
-          }
-
-          // Use custom fetch function
-          availableModels.value[providerId] = await metadata.fetchModelsManually(config)
-          break
-
-        case 'hardcoded':
-          if (!metadata.hardcodedModels) {
-            throw new Error(`Provider ${providerId} has no hardcodedModels defined`)
-          }
-
-          // Use hardcoded models
-          availableModels.value[providerId] = metadata.hardcodedModels
-          break
-      }
+      // Transform and store the models
+      availableModels.value[providerId] = models.map(model => ({
+        id: model.id,
+        name: model.id,
+        provider: providerId,
+      }))
 
       return availableModels.value[providerId]
     }
@@ -496,7 +633,7 @@ export const useProvidersStore = defineStore('providers', () => {
   // Load models for all configured providers
   async function loadModelsForConfiguredProviders() {
     for (const providerId of availableProviders.value) {
-      if (supportsModelListing(providerId)) {
+      if (providerMetadata[providerId].capabilities.listModels) {
         await fetchModelsForProvider(providerId)
       }
     }
@@ -568,7 +705,6 @@ export const useProvidersStore = defineStore('providers', () => {
     getModelsForProvider,
     allAvailableModels,
     loadModelsForConfiguredProviders,
-    supportsModelListing,
     getProviderInstance,
     availableProvidersMetadata,
   }