feat: add OpenAI support for bio translation (#1522)

src/components/dialogs/UserDialog/UserDialog.vue

@@ -238,6 +238,8 @@
                                         v-if="translationApi && userDialog.ref.bio"
                                         text
                                         size="small"
+                                        :loading="translateLoading"
+                                        :disabled="translateLoading"
                                         style="margin-left: 5px; padding: 0"
                                         @click="translateBio"
                                         ><i class="ri-translate-2"></i
@@ -1405,7 +1407,8 @@
     const { t } = useI18n();
 
     const { hideUserNotes, hideUserMemos } = storeToRefs(useAppearanceSettingsStore());
-    const { bioLanguage, avatarRemoteDatabase, translationApi } = storeToRefs(useAdvancedSettingsStore());
+    const { bioLanguage, avatarRemoteDatabase, translationApi, translationApiType } =
+        storeToRefs(useAdvancedSettingsStore());
     const { translateText } = useAdvancedSettingsStore();
     const { userDialog, languageDialog, currentUser, isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
     const {
@@ -1516,6 +1519,8 @@
         bioLinks: []
     });
 
+    const translateLoading = ref(false);
+
     const pronounsDialog = ref({
         visible: false,
         loading: false,
@@ -2405,8 +2410,10 @@
             return;
         }
 
+        translateLoading.value = true;
         try {
-            const translated = await translateText(bio + '\n\nTranslated by Google', targetLang);
+            const providerLabel = translationApiType.value === 'openai' ? 'OpenAI' : 'Google';
+            const translated = await translateText(`${bio}\n\nTranslated by ${providerLabel}`, targetLang);
             if (!translated) {
                 throw new Error('No translation returned');
             }
@@ -2416,6 +2423,8 @@
             userDialog.value.ref.bio = translated;
         } catch (err) {
             console.error('Translation failed:', err);
+        } finally {
+            translateLoading.value = false;
         }
     }
 

src/localization/en.json

@@ -728,7 +728,7 @@
                         "enable_tooltip": "Fetches video titles for use with gameLog and duration for overlay progress bar"
                     },
                     "translation_api": {
-                        "header": "Google Translate API",
+                        "header": "Bio Translate API",
                         "enable": "Enable",
                         "translation_api_key": "Google Translate API Key",
                         "enable_tooltip": "Translate user bios"
@@ -1407,11 +1407,26 @@
             "save": "Save"
         },
         "translation_api": {
-            "header": "Google Translate API",
+            "header": "Bio Translation API",
             "description": "Enter your Google translate API Key",
             "placeholder": "Google Translate API Key",
             "guide": "Guide",
-            "save": "Save"
+            "mode": "Provider",
+            "mode_google": "Google Translate",
+            "mode_openai": "OpenAI",
+            "test": "Test",
+            "msg_disabled": "Translation API disabled",
+            "msg_fill_endpoint_model": "Please fill endpoint and model",
+            "msg_settings_invalid": "Translation settings invalid",
+            "msg_settings_saved": "Translation settings saved",
+            "msg_test_success": "Test succeeded",
+            "msg_test_failed": "Test failed",
+            "openai": {
+                "endpoint": "API Endpoint",
+                "api_key": "API Key (Optional)",
+                "model": "Model Name",
+                "prompt_optional": "Prompt (Optional)"
+            }
         },
         "set_world_tags": {
             "header": "Set World Tags",

src/localization/zh-CN.json

@@ -727,7 +727,7 @@
                         "enable_tooltip": "获取视频标题以供日志记录使用，会一并获取进度条的时间"
                     },
                     "translation_api": {
-                        "header": "Google 翻译 API",
+                        "header": "自我介绍翻译 API",
                         "enable": "启用",
                         "translation_api_key": "输入 API 密钥",
                         "enable_tooltip": "用于翻译玩家的个人简介"
@@ -1406,7 +1406,7 @@
             "save": "保存"
         },
         "translation_api": {
-            "header": "Google 翻译 API",
+            "header": "自我介绍翻译 API",
             "description": "输入你的 Google 翻译 API 密钥",
             "placeholder": "输入形如“AIzaSy......”的密钥",
             "guide": "查看教程（英语）",

src/stores/settings/advanced.js

@@ -44,6 +44,12 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     const youTubeApiKey = ref('');
     const translationApi = ref(false);
     const translationApiKey = ref('');
+    const translationApiType = ref('google'); // 'google' | 'openai'
+    const translationApiEndpoint = ref(
+        'https://api.openai.com/v1/chat/completions'
+    );
+    const translationApiModel = ref('gpt-4o-mini');
+    const translationApiPrompt = ref('');
     const progressPie = ref(false);
     const progressPieFilter = ref(true);
     const showConfirmationOnSwitchAvatar = ref(false);
@@ -90,6 +96,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             youTubeApiKeyConfig,
             translationApiConfig,
             translationApiKeyConfig,
+            translationApiTypeConfig,
+            translationApiEndpointConfig,
+            translationApiModelConfig,
+            translationApiPromptConfig,
             progressPieConfig,
             progressPieFilterConfig,
             showConfirmationOnSwitchAvatarConfig,
@@ -131,6 +141,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             configRepository.getString('VRCX_youtubeAPIKey', ''),
             configRepository.getBool('VRCX_translationAPI', false),
             configRepository.getString('VRCX_translationAPIKey', ''),
+            configRepository.getString('VRCX_translationAPIType', 'google'),
+            configRepository.getString('VRCX_translationAPIEndpoint', ''),
+            configRepository.getString('VRCX_translationAPIModel', ''),
+            configRepository.getString('VRCX_translationAPIPrompt', ''),
             configRepository.getBool('VRCX_progressPie', false),
             configRepository.getBool('VRCX_progressPieFilter', true),
             configRepository.getBool(
@@ -178,6 +192,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         youTubeApiKey.value = youTubeApiKeyConfig;
         translationApi.value = translationApiConfig;
         translationApiKey.value = translationApiKeyConfig;
+        translationApiType.value = translationApiTypeConfig;
+        translationApiEndpoint.value = translationApiEndpointConfig;
+        translationApiModel.value = translationApiModelConfig;
+        translationApiPrompt.value = translationApiPromptConfig;
         progressPie.value = progressPieConfig;
         progressPieFilter.value = progressPieFilterConfig;
         showConfirmationOnSwitchAvatar.value =
@@ -344,6 +362,34 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
             translationApiKey.value
         );
     }
+    async function setTranslationApiType(value) {
+        translationApiType.value = value || 'google';
+        await configRepository.setString(
+            'VRCX_translationAPIType',
+            translationApiType.value
+        );
+    }
+    async function setTranslationApiEndpoint(value) {
+        translationApiEndpoint.value = value;
+        await configRepository.setString(
+            'VRCX_translationAPIEndpoint',
+            translationApiEndpoint.value
+        );
+    }
+    async function setTranslationApiModel(value) {
+        translationApiModel.value = value;
+        await configRepository.setString(
+            'VRCX_translationAPIModel',
+            translationApiModel.value
+        );
+    }
+    async function setTranslationApiPrompt(value) {
+        translationApiPrompt.value = value;
+        await configRepository.setString(
+            'VRCX_translationAPIPrompt',
+            translationApiPrompt.value
+        );
+    }
     function setBioLanguage(language) {
         bioLanguage.value = language;
         configRepository.setString('VRCX_bioLanguage', language);
@@ -586,39 +632,121 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         return data;
     }
 
-    async function translateText(text, targetLang) {
+    async function translateText(text, targetLang, overrides) {
-        if (!translationApiKey.value) {
+        if (!translationApi.value) {
             ElMessage({
-                message: 'No Translation API key configured',
+                message: 'Translation API disabled',
                 type: 'warning'
             });
             return null;
         }
 
+        const provider =
+            overrides?.type || translationApiType.value || 'google';
+
+        if (provider === 'google') {
+            const keyToUse = overrides?.key ?? translationApiKey.value;
+            if (!keyToUse) {
+                ElMessage({
+                    message: 'No Translation API key configured',
+                    type: 'warning'
+                });
+                return null;
+            }
+            try {
+                const response = await webApiService.execute({
+                    url: `https://translation.googleapis.com/language/translate/v2?key=${keyToUse}`,
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        Referer: 'https://vrcx.app'
+                    },
+                    body: JSON.stringify({
+                        q: text,
+                        target: targetLang,
+                        format: 'text'
+                    })
+                });
+                if (response.status !== 200) {
+                    throw new Error(
+                        `Translation API error: ${response.status} - ${response.data}`
+                    );
+                }
+                const data = JSON.parse(response.data);
+                if (AppDebug.debugWebRequests) {
+                    console.log(data, response);
+                }
+                return data.data.translations[0].translatedText;
+            } catch (err) {
+                ElMessage({
+                    message: `Translation failed: ${err.message}`,
+                    type: 'error'
+                });
+                return null;
+            }
+        }
+
+        const endpoint =
+            overrides?.endpoint ||
+            translationApiEndpoint.value ||
+            'https://api.openai.com/v1/chat/completions';
+        const model =
+            overrides?.model || translationApiModel.value || 'gpt-5.1';
+        const prompt =
+            overrides?.prompt ||
+            translationApiPrompt.value ||
+            `You are a translation assistant. Translate the user message into ${targetLang}. Only return the translated text.`;
+
+        if (!endpoint || !model) {
+            ElMessage({
+                message: 'Translation endpoint/model missing',
+                type: 'warning'
+            });
+            return null;
+        }
+
+        const headers = {
+            'Content-Type': 'application/json',
+            Referer: 'https://vrcx.app'
+        };
+        const keyToUse = overrides?.key ?? translationApiKey.value;
+        if (keyToUse) {
+            headers.Authorization = `Bearer ${keyToUse}`;
+        }
+
         try {
             const response = await webApiService.execute({
-                url: `https://translation.googleapis.com/language/translate/v2?key=${translationApiKey.value}`,
+                url: endpoint,
                 method: 'POST',
-                headers: {
+                headers,
-                    'Content-Type': 'application/json',
-                    Referer: 'https://vrcx.app'
-                },
                 body: JSON.stringify({
-                    q: text,
+                    model,
-                    target: targetLang,
+                    messages: [
-                    format: 'text'
+                        {
+                            role: 'system',
+                            content: prompt
+                        },
+                        {
+                            role: 'user',
+                            content: text
+                        }
+                    ]
                 })
             });
+
             if (response.status !== 200) {
                 throw new Error(
                     `Translation API error: ${response.status} - ${response.data}`
                 );
             }
+
             const data = JSON.parse(response.data);
             if (AppDebug.debugWebRequests) {
                 console.log(data, response);
             }
-            return data.data.translations[0].translatedText;
+
+            const translated = data?.choices?.[0]?.message?.content;
+            return typeof translated === 'string' ? translated.trim() : null;
         } catch (err) {
             ElMessage({
                 message: `Translation failed: ${err.message}`,
@@ -834,6 +962,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         translationApi,
         youTubeApiKey,
         translationApiKey,
+        translationApiType,
+        translationApiEndpoint,
+        translationApiModel,
+        translationApiPrompt,
         progressPie,
         progressPieFilter,
         showConfirmationOnSwitchAvatar,
@@ -869,6 +1001,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
         setTranslationApi,
         setYouTubeApiKey,
         setTranslationApiKey,
+        setTranslationApiType,
+        setTranslationApiEndpoint,
+        setTranslationApiModel,
+        setTranslationApiPrompt,
         setProgressPie,
         setProgressPieFilter,
         setShowConfirmationOnSwitchAvatar,

src/views/Settings/dialogs/TranslationApiDialog.vue

@@ -26,20 +26,65 @@
             </el-dropdown>
         </div>
         <br />
-        <div style="font-size: 12px">{{ t('dialog.translation_api.description') }} <br /></div>
+        <el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px">
+            <el-form-item :label="t('dialog.translation_api.mode')">
+                <el-select v-model="form.translationApiType" style="width: 100%">
+                    <el-option value="google" :label="t('dialog.translation_api.mode_google')" />
+                    <el-option value="openai" :label="t('dialog.translation_api.mode_openai')" />
+                </el-select>
+            </el-form-item>
+        </el-form>
 
-        <el-input
+        <template v-if="form.translationApiType === 'google'">
-            v-model="translationApiKey"
+            <div style="font-size: 12px">{{ t('dialog.translation_api.description') }} <br /></div>
-            type="textarea"
+
-            :placeholder="t('dialog.translation_api.placeholder')"
+            <el-input
-            maxlength="39"
+                v-model="form.translationApiKey"
-            show-word-limit
+                type="textarea"
-            style="display: block; margin-top: 10px">
+                :placeholder="t('dialog.translation_api.placeholder')"
-        </el-input>
+                maxlength="39"
+                show-word-limit
+                style="display: block; margin-top: 10px">
+            </el-input>
+        </template>
+
+        <template v-if="form.translationApiType === 'openai'">
+            <el-form label-position="top" label-width="120px" size="small">
+                <el-form-item :label="t('dialog.translation_api.openai.endpoint')">
+                    <el-input
+                        v-model="form.translationApiEndpoint"
+                        placeholder="https://api.openai.com/v1/chat/completions"
+                        clearable
+                        textarea />
+                </el-form-item>
+
+                <el-form-item :label="t('dialog.translation_api.openai.api_key')">
+                    <el-input
+                        v-model="form.translationApiKey"
+                        type="textarea"
+                        :rows="4"
+                        show-password
+                        placeholder="sk-..."
+                        clearable />
+                </el-form-item>
+
+                <el-form-item :label="t('dialog.translation_api.openai.model')">
+                    <el-input v-model="form.translationApiModel" clearable />
+                </el-form-item>
+
+                <el-form-item :label="t('dialog.translation_api.openai.prompt_optional')">
+                    <el-input v-model="form.translationApiPrompt" type="textarea" :rows="3" clearable />
+                </el-form-item>
+            </el-form>
+        </template>
 
         <template #footer>
             <div style="display: flex">
+                <el-button v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation" plain>
+                    {{ t('dialog.translation_api.test') }}
+                </el-button>
                 <el-button
+                    v-if="form.translationApiType === 'google'"
                     @click="
                         openExternalLink(
                             'https://translatepress.com/docs/automatic-translation/generate-google-api-key/'
@@ -47,7 +92,7 @@
                     ">
                     {{ t('dialog.translation_api.guide') }}
                 </el-button>
-                <el-button type="primary" style="margin-left: auto" @click="testTranslationApiKey">
+                <el-button type="primary" style="margin-left: auto" @click="saveTranslationApiConfig">
                     {{ t('dialog.translation_api.save') }}
                 </el-button>
             </div>
@@ -56,6 +101,7 @@
 </template>
 
 <script setup>
+    import { reactive, watch } from 'vue';
     import { ArrowDown } from '@element-plus/icons-vue';
     import { ElMessage } from 'element-plus';
     import { storeToRefs } from 'pinia';
@@ -66,13 +112,28 @@
 
     const advancedSettingsStore = useAdvancedSettingsStore();
 
-    const { bioLanguage, translationApiKey } = storeToRefs(advancedSettingsStore);
+    const {
+        bioLanguage,
+        translationApiKey,
+        translationApiType,
+        translationApiEndpoint,
+        translationApiModel,
+        translationApiPrompt
+    } = storeToRefs(advancedSettingsStore);
 
-    const { setBioLanguage, translateText, setTranslationApiKey } = advancedSettingsStore;
+    const {
+        setBioLanguage,
+        translateText,
+        setTranslationApiKey,
+        setTranslationApiType,
+        setTranslationApiEndpoint,
+        setTranslationApiModel,
+        setTranslationApiPrompt
+    } = advancedSettingsStore;
 
     const { messages, t } = useI18n();
 
-    defineProps({
+    const props = defineProps({
         isTranslationApiDialogVisible: {
             type: Boolean,
             default: false
@@ -81,32 +142,97 @@
 
     const emit = defineEmits(['update:isTranslationApiDialogVisible']);
 
-    async function testTranslationApiKey() {
+    const form = reactive({
-        const previousKey = translationApiKey.value;
+        translationApiType: 'google',
-        if (!translationApiKey.value) {
+        translationApiEndpoint: 'https://api.openai.com/v1/chat/completions',
+        translationApiModel: '',
+        translationApiPrompt: '',
+        translationApiKey: ''
+    });
+
+    const loadFormFromStore = () => {
+        form.translationApiType = translationApiType.value || 'google';
+        form.translationApiEndpoint = translationApiEndpoint.value || 'https://api.openai.com/v1/chat/completions';
+        form.translationApiModel = translationApiModel.value || '';
+        form.translationApiPrompt = translationApiPrompt.value || '';
+        form.translationApiKey = translationApiKey.value || '';
+    };
+
+    watch(
+        () => props.isTranslationApiDialogVisible,
+        (visible) => {
+            if (visible) {
+                loadFormFromStore();
+            }
+        },
+        { immediate: true }
+    );
+
+    async function saveTranslationApiConfig() {
+        if (form.translationApiType === 'openai') {
+            if (!form.translationApiEndpoint || !form.translationApiModel) {
+                ElMessage({
+                    message: t('dialog.translation_api.msg_fill_endpoint_model'),
+                    type: 'warning'
+                });
+                return;
+            }
+        }
+
+        await Promise.all([
+            setTranslationApiType(form.translationApiType),
+            setTranslationApiEndpoint(form.translationApiEndpoint),
+            setTranslationApiModel(form.translationApiModel),
+            setTranslationApiPrompt(form.translationApiPrompt),
+            setTranslationApiKey(form.translationApiKey)
+        ]);
+
+        ElMessage({
+            message: t('dialog.translation_api.msg_settings_saved'),
+            type: 'success'
+        });
+        closeDialog();
+    }
+
+    async function testOpenAiTranslation() {
+        if (form.translationApiType !== 'openai') {
+            return;
+        }
+        if (!form.translationApiEndpoint || !form.translationApiModel) {
             ElMessage({
-                message: 'Translation API key removed',
+                message: t('dialog.translation_api.msg_fill_endpoint_model'),
-                type: 'success'
+                type: 'warning'
             });
-            closeDialog();
             return;
         }
 
-        const testText = 'Hello world';
+        try {
-        const data = await translateText(testText, 'fr');
+            const testText = 'Hello world';
-        if (!data) {
+            const data = await translateText(testText, 'fr', {
-            setTranslationApiKey(previousKey);
+                type: form.translationApiType,
+                endpoint: form.translationApiEndpoint,
+                model: form.translationApiModel,
+                prompt: form.translationApiPrompt,
+                key: form.translationApiKey
+            });
+            if (data) {
+                ElMessage({
+                    message: t('dialog.translation_api.msg_test_success'),
+                    type: 'success'
+                });
+            } else {
+                console.error('[TranslationAPI] Test returned empty result');
+                ElMessage({
+                    message: t('dialog.translation_api.msg_test_failed'),
+                    type: 'error'
+                });
+            }
+        } catch (err) {
+            console.error('[TranslationAPI] Test failed', err);
             ElMessage({
-                message: 'Invalid Translation API key',
+                message: t('dialog.translation_api.msg_test_failed'),
                 type: 'error'
             });
-        } else {
-            setTranslationApiKey(translationApiKey.value);
-            ElMessage({
-                message: 'Translation API key valid!',
-                type: 'success'
-            });
-            closeDialog();
         }
     }