rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Updated AllTalk Extension to support AllTalk V2 

1. Core Feature Addition:
   - Added AllTalk V1/V2 server version selection
   - Added RVC (Realistic Voice Conversion) support for V2
   - RVC features are automatically disabled when V1 is selected

2. Code Improvements:
   - Replaced custom debounce implementation with shared utils.js debounce utility
   - Fixed linting issues:
     - Converted HTML attribute quotes in template literals to single quotes
     - Added trailing commas where required
     - Fixed console.error message formatting

3. New Settings/Properties Added:
   ```javascript
   server_version: 'v2' (default)
   rvc_character_voice: 'Disabled'
   rvc_character_pitch: '0'
   rvc_narrator_voice: 'Disabled'
   rvc_narrator_pitch: '0'
   ```

4. Bug Fixes/Improvements:
   - Better error handling for RVC voice fetching
   - Improved URL handling for V1/V2 differences in API responses
   - Enhanced settings initialization and validation

5. Structural Changes:
   - Added RVC-specific UI elements and controls
   - Added version-specific logic for API endpoints
   - Improved settings synchronization between UI and backend

**NOTE** On line 70 there is an eslint bypass:

```javascript
        // HTML template literals can trigger ESLint quotes warnings when quotes are used in HTML attributes.
        // Disabling quotes rule for this one line as it's a false positive with HTML template literals.
        // eslint-disable-next-line quotes
        let html = `<div class="at-settings-separator">AllTalk V2 Settings</div>`;
```

The reason is:
1. ESLint's quotes rule wants all strings to use single quotes
2. However, this is a template literal containing HTML, where double quotes are standard for attributes
3. I tried various solutions:
   - Using single quotes: `<div class='at-settings-separator'>`
   - Using double quotes: `<div class="at-settings-separator">`
   - Even tried escaping quotes
   But ESLint just kept flagging it as an error
This commit is contained in:
erew123 2024-11-15 13:14:38 +00:00 committed by GitHub
parent 3138252928
commit e857db40fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 171 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

383
public/scripts/extensions/tts/alltalk.js
View File

@ -1,4 +1,5 @@
import { doExtrasFetch, getApiUrl, modules } from '../../extensions.js'; import { doExtrasFetch } from '../../extensions.js';
import { debounce } from '../../utils.js';
import { saveTtsProviderSettings } from './index.js'; import { saveTtsProviderSettings } from './index.js';
export { AllTalkTtsProvider }; export { AllTalkTtsProvider };
@ -13,7 +14,7 @@ class AllTalkTtsProvider {
// Initialize with default settings if they are not already set // Initialize with default settings if they are not already set
this.settings = { this.settings = {
provider_endpoint: this.settings.provider_endpoint || 'http://localhost:7851', provider_endpoint: this.settings.provider_endpoint || 'http://localhost:7851',
server_version: this.settings.server_version || 'v2', server_version: this.settings.server_version || 'v2',
language: this.settings.language || 'en', language: this.settings.language || 'en',
voiceMap: this.settings.voiceMap || {}, voiceMap: this.settings.voiceMap || {},
at_generation_method: this.settings.at_generation_method || 'standard_generation', at_generation_method: this.settings.at_generation_method || 'standard_generation',
@ -24,7 +25,7 @@ class AllTalkTtsProvider {
rvc_character_pitch: this.settings.rvc_character_pitch || '0', rvc_character_pitch: this.settings.rvc_character_pitch || '0',
rvc_narrator_voice: this.settings.rvc_narrator_voice || 'Disabled', rvc_narrator_voice: this.settings.rvc_narrator_voice || 'Disabled',
rvc_narrator_pitch: this.settings.rvc_narrator_pitch || '0', rvc_narrator_pitch: this.settings.rvc_narrator_pitch || '0',
finetuned_model: this.settings.finetuned_model || 'false' finetuned_model: this.settings.finetuned_model || 'false',
}; };
// Separate property for dynamically updated settings from the server // Separate property for dynamically updated settings from the server
this.dynamicSettings = { this.dynamicSettings = {
@ -63,161 +64,159 @@ class AllTalkTtsProvider {
}; };
get settingsHtml() { get settingsHtml() {
// HTML template literals can trigger ESLint quotes warnings when quotes are used in HTML attributes.
// Disabling quotes rule for this one line as it's a false positive with HTML template literals.
// eslint-disable-next-line quotes
let html = `<div class="at-settings-separator">AllTalk V2 Settings</div>`; let html = `<div class="at-settings-separator">AllTalk V2 Settings</div>`;
html += `<div class="at-settings-row"> html += `<div class='at-settings-row'>
<div class='at-settings-option'>
<div class="at-settings-option"> <label for='at_generation_method'>AllTalk TTS Generation Method</label>
<label for="at_generation_method">AllTalk TTS Generation Method</label> <select id='at_generation_method'>
<select id="at_generation_method"> <option value='standard_generation'>Standard Audio Generation (AT Narrator - Optional)</option>
<option value="standard_generation">Standard Audio Generation (AT Narrator - Optional)</option> <option value='streaming_enabled'>Streaming Audio Generation (AT Narrator - Disabled)</option>
<option value="streaming_enabled">Streaming Audio Generation (AT Narrator - Disabled)</option>
</select> </select>
</div> </div>
</div>`; </div>`;
html += `<div class="at-settings-row"> html += `<div class='at-settings-row'>
<div class='at-settings-option'>
<div class="at-settings-option"> <label for='at_narrator_enabled'>AT Narrator</label>
<label for="at_narrator_enabled">AT Narrator</label> <select id='at_narrator_enabled'>
<select id="at_narrator_enabled"> <option value='true'>Enabled</option>
<option value="true">Enabled</option> <option value='silent'>Enabled (Silenced)</option>
<option value="silent">Enabled (Silenced)</option> <option value='false'>Disabled</option>
<option value="false">Disabled</option>
</select> </select>
</div> </div>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="at_narrator_text_not_inside">Text Not Inside * or " is</label> <label for='at_narrator_text_not_inside'>Text Not Inside * or " is</label>
<select id="at_narrator_text_not_inside"> <select id='at_narrator_text_not_inside'>
<option value="character">Character</option> <option value='character'>Character</option>
<option value="narrator">Narrator</option> <option value='narrator'>Narrator</option>
<option value="silent">Silent</option> <option value='silent'>Silent</option>
</select> </select>
</div> </div>
</div>`; </div>`;
html += `<div class="at-settings-row"> html += `<div class='at-settings-row'>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="narrator_voice">Narrator Voice</label> <label for='narrator_voice'>Narrator Voice</label>
<select id="narrator_voice">`; <select id='narrator_voice'>`;
if (this.voices) { if (this.voices) {
for (let voice of this.voices) { for (let voice of this.voices) {
html += `<option value="${voice.voice_id}">${voice.name}</option>`; html += `<option value='${voice.voice_id}'>${voice.name}</option>`;
} }
} }
html += `</select> html += `</select>
</div> </div>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="language_options">Language</label> <label for='language_options'>Language</label>
<select id="language_options">`; <select id='language_options'>`;
for (let language in this.languageLabels) { for (let language in this.languageLabels) {
html += `<option value="${this.languageLabels[language]}" ${this.languageLabels[language] === this.settings?.language ? 'selected="selected"' : ''}>${language}</option>`; html += `<option value='${this.languageLabels[language]}' ${this.languageLabels[language] === this.settings?.language ? 'selected="selected"' : ''}>${language}</option>`;
} }
html += `</select> html += `</select>
</div> </div>
</div>`; </div>`;
html += `<div class="at-settings-row"> html += `<div class='at-settings-row'>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="rvc_character_voice">RVC Character</label> <label for='rvc_character_voice'>RVC Character</label>
<select id="rvc_character_voice">`; <select id='rvc_character_voice'>`;
if (this.rvcVoices) { if (this.rvcVoices) {
for (let rvccharvoice of this.rvcVoices) { for (let rvccharvoice of this.rvcVoices) {
html += `<option value="${rvccharvoice.voice_id}">${rvccharvoice.name}</option>`; html += `<option value='${rvccharvoice.voice_id}'>${rvccharvoice.name}</option>`;
} }
} }
html += `</select> html += `</select>
</div> </div>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="rvc_narrator_voice">RVC Narrator</label> <label for='rvc_narrator_voice'>RVC Narrator</label>
<select id="rvc_narrator_voice">`; <select id='rvc_narrator_voice'>`;
if (this.rvcVoices) { if (this.rvcVoices) {
for (let rvcnarrvoice of this.rvcVoices) { for (let rvcnarrvoice of this.rvcVoices) {
html += `<option value="${rvcnarrvoice.voice_id}">${rvcnarrvoice.name}</option>`; html += `<option value='${rvcnarrvoice.voice_id}'>${rvcnarrvoice.name}</option>`;
} }
} }
html += `</select> html += `</select>
</div> </div>
</div>`; </div>`;
// Add the RVC pitch control row html += `<div class='at-settings-row'>
html += `<div class="at-settings-row"> <div class='at-settings-option'>
<div class="at-settings-option"> <label for='rvc_character_pitch'>RVC Character Pitch</label>
<label for="rvc_character_pitch">RVC Character Pitch</label> <select id='rvc_character_pitch'>`;
<select id="rvc_character_pitch">`;
for (let i = -24; i <= 24; i++) { for (let i = -24; i <= 24; i++) {
const selected = i === 0 ? 'selected="selected"' : ''; const selected = i === 0 ? 'selected="selected"' : '';
html += `<option value="${i}" ${selected}>${i}</option>`; html += `<option value='${i}' ${selected}>${i}</option>`;
} }
html += `</select> html += `</select>
</div> </div>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="rvc_narrator_pitch">RVC Narrator Pitch</label> <label for='rvc_narrator_pitch'>RVC Narrator Pitch</label>
<select id="rvc_narrator_pitch">`; <select id='rvc_narrator_pitch'>`;
for (let i = -24; i <= 24; i++) { for (let i = -24; i <= 24; i++) {
const selected = i === 0 ? 'selected="selected"' : ''; const selected = i === 0 ? 'selected="selected"' : '';
html += `<option value="${i}" ${selected}>${i}</option>`; html += `<option value='${i}' ${selected}>${i}</option>`;
} }
html += `</select> html += `</select>
</div> </div>
</div>`; </div>`;
html += `<div class="at-model-endpoint-row"> html += `<div class='at-model-endpoint-row'>
<div class="at-model-option"> <div class='at-model-option'>
<label for="switch_model">Switch Model</label> <label for='switch_model'>Switch Model</label>
<select id="switch_model"> <select id='switch_model'>
<!-- Options will be dynamically populated --> <!-- Options will be dynamically populated -->
</select> </select>
</div> </div>
<div class="at-endpoint-option"> <div class='at-endpoint-option'>
<label for="at_server">AllTalk Endpoint:</label> <label for='at_server'>AllTalk Endpoint:</label>
<input id="at_server" type="text" class="text_pole" maxlength="80" value="${this.settings.provider_endpoint}"/> <input id='at_server' type='text' class='text_pole' maxlength='80' value='${this.settings.provider_endpoint}'/>
</div> </div>
</div>`; </div>`;
html += `<div class="at-settings-row"> html += `<div class='at-settings-row'>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="server_version">AllTalk Server Version</label> <label for='server_version'>AllTalk Server Version</label>
<select id="server_version"> <select id='server_version'>
<option value="v1">AllTalk V1</option> <option value='v1'>AllTalk V1</option>
<option value="v2">AllTalk V2</option> <option value='v2'>AllTalk V2</option>
</select> </select>
</div> </div>
</div>`; </div>`;
html += `<div class="at-model-endpoint-row"> html += `<div class='at-model-endpoint-row'>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="low_vram">Low VRAM</label> <label for='low_vram'>Low VRAM</label>
<input id="low_vram" type="checkbox"/> <input id='low_vram' type='checkbox'/>
</div> </div>
<div class="at-settings-option"> <div class='at-settings-option'>
<label for="deepspeed">DeepSpeed</label> <label for='deepspeed'>DeepSpeed</label>
<input id="deepspeed" type="checkbox"/> <input id='deepspeed' type='checkbox'/>
</div> </div>
<div class="at-settings-option status-option"> <div class='at-settings-option status-option'>
<span>Status: <span id="status_info">Ready</span></span> <span>Status: <span id='status_info'>Ready</span></span>
</div> </div>
<div class="at-settings-option empty-option"> <div class='at-settings-option empty-option'>
<!-- This div remains empty for spacing --> <!-- This div remains empty for spacing -->
</div> </div>
</div>`; </div>`;
html += `<div class='at-website-row'>
html += `<div class="at-website-row"> <div class='at-website-option'>
<div class="at-website-option"> <span>AllTalk V2<a target='_blank' href='${this.settings.provider_endpoint}'>Config & Docs</a>.</span>
<span>AllTalk V2<a target="_blank" href="${this.settings.provider_endpoint}">Config & Docs</a>.</span>
</div> </div>
<div class="at-website-option"> <div class='at-website-option'>
<span>AllTalk <a target="_blank" href="https://github.com/erew123/alltalk_tts/">Website</a>.</span> <span>AllTalk <a target='_blank' href='https://github.com/erew123/alltalk_tts/'>Website</a>.</span>
</div> </div>
</div>`; </div>`;
html += `<div class="at-website-row"> html += `<div class='at-website-row'>
<div class="at-website-option"> <div class='at-website-option'>
<span>- If you <strong>change your TTS engine</strong> in AllTalk, you will need to <strong>Reload</strong> (button above) and re-select your voices.</span><br><br> <span>- If you <strong>change your TTS engine</strong> in AllTalk, you will need to <strong>Reload</strong> (button above) and re-select your voices.</span><br><br>
<span>- Assuming the server is <strong>Status: Ready</strong>, most problems will be resolved by hitting Reload and selecting voices that match the loaded TTS engine.</span><br><br> <span>- Assuming the server is <strong>Status: Ready</strong>, most problems will be resolved by hitting Reload and selecting voices that match the loaded TTS engine.</span><br><br>
<span>- <strong>Text-generation-webui</strong> users - Uncheck <strong>Enable TTS</strong> in the TGWUI interface, or you will hear 2x voices and file names being generated.</span> <span>- <strong>Text-generation-webui</strong> users - Uncheck <strong>Enable TTS</strong> in the TGWUI interface, or you will hear 2x voices and file names being generated.</span>
@ -258,7 +257,7 @@ class AllTalkTtsProvider {
$('#rvc_character_voice').val(this.settings.rvc_character_voice); $('#rvc_character_voice').val(this.settings.rvc_character_voice);
$('#rvc_narrator_voice').val(this.settings.rvc_narrator_voice); $('#rvc_narrator_voice').val(this.settings.rvc_narrator_voice);
$('#rvc_character_pitch').val(this.settings.rvc_character_pitch); $('#rvc_character_pitch').val(this.settings.rvc_character_pitch);
$('#rvc_narrator_pitch').val(this.settings.rvc_narrator_pitch); $('#rvc_narrator_pitch').val(this.settings.rvc_narrator_pitch);
console.debug('AllTalkTTS: Settings loaded'); console.debug('AllTalkTTS: Settings loaded');
try { try {
@ -273,7 +272,7 @@ class AllTalkTtsProvider {
this.applySettingsToHTML(); this.applySettingsToHTML();
updateStatus('Ready'); updateStatus('Ready');
} catch (error) { } catch (error) {
console.error("Error loading settings:", error); console.error('Error loading settings:', error);
updateStatus('Offline'); updateStatus('Offline');
} }
} }
@ -381,7 +380,7 @@ class AllTalkTtsProvider {
name: filename, name: filename,
voice_id: filename, voice_id: filename,
preview_url: null, // Preview URL will be dynamically generated preview_url: null, // Preview URL will be dynamically generated
lang: 'en' // Default language lang: 'en', // Default language
}; };
}); });
this.voices = voices; // Assign to the class property this.voices = voices; // Assign to the class property
@ -393,7 +392,7 @@ class AllTalkTtsProvider {
console.log('Skipping RVC voices fetch for V1 server'); console.log('Skipping RVC voices fetch for V1 server');
return []; return [];
} }
console.log('Fetching RVC Voices'); console.log('Fetching RVC Voices');
try { try {
const response = await fetch(`${this.settings.provider_endpoint}/api/rvcvoices`); const response = await fetch(`${this.settings.provider_endpoint}/api/rvcvoices`);
@ -402,20 +401,20 @@ class AllTalkTtsProvider {
console.error('Error text:', errorText); console.error('Error text:', errorText);
throw new Error(`HTTP ${response.status}: ${errorText}`); throw new Error(`HTTP ${response.status}: ${errorText}`);
} }
const data = await response.json(); const data = await response.json();
if (!data || !data.rvcvoices) { if (!data || !data.rvcvoices) {
console.error('Invalid data format:', data); console.error('Invalid data format:', data);
throw new Error('Invalid data format received from /api/rvcvoices'); throw new Error('Invalid data format received from /api/rvcvoices');
} }
const voices = data.rvcvoices.map(filename => { const voices = data.rvcvoices.map(filename => {
return { return {
name: filename, name: filename,
voice_id: filename, voice_id: filename,
}; };
}); });
console.log('RVC voices:', voices); console.log('RVC voices:', voices);
this.rvcVoices = voices; // Assign to the class property this.rvcVoices = voices; // Assign to the class property
this.updateRvcVoiceDropdowns(); // Update UI after fetching voices this.updateRvcVoiceDropdowns(); // Update UI after fetching voices
@ -467,11 +466,11 @@ class AllTalkTtsProvider {
// Handle all RVC-related elements // Handle all RVC-related elements
const rvcElements = document.querySelectorAll('.rvc-setting'); const rvcElements = document.querySelectorAll('.rvc-setting');
const isV2 = this.settings.server_version === 'v2'; const isV2 = this.settings.server_version === 'v2';
rvcElements.forEach(element => { rvcElements.forEach(element => {
element.style.display = isV2 ? 'block' : 'none'; element.style.display = isV2 ? 'block' : 'none';
}); });
// Update and disable/enable character voice dropdown // Update and disable/enable character voice dropdown
const rvcCharacterVoiceSelect = document.getElementById('rvc_character_voice'); const rvcCharacterVoiceSelect = document.getElementById('rvc_character_voice');
if (rvcCharacterVoiceSelect) { if (rvcCharacterVoiceSelect) {
@ -489,7 +488,7 @@ class AllTalkTtsProvider {
} }
} }
} }
// Update and disable/enable narrator voice dropdown // Update and disable/enable narrator voice dropdown
const rvcNarratorVoiceSelect = document.getElementById('rvc_narrator_voice'); const rvcNarratorVoiceSelect = document.getElementById('rvc_narrator_voice');
if (rvcNarratorVoiceSelect) { if (rvcNarratorVoiceSelect) {
@ -507,13 +506,13 @@ class AllTalkTtsProvider {
} }
} }
} }
// Update pitch inputs // Update pitch inputs
const characterPitch = document.getElementById('rvc_character_pitch'); const characterPitch = document.getElementById('rvc_character_pitch');
if (characterPitch) { if (characterPitch) {
characterPitch.disabled = !isV2; characterPitch.disabled = !isV2;
} }
const narratorPitch = document.getElementById('rvc_narrator_pitch'); const narratorPitch = document.getElementById('rvc_narrator_pitch');
if (narratorPitch) { if (narratorPitch) {
narratorPitch.disabled = !isV2; narratorPitch.disabled = !isV2;
@ -602,7 +601,7 @@ class AllTalkTtsProvider {
const languageSelect = document.getElementById('language_options'); const languageSelect = document.getElementById('language_options');
if (languageSelect) { if (languageSelect) {
// Ensure default language is set // Ensure default language is set
this.settings.language = this.settings.language; this.settings.language = this.settings.language || 'en';
languageSelect.innerHTML = ''; languageSelect.innerHTML = '';
for (let language in this.languageLabels) { for (let language in this.languageLabels) {
@ -622,56 +621,54 @@ class AllTalkTtsProvider {
//########################################// //########################################//
setupEventListeners() { setupEventListeners() {
let debounceTimeout;
const debounceDelay = 1400; // Milliseconds
// Define the event handler function // Define the event handler function
const onModelSelectChange = async (event) => { const onModelSelectChange = async (event) => {
console.log("Model select change event triggered"); // Debugging statement console.log('Model select change event triggered');
const selectedModel = event.target.value; const selectedModel = event.target.value;
console.log(`Selected model: ${selectedModel}`); // Debugging statement console.log(`Selected model: ${selectedModel}`);
// Set status to Processing
updateStatus('Processing'); updateStatus('Processing');
try { try {
const response = await fetch(`${this.settings.provider_endpoint}/api/reload?tts_method=${encodeURIComponent(selectedModel)}`, { const response = await fetch(`${this.settings.provider_endpoint}/api/reload?tts_method=${encodeURIComponent(selectedModel)}`, {
method: 'POST' method: 'POST',
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`); throw new Error(`HTTP Error: ${response.status}`);
} }
const data = await response.json(); const data = await response.json();
console.log("POST response data:", data); // Debugging statement console.log('POST response data:', data);
// Set status to Ready if successful
updateStatus('Ready'); updateStatus('Ready');
} catch (error) { } catch (error) {
console.error("POST request error:", error); // Debugging statement console.error('POST request error:', error);
// Set status to Error in case of failure
updateStatus('Error'); updateStatus('Error');
} }
// Handle response or error
}; };
// Switch Model Listener with debounce
const modelSelect = document.getElementById('switch_model');
if (modelSelect) {
const debouncedModelSelectChange = debounce(onModelSelectChange, 1400);
modelSelect.addEventListener('change', debouncedModelSelectChange);
}
// AllTalk Server version change listener // AllTalk Server version change listener
const serverVersionSelect = document.getElementById('server_version'); const serverVersionSelect = document.getElementById('server_version');
if (serverVersionSelect) { if (serverVersionSelect) {
serverVersionSelect.addEventListener('change', async (event) => { serverVersionSelect.addEventListener('change', async (event) => {
this.settings.server_version = event.target.value; this.settings.server_version = event.target.value;
// Clear and refetch voices if needed
if (event.target.value === 'v2') { if (event.target.value === 'v2') {
await this.fetchRvcVoiceObjects(); await this.fetchRvcVoiceObjects();
} }
this.updateRvcVoiceDropdowns(); this.updateRvcVoiceDropdowns();
this.onSettingsChange(); this.onSettingsChange();
}); });
} }
// RVC Voice and Pitch listeners
const rvcCharacterVoiceSelect = document.getElementById('rvc_character_voice'); const rvcCharacterVoiceSelect = document.getElementById('rvc_character_voice');
if (rvcCharacterVoiceSelect) { if (rvcCharacterVoiceSelect) {
rvcCharacterVoiceSelect.addEventListener('change', (event) => { rvcCharacterVoiceSelect.addEventListener('change', (event) => {
this.settings.rvccharacter_voice_gen = event.target.value; this.settings.rvccharacter_voice_gen = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
@ -679,7 +676,7 @@ class AllTalkTtsProvider {
if (rvcNarratorVoiceSelect) { if (rvcNarratorVoiceSelect) {
rvcNarratorVoiceSelect.addEventListener('change', (event) => { rvcNarratorVoiceSelect.addEventListener('change', (event) => {
this.settings.rvcnarrator_voice_gen = event.target.value; this.settings.rvcnarrator_voice_gen = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
@ -687,7 +684,7 @@ class AllTalkTtsProvider {
if (rvcCharacterPitchSelect) { if (rvcCharacterPitchSelect) {
rvcCharacterPitchSelect.addEventListener('change', (event) => { rvcCharacterPitchSelect.addEventListener('change', (event) => {
this.settings.rvc_character_pitch = event.target.value; this.settings.rvc_character_pitch = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
@ -695,59 +692,34 @@ class AllTalkTtsProvider {
if (rvcNarratorPitchSelect) { if (rvcNarratorPitchSelect) {
rvcNarratorPitchSelect.addEventListener('change', (event) => { rvcNarratorPitchSelect.addEventListener('change', (event) => {
this.settings.rvc_narrator_pitch = event.target.value; this.settings.rvc_narrator_pitch = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
}
const debouncedModelSelectChange = (event) => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(() => {
onModelSelectChange(event);
}, debounceDelay);
};
// Switch Model Listener
const modelSelect = document.getElementById('switch_model');
if (modelSelect) {
// Remove the event listener if it was previously added
modelSelect.removeEventListener('change', debouncedModelSelectChange);
// Add the debounced event listener
modelSelect.addEventListener('change', debouncedModelSelectChange);
} }
// DeepSpeed Listener // DeepSpeed Listener
const deepspeedCheckbox = document.getElementById('deepspeed'); const deepspeedCheckbox = document.getElementById('deepspeed');
if (deepspeedCheckbox) { if (deepspeedCheckbox) {
deepspeedCheckbox.addEventListener('change', async (event) => { const handleDeepSpeedChange = async (event) => {
const deepSpeedValue = event.target.checked ? 'True' : 'False'; const deepSpeedValue = event.target.checked ? 'True' : 'False';
// Set status to Processing
updateStatus('Processing'); updateStatus('Processing');
try { try {
const response = await fetch(`${this.settings.provider_endpoint}/api/deepspeed?new_deepspeed_value=${deepSpeedValue}`, { const response = await fetch(`${this.settings.provider_endpoint}/api/deepspeed?new_deepspeed_value=${deepSpeedValue}`, {
method: 'POST' method: 'POST',
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`); throw new Error(`HTTP Error: ${response.status}`);
} }
const data = await response.json(); const data = await response.json();
console.log("POST response data:", data); // Debugging statement console.log('POST response data:', data);
// Set status to Ready if successful
updateStatus('Ready'); updateStatus('Ready');
} catch (error) { } catch (error) {
console.error("POST request error:", error); // Debugging statement console.error('POST request error:', error);
// Set status to Error in case of failure
updateStatus('Error'); updateStatus('Error');
} }
});
}
function lowvramdebounce(func, delay) {
let debounceTimer;
return function (...args) {
const context = this;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
}; };
const debouncedHandleDeepSpeedChange = debounce(handleDeepSpeedChange, 300);
deepspeedCheckbox.addEventListener('change', debouncedHandleDeepSpeedChange);
} }
// Low VRAM Listener // Low VRAM Listener
@ -755,38 +727,33 @@ class AllTalkTtsProvider {
if (lowVramCheckbox) { if (lowVramCheckbox) {
const handleLowVramChange = async (event) => { const handleLowVramChange = async (event) => {
const lowVramValue = event.target.checked ? 'True' : 'False'; const lowVramValue = event.target.checked ? 'True' : 'False';
// Set status to Processing
updateStatus('Processing'); updateStatus('Processing');
try { try {
const response = await fetch(`${this.settings.provider_endpoint}/api/lowvramsetting?new_low_vram_value=${lowVramValue}`, { const response = await fetch(`${this.settings.provider_endpoint}/api/lowvramsetting?new_low_vram_value=${lowVramValue}`, {
method: 'POST' method: 'POST',
}); });
if (!response.ok) { if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`); throw new Error(`HTTP Error: ${response.status}`);
} }
const data = await response.json(); const data = await response.json();
console.log("POST response data:", data); // Debugging statement console.log('POST response data:', data);
// Set status to Ready if successful
updateStatus('Ready'); updateStatus('Ready');
} catch (error) { } catch (error) {
console.error("POST request error:", error); // Debugging statement console.error('POST request error:', error);
// Set status to Error in case of failure
updateStatus('Error'); updateStatus('Error');
} }
}; };
const debouncedHandleLowVramChange = lowvramdebounce(handleLowVramChange, 300); // Adjust delay as needed const debouncedHandleLowVramChange = debounce(handleLowVramChange, 300);
lowVramCheckbox.addEventListener('change', debouncedHandleLowVramChange); lowVramCheckbox.addEventListener('change', debouncedHandleLowVramChange);
} }
// Other listeners without debounce since they don't need it
// Narrator Voice Dropdown Listener
const narratorVoiceSelect = document.getElementById('narrator_voice'); const narratorVoiceSelect = document.getElementById('narrator_voice');
if (narratorVoiceSelect) { if (narratorVoiceSelect) {
narratorVoiceSelect.addEventListener('change', (event) => { narratorVoiceSelect.addEventListener('change', (event) => {
this.settings.narrator_voice_gen = `${event.target.value}`; this.settings.narrator_voice_gen = `${event.target.value}`;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
@ -794,7 +761,7 @@ class AllTalkTtsProvider {
if (textNotInsideSelect) { if (textNotInsideSelect) {
textNotInsideSelect.addEventListener('change', (event) => { textNotInsideSelect.addEventListener('change', (event) => {
this.settings.text_not_inside = event.target.value; this.settings.text_not_inside = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
@ -809,15 +776,10 @@ class AllTalkTtsProvider {
const narratorOption = event.target.value; const narratorOption = event.target.value;
this.settings.narrator_enabled = narratorOption; this.settings.narrator_enabled = narratorOption;
// Check if narrator is disabled
const isNarratorDisabled = narratorOption === 'false'; const isNarratorDisabled = narratorOption === 'false';
textNotInsideSelect.disabled = isNarratorDisabled; textNotInsideSelect.disabled = isNarratorDisabled;
narratorVoiceSelect.disabled = isNarratorDisabled; narratorVoiceSelect.disabled = isNarratorDisabled;
console.log(`Narrator option: ${narratorOption}`);
console.log(`textNotInsideSelect disabled: ${textNotInsideSelect.disabled}`);
console.log(`narratorVoiceSelect disabled: ${narratorVoiceSelect.disabled}`);
if (narratorOption === 'true') { if (narratorOption === 'true') {
ttsPassAsterisksCheckbox.checked = false; ttsPassAsterisksCheckbox.checked = false;
$('#tts_pass_asterisks').click(); $('#tts_pass_asterisks').click();
@ -842,47 +804,44 @@ class AllTalkTtsProvider {
}); });
} }
// Event Listener for AT Generation Method Dropdown // Event Listener for AT Generation Method Dropdown
const atGenerationMethodSelect = document.getElementById('at_generation_method'); const atGenerationMethodSelect = document.getElementById('at_generation_method');
const atNarratorEnabledSelect = document.getElementById('at_narrator_enabled');
if (atGenerationMethodSelect) { if (atGenerationMethodSelect) {
atGenerationMethodSelect.addEventListener('change', (event) => { atGenerationMethodSelect.addEventListener('change', (event) => {
const selectedMethod = event.target.value; const selectedMethod = event.target.value;
if (selectedMethod === 'streaming_enabled') { if (selectedMethod === 'streaming_enabled') {
// Disable and unselect AT Narrator // Disable and unselect AT Narrator
atNarratorEnabledSelect.disabled = true; atNarratorSelect.disabled = true;
atNarratorEnabledSelect.value = 'false'; atNarratorSelect.value = 'false';
textNotInsideSelect.disabled = true; textNotInsideSelect.disabled = true;
narratorVoiceSelect.disabled = true; narratorVoiceSelect.disabled = true;
} else if (selectedMethod === 'standard_generation') { } else if (selectedMethod === 'standard_generation') {
// Enable AT Narrator // Enable AT Narrator
atNarratorEnabledSelect.disabled = false; atNarratorSelect.disabled = false;
} }
this.settings.at_generation_method = selectedMethod; // Update the setting here this.settings.at_generation_method = selectedMethod;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
// Listener for Language Dropdown // Language Dropdown Listener
const languageSelect = document.getElementById('language_options'); const languageSelect = document.getElementById('language_options');
if (languageSelect) { if (languageSelect) {
languageSelect.addEventListener('change', (event) => { languageSelect.addEventListener('change', (event) => {
this.settings.language = event.target.value; this.settings.language = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
// Listener for AllTalk Endpoint Input // AllTalk Endpoint Input Listener
const atServerInput = document.getElementById('at_server'); const atServerInput = document.getElementById('at_server');
if (atServerInput) { if (atServerInput) {
atServerInput.addEventListener('input', (event) => { atServerInput.addEventListener('input', (event) => {
this.settings.provider_endpoint = event.target.value; this.settings.provider_endpoint = event.target.value;
this.onSettingsChange(); // Save the settings after change this.onSettingsChange();
}); });
} }
} }
//#############################// //#############################//
@ -900,7 +859,7 @@ class AllTalkTtsProvider {
this.settings.rvc_character_voice = $('#rvc_character_voice').val(); this.settings.rvc_character_voice = $('#rvc_character_voice').val();
this.settings.rvc_narrator_voice = $('#rvc_narrator_voice').val(); this.settings.rvc_narrator_voice = $('#rvc_narrator_voice').val();
this.settings.rvc_character_pitch = $('#rvc_character_pitch').val(); this.settings.rvc_character_pitch = $('#rvc_character_pitch').val();
this.settings.rvc_narrator_pitch = $('#rvc_narrator_pitch').val(); this.settings.rvc_narrator_pitch = $('#rvc_narrator_pitch').val();
this.settings.narrator_voice_gen = $('#narrator_voice').val(); this.settings.narrator_voice_gen = $('#narrator_voice').val();
// Save the updated settings // Save the updated settings
saveTtsProviderSettings(); saveTtsProviderSettings();
@ -931,44 +890,44 @@ class AllTalkTtsProvider {
try { try {
// Prepare data for POST request // Prepare data for POST request
const postData = new URLSearchParams(); const postData = new URLSearchParams();
postData.append("voice", `${voiceName}`); postData.append('voice', `${voiceName}`);
// Add RVC parameters for V2 if applicable // Add RVC parameters for V2 if applicable
if (this.settings.server_version === 'v2' && this.settings.rvc_character_voice !== 'Disabled') { if (this.settings.server_version === 'v2' && this.settings.rvc_character_voice !== 'Disabled') {
postData.append("rvccharacter_voice_gen", this.settings.rvc_character_voice); postData.append('rvccharacter_voice_gen', this.settings.rvc_character_voice);
postData.append("rvccharacter_pitch", this.settings.rvc_character_pitch || "0"); postData.append('rvccharacter_pitch', this.settings.rvc_character_pitch || '0');
} }
// Making the POST request // Making the POST request
const response = await fetch(`${this.settings.provider_endpoint}/api/previewvoice/`, { const response = await fetch(`${this.settings.provider_endpoint}/api/previewvoice/`, {
method: "POST", method: 'POST',
headers: { headers: {
'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/x-www-form-urlencoded',
}, },
body: postData, body: postData,
}); });
if (!response.ok) { if (!response.ok) {
const errorText = await response.text(); const errorText = await response.text();
console.error(`[previewTtsVoice] Error Response Text:`, errorText); console.error('previewTtsVoice Error Response Text:', errorText);
throw new Error(`HTTP ${response.status}: ${errorText}`); throw new Error(`HTTP ${response.status}: ${errorText}`);
} }
const data = await response.json(); const data = await response.json();
if (data.output_file_url) { if (data.output_file_url) {
// Handle V1/V2 URL differences // Handle V1/V2 URL differences
const fullUrl = this.settings.server_version === 'v1' const fullUrl = this.settings.server_version === 'v1'
? data.output_file_url ? data.output_file_url
: `${this.settings.provider_endpoint}${data.output_file_url}`; : `${this.settings.provider_endpoint}${data.output_file_url}`;
const audioElement = new Audio(fullUrl); const audioElement = new Audio(fullUrl);
audioElement.play().catch(e => console.error("Error playing audio:", e)); audioElement.play().catch(e => console.error('Error playing audio:', e));
} else { } else {
console.warn("[previewTtsVoice] No output file URL received in the response"); console.warn('previewTtsVoice No output file URL received in the response');
throw new Error("No output file URL received in the response"); throw new Error('No output file URL received in the response');
} }
} catch (error) { } catch (error) {
console.error("[previewTtsVoice] Exception caught during preview generation:", error); console.error('previewTtsVoice Exception caught during preview generation:', error);
throw error; throw error;
} }
} }
@ -1003,7 +962,7 @@ class AllTalkTtsProvider {
if (this.settings.at_generation_method === 'streaming_enabled') { if (this.settings.at_generation_method === 'streaming_enabled') {
// Construct the streaming URL // Construct the streaming URL
const streamingUrl = `${this.settings.provider_endpoint}/api/tts-generate-streaming?text=${encodeURIComponent(inputText)}&voice=${encodeURIComponent(voiceId)}&language=${encodeURIComponent(this.settings.language)}&output_file=stream_output.wav`; const streamingUrl = `${this.settings.provider_endpoint}/api/tts-generate-streaming?text=${encodeURIComponent(inputText)}&voice=${encodeURIComponent(voiceId)}&language=${encodeURIComponent(this.settings.language)}&output_file=stream_output.wav`;
console.log("Streaming URL:", streamingUrl); console.log('Streaming URL:', streamingUrl);
// Return the streaming URL directly // Return the streaming URL directly
return streamingUrl; return streamingUrl;
@ -1017,7 +976,7 @@ class AllTalkTtsProvider {
return audioResponse; // Return the fetch response directly return audioResponse; // Return the fetch response directly
} }
} catch (error) { } catch (error) {
console.error("Error in generateTts:", error); console.error('Error in generateTts:', error);
throw error; throw error;
} }
} }
@ -1030,30 +989,30 @@ class AllTalkTtsProvider {
async fetchTtsGeneration(inputText, voiceId) { async fetchTtsGeneration(inputText, voiceId) {
const requestBody = new URLSearchParams({ const requestBody = new URLSearchParams({
'text_input': inputText, 'text_input': inputText,
'text_filtering': "standard", 'text_filtering': 'standard',
'character_voice_gen': voiceId, 'character_voice_gen': voiceId,
'narrator_enabled': this.settings.narrator_enabled, 'narrator_enabled': this.settings.narrator_enabled,
'narrator_voice_gen': this.settings.narrator_voice_gen, 'narrator_voice_gen': this.settings.narrator_voice_gen,
'text_not_inside': this.settings.at_narrator_text_not_inside, 'text_not_inside': this.settings.at_narrator_text_not_inside,
'language': this.settings.language, 'language': this.settings.language,
'output_file_name': "st_output", 'output_file_name': 'st_output',
'output_file_timestamp': "true", 'output_file_timestamp': 'true',
'autoplay': "false", 'autoplay': 'false',
'autoplay_volume': "0.8" 'autoplay_volume': '0.8',
}); });
// Add RVC parameters only for V2 // Add RVC parameters only for V2
if (this.settings.server_version === 'v2') { if (this.settings.server_version === 'v2') {
if (this.settings.rvc_character_voice !== 'Disabled') { if (this.settings.rvc_character_voice !== 'Disabled') {
requestBody.append('rvccharacter_voice_gen', this.settings.rvc_character_voice); requestBody.append('rvccharacter_voice_gen', this.settings.rvc_character_voice);
requestBody.append('rvccharacter_pitch', this.settings.rvc_character_pitch || "0"); requestBody.append('rvccharacter_pitch', this.settings.rvc_character_pitch || '0');
} }
if (this.settings.rvc_narrator_voice !== 'Disabled') { if (this.settings.rvc_narrator_voice !== 'Disabled') {
requestBody.append('rvcnarrator_voice_gen', this.settings.rvc_narrator_voice); requestBody.append('rvcnarrator_voice_gen', this.settings.rvc_narrator_voice);
requestBody.append('rvcnarrator_pitch', this.settings.rvc_narrator_pitch || "0"); requestBody.append('rvcnarrator_pitch', this.settings.rvc_narrator_pitch || '0');
} }
} }
try { try {
const response = await doExtrasFetch( const response = await doExtrasFetch(
`${this.settings.provider_endpoint}/api/tts-generate`, `${this.settings.provider_endpoint}/api/tts-generate`,
@ -1063,25 +1022,25 @@ class AllTalkTtsProvider {
'Content-Type': 'application/x-www-form-urlencoded', 'Content-Type': 'application/x-www-form-urlencoded',
'Cache-Control': 'no-cache', 'Cache-Control': 'no-cache',
}, },
body: requestBody body: requestBody,
} },
); );
if (!response.ok) { if (!response.ok) {
const errorText = await response.text(); const errorText = await response.text();
console.error(`[fetchTtsGeneration] Error Response Text:`, errorText); console.error('fetchTtsGeneration Error Response Text:', errorText);
throw new Error(`HTTP ${response.status}: ${errorText}`); throw new Error(`HTTP ${response.status}: ${errorText}`);
} }
const data = await response.json(); const data = await response.json();
// Handle V1/V2 URL differences // Handle V1/V2 URL differences
const outputUrl = this.settings.server_version === 'v1' const outputUrl = this.settings.server_version === 'v1'
? data.output_file_url // V1 returns full URL ? data.output_file_url // V1 returns full URL
: `${this.settings.provider_endpoint}${data.output_file_url}`; // V2 returns relative path : `${this.settings.provider_endpoint}${data.output_file_url}`; // V2 returns relative path
return outputUrl; return outputUrl;
} catch (error) { } catch (error) {
console.error("[fetchTtsGeneration] Exception caught:", error); console.error('[fetchTtsGeneration] Exception caught:', error);
throw error; throw error;
} }
} }