[VOICEVOX] added new voices and short comment (#128)

added some voices that hadn't been before, and wrote a comment on how to
use VOICEVOX.

src/lib/SideBars/CharConfig.svelte

@@ -491,14 +491,22 @@
                 </select>
             {/await}
          {:else if currentChar.data.ttsMode === 'VOICEVOX'}
-                <span class="text-neutral-200">Voice</span>
-                <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={currentChar.data.ttsSpeech}>
+                <span class="text-neutral-200">Speaker</span>
+                <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={currentChar.data.voicevoxConfig.speaker}>
                     {#await getVOICEVOXVoices() then voices}
                         {#each voices as voice}
-                            <option value={voice.id} class="bg-darkbg appearance-none"  selected={currentChar.data.ttsSpeech === voice.id}>{voice.name}</option>
+                            <option value={voice.list} class="bg-darkbg appearance-none"  selected={currentChar.data.voicevoxConfig.speaker === voice.list}>{voice.name}</option>
                         {/each}
                     {/await}
                 </select>
+                {#if currentChar.data.voicevoxConfig.speaker}
+                <span class="text=neutral-200">Style</span>
+                <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={currentChar.data.ttsSpeech}>
+                {#each JSON.parse(currentChar.data.voicevoxConfig.speaker) as styles}
+                        <option value={styles.id} class="bg-darkbg appearance-none" selected={currentChar.data.ttsSpeech === styles.id}>{styles.name}</option>
+                {/each}
+                </select>
+                {/if}
                 <span class="text-neutral-200">Speed scale</span>
                 <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-5 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
 
@@ -510,6 +518,7 @@
 
                 <span class="text-neutral-200">Intonation scale</span>
                 <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-5 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.voicevoxConfig.INTONATION_SCALE}/>
+                <span class="text-sm mb-2 text-gray-400">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
         {/if}
         {#if currentChar.data.ttsMode === 'webspeech' || currentChar.data.ttsMode === 'elevenlab' || currentChar.data.ttsMode === 'VOICEVOX'}
             <div class="flex items-center mt-2">

src/ts/process/tts.ts

@@ -133,9 +133,11 @@ export async function getVOICEVOXVoices() {
     const speakerData = await fetch(`${db.voicevoxUrl}/speakers`)
     const speakerList = await speakerData.json()
     const speakersInfo = speakerList.map((speaker) => {
-      const normalStyle = speaker.styles.find((style) => style.name === 'ノーマル' || 'ふつう' || '人間ver.')
-      return {'name': speaker.name, 'id': normalStyle.id}
+      const styles = speaker.styles.map((style) => {
+        return {name: style.name, id: `${style.id}`}
+      })
+      return {name: speaker.name, list: JSON.stringify(styles)}
     })
-  
+    speakersInfo.unshift({ name: "None", list: null})
     return speakersInfo;
 }

src/ts/storage/database.ts

@@ -322,6 +322,7 @@ export interface character{
     ttsMode?:string
     ttsSpeech?:string
     voicevoxConfig?:{
+        speaker?: string
         SPEED_SCALE?: number
         PITCH_SCALE?: number
         INTONATION_SCALE?: number