Spaces:
Running
Running
| import { getPreviewString, saveTtsProviderSettings } from './index.js'; | |
| export { SBVits2TtsProvider }; | |
| class SBVits2TtsProvider { | |
| //########// | |
| // Config // | |
| //########// | |
| settings; | |
| ready = false; | |
| voices = []; | |
| separator = '. '; | |
| audioElement = document.createElement('audio'); | |
| /** | |
| * Perform any text processing before passing to TTS engine. | |
| * @param {string} text Input text | |
| * @returns {string} Processed text | |
| */ | |
| processText(text) { | |
| // backup for auto_split | |
| text = text.replace(/\n+/g, '<br>'); | |
| return text; | |
| } | |
| languageLabels = { | |
| 'Chinese': 'ZH', | |
| 'English': 'EN', | |
| 'Japanese': 'JP', | |
| }; | |
| langKey2LangCode = { | |
| 'ZH': 'zh-CN', | |
| 'EN': 'en-US', | |
| 'JP': 'ja-JP', | |
| }; | |
| defaultSettings = { | |
| provider_endpoint: 'http://localhost:5000', | |
| sdp_ratio: 0.2, | |
| noise: 0.6, | |
| noisew: 0.8, | |
| length: 1, | |
| language: 'JP', | |
| auto_split: true, | |
| split_interval: 0.5, | |
| assist_text: '', | |
| assist_text_weight: 1, | |
| style: 'Neutral', | |
| style_weight: 1, | |
| reference_audio_path: '', | |
| }; | |
| get settingsHtml() { | |
| let html = ` | |
| <label for="sbvits_api_language">Language</label> | |
| <select id="sbvits_api_language">`; | |
| for (let language in this.languageLabels) { | |
| if (this.languageLabels[language] == this.settings?.language) { | |
| html += `<option value="${this.languageLabels[language]}" selected="selected">${language}</option>`; | |
| continue; | |
| } | |
| html += `<option value="${this.languageLabels[language]}">${language}</option>`; | |
| } | |
| html += ` | |
| </select> | |
| <label">SBVits2 Settings:</label><br/> | |
| <label for="sbvits_tts_endpoint">Provider Endpoint:</label> | |
| <input id="sbvits_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/> | |
| <span>Use <a target="_blank" href="https://github.com/litagin02/Style-Bert-VITS2">Style-Bert-VITS2 API Server</a>.</span><br/> | |
| <label for="sbvits_sdp_ratio">sdp_ratio: <span id="sbvits_sdp_ratio_output">${this.defaultSettings.sdp_ratio}</span></label> | |
| <input id="sbvits_sdp_ratio" type="range" value="${this.defaultSettings.sdp_ratio}" min="0.0" max="1" step="0.01" /> | |
| <label for="sbvits_noise">noise: <span id="sbvits_noise_output">${this.defaultSettings.noise}</span></label> | |
| <input id="sbvits_noise" type="range" value="${this.defaultSettings.noise}" min="0.1" max="2" step="0.01" /> | |
| <label for="sbvits_noisew">noisew: <span id="sbvits_noisew_output">${this.defaultSettings.noisew}</span></label> | |
| <input id="sbvits_noisew" type="range" value="${this.defaultSettings.noisew}" min="0.1" max="2" step="0.01" /> | |
| <label for="sbvits_length">length: <span id="sbvits_length_output">${this.defaultSettings.length}</span></label> | |
| <input id="sbvits_length" type="range" value="${this.defaultSettings.length}" min="0.0" max="5" step="0.01" /> | |
| <label for="sbvits_auto_split" class="checkbox_label"> | |
| <input id="sbvits_auto_split" type="checkbox" ${this.defaultSettings.auto_split ? 'checked' : ''} /> | |
| Enable Text Splitting | |
| </label> | |
| <label for="sbvits_split_interval">split_interval: <span id="sbvits_split_interval_output">${this.defaultSettings.split_interval}</span></label> | |
| <input id="sbvits_split_interval" type="range" value="${this.defaultSettings.split_interval}" min="0.0" max="5" step="0.01" /> | |
| <label for="sbvits_assist_text">assist_text:</label> | |
| <input id="sbvits_assist_text" type="text" class="text_pole" maxlength="512" value="${this.defaultSettings.assist_text}"/> | |
| <label for="sbvits_assist_text_weight">assist_text_weight: <span id="sbvits_assist_text_weight_output">${this.defaultSettings.assist_text_weight}</span></label> | |
| <input id="sbvits_assist_text_weight" type="range" value="${this.defaultSettings.assist_text_weight}" min="0.0" max="1" step="0.01" /> | |
| <label for="sbvits_style_weight">style_weight: <span id="sbvits_style_weight_output">${this.defaultSettings.style_weight}</span></label> | |
| <input id="sbvits_style_weight" type="range" value="${this.defaultSettings.style_weight}" min="0.0" max="20" step="0.01" /> | |
| <label for="sbvits_reference_audio_path">reference_audio_path:</label> | |
| <input id="sbvits_reference_audio_path" type="text" class="text_pole" maxlength="512" value="${this.defaultSettings.reference_audio_path}"/> | |
| `; | |
| return html; | |
| } | |
| onSettingsChange() { | |
| // Used when provider settings are updated from UI | |
| this.settings.provider_endpoint = $('#sbvits_tts_endpoint').val(); | |
| this.settings.language = $('#sbvits_api_language').val(); | |
| this.settings.assist_text = $('#sbvits_assist_text').val(); | |
| this.settings.reference_audio_path = $('#sbvits_reference_audio_path').val(); | |
| // Update the default TTS settings based on input fields | |
| this.settings.sdp_ratio = $('#sbvits_sdp_ratio').val(); | |
| this.settings.noise = $('#sbvits_noise').val(); | |
| this.settings.noisew = $('#sbvits_noisew').val(); | |
| this.settings.length = $('#sbvits_length').val(); | |
| this.settings.auto_split = $('#sbvits_auto_split').is(':checked'); | |
| this.settings.split_interval = $('#sbvits_split_interval').val(); | |
| this.settings.assist_text_weight = $('#sbvits_assist_text_weight').val(); | |
| this.settings.style_weight = $('#sbvits_style_weight').val(); | |
| // Update the UI to reflect changes | |
| $('#sbvits_sdp_ratio_output').text(this.settings.sdp_ratio); | |
| $('#sbvits_noise_output').text(this.settings.noise); | |
| $('#sbvits_noisew_output').text(this.settings.noisew); | |
| $('#sbvits_length_output').text(this.settings.length); | |
| $('#sbvits_split_interval_output').text(this.settings.split_interval); | |
| $('#sbvits_assist_text_weight_output').text(this.settings.assist_text_weight); | |
| $('#sbvits_style_weight_output').text(this.settings.style_weight); | |
| saveTtsProviderSettings(); | |
| this.changeTTSSettings(); | |
| } | |
| 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; | |
| for (const key in settings) { | |
| if (key in this.settings) { | |
| this.settings[key] = settings[key]; | |
| } else { | |
| console.debug(`Ignoring non-user-configurable setting: ${key}`); | |
| } | |
| } | |
| // Set initial values from the settings | |
| $('#sbvits_tts_endpoint').val(this.settings.provider_endpoint); | |
| $('#sbvits_api_language').val(this.settings.language); | |
| $('#sbvits_assist_text').val(this.settings.assist_text); | |
| $('#sbvits_reference_audio_path').val(this.settings.reference_audio_path); | |
| $('#sbvits_sdp_ratio').val(this.settings.sdp_ratio); | |
| $('#sbvits_noise').val(this.settings.noise); | |
| $('#sbvits_noisew').val(this.settings.noisew); | |
| $('#sbvits_length').val(this.settings.length); | |
| $('#sbvits_auto_split').prop('checked', this.settings.auto_split); | |
| $('#sbvits_split_interval').val(this.settings.split_interval); | |
| $('#sbvits_assist_text_weight').val(this.settings.assist_text_weight); | |
| $('#sbvits_style_weight').val(this.settings.style_weight); | |
| // Update the UI to reflect changes | |
| $('#sbvits_sdp_ratio_output').text(this.settings.sdp_ratio); | |
| $('#sbvits_noise_output').text(this.settings.noise); | |
| $('#sbvits_noisew_output').text(this.settings.noisew); | |
| $('#sbvits_length_output').text(this.settings.length); | |
| $('#sbvits_split_interval_output').text(this.settings.split_interval); | |
| $('#sbvits_assist_text_weight_output').text(this.settings.assist_text_weight); | |
| $('#sbvits_style_weight_output').text(this.settings.style_weight); | |
| // Register input/change event listeners to update settings on user interaction | |
| $('#sbvits_tts_endpoint').on('input', () => { this.onSettingsChange(); }); | |
| $('#sbvits_api_language').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_assist_text').on('input', () => { this.onSettingsChange(); }); | |
| $('#sbvits_reference_audio_path').on('input', () => { this.onSettingsChange(); }); | |
| $('#sbvits_sdp_ratio').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_noise').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_noisew').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_length').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_auto_split').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_split_interval').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_assist_text_weight').on('change', () => { this.onSettingsChange(); }); | |
| $('#sbvits_style_weight').on('change', () => { this.onSettingsChange(); }); | |
| await this.checkReady(); | |
| console.info('SBVits2: Settings loaded'); | |
| } | |
| // Perform a simple readiness check by trying to fetch voiceIds | |
| async checkReady() { | |
| await Promise.allSettled([this.fetchTtsVoiceObjects(), this.changeTTSSettings()]); | |
| } | |
| async onRefreshClick() { | |
| return; | |
| } | |
| //#################// | |
| // TTS Interfaces // | |
| //#################// | |
| /** | |
| * Get a voice from the TTS provider. | |
| * @param {string} voiceName Voice name to get | |
| * @returns {Promise<Object>} Voice object | |
| */ | |
| async getVoice(voiceName) { | |
| if (this.voices.length == 0) { | |
| this.voices = await this.fetchTtsVoiceObjects(); | |
| } | |
| const match = this.voices.filter( | |
| v => v.name == voiceName, | |
| )[0]; | |
| if (!match) { | |
| throw `TTS Voice name ${voiceName} not found`; | |
| } | |
| return match; | |
| } | |
| async generateTts(text, voiceId) { | |
| const response = await this.fetchTtsGeneration(text, voiceId); | |
| return response; | |
| } | |
| //###########// | |
| // API CALLS // | |
| //###########// | |
| async fetchTtsVoiceObjects() { | |
| const response = await fetch(`${this.settings.provider_endpoint}/models/info`); | |
| if (!response.ok) { | |
| throw new Error(`HTTP ${response.status}: ${await response.json()}`); | |
| } | |
| const data = await response.json(); | |
| const voices = Object.keys(data).flatMap(key => { | |
| const config = data[key]; | |
| const spk2id = config.spk2id; | |
| const style2id = config.style2id; | |
| return Object.entries(spk2id).flatMap(([speaker, speaker_id]) => { | |
| return Object.entries(style2id).map(([style, styleId]) => { | |
| return { | |
| name: `${speaker} (${style})`, | |
| voice_id: `${key}-${speaker_id}-${style}`, | |
| preview_url: false, | |
| }; | |
| }); | |
| }); | |
| }); | |
| this.voices = voices; // Assign to the class property | |
| return voices; // Also return this list | |
| } | |
| // Each time a parameter is changed, we change the configuration | |
| async changeTTSSettings() { | |
| } | |
| /** | |
| * Fetch TTS generation from the API. | |
| * @param {string} inputText Text to generate TTS for | |
| * @param {string} voiceId Voice ID to use (model_id-speaker_id-style) | |
| * @returns {Promise<Response>} Fetch response | |
| */ | |
| async fetchTtsGeneration(inputText, voiceId) { | |
| console.info(`Generating new TTS for voice_id ${voiceId}`); | |
| const [model_id, speaker_id, ...rest] = voiceId.split('-'); | |
| const style = rest.join('-'); | |
| const params = new URLSearchParams(); | |
| // restore for auto_split | |
| inputText = inputText.replaceAll('<br>', '\n'); | |
| params.append('text', inputText); | |
| params.append('model_id', model_id); | |
| params.append('speaker_id', speaker_id); | |
| params.append('sdp_ratio', this.settings.sdp_ratio); | |
| params.append('noise', this.settings.noise); | |
| params.append('noisew', this.settings.noisew); | |
| params.append('length', this.settings.length); | |
| params.append('language', this.settings.language); | |
| params.append('auto_split', this.settings.auto_split); | |
| params.append('split_interval', this.settings.split_interval); | |
| if (this.settings.assist_text) { | |
| params.append('assist_text', this.settings.assist_text); | |
| params.append('assist_text_weight', this.settings.assist_text_weight); | |
| } | |
| params.append('style', style); | |
| params.append('style_weight', this.settings.style_weight); | |
| if (this.settings.reference_audio_path) { | |
| params.append('reference_audio_path', this.settings.reference_audio_path); | |
| } | |
| const url = `${this.settings.provider_endpoint}/voice?${params.toString()}`; | |
| const response = await fetch( | |
| url, | |
| { | |
| method: 'POST', | |
| headers: { | |
| }, | |
| }, | |
| ); | |
| if (!response.ok) { | |
| toastr.error(response.statusText, 'TTS Generation Failed'); | |
| throw new Error(`HTTP ${response.status}: ${await response.text()}`); | |
| } | |
| return response; | |
| } | |
| /** | |
| * Preview TTS for a given voice ID. | |
| * @param {string} id Voice ID | |
| */ | |
| async previewTtsVoice(id) { | |
| this.audioElement.pause(); | |
| this.audioElement.currentTime = 0; | |
| const lang_code = this.langKey2LangCode[this.settings.lang] ?? 'ja-JP'; | |
| const text = getPreviewString(lang_code); | |
| const response = await this.fetchTtsGeneration(text, id); | |
| if (!response.ok) { | |
| throw new Error(`HTTP ${response.status}: ${await response.text()}`); | |
| } | |
| const audio = await response.blob(); | |
| const url = URL.createObjectURL(audio); | |
| this.audioElement.src = url; | |
| this.audioElement.play(); | |
| } | |
| // Interface not used | |
| async fetchTtsFromHistory(history_item_id) { | |
| return Promise.resolve(history_item_id); | |
| } | |
| } | |