public/scripts/extensions/tts/vits.js

import { getPreviewString, saveTtsProviderSettings } from './index.js';

export { VITSTtsProvider };

class VITSTtsProvider {
    //########//
    // 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) {
        return text;
    }

    audioFormats = ['wav', 'ogg', 'silk', 'mp3', 'flac'];

    languageLabels = {
        'Auto': 'auto',
        'Chinese': 'zh',
        'English': 'en',
        'Japanese': 'ja',
        'Korean': 'ko',
    };

    langKey2LangCode = {
        'zh': 'zh-CN',
        'en': 'en-US',
        'ja': 'ja-JP',
        'ko': 'ko-KR',
    };

    modelTypes = {
        VITS: 'VITS',
        W2V2_VITS: 'W2V2-VITS',
        BERT_VITS2: 'BERT-VITS2',
    };

    defaultSettings = {
        provider_endpoint: 'http://localhost:23456',
        format: 'wav',
        lang: 'auto',
        length: 1.0,
        noise: 0.33,
        noisew: 0.4,
        segment_size: 50,
        streaming: false,
        dim_emotion: 0,
        sdp_ratio: 0.2,
        emotion: 0,
        text_prompt: '',
        style_text: '',
        style_weight: 1,
    };

    get settingsHtml() {
        let html = `
        <label for="vits_lang">Text Language</label>
        <select id="vits_lang">`;

        for (let language in this.languageLabels) {
            if (this.languageLabels[language] == this.settings?.lang) {
                html += `<option value="${this.languageLabels[language]}" selected="selected">${language}</option>`;
                continue;
            }
            html += `<option value="${this.languageLabels[language]}">${language}</option>`;
        }

        html += `
        </select>
        <label>VITS / W2V2-VITS / Bert-VITS2 Settings:</label><br/>
        <label for="vits_endpoint">Provider Endpoint:</label>
        <input id="vits_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
        <span>Use <a target="_blank" href="https://github.com/Artrajz/vits-simple-api">vits-simple-api</a>.</span><br/>

        <label for="vits_format">Audio format:</label>
        <select id="vits_format">`;

        for (let format of this.audioFormats) {
            if (format == this.settings?.format) {
                html += `<option value="${format}" selected="selected">${format}</option>`;
                continue;
            }
            html += `<option value="${format}">${format}</option>`;
        }

        html += `
        </select>
        <label for="vits_length">Audio length: <span id="vits_length_output">${this.defaultSettings.length}</span></label>
        <input id="vits_length" type="range" value="${this.defaultSettings.length}" min="0.0" max="5" step="0.01" />

        <label for="vits_noise">Noise: <span id="vits_noise_output">${this.defaultSettings.noise}</span></label>
        <input id="vits_noise" type="range" value="${this.defaultSettings.noise}" min="0.1" max="2" step="0.01" />

        <label for="vits_noisew">SDP noise: <span id="vits_noisew_output">${this.defaultSettings.noisew}</span></label>
        <input id="vits_noisew" type="range" value="${this.defaultSettings.noisew}" min="0.1" max="2" step="0.01" />

        <label for="vits_segment_size">Segment Size: <span id="vits_segment_size_output">${this.defaultSettings.segment_size}</span></label>
        <input id="vits_segment_size" type="range" value="${this.defaultSettings.segment_size}" min="0" max="1000" step="1" />

        <label for="vits_streaming" class="checkbox_label">
            <input id="vits_streaming" type="checkbox" />
            <span>Streaming</span>
        </label>

        <label>W2V2-VITS Settings:</label><br/>
        <label for="vits_dim_emotion">Dimensional emotion:</label>
        <input id="vits_dim_emotion" type="number" class="text_pole" min="0" max="5457" step="1" value="${this.defaultSettings.dim_emotion}"/>

        <label>BERT-VITS2 Settings:</label><br/>
        <label for="vits_sdp_ratio">sdp_ratio: <span id="vits_sdp_ratio_output">${this.defaultSettings.sdp_ratio}</span></label>
        <input id="vits_sdp_ratio" type="range" value="${this.defaultSettings.sdp_ratio}" min="0.0" max="1" step="0.01" />

        <label for="vits_emotion">emotion: <span id="vits_emotion_output">${this.defaultSettings.emotion}</span></label>
        <input id="vits_emotion" type="range" value="${this.defaultSettings.emotion}" min="0" max="9" step="1" />

        <label for="vits_text_prompt">Text Prompt:</label>
        <input id="vits_text_prompt" type="text" class="text_pole" maxlength="512" value="${this.defaultSettings.text_prompt}"/>

        <label for="vits_style_text">Style text:</label>
        <input id="vits_style_text" type="text" class="text_pole" maxlength="512" value="${this.defaultSettings.style_text}"/>

        <label for="vits_style_weight">Style weight <span id="vits_style_weight_output">${this.defaultSettings.style_weight}</span></label>
        <input id="vits_style_weight" type="range" value="${this.defaultSettings.style_weight}" min="0" max="1" step="0.01" />
        `;

        return html;
    }

    onSettingsChange() {
        // Used when provider settings are updated from UI
        this.settings.provider_endpoint = $('#vits_endpoint').val();
        this.settings.lang = $('#vits_lang').val();
        this.settings.format = $('#vits_format').val();
        this.settings.dim_emotion = $('#vits_dim_emotion').val();
        this.settings.text_prompt = $('#vits_text_prompt').val();
        this.settings.style_text = $('#vits_style_text').val();

        // Update the default TTS settings based on input fields
        this.settings.length = $('#vits_length').val();
        this.settings.noise = $('#vits_noise').val();
        this.settings.noisew = $('#vits_noisew').val();
        this.settings.segment_size = $('#vits_segment_size').val();
        this.settings.streaming = $('#vits_streaming').is(':checked');
        this.settings.sdp_ratio = $('#vits_sdp_ratio').val();
        this.settings.emotion = $('#vits_emotion').val();
        this.settings.style_weight = $('#vits_style_weight').val();

        // Update the UI to reflect changes
        $('#vits_length_output').text(this.settings.length);
        $('#vits_noise_output').text(this.settings.noise);
        $('#vits_noisew_output').text(this.settings.noisew);
        $('#vits_segment_size_output').text(this.settings.segment_size);
        $('#vits_sdp_ratio_output').text(this.settings.sdp_ratio);
        $('#vits_emotion_output').text(this.settings.emotion);
        $('#vits_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
        $('#vits_endpoint').val(this.settings.provider_endpoint);
        $('#vits_lang').val(this.settings.lang);
        $('#vits_format').val(this.settings.format);
        $('#vits_length').val(this.settings.length);
        $('#vits_noise').val(this.settings.noise);
        $('#vits_noisew').val(this.settings.noisew);
        $('#vits_segment_size').val(this.settings.segment_size);
        $('#vits_streaming').prop('checked', this.settings.streaming);
        $('#vits_dim_emotion').val(this.settings.dim_emotion);
        $('#vits_sdp_ratio').val(this.settings.sdp_ratio);
        $('#vits_emotion').val(this.settings.emotion);
        $('#vits_text_prompt').val(this.settings.text_prompt);
        $('#vits_style_text').val(this.settings.style_text);
        $('#vits_style_weight').val(this.settings.style_weight);

        // Update the UI to reflect changes
        $('#vits_length_output').text(this.settings.length);
        $('#vits_noise_output').text(this.settings.noise);
        $('#vits_noisew_output').text(this.settings.noisew);
        $('#vits_segment_size_output').text(this.settings.segment_size);
        $('#vits_sdp_ratio_output').text(this.settings.sdp_ratio);
        $('#vits_emotion_output').text(this.settings.emotion);
        $('#vits_style_weight_output').text(this.settings.style_weight);

        // Register input/change event listeners to update settings on user interaction
        $('#vits_endpoint').on('input', () => { this.onSettingsChange(); });
        $('#vits_lang').on('change', () => { this.onSettingsChange(); });
        $('#vits_format').on('change', () => { this.onSettingsChange(); });
        $('#vits_length').on('change', () => { this.onSettingsChange(); });
        $('#vits_noise').on('change', () => { this.onSettingsChange(); });
        $('#vits_noisew').on('change', () => { this.onSettingsChange(); });
        $('#vits_segment_size').on('change', () => { this.onSettingsChange(); });
        $('#vits_streaming').on('change', () => { this.onSettingsChange(); });
        $('#vits_dim_emotion').on('change', () => { this.onSettingsChange(); });
        $('#vits_sdp_ratio').on('change', () => { this.onSettingsChange(); });
        $('#vits_emotion').on('change', () => { this.onSettingsChange(); });
        $('#vits_text_prompt').on('change', () => { this.onSettingsChange(); });
        $('#vits_style_text').on('change', () => { this.onSettingsChange(); });
        $('#vits_style_weight').on('change', () => { this.onSettingsChange(); });

        await this.checkReady();

        console.info('VITS: 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 //
    //#################//

    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 getVoiceById(voiceId) {
        if (this.voices.length == 0) {
            this.voices = await this.fetchTtsVoiceObjects();
        }
        const match = this.voices.filter(
            v => v.voice_id == voiceId,
        )[0];
        if (!match) {
            throw `TTS Voice id ${voiceId} 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}/voice/speakers`);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${await response.json()}`);
        }
        const jsonData = await response.json();
        const voices = [];

        const addVoices = (modelType) => {
            jsonData[modelType].forEach(voice => {
                voices.push({
                    name: `[${modelType}] ${voice.name} (${voice.lang})`,
                    voice_id: `${modelType}&${voice.id}`,
                    preview_url: false,
                    lang: voice.lang,
                });
            });
        };
        for (const key in this.modelTypes) {
            addVoices(this.modelTypes[key]);
        }

        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_type&speaker_id))
     * @returns {Promise<Response|string>} Fetch response
     */
    async fetchTtsGeneration(inputText, voiceId, lang = null, forceNoStreaming = false) {
        console.info(`Generating new TTS for voice_id ${voiceId}`);

        const streaming = !forceNoStreaming && this.settings.streaming;
        const [model_type, speaker_id] = voiceId.split('&');
        const params = new URLSearchParams();
        params.append('text', inputText);
        params.append('id', speaker_id);
        if (streaming) {
            params.append('streaming', streaming);
            // Streaming response only supports MP3
        }
        else {
            params.append('format', this.settings.format);
        }
        params.append('lang', lang ?? this.settings.lang);
        params.append('length', this.settings.length);
        params.append('noise', this.settings.noise);
        params.append('noisew', this.settings.noisew);
        params.append('segment_size', this.settings.segment_size);

        if (model_type == this.modelTypes.W2V2_VITS) {
            params.append('emotion', this.settings.dim_emotion);
        }
        else if (model_type == this.modelTypes.BERT_VITS2) {
            params.append('sdp_ratio', this.settings.sdp_ratio);
            params.append('emotion', this.settings.emotion);
            if (this.settings.text_prompt) {
                params.append('text_prompt', this.settings.text_prompt);
            }
            if (this.settings.style_text) {
                params.append('style_text', this.settings.style_text);
                params.append('style_weight', this.settings.style_weight);
            }
        }

        const url = `${this.settings.provider_endpoint}/voice/${model_type.toLowerCase()}`;

        if (streaming) {
            return url + `?${params.toString()}`;
        }

        const response = await fetch(
            url,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: params,
            },
        );
        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 voice = await this.getVoiceById(id);
        const lang = voice.lang.includes(this.settings.lang) ? this.settings.lang : voice.lang[0];

        let lang_code = this.langKey2LangCode[lang];
        const text = getPreviewString(lang_code);
        const response = await this.fetchTtsGeneration(text, id, lang, true);
        if (typeof response != 'string') {
            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);
    }
}