1
import { getPreviewString, saveTtsProviderSettings } from './index.js';
2
import { getBase64Async } from '../../utils.js';
3
import { getRequestHeaders } from '../../../script.js';
4

5
export { SpeechT5TtsProvider };
6

7
class SpeechT5TtsProvider {
8
    //########//
9
    // Config //
10
    //########//
11

12
    settings;
13
    ready = false;
14
    voices = [];
15
    separator = ' .. ';
16
    audioElement = document.createElement('audio');
17

18
    defaultSettings = {
19
        speakers: [],
20
        speaker: '',
21
        voiceMap: {},
22
    };
23

24
    get settingsHtml() {
25
        let html = `
26
        <label for="speecht5_tts_speaker">Speaker:</label>
27
        <div class="flex-container">
28
            <select id="speecht5_tts_speaker" class="text_pole flex1">
29
            </select>
30
            <div id="speecht5_tts_speaker_upload_button" class="menu_button" title="Upload speaker">
31
                <i class="fa-solid fa-upload"></i>
32
            </div>
33
            <div id="speecht5_tts_delete_speaker_button" class="menu_button" title="Delete speaker">
34
                <i class="fa-solid fa-trash"></i>
35
            </div>
36
        </div>
37
        <input type="file" id="speecht5_tts_speaker_upload" class="displayNone">
38
        <div><i>Loading model for the first time may take a while!</i></div>
39
        `;
40
        return html;
41
    }
42

43
    onSettingsChange() {
44
        // Used when provider settings are updated from UI
45
        this.settings.speaker = $('#speecht5_tts_speaker').val();
46
        saveTtsProviderSettings();
47
    }
48

49
    async previewTtsVoice(voiceId) {
50
        this.audioElement.pause();
51
        this.audioElement.currentTime = 0;
52

53
        const text = getPreviewString('en-US');
54
        const response = await this.fetchTtsGeneration(text, voiceId);
55
        if (!response.ok) {
56
            throw new Error(`HTTP ${response.status}`);
57
        }
58

59
        const audio = await response.blob();
60
        const url = URL.createObjectURL(audio);
61
        this.audioElement.src = url;
62
        this.audioElement.play();
63
        this.audioElement.onended = () => URL.revokeObjectURL(url);
64
    }
65

66
    async loadSettings(settings) {
67
        // Pupulate Provider UI given input settings
68
        if (Object.keys(settings).length == 0) {
69
            console.info('Using default TTS Provider settings');
70
        }
71

72
        // Only accept keys defined in defaultSettings
73
        this.settings = this.defaultSettings;
74

75
        for (const key in settings) {
76
            if (key in this.settings) {
77
                this.settings[key] = settings[key];
78
            } else {
79
                throw `Invalid setting passed to TTS Provider: ${key}`;
80
            }
81
        }
82

83
        for (const speaker of this.settings.speakers) {
84
            $('#speecht5_tts_speaker').append($('<option>', {
85
                value: speaker.voice_id,
86
                text: speaker.name,
87
            }));
88
        }
89

90
        $('#speecht5_tts_speaker').val(this.settings.speaker);
91
        $('#speecht5_tts_speaker').on('change', this.onSettingsChange.bind(this));
92
        $('#speecht5_tts_speaker_upload_button').on('click', () => {
93
            $('#speecht5_tts_speaker_upload').trigger('click');
94
        });
95
        $('#speecht5_tts_speaker_upload').on('change', async (event) => {
96
            const file = event.target.files[0];
97
            if (file.size != 2048) {
98
                toastr.error('Invalid speaker file size, expected 2048 bytes');
99
                return;
100
            }
101

102
            const data = await getBase64Async(file);
103
            const speaker = {
104
                voice_id: file.name,
105
                name: file.name,
106
                data: data,
107
                lang: 'en-US',
108
                preview_url: false,
109
            };
110
            this.settings.speakers.push(speaker);
111
            $('#speecht5_tts_speaker').append($('<option>', {
112
                value: speaker.voice_id,
113
                text: speaker.name,
114
            }));
115
            $('#speecht5_tts_speaker').val(speaker.name);
116
            this.onSettingsChange();
117
        });
118
        $('#speecht5_tts_delete_speaker_button').on('click', () => {
119
            const confirmDelete = confirm('Are you sure you want to delete this speaker?');
120

121
            if (!confirmDelete) {
122
                return;
123
            }
124

125
            const speaker = this.settings.speakers.find(s => s.voice_id === this.settings.speaker);
126
            if (!speaker) {
127
                toastr.error('Speaker not found');
128
                return;
129
            }
130

131
            const index = this.settings.speakers.indexOf(speaker);
132
            this.settings.speakers.splice(index, 1);
133
            $(`#speecht5_tts_speaker option[value="${speaker.voice_id}"]`).remove();
134

135
            if (this.settings.speakers.length == 0) {
136
                console.log('No speakers left');
137
                return;
138
            }
139

140
            $('#speecht5_tts_speaker').val(this.settings.speakers[0].voice_id);
141
            this.onSettingsChange();
142
        });
143

144
        await this.checkReady();
145

146
        console.debug('SpeechT5: Settings loaded');
147
    }
148

149
    async checkReady() {
150
        return Promise.resolve();
151
    }
152

153
    async getVoice(voiceName) {
154
        return this.settings.speakers.find(s => s.voice_id === voiceName);
155
    }
156

157
    async generateTts(text, voiceId) {
158
        const response = await this.fetchTtsGeneration(text, voiceId);
159
        return response;
160
    }
161

162
    async fetchTtsVoiceObjects() {
163
        return this.settings.speakers;
164
    }
165

166
    async fetchTtsGeneration(inputText, voiceId) {
167
        console.info(`Generating new TTS for voice_id ${voiceId}`);
168
        const speaker = await this.getVoice(voiceId);
169

170
        if (!speaker) {
171
            toastr.error(`Speaker not found: ${voiceId}`, 'TTS Generation Failed');
172
            throw new Error(`Speaker not found: ${voiceId}`);
173
        }
174

175
        const response = await fetch(
176
            '/api/speech/synthesize',
177
            {
178
                method: 'POST',
179
                headers: getRequestHeaders(),
180
                body: JSON.stringify({
181
                    'text': inputText,
182
                    'speaker': speaker.data,
183
                    'model': 'Xenova/speecht5_tts',
184
                }),
185
            },
186
        );
187

188
        if (!response.ok) {
189
            toastr.error(response.statusText, 'TTS Generation Failed');
190
            throw new Error(`HTTP ${response.status}: ${await response.text()}`);
191
        }
192

193
        return response;
194
    }
195

196
    async fetchTtsFromHistory(history_item_id) {
197
        return Promise.resolve(history_item_id);
198
    }
199
}