coqui voices, change how provider settings save

public/scripts/extensions/tts/coqui.js

@@ -5,6 +5,8 @@ TODO:
 */
 
 import { doExtrasFetch, extension_settings, getApiUrl, getContext, modules, ModuleWorkerWrapper } from "../../extensions.js"
+import { callPopup } from "../../../script.js"
+import { onTtsProviderSettingsInput } from "./index.js"
 
 export { CoquiTtsProvider }
 
@@ -12,7 +14,7 @@ const DEBUG_PREFIX = "<Coqui TTS module> ";
 const UPDATE_INTERVAL = 1000;
 
 let inApiCall = false;
-let charactersList = []; // Updated with module worker
+let voiceIdList = []; // Updated with module worker
 let coquiApiModels = {}; // Initialized only once
 let coquiApiModelsFull = {}; // Initialized only once
 let coquiLocalModels = []; // Initialized only once
@@ -53,32 +55,6 @@ function resetModelSettings() {
     $("#coqui_api_model_settings_speaker").val("none");
 }
  
-function updateCharactersList() {
-    let currentcharacters = new Set();
-    for (const i of getContext().characters) {
-        currentcharacters.add(i.name);
-    }
-
-    currentcharacters = Array.from(currentcharacters)
-
-    if (JSON.stringify(charactersList) !== JSON.stringify(currentcharacters)) {
-        charactersList = currentcharacters
-
-        $('#coqui_character_select')
-            .find('option')
-            .remove()
-            .end()
-            .append('<option value="none">Select Character</option>')
-            .val('none')
-
-        for (const charName of charactersList) {
-            $("#coqui_character_select").append(new Option(charName, charName));
-        }
-
-        console.debug(DEBUG_PREFIX, "Updated character list to:", charactersList);
-    }
-}
-
 class CoquiTtsProvider {
     //#############################//
     //  Extension UI and Settings  //
@@ -88,6 +64,7 @@ class CoquiTtsProvider {
 
     defaultSettings = {
         voiceMap: "",
+        voiceIds: [],
         voiceMapDict: {}
     }
 
@@ -96,13 +73,15 @@ class CoquiTtsProvider {
         <div class="flex wide100p flexGap10 alignitemscenter">
             <div>
                 <div style="flex: 50%;">
-                    <label for="coqui_character_select">Character:</label>
+                    <small>To use CoquiTTS, select the origin, language, and model, then click Add Voice. The voice will then be available to add to a character. Voices are saved globally. </small><br>
-                    <select id="coqui_character_select">
+                    <label for="coqui_voiceid_select">Select Saved Voice:</label>
+                    <select id="coqui_voiceid_select">
                         <!-- Populated by JS -->
                     </select>
-
+                    <div class="tts_block">
-                    <input id="coqui_remove_char_mapping" class="menu_button" type="button" value="Remove from Voice Map" />
+                        <input id="coqui_remove_voiceId_mapping" class="menu_button" type="button" value="Remove Voice" />
-
+                        <input id="coqui_add_voiceId_mapping" class="menu_button" type="button" value="Add Voice" />
+                    </div>
                     <label for="coqui_model_origin">Models:</label>
                     <select id="coqui_model_origin">gpu_mode
                         <option value="none">Select Origin</option>
@@ -157,6 +136,7 @@ class CoquiTtsProvider {
             }
         }
 
+        initLocalModels();
         this.updateVoiceMap(); // Overide any manual modification
 
         $("#coqui_api_model_div").hide();
@@ -173,19 +153,8 @@ class CoquiTtsProvider {
         $("#coqui_api_language").on("change", function () { that.onModelLanguageChange() });
         $("#coqui_api_model_name").on("change", function () { that.onModelNameChange() });
 
-        $("#coqui_remove_char_mapping").on("click", function () { that.onRemoveClick() });
+        $("#coqui_remove_voiceId_mapping").on("click", function () { that.onRemoveClick() });
-
+        $("#coqui_add_voiceId_mapping").on("click", function () { that.onAddClick() });
-        // Load characters list
-        $('#coqui_character_select')
-            .find('option')
-            .remove()
-            .end()
-            .append('<option value="none">Select Character</option>')
-            .val('none')
-
-        for (const charName of charactersList) {
-            $("#coqui_character_select").append(new Option(charName, charName));
-        }
 
         // Load coqui-api settings from json file
         fetch("/scripts/extensions/tts/coqui_api_models_settings.json")
@@ -235,6 +204,7 @@ class CoquiTtsProvider {
     }
 
     updateVoiceMap() {
+        // Takes voiceMapDict and converts it to a string to save to voiceMap
         this.settings.voiceMap = "";
         for (let i in this.settings.voiceMapDict) {
             const voice_settings = this.settings.voiceMapDict[i];
@@ -248,21 +218,41 @@ class CoquiTtsProvider {
 
             this.settings.voiceMap += ",";
         }
-        $("#tts_voice_map").val(this.settings.voiceMap);
+
+        // Update UI select list with voices
+        $("#coqui_voiceid_select").empty()
+        $('#coqui_voiceid_select')
+            .find('option')
+            .remove()
+            .end()
+            .append('<option value="none">Select VoiceId</option>')
+            .val('none')
+        for (const voiceId in this.settings.voiceMapDict) {
+            $("#coqui_voiceid_select").append(new Option(voiceId, voiceId));
+        }
+        
         extension_settings.tts.Coqui = this.settings;
+        this.onSettingsChange()
     }
 
     onSettingsChange() {
         console.debug(DEBUG_PREFIX, "Settings changes", this.settings);
         extension_settings.tts.Coqui = this.settings;
+        onTtsProviderSettingsInput()
     }
 
     async onApplyClick() {
-        if (inApiCall) {
+        this.checkReady()
-            return; // TOdo block dropdown
     }
 
-        const character = $("#coqui_character_select").val();
+    async onAddClick() {
+        if (inApiCall) {
+            return; //TODO: block dropdown
+        }
+        
+        // Ask user for voiceId name to save voice
+        const voiceId = await callPopup('<h3>Name of Coqui voice to add to voice select dropdown:</h3>', 'input')
+
         const model_origin = $("#coqui_model_origin").val();
         const model_language = $("#coqui_api_language").val();
         const model_name = $("#coqui_api_model_name").val();
@@ -270,8 +260,8 @@ class CoquiTtsProvider {
         let model_setting_speaker = $("#coqui_api_model_settings_speaker").val();
 
 
-        if (character === "none") {
+        if (!voiceId) {
-            toastr.error(`Character not selected, please select one.`, DEBUG_PREFIX + " voice mapping character", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
+            toastr.error(`VoiceId empty, please enter one.`, DEBUG_PREFIX + " voice mapping voiceId", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
             this.updateVoiceMap(); // Overide any manual modification
             return;
         }
@@ -291,8 +281,8 @@ class CoquiTtsProvider {
                 return;
             }
 
-            this.settings.voiceMapDict[character] = { model_type: "local", model_id: "local/" + model_id };
+            this.settings.voiceMapDict[voiceId] = { model_type: "local", model_id: "local/" + model_id };
-            console.debug(DEBUG_PREFIX, "Registered new voice map: ", character, ":", this.settings.voiceMapDict[character]);
+            console.debug(DEBUG_PREFIX, "Registered new voice map: ", voiceId, ":", this.settings.voiceMapDict[voiceId]);
             this.updateVoiceMap(); // Overide any manual modification
             return;
         }
@@ -336,13 +326,13 @@ class CoquiTtsProvider {
 
         console.debug(DEBUG_PREFIX, "Current voice map: ", this.settings.voiceMap);
 
-        this.settings.voiceMapDict[character] = { model_type: "coqui-api", model_id: model_id, model_language: model_setting_language, model_speaker: model_setting_speaker };
+        this.settings.voiceMapDict[voiceId] = { model_type: "coqui-api", model_id: model_id, model_language: model_setting_language, model_speaker: model_setting_speaker };
 
-        console.debug(DEBUG_PREFIX, "Registered new voice map: ", character, ":", this.settings.voiceMapDict[character]);
+        console.debug(DEBUG_PREFIX, "Registered new voice map: ", voiceId, ":", this.settings.voiceMapDict[voiceId]);
 
         this.updateVoiceMap();
 
-        let successMsg = character + ":" + model_id;
+        let successMsg = voiceId + ":" + model_id;
         if (model_setting_language != null)
             successMsg += "[" + model_setting_language + "]";
         if (model_setting_speaker != null)
@@ -360,15 +350,15 @@ class CoquiTtsProvider {
     }
 
     async onRemoveClick() {
-        const character = $("#coqui_character_select").val();
+        const voiceId = $("#coqui_voiceid_select").val();
 
-        if (character === "none") {
+        if (voiceId === "none") {
-            toastr.error(`Character not selected, please select one.`, DEBUG_PREFIX + " voice mapping character", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
+            toastr.error(`VoiceId not selected, please select one.`, DEBUG_PREFIX + " voice mapping voiceId", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
             return;
         }
 
         // Todo erase from voicemap
-        delete (this.settings.voiceMapDict[character]);
+        delete (this.settings.voiceMapDict[voiceId]);
         this.updateVoiceMap(); // TODO
     }
 
@@ -748,13 +738,7 @@ class CoquiTtsProvider {
     }
 }
 
-//#############################//
+async function initLocalModels() {
-//  Module Worker              //
-//#############################//
-
-async function moduleWorker() {
-    updateCharactersList();
-
     if (!modules.includes('coqui-tts'))
         return
 
@@ -779,9 +763,3 @@ async function moduleWorker() {
         coquiLocalModelsReceived = true;
     }
 }
-
-$(document).ready(function () {
-    const wrapper = new ModuleWorkerWrapper(moduleWorker);
-    setInterval(wrapper.update.bind(wrapper), UPDATE_INTERVAL);
-    moduleWorker();
-})

public/scripts/extensions/tts/edge.js

@@ -2,6 +2,7 @@ import { getRequestHeaders } from "../../../script.js"
 import { getApiUrl } from "../../extensions.js"
 import { doExtrasFetch, modules } from "../../extensions.js"
 import { getPreviewString } from "./index.js"
+import { onTtsProviderSettingsInput } from "./index.js"
 
 export { EdgeTtsProvider }
 
@@ -30,6 +31,7 @@ class EdgeTtsProvider {
     onSettingsChange() {
         this.settings.rate = Number($('#edge_tts_rate').val());
         $('#edge_tts_rate_output').text(this.settings.rate);
+        onTtsProviderSettingsInput()
     }
 
     loadSettings(settings) {
@@ -51,7 +53,7 @@ class EdgeTtsProvider {
 
         $('#edge_tts_rate').val(this.settings.rate || 0);
         $('#edge_tts_rate_output').text(this.settings.rate || 0);
-
+        $('#edge_tts_rate').on("input",this.onSettingsChange)
         this.checkReady()
 
         console.info("Settings loaded")

public/scripts/extensions/tts/elevenlabs.js

@@ -1,3 +1,4 @@
+import { onTtsProviderSettingsInput } from "./index.js"
 export { ElevenLabsTtsProvider }
 
 class ElevenLabsTtsProvider {
@@ -23,8 +24,10 @@ class ElevenLabsTtsProvider {
 
     get settingsHtml() {
         let html = `
+        <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>"/>
+            <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>
@@ -33,6 +36,7 @@ class ElevenLabsTtsProvider {
                 <input id="elevenlabs_tts_multilingual" type="checkbox" value="${this.defaultSettings.multilingual}" />
                 Enable Multilingual
             </label>
+        </div>
         `
         return html
     }
@@ -42,6 +46,7 @@ class ElevenLabsTtsProvider {
         this.settings.stability = $('#elevenlabs_tts_stability').val()
         this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val()
         this.settings.multilingual = $('#elevenlabs_tts_multilingual').prop('checked')
+        onTtsProviderSettingsInput()
     }
 
 
@@ -66,6 +71,8 @@ class ElevenLabsTtsProvider {
         $('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost)
         $('#elevenlabs_tts_api_key').val(this.settings.apiKey)
         $('#tts_auto_generation').prop('checked', this.settings.multilingual)
+        $('#eleven_labs_connect').on('click',this.onConnectClick)
+        $('#elevenlabs_tts_settings').on('input',this.onSettingsChange)
         
         this.checkReady()
         console.info("Settings loaded")
@@ -77,6 +84,9 @@ class ElevenLabsTtsProvider {
     }
 
     async onApplyClick() {
+    }
+
+    async onConnectClick() {
         // Update on Apply click
         return await this.updateApiKey().catch( (error) => {
             throw error
@@ -93,6 +103,7 @@ class ElevenLabsTtsProvider {
         })
         this.settings.apiKey = this.settings.apiKey
         console.debug(`Saved new API_KEY: ${this.settings.apiKey}`)
+        this.onSettingsChange()
     }
 
     //#################//

public/scripts/extensions/tts/index.js

@@ -515,7 +515,7 @@ function setTtsStatus(status, success) {
     }
 }
 
-function onApplyClick() {
+function onRefreshClick() {
     Promise.all([
         ttsProvider.onApplyClick(),
         // updateVoiceMap()
@@ -598,11 +598,7 @@ function onTtsProviderChange() {
 }
 
 // Ensure that TTS provider settings are saved to extension settings.
-function onTtsProviderSettingsInput() {
+export function onTtsProviderSettingsInput() {
-    ttsProvider.onSettingsChange()
-
-    // Persist changes to SillyTavern tts extension settings
-
     extension_settings.tts[ttsProviderName] = ttsProvider.settings
     saveSettingsDebounced()
     console.info(`Saved settings ${ttsProviderName} ${JSON.stringify(ttsProvider.settings)}`)
@@ -807,10 +803,11 @@ $(document).ready(function () {
                 <div class="inline-drawer-content">
                     <div id="tts_status">
                     </div>
-                    <div>
                     <span>Select TTS Provider</span> </br>
-                        <select id="tts_provider">
+                    <div class="tts_block">
+                        <select id="tts_provider" class="flex1">
                         </select>
+                        <input id="tts_refresh" class="menu_button" type="submit" value="Reload" />
                     </div>
                     <div>
                         <label class="checkbox_label" for="tts_enabled">
@@ -840,7 +837,6 @@ $(document).ready(function () {
                     <form id="tts_provider_settings" class="inline-drawer-content">
                     </form>
                     <div class="tts_buttons">
-                        <input id="tts_apply" class="menu_button" type="submit" value="Reload / Apply" />
                         <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
                     </div>
                     </div>
@@ -849,14 +845,13 @@ $(document).ready(function () {
         </div>
         `
         $('#extensions_settings').append(settingsHtml)
-        $('#tts_apply').on('click', onApplyClick)
+        $('#tts_refresh').on('click', onRefreshClick)
         $('#tts_enabled').on('click', onEnableClick)
         $('#tts_narrate_dialogues').on('click', onNarrateDialoguesClick);
         $('#tts_narrate_quoted').on('click', onNarrateQuotedClick);
         $('#tts_narrate_translated_only').on('click', onNarrateTranslatedOnlyClick);
         $('#tts_auto_generation').on('click', onAutoGenerationClick);
         $('#tts_voices').on('click', onTtsVoicesClick)
-        $('#tts_provider_settings').on('input', onTtsProviderSettingsInput)
         for (const provider in ttsProviders) {
             $('#tts_provider').append($("<option />").val(provider).text(provider))
         }

public/scripts/extensions/tts/novel.js

@@ -1,5 +1,6 @@
 import { getRequestHeaders, callPopup } from "../../../script.js"
 import { getPreviewString } from "./index.js"
+import { onTtsProviderSettingsInput } from "./index.js"
 
 export { NovelTtsProvider }
 
@@ -37,7 +38,7 @@ class NovelTtsProvider {
     }
 
     onSettingsChange() {
-
+        onTtsProviderSettingsInput()
     }
 
     // Add a new Novel custom voice to provider
@@ -65,6 +66,7 @@ class NovelTtsProvider {
         this.settings.customVoices.forEach(voice => {
             voiceSelect.append(`<option>${voice}</option>`)
         })
+        this.onSettingsChange()
     }
 
     loadSettings(settings) {

public/scripts/extensions/tts/silerotts.js

@@ -1,4 +1,5 @@
 import { doExtrasFetch, getApiUrl, modules } from "../../extensions.js"
+import { onTtsProviderSettingsInput } from "./index.js"
 
 export { SileroTtsProvider }
 
@@ -30,6 +31,7 @@ class SileroTtsProvider {
     onSettingsChange() {
         // Used when provider settings are updated from UI
         this.settings.provider_endpoint = $('#silero_tts_endpoint').val()
+        onTtsProviderSettingsInput()
     }
 
     loadSettings(settings) {
@@ -61,6 +63,7 @@ class SileroTtsProvider {
         }, 2000);
 
         $('#silero_tts_endpoint').val(this.settings.provider_endpoint)
+        $('#silero_tts_endpoint').on("input", this.onSettingsChange)
 
         this.checkReady()
 

public/scripts/extensions/tts/style.css

@@ -67,3 +67,10 @@
 .tts-button:hover {
     opacity: 1;
 }
+
+.tts_block {
+    display: flex;
+    align-items: center;
+    column-gap: 5px;
+    flex-wrap: wrap;
+}

public/scripts/extensions/tts/system.js

@@ -1,7 +1,7 @@
 import { isMobile } from "../../RossAscends-mods.js";
 import { getPreviewString } from "./index.js";
 import { talkingAnimation } from './index.js';
-
+import { onTtsProviderSettingsInput } from "./index.js"
 export { SystemTtsProvider }
 
 /**
@@ -107,7 +107,7 @@ class SystemTtsProvider {
         this.settings.pitch = Number($('#system_tts_pitch').val());
         $('#system_tts_pitch_output').text(this.settings.pitch);
         $('#system_tts_rate_output').text(this.settings.rate);
-        console.log('Save changes');
+        onTtsProviderSettingsInput()
     }
 
     loadSettings(settings) {
@@ -144,6 +144,11 @@ class SystemTtsProvider {
 
         $('#system_tts_rate').val(this.settings.rate || this.defaultSettings.rate);
         $('#system_tts_pitch').val(this.settings.pitch || this.defaultSettings.pitch);
+
+        // Trigger updates
+        $('#system_tts_rate').on("input", this.onSettingsChange)
+        $('#system_tts_rate').on("input", this.onSettingsChange)
+
         $('#system_tts_pitch_output').text(this.settings.pitch);
         $('#system_tts_rate_output').text(this.settings.rate);
         console.info("Settings loaded");