Move request to backend

public/scripts/extensions/tts/index.js

@@ -83,21 +83,21 @@ export function getPreviewString(lang) {
 }
 
 const ttsProviders = {
-    ElevenLabs: ElevenLabsTtsProvider,
+    AllTalk: AllTalkTtsProvider,
-    Silero: SileroTtsProvider,
+    Azure: AzureTtsProvider,
-    XTTSv2: XTTSTtsProvider,
-    VITS: VITSTtsProvider,
-    GSVI: GSVITtsProvider,
-    SBVits2: SBVits2TtsProvider,
-    System: SystemTtsProvider,
     Coqui: CoquiTtsProvider,
     Edge: EdgeTtsProvider,
+    ElevenLabs: ElevenLabsTtsProvider,
+    GSVI: GSVITtsProvider,
     Novel: NovelTtsProvider,
     OpenAI: OpenAITtsProvider,
-    AllTalk: AllTalkTtsProvider,
+    'OpenAI Compatible': OpenAICompatibleTtsProvider,
+    SBVits2: SBVits2TtsProvider,
+    Silero: SileroTtsProvider,
     SpeechT5: SpeechT5TtsProvider,
-    Azure: AzureTtsProvider,
+    System: SystemTtsProvider,
-    OpenAICompatible: OpenAICompatibleTtsProvider,
+    VITS: VITSTtsProvider,
+    XTTSv2: XTTSTtsProvider,
 };
 let ttsProvider;
 let ttsProviderName;

public/scripts/extensions/tts/openai-compatible.js

@@ -1,4 +1,6 @@
 import { getRequestHeaders } from '../../../script.js';
+import { callGenericPopup, POPUP_RESULT, POPUP_TYPE } from '../../popup.js';
+import { findSecret, SECRET_KEYS, secret_state, writeSecret } from '../../secrets.js';
 import { getPreviewString, saveTtsProviderSettings } from './index.js';
 
 export { OpenAICompatibleTtsProvider };
@@ -21,7 +23,15 @@ class OpenAICompatibleTtsProvider {
     get settingsHtml() {
         let html = `
         <label for="openai_compatible_tts_endpoint">Provider Endpoint:</label>
+        <div class="flex-container alignItemsCenter">
+            <div class="flex1">
                 <input id="openai_compatible_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
+            </div>
+            <div id="openai_compatible_tts_key" class="menu_button menu_button_icon">
+                <i class="fa-solid fa-key"></i>
+                <span>API Key</span>
+            </div>
+        </div>
         <label for="openai_compatible_model">Model:</label>
         <input id="openai_compatible_model" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.model}"/>
         <label for="openai_compatible_tts_voices">Available Voices (comma separated):</label>
@@ -64,7 +74,35 @@ class OpenAICompatibleTtsProvider {
 
         $('#openai_compatible_tts_speed_output').text(this.settings.speed);
 
-        this.refreshSession();
+        $('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
+        $('#openai_compatible_tts_key').on('click', async () => {
+            const popupText = 'OpenAI-compatible TTS API Key';
+            const savedKey = secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS] ? await findSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS) : '';
+
+            const key = await callGenericPopup(popupText, POPUP_TYPE.INPUT, savedKey, {
+                customButtons: [{
+                    text: 'Remove Key',
+                    appendAtEnd: true,
+                    result: POPUP_RESULT.CANCELLED,
+                    action: async () => {
+                        await writeSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS, '');
+                        $('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
+                        toastr.success('API Key removed');
+                        await this.onRefreshClick();
+                    },
+                }],
+            });
+
+            if (key == false || key == '' || key == null) {
+                return;
+            }
+
+            await writeSecret(SECRET_KEYS.CUSTOM_OPENAI_TTS, String(key));
+
+            toastr.success('API Key saved');
+            $('#openai_compatible_tts_key').toggleClass('success', secret_state[SECRET_KEYS.CUSTOM_OPENAI_TTS]);
+            await this.onRefreshClick();
+        });
 
         await this.checkReady();
 
@@ -75,7 +113,7 @@ class OpenAICompatibleTtsProvider {
         // Update dynamically
         this.settings.provider_endpoint = String($('#openai_compatible_tts_endpoint').val());
         this.settings.model = String($('#openai_compatible_model').val());
-        this.settings.available_voices = $('#openai_compatible_tts_voices').val().split(',');
+        this.settings.available_voices = String($('#openai_compatible_tts_voices').val()).split(',');
         this.settings.speed = Number($('#openai_compatible_tts_speed').val());
         $('#openai_compatible_tts_speed_output').text(this.settings.speed);
         saveTtsProviderSettings();
@@ -132,15 +170,16 @@ class OpenAICompatibleTtsProvider {
 
     async fetchTtsGeneration(inputText, voiceId) {
         console.info(`Generating new TTS for voice_id ${voiceId}`);
-        const response = await fetch(this.settings.provider_endpoint, {
+        const response = await fetch('/api/openai/custom/generate-voice', {
             method: 'POST',
             headers: getRequestHeaders(),
             body: JSON.stringify({
-                'model': this.settings.model,
+                provider_endpoint: this.settings.provider_endpoint,
-                'input': inputText,
+                model: this.settings.model,
-                'voice': voiceId,
+                input: inputText,
-                'response_format': 'mp3',
+                voice: voiceId,
-                'speed': this.settings.speed,
+                response_format: 'mp3',
+                speed: this.settings.speed,
             }),
         });
 

public/scripts/secrets.js

@@ -33,6 +33,7 @@ export const SECRET_KEYS = {
     HUGGINGFACE: 'api_key_huggingface',
     STABILITY: 'api_key_stability',
     BLOCKENTROPY: 'api_key_blockentropy',
+    CUSTOM_OPENAI_TTS: 'api_key_custom_openai_tts',
 };
 
 const INPUT_MAP = {
@@ -127,7 +128,7 @@ export async function writeSecret(key, value) {
             const text = await response.text();
 
             if (text == 'ok') {
-                secret_state[key] = true;
+                secret_state[key] = !!value;
                 updateSecretDisplay();
             }
         }

src/endpoints/openai.js

@@ -282,4 +282,48 @@ router.post('/generate-image', jsonParser, async (request, response) => {
     }
 });
 
+const custom = express.Router();
+
+custom.post('/generate-voice', jsonParser, async (request, response) => {
+    try {
+        const key = readSecret(request.user.directories, SECRET_KEYS.CUSTOM_OPENAI_TTS);
+        const { input, provider_endpoint, response_format, voice, speed, model } = request.body;
+
+        if (!provider_endpoint) {
+            console.log('No OpenAI-compatible TTS provider endpoint provided');
+            return response.sendStatus(400);
+        }
+
+        const result = await fetch(provider_endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Authorization: `Bearer ${key ?? ''}`,
+            },
+            body: JSON.stringify({
+                input: input ?? '',
+                response_format: response_format ?? 'mp3',
+                voice: voice ?? 'alloy',
+                speed: speed ?? 1,
+                model: model ?? 'tts-1',
+            }),
+        });
+
+        if (!result.ok) {
+            const text = await result.text();
+            console.log('OpenAI request failed', result.statusText, text);
+            return response.status(500).send(text);
+        }
+
+        const buffer = await result.arrayBuffer();
+        response.setHeader('Content-Type', 'audio/mpeg');
+        return response.send(Buffer.from(buffer));
+    } catch (error) {
+        console.error('OpenAI TTS generation failed', error);
+        response.status(500).send('Internal server error');
+    }
+});
+
+router.use('/custom', custom);
+
 module.exports = { router };

src/endpoints/secrets.js

@@ -45,6 +45,7 @@ const SECRET_KEYS = {
     HUGGINGFACE: 'api_key_huggingface',
     STABILITY: 'api_key_stability',
     BLOCKENTROPY: 'api_key_blockentropy',
+    CUSTOM_OPENAI_TTS: 'api_key_custom_openai_tts',
 };
 
 // These are the keys that are safe to expose, even if allowKeysExposure is false