Translate bio button (#1432)

* Translation button finished * Fix bug in theme * revert cause some stuff broke * "Translated by Google" text * Translate that too * I am very stupid sorry * Add API Key * Make toggle work, oops * Fix merge issues * Fixed as requested * Change translation icon * Return settings back (oops) * Beep * Boop * Delete import again as the icon has been replaced with a better one * Change text
2026-04-23 16:53:50 +02:00 · 2025-10-19 04:34:30 +02:00
parent a059d813f3
commit d7e08d6f7d
5 changed files with 279 additions and 2 deletions
--- a/src/stores/settings/advanced.js
+++ b/src/stores/settings/advanced.js
@@ -18,13 +18,14 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
    const vrcxStore = useVrcxStore();
    const VRCXUpdaterStore = useVRCXUpdaterStore();

-    const { t } = useI18n();
+    const { availableLocales, t } = useI18n();

    const state = reactive({
        folderSelectorDialogVisible: false
    });

    const enablePrimaryPassword = ref(false);
+    const bioLanguage = ref('en');
    const relaunchVRChatAfterCrash = ref(false);
    const vrcQuitFix = ref(true);
    const autoSweepVRChatCache = ref(false);
@@ -40,7 +41,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
    const screenshotHelperModifyFilename = ref(false);
    const screenshotHelperCopyToClipboard = ref(false);
    const youTubeApi = ref(false);
+    const translationApi = ref(false);
    const youTubeApiKey = ref('');
+    const translationApiKey = ref('');
    const progressPie = ref(false);
    const progressPieFilter = ref(true);
    const showConfirmationOnSwitchAvatar = ref(false);
@@ -68,6 +71,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
    async function initAdvancedSettings() {
        const [
            enablePrimaryPasswordConfig,
+            bioLanguageConfig,
            relaunchVRChatAfterCrashConfig,
            vrcQuitFixConfig,
            autoSweepVRChatCacheConfig,
@@ -83,7 +87,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
            screenshotHelperModifyFilenameConfig,
            screenshotHelperCopyToClipboardConfig,
            youTubeApiConfig,
+            translationApiConfig,
            youTubeApiKeyConfig,
+            translationApiKeyConfig,
            progressPieConfig,
            progressPieFilterConfig,
            showConfirmationOnSwitchAvatarConfig,
@@ -97,6 +103,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
            sentryErrorReportingConfig
        ] = await Promise.all([
            configRepository.getBool('enablePrimaryPassword', false),
+            configRepository.getString('VRCX_bioLanguage'),
            configRepository.getBool('VRCX_relaunchVRChatAfterCrash', false),
            configRepository.getBool('VRCX_vrcQuitFix', true),
            configRepository.getBool('VRCX_autoSweepVRChatCache', false),
@@ -121,7 +128,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
                false
            ),
            configRepository.getBool('VRCX_youtubeAPI', false),
+            configRepository.getBool('VRCX_translationAPI', false),
            configRepository.getString('VRCX_youtubeAPIKey', ''),
+            configRepository.getString('VRCX_translationAPIKey', ''),
            configRepository.getBool('VRCX_progressPie', false),
            configRepository.getBool('VRCX_progressPieFilter', true),
            configRepository.getBool(
@@ -138,6 +147,15 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
            configRepository.getString('VRCX_SentryEnabled', '')
        ]);

+        if (
+            !bioLanguageConfig ||
+            !availableLocales.includes(bioLanguageConfig)
+        ) {
+            bioLanguage.value = 'en';
+        } else {
+            bioLanguage.value = bioLanguageConfig;
+        }
+
        enablePrimaryPassword.value = enablePrimaryPasswordConfig;
        relaunchVRChatAfterCrash.value = relaunchVRChatAfterCrashConfig;
        vrcQuitFix.value = vrcQuitFixConfig;
@@ -157,7 +175,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        screenshotHelperCopyToClipboard.value =
            screenshotHelperCopyToClipboardConfig;
        youTubeApi.value = youTubeApiConfig;
+        translationApi.value = translationApiConfig;
        youTubeApiKey.value = youTubeApiKeyConfig;
+        translationApiKey.value = translationApiKeyConfig;
        progressPie.value = progressPieConfig;
        progressPieFilter.value = progressPieFilterConfig;
        showConfirmationOnSwitchAvatar.value =
@@ -299,6 +319,10 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        youTubeApi.value = !youTubeApi.value;
        await configRepository.setBool('VRCX_youtubeAPI', youTubeApi.value);
    }
+    async function setTranslationApi() {
+        translationApi.value = !translationApi.value;
+        await configRepository.setBool('VRCX_translationAPI', youTubeApi.value);
+    }
    /**
     * @param {string} value
     */
@@ -309,6 +333,17 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
            youTubeApiKey.value
        );
    }
+    async function setTranslationApiKey(value) {
+        translationApiKey.value = value;
+        await configRepository.setString(
+            'VRCX_translationAPIKey',
+            translationApiKey.value
+        );
+    }
+    function setBioLanguage(language) {
+        bioLanguage.value = language;
+        configRepository.setString('VRCX_bioLanguage', language);
+    }
    async function setProgressPie() {
        progressPie.value = !progressPie.value;
        await configRepository.setBool('VRCX_progressPie', progressPie.value);
@@ -548,6 +583,31 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        return data;
    }

+    async function translateText(text, targetLang) {
+        if (!translationApiKey.value) return null;
+
+        try {
+            const res = await fetch(
+                `https://translation.googleapis.com/language/translate/v2?key=${translationApiKey.value}`,
+                {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        q: text,
+                        target: targetLang,
+                        format: 'text'
+                    })
+                }
+            );
+            const data = await res.json();
+
+            if (data.error) return null;
+            return data.data.translations[0].translatedText;
+        } catch (err) {
+            return null;
+        }
+    }
+
    function cropPrintsChanged() {
        if (!cropInstancePrints.value) return;
        ElMessageBox.confirm(
@@ -728,6 +788,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
    return {
        state,

+        bioLanguage,
        enablePrimaryPassword,
        relaunchVRChatAfterCrash,
        vrcQuitFix,
@@ -744,7 +805,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        screenshotHelperModifyFilename,
        screenshotHelperCopyToClipboard,
        youTubeApi,
+        translationApi,
        youTubeApiKey,
+        translationApiKey,
        progressPie,
        progressPieFilter,
        showConfirmationOnSwitchAvatar,
@@ -761,6 +824,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        sentryErrorReporting,

        setEnablePrimaryPasswordConfigRepository,
+        setBioLanguage,
        setRelaunchVRChatAfterCrash,
        setVrcQuitFix,
        setAutoSweepVRChatCache,
@@ -776,7 +840,9 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        setScreenshotHelperModifyFilename,
        setScreenshotHelperCopyToClipboard,
        setYouTubeApi,
+        setTranslationApi,
        setYouTubeApiKey,
+        setTranslationApiKey,
        setProgressPie,
        setProgressPieFilter,
        setShowConfirmationOnSwitchAvatar,
@@ -788,6 +854,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
        getSqliteTableSizes,
        handleSetAppLauncherSettings,
        lookupYouTubeVideo,
+        translateText,
        resetUGCFolder,
        openUGCFolder,
        openUGCFolderSelector,