[feat] new gui
This commit is contained in:
kwaroran
@@ -4,7 +4,7 @@
|
||||
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, CurlyBraces, Volume2Icon, XIcon } from 'lucide-svelte'
|
||||
import Check from "../Others/Check.svelte";
|
||||
import Check from "../UI/GUI/Check.svelte";
|
||||
import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage } from "../../ts/characters";
|
||||
import LoreBook from "./LoreBookSetting.svelte";
|
||||
import { alertConfirm, alertError, alertSelectChar } from "../../ts/alert";
|
||||
@@ -18,9 +18,13 @@
|
||||
import { getElevenTTSVoices, getWebSpeechTTSVoices, getVOICEVOXVoices } from "src/ts/process/tts";
|
||||
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";
|
||||
import HubUpload from "../UI/HubUpload.svelte";
|
||||
import TextInput from "../UI/GUI/TextInput.svelte";
|
||||
import NumberInput from "../UI/GUI/NumberInput.svelte";
|
||||
import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
|
||||
import Button from "../UI/GUI/Button.svelte";
|
||||
import SelectInput from "../UI/GUI/SelectInput.svelte";
|
||||
import OptionInput from "../UI/GUI/OptionInput.svelte";
|
||||
|
||||
let subMenu = 0
|
||||
let openHubUpload = false
|
||||
@@ -157,10 +161,10 @@
|
||||
{#if currentChar.type !== 'group'}
|
||||
<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>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.desc}></TextAreaInput>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
|
||||
<span class="text-neutral-200">{language.firstMessage} <Help key="charFirstMessage"/></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.firstMessage}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.firstMessage}></TextAreaInput>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
|
||||
|
||||
{:else}
|
||||
@@ -214,7 +218,7 @@
|
||||
|
||||
{/if}
|
||||
<span class="text-neutral-200">{language.authorNote} <Help key="chatNote"/></span>
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected text-xs" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].note}></TextAreaInput>
|
||||
<span class="text-gray-400 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
|
||||
<div class="flex mt-6 items-center">
|
||||
<Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
|
||||
@@ -259,53 +263,57 @@
|
||||
<!-- svelte-ignore empty-block -->
|
||||
|
||||
{#if currentChar.type !== 'group'}
|
||||
<select class="bg-transparent input-text mb-4 text-gray-200 appearance-none" bind:value={currentChar.data.viewScreen}>
|
||||
<option value="none" class="bg-darkbg appearance-none">{language.none}</option>
|
||||
<option value="emotion" class="bg-darkbg appearance-none">{language.emotionImage}</option>
|
||||
<option value="imggen" class="bg-darkbg appearance-none">{language.imageGeneration}</option>
|
||||
</select>
|
||||
<SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
|
||||
<OptionInput value="none">{language.none}</OptionInput>
|
||||
<OptionInput value="emotion">{language.emotionImage}</OptionInput>
|
||||
<OptionInput value="imggen">{language.imageGeneration}</OptionInput>
|
||||
</SelectInput>
|
||||
{:else}
|
||||
<select class="bg-transparent input-text mb-4 text-gray-200 appearance-none" bind:value={currentChar.data.viewScreen}>
|
||||
<option value="none" class="bg-darkbg appearance-none">{language.none}</option>
|
||||
<option value="single" class="bg-darkbg appearance-none">{language.singleView}</option>
|
||||
<option value="multiple" class="bg-darkbg appearance-none">{language.SpacedView}</option>
|
||||
<option value="emp" class="bg-darkbg appearance-none">{language.emphasizedView}</option>
|
||||
<SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
|
||||
<OptionInput value="none">{language.none}</OptionInput>
|
||||
<OptionInput value="single">{language.singleView}</OptionInput>
|
||||
<OptionInput value="multiple">{language.SpacedView}</OptionInput>
|
||||
<OptionInput value="emp">{language.emphasizedView}</OptionInput>
|
||||
|
||||
</select>
|
||||
</SelectInput>
|
||||
{/if}
|
||||
|
||||
{#if currentChar.data.viewScreen === 'emotion'}
|
||||
<span class="text-neutral-200 mt-6">{language.emotionImage} <Help key="emotion"/></span>
|
||||
<span class="text-gray-400 text-xs">{language.emotionWarn}</span>
|
||||
|
||||
<table class="contain w-full max-w-full tabler">
|
||||
<tr>
|
||||
<th class="font-medium w-1/3">{language.image}</th>
|
||||
<th class="font-medium w-1/2">{language.emotion}</th>
|
||||
<th class="font-medium"></th>
|
||||
</tr>
|
||||
{#if currentChar.data.emotionImages.length === 0}
|
||||
<div class="w-full max-w-full border border-selected p-2 rounded-md">
|
||||
|
||||
<table class="w-full max-w-full tabler">
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noImages}</div>
|
||||
<th class="font-medium w-1/3">{language.image}</th>
|
||||
<th class="font-medium w-1/2">{language.emotion}</th>
|
||||
<th class="font-medium"></th>
|
||||
</tr>
|
||||
{:else}
|
||||
{#each emos as emo, i}
|
||||
{#if currentChar.data.emotionImages.length === 0}
|
||||
<tr>
|
||||
{#await getCharImage(emo[1], 'plain')}
|
||||
<td class="font-medium truncate w-1/3"></td>
|
||||
{:then im}
|
||||
<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">
|
||||
<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)
|
||||
}}><TrashIcon /></button>
|
||||
<div class="text-gray-500">{language.noImages}</div>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
{:else}
|
||||
{#each emos as emo, i}
|
||||
<tr>
|
||||
{#await getCharImage(emo[1], 'plain')}
|
||||
<td class="font-medium truncate w-1/3"></td>
|
||||
{:then im}
|
||||
<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">
|
||||
<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)
|
||||
}}><TrashIcon /></button>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
|
||||
{#if !$addingEmotion}
|
||||
@@ -321,44 +329,44 @@
|
||||
<span class="text-neutral-200 mt-6">{language.imageGeneration} <Help key="imggen"/></span>
|
||||
<span class="text-gray-400 text-xs">{language.emotionWarn}</span>
|
||||
|
||||
|
||||
<table class="contain w-full max-w-full tabler">
|
||||
<tr>
|
||||
<th class="font-medium w-1/3">{language.key}</th>
|
||||
<th class="font-medium w-1/2">{language.value}</th>
|
||||
<th class="font-medium"></th>
|
||||
</tr>
|
||||
{#if currentChar.data.sdData.length === 0}
|
||||
<div class="w-full max-w-full border border-selected rounded-md p-2">
|
||||
<table class="w-full max-w-full tabler">
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noData}</div>
|
||||
<th class="font-medium w-1/3">{language.key}</th>
|
||||
<th class="font-medium w-1/2">{language.value}</th>
|
||||
<th class="font-medium"></th>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.sdData as emo, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate w-1/3">
|
||||
<TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][0]} />
|
||||
</td>
|
||||
<td class="font-medium truncate w-1/2">
|
||||
<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={() => {
|
||||
let db = ($DataBase)
|
||||
let charId = $selectedCharID
|
||||
let dbChar = db.characters[charId]
|
||||
if(dbChar.type !== 'group'){
|
||||
dbChar.sdData.splice(i, 1)
|
||||
db.characters[charId] = dbChar
|
||||
}
|
||||
$DataBase = (db)
|
||||
}}><TrashIcon /></button>
|
||||
{:else}
|
||||
<td></td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</table>
|
||||
{#if currentChar.data.sdData.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500">{language.noData}</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.sdData as emo, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate w-1/3">
|
||||
<TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][0]} />
|
||||
</td>
|
||||
<td class="font-medium truncate w-1/2">
|
||||
<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={() => {
|
||||
let db = ($DataBase)
|
||||
let charId = $selectedCharID
|
||||
let dbChar = db.characters[charId]
|
||||
if(dbChar.type !== 'group'){
|
||||
dbChar.sdData.splice(i, 1)
|
||||
db.characters[charId] = dbChar
|
||||
}
|
||||
$DataBase = (db)
|
||||
}}><TrashIcon /></button>
|
||||
{:else}
|
||||
<td></td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
<div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
|
||||
{#if !$addingEmotion}
|
||||
<button class="cursor-pointer hover:text-green-500" on:click={() => {
|
||||
@@ -379,7 +387,7 @@
|
||||
</div>
|
||||
<span class="text-neutral-200 mt-6">{language.currentImageGeneration}</span>
|
||||
{#if currentChar.data.chats[currentChar.data.chatPage].sdData}
|
||||
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></TextAreaInput>
|
||||
{:else}
|
||||
<span><div class="text-gray-500">{language.noData}</div></span>
|
||||
{/if}
|
||||
@@ -392,7 +400,9 @@
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.scripts}</h2>
|
||||
|
||||
<span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
|
||||
<table class="contain w-full max-w-full tabler mt-2">
|
||||
<div class="w-full max-w-full border border-selected rounded-md p-2">
|
||||
|
||||
<table class="w-full max-w-full tabler mt-2">
|
||||
<tr>
|
||||
<th class="font-medium w-1/2">Bias</th>
|
||||
<th class="font-medium w-1/3">{language.value}</th>
|
||||
@@ -433,21 +443,25 @@
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<span class="text-neutral-200 mt-4">{language.regexScript} <Help key="regexScript"/></span>
|
||||
<table class="contain w-full max-w-full tabler mt-2 flex flex-col p-2 gap-2">
|
||||
{#if currentChar.data.customscript.length === 0}
|
||||
<div class="text-gray-500">No Scripts</div>
|
||||
{/if}
|
||||
{#each currentChar.data.customscript as customscript, i}
|
||||
<RegexData bind:value={currentChar.data.customscript[i]} onRemove={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let customscript = currentChar.data.customscript
|
||||
customscript.splice(i, 1)
|
||||
currentChar.data.customscript = customscript
|
||||
}
|
||||
}}/>
|
||||
{/each}
|
||||
</table>
|
||||
<div class="w-full max-w-full border border-selected rounded-md p-2">
|
||||
<table class="w-full max-w-full tabler mt-2 flex flex-col p-2 gap-2">
|
||||
{#if currentChar.data.customscript.length === 0}
|
||||
<div class="text-gray-500">No Scripts</div>
|
||||
{/if}
|
||||
{#each currentChar.data.customscript as customscript, i}
|
||||
<RegexData bind:value={currentChar.data.customscript[i]} onRemove={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let customscript = currentChar.data.customscript
|
||||
customscript.splice(i, 1)
|
||||
currentChar.data.customscript = customscript
|
||||
}
|
||||
}}/>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
<button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let script = currentChar.data.customscript
|
||||
@@ -465,16 +479,16 @@
|
||||
{#if currentChar.type === 'character'}
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">TTS</h2>
|
||||
<span class="text-neutral-200">{language.provider}</span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={currentChar.data.ttsMode} on:change={() => {
|
||||
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsMode} on:change={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
currentChar.data.ttsSpeech = ''
|
||||
}
|
||||
}}>
|
||||
<option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
|
||||
<option value="elevenlab" class="bg-darkbg appearance-none">ElevenLabs</option>
|
||||
<option value="webspeech" class="bg-darkbg appearance-none">Web Speech</option>
|
||||
<option value="VOICEVOX" class="bg-darkbg appearance-none">VOICEVOX</option>
|
||||
</select>
|
||||
<OptionInput value="">{language.disabled}</OptionInput>
|
||||
<OptionInput value="elevenlab">ElevenLabs</OptionInput>
|
||||
<OptionInput value="webspeech">Web Speech</OptionInput>
|
||||
<OptionInput value="VOICEVOX">VOICEVOX</OptionInput>
|
||||
</SelectInput>
|
||||
|
||||
|
||||
{#if currentChar.data.ttsMode === 'webspeech'}
|
||||
@@ -482,12 +496,12 @@
|
||||
<span class="text-neutral-200">Web Speech isn't supported in your browser or OS</span>
|
||||
{:else}
|
||||
<span class="text-neutral-200">{language.Speech}</span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={currentChar.data.ttsSpeech}>
|
||||
<option value="" class="bg-darkbg appearance-none">Auto</option>
|
||||
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
|
||||
<OptionInput value="">Auto</OptionInput>
|
||||
{#each getWebSpeechTTSVoices() as voice}
|
||||
<option value={voice} class="bg-darkbg appearance-none">{voice}</option>
|
||||
<OptionInput value={voice}>{voice}</OptionInput>
|
||||
{/each}
|
||||
</select>
|
||||
</SelectInput>
|
||||
{#if currentChar.data.ttsSpeech !== ''}
|
||||
<span class="text-red-400 text-sm">If you do not set it to Auto, it may not work properly when importing from another OS or browser.</span>
|
||||
{/if}
|
||||
@@ -496,29 +510,29 @@
|
||||
<span class="text-sm mb-2 text-gray-400">Please set the ElevenLabs API key in "global Settings → Bot Settings → Others → ElevenLabs API key"</span>
|
||||
{#await getElevenTTSVoices() then voices}
|
||||
<span class="text-neutral-200">{language.Speech}</span>
|
||||
<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={currentChar.data.ttsSpeech}>
|
||||
<option value="" class="bg-darkbg appearance-none">Unset</option>
|
||||
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
|
||||
<OptionInput value="">Unset</OptionInput>
|
||||
{#each voices as voice}
|
||||
<option value={voice.voice_id} class="bg-darkbg appearance-none">{voice.name}</option>
|
||||
<OptionInput value={voice.voice_id}>{voice.name}</OptionInput>
|
||||
{/each}
|
||||
</select>
|
||||
</SelectInput>
|
||||
{/await}
|
||||
{:else if currentChar.data.ttsMode === 'VOICEVOX'}
|
||||
<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}>
|
||||
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.voicevoxConfig.speaker}>
|
||||
{#await getVOICEVOXVoices() then voices}
|
||||
{#each voices as voice}
|
||||
<option value={voice.list} class="bg-darkbg appearance-none" selected={currentChar.data.voicevoxConfig.speaker === voice.list}>{voice.name}</option>
|
||||
<OptionInput value={voice.list} selected={currentChar.data.voicevoxConfig.speaker === voice.list}>{voice.name}</OptionInput>
|
||||
{/each}
|
||||
{/await}
|
||||
</select>
|
||||
</SelectInput>
|
||||
{#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}>
|
||||
<SelectInput className="mb-4 mt-2" 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>
|
||||
<OptionInput value={styles.id} selected={currentChar.data.ttsSpeech === styles.id}>{styles.name}</OptionInput>
|
||||
{/each}
|
||||
</select>
|
||||
</SelectInput>
|
||||
{/if}
|
||||
<span class="text-neutral-200">Speed scale</span>
|
||||
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
|
||||
@@ -543,35 +557,35 @@
|
||||
<h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
|
||||
{#if currentChar.type !== 'group'}
|
||||
<span class="text-neutral-200">{language.exampleMessage} <Help key="exampleMessage"/></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.exampleMessage}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.exampleMessage}></TextAreaInput>
|
||||
|
||||
<span class="text-neutral-200">{language.creatorNotes} <Help key="creatorQuotes"/></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.creatorNotes} on:input={() => {
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.creatorNotes} on:input={() => {
|
||||
currentChar.data.removedQuotes = false
|
||||
}}></textarea>
|
||||
}}></TextAreaInput>
|
||||
|
||||
<span class="text-neutral-200">{language.systemPrompt} <Help key="systemPrompt"/></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.systemPrompt}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.systemPrompt}></TextAreaInput>
|
||||
|
||||
<span class="text-neutral-200">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></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.replaceGlobalNote}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.replaceGlobalNote}></TextAreaInput>
|
||||
|
||||
|
||||
{#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
|
||||
<span class="text-neutral-200">{language.SuperMemory}</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.chats[currentChar.data.chatPage].supaMemoryData}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
|
||||
{/if}
|
||||
{#if $DataBase.showUnrecommended || currentChar.data.personality.length > 3}
|
||||
<span class="text-neutral-200">{language.personality} <Help key="personality" unrecommended/></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.personality}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.personality}></TextAreaInput>
|
||||
{/if}
|
||||
{#if $DataBase.showUnrecommended || currentChar.data.scenario.length > 3}
|
||||
<span class="text-neutral-200">{language.scenario} <Help key="scenario" unrecommended/></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.scenario}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.scenario}></TextAreaInput>
|
||||
{/if}
|
||||
|
||||
<span class="text-neutral-200 mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></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.backgroundHTML}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></TextAreaInput>
|
||||
|
||||
<span class="text-neutral-200">{language.creator}</span>
|
||||
<TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
|
||||
@@ -580,102 +594,39 @@
|
||||
<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">
|
||||
<tr>
|
||||
<th class="font-medium">{language.value}</th>
|
||||
<th class="font-medium cursor-pointer w-10">
|
||||
<button class="hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
let alternateGreetings = currentChar.data.alternateGreetings
|
||||
alternateGreetings.push('')
|
||||
currentChar.data.alternateGreetings = alternateGreetings
|
||||
}
|
||||
}}>
|
||||
<PlusIcon />
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
{#if currentChar.data.alternateGreetings.length === 0}
|
||||
<div class="w-full max-w-full border border-selected rounded-md p-2">
|
||||
<table class="contain w-full max-w-full tabler mt-2">
|
||||
<tr>
|
||||
<div class="text-gray-500"> No Messages</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.alternateGreetings as bias, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate">
|
||||
<textarea 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.alternateGreetings[i]} placeholder="..." />
|
||||
</td>
|
||||
<th class="font-medium">{language.value}</th>
|
||||
<th class="font-medium cursor-pointer w-10">
|
||||
<button class="hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
currentChar.data.firstMsgIndex = -1
|
||||
let alternateGreetings = currentChar.data.alternateGreetings
|
||||
alternateGreetings.splice(i, 1)
|
||||
alternateGreetings.push('')
|
||||
currentChar.data.alternateGreetings = alternateGreetings
|
||||
}
|
||||
}}>
|
||||
<TrashIcon />
|
||||
<PlusIcon />
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
|
||||
<span class="text-neutral-200 mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
|
||||
<table class="contain w-full max-w-full tabler mt-2">
|
||||
<tr>
|
||||
<th class="font-medium">{language.value}</th>
|
||||
<th class="font-medium cursor-pointer w-10">
|
||||
<button class="hover:text-green-500" on:click={async () => {
|
||||
if(currentChar.type === 'character'){
|
||||
const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
|
||||
currentChar.data.additionalAssets = currentChar.data.additionalAssets ?? []
|
||||
if(!da){
|
||||
return
|
||||
}
|
||||
for(const f of da){
|
||||
console.log(f)
|
||||
const img = f.data
|
||||
const name = f.name
|
||||
const extension = name.split('.').pop().toLowerCase()
|
||||
const imgp = await saveAsset(img,'', extension)
|
||||
currentChar.data.additionalAssets.push([name, imgp, extension])
|
||||
currentChar.data.additionalAssets = currentChar.data.additionalAssets
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<PlusIcon />
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
{#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500"> No Assets</div>
|
||||
</tr>
|
||||
{:else}
|
||||
{#each currentChar.data.additionalAssets as assets, i}
|
||||
{#if currentChar.data.alternateGreetings.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500"> No Messages</div>
|
||||
</tr>
|
||||
{/if}
|
||||
{#each currentChar.data.alternateGreetings as bias, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate">
|
||||
{#if assetFilePath[i] && database.useAdditionalAssetsPreview}
|
||||
{#if assetFileExtensions[i] === 'mp4'}
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
|
||||
{:else if assetFileExtensions[i] === 'mp3'}
|
||||
<audio controls class="mt-2 px-2 w-full h-16 m-1 rounded-md" loop><source src={assetFilePath[i]} type="audio/mpeg"></audio>
|
||||
{:else}
|
||||
<img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={assets[0]}/>
|
||||
{/if}
|
||||
{/if}
|
||||
<TextInput size="sm" marginBottom bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
|
||||
<TextAreaInput bind:value={currentChar.data.alternateGreetings[i]} placeholder="..." />
|
||||
</td>
|
||||
|
||||
<th class="font-medium cursor-pointer w-10">
|
||||
<button class="hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
currentChar.data.firstMsgIndex = -1
|
||||
let additionalAssets = currentChar.data.additionalAssets
|
||||
additionalAssets.splice(i, 1)
|
||||
currentChar.data.additionalAssets = additionalAssets
|
||||
let alternateGreetings = currentChar.data.alternateGreetings
|
||||
alternateGreetings.splice(i, 1)
|
||||
currentChar.data.alternateGreetings = alternateGreetings
|
||||
}
|
||||
}}>
|
||||
<TrashIcon />
|
||||
@@ -683,8 +634,75 @@
|
||||
</th>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<span class="text-neutral-200 mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
|
||||
<div class="w-full max-w-full border border-selected rounded-md p-2">
|
||||
<table class="contain w-full max-w-full tabler mt-2">
|
||||
<tr>
|
||||
<th class="font-medium">{language.value}</th>
|
||||
<th class="font-medium cursor-pointer w-10">
|
||||
<button class="hover:text-green-500" on:click={async () => {
|
||||
if(currentChar.type === 'character'){
|
||||
const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
|
||||
currentChar.data.additionalAssets = currentChar.data.additionalAssets ?? []
|
||||
if(!da){
|
||||
return
|
||||
}
|
||||
for(const f of da){
|
||||
console.log(f)
|
||||
const img = f.data
|
||||
const name = f.name
|
||||
const extension = name.split('.').pop().toLowerCase()
|
||||
const imgp = await saveAsset(img,'', extension)
|
||||
currentChar.data.additionalAssets.push([name, imgp, extension])
|
||||
currentChar.data.additionalAssets = currentChar.data.additionalAssets
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<PlusIcon />
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
{#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
|
||||
<tr>
|
||||
<div class="text-gray-500"> No Assets</div>
|
||||
</tr>
|
||||
{:else}
|
||||
{#each currentChar.data.additionalAssets as assets, i}
|
||||
<tr>
|
||||
<td class="font-medium truncate">
|
||||
{#if assetFilePath[i] && database.useAdditionalAssetsPreview}
|
||||
{#if assetFileExtensions[i] === 'mp4'}
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
|
||||
{:else if assetFileExtensions[i] === 'mp3'}
|
||||
<audio controls class="mt-2 px-2 w-full h-16 m-1 rounded-md" loop><source src={assetFilePath[i]} type="audio/mpeg"></audio>
|
||||
{:else}
|
||||
<img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={assets[0]}/>
|
||||
{/if}
|
||||
{/if}
|
||||
<TextInput size="sm" marginBottom bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
|
||||
</td>
|
||||
|
||||
<th class="font-medium cursor-pointer w-10">
|
||||
<button class="hover:text-green-500" on:click={() => {
|
||||
if(currentChar.type === 'character'){
|
||||
currentChar.data.firstMsgIndex = -1
|
||||
let additionalAssets = currentChar.data.additionalAssets
|
||||
additionalAssets.splice(i, 1)
|
||||
currentChar.data.additionalAssets = additionalAssets
|
||||
}
|
||||
}}>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if $DataBase.showUnrecommended || currentChar.data.utilityBot}
|
||||
<div class="flex items-center mt-4">
|
||||
@@ -693,19 +711,19 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button on:click={async () => {
|
||||
<Button size="lg" onClick={async () => {
|
||||
exportChar($selectedCharID)
|
||||
}} class="text-neutral-200 mt-6 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.exportCharacter}</button>
|
||||
<button on:click={async () => {
|
||||
}} className="mt-2">{language.exportCharacter}</Button>
|
||||
<Button size="lg" onClick={async () => {
|
||||
openHubUpload = true
|
||||
}} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.shareCloud}</button>
|
||||
}} className="mt-2">{language.shareCloud}</Button>
|
||||
{#if openHubUpload}
|
||||
<HubUpload bind:char={currentChar.data} close={() => {openHubUpload=false}}/>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
|
||||
<span class="text-neutral-200">{language.SuperMemory}</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.chats[currentChar.data.chatPage].supaMemoryData}></textarea>
|
||||
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
|
||||
{/if}
|
||||
{#if $DataBase.useExperimental}
|
||||
<div class="flex mb-2 items-center">
|
||||
@@ -714,7 +732,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<button on:click={async () => {
|
||||
<Button onClick={async () => {
|
||||
const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
|
||||
if(!conf){
|
||||
return
|
||||
@@ -729,14 +747,11 @@
|
||||
$selectedCharID = -1
|
||||
$DataBase.characters = chars
|
||||
|
||||
}} class="text-neutral-200 mt-2 bg-transparent border-solid border-1 border-borderc p-2 hover:bg-draculared transition-colors cursor-pointer">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</button>
|
||||
}} className="mt-2" size="sm">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
.contain{
|
||||
border: #6272a4 1px solid
|
||||
}
|
||||
|
||||
.tabler {
|
||||
table-layout: fixed;
|
||||
|
||||
Reference in New Issue
Block a user