From 967a99f63ddf88b31d8f54ca2de9d22851a549be Mon Sep 17 00:00:00 2001 From: Neko Ayaka Date: Tue, 16 Sep 2025 00:03:28 +0800 Subject: [PATCH] chore(stage-web,stage-tamagotchi): sync providers, fix ollama provider issue --- .../pages/settings/providers/ollama.vue | 2 +- .../src/pages/settings/providers/ollama.vue | 2 +- .../pages/settings/providers/anthropic.vue | 106 ++++------- .../settings/providers/azure-ai-foundry.vue | 79 ++++---- .../providers/cloudflare-workers-ai.vue | 77 ++++---- .../src/pages/settings/providers/deepseek.vue | 79 ++++---- .../settings/providers/featherless-ai.vue | 81 ++++---- .../pages/settings/providers/fireworks-ai.vue | 79 ++++---- .../providers/google-generative-ai.vue | 89 ++++----- .../settings/providers/index-tts-vllm.vue | 55 +++--- .../src/pages/settings/providers/index.vue | 111 +++++++---- .../pages/settings/providers/lm-studio.vue | 180 ++++++------------ .../settings/providers/microsoft-speech.vue | 2 +- .../pages/settings/providers/mistral-ai.vue | 79 ++++---- .../pages/settings/providers/modelscope.vue | 40 ++-- .../pages/settings/providers/moonshot-ai.vue | 81 ++++---- .../pages/settings/providers/novita-ai.vue | 79 ++++---- .../src/pages/settings/providers/ollama.vue | 162 +++++++--------- .../openai-compatible-audio-speech.vue | 83 ++++---- .../openai-compatible-audio-transcription.vue | 109 ++++++----- .../settings/providers/openai-compatible.vue | 85 ++++----- .../src/pages/settings/providers/openai.vue | 89 ++++----- .../settings/providers/openrouter-ai.vue | 82 ++++---- .../settings/providers/player2-speech.vue | 49 +++-- .../src/pages/settings/providers/player2.vue | 47 +++-- .../pages/settings/providers/together-ai.vue | 100 ++++------ .../src/pages/settings/providers/vllm.vue | 79 ++++++++ .../src/pages/settings/providers/xai.vue | 100 ++++------ 28 files changed, 1053 insertions(+), 1153 deletions(-) create mode 100644 apps/stage-web/src/pages/settings/providers/vllm.vue diff --git a/apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/ollama.vue b/apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/ollama.vue index 58e9334be..f979ff1a7 100644 --- a/apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/ollama.vue +++ b/apps/stage-tamagotchi-electron/src/renderer/pages/settings/providers/ollama.vue @@ -40,7 +40,7 @@ const { handleResetSettings, } = useProviderValidation(providerId) -const headers = ref<{ key: string, value: string }[]>(Object.entries(providers.value[providerId]?.headers).map(([key, value]) => ({ key, value } as { key: string, value: string })) || [{ key: '', value: '' }]) +const headers = ref<{ key: string, value: string }[]>(Object.entries(providers.value[providerId]?.headers || {}).map(([key, value]) => ({ key, value } as { key: string, value: string })) || [{ key: '', value: '' }]) function addKeyValue(headers: { key: string, value: string }[], key: string, value: string) { if (!headers) diff --git a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue index 58e9334be..f979ff1a7 100644 --- a/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue +++ b/apps/stage-tamagotchi/src/pages/settings/providers/ollama.vue @@ -40,7 +40,7 @@ const { handleResetSettings, } = useProviderValidation(providerId) -const headers = ref<{ key: string, value: string }[]>(Object.entries(providers.value[providerId]?.headers).map(([key, value]) => ({ key, value } as { key: string, value: string })) || [{ key: '', value: '' }]) +const headers = ref<{ key: string, value: string }[]>(Object.entries(providers.value[providerId]?.headers || {}).map(([key, value]) => ({ key, value } as { key: string, value: string })) || [{ key: '', value: '' }]) function addKeyValue(headers: { key: string, value: string }[], key: string, value: string) { if (!headers) diff --git a/apps/stage-web/src/pages/settings/providers/anthropic.vue b/apps/stage-web/src/pages/settings/providers/anthropic.vue index 186500e7d..b1d86c866 100644 --- a/apps/stage-web/src/pages/settings/providers/anthropic.vue +++ b/apps/stage-web/src/pages/settings/providers/anthropic.vue @@ -2,6 +2,7 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAdvancedSettings, ProviderApiKeyInput, ProviderBaseUrlInput, @@ -9,92 +10,52 @@ import { ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'anthropic' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'anthropic' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) const baseUrl = computed({ - get: () => providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/', + get: () => providers.value[providerId]?.baseUrl || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].baseUrl = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - if (!providers.value[providerId]) { - providers.value[providerId] = { - baseUrl: 'https://api.anthropic.com/v1/', - } - } - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - baseUrl.value = providers.value[providerId]?.baseUrl || 'https://api.anthropic.com/v1/' -}) - -// Watch settings and update the provider configuration -watch([apiKey, baseUrl], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - baseUrl: baseUrl.value || 'https://api.anthropic.com/v1/', - } -}) - -function handleResetSettings() { - providers.value[providerId] = { - baseUrl: 'https://api.anthropic.com/v1/', - } -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) - meta: - layout: settings - stageTransition: - name: slide - +meta: + layout: settings + stageTransition: + name: slide + diff --git a/apps/stage-web/src/pages/settings/providers/azure-ai-foundry.vue b/apps/stage-web/src/pages/settings/providers/azure-ai-foundry.vue index 0f055ac51..f9f1c9f54 100644 --- a/apps/stage-web/src/pages/settings/providers/azure-ai-foundry.vue +++ b/apps/stage-web/src/pages/settings/providers/azure-ai-foundry.vue @@ -2,6 +2,7 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAccountIdInput, ProviderAdvancedSettings, ProviderApiKeyInput, @@ -9,28 +10,21 @@ import { ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'azure-ai-foundry' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'azure-ai-foundry' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) @@ -40,7 +34,6 @@ const resourceName = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].resourceName = value }, }) @@ -50,7 +43,6 @@ const apiVersion = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiVersion = value }, }) @@ -60,44 +52,26 @@ const modelId = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].modelId = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - if (!providers.value[providerId]) { - providers.value[providerId] = {} - } - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - resourceName.value = providers.value[providerId]?.resourceName || '' - apiVersion.value = providers.value[providerId]?.apiVersion || '' - modelId.value = providers.value[providerId]?.modelId || '' -}) - -// Watch settings and update the provider configuration -watch([apiKey, resourceName, apiVersion, modelId], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - resourceName: resourceName.value, - apiVersion: apiVersion.value, - modelId: modelId.value, - } -}) - -function handleResetSettings() { - providers.value[providerId] = {} -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) diff --git a/apps/stage-web/src/pages/settings/providers/cloudflare-workers-ai.vue b/apps/stage-web/src/pages/settings/providers/cloudflare-workers-ai.vue index b6c20aa3a..2bcbe94a8 100644 --- a/apps/stage-web/src/pages/settings/providers/cloudflare-workers-ai.vue +++ b/apps/stage-web/src/pages/settings/providers/cloudflare-workers-ai.vue @@ -2,34 +2,28 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAccountIdInput, ProviderApiKeyInput, ProviderBasicSettings, ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'cloudflare-workers-ai' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'cloudflare-workers-ai' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) @@ -39,34 +33,20 @@ const accountId = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].accountId = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - providersStore.initializeProvider(providerId) - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - accountId.value = providers.value[providerId]?.accountId || '' -}) - -// Watch settings and update the provider configuration -watch([apiKey, accountId], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - accountId: accountId.value, - } -}) - -function handleResetSettings() { - providers.value[providerId] = { - ...(providerMetadata.value?.defaultOptions as any), - } -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) - meta: - layout: settings - stageTransition: - name: slide - +meta: + layout: settings + stageTransition: + name: slide + diff --git a/apps/stage-web/src/pages/settings/providers/deepseek.vue b/apps/stage-web/src/pages/settings/providers/deepseek.vue index 8b679f1af..330b739f5 100644 --- a/apps/stage-web/src/pages/settings/providers/deepseek.vue +++ b/apps/stage-web/src/pages/settings/providers/deepseek.vue @@ -2,6 +2,7 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAdvancedSettings, ProviderApiKeyInput, ProviderBaseUrlInput, @@ -9,28 +10,21 @@ import { ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'deepseek' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'deepseek' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) @@ -40,34 +34,20 @@ const baseUrl = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].baseUrl = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - providersStore.initializeProvider(providerId) - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - baseUrl.value = providers.value[providerId]?.baseUrl || '' -}) - -// Watch settings and update the provider configuration -watch([apiKey, baseUrl], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - baseUrl: baseUrl.value || '', - } -}) - -function handleResetSettings() { - providers.value[providerId] = { - ...(providerMetadata.value?.defaultOptions as any), - } -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) - meta: - layout: settings - stageTransition: - name: slide - +meta: + layout: settings + stageTransition: + name: slide + diff --git a/apps/stage-web/src/pages/settings/providers/featherless-ai.vue b/apps/stage-web/src/pages/settings/providers/featherless-ai.vue index ee5c265ce..9aaa22845 100644 --- a/apps/stage-web/src/pages/settings/providers/featherless-ai.vue +++ b/apps/stage-web/src/pages/settings/providers/featherless-ai.vue @@ -2,6 +2,7 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAdvancedSettings, ProviderApiKeyInput, ProviderBaseUrlInput, @@ -9,28 +10,21 @@ import { ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'featherless-ai' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'featherless-ai' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) @@ -40,40 +34,26 @@ const baseUrl = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].baseUrl = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - providersStore.initializeProvider(providerId) - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - baseUrl.value = providers.value[providerId]?.baseUrl || '' -}) - -// Watch settings and update the provider configuration -watch([apiKey, baseUrl], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - baseUrl: baseUrl.value || '', - } -}) - -function handleResetSettings() { - providers.value[providerId] = { - ...(providerMetadata.value?.defaultOptions as any), - } -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) - meta: - layout: settings - stageTransition: - name: slide - +meta: + layout: settings + stageTransition: + name: slide + diff --git a/apps/stage-web/src/pages/settings/providers/fireworks-ai.vue b/apps/stage-web/src/pages/settings/providers/fireworks-ai.vue index b0376361f..1f7204371 100644 --- a/apps/stage-web/src/pages/settings/providers/fireworks-ai.vue +++ b/apps/stage-web/src/pages/settings/providers/fireworks-ai.vue @@ -2,6 +2,7 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAdvancedSettings, ProviderApiKeyInput, ProviderBaseUrlInput, @@ -9,28 +10,21 @@ import { ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'fireworks-ai' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'fireworks-ai' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) @@ -40,40 +34,26 @@ const baseUrl = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].baseUrl = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - providersStore.initializeProvider(providerId) - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - baseUrl.value = providers.value[providerId]?.baseUrl || '' -}) - -// Watch settings and update the provider configuration -watch([apiKey, baseUrl], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - baseUrl: baseUrl.value || '', - } -}) - -function handleResetSettings() { - providers.value[providerId] = { - ...(providerMetadata.value?.defaultOptions as any), - } -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) - meta: - layout: settings - stageTransition: - name: slide - +meta: + layout: settings + stageTransition: + name: slide + diff --git a/apps/stage-web/src/pages/settings/providers/google-generative-ai.vue b/apps/stage-web/src/pages/settings/providers/google-generative-ai.vue index b8a06a2b7..64cb22a92 100644 --- a/apps/stage-web/src/pages/settings/providers/google-generative-ai.vue +++ b/apps/stage-web/src/pages/settings/providers/google-generative-ai.vue @@ -2,6 +2,7 @@ import type { RemovableRef } from '@vueuse/core' import { + Alert, ProviderAdvancedSettings, ProviderApiKeyInput, ProviderBaseUrlInput, @@ -9,28 +10,21 @@ import { ProviderSettingsContainer, ProviderSettingsLayout, } from '@proj-airi/stage-ui/components' +import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' import { storeToRefs } from 'pinia' -import { computed, onMounted, watch } from 'vue' -import { useI18n } from 'vue-i18n' -import { useRouter } from 'vue-router' +import { computed } from 'vue' -const { t } = useI18n() -const router = useRouter() +const providerId = 'google-generative-ai' const providersStore = useProvidersStore() const { providers } = storeToRefs(providersStore) as { providers: RemovableRef> } -// Get provider metadata -const providerId = 'google-generative-ai' -const providerMetadata = computed(() => providersStore.getProviderMetadata(providerId)) - -// Use computed properties for settings +// Define computed properties for credentials const apiKey = computed({ get: () => providers.value[providerId]?.apiKey || '', set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].apiKey = value }, }) @@ -40,44 +34,26 @@ const baseUrl = computed({ set: (value) => { if (!providers.value[providerId]) providers.value[providerId] = {} - providers.value[providerId].baseUrl = value }, }) -onMounted(() => { - // Initialize provider if it doesn't exist - if (!providers.value[providerId]) { - providers.value[providerId] = { - baseUrl: 'https://api.anthropic.com/v1/', - } - } - - // Initialize refs with current values - apiKey.value = providers.value[providerId]?.apiKey || '' - baseUrl.value = providers.value[providerId]?.baseUrl || 'https://generativelanguage.googleapis.com/v1beta/openai/' -}) - -// Watch settings and update the provider configuration -watch([apiKey, baseUrl], () => { - providers.value[providerId] = { - ...providers.value[providerId], - apiKey: apiKey.value, - baseUrl: baseUrl.value || 'https://generativelanguage.googleapis.com/v1beta/openai/', - } -}) - -function handleResetSettings() { - providers.value[providerId] = { - baseUrl: 'https://generativelanguage.googleapis.com/v1beta/openai/', - } -} +// Use the composable to get validation logic and state +const { + t, + router, + providerMetadata, + isValidating, + isValid, + validationMessage, + handleResetSettings, +} = useProviderValidation(providerId) - meta: - layout: settings - stageTransition: - name: slide - +meta: + layout: settings + stageTransition: + name: slide + diff --git a/apps/stage-web/src/pages/settings/providers/index-tts-vllm.vue b/apps/stage-web/src/pages/settings/providers/index-tts-vllm.vue index bc89aa7cb..97b5516bc 100644 --- a/apps/stage-web/src/pages/settings/providers/index-tts-vllm.vue +++ b/apps/stage-web/src/pages/settings/providers/index-tts-vllm.vue @@ -7,29 +7,36 @@ import { } from '@proj-airi/stage-ui/components' import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech' import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers' -import { storeToRefs } from 'pinia' -import { computed, watch } from 'vue' +import { computed, onMounted, watch } from 'vue' // import { useI18n } from 'vue-i18n' +// const { t } = useI18n() + const providerId = 'index-tts-vllm' const defaultModel = 'IndexTTS-1.5' const speechStore = useSpeechStore() const providersStore = useProvidersStore() -const { providers } = storeToRefs(providersStore) -// const { t } = useI18n() +// const { providers } = storeToRefs(providersStore) // Check if API key is configured // const apiKeyConfigured = computed(() => !!providers.value[providerId]?.apiKey) const apiKeyConfigured = true // Assuming API key is always configured as its not required -// Get available voices for Index TTS +// Get available voices for Index TTS provider const availableVoices = computed(() => { return speechStore.availableVoices[providerId] || [] }) -// Generate speech with IndexTTS-specific parameters -async function handleGenerateSpeech(input: string, voiceId: string, _useSSML: boolean) { +onMounted(async () => { + await speechStore.loadVoicesForProvider(providerId) +}) + +watch([apiKeyConfigured], async () => { + await speechStore.loadVoicesForProvider(providerId) +}) + +async function handleGenerateSpeech(input: string, voiceId: string) { const provider = await providersStore.getProviderInstance(providerId) as SpeechProvider if (!provider) { throw new Error('Failed to initialize speech provider') @@ -41,44 +48,28 @@ async function handleGenerateSpeech(input: string, voiceId: string, _useSSML: bo // Get model from configuration or use default const model = providerConfig.model as string | undefined || defaultModel - // Index TTS doesn't need SSML conversion, but if SSML is provided, use it directly + const options = { + ...providerConfig, + } + return await speechStore.speech( provider, model, input, voiceId, - { - ...providerConfig, - }, + options, ) } - -watch([providers], async () => { - const providerConfig = providersStore.getProviderConfig(providerId) - const providerMetadata = providersStore.getProviderMetadata(providerId) - if (await providerMetadata.validators.validateProviderConfig(providerConfig)) { - await speechStore.loadVoicesForProvider(providerId) - } - else { - console.error('Failed to validate provider config', providerConfig) - } -}, { - immediate: true, -})