mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ref] input to components

Browse Source
This commit is contained in:
kwaroran
2023-07-18 18:18:14 +09:00
parent 26421fde03
commit c0622c4f0d
24 changed files with 291 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/lib/SideBars/CharConfig.svelte
View File

@@ -3,7 +3,7 @@
import { tokenize } from "../../ts/tokenizer";
import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database";
import { selectedCharID } from "../../ts/stores";
import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBracesIcon, Volume2Icon, XIcon } from 'lucide-svelte'
import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBraces, Volume2Icon, XIcon } from 'lucide-svelte'
import Check from "../Others/Check.svelte";
import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
import LoreBook from "./LoreBookSetting.svelte";
@@ -19,6 +19,8 @@
import { checkCharOrder, getFileSrc } from "src/ts/storage/globalApi";
import { addGroupChar, rmCharFromGroup } from "src/ts/process/group";
import HubUpload from "../UI/HubUpload.svelte";
import TextInput from "../UI/GUI/TextInput.svelte";
import NumberInput from "../UI/GUI/NumberInput.svelte";
let subMenu = 0
let openHubUpload = false
@@ -142,7 +144,7 @@
<Volume2Icon />
</button>
<button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 4}}>
<CurlyBracesIcon />
<CurlyBraces />
</button>
{/if}
<button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
@@ -153,7 +155,7 @@
{#if subMenu === 0}
{#if currentChar.type !== 'group'}
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Character Name" bind:value={currentChar.data.name}>
<TextInput size="xl" marginBottom placeholder="Character Name" bind:value={currentChar.data.name} />
<span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.desc}></textarea>
<span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
@@ -162,7 +164,7 @@
<span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
{:else}
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" placeholder="Group Name" bind:value={currentChar.data.name}>
<TextInput size="xl" marginBottom placeholder="Group Name" bind:value={currentChar.data.name} />
<span class="text-neutral-200">{language.character}</span>
<div class="p-4 gap-2 bg-bgcolor rounded-lg char-grid">
{#if currentChar.data.characters.length === 0}
@@ -295,7 +297,7 @@
<td class="font-medium truncate w-1/3"><img src={im} alt="img" class="w-full"></td>
{/await}
<td class="font-medium truncate w-1/2">
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text text-xl focus:bg-selected" bind:value={currentChar.data.emotionImages[i][0]}>
<TextInput marginBottom size='lg' bind:value={currentChar.data.emotionImages[i][0]} />
</td>
<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
rmCharEmotion($selectedCharID,i)
@@ -334,10 +336,10 @@
{#each currentChar.data.sdData as emo, i}
<tr>
<td class="font-medium truncate w-1/3">
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][0]}>
<TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][0]} />
</td>
<td class="font-medium truncate w-1/2">
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={currentChar.data.sdData[i][1]}>
<TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][1]} />
</td>
{#if (!['always','negative'].includes(currentChar.data.sdData[i][0]))}
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
@@ -394,13 +396,15 @@
<tr>
<th class="font-medium w-1/2">Bias</th>
<th class="font-medium w-1/3">{language.value}</th>
<th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
if(currentChar.type === 'character'){
let bia = currentChar.data.bias
bia.push(['', 0])
currentChar.data.bias = bia
}
}}><PlusIcon /></th>
<th>
<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
if(currentChar.type === 'character'){
let bia = currentChar.data.bias
bia.push(['', 0])
currentChar.data.bias = bia
}
}}><PlusIcon /></button>
</th>
</tr>
{#if currentChar.data.bias.length === 0}
<tr>
@@ -408,20 +412,22 @@
</tr>
{/if}
{#each currentChar.data.bias as bias, i}
<tr>
<tr class="align-middle text-center">
<td class="font-medium truncate w-1/2">
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][0]} placeholder="string">
</td>
<TextInput fullh fullwidth bind:value={currentChar.data.bias[i][0]} placeholder="string" />
</td>
<td class="font-medium truncate w-1/3">
<input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={currentChar.data.bias[i][1]} type="number" max="100" min="-100">
<NumberInput fullh fullwidth bind:value={currentChar.data.bias[i][1]} max={100} min={-100} />
</td>
<td>
<button class="font-medium flex justify-center items-center w-full h-full cursor-pointer hover:text-green-500" on:click={() => {
if(currentChar.type === 'character'){
let bia = currentChar.data.bias
bia.splice(i, 1)
currentChar.data.bias = bia
}
}}><TrashIcon /></button>
</td>
<button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
if(currentChar.type === 'character'){
let bia = currentChar.data.bias
bia.splice(i, 1)
currentChar.data.bias = bia
}
}}><TrashIcon /></button>
</tr>
{/each}
@@ -515,16 +521,16 @@
</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}/>
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
<span class="text-neutral-200">Pitch 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.PITCH_SCALE}/>
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
<span class="text-neutral-200">Volume 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.VOLUME_SCALE}/>
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
<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}/>
<NumberInput size={"sm"} marginBottom 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'}
@@ -568,10 +574,10 @@
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></textarea>
<span class="text-neutral-200">{language.creator}</span>
<input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
<TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
<span class="text-neutral-200">{language.CharVersion}</span>
<input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.character_version} type="number" />
<TextInput size="sm" bind:value={currentChar.data.additionalData.character_version}/>
<span class="text-neutral-200 mt-2">{language.altGreet}</span>
<table class="contain w-full max-w-full tabler mt-2">
@@ -660,7 +666,7 @@
<img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={assets[0]}/>
{/if}
{/if}
<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-full resize-none" bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
<TextInput size="sm" marginBottom bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
</td>
<th class="font-medium cursor-pointer w-10">

14
src/lib/SideBars/LoreBookData.svelte
View File

@@ -5,6 +5,8 @@
import { alertConfirm } from "../../ts/alert";
import Check from "../Others/Check.svelte";
import Help from "../Others/Help.svelte";
import TextInput from "../UI/GUI/TextInput.svelte";
import NumberInput from "../UI/GUI/NumberInput.svelte";
export let value:loreBook
export let onRemove: () => void = () => {}
let open = false
@@ -30,31 +32,31 @@
{#if open}
<div class="seperator">
<span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
<TextInput size="sm" bind:value={value.comment}/>
{#if !value.alwaysActive}
<span class="text-neutral-200 mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
<span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.key}>
<TextInput size="sm" bind:value={value.key}/>
{#if value.selective}
<span class="text-neutral-200 mt-6">{language.SecondaryKeys}</span>
<span class="text-xs text-gray-500">{language.activationKeysInfo}</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.secondkey} min="0" max="100">
<TextInput size="sm" bind:value={value.secondkey}/>
{/if}
{/if}
{#if !(value.activationPercent === undefined || value.activationPercent === null)}
<span class="text-neutral-200 mt-6">{language.activationProbability}</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.activationPercent} on:change={() => {
<NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
value.activationPercent = 0
}
if(value.activationPercent > 100){
value.activationPercent = 100
}
}}>
}} />
{/if}
<span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.insertorder} type="number" min={0} max={1000}>
<NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
<span class="text-neutral-200 mt-4">{language.prompt}</span>
<textarea class="bg-transparent input-text mt-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={value.content}></textarea>
<div class="flex items-center mt-4">

5
src/lib/SideBars/LoreBookSetting.svelte
View File

@@ -6,6 +6,7 @@
import { addLorebook, exportLoreBook, importLoreBook } from "../../ts/process/lorebook";
import LoreBookData from "./LoreBookData.svelte";
import Check from "../Others/Check.svelte";
import NumberInput from "../UI/GUI/NumberInput.svelte";
let submenu = 0
export let globalMode = false
</script>
@@ -94,9 +95,9 @@
<Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
</div>
<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth}>
<NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
<span class="text-neutral-200">{language.loreBookToken}</span>
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="4096" bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget}>
<NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
{:else}
<div class="flex items-center mt-4">
<Check check={true} onChange={() => {

9
src/lib/SideBars/RegexData.svelte
View File

@@ -4,6 +4,7 @@
import { alertConfirm } from "src/ts/alert";
import type { customscript } from "src/ts/storage/database";
import Check from "../Others/Check.svelte";
import TextInput from "../UI/GUI/TextInput.svelte";
export let value:customscript
export let onRemove: () => void = () => {}
@@ -29,7 +30,7 @@
{#if open}
<div class="seperator p-2">
<span class="text-neutral-200 mt-6">{language.name}</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.comment}>
<TextInput size="sm" bind:value={value.comment} />
<span class="text-neutral-200 mt-4">Modification Type</span>
<select class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.type}>
<option value="editinput">{language.editInput}</option>
@@ -38,12 +39,12 @@
<option value="editdisplay">{language.editDisplay}</option>
</select>
<span class="text-neutral-200 mt-6">IN:</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.in}>
<TextInput size="sm" bind:value={value.in} />
<span class="text-neutral-200 mt-6">OUT:</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.out}>
<TextInput size="sm" bind:value={value.out} />
{#if value.ableFlag}
<span class="text-neutral-200 mt-6">FLAG:</span>
<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.flag}>
<TextInput size="sm" bind:value={value.flag} />
{/if}
<div class="flex items-center mt-4">
<Check bind:check={value.ableFlag} onChange={() => {