Add Deepl endpoint selection Fixes #3224

29acc2e2db8fcc3e108b0fb1b0f889bc06f9ae6d

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/scripts/extensions/translate/index.html+6 -2 Viewed

             </select>
             <label data-i18n="ext_translate_mode_provider" for="translation_provider">Provider</label>
             <div class="flex-container gap5px flexnowrap marginBot5">
-                <select id="translation_provider" name="provider" class="margin0">
+                <select id="translation_provider" name="provider" class="margin0 text_pole flex2">
                     <option value="libre">LibreTranslate</option>
                     <option value="google">Google</option>
                     <option value="lingva">Lingva</option>
-                    <option value="deepl">DeepL</option>
+                    <option value="deepl">DeepL API</option>
                     <option value="deeplx">DeepLX</option>
                     <option value="bing">Bing</option>
                     <option value="oneringtranslator">OneRingTranslator</option>
                     <option value="yandex">Yandex</option>
                 <select>
+                <select id="deepl_api_endpoint" class="margin0 text_pole flex1" title="DeepL API Endpoint">
+                    <option value="free">Free</option>
+                    <option value="pro">Pro</option>
+                </select>
                 <div id="translate_key_button" class="menu_button fa-solid fa-key margin0"></div>
                 <div id="translate_url_button" class="menu_button fa-solid fa-link margin0"></div>
             </div>

public/scripts/extensions/translate/index.js+24 -4 Viewed

     internal_language: 'en',
     provider: 'google',
     auto_mode: autoModeOptions.NONE,
+    deepl_endpoint: 'free',
 };
 const languageCodes = {

     $('#translate_key_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider]));
     $('#translate_url_button').toggle(providerOptionalUrl);
     $('#translate_url_button').toggleClass('success', Boolean(secret_state[extension_settings.translate.provider + '_url']));
+    $('#deepl_api_endpoint').toggle(extension_settings.translate.provider === 'deepl');
+}
 function loadSettings() {

@@ -163,9 +165,10 @@ function loadSettings() {
163	}	165	}
164	}	166	}
165		167
166	$(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', true);	168	$(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', 'true');
167	$(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', true);	169	$(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', 'true');
168	$(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', true);	170	$(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', 'true');
		171	$('#deepl_api_endpoint').val(extension_settings.translate.deepl_endpoint).toggle(extension_settings.translate.provider === 'deepl');
169	showKeysButton();	172	showKeysButton();
170	}	173	}
171		174

         throw new Error('No DeepL API key');
+    }
+    const endpoint = extension_settings.translate.deepl_endpoint || 'free';
     const response = await fetch('/api/translate/deepl', {
         method: 'POST',
         headers: getRequestHeaders(),
-        body: JSON.stringify({ text: text, lang: lang }),
+        body: JSON.stringify({ text: text, lang: lang, endpoint: endpoint }),
     });
     if (response.ok) {

+    }
     $('#translation_auto_mode').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
         extension_settings.translate.auto_mode = event.target.value;
         saveSettingsDebounced();
     });
     $('#translation_provider').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
         extension_settings.translate.provider = event.target.value;
         showKeysButton();
         saveSettingsDebounced();
     });
     $('#translation_target_language').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
         extension_settings.translate.target_language = event.target.value;
         saveSettingsDebounced();
     });
+    $('#deepl_api_endpoint').on('change', (event) => {
+        if (!(event.target instanceof HTMLSelectElement)) {
+            return;
+        }
+        extension_settings.translate.deepl_endpoint = event.target.value;
+        saveSettingsDebounced();
+    });
     $(document).on('click', '.mes_translate', onMessageTranslateClick);
     $('#translate_key_button').on('click', async () => {
         const optionText = $('#translation_provider option:selected').text();

src/endpoints/translate.js+5 -1 Viewed

             params.append('formality', formality);
+        }
-        const result = await fetch('https://api-free.deepl.com/v2/translate', {
+        const endpoint = request.body.endpoint === 'pro'
+            ? 'https://api.deepl.com/v2/translate'
+            : 'https://api-free.deepl.com/v2/translate';
+        const result = await fetch(endpoint, {
             method: 'POST',
             body: params,
             headers: {