mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Reformat coqui code
This commit is contained in:
Cohee
@ -1,7 +1,15 @@
|
||||
import { eventSource, event_types } from "../../../script.js"
|
||||
import { doExtrasFetch, getApiUrl, modules } from "../../extensions.js"
|
||||
|
||||
export { CoquiTtsProvider }
|
||||
|
||||
function throwIfModuleMissing() {
|
||||
if (!modules.includes('coqui-tts')) {
|
||||
toastr.error(`Coqui TTS module not loaded. Add coqui-tts to enable-modules and restart the Extras API.`)
|
||||
throw new Error(`Coqui TTS module not loaded.`)
|
||||
}
|
||||
}
|
||||
|
||||
class CoquiTtsProvider {
|
||||
//########//
|
||||
// Config //
|
||||
@ -12,51 +20,45 @@ class CoquiTtsProvider {
|
||||
separator = ' .. '
|
||||
|
||||
defaultSettings = {
|
||||
provider_endpoint: "http://localhost:5100",
|
||||
voiceMap: {}
|
||||
}
|
||||
|
||||
|
||||
get settingsHtml() {
|
||||
let html = `
|
||||
<div style="display: flex; width: 100%;">
|
||||
<div class="flex wide100p flexGap10 alignitemscenter">
|
||||
<div style="flex: 80%;">
|
||||
<label for="model">Model:</label>
|
||||
<select id="model">
|
||||
<label for="coqui_model">Model:</label>
|
||||
<select id="coqui_model">
|
||||
<option value="none">Select Model</option>
|
||||
<!-- Add more model options here -->
|
||||
</select>
|
||||
</div>
|
||||
<div style="flex: 20%; display: flex; justify-content: center;">
|
||||
<button id="preview" class="menu_button" type="button" style="width: 100%;">Play</button>
|
||||
<div class="flex justifyCenter" style="flex: 20%;">
|
||||
<button id="coqui_preview" class="menu_button menu_button_icon wide100p" type="button">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="display: flex; width: 100%;">
|
||||
<div style="flex: 1; margin-right: 10px;">
|
||||
<label for="speaker">Speaker:</label>
|
||||
<select id="speaker">
|
||||
<div class="flex wide100p flexGap10">
|
||||
<div class="flex1">
|
||||
<label for="coqui_speaker">Speaker:</label>
|
||||
<select id="coqui_speaker">
|
||||
<!-- Add more speaker options here -->
|
||||
</select>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<label for="language">Language:</label>
|
||||
<select id="language">
|
||||
<div class="flex1">
|
||||
<label for="coqui_language">Language:</label>
|
||||
<select id="coqui_language">
|
||||
<!-- Add more language options here -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="Coqui_tts_endpoint">Provider Endpoint:</label>
|
||||
<input id="Coqui_tts_endpoint" type="text" class="text_pole" maxlength="250" value="${this.defaultSettings.provider_endpoint}"/>
|
||||
`
|
||||
return html
|
||||
}
|
||||
|
||||
onSettingsChange() {
|
||||
// Used when provider settings are updated from UI
|
||||
this.settings.provider_endpoint = $('#Coqui_tts_endpoint').val()
|
||||
}
|
||||
|
||||
loadSettings(settings) {
|
||||
@ -65,52 +67,39 @@ class CoquiTtsProvider {
|
||||
console.info("Using default TTS Provider settings")
|
||||
}
|
||||
|
||||
const modelSelect = document.getElementById('model');
|
||||
const previewButton = document.getElementById('preview');
|
||||
const modelSelect = document.getElementById('coqui_model');
|
||||
const previewButton = document.getElementById('coqui_preview');
|
||||
previewButton.addEventListener('click', () => {
|
||||
const selectedModel = modelSelect.value;
|
||||
this.sampleTtsVoice(selectedModel);
|
||||
});//add event listener to button
|
||||
|
||||
|
||||
previewButton.disabled = true;
|
||||
previewButton.innerText = "Select Model";
|
||||
|
||||
|
||||
// Only accept keys defined in defaultSettings
|
||||
this.settings = this.defaultSettings
|
||||
|
||||
for (const key in settings){
|
||||
if (key in this.settings){
|
||||
for (const key in settings) {
|
||||
if (key in this.settings) {
|
||||
this.settings[key] = settings[key]
|
||||
} else {
|
||||
throw `Invalid setting passed to TTS Provider: ${key}`
|
||||
}
|
||||
}
|
||||
|
||||
const apiCheckInterval = setInterval(() => {
|
||||
// Use Extras API if TTS support is enabled
|
||||
if (modules.includes('tts') || modules.includes('Coqui-tts')) {
|
||||
const baseUrl = new URL(getApiUrl());
|
||||
baseUrl.pathname = '/api/coqui-tts/coqui-tts';
|
||||
this.settings.provider_endpoint = baseUrl.toString();
|
||||
$('#Coqui_tts_endpoint').val(this.settings.provider_endpoint);
|
||||
clearInterval(apiCheckInterval);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
$('#Coqui_tts_endpoint').val(this.settings.provider_endpoint)
|
||||
|
||||
const textexample = document.getElementById('tts_voice_map');
|
||||
textexample.placeholder = 'Enter comma separated map of charName:ttsName[speakerID][langID]. Example: \nAqua:tts_models--en--ljspeech--glow-tts\model_file.pth,\nDarkness:tts_models--multilingual--multi-dataset--your_tts\model_file.pth[2][3]';
|
||||
|
||||
//Load models function
|
||||
eventSource.on(event_types.EXTRAS_CONNECTED, () => {
|
||||
this.getModels();
|
||||
});
|
||||
this.onttsCoquiHideButtons();
|
||||
console.info("Settings loaded")
|
||||
}
|
||||
|
||||
async onttsCoquiHideButtons(){
|
||||
async onttsCoquiHideButtons() {
|
||||
// Get references to the select element and the two input elements
|
||||
const ttsProviderSelect = document.getElementById('tts_provider');
|
||||
const ttsVoicesInput = document.getElementById('tts_voices');
|
||||
@ -127,7 +116,7 @@ class CoquiTtsProvider {
|
||||
ttsPreviewInput.style.display = 'none'; // Hide the tts_preview input
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async onApplyClick() {
|
||||
return
|
||||
@ -135,90 +124,91 @@ class CoquiTtsProvider {
|
||||
|
||||
async getLang() {
|
||||
try {
|
||||
const response = await fetch(`${this.settings.provider_endpoint}/api/coqui-tts/multlang`);
|
||||
const response = await doExtrasFetch(`${getApiUrl()}/api/coqui-tts/multlang`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
const voiceData = await response.json();
|
||||
|
||||
const modelSelect = document.getElementById('language');
|
||||
modelSelect.innerHTML = ''; // Clear existing options
|
||||
const languageSelect = document.getElementById('coqui_language');
|
||||
languageSelect.innerHTML = ''; // Clear existing options
|
||||
|
||||
if (Object.keys(voiceData).length === 0) {
|
||||
const option = document.createElement('option');
|
||||
option.value = 'none';
|
||||
option.textContent = 'None';
|
||||
modelSelect.appendChild(option);
|
||||
languageSelect.appendChild(option);
|
||||
} else {
|
||||
for (const [key, value] of Object.entries(voiceData)) {
|
||||
const option = document.createElement('option');
|
||||
option.value = key;
|
||||
option.textContent = key + ": " + value;
|
||||
modelSelect.appendChild(option);
|
||||
languageSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
//console.error('Error fetching voice data:', error);
|
||||
|
||||
// Remove all options except "None"
|
||||
const modelSelect = document.getElementById('language');
|
||||
modelSelect.innerHTML = '';
|
||||
const languageSelect = document.getElementById('coqui_language');
|
||||
languageSelect.innerHTML = '';
|
||||
|
||||
const option = document.createElement('option');
|
||||
option.value = 'none';
|
||||
option.textContent = 'None';
|
||||
modelSelect.appendChild(option);
|
||||
languageSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async getSpeakers() {
|
||||
try {
|
||||
const response = await fetch(`${this.settings.provider_endpoint}/api/coqui-tts/multspeaker`);
|
||||
const response = await doExtrasFetch(`${getApiUrl()}/api/coqui-tts/multspeaker`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
const voiceData = await response.json();
|
||||
|
||||
const modelSelect = document.getElementById('speaker');
|
||||
modelSelect.innerHTML = ''; // Clear existing options
|
||||
const speakerSelect = document.getElementById('coqui_speaker');
|
||||
speakerSelect.innerHTML = ''; // Clear existing options
|
||||
|
||||
if (Object.keys(voiceData).length === 0) {
|
||||
const option = document.createElement('option');
|
||||
option.value = 'none';
|
||||
option.textContent = 'None';
|
||||
modelSelect.appendChild(option);
|
||||
speakerSelect.appendChild(option);
|
||||
} else {
|
||||
for (const [index, name] of Object.entries(voiceData)) {
|
||||
const option = document.createElement('option');
|
||||
option.value = index;
|
||||
option.textContent = index + ": " + name;
|
||||
modelSelect.appendChild(option);
|
||||
speakerSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
//console.error('Error fetching voice data:', error);
|
||||
|
||||
// Remove all options except "None"
|
||||
const modelSelect = document.getElementById('speaker');
|
||||
modelSelect.innerHTML = '';
|
||||
const speakerSelect = document.getElementById('coqui_speaker');
|
||||
speakerSelect.innerHTML = '';
|
||||
|
||||
const option = document.createElement('option');
|
||||
option.value = 'none';
|
||||
option.textContent = 'None';
|
||||
modelSelect.appendChild(option);
|
||||
speakerSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
|
||||
async getModels() {
|
||||
try {
|
||||
const response = await fetch(`${this.settings.provider_endpoint}/api/coqui-tts/list`);
|
||||
throwIfModuleMissing();
|
||||
const response = await doExtrasFetch(`${getApiUrl()}/api/coqui-tts/list`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
const voiceIds = await response.json();
|
||||
|
||||
const modelSelect = document.getElementById('model');
|
||||
const modelSelect = document.getElementById('coqui_model');
|
||||
if (voiceIds.length === 0) {
|
||||
const option = document.createElement('option');
|
||||
option.value = 'none';
|
||||
@ -242,7 +232,7 @@ class CoquiTtsProvider {
|
||||
console.error('Error fetching voice IDs:', error);
|
||||
|
||||
// Add "None" option when the request fails or the response is empty
|
||||
const modelSelect = document.getElementById('model');
|
||||
const modelSelect = document.getElementById('coqui_model');
|
||||
const option = document.createElement('option');
|
||||
option.value = 'none';
|
||||
option.textContent = 'None';
|
||||
@ -251,18 +241,19 @@ class CoquiTtsProvider {
|
||||
}
|
||||
|
||||
async LoadModel(selectedModel) {
|
||||
const previewButton = document.getElementById('preview');
|
||||
const previewButton = document.getElementById('coqui_preview');
|
||||
previewButton.disabled = true;
|
||||
previewButton.innerText = "Loading";
|
||||
try {
|
||||
const response = await fetch(`${this.defaultSettings.provider_endpoint}/api/coqui-tts/load?_model=${selectedModel}`);
|
||||
throwIfModuleMissing();
|
||||
const response = await doExtrasFetch(`${getApiUrl()}/api/coqui-tts/load?_model=${selectedModel}`);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
this.getSpeakers();
|
||||
this.getLang();
|
||||
|
||||
const previewButton = document.getElementById('preview');
|
||||
const previewButton = document.getElementById('coqui_preview');
|
||||
previewButton.disabled = false;
|
||||
previewButton.innerText = "Play";
|
||||
|
||||
@ -299,8 +290,8 @@ class CoquiTtsProvider {
|
||||
}
|
||||
|
||||
async fetchCheckMap() {
|
||||
const endpoint = `${this.settings.provider_endpoint}/api/coqui-tts/checkmap`;
|
||||
const response = await fetch(endpoint);
|
||||
const endpoint = `${getApiUrl()}/api/coqui-tts/checkmap`;
|
||||
const response = await doExtrasFetch(endpoint);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${await response.json()}`);
|
||||
@ -317,8 +308,9 @@ class CoquiTtsProvider {
|
||||
}
|
||||
|
||||
async fetchTtsVoiceIds() {
|
||||
const endpoint = `${this.settings.provider_endpoint}/api/coqui-tts/speaker_id`;
|
||||
const response = await fetch(endpoint);
|
||||
throwIfModuleMissing();
|
||||
const endpoint = `${getApiUrl()}/api/coqui-tts/speaker_id`;
|
||||
const response = await doExtrasFetch(endpoint);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${await response.json()}`);
|
||||
@ -329,7 +321,7 @@ class CoquiTtsProvider {
|
||||
name: voice.id, //add filename here
|
||||
voice_id: voice.id,
|
||||
//preview_url: false,
|
||||
//preview_url: `${this.settings.provider_endpoint}/api/coqui-tts/download?model=${voice.id}`,
|
||||
//preview_url: `${getApiUrl()}/api/coqui-tts/download?model=${voice.id}`,
|
||||
//http://localhost:5100/api/coqui-tts/speaker_id/tts_models/en/ljspeech/speedy-speech
|
||||
lang: voice.lang,
|
||||
}));
|
||||
@ -338,15 +330,15 @@ class CoquiTtsProvider {
|
||||
|
||||
sampleTtsVoice(voiceId) {
|
||||
// Get the selected values of speaker and language
|
||||
const speakerSelect = document.getElementById('speaker');
|
||||
const languageSelect = document.getElementById('language');
|
||||
const speakerSelect = document.getElementById('coqui_speaker');
|
||||
const languageSelect = document.getElementById('coqui_language');
|
||||
const selectedSpeaker = speakerSelect.value;
|
||||
const selectedLanguage = languageSelect.value;
|
||||
|
||||
// Construct the URL with the selected values
|
||||
const url = `${this.settings.provider_endpoint}/api/coqui-tts/tts?text=The%20Quick%20Brown%20Fox%20Jumps%20Over%20the%20Lazy%20Dog.&speaker_id=${voiceId}&style_wav=&language_id=${selectedLanguage}&mspker=${selectedSpeaker}`;
|
||||
const url = `${getApiUrl()}/api/coqui-tts/tts?text=The%20Quick%20Brown%20Fox%20Jumps%20Over%20the%20Lazy%20Dog.&speaker_id=${voiceId}&style_wav=&language_id=${selectedLanguage}&mspker=${selectedSpeaker}`;
|
||||
|
||||
fetch(url)
|
||||
doExtrasFetch(url)
|
||||
.then(response => response.blob())
|
||||
.then(blob => {
|
||||
const audioUrl = URL.createObjectURL(blob);
|
||||
@ -360,9 +352,10 @@ class CoquiTtsProvider {
|
||||
}
|
||||
|
||||
previewTtsVoice(voiceId) { //button on avail voices
|
||||
const url = `${this.settings.provider_endpoint}/api/coqui-tts/download?model=${voiceId}`;
|
||||
throwIfModuleMissing();
|
||||
const url = `${getApiUrl()}/api/coqui-tts/download?model=${voiceId}`;
|
||||
|
||||
fetch(url)
|
||||
doExtrasFetch(url)
|
||||
.then(response => response.text()) // Expecting a text response
|
||||
.then(responseText => {
|
||||
const isResponseTrue = responseText.trim().toLowerCase() === 'true';
|
||||
@ -379,14 +372,15 @@ class CoquiTtsProvider {
|
||||
}
|
||||
|
||||
|
||||
async generateTts(text, voiceId){
|
||||
async generateTts(text, voiceId) {
|
||||
const response = await this.fetchTtsGeneration(text, voiceId)
|
||||
return response
|
||||
}
|
||||
|
||||
async fetchTtsGeneration(inputText, voiceId) {
|
||||
throwIfModuleMissing();
|
||||
console.info(`Generating new TTS for voice_id ${voiceId}`);
|
||||
const response = await fetch(`${this.settings.provider_endpoint}/api/coqui-tts/tts?text=${encodeURIComponent(inputText)}&speaker_id=${voiceId}`);
|
||||
const response = await doExtrasFetch(`${getApiUrl()}/api/coqui-tts/tts?text=${encodeURIComponent(inputText)}&speaker_id=${voiceId}`);
|
||||
if (!response.ok) {
|
||||
toastr.error(response.statusText, 'TTS Generation Failed');
|
||||
throw new Error(`HTTP ${response.status}: ${await response.text()}`);
|
||||
|
||||
@ -4243,6 +4243,10 @@ toolcool-color-picker {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
@ -4849,6 +4853,10 @@ body.waifuMode .zoomed_avatar {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.flexGap10 {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: calc(var(--mainFontSize) * 0.7);
|
||||
font-weight: 400;
|
||||
|
||||
Reference in New Issue
Block a user