OpenAI api add Fetch Models (#1625)

* 1.Added a Fetch Models button for OpenAI-compatible providers to load available models from custom endpoints and select them from a dropdown.

2.Added world description translation support .

* fix

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -150,12 +150,25 @@
                                 </Badge>
                             </template>
                         </div>
-                        <div style="margin-top: 5px">
+                        <div style="margin-top: 5px; display: flex; align-items: center">
                             <span
                                 v-show="worldDialog.ref.name !== worldDialog.ref.description"
-                                style="font-size: 12px"
+                                style="font-size: 12px; flex: 1; margin-right: 0.5em"
-                                >{{ worldDialog.ref.description }}</span
+                                >{{ translatedDescription || worldDialog.ref.description }}</span
                             >
+                            <Button
+                                v-if="
+                                    translationApi &&
+                                    worldDialog.ref.description &&
+                                    worldDialog.ref.name !== worldDialog.ref.description
+                                "
+                                class="w-3 h-6 text-xs"
+                                size="icon-sm"
+                                variant="ghost"
+                                @click="translateDescription">
+                                <Spinner v-if="isTranslating" class="size-1" />
+                                <Languages v-else class="h-3 w-3" />
+                            </Button>
                         </div>
                     </div>
                     <div class="ml-2 mt-12">
@@ -737,6 +750,7 @@
         Flag,
         Home,
         Image,
+        Languages,
         LineChart,
         MessageSquare,
         Monitor,
@@ -777,6 +791,7 @@
         userStatusClass
     } from '../../../shared/utils';
     import {
+        useAdvancedSettingsStore,
         useAppearanceSettingsStore,
         useFavoriteStore,
         useGalleryStore,
@@ -803,6 +818,8 @@
     import InstanceActionBar from '../../InstanceActionBar.vue';
 
     const modalStore = useModalStore();
+    const { translateText } = useAdvancedSettingsStore();
+    const { bioLanguage, translationApi, translationApiType } = storeToRefs(useAdvancedSettingsStore());
 
     const NewInstanceDialog = defineAsyncComponent(() => import('../NewInstanceDialog.vue'));
     const ChangeWorldImageDialog = defineAsyncComponent(() => import('./ChangeWorldImageDialog.vue'));
@@ -839,6 +856,8 @@
     const newInstanceDialogLocationTag = ref('');
     const changeWorldImageDialogVisible = ref(false);
     const previousImageUrl = ref('');
+    const translatedDescription = ref('');
+    const isTranslating = ref(false);
 
     const isDialogVisible = computed({
         get() {
@@ -1336,6 +1355,40 @@
         D.urlList = worldDialog.value.ref?.urlList ?? [];
         D.visible = true;
     }
+
+    async function translateDescription() {
+        if (isTranslating.value) return;
+
+        const description = worldDialog.value.ref.description;
+        if (!description) return;
+
+        // Toggle: if already translated, clear to show original
+        if (translatedDescription.value) {
+            translatedDescription.value = '';
+            return;
+        }
+
+        isTranslating.value = true;
+        try {
+            const translated = await translateText(description, bioLanguage.value);
+            if (!translated) {
+                throw new Error('No translation returned');
+            }
+
+            translatedDescription.value = translated;
+        } catch (error) {
+            console.error('Translation failed:', error);
+        } finally {
+            isTranslating.value = false;
+        }
+    }
+
+    watch(
+        () => worldDialog.value.id,
+        () => {
+            translatedDescription.value = '';
+        }
+    );
 </script>
 
 <style scoped>

src/localization/en.json

@@ -1581,7 +1581,13 @@
                 "api_key": "API Key (Optional)",
                 "model": "Model Name",
                 "prompt_optional": "Prompt (Optional)"
-            }
+            },
+            "fetch_models": "Fetch Models",
+            "fetching_models": "Fetching...",
+            "msg_endpoint_required": "Please fill in the endpoint first",
+            "msg_models_fetched": "Found {count} models",
+            "msg_no_models_found": "No models found",
+            "msg_fetch_models_failed": "Failed to fetch models"
         },
         "set_world_tags": {
             "header": "Set World Tags",

src/stores/settings/advanced.js

@@ -392,6 +392,76 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             translationApiPrompt.value
         );
     }
+
+    async function fetchAvailableModels(overrides = {}) {
+        const baseURL = overrides.endpoint || translationApiEndpoint.value;
+
+        if (!baseURL) {
+            toast.warning('Translation endpoint not configured');
+            return [];
+        }
+
+        const normalizedBaseURL = baseURL.endsWith('/')
+            ? baseURL.slice(0, -1)
+            : baseURL;
+
+        let modelsURL;
+        if (normalizedBaseURL.includes('/chat/completions')) {
+            modelsURL = normalizedBaseURL.replace(
+                /\/chat\/completions$/,
+                '/models'
+            );
+        } else if (normalizedBaseURL.endsWith('/models')) {
+            modelsURL = normalizedBaseURL;
+        } else {
+            modelsURL = `${normalizedBaseURL}/models`;
+        }
+
+        const headers = {};
+        const keyToUse = overrides.key ?? translationApiKey.value;
+        if (keyToUse) {
+            headers.Authorization = `Bearer ${keyToUse}`;
+        }
+
+        try {
+            const response = await webApiService.execute({
+                url: modelsURL,
+                method: 'GET',
+                headers
+            });
+
+            if (response.status !== 200) {
+                throw new Error(
+                    `Failed to fetch models: ${response.status} - ${response.data}`
+                );
+            }
+
+            const data = JSON.parse(response.data);
+            if (AppDebug.debugWebRequests) {
+                console.log('Models API response:', data);
+            }
+
+            if (data.data && Array.isArray(data.data)) {
+                return data.data
+                    .map((model) => model.id)
+                    .filter((id) => id && typeof id === 'string')
+                    .sort();
+            }
+
+            if (Array.isArray(data)) {
+                return data
+                    .map((model) => model.id || model.name)
+                    .filter((id) => id && typeof id === 'string')
+                    .sort();
+            }
+
+            throw new Error('Unexpected API response format');
+        } catch (error) {
+            console.error('Failed to fetch models:', error);
+            toast.error(`Failed to fetch models: ${error.message}`);
+            return [];
+        }
+    }
     function setBioLanguage(language) {
         bioLanguage.value = language;
         configRepository.setString('VRCX_bioLanguage', language);
@@ -969,6 +1039,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         handleSetAppLauncherSettings,
         lookupYouTubeVideo,
         translateText,
+        fetchAvailableModels,
         resetUGCFolder,
         openUGCFolder,
         openUGCFolderSelector,

src/views/Settings/dialogs/TranslationApiDialog.vue

@@ -88,7 +88,44 @@
                     <Field>
                         <FieldLabel>{{ t('dialog.translation_api.openai.model') }}</FieldLabel>
                         <FieldContent>
-                            <InputGroupField v-model="form.translationApiModel" clearable />
+                            <div class="flex gap-2 items-start">
+                                <div class="flex-1">
+                                    <Select
+                                        v-if="availableModels.length > 0"
+                                        :model-value="form.translationApiModel"
+                                        @update:modelValue="(value) => (form.translationApiModel = value)">
+                                        <SelectTrigger size="sm" style="width: 100%">
+                                            <SelectValue :placeholder="t('dialog.translation_api.openai.model')" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectGroup>
+                                                <SelectItem
+                                                    v-for="model in availableModels"
+                                                    :key="model"
+                                                    :value="model">
+                                                    {{ model }}
+                                                </SelectItem>
+                                            </SelectGroup>
+                                        </SelectContent>
+                                    </Select>
+                                    <InputGroupField
+                                        v-else
+                                        v-model="form.translationApiModel"
+                                        clearable
+                                        class="w-full" />
+                                </div>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    @click="fetchModels"
+                                    :disabled="isFetchingModels || !form.translationApiEndpoint">
+                                    {{
+                                        isFetchingModels
+                                            ? t('dialog.translation_api.fetching_models')
+                                            : t('dialog.translation_api.fetch_models')
+                                    }}
+                                </Button>
+                            </div>
                         </FieldContent>
                     </Field>
 
@@ -112,10 +149,7 @@
                     ">
                     {{ t('dialog.translation_api.guide') }}
                 </Button>
-                <Button
+                <Button variant="outline" v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation">
-                    variant="outline"
-                    v-if="form.translationApiType === 'openai'"
-                    @click="testOpenAiTranslation">
                     {{ t('dialog.translation_api.test') }}
                 </Button>
                 <Button @click="saveTranslationApiConfig">
@@ -131,7 +165,7 @@
     import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
     import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
-    import { reactive, watch } from 'vue';
+    import { reactive, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -155,6 +189,7 @@
     const {
         setBioLanguage,
         translateText,
+        fetchAvailableModels,
         setTranslationApiKey,
         setTranslationApiType,
         setTranslationApiEndpoint,
@@ -164,6 +199,9 @@
 
     const { t } = useI18n();
 
+    const isFetchingModels = ref(false);
+    const availableModels = ref([]);
+
     const props = defineProps({
         isTranslationApiDialogVisible: {
             type: Boolean,
@@ -191,6 +229,7 @@
         form.translationApiModel = translationApiModel.value || '';
         form.translationApiPrompt = translationApiPrompt.value || '';
         form.translationApiKey = translationApiKey.value || '';
+        availableModels.value = [];
     };
 
     watch(
@@ -223,6 +262,33 @@
         closeDialog();
     }
 
+    async function fetchModels() {
+        if (!form.translationApiEndpoint) {
+            toast.warning(t('dialog.translation_api.msg_endpoint_required'));
+            return;
+        }
+
+        isFetchingModels.value = true;
+        try {
+            const models = await fetchAvailableModels({
+                endpoint: form.translationApiEndpoint,
+                key: form.translationApiKey
+            });
+
+            if (models && models.length > 0) {
+                availableModels.value = models;
+                toast.success(t('dialog.translation_api.msg_models_fetched', { count: models.length }));
+            } else {
+                availableModels.value = [];
+                toast.warning(t('dialog.translation_api.msg_no_models_found'));
+            }
+        } catch (err) {
+            console.error('[TranslationAPI] Failed to fetch models', err);
+        } finally {
+            isFetchingModels.value = false;
+        }
+    }
+
     async function testOpenAiTranslation() {
         if (form.translationApiType !== 'openai') {
             return;