fix(stage-*): unable to test voice with openai and cosyvoice-v2 in speech module (#579)

apps/stage-web/src/pages/settings/modules/speech.vue

@@ -319,7 +319,9 @@ function updateCustomModelName(value: string) {
             <VoiceCardManySelect
               v-model:search-query="voiceSearchQuery"
               v-model:voice-id="activeSpeechVoiceId"
-              :voices="availableVoices[activeSpeechProvider]?.map(voice => ({
+              :voices="availableVoices[activeSpeechProvider]?.filter(voice => {
+                return !voice.compatibleModels || voice.compatibleModels.includes(activeSpeechModel)
+              }).map(voice => ({
                 id: voice.id,
                 name: voice.name,
                 description: voice.description,
@@ -331,6 +333,8 @@ function updateCustomModelName(value: string) {
               :search-no-results-title="t('settings.pages.modules.speech.sections.section.provider-voice-selection.no_voices')"
               :search-no-results-description="t('settings.pages.modules.speech.sections.section.provider-voice-selection.no_voices_description')"
               :search-results-text="t('settings.pages.modules.speech.sections.section.provider-voice-selection.search_voices_results', { count: 0, total: 0 })"
+              :unsupported-voice-warning-title="t('settings.pages.modules.speech.sections.section.provider-voice-selection.unsupported_voice_warning_title')"
+              :unsupported-voice-warning-content="t('settings.pages.modules.speech.sections.section.provider-voice-selection.unsupported_voice_warning_content')"
               :custom-input-placeholder="t('settings.pages.modules.speech.sections.section.provider-voice-selection.custom_voice_placeholder')"
               :expand-button-text="t('settings.pages.modules.speech.sections.section.provider-voice-selection.show_more')"
               :collapse-button-text="t('settings.pages.modules.speech.sections.section.provider-voice-selection.show_less')"

packages/i18n/src/locales/en/settings.yaml

@@ -239,6 +239,8 @@ pages:
             search_models_results: Found {count} of {total} models
             search_voices_placeholder: Search voices...
             search_voices_results: Found {count} of {total} voices
+            unsupported_voice_warning_title: No supported voices
+            unsupported_voice_warning_content: Try a different model or provider. We are working on supporting all the voice for this model as quickly as possible. If you need it urgently, please let us know on GitHub at https://github.com/moeru-ai/airi/issues.
             show_less: Show less
             show_more: Show more
             title: Provider

packages/i18n/src/locales/zh-Hans/settings.yaml

@@ -214,6 +214,8 @@ pages:
             search_models_results: 找到 {count} / {total} 个模型
             search_voices_placeholder: 搜索声线...
             search_voices_results: 找到 {count} / {total} 个声线
+            unsupported_voice_warning_title: 没有支持的声线
+            unsupported_voice_warning_content: 我们正在尽快支持该模型的所有音色，如果你迫切希望支持该模型音色，请在 GitHub 上联系我们 https://github.com/moeru-ai/airi/issues
             show_less: 显示更少
             show_more: 显示更多
             title: 选择语音合成服务来源

packages/stage-ui/src/components/Menu/VoiceCard.vue

@@ -151,7 +151,7 @@ function togglePlayback() {
           v-else
           class="mt-auto w-full flex items-center justify-center bg-neutral-50 py-3 text-xs text-neutral-400 italic dark:bg-neutral-800/50 dark:text-neutral-600"
         >
-          No preview available
+          No preview available. You can select it and test voice on the right experiment.
         </div>
 
         <!-- Voice info -->

packages/stage-ui/src/components/Menu/VoiceCardManySelect.vue

@@ -34,6 +34,8 @@ interface Props {
   searchNoResultsTitle?: string
   searchNoResultsDescription?: string
   searchResultsText?: string
+  unsupportedVoiceWarningTitle?: string
+  unsupportedVoiceWarningContent?: string
   customInputPlaceholder?: string
   expandButtonText?: string
   collapseButtonText?: string
@@ -49,6 +51,8 @@ const props = withDefaults(defineProps<Props>(), {
   searchNoResultsTitle: 'No voices found',
   searchNoResultsDescription: 'Try a different search term',
   searchResultsText: '{count} of {total} voices',
+  unsupportedVoiceWarningTitle: 'No voices',
+  unsupportedVoiceWarningContent: 'Try a different model or provider. We are working on supporting all the voice for this model as quickly as possible. If you need it urgently, please let us know on GitHub.',
   customInputPlaceholder: 'Enter custom voice name',
   expandButtonText: 'Show more',
   collapseButtonText: 'Show less',
@@ -350,6 +354,16 @@ const customVoiceName = ref('')
           transition="all duration-200 ease-in-out"
           style="scroll-snap-type: x mandatory;"
         >
+          <!-- Not support voices warning -->
+          <Alert v-if="!searchQuery && filteredVoices.length === 0" type="warning">
+            <template #title>
+              {{ unsupportedVoiceWarningTitle }}
+            </template>
+            <template #content>
+              {{ unsupportedVoiceWarningContent }}
+            </template>
+          </Alert>
+
           <!-- Voice card with preview button -->
           <VoiceCard
             v-for="voice in filteredVoices"

packages/stage-ui/src/stores/providers.ts

@@ -153,6 +153,7 @@ export interface VoiceInfo {
   id: string
   name: string
   provider: string
+  compatibleModels?: string[]
   description?: string
   gender?: string
   deprecated?: boolean
@@ -769,69 +770,100 @@ export const useProvidersStore = defineStore('providers', () => {
               name: 'Alloy',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'ash',
               name: 'Ash',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'ballad',
               name: 'Ballad',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'coral',
               name: 'Coral',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'echo',
               name: 'Echo',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'fable',
               name: 'Fable',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'onyx',
               name: 'Onyx',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'nova',
               name: 'Nova',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'sage',
               name: 'Sage',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'shimmer',
               name: 'Shimmer',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
             {
               id: 'verse',
               name: 'Verse',
               provider: 'openai-audio-speech',
               languages: [],
+              compatibleModels: ['tts-1', 'tts-1-hd'],
             },
           ] satisfies VoiceInfo[]
         },
+        listModels: async () => {
+          return [
+            {
+              id: 'tts-1',
+              name: 'TTS-1',
+              provider: 'openai-audio-speech',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            },
+            {
+              id: 'tts-1-hd',
+              name: 'TTS-1-HD',
+              provider: 'openai-audio-speech',
+              description: '',
+              contextLength: 0,
+              deprecated: false,
+            },
+          ]
+        },
       },
       validators: {
         validateProviderConfig: (config) => {
@@ -1244,6 +1276,7 @@ export const useProvidersStore = defineStore('providers', () => {
               id: voice.id,
               name: voice.name,
               provider: 'alibaba-cloud-model-studio',
+              compatibleModels: voice.compatible_models,
               previewURL: voice.preview_audio_url,
               languages: voice.languages,
               gender: voice.labels?.gender,