generalized tts settings

public/scripts/extensions.js

@@ -24,7 +24,7 @@ const extension_settings = {
     caption: {},
     expressions: {},
     dice: {},
-    elevenlabstts: {},
+    tts: {},
 };
 
 let modules = [];

public/scripts/extensions/tts/elevenlabs.js

@@ -1,13 +1,93 @@
 export { ElevenLabsTtsProvider }
 
 class ElevenLabsTtsProvider {
+    //########//
+    // Config //
+    //########//
+
     API_KEY
+    settings = this.defaultSettings
+    voices = []
+
     set API_KEY(apiKey) {
         this.API_KEY = apiKey
     }
     get API_KEY() {
         return this.API_KEY
     }
+    get settings() {
+        return this.settings
+    }
+
+    updateSettings(settings) {
+        console.info("Settings updated")
+        if("stability" in settings && "similarity_boost" in settings){
+            this.settings = settings
+            $('#elevenlabs_tts_stability').val(this.settings.stability)
+            $('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost)
+            this.onSettingsChange()
+        } else {
+            throw `Invalid settings passed to ElevenLabs: ${JSON.stringify(settings)}`
+        }
+    }
+
+    defaultSettings = {
+        stability: 0.75,
+        similarity_boost: 0.75
+    }
+
+    onSettingsChange() {
+        this.settings = {
+            stability: $('#elevenlabs_tts_stability').val(),
+            similarity_boost: $('#elevenlabs_tts_similarity_boost').val()
+        }
+        $('#elevenlabs_tts_stability_output').text(this.settings.stability)
+        $('#elevenlabs_tts_similarity_boost_output').text(this.settings.similarity_boost)
+    }
+
+    get settingsHtml() {
+        let html = `
+        <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">Stability: <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" />
+        `
+        return html
+    }
+
+    //#############//
+    //  Management //
+    //#############//
+
+    async getVoice(voiceName) {
+        if (this.voices.length == 0) {
+            this.voices = await this.fetchTtsVoiceIds()
+        }
+        const match = this.voices.filter(
+            elevenVoice => elevenVoice.name == voiceName
+        )[0]
+        if (!match) {
+            throw `TTS Voice name ${voiceName} not found in ElevenLabs account`
+        }
+        return match
+    }
+
+    async findTtsGenerationInHistory(message, voiceId) {
+        const ttsHistory = await this.fetchTtsHistory()
+        for (const history of ttsHistory) {
+            const text = history.text
+            const itemId = history.history_item_id
+            if (message === text && history.voice_id == voiceId) {
+                console.info(`Existing TTS history item ${itemId} found: ${text} `)
+                return itemId
+            }
+        }
+        return ''
+    }
+
+    //###########//
+    // API CALLS //
+    //###########//
     async fetchTtsVoiceIds() {
         const headers = {
             'xi-api-key': this.API_KEY
@@ -22,6 +102,10 @@ class ElevenLabsTtsProvider {
         return responseJson.voices
     }
 
+    /**
+     * 
+     * @returns 
+     */
     async fetchTtsVoiceSettings() {
         const headers = {
             'xi-api-key': this.API_KEY
@@ -48,7 +132,10 @@ class ElevenLabsTtsProvider {
                     'xi-api-key': this.API_KEY,
                     'Content-Type': 'application/json'
                 },
-                body: JSON.stringify({ text: text })
+                body: JSON.stringify({
+                    text: text,
+                    voice_settings: this.settings
+                })
             }
         )
         if (!response.ok) {
@@ -86,17 +173,4 @@ class ElevenLabsTtsProvider {
         const responseJson = await response.json()
         return responseJson.history
     }
-
-    async findTtsGenerationInHistory(message, voiceId) {
-        const ttsHistory = await this.fetchTtsHistory()
-        for (const history of ttsHistory) {
-            const text = history.text
-            const itemId = history.history_item_id
-            if (message === text && history.voice_id == voiceId) {
-                console.info(`Existing TTS history item ${itemId} found: ${text} `)
-                return itemId
-            }
-        }
-        return ''
-    }
 }

public/scripts/extensions/tts/index.js

@@ -6,7 +6,6 @@ import { ElevenLabsTtsProvider } from './elevenlabs.js'
 const UPDATE_INTERVAL = 1000
 
 let voiceMap = {} // {charName:voiceid, charName2:voiceid2}
-let elevenlabsTtsVoices = []
 let audioControl
 
 let lastCharacterId = null
@@ -14,11 +13,16 @@ let lastGroupId = null
 let lastChatId = null
 let lastMessageHash = null
 
-let ttsProvider = new ElevenLabsTtsProvider()
+
+let ttsProviders = {
+    elevenLabs: ElevenLabsTtsProvider
+}
+let ttsProvider
+let ttsProviderName
 
 async function moduleWorker() {
     // Primarily determinign when to add new chat to the TTS queue
-    const enabled = $('#elevenlabs_enabled').is(':checked')
+    const enabled = $('#tts_enabled').is(':checked')
     if (!enabled) {
         return
     }
@@ -104,19 +108,19 @@ async function playAudioData(audioBlob) {
     })
 }
 
-window['elevenlabsPreview'] = function (id) {
+window['tts_preview'] = function (id) {
     const audio = document.getElementById(id)
     audio.play()
 }
 
-async function onElevenlabsVoicesClick() {
+async function onTtsVoicesClick() {
     let popupText = ''
 
     try {
         const voiceIds = await ttsProvider.fetchTtsVoiceIds()
 
         for (const voice of voiceIds) {
-            popupText += `<div class="voice_preview"><b>${voice.name}</b> <i onclick="elevenlabsPreview('${voice.voice_id}')" class="fa-solid fa-play"></i></div>`
+            popupText += `<div class="voice_preview"><b>${voice.name}</b> <i onclick="tts_preview('${voice.voice_id}')" class="fa-solid fa-play"></i></div>`
             popupText += `<audio id="${voice.voice_id}" src="${voice.preview_url}"></audio>`
         }
     } catch {
@@ -213,7 +217,7 @@ async function processTtsQueue() {
         if (!voiceMap[char]) {
             throw `${char} not in voicemap. Configure character in extension settings voice map`
         }
-        const voice = await getTtsVoice(voiceMap[char])
+        const voice = await ttsProvider.getVoice((voiceMap[char]))
         const voiceId = voice.voice_id
         if (voiceId == null) {
             throw `Unable to attain voiceId for ${char}`
@@ -239,50 +243,53 @@ window.playFullConversation = playFullConversation
 
 function loadSettings() {
     const context = getContext()
-    if (Object.keys(extension_settings.elevenlabstts).length === 0) {
+    if (!ttsProviderName in extension_settings.tts){
-        Object.assign(extension_settings.elevenlabstts, defaultSettings)
+        extension_settings.tts[ttsProviderName] = {}
+    }
+    if (Object.keys(extension_settings.tts[ttsProviderName]).length === 0) {
+        Object.assign(extension_settings.tts[ttsProviderName], defaultSettings)
     }
 
-    $('#elevenlabs_api_key').val(
+    $('#tts_api_key').val(
-        extension_settings.elevenlabstts.elevenlabsApiKey
+        extension_settings.tts[ttsProviderName].apiKey
     )
-    $('#elevenlabs_voice_map').val(
+    $('#tts_voice_map').val(
-        extension_settings.elevenlabstts.elevenlabsVoiceMap
+        extension_settings.tts[ttsProviderName].voiceMap
     )
-    $('#elevenlabs_enabled').prop(
+    $('#tts_enabled').prop(
         'checked',
-        extension_settings.elevenlabstts.enabled
+        extension_settings.tts.enabled
     )
-    onElevenlabsApplyClick()
+    ttsProvider.updateSettings(extension_settings.tts[ttsProviderName].settings)
+    onApplyClick()
 }
 
 const defaultSettings = {
-    elevenlabsApiKey: '',
+    apiKey: '',
-    elevenlabsVoiceMap: '',
+    voiceMap: '',
-    elevenlabsEnabed: false
+    ttsEnabled: false
 }
 
-function setElevenLabsStatus(status, success) {
+function setTtsStatus(status, success) {
-    $('#elevenlabs_status').text(status)
+    $('#tts_status').text(status)
     if (success) {
-        $('#elevenlabs_status').removeAttr('style')
+        $('#tts_status').removeAttr('style')
     } else {
-        $('#elevenlabs_status').css('color', 'red')
+        $('#tts_status').css('color', 'red')
     }
 }
 
 async function updateApiKey() {
-    const context = getContext()
+    const value = $('#tts_api_key').val()
-    const value = $('#elevenlabs_api_key').val()
 
     // Using this call to validate API key
     ttsProvider.API_KEY = String(value)
     await ttsProvider.fetchTtsVoiceIds().catch(error => {
         ttsProvider.API_KEY = null
-        throw `ElevenLabs TTS API key invalid`
+        throw `TTS API key invalid`
     })
 
-    extension_settings.elevenlabstts.elevenlabsApiKey = String(value)
+    extension_settings.tts[ttsProviderName].apiKey = String(value)
     console.debug(`Saved new API_KEY: ${value}`)
     saveSettingsDebounced()
 }
@@ -299,26 +306,12 @@ function parseVoiceMap(voiceMapString) {
     return parsedVoiceMap
 }
 
-async function getTtsVoice(name) {
-    // We're caching the list of voice_ids. This might cause trouble if the user creates a new voice without restarting
-    if (elevenlabsTtsVoices.length == 0) {
-        elevenlabsTtsVoices = await ttsProvider.fetchTtsVoiceIds()
-    }
-    const match = elevenlabsTtsVoices.filter(
-        elevenVoice => elevenVoice.name == name
-    )[0]
-    if (!match) {
-        throw `TTS Voice name ${name} not found in ElevenLabs account`
-    }
-    return match
-}
-
 async function voicemapIsValid(parsedVoiceMap) {
     let valid = true
     for (const characterName in parsedVoiceMap) {
         const parsedVoiceName = parsedVoiceMap[characterName]
         try {
-            await getTtsVoice(parsedVoiceName)
+            await ttsProvider.getVoice(parsedVoiceName)
         } catch (error) {
             console.error(error)
             valid = false
@@ -330,13 +323,13 @@ async function voicemapIsValid(parsedVoiceMap) {
 async function updateVoiceMap() {
     let isValidResult = false
     const context = getContext()
-    // console.debug("onElevenlabsVoiceMapSubmit");
+    // console.debug("onvoiceMapSubmit");
-    const value = $('#elevenlabs_voice_map').val()
+    const value = $('#tts_voice_map').val()
     const parsedVoiceMap = parseVoiceMap(value)
     isValidResult = await voicemapIsValid(parsedVoiceMap)
     if (isValidResult) {
-        extension_settings.elevenlabstts.elevenlabsVoiceMap = String(value)
+        extension_settings.tts[ttsProviderName].voiceMap = String(value)
-        context.elevenlabsVoiceMap = String(value)
+        context.voiceMap = String(value)
         voiceMap = parsedVoiceMap
         console.debug(`Saved new voiceMap: ${value}`)
         saveSettingsDebounced()
@@ -345,19 +338,19 @@ async function updateVoiceMap() {
     }
 }
 
-function onElevenlabsApplyClick() {
+function onApplyClick() {
     Promise.all([updateApiKey(), updateVoiceMap()])
         .then(([result1, result2]) => {
             updateUiAudioPlayState()
-            setElevenLabsStatus('Successfully applied settings', true)
+            setTtsStatus('Successfully applied settings', true)
         })
         .catch(error => {
-            setElevenLabsStatus(error, false)
+            setTtsStatus(error, false)
         })
 }
 
-function onElevenlabsEnableClick() {
+function onEnableClick() {
-    extension_settings.elevenlabstts.enabled = $('#elevenlabs_enabled').is(
+    extension_settings.tts.enabled = $('#tts_enabled').is(
         ':checked'
     )
     updateUiAudioPlayState()
@@ -365,7 +358,7 @@ function onElevenlabsEnableClick() {
 }
 
 function updateUiAudioPlayState() {
-    if (extension_settings.elevenlabstts.enabled == true) {
+    if (extension_settings.tts.enabled == true) {
         audioControl.style.display = 'flex'
         const img = !audioElement.paused
             ? 'fa-solid fa-circle-pause'
@@ -388,44 +381,75 @@ function addAudioControl() {
     updateUiAudioPlayState()
 }
 
+function addUiTtsProviderConfig() {
+    $('#tts_provider_settings').append(ttsProvider.settingsHtml)
+    ttsProvider.onSettingsChange()
+}
+
+function loadTtsProvider(provider){
+    // Set up provider references. No init dependencies
+    extension_settings.tts.currentProvider = provider
+    ttsProviderName = provider
+    ttsProvider = new ttsProviders[provider]
+    saveSettingsDebounced()
+}
+
+function onTtsProviderSettingsInput(){
+    ttsProvider.onSettingsChange()
+    extension_settings.tts[ttsProviderName].settings = ttsProvider.settings
+    saveSettingsDebounced()
+}
+
 $(document).ready(function () {
     function addExtensionControls() {
         const settingsHtml = `
-        <div id="eleven_labs_settings">
+        <div id="tts_settings">
             <div class="inline-drawer">
                 <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>ElevenLabs TTS</b>
+                    <b>TTS</b>
                     <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                 </div>
                 <div class="inline-drawer-content">
                     <label>API Key</label>
-                    <input id="elevenlabs_api_key" type="text" class="text_pole" placeholder="<API Key>"/>
+                    <input id="tts_api_key" type="text" class="text_pole" placeholder="<API Key>"/>
                     <label>Voice Map</label>
-                    <textarea id="elevenlabs_voice_map" type="text" class="text_pole textarea_compact" rows="4"
+                    <textarea id="tts_voice_map" type="text" class="text_pole textarea_compact" rows="4"
                         placeholder="Enter comma separated map of charName:ttsName. Example: \nAqua:Bella,\nYou:Josh,"></textarea>
-                    <div class="elevenlabs_buttons">
+                    <div class="tts_buttons">
-                        <input id="elevenlabs_apply" class="menu_button" type="submit" value="Apply" />
+                        <input id="tts_apply" class="menu_button" type="submit" value="Apply" />
-                        <input id="elevenlabs_voices" class="menu_button" type="submit" value="Available voices" />
+                        <input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
                     </div>
                     <div>
-                        <label class="checkbox_label" for="elevenlabs_enabled">
+                        <label class="checkbox_label" for="tts_enabled">
-                            <input type="checkbox" id="elevenlabs_enabled" name="elevenlabs_enabled">
+                            <input type="checkbox" id="tts_enabled" name="tts_enabled">
                             Enabled
                         </label>
                     </div>
-                    <div id="elevenlabs_status">
+                    <div id="tts_status">
+                    </div>
+                    
+                    <div class="inline-drawer">
+                    <div class="inline-drawer-toggle inline-drawer-header">
+                        <b>TTS Config</b>
+                        <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+                    </div>
+                        <form id="tts_provider_settings" class="inline-drawer-content">
+                        </form>
                     </div>
                 </div>
             </div>
         </div>
         `
         $('#extensions_settings').append(settingsHtml)
-        $('#elevenlabs_apply').on('click', onElevenlabsApplyClick)
+        $('#tts_apply').on('click', onApplyClick)
-        $('#elevenlabs_enabled').on('click', onElevenlabsEnableClick)
+        $('#tts_enabled').on('click', onEnableClick)
-        $('#elevenlabs_voices').on('click', onElevenlabsVoicesClick)
+        $('#tts_voices').on('click', onTtsVoicesClick)
+        $('#tts_provider_settings').on('input', onTtsProviderSettingsInput)
     }
-    addAudioControl()
+    loadTtsProvider("elevenLabs") // No init dependencies
-    addExtensionControls()
+    addExtensionControls() // No init dependencies
-    loadSettings()
+    addUiTtsProviderConfig() // Depends on ttsProvider being loaded
-    setInterval(moduleWorker, UPDATE_INTERVAL)
+    loadSettings() // Depends on Extension Controls and ttsProvider
+    addAudioControl() // Depends on Extension Controls
+    setInterval(moduleWorker, UPDATE_INTERVAL) // Init depends on all the things
 })