Fix elevenlabs multi-model

public/scripts/extensions/tts/elevenlabs.js

@@ -10,15 +10,12 @@ class ElevenLabsTtsProvider {
     voices = []
     separator = ' ... ... ... '
 
-    get settings() {
-        return this.settings
-    }
 
     defaultSettings = {
         stability: 0.75,
         similarity_boost: 0.75,
         apiKey: "",
-        multilingual: false,
+        model: 'eleven_monolingual_v1',
         voiceMap: {}
     }
 
@@ -27,15 +24,17 @@ class ElevenLabsTtsProvider {
         <div class="elevenlabs_tts_settings">
             <label for="elevenlabs_tts_api_key">API Key</label>
             <input id="elevenlabs_tts_api_key" type="text" class="text_pole" placeholder="<API Key>"/>
+            <label for="elevenlabs_tts_model">Model</label>
+            <select id="elevenlabs_tts_model" class="text_pole">
+                <option value="eleven_monolingual_v1">Monolingual</option>
+                <option value="eleven_multilingual_v1">Multilingual v1</option>
+                <option value="eleven_multilingual_v2">Multilingual v2</option>
+            </select>
             <input id="eleven_labs_connect" class="menu_button" type="button" value="Connect" />
             <label for="elevenlabs_tts_stability">Stability: <span id="elevenlabs_tts_stability_output"></span></label>
             <input id="elevenlabs_tts_stability" type="range" value="${this.defaultSettings.stability}" min="0" max="1" step="0.05" />
             <label for="elevenlabs_tts_similarity_boost">Similarity Boost: <span id="elevenlabs_tts_similarity_boost_output"></span></label>
             <input id="elevenlabs_tts_similarity_boost" type="range" value="${this.defaultSettings.similarity_boost}" min="0" max="1" step="0.05" />
-            <label class="checkbox_label" for="elevenlabs_tts_multilingual">
-                <input id="elevenlabs_tts_multilingual" type="checkbox" value="${this.defaultSettings.multilingual}" />
-                Enable Multilingual
-            </label>
         </div>
         `
         return html
@@ -45,11 +44,10 @@ class ElevenLabsTtsProvider {
         // Update dynamically
         this.settings.stability = $('#elevenlabs_tts_stability').val()
         this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val()
-        this.settings.multilingual = $('#elevenlabs_tts_multilingual').prop('checked')
+        this.settings.model = $('#elevenlabs_tts_model').find(':selected').val()
         saveTtsProviderSettings()
     }
 
-
     async loadSettings(settings) {
         // Pupulate Provider UI given input settings
         if (Object.keys(settings).length == 0) {
@@ -59,6 +57,12 @@ class ElevenLabsTtsProvider {
         // Only accept keys defined in defaultSettings
         this.settings = this.defaultSettings
 
+        // Migrate old settings
+        if (settings['multilingual'] !== undefined) {
+            settings.model = settings.multilingual ? 'eleven_multilingual_v1' : 'eleven_monolingual_v1';
+            delete settings['multilingual'];
+        }
+
         for (const key in settings) {
             if (key in this.settings) {
                 this.settings[key] = settings[key]
@@ -66,15 +70,22 @@ class ElevenLabsTtsProvider {
                 throw `Invalid setting passed to TTS Provider: ${key}`
             }
         }
+
         $('#elevenlabs_tts_stability').val(this.settings.stability)
         $('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost)
         $('#elevenlabs_tts_api_key').val(this.settings.apiKey)
-        $('#elevenlabs_tts_multilingual').prop('checked', this.settings.multilingual)
+        $('#elevenlabs_tts_model').val(this.settings.model);
         $('#eleven_labs_connect').on('click', () => { this.onConnectClick() })
-        $('#elevenlabs_tts_settings').on('input',this.onSettingsChange)
+        $('#elevenlabs_tts_similarity_boost').on('input', this.onSettingsChange.bind(this))
+        $('#elevenlabs_tts_stability').on('input', this.onSettingsChange.bind(this))
+        $('#elevenlabs_tts_model').on('change', this.onSettingsChange.bind(this))
 
+        try {
             await this.checkReady()
             console.debug("ElevenLabs: Settings loaded")
+        } catch {
+            console.debug("ElevenLabs: Settings loaded, but not ready")
+        }
     }
 
     // Perform a simple readiness check by trying to fetch voiceIds
@@ -102,6 +113,7 @@ class ElevenLabsTtsProvider {
         })
         this.settings.apiKey = this.settings.apiKey
         console.debug(`Saved new API_KEY: ${this.settings.apiKey}`)
+        $('#tts_status').text('')
         this.onSettingsChange()
     }
 
@@ -189,11 +201,8 @@ class ElevenLabsTtsProvider {
     }
 
     async fetchTtsGeneration(text, voiceId) {
-        let model = "eleven_monolingual_v1"
-        if (this.settings.multilingual == true) {
-            model = "eleven_multilingual_v1"
-        }
-        console.info(`Generating new TTS for voice_id ${voiceId}`)
+        let model = this.settings.model ?? "eleven_monolingual_v1";
+        console.info(`Generating new TTS for voice_id ${voiceId}, model ${model}`)
         const response = await fetch(
             `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
             {
@@ -203,9 +212,12 @@ class ElevenLabsTtsProvider {
                     'Content-Type': 'application/json'
                 },
                 body: JSON.stringify({
-                    model: model,
+                    model_id: model,
                     text: text,
-                    voice_settings: this.settings
+                    voice_settings: {
+                        stability: Number(this.settings.stability),
+                        similarity_boost: Number(this.settings.similarity_boost),
+                    },
                 })
             }
         )

public/scripts/extensions/tts/index.js

@@ -429,7 +429,7 @@ async function processTtsQueue() {
 
     console.debug('New message found, running TTS')
     currentTtsJob = ttsJobQueue.shift()
-    let text = extension_settings.tts.narrate_translated_only ? currentTtsJob?.extra?.display_text : currentTtsJob.mes
+    let text = extension_settings.tts.narrate_translated_only ? (currentTtsJob?.extra?.display_text || currentTtsJob.mes) : currentTtsJob.mes
     text = extension_settings.tts.narrate_dialogues_only
         ? text.replace(/\*[^\*]*?(\*|$)/g, '').trim() // remove asterisks content
         : text.replaceAll('*', '').trim() // remove just the asterisks
@@ -614,8 +614,8 @@ function onTtsProviderChange() {
 
 // Ensure that TTS provider settings are saved to extension settings.
 export function saveTtsProviderSettings() {
-    updateVoiceMap()
     extension_settings.tts[ttsProviderName] = ttsProvider.settings
+    updateVoiceMap()
     saveSettingsDebounced()
     console.info(`Saved settings ${ttsProviderName} ${JSON.stringify(ttsProvider.settings)}`)
 }
@@ -695,6 +695,9 @@ function updateVoiceMap() {
         voiceMap = tempVoiceMap
         console.log(`Voicemap updated to ${JSON.stringify(voiceMap)}`)
     }
+    if (!extension_settings.tts[ttsProviderName].voiceMap) {
+        extension_settings.tts[ttsProviderName].voiceMap = {}
+    }
     Object.assign(extension_settings.tts[ttsProviderName].voiceMap, voiceMap)
     saveSettingsDebounced()
 }