1
import { saveTtsProviderSettings } from './index.js';
2

3
export { ChatterboxTtsProvider };
4

5
class ChatterboxTtsProvider {
6
    //########//
7
    // Config //
8
    //########//
9

10
    settings = {};
11
    constructor() {
12
        // Initialize with default settings
13
        this.settings = {
14
            provider_endpoint: this.settings.provider_endpoint || 'http://localhost:8004',
15
            voice_mode: this.settings.voice_mode || 'predefined',
16
            predefined_voice: this.settings.predefined_voice || 'S1',
17
            reference_voice: this.settings.reference_voice || '',
18
            temperature: this.settings.temperature || 0.8,
19
            exaggeration: this.settings.exaggeration || 0.5,
20
            cfg_weight: this.settings.cfg_weight || 0.5,
21
            seed: this.settings.seed || -1,
22
            speed_factor: this.settings.speed_factor || 1.0,
23
            language: this.settings.language || 'en',
24
            split_text: this.settings.split_text || true,
25
            chunk_size: this.settings.chunk_size || 120,
26
            output_format: this.settings.output_format || 'wav',
27
            voiceMap: this.settings.voiceMap || {},
28
        };
29
    }
30

31
    ready = false;
32
    voices = [];
33
    separator = '. ';
34
    audioElement = document.createElement('audio');
35

36
    languageLabels = {
37
        'English': 'en',
38
        'Spanish': 'es',
39
        'French': 'fr',
40
        'German': 'de',
41
        'Italian': 'it',
42
        'Portuguese': 'pt',
43
        'Polish': 'pl',
44
        'Turkish': 'tr',
45
        'Russian': 'ru',
46
        'Dutch': 'nl',
47
        'Czech': 'cs',
48
        'Arabic': 'ar',
49
        'Chinese': 'zh-cn',
50
        'Japanese': 'ja',
51
        'Korean': 'ko',
52
        'Hindi': 'hi',
53
    };
54

55
    get settingsHtml() {
56
        let html = `<div class="chatterbox-settings-container">
57
            <div class="chatterbox-settings-header">
58
                <h3>Chatterbox TTS Settings</h3>
59
                <div class="status-indicator">
60
                    Status: <span id="chatterbox-status" class="offline">Offline</span>
61
                </div>
62
            </div>`;
63

64
        // Server endpoint
65
        html += `<div class="chatterbox-setting-row">
66
            <label for="chatterbox-endpoint">Server Endpoint:</label>
67
            <input id="chatterbox-endpoint" type="text" class="text_pole" value="${this.settings.provider_endpoint}" />
68
        </div>`;
69

70
        // Language selection
71
        html += `<div class="chatterbox-setting-row">
72
            <label for="chatterbox-language">Language:</label>
73
            <select id="chatterbox-language">`;
74
        for (let language in this.languageLabels) {
75
            html += `<option value="${this.languageLabels[language]}" ${this.languageLabels[language] === this.settings.language ? 'selected' : ''}>${language}</option>`;
76
        }
77
        html += `</select>
78
        </div>`;
79

80
        // Generation parameters
81
        html += `<div class="chatterbox-params-section">
82
            <h4>Generation Parameters</h4>`;
83

84
        // Temperature
85
        html += `<div class="chatterbox-setting-row">
86
            <label for="chatterbox-temperature">Temperature: <span id="chatterbox-temperature-value">${this.settings.temperature}</span></label>
87
            <input id="chatterbox-temperature" type="range" min="0" max="1" step="0.1" value="${this.settings.temperature}" />
88
        </div>`;
89

90
        // Exaggeration
91
        html += `<div class="chatterbox-setting-row">
92
            <label for="chatterbox-exaggeration">Exaggeration: <span id="chatterbox-exaggeration-value">${this.settings.exaggeration}</span></label>
93
            <input id="chatterbox-exaggeration" type="range" min="0" max="2" step="0.1" value="${this.settings.exaggeration}" />
94
        </div>`;
95

96
        // CFG Weight
97
        html += `<div class="chatterbox-setting-row">
98
            <label for="chatterbox-cfg-weight">CFG Weight: <span id="chatterbox-cfg-weight-value">${this.settings.cfg_weight}</span></label>
99
            <input id="chatterbox-cfg-weight" type="range" min="0" max="1" step="0.1" value="${this.settings.cfg_weight}" />
100
        </div>`;
101

102
        // Speed Factor
103
        html += `<div class="chatterbox-setting-row">
104
            <label for="chatterbox-speed">Speed Factor: <span id="chatterbox-speed-value">${this.settings.speed_factor}</span></label>
105
            <input id="chatterbox-speed" type="range" min="0.5" max="2" step="0.1" value="${this.settings.speed_factor}" />
106
        </div>`;
107

108
        // Seed
109
        html += `<div class="chatterbox-setting-row">
110
            <label for="chatterbox-seed">Seed (-1 for random):</label>
111
            <input id="chatterbox-seed" class="text_pole" type="number" min="-1" value="${this.settings.seed}" />
112
        </div>`;
113

114
        // Text chunking
115
        html += `<div class="chatterbox-setting-row">
116
            <label class="checkbox_label">
117
                <input type="checkbox" id="chatterbox-split-text" ${this.settings.split_text ? 'checked' : ''} />
118
                Split long texts into chunks
119
            </label>
120
        </div>`;
121

122
        // Chunk size
123
        html += `<div class="chatterbox-setting-row" id="chunk-size-row" ${!this.settings.split_text ? 'style="display: none;"' : ''}>
124
            <label for="chatterbox-chunk-size">Chunk Size:</label>
125
            <input id="chatterbox-chunk-size" class="text_pole" type="number" min="50" max="500" value="${this.settings.chunk_size}" />
126
        </div>`;
127

128
        // Output format
129
        html += `<div class="chatterbox-setting-row">
130
            <label for="chatterbox-format">Output Format:</label>
131
            <select id="chatterbox-format">
132
                <option value="wav" ${this.settings.output_format === 'wav' ? 'selected' : ''}>WAV</option>
133
                <option value="opus" ${this.settings.output_format === 'opus' ? 'selected' : ''}>Opus</option>
134
            </select>
135
        </div>`;
136

137
        html += '</div>'; // End params section
138

139
        // Footer with links
140
        html += `<div class="chatterbox-footer">
141
            <a href="${this.settings.provider_endpoint}" target="_blank">Chatterbox Web UI</a> |
142
            <a href="https://github.com/devnen/Chatterbox-TTS-Server" target="_blank">Documentation</a>
143
        </div>`;
144

145
        html += '</div>'; // End container
146

147
        // Add CSS styles
148
        html += `<style>
149
            .chatterbox-settings-container {
150
                padding: 10px;
151
            }
152
            .chatterbox-settings-header {
153
                display: flex;
154
                justify-content: space-between;
155
                align-items: center;
156
                margin-bottom: 15px;
157
            }
158
            .chatterbox-settings-header h3 {
159
                margin: 0;
160
            }
161
            .chatterbox-settings-container .status-indicator {
162
                font-weight: bold;
163
            }
164
            #chatterbox-status.ready { color: #4CAF50; }
165
            #chatterbox-status.offline { color: #f44336; }
166
            #chatterbox-status.processing { color: #2196F3; }
167
            .chatterbox-setting-row {
168
                margin-bottom: 10px;
169
                display: flex;
170
                align-items: center;
171
                gap: 10px;
172
            }
173
            .chatterbox-setting-row label {
174
                flex: 0 0 150px;
175
            }
176
            .chatterbox-setting-row label.checkbox_label {
177
                flex-basis: auto;
178
            }
179
            .chatterbox-setting-row input[type="text"],
180
            .chatterbox-setting-row input[type="number"],
181
            .chatterbox-setting-row select {
182
                flex: 1;
183
            }
184
            .chatterbox-setting-row input[type="range"] {
185
                flex: 1;
186
            }
187
            .chatterbox-params-section {
188
                margin-top: 15px;
189
                padding-top: 15px;
190
                border-top: 1px solid #ccc;
191
            }
192
            .chatterbox-params-section h4 {
193
                margin-top: 0;
194
                margin-bottom: 10px;
195
            }
196
            .chatterbox-footer {
197
                margin-top: 15px;
198
                padding-top: 15px;
199
                border-top: 1px solid #ccc;
200
                text-align: center;
201
                font-size: 0.9em;
202
            }
203
        </style>`;
204

205
        return html;
206
    }
207

208
    //######################//
209
    // Startup & Initialize //
210
    //######################//
211

212
    async loadSettings(settings) {
213
        this.updateStatus('Offline');
214

215
        if (Object.keys(settings).length === 0) {
216
            console.info('Using default Chatterbox TTS Provider settings');
217
        } else {
218
            // Populate settings with provided values
219
            for (const key in settings) {
220
                if (key in this.settings) {
221
                    this.settings[key] = settings[key];
222
                }
223
            }
224
        }
225

226
        // Update UI elements
227
        this.updateUIFromSettings();
228

229
        console.debug('ChatterboxTTS: Settings loaded');
230

231
        try {
232
            // Check if TTS provider is ready
233
            await this.checkReady();
234

235
            if (this.ready) {
236
                // Fetch all voice types for the voice map
237
                await this.fetchTtsVoiceObjects();
238
                this.updateStatus('Ready');
239
            }
240

241
            this.setupEventListeners();
242
        } catch (error) {
243
            console.error('Error loading Chatterbox settings:', error);
244
            this.updateStatus('Offline');
245
        }
246
    }
247

248
    updateUIFromSettings() {
249
        $('#chatterbox-endpoint').val(this.settings.provider_endpoint);
250
        $('#chatterbox-language').val(this.settings.language);
251
        $('#chatterbox-temperature').val(this.settings.temperature);
252
        $('#chatterbox-temperature-value').text(this.settings.temperature);
253
        $('#chatterbox-exaggeration').val(this.settings.exaggeration);
254
        $('#chatterbox-exaggeration-value').text(this.settings.exaggeration);
255
        $('#chatterbox-cfg-weight').val(this.settings.cfg_weight);
256
        $('#chatterbox-cfg-weight-value').text(this.settings.cfg_weight);
257
        $('#chatterbox-speed').val(this.settings.speed_factor);
258
        $('#chatterbox-speed-value').text(this.settings.speed_factor);
259
        $('#chatterbox-seed').val(this.settings.seed);
260
        $('#chatterbox-split-text').prop('checked', this.settings.split_text);
261
        $('#chatterbox-chunk-size').val(this.settings.chunk_size);
262
        $('#chatterbox-format').val(this.settings.output_format);
263

264
        // Show/hide chunk size based on split text
265
        if (this.settings.split_text) {
266
            $('#chunk-size-row').show();
267
        } else {
268
            $('#chunk-size-row').hide();
269
        }
270
    }
271

272
    //##############################//
273
    // Check Server is Available    //
274
    //##############################//
275

276
    async checkReady() {
277
        try {
278
            const response = await fetch(`${this.settings.provider_endpoint}/api/ui/initial-data`);
279

280
            if (!response.ok) {
281
                throw new Error(`HTTP Error Response: ${response.status} ${response.statusText}`);
282
            }
283

284
            const data = await response.json();
285

286
            // Check if we got valid data
287
            if (data) {
288
                this.ready = true;
289
                console.log('Chatterbox TTS service is ready.');
290
            } else {
291
                this.ready = false;
292
                console.log('Chatterbox TTS service returned invalid data.');
293
            }
294
        } catch (error) {
295
            console.error('Error checking Chatterbox TTS service readiness:', error);
296
            this.ready = false;
297
        }
298
    }
299

300
    //######################//
301
    // Get Available Voices //
302
    //######################//
303

304
    async fetchTtsVoiceObjects() {
305
        try {
306
            // Always fetch predefined voices
307
            const predefinedResponse = await fetch(`${this.settings.provider_endpoint}/get_predefined_voices`);
308
            if (!predefinedResponse.ok) {
309
                throw new Error(`HTTP ${predefinedResponse.status}: ${predefinedResponse.statusText}`);
310
            }
311

312
            const predefinedData = await predefinedResponse.json();
313

314
            // Transform predefined voices
315
            const predefinedVoices = predefinedData.map(voice => ({
316
                name: voice.display_name,
317
                voice_id: voice.voice_id || voice.filename,
318
                preview_url: null,
319
                lang: voice.language || 'en',
320
            }));
321

322
            // Always try to fetch reference voices
323
            let referenceVoices = [];
324
            try {
325
                const refResponse = await fetch(`${this.settings.provider_endpoint}/get_reference_files`);
326
                if (refResponse.ok) {
327
                    const refData = await refResponse.json();
328
                    referenceVoices = refData.map(filename => ({
329
                        name: `[Clone] ${filename}`,
330
                        voice_id: `ref_${filename}`,
331
                        preview_url: null,
332
                        lang: 'en',
333
                    }));
334
                }
335
            } catch (error) {
336
                console.warn('Failed to fetch reference voices:', error);
337
            }
338

339
            // Combine all voices
340
            this.voices = [...predefinedVoices, ...referenceVoices];
341

342
            console.log(`Loaded ${this.voices.length} voices (${predefinedVoices.length} predefined, ${referenceVoices.length} reference)`);
343
            return this.voices;
344
        } catch (error) {
345
            console.error('Error fetching Chatterbox voices:', error);
346
            this.voices = [];
347
            return [];
348
        }
349
    }
350

351
    // Alias for internal use
352
    async fetchVoices() {
353
        return this.fetchTtsVoiceObjects();
354
    }
355

356
    //###########################//
357
    // Setup Event Listeners     //
358
    //###########################//
359

360
    setupEventListeners() {
361
        // Server endpoint change
362
        $('#chatterbox-endpoint').on('input', () => {
363
            this.settings.provider_endpoint = $('#chatterbox-endpoint').val();
364
            this.onSettingsChange();
365
        });
366

367
        // Language
368
        $('#chatterbox-language').on('change', (e) => {
369
            this.settings.language = e.target.value;
370
            this.onSettingsChange();
371
        });
372

373
        // Parameter sliders
374
        $('#chatterbox-temperature').on('input', (e) => {
375
            this.settings.temperature = parseFloat(e.target.value);
376
            $('#chatterbox-temperature-value').text(this.settings.temperature);
377
            this.onSettingsChange();
378
        });
379

380
        $('#chatterbox-exaggeration').on('input', (e) => {
381
            this.settings.exaggeration = parseFloat(e.target.value);
382
            $('#chatterbox-exaggeration-value').text(this.settings.exaggeration);
383
            this.onSettingsChange();
384
        });
385

386
        $('#chatterbox-cfg-weight').on('input', (e) => {
387
            this.settings.cfg_weight = parseFloat(e.target.value);
388
            $('#chatterbox-cfg-weight-value').text(this.settings.cfg_weight);
389
            this.onSettingsChange();
390
        });
391

392
        $('#chatterbox-speed').on('input', (e) => {
393
            this.settings.speed_factor = parseFloat(e.target.value);
394
            $('#chatterbox-speed-value').text(this.settings.speed_factor);
395
            this.onSettingsChange();
396
        });
397

398
        // Seed
399
        $('#chatterbox-seed').on('change', (e) => {
400
            this.settings.seed = parseInt(e.target.value);
401
            this.onSettingsChange();
402
        });
403

404
        // Text splitting
405
        $('#chatterbox-split-text').on('change', (e) => {
406
            this.settings.split_text = e.target.checked;
407
            if (e.target.checked) {
408
                $('#chunk-size-row').show();
409
            } else {
410
                $('#chunk-size-row').hide();
411
            }
412
            this.onSettingsChange();
413
        });
414

415
        $('#chatterbox-chunk-size').on('change', (e) => {
416
            this.settings.chunk_size = parseInt(e.target.value);
417
            this.onSettingsChange();
418
        });
419

420
        // Output format
421
        $('#chatterbox-format').on('change', (e) => {
422
            this.settings.output_format = e.target.value;
423
            this.onSettingsChange();
424
        });
425
    }
426

427
    //#############################//
428
    // Store ST interface settings //
429
    //#############################//
430

431
    onSettingsChange() {
432
        // Save the updated settings
433
        saveTtsProviderSettings();
434
    }
435

436
    //#########################//
437
    // Handle Reload button    //
438
    //#########################//
439

440
    async onRefreshClick() {
441
        try {
442
            this.updateStatus('Processing');
443
            await this.checkReady();
444

445
            if (this.ready) {
446
                await this.fetchTtsVoiceObjects();
447
                this.updateStatus('Ready');
448
            } else {
449
                this.updateStatus('Offline');
450
            }
451
        } catch (error) {
452
            console.error('Error during refresh:', error);
453
            this.updateStatus('Offline');
454
        }
455
    }
456

457
    //##################//
458
    // Preview Voice    //
459
    //##################//
460

461
    async previewTtsVoice(voiceId) {
462
        try {
463
            this.updateStatus('Processing');
464

465
            const previewText = 'Hello! This is a preview of the selected voice.';
466

467
            // Determine if this is a reference voice
468
            let isReferenceVoice = false;
469
            let actualVoiceId = voiceId;
470

471
            if (voiceId && voiceId.startsWith('ref_')) {
472
                isReferenceVoice = true;
473
                actualVoiceId = voiceId.substring(4); // Remove 'ref_' prefix
474
            }
475

476
            // Generate preview using the main TTS endpoint
477
            const requestBody = {
478
                text: previewText,
479
                voice_mode: isReferenceVoice ? 'clone' : 'predefined',
480
                temperature: this.settings.temperature,
481
                exaggeration: this.settings.exaggeration,
482
                cfg_weight: this.settings.cfg_weight,
483
                seed: this.settings.seed >= 0 ? this.settings.seed : Math.floor(Math.random() * 2147483648), // Use random seed if -1
484
                speed_factor: this.settings.speed_factor,
485
                language: this.settings.language,
486
                split_text: false, // Don't split for preview
487
                output_format: this.settings.output_format,
488
            };
489

490
            // Add voice-specific parameters
491
            if (isReferenceVoice) {
492
                requestBody.reference_audio_filename = actualVoiceId;
493
            } else {
494
                requestBody.predefined_voice_id = actualVoiceId;
495
            }
496

497
            const response = await fetch(`${this.settings.provider_endpoint}/tts`, {
498
                method: 'POST',
499
                headers: {
500
                    'Content-Type': 'application/json',
501
                },
502
                body: JSON.stringify(requestBody),
503
            });
504

505
            if (!response.ok) {
506
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
507
            }
508

509
            // Get the audio blob and play it
510
            const audioBlob = await response.blob();
511
            const audioUrl = URL.createObjectURL(audioBlob);
512

513
            const audio = new Audio(audioUrl);
514
            audio.addEventListener('ended', () => {
515
                URL.revokeObjectURL(audioUrl);
516
                this.updateStatus('Ready');
517
            });
518

519
            await audio.play();
520
        } catch (error) {
521
            console.error('Error previewing voice:', error);
522
            this.updateStatus('Ready');
523
            throw error;
524
        }
525
    }
526

527
    //#####################//
528
    // Get Voice Object    //
529
    //#####################//
530

531
    async getVoice(voiceName) {
532
        // Ensure voices are loaded
533
        if (this.voices.length === 0) {
534
            await this.fetchTtsVoiceObjects();
535
        }
536

537
        // Find the voice object by name or voice_id
538
        let match = this.voices.find(voice =>
539
            voice.name === voiceName ||
540
            voice.voice_id === voiceName ||
541
            voice.display_name === voiceName,
542
        );
543

544
        if (!match) {
545
            console.warn(`Voice not found: ${voiceName}`);
546
            // Check if it's a reference voice that wasn't in the list
547
            if (voiceName && voiceName.startsWith('ref_')) {
548
                const filename = voiceName.substring(4);
549
                return {
550
                    name: `[Clone] ${filename}`,
551
                    voice_id: voiceName,
552
                    preview_url: null,
553
                    lang: 'en',
554
                };
555
            }
556
            // Return a default voice object
557
            return {
558
                name: voiceName || 'Default',
559
                voice_id: voiceName || this.settings.predefined_voice || 'S1',
560
                preview_url: null,
561
                lang: 'en',
562
            };
563
        }
564

565
        return match;
566
    }
567

568
    //##################//
569
    // Generate TTS     //
570
    //##################//
571

572
    async generateTts(inputText, voiceId) {
573
        try {
574
            this.updateStatus('Processing');
575

576
            // Determine if this is a reference voice
577
            let isReferenceVoice = false;
578
            let actualVoiceId = voiceId;
579

580
            if (voiceId && voiceId.startsWith('ref_')) {
581
                isReferenceVoice = true;
582
                actualVoiceId = voiceId.substring(4); // Remove 'ref_' prefix
583
            }
584

585
            // Prepare the request body
586
            const requestBody = {
587
                text: inputText,
588
                voice_mode: isReferenceVoice ? 'clone' : 'predefined',
589
                temperature: this.settings.temperature,
590
                exaggeration: this.settings.exaggeration,
591
                cfg_weight: this.settings.cfg_weight,
592
                seed: this.settings.seed >= 0 ? this.settings.seed : Math.floor(Math.random() * 2147483648), // Use random seed if -1
593
                speed_factor: this.settings.speed_factor,
594
                language: this.settings.language,
595
                split_text: this.settings.split_text,
596
                chunk_size: this.settings.chunk_size,
597
                output_format: this.settings.output_format,
598
            };
599

600
            // Add voice-specific parameters
601
            if (isReferenceVoice) {
602
                requestBody.reference_audio_filename = actualVoiceId;
603
            } else {
604
                requestBody.predefined_voice_id = actualVoiceId || this.settings.predefined_voice;
605
            }
606

607
            console.log('Generating TTS with params:', requestBody);
608

609
            const response = await fetch(`${this.settings.provider_endpoint}/tts`, {
610
                method: 'POST',
611
                headers: {
612
                    'Content-Type': 'application/json',
613
                    'Cache-Control': 'no-cache',
614
                },
615
                body: JSON.stringify(requestBody),
616
            });
617

618
            if (!response.ok) {
619
                const errorText = await response.text();
620
                console.error('TTS generation error:', errorText);
621
                throw new Error(`HTTP ${response.status}: ${errorText}`);
622
            }
623

624
            this.updateStatus('Ready');
625

626
            // Return the response directly - SillyTavern expects a Response object
627
            return response;
628
        } catch (error) {
629
            console.error('Error in generateTts:', error);
630
            this.updateStatus('Ready');
631
            throw error;
632
        }
633
    }
634

635
    //######################//
636
    // Update Status        //
637
    //######################//
638

639
    updateStatus(status) {
640
        const statusElement = document.getElementById('chatterbox-status');
641
        if (statusElement) {
642
            statusElement.textContent = status;
643
            statusElement.className = status.toLowerCase();
644
        }
645
    }
646
}