Add Deepl endpoint selection

Fixes #3224

public/scripts/extensions/translate/index.html

@@ -14,16 +14,20 @@
             </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

@@ -34,6 +34,7 @@ const defaultSettings = {
     internal_language: 'en',
     provider: 'google',
     auto_mode: autoModeOptions.NONE,
+    deepl_endpoint: 'free',
 };
 
 const languageCodes = {
@@ -154,6 +155,7 @@ function showKeysButton() {
     $('#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() {
         }
     }
 
-    $(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', true);
+    $(`#translation_provider option[value="${extension_settings.translate.provider}"]`).attr('selected', 'true');
-    $(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', true);
+    $(`#translation_target_language option[value="${extension_settings.translate.target_language}"]`).attr('selected', 'true');
-    $(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', true);
+    $(`#translation_auto_mode option[value="${extension_settings.translate.auto_mode}"]`).attr('selected', 'true');
+    $('#deepl_api_endpoint').val(extension_settings.translate.deepl_endpoint).toggle(extension_settings.translate.provider === 'deepl');
     showKeysButton();
 }
 
@@ -287,10 +290,11 @@ async function translateProviderDeepl(text, lang) {
         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) {
@@ -618,18 +622,34 @@ jQuery(async () => {
     }
 
     $('#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

@@ -264,7 +264,11 @@ router.post('/deepl', jsonParser, async (request, response) => {
             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: {