import { saveTtsProviderSettings } from './index.js'; export { ElevenLabsTtsProvider }; class ElevenLabsTtsProvider { //########// // Config // //########// settings; voices = []; separator = ' ... ... ... '; defaultSettings = { stability: 0.75, similarity_boost: 0.75, apiKey: '', model: 'eleven_monolingual_v1', voiceMap: {}, }; get settingsHtml() { let html = `
`; return html; } onSettingsChange() { // Update dynamically this.settings.stability = $('#elevenlabs_tts_stability').val(); this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val(); this.settings.model = $('#elevenlabs_tts_model').find(':selected').val(); $('#elevenlabs_tts_stability_output').text(this.settings.stability); $('#elevenlabs_tts_similarity_boost_output').text(this.settings.similarity_boost); saveTtsProviderSettings(); } async loadSettings(settings) { // Pupulate Provider UI given input settings if (Object.keys(settings).length == 0) { console.info('Using default TTS Provider settings'); } // 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]; } else { 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_model').val(this.settings.model); $('#eleven_labs_connect').on('click', () => { this.onConnectClick(); }); $('#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)); $('#elevenlabs_tts_stability_output').text(this.settings.stability); $('#elevenlabs_tts_similarity_boost_output').text(this.settings.similarity_boost); 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 async checkReady() { await this.fetchTtsVoiceObjects(); } async onRefreshClick() { } async onConnectClick() { // Update on Apply click return await this.updateApiKey().catch((error) => { toastr.error(`ElevenLabs: ${error}`); }); } async updateApiKey() { // Using this call to validate API key this.settings.apiKey = $('#elevenlabs_tts_api_key').val(); await this.fetchTtsVoiceObjects().catch(error => { throw 'TTS API key validation failed'; }); console.debug(`Saved new API_KEY: ${this.settings.apiKey}`); $('#tts_status').text(''); this.onSettingsChange(); } //#################// // TTS Interfaces // //#################// async getVoice(voiceName) { if (this.voices.length == 0) { this.voices = await this.fetchTtsVoiceObjects(); } 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 generateTts(text, voiceId) { const historyId = await this.findTtsGenerationInHistory(text, voiceId); let response; if (historyId) { console.debug(`Found existing TTS generation with id ${historyId}`); response = await this.fetchTtsFromHistory(historyId); } else { console.debug('No existing TTS generation found, requesting new generation'); response = await this.fetchTtsGeneration(text, voiceId); } return response; } //###################// // Helper Functions // //###################// 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 fetchTtsVoiceObjects() { const headers = { 'xi-api-key': this.settings.apiKey, }; const response = await fetch('https://api.elevenlabs.io/v1/voices', { headers: headers, }); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${await response.text()}`); } const responseJson = await response.json(); return responseJson.voices; } async fetchTtsVoiceSettings() { const headers = { 'xi-api-key': this.settings.apiKey, }; const response = await fetch( 'https://api.elevenlabs.io/v1/voices/settings/default', { headers: headers, }, ); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${await response.text()}`); } return response.json(); } async fetchTtsGeneration(text, 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}`, { method: 'POST', headers: { 'xi-api-key': this.settings.apiKey, 'Content-Type': 'application/json', }, body: JSON.stringify({ model_id: model, text: text, voice_settings: { stability: Number(this.settings.stability), similarity_boost: Number(this.settings.similarity_boost), }, }), }, ); if (!response.ok) { toastr.error(response.statusText, 'TTS Generation Failed'); throw new Error(`HTTP ${response.status}: ${await response.text()}`); } return response; } async fetchTtsFromHistory(history_item_id) { console.info(`Fetched existing TTS with history_item_id ${history_item_id}`); const response = await fetch( `https://api.elevenlabs.io/v1/history/${history_item_id}/audio`, { headers: { 'xi-api-key': this.settings.apiKey, }, }, ); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${await response.text()}`); } return response; } async fetchTtsHistory() { const headers = { 'xi-api-key': this.settings.apiKey, }; const response = await fetch('https://api.elevenlabs.io/v1/history', { headers: headers, }); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${await response.text()}`); } const responseJson = await response.json(); return responseJson.history; } }