Fixed Novel custom voices not saving

This commit is contained in:
Cohee
2023-08-28 21:46:41 +03:00
parent 3ae7a6741f
commit b51511b99f
3 changed files with 40 additions and 17 deletions

View File

@ -487,6 +487,11 @@ function loadSettings() {
if (Object.keys(extension_settings.tts).length === 0) {
Object.assign(extension_settings.tts, defaultSettings)
}
for (const key in defaultSettings) {
if (!(key in extension_settings.tts)) {
extension_settings.tts[key] = defaultSettings[key]
}
}
$('#tts_provider').val(extension_settings.tts.currentProvider)
$('#tts_enabled').prop(
'checked',
@ -575,7 +580,7 @@ async function loadTtsProvider(provider) {
if (!provider) {
return
}
// Init provider references
extension_settings.tts.currentProvider = provider
ttsProviderName = provider
@ -725,7 +730,7 @@ class VoiceMapEntry {
/**
* Init voiceMapEntries for character select list.
*
*
*/
export async function initVoiceMap(){
// Clear existing voiceMap state
@ -751,7 +756,7 @@ export async function initVoiceMap(){
// Get characters in current chat
const characters = getCharacters()
// Get saved voicemap from provider settings, handling new and old representations
let voiceMapFromSettings = {}
if ("voiceMap" in extension_settings.tts[ttsProviderName]) {

View File

@ -1,5 +1,5 @@
import { getRequestHeaders, callPopup } from "../../../script.js"
import { getPreviewString } from "./index.js"
import { getPreviewString, saveTtsProviderSettings } from "./index.js"
import { initVoiceMap } from "./index.js"
export { NovelTtsProvider }
@ -21,17 +21,19 @@ class NovelTtsProvider {
get settingsHtml() {
let html = `
<br>
<small>
Use NovelAI's TTS engine.<br>
The default Voice IDs are only examples. Add custom voices and Novel will create a new random voice for it. Feel free to try different options!<br>
</small>
<small><i>Hint: Save an API key in the NovelAI API settings to use it here.</i></small> <br>
<div class="novel_tts_hints">
<div>Use NovelAI's TTS engine.</div>
<div>
The default Voice IDs are only examples. Add custom voices and Novel will create a new random voice for it.
Feel free to try different options!
</div>
<i>Hint: Save an API key in the NovelAI API settings to use it here.</i>
</div>
<label for="tts-novel-custom-voices-add">Custom Voices</label>
<div style="display:flex; align-items: baseline">
<div class="tts_custom_voices">
<select id="tts-novel-custom-voices-select"><select>
<i id="tts-novel-custom-voices-add" class="tts-button fa-solid fa-plus fa-2x" title="Add" style="color:green"></i>
<i id="tts-novel-custom-voices-delete" class="tts-button fa-solid fa-xmark fa-2x" title="Delete" style="color:red"></i>
<i id="tts-novel-custom-voices-add" class="tts-button fa-solid fa-plus fa-xl success" title="Add"></i>
<i id="tts-novel-custom-voices-delete" class="tts-button fa-solid fa-xmark fa-xl failure" title="Delete"></i>
</div>
`;
return html;
@ -44,18 +46,20 @@ class NovelTtsProvider {
this.settings.customVoices.push(voiceName)
this.populateCustomVoices()
initVoiceMap() // Update TTS extension voiceMap
saveTtsProviderSettings()
}
// Delete selected custom voice from provider
deleteCustomVoice() {
const selected = $("#tts-novel-custom-voices-select").find(':selected').val();
const voiceIndex = this.settings.customVoices.indexOf(selected);
if (voiceIndex !== -1) {
this.settings.customVoices.splice(voiceIndex, 1);
}
this.populateCustomVoices()
initVoiceMap() // Update TTS extension voiceMap
saveTtsProviderSettings()
}
// Create the UI dropdown list of voices in provider
@ -139,7 +143,7 @@ class NovelTtsProvider {
];
// Add in custom voices to the map
let addVoices = this.settings.customVoices.map(voice =>
let addVoices = this.settings.customVoices.map(voice =>
({ name: voice, voice_id: voice, lang: 'en-US', preview_url: false })
)
voices = voices.concat(addVoices)

View File

@ -70,7 +70,21 @@
.tts_block {
display: flex;
align-items: center;
align-items: baseline;
column-gap: 5px;
flex-wrap: wrap;
}
}
.tts_custom_voices {
display: flex;
align-items: baseline;
gap: 5px;
}
.novel_tts_hints {
font-size: calc(0.9 * var(--mainFontSize));
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 5px;
}