mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-22 08:13:52 +02:00
326 lines
14 KiB
Vue
326 lines
14 KiB
Vue
<template>
|
|
<Dialog :open="isTranslationApiDialogVisible" @update:open="(open) => (open ? null : closeDialog())">
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{{ t('dialog.translation_api.header') }}</DialogTitle>
|
|
</DialogHeader>
|
|
<div class="options-container-item">
|
|
<span class="name">{{ t('view.settings.appearance.appearance.bio_language') }}</span>
|
|
<Select :model-value="bioLanguage" @update:modelValue="setBioLanguage">
|
|
<SelectTrigger size="sm" style="float: right">
|
|
<SelectValue :placeholder="String(getLanguageName(bioLanguage) || bioLanguage || '')" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem v-for="language in languageCodes" :key="language" :value="language">
|
|
{{ getLanguageName(language) }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<br />
|
|
<FieldGroup class="mb-3">
|
|
<Field>
|
|
<FieldLabel>{{ t('dialog.translation_api.mode') }}</FieldLabel>
|
|
<FieldContent>
|
|
<Select
|
|
:model-value="form.translationApiType"
|
|
@update:modelValue="handleTranslationApiTypeChange">
|
|
<SelectTrigger size="sm" style="width: 100%">
|
|
<SelectValue :placeholder="t('dialog.translation_api.mode')" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
<SelectItem value="google" :text-value="t('dialog.translation_api.mode_google')">
|
|
{{ t('dialog.translation_api.mode_google') }}
|
|
</SelectItem>
|
|
<SelectItem value="openai" :text-value="t('dialog.translation_api.mode_openai')">
|
|
{{ t('dialog.translation_api.mode_openai') }}
|
|
</SelectItem>
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
|
|
<template v-if="form.translationApiType === 'google'">
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel>{{ t('dialog.translation_api.description') }}</FieldLabel>
|
|
<FieldContent>
|
|
<InputGroupField
|
|
v-model="form.translationApiKey"
|
|
type="password"
|
|
show-password
|
|
placeholder="AIzaSy..."
|
|
clearable />
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
</template>
|
|
|
|
<template v-if="form.translationApiType === 'openai'">
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel>{{ t('dialog.translation_api.openai.endpoint') }}</FieldLabel>
|
|
<FieldContent>
|
|
<InputGroupField
|
|
v-model="form.translationApiEndpoint"
|
|
placeholder="https://api.openai.com/v1/chat/completions"
|
|
clearable />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel>{{ t('dialog.translation_api.openai.api_key') }}</FieldLabel>
|
|
<FieldContent>
|
|
<InputGroupField
|
|
v-model="form.translationApiKey"
|
|
type="password"
|
|
show-password
|
|
placeholder="sk-..."
|
|
clearable />
|
|
</FieldContent>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel>{{ t('dialog.translation_api.openai.model') }}</FieldLabel>
|
|
<FieldContent>
|
|
<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>
|
|
|
|
<Field>
|
|
<FieldLabel>{{ t('dialog.translation_api.openai.prompt_optional') }}</FieldLabel>
|
|
<FieldContent>
|
|
<InputGroupTextareaField v-model="form.translationApiPrompt" :rows="3" clearable />
|
|
</FieldContent>
|
|
</Field>
|
|
</FieldGroup>
|
|
</template>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
variant="outline"
|
|
v-if="form.translationApiType === 'google'"
|
|
@click="
|
|
openExternalLink(
|
|
'https://translatepress.com/docs/automatic-translation/generate-google-api-key/'
|
|
)
|
|
">
|
|
{{ t('dialog.translation_api.guide') }}
|
|
</Button>
|
|
<Button variant="outline" v-if="form.translationApiType === 'openai'" @click="testOpenAiTranslation">
|
|
{{ t('dialog.translation_api.test') }}
|
|
</Button>
|
|
<Button @click="saveTranslationApiConfig">
|
|
{{ t('dialog.translation_api.save') }}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
|
|
import { reactive, ref, watch } from 'vue';
|
|
import { InputGroupField, InputGroupTextareaField } from '@/components/ui/input-group';
|
|
import { Button } from '@/components/ui/button';
|
|
import { storeToRefs } from 'pinia';
|
|
import { toast } from 'vue-sonner';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import { getLanguageName, languageCodes } from '../../../localization';
|
|
import { openExternalLink } from '../../../shared/utils';
|
|
import { useAdvancedSettingsStore } from '../../../stores';
|
|
|
|
const advancedSettingsStore = useAdvancedSettingsStore();
|
|
|
|
const {
|
|
bioLanguage,
|
|
translationApiKey,
|
|
translationApiType,
|
|
translationApiEndpoint,
|
|
translationApiModel,
|
|
translationApiPrompt
|
|
} = storeToRefs(advancedSettingsStore);
|
|
|
|
const {
|
|
setBioLanguage,
|
|
translateText,
|
|
fetchAvailableModels,
|
|
setTranslationApiKey,
|
|
setTranslationApiType,
|
|
setTranslationApiEndpoint,
|
|
setTranslationApiModel,
|
|
setTranslationApiPrompt
|
|
} = advancedSettingsStore;
|
|
|
|
const { t } = useI18n();
|
|
|
|
const isFetchingModels = ref(false);
|
|
const availableModels = ref([]);
|
|
|
|
const props = defineProps({
|
|
isTranslationApiDialogVisible: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:isTranslationApiDialogVisible']);
|
|
|
|
function handleTranslationApiTypeChange(value) {
|
|
form.translationApiType = String(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 || '';
|
|
availableModels.value = [];
|
|
};
|
|
|
|
watch(
|
|
() => props.isTranslationApiDialogVisible,
|
|
(visible) => {
|
|
if (visible) {
|
|
loadFormFromStore();
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
async function saveTranslationApiConfig() {
|
|
if (form.translationApiType === 'openai') {
|
|
if (!form.translationApiEndpoint || !form.translationApiModel) {
|
|
toast.warning(t('dialog.translation_api.msg_fill_endpoint_model'));
|
|
return;
|
|
}
|
|
}
|
|
|
|
await Promise.all([
|
|
setTranslationApiType(form.translationApiType),
|
|
setTranslationApiEndpoint(form.translationApiEndpoint),
|
|
setTranslationApiModel(form.translationApiModel),
|
|
setTranslationApiPrompt(form.translationApiPrompt),
|
|
setTranslationApiKey(form.translationApiKey)
|
|
]);
|
|
|
|
toast.success(t('dialog.translation_api.msg_settings_saved'));
|
|
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;
|
|
}
|
|
if (!form.translationApiEndpoint || !form.translationApiModel) {
|
|
toast.warning(t('dialog.translation_api.msg_fill_endpoint_model'));
|
|
return;
|
|
}
|
|
|
|
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) {
|
|
toast.success(t('dialog.translation_api.msg_test_success'));
|
|
} else {
|
|
console.error('[TranslationAPI] Test returned empty result');
|
|
toast.error(t('dialog.translation_api.msg_test_failed'));
|
|
}
|
|
} catch (err) {
|
|
console.error('[TranslationAPI] Test failed', err);
|
|
toast.error(t('dialog.translation_api.msg_test_failed'));
|
|
}
|
|
}
|
|
|
|
function closeDialog() {
|
|
emit('update:isTranslationApiDialogVisible', false);
|
|
}
|
|
</script>
|