MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

OpenAI api add Fetch Models (#1625)

Browse Source 
* 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
This commit is contained in:
laomo
2026-02-02 19:56:07 +08:00
committed by GitHub
parent 918d1f0960
commit c9e7dd24a4
4 changed files with 206 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/dialogs/WorldDialog/WorldDialog.vue
View File

@@ -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"
>{{ worldDialog.ref.description }}</span
style="font-size: 12px; flex: 1; margin-right: 0.5em"
>{{ 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>

8
src/localization/en.json
View File

@@ -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",

71
src/stores/settings/advanced.js
View File

@@ -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,

78
src/views/Settings/dialogs/TranslationApiDialog.vue
View File

@@ -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
variant="outline"
v-if="form.translationApiType === 'openai'"
@click="testOpenAiTranslation">
<Button 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;