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

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

Browse Source
This commit is contained in:
pa
2025-12-07 15:21:05 +09:00
committed by Natsumi
parent 5443bf2c04
commit 5981ec772e
5 changed files with 336 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/dialogs/UserDialog/UserDialog.vue
View File

@@ -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;
}
}

21
src/localization/en.json
View File

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

4
src/localization/zh-CN.json
View File

@@ -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": "查看教程（英语）",

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

@@ -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) {
if (!translationApiKey.value) {
async function translateText(text, targetLang, overrides) {
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: {
'Content-Type': 'application/json',
Referer: 'https://vrcx.app'
},
headers,
body: JSON.stringify({
q: text,
target: targetLang,
format: 'text'
model,
messages: [
{
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,

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

@@ -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
v-model="translationApiKey"
type="textarea"
:placeholder="t('dialog.translation_api.placeholder')"
maxlength="39"
show-word-limit
style="display: block; margin-top: 10px">
</el-input>
<template v-if="form.translationApiType === 'google'">
<div style="font-size: 12px">{{ t('dialog.translation_api.description') }} <br /></div>
<el-input
v-model="form.translationApiKey"
type="textarea"
:placeholder="t('dialog.translation_api.placeholder')"
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 previousKey = translationApiKey.value;
if (!translationApiKey.value) {
const form = reactive({
translationApiType: 'google',
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',
type: 'success'
message: t('dialog.translation_api.msg_fill_endpoint_model'),
type: 'warning'
});
closeDialog();
return;
}
const testText = 'Hello world';
const data = await translateText(testText, 'fr');
if (!data) {
setTranslationApiKey(previousKey);
try {
const testText = 'Hello world';
const data = await translateText(testText, 'fr', {
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();
}
}