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
}
}