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

coqui voices, change how provider settings save

This commit is contained in:
ouoertheo 2023-08-25 08:27:43 -05:00
parent 5b43fe25e8
commit 44cd4287cb
8 changed files with 105 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
public/scripts/extensions/tts/coqui.js
View File

@ -5,6 +5,8 @@ TODO:
*/
import { doExtrasFetch, extension_settings, getApiUrl, getContext, modules, ModuleWorkerWrapper } from "../../extensions.js"
import { callPopup } from "../../../script.js"
import { onTtsProviderSettingsInput } from "./index.js"
export { CoquiTtsProvider }
@ -12,7 +14,7 @@ const DEBUG_PREFIX = "<Coqui TTS module> ";
const UPDATE_INTERVAL = 1000;
let inApiCall = false;
let charactersList = []; // Updated with module worker
let voiceIdList = []; // Updated with module worker
let coquiApiModels = {}; // Initialized only once
let coquiApiModelsFull = {}; // Initialized only once
let coquiLocalModels = []; // Initialized only once
@ -52,33 +54,7 @@ function resetModelSettings() {
$("#coqui_api_model_settings_language").val("none");
$("#coqui_api_model_settings_speaker").val("none");
}
function updateCharactersList() {
let currentcharacters = new Set();
for (const i of getContext().characters) {
currentcharacters.add(i.name);
}
currentcharacters = Array.from(currentcharacters)
if (JSON.stringify(charactersList) !== JSON.stringify(currentcharacters)) {
charactersList = currentcharacters
$('#coqui_character_select')
.find('option')
.remove()
.end()
.append('<option value="none">Select Character</option>')
.val('none')
for (const charName of charactersList) {
$("#coqui_character_select").append(new Option(charName, charName));
}
console.debug(DEBUG_PREFIX, "Updated character list to:", charactersList);
}
}
class CoquiTtsProvider {
//#############################//
// Extension UI and Settings //
@ -88,6 +64,7 @@ class CoquiTtsProvider {
defaultSettings = {
voiceMap: "",
voiceIds: [],
voiceMapDict: {}
}
@ -96,13 +73,15 @@ class CoquiTtsProvider {
<div class="flex wide100p flexGap10 alignitemscenter">
<div>
<div style="flex: 50%;">
<label for="coqui_character_select">Character:</label>
<select id="coqui_character_select">
<small>To use CoquiTTS, select the origin, language, and model, then click Add Voice. The voice will then be available to add to a character. Voices are saved globally. </small><br>
<label for="coqui_voiceid_select">Select Saved Voice:</label>
<select id="coqui_voiceid_select">
<!-- Populated by JS -->
</select>
<input id="coqui_remove_char_mapping" class="menu_button" type="button" value="Remove from Voice Map" />
<div class="tts_block">
<input id="coqui_remove_voiceId_mapping" class="menu_button" type="button" value="Remove Voice" />
<input id="coqui_add_voiceId_mapping" class="menu_button" type="button" value="Add Voice" />
</div>
<label for="coqui_model_origin">Models:</label>
<select id="coqui_model_origin">gpu_mode
<option value="none">Select Origin</option>
@ -157,6 +136,7 @@ class CoquiTtsProvider {
}
}
initLocalModels();
this.updateVoiceMap(); // Overide any manual modification
$("#coqui_api_model_div").hide();
@ -173,19 +153,8 @@ class CoquiTtsProvider {
$("#coqui_api_language").on("change", function () { that.onModelLanguageChange() });
$("#coqui_api_model_name").on("change", function () { that.onModelNameChange() });
$("#coqui_remove_char_mapping").on("click", function () { that.onRemoveClick() });
// Load characters list
$('#coqui_character_select')
.find('option')
.remove()
.end()
.append('<option value="none">Select Character</option>')
.val('none')
for (const charName of charactersList) {
$("#coqui_character_select").append(new Option(charName, charName));
}
$("#coqui_remove_voiceId_mapping").on("click", function () { that.onRemoveClick() });
$("#coqui_add_voiceId_mapping").on("click", function () { that.onAddClick() });
// Load coqui-api settings from json file
fetch("/scripts/extensions/tts/coqui_api_models_settings.json")
@ -235,6 +204,7 @@ class CoquiTtsProvider {
}
updateVoiceMap() {
// Takes voiceMapDict and converts it to a string to save to voiceMap
this.settings.voiceMap = "";
for (let i in this.settings.voiceMapDict) {
const voice_settings = this.settings.voiceMapDict[i];
@ -248,21 +218,41 @@ class CoquiTtsProvider {
this.settings.voiceMap += ",";
}
$("#tts_voice_map").val(this.settings.voiceMap);
// Update UI select list with voices
$("#coqui_voiceid_select").empty()
$('#coqui_voiceid_select')
.find('option')
.remove()
.end()
.append('<option value="none">Select VoiceId</option>')
.val('none')
for (const voiceId in this.settings.voiceMapDict) {
$("#coqui_voiceid_select").append(new Option(voiceId, voiceId));
}
extension_settings.tts.Coqui = this.settings;
this.onSettingsChange()
}
onSettingsChange() {
console.debug(DEBUG_PREFIX, "Settings changes", this.settings);
extension_settings.tts.Coqui = this.settings;
onTtsProviderSettingsInput()
}
async onApplyClick() {
if (inApiCall) {
return; // TOdo block dropdown
}
this.checkReady()
}
async onAddClick() {
if (inApiCall) {
return; //TODO: block dropdown
}
// Ask user for voiceId name to save voice
const voiceId = await callPopup('<h3>Name of Coqui voice to add to voice select dropdown:</h3>', 'input')
const character = $("#coqui_character_select").val();
const model_origin = $("#coqui_model_origin").val();
const model_language = $("#coqui_api_language").val();
const model_name = $("#coqui_api_model_name").val();
@ -270,8 +260,8 @@ class CoquiTtsProvider {
let model_setting_speaker = $("#coqui_api_model_settings_speaker").val();
if (character === "none") {
toastr.error(`Character not selected, please select one.`, DEBUG_PREFIX + " voice mapping character", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
if (!voiceId) {
toastr.error(`VoiceId empty, please enter one.`, DEBUG_PREFIX + " voice mapping voiceId", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
this.updateVoiceMap(); // Overide any manual modification
return;
}
@ -291,8 +281,8 @@ class CoquiTtsProvider {
return;
}
this.settings.voiceMapDict[character] = { model_type: "local", model_id: "local/" + model_id };
console.debug(DEBUG_PREFIX, "Registered new voice map: ", character, ":", this.settings.voiceMapDict[character]);
this.settings.voiceMapDict[voiceId] = { model_type: "local", model_id: "local/" + model_id };
console.debug(DEBUG_PREFIX, "Registered new voice map: ", voiceId, ":", this.settings.voiceMapDict[voiceId]);
this.updateVoiceMap(); // Overide any manual modification
return;
}
@ -336,13 +326,13 @@ class CoquiTtsProvider {
console.debug(DEBUG_PREFIX, "Current voice map: ", this.settings.voiceMap);
this.settings.voiceMapDict[character] = { model_type: "coqui-api", model_id: model_id, model_language: model_setting_language, model_speaker: model_setting_speaker };
this.settings.voiceMapDict[voiceId] = { model_type: "coqui-api", model_id: model_id, model_language: model_setting_language, model_speaker: model_setting_speaker };
console.debug(DEBUG_PREFIX, "Registered new voice map: ", character, ":", this.settings.voiceMapDict[character]);
console.debug(DEBUG_PREFIX, "Registered new voice map: ", voiceId, ":", this.settings.voiceMapDict[voiceId]);
this.updateVoiceMap();
let successMsg = character + ":" + model_id;
let successMsg = voiceId + ":" + model_id;
if (model_setting_language != null)
successMsg += "[" + model_setting_language + "]";
if (model_setting_speaker != null)
@ -360,15 +350,15 @@ class CoquiTtsProvider {
}
async onRemoveClick() {
const character = $("#coqui_character_select").val();
const voiceId = $("#coqui_voiceid_select").val();
if (character === "none") {
toastr.error(`Character not selected, please select one.`, DEBUG_PREFIX + " voice mapping character", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
if (voiceId === "none") {
toastr.error(`VoiceId not selected, please select one.`, DEBUG_PREFIX + " voice mapping voiceId", { timeOut: 10000, extendedTimeOut: 20000, preventDuplicates: true });
return;
}
// Todo erase from voicemap
delete (this.settings.voiceMapDict[character]);
delete (this.settings.voiceMapDict[voiceId]);
this.updateVoiceMap(); // TODO
}
@ -748,13 +738,7 @@ class CoquiTtsProvider {
}
}
//#############################//
// Module Worker //
//#############################//
async function moduleWorker() {
updateCharactersList();
async function initLocalModels() {
if (!modules.includes('coqui-tts'))
return
@ -778,10 +762,4 @@ async function moduleWorker() {
coquiLocalModelsReceived = true;
}
}
$(document).ready(function () {
const wrapper = new ModuleWorkerWrapper(moduleWorker);
setInterval(wrapper.update.bind(wrapper), UPDATE_INTERVAL);
moduleWorker();
})
}

4
public/scripts/extensions/tts/edge.js
View File

@ -2,6 +2,7 @@ import { getRequestHeaders } from "../../../script.js"
import { getApiUrl } from "../../extensions.js"
import { doExtrasFetch, modules } from "../../extensions.js"
import { getPreviewString } from "./index.js"
import { onTtsProviderSettingsInput } from "./index.js"
export { EdgeTtsProvider }
@ -30,6 +31,7 @@ class EdgeTtsProvider {
onSettingsChange() {
this.settings.rate = Number($('#edge_tts_rate').val());
$('#edge_tts_rate_output').text(this.settings.rate);
onTtsProviderSettingsInput()
}
loadSettings(settings) {
@ -51,7 +53,7 @@ class EdgeTtsProvider {
$('#edge_tts_rate').val(this.settings.rate || 0);
$('#edge_tts_rate_output').text(this.settings.rate || 0);
$('#edge_tts_rate').on("input",this.onSettingsChange)
this.checkReady()
console.info("Settings loaded")

31
public/scripts/extensions/tts/elevenlabs.js
View File

@ -1,3 +1,4 @@
import { onTtsProviderSettingsInput } from "./index.js"
export { ElevenLabsTtsProvider }
class ElevenLabsTtsProvider {
@ -23,16 +24,19 @@ class ElevenLabsTtsProvider {
get settingsHtml() {
let html = `
<label for="elevenlabs_tts_api_key">API Key</label>
<input id="elevenlabs_tts_api_key" type="text" class="text_pole" placeholder="<API Key>"/>
<label for="elevenlabs_tts_stability">Stability: <span id="elevenlabs_tts_stability_output"></span></label>
<input id="elevenlabs_tts_stability" type="range" value="${this.defaultSettings.stability}" min="0" max="1" step="0.05" />
<label for="elevenlabs_tts_similarity_boost">Similarity Boost: <span id="elevenlabs_tts_similarity_boost_output"></span></label>
<input id="elevenlabs_tts_similarity_boost" type="range" value="${this.defaultSettings.similarity_boost}" min="0" max="1" step="0.05" />
<label class="checkbox_label" for="elevenlabs_tts_multilingual">
<input id="elevenlabs_tts_multilingual" type="checkbox" value="${this.defaultSettings.multilingual}" />
Enable Multilingual
</label>
<div class="elevenlabs_tts_settings">
<label for="elevenlabs_tts_api_key">API Key</label>
<input id="elevenlabs_tts_api_key" type="text" class="text_pole" placeholder="<API Key>"/>
<input id="eleven_labs_connect" class="menu_button" type="button" value="Connect" />
<label for="elevenlabs_tts_stability">Stability: <span id="elevenlabs_tts_stability_output"></span></label>
<input id="elevenlabs_tts_stability" type="range" value="${this.defaultSettings.stability}" min="0" max="1" step="0.05" />
<label for="elevenlabs_tts_similarity_boost">Similarity Boost: <span id="elevenlabs_tts_similarity_boost_output"></span></label>
<input id="elevenlabs_tts_similarity_boost" type="range" value="${this.defaultSettings.similarity_boost}" min="0" max="1" step="0.05" />
<label class="checkbox_label" for="elevenlabs_tts_multilingual">
<input id="elevenlabs_tts_multilingual" type="checkbox" value="${this.defaultSettings.multilingual}" />
Enable Multilingual
</label>
</div>
`
return html
}
@ -42,6 +46,7 @@ class ElevenLabsTtsProvider {
this.settings.stability = $('#elevenlabs_tts_stability').val()
this.settings.similarity_boost = $('#elevenlabs_tts_similarity_boost').val()
this.settings.multilingual = $('#elevenlabs_tts_multilingual').prop('checked')
onTtsProviderSettingsInput()
}
@ -66,6 +71,8 @@ class ElevenLabsTtsProvider {
$('#elevenlabs_tts_similarity_boost').val(this.settings.similarity_boost)
$('#elevenlabs_tts_api_key').val(this.settings.apiKey)
$('#tts_auto_generation').prop('checked', this.settings.multilingual)
$('#eleven_labs_connect').on('click',this.onConnectClick)
$('#elevenlabs_tts_settings').on('input',this.onSettingsChange)
this.checkReady()
console.info("Settings loaded")
@ -77,6 +84,9 @@ class ElevenLabsTtsProvider {
}
async onApplyClick() {
}
async onConnectClick() {
// Update on Apply click
return await this.updateApiKey().catch( (error) => {
throw error
@ -93,6 +103,7 @@ class ElevenLabsTtsProvider {
})
this.settings.apiKey = this.settings.apiKey
console.debug(`Saved new API_KEY: ${this.settings.apiKey}`)
this.onSettingsChange()
}
//#################//

19
public/scripts/extensions/tts/index.js
View File

@ -515,7 +515,7 @@ function setTtsStatus(status, success) {
}
}
function onApplyClick() {
function onRefreshClick() {
Promise.all([
ttsProvider.onApplyClick(),
// updateVoiceMap()
@ -598,11 +598,7 @@ function onTtsProviderChange() {
}
// Ensure that TTS provider settings are saved to extension settings.
function onTtsProviderSettingsInput() {
ttsProvider.onSettingsChange()
// Persist changes to SillyTavern tts extension settings
export function onTtsProviderSettingsInput() {
extension_settings.tts[ttsProviderName] = ttsProvider.settings
saveSettingsDebounced()
console.info(`Saved settings ${ttsProviderName} ${JSON.stringify(ttsProvider.settings)}`)
@ -807,10 +803,11 @@ $(document).ready(function () {
<div class="inline-drawer-content">
<div id="tts_status">
</div>
<div>
<span>Select TTS Provider</span> </br>
<select id="tts_provider">
<span>Select TTS Provider</span> </br>
<div class="tts_block">
<select id="tts_provider" class="flex1">
</select>
<input id="tts_refresh" class="menu_button" type="submit" value="Reload" />
</div>
<div>
<label class="checkbox_label" for="tts_enabled">
@ -840,7 +837,6 @@ $(document).ready(function () {
<form id="tts_provider_settings" class="inline-drawer-content">
</form>
<div class="tts_buttons">
<input id="tts_apply" class="menu_button" type="submit" value="Reload / Apply" />
<input id="tts_voices" class="menu_button" type="submit" value="Available voices" />
</div>
</div>
@ -849,14 +845,13 @@ $(document).ready(function () {
</div>
`
$('#extensions_settings').append(settingsHtml)
$('#tts_apply').on('click', onApplyClick)
$('#tts_refresh').on('click', onRefreshClick)
$('#tts_enabled').on('click', onEnableClick)
$('#tts_narrate_dialogues').on('click', onNarrateDialoguesClick);
$('#tts_narrate_quoted').on('click', onNarrateQuotedClick);
$('#tts_narrate_translated_only').on('click', onNarrateTranslatedOnlyClick);
$('#tts_auto_generation').on('click', onAutoGenerationClick);
$('#tts_voices').on('click', onTtsVoicesClick)
$('#tts_provider_settings').on('input', onTtsProviderSettingsInput)
for (const provider in ttsProviders) {
$('#tts_provider').append($("<option />").val(provider).text(provider))
}

4
public/scripts/extensions/tts/novel.js
View File

@ -1,5 +1,6 @@
import { getRequestHeaders, callPopup } from "../../../script.js"
import { getPreviewString } from "./index.js"
import { onTtsProviderSettingsInput } from "./index.js"
export { NovelTtsProvider }
@ -37,7 +38,7 @@ class NovelTtsProvider {
}
onSettingsChange() {
onTtsProviderSettingsInput()
}
// Add a new Novel custom voice to provider
@ -65,6 +66,7 @@ class NovelTtsProvider {
this.settings.customVoices.forEach(voice => {
voiceSelect.append(`<option>${voice}</option>`)
})
this.onSettingsChange()
}
loadSettings(settings) {

3
public/scripts/extensions/tts/silerotts.js
View File

@ -1,4 +1,5 @@
import { doExtrasFetch, getApiUrl, modules } from "../../extensions.js"
import { onTtsProviderSettingsInput } from "./index.js"
export { SileroTtsProvider }
@ -30,6 +31,7 @@ class SileroTtsProvider {
onSettingsChange() {
// Used when provider settings are updated from UI
this.settings.provider_endpoint = $('#silero_tts_endpoint').val()
onTtsProviderSettingsInput()
}
loadSettings(settings) {
@ -61,6 +63,7 @@ class SileroTtsProvider {
}, 2000);
$('#silero_tts_endpoint').val(this.settings.provider_endpoint)
$('#silero_tts_endpoint').on("input", this.onSettingsChange)
this.checkReady()

7
public/scripts/extensions/tts/style.css
View File

@ -66,4 +66,11 @@
.tts-button:hover {
opacity: 1;
}
.tts_block {
display: flex;
align-items: center;
column-gap: 5px;
flex-wrap: wrap;
}

9
public/scripts/extensions/tts/system.js
View File

@ -1,7 +1,7 @@
import { isMobile } from "../../RossAscends-mods.js";
import { getPreviewString } from "./index.js";
import { talkingAnimation } from './index.js';
import { onTtsProviderSettingsInput } from "./index.js"
export { SystemTtsProvider }
/**
@ -107,7 +107,7 @@ class SystemTtsProvider {
this.settings.pitch = Number($('#system_tts_pitch').val());
$('#system_tts_pitch_output').text(this.settings.pitch);
$('#system_tts_rate_output').text(this.settings.rate);
console.log('Save changes');
onTtsProviderSettingsInput()
}
loadSettings(settings) {
@ -144,6 +144,11 @@ class SystemTtsProvider {
$('#system_tts_rate').val(this.settings.rate || this.defaultSettings.rate);
$('#system_tts_pitch').val(this.settings.pitch || this.defaultSettings.pitch);
// Trigger updates
$('#system_tts_rate').on("input", this.onSettingsChange)
$('#system_tts_rate').on("input", this.onSettingsChange)
$('#system_tts_pitch_output').text(this.settings.pitch);
$('#system_tts_rate_output').text(this.settings.rate);
console.info("Settings loaded");