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

[feat] add color scheme

Browse Source
This commit is contained in:
kwaroran
2023-08-03 08:58:36 +09:00
parent 7d369221dc
commit 0e0601642a
57 changed files with 622 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.svelte
View File

@@ -23,9 +23,9 @@
</script>
<main class="flex bg-bg w-full h-full max-w-100vw">
<main class="flex bg-bg w-full h-full max-w-100vw text-textcolor">
{#if !$loadedStore}
<div class="w-full h-full flex justify-center items-center text-gray-200 text-xl">
<div class="w-full h-full flex justify-center items-center text-textcolor text-xl">
<span>Loading...</span>
</div>
{:else if !didFirstSetup}

1
src/lang/en.ts
View File

@@ -399,4 +399,5 @@ export const languageEnglish = {
ifRandom: "If random",
hideRealm: "Hide RisuRealm",
popularityLevel: "{} Popularity",
colorScheme: "Color Scheme",
}

2
src/lib/ChatScreens/AssetInput.svelte
View File

@@ -28,7 +28,7 @@
}
</script>
{#if currentCharacter.type ==='character'}
<button class="hover:text-green-500 bg-gray-500 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
<button class="hover:text-green-500 bg-textcolor2 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
if(currentCharacter.type === 'character'){
const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? []

8
src/lib/ChatScreens/Chat.svelte
View File

@@ -75,18 +75,18 @@
$: displaya(message)
</script>
<div class="flex max-w-full justify-center risu-chat" class:bgc={isLastMemory}>
<div class="text-neutral-200 mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
<div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
{#await img}
<div class="shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
<div class="shadow-lg bg-textcolor2 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
{:then m}
<div class="shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
<div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
{/await}
<span class="flex flex-col ml-4 w-full max-w-full min-w-0">
<div class="flexium items-center chat">
<span class="chat text-xl unmargin">{name}</span>
<div class="flex-grow flex items-center justify-end text-gray-500">
<div class="flex-grow flex items-center justify-end text-textcolor2">
<span class="text-xs">{statusMessage}</span>
{#if $DataBase.useChatCopy}
<button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{

2
src/lib/ChatScreens/CreatorQuote.svelte
View File

@@ -1,5 +1,5 @@
<div class="flex w-full justify-center mt-4 max-w-100vw">
<div class="w-5/6 max-w-80vw bg-darkbg rounded-md p-3 text-white text-sm">
<div class="w-5/6 max-w-80vw bg-darkbg rounded-md p-3 text-textcolor text-sm">
<h1 class="font-bold mb-2">{language.creatorNotes}
<button class="float-right" on:click={onRemove}>
<XIcon />

22
src/lib/ChatScreens/DefaultChatScreen.svelte
View File

@@ -270,7 +270,7 @@
mergedCanvas.height = totalHeight;
}
mergedCtx.fillStyle = '#282a36'
mergedCtx.fillStyle = 'var(--risu-theme-bgcolor)'
mergedCtx.fillRect(0, 0, maxWidth, totalHeight);
let indh = 0
for(let i = 0; i < canvases.length; i++) {
@@ -313,11 +313,11 @@
<div class="flex items-end mt-2 mb-2 w-full">
{#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
<div on:click={()=>{toggleStickers = !toggleStickers}}
class={"ml-4 bg-gray-500 flex justify-center items-center w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-white')}>
class={"ml-4 bg-textcolor2 flex justify-center items-center w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-textcolor')}>
<Laugh/>
</div>
{/if}
<textarea class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
<textarea class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={messageInput}
bind:this={inputEle}
on:keydown={(e) => {
@@ -339,28 +339,28 @@
{#if $doingChat || doingChatInputTranslate}
<div
class="mr-2 bg-selected flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
class="mr-2 bg-selected flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors" on:click={abortChat}>
<div class="loadmove" class:autoload={autoMode}>
</div>
</div>
{:else}
<div on:click={send}
class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
</div>
{/if}
<div on:click={(e) => {
openMenu = !openMenu
e.stopPropagation()
}}
class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
</div>
</div>
{#if $DataBase.useAutoTranslateInput}
<div class="flex items-center mt-2 mb-2 w-full">
<label for='messageInputTranslate' class="text-neutral-200 ml-4">
<label for='messageInputTranslate' class="text-textcolor ml-4">
<LanguagesIcon />
</label>
<textarea id = 'messageInputTranslate' class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
<textarea id = 'messageInputTranslate' class="text-textcolor p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-darkbutton resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
bind:value={messageInputTranslate}
bind:this={inputTranslateEle}
on:keydown={(e) => {
@@ -491,7 +491,7 @@
{/if}
{#if openMenu}
<div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
<div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor" on:click={(e) => {
e.stopPropagation()
}}>
{#if $DataBase.characters[$selectedCharID].type === 'group'}
@@ -569,8 +569,8 @@
border: 0.4rem solid rgba(0,0,0,0);
width: 1rem;
height: 1rem;
border-top: 0.4rem solid #6272a4;
border-left: 0.4rem solid #6272a4;
border-top: 0.4rem solid var(--risu-theme-borderc);
border-left: 0.4rem solid var(--risu-theme-borderc);
}
.autoload{

8
src/lib/ChatScreens/ResizeBox.svelte
View File

@@ -63,8 +63,8 @@
position: absolute;
right: 0px;
top: 0px;
border-bottom: 1px solid #6272a4;
border-left: 1px solid #6272a4;
border-bottom: 1px solid var(--risu-theme-borderc);
border-left: 1px solid var(--risu-theme-borderc);
width: 12rem;
height: 12rem;
z-index: 5;
@@ -74,8 +74,8 @@
position: absolute;
width: 16px;
height: 16px;
border-top: 1px solid #6272a4;
border-right: 1px solid #6272a4;
border-top: 1px solid var(--risu-theme-borderc);
border-right: 1px solid var(--risu-theme-borderc);
cursor: sw-resize;
bottom: 0;
left: 0;

14
src/lib/ChatScreens/Suggestion.svelte
View File

@@ -128,14 +128,14 @@
<div class="ml-4 flex flex-wrap">
{#if progress}
<div class="flex bg-gray-500 p-2 rounded-lg items-center">
<div class="flex bg-textcolor2 p-2 rounded-lg items-center">
<div class="loadmove mx-2"/>
<div>{language.creatingSuggestions}</div>
</div>
{:else if !$doingChat}
{#if $DataBase.translator !== ''}
<div class="flex mr-2 mb-2">
<button class={"bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-white')}
<button class={"bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-textcolor')}
on:click={() => {
toggleTranslate = !toggleTranslate
}}
@@ -147,7 +147,7 @@
<div class="flex mr-2 mb-2">
<button class="bg-gray-500 hover:bg-gray-700 font-bold py-2 px-4 rounded text-white"
<button class="bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded text-textcolor"
on:click={() => {
alertConfirm(language.askReRollAutoSuggestions).then((result) => {
if(result) {
@@ -163,7 +163,7 @@
</div>
{#each suggestMessages??[] as suggest, i}
<div class="flex mr-2 mb-2">
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded" on:click={() => {
<button class="bg-textcolor2 hover:bg-darkbutton text-textcolor font-bold py-2 px-4 rounded" on:click={() => {
suggestMessages = []
messageInput(suggest)
send()
@@ -172,7 +172,7 @@
{@html md}
{/await}
</button>
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded ml-1" on:click={() => {
<button class="bg-textcolor2 hover:bg-darkbutton text-textcolor font-bold py-2 px-4 rounded ml-1" on:click={() => {
messageInput(suggest)
}}>
<CopyIcon/>
@@ -191,8 +191,8 @@
border: 0.4rem solid rgba(0,0,0,0);
width: 1rem;
height: 1rem;
border-top: 0.4rem solid white;
border-left: 0.4rem solid white;
border-top: 0.4rem solid var(--risu-theme-textcolor);
border-left: 0.4rem solid var(--risu-theme-textcolor);
}
@keyframes spin {

4
src/lib/Others/AlertComp.svelte
View File

@@ -61,7 +61,7 @@
{:else if $alertStore.type === 'tos'}
<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="text-white">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
<div class="text-textcolor">You should accept RisuRealm's <a class="text-green-600 hover:text-green-500 transition-colors duration-200 cursor-pointer" on:click={() => {
openURL('https://sv.risuai.xyz/hub/tos')
}}>Terms of Service</a> to continue</div>
{:else if $alertStore.type !== 'select'}
@@ -161,7 +161,7 @@
</div>
</div>
{:else if $alertStore.type === 'toast'}
<div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto z-50 text-neutral-200"
<div class="toast-anime absolute right-0 bottom-0 bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl max-h-11/12 overflow-y-auto z-50 text-textcolor"
on:animationend={() => {
alertStore.set({
type: 'none',

16
src/lib/Others/ChatList.svelte
View File

@@ -14,10 +14,10 @@
<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-72 max-h-full overflow-y-auto">
<div class="flex items-center text-neutral-200 mb-4">
<div class="flex items-center text-textcolor mb-4">
<h2 class="mt-0 mb-0">{language.chatList}</h2>
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
<XIcon size={24}/>
</button>
</div>
@@ -28,20 +28,20 @@
$DataBase.characters[$selectedCharID].chatPage = i
close()
}
}} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
}} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
{#if editMode}
<TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
{:else}
<span>{chat.name}</span>
{/if}
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
exportChat(i)
}}>
<DownloadIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
if($DataBase.characters[$selectedCharID].chats.length === 1){
alertError(language.errors.onlyOneChat)
@@ -61,7 +61,7 @@
</button>
{/each}
<div class="flex mt-2 items-center">
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
const cha = $DataBase.characters[$selectedCharID]
const len = $DataBase.characters[$selectedCharID].chats.length
let chats = $DataBase.characters[$selectedCharID].chats
@@ -83,12 +83,12 @@
}}>
<PlusIcon/>
</button>
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
importChat()
}}>
<FolderUpIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
editMode = !editMode
}}>
<EditIcon size={18}/>

4
src/lib/Others/GithubStars.svelte
View File

@@ -17,12 +17,12 @@
<img src="/icon/github-mark-white.svg" width="24" alt="github" />
</button>
{/if}
<button class="text-white" on:click={() => {
<button class="text-textcolor" on:click={() => {
openURL("https://www.patreon.com/RisuAI")
}}>
<WalletIcon size={24} />
</button>
<button class="text-white" on:click={() => {
<button class="text-textcolor" on:click={() => {
openURL("mailto:amasio1234@proton.me")
}}>
<MailIcon size={24} />

6
src/lib/Others/GridCatalog.svelte
View File

@@ -38,16 +38,16 @@
<div class="h-full w-full flex justify-center">
<div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col ">
<h1 class="text-neutral-200 text-2xl font-bold mt-2">Catalog</h1>
<h1 class="text-textcolor text-2xl font-bold mt-2">Catalog</h1>
<TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
<div class="w-full flex justify-center">
<div class="flex flex-wrap gap-2 mx-auto container">
{#each formatChars(search) as char}
<div class="flex items-center text-neutral-200">
<div class="flex items-center text-textcolor">
{#if char.image}
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
{:else}
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:#44475a' : ''}>
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={char.index === $selectedCharID ? 'background:var(--risu-theme-selected)' : ''}>
{#if char.type === 'group'}
<Users />
{:else}

4
src/lib/Others/WelcomeRisu.svelte
View File

@@ -12,7 +12,7 @@
let provider = 0
</script>
<div class="w-full h-full flex justify-center welcome-bg text-neutral-200">
<div class="w-full h-full flex justify-center welcome-bg text-textcolor">
<article class="w-full overflow-x-hidden max-w-full min-h-full h-full flex flex-col overflow-y-auto">
<div class="w-full justify-center flex mt-8">
<img src="/logo_typo_trans.png" alt="logo" class="w-full max-w-screen-sm mb-0">
@@ -64,7 +64,7 @@
<span class="mb-2">API key</span>
<TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
</div>
<span class="text-gray-400">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
<span class="text-textcolor2">{language.setup.apiKeyhelp} <a href="https://platform.openai.com/account/api-keys" target="_blank">https://platform.openai.com/account/api-keys</a></span>
<div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1

14
src/lib/Setting/Pages/AdvancedSettings.svelte
View File

@@ -12,24 +12,24 @@
</script>
<h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
<span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
<span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.loreBookDepth}/>
<span class="text-neutral-200">{language.loreBookToken}</span>
<span class="text-textcolor">{language.loreBookToken}</span>
<NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={$DataBase.loreBookToken}/>
<span class="text-neutral-200">{language.additionalPrompt}</span>
<span class="text-textcolor">{language.additionalPrompt}</span>
<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.additionalPrompt}/>
<span class="text-neutral-200">{language.descriptionPrefix}</span>
<span class="text-textcolor">{language.descriptionPrefix}</span>
<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.descriptionPrefix}/>
<span class="text-neutral-200">{language.emotionPrompt}</span>
<span class="text-textcolor">{language.emotionPrompt}</span>
<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default"/>
<span class="text-neutral-200">{language.requestretrys}</span>
<span class="text-textcolor">{language.requestretrys}</span>
<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.requestRetrys}/>
<span class="text-neutral-200">Request Lib</span>
<span class="text-textcolor">Request Lib</span>
<SelectInput bind:value={$DataBase.requester}>
<OptionInput value="new">Reqwest</OptionInput>
<OptionInput value="old">Tauri</OptionInput>

186
src/lib/Setting/Pages/BotSettings.svelte
View File

@@ -74,13 +74,13 @@
</button>
</div>
{#if advancedBotSettings}
<span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
<span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
<ModelList bind:value={$DataBase.aiModel}/>
<span class="text-neutral-200 mt-2">{language.submodel} <Help key="submodel"/></span>
<span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
<ModelList bind:value={$DataBase.subModel}/>
{:else}
<span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
<span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
<ModelList bind:value={$DataBase.aiModel} onChange={(v) => {
$DataBase.subModel = v
if(v.startsWith('gpt') || v.startsWith('palm2')){
@@ -112,24 +112,24 @@
</div>
{/if}
{#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'}
<span class="text-neutral-200">Palm2 {language.apiKey}</span>
<span class="text-textcolor">Palm2 {language.apiKey}</span>
<TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.palmAPI}/>
{/if}
{#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
<span class="text-neutral-200">NovelList {language.apiKey}</span>
<span class="text-textcolor">NovelList {language.apiKey}</span>
<TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
{/if}
{#if $DataBase.aiModel.startsWith('claude') || $DataBase.subModel.startsWith('claude')}
<span class="text-neutral-200">Claude {language.apiKey}</span>
<span class="text-textcolor">Claude {language.apiKey}</span>
<TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
{/if}
{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
<span class="text-neutral-200 mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
<span class="text-textcolor mt-2">{language.forceReplaceUrl} URL <Help key="forceUrl"/></span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
<span class="text-neutral-200 mt-4"> {language.proxyAPIKey}</span>
<span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
<TextInput marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
<span class="text-neutral-200 mt-4"> {language.proxyRequestModel}</span>
<span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.proxyRequestModel}>
<OptionInput value="">None</OptionInput>
<OptionInput value="gpt35">GPT 3.5</OptionInput>
@@ -147,10 +147,10 @@
</SelectInput>
{/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
<span class="text-neutral-200 mt-4">Openrouter Key</span>
<span class="text-textcolor mt-4">Openrouter Key</span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
<span class="text-neutral-200 mt-4">Openrouter Model</span>
<span class="text-textcolor mt-4">Openrouter Model</span>
{#await openRouterModels()}
<SelectInput className="mt-2 mb-4" value="">
<OptionInput value="">Loading..</OptionInput>
@@ -177,7 +177,7 @@
{/await}
{/if}
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')}
<span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
<span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
<TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
{/if}
@@ -188,7 +188,7 @@
{/if}
{#if $DataBase.aiModel === 'custom'}
<span class="text-neutral-200 mt-2">{language.plugin}</span>
<span class="text-textcolor mt-2">{language.plugin}</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
<OptionInput value="">None</OptionInput>
{#each $customProviderStore as plugin}
@@ -198,7 +198,7 @@
{/if}
{#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
<span class="text-neutral-200">NovelAI Bearer Token</span>
<span class="text-textcolor">NovelAI Bearer Token</span>
<TextInput marginBottom={true} bind:value={$DataBase.novelai.token}/>
{#if !($DataBase.novelai.token)}
@@ -209,70 +209,70 @@
{/if}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
<span class="text-neutral-200">Kobold URL</span>
<span class="text-textcolor">Kobold URL</span>
<TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
{/if}
{#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
<span class="text-neutral-200">Horde {language.apiKey}</span>
<span class="text-textcolor">Horde {language.apiKey}</span>
<TextInput marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
{/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
<span class="text-neutral-200 mt-2">Oobabooga Blocking {language.providerURL}</span>
<span class="text-textcolor mt-2">Oobabooga Blocking {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
<span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
<span class="text-neutral-200 mt-2">Oobabooga Stream {language.providerURL}</span>
<span class="text-textcolor mt-2">Oobabooga Stream {language.providerURL}</span>
<TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
{#if !isTauri}
<span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
{/if}
{/if}
{#if advancedBotSettings}
<span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
<span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
<span class="text-gray-400 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
<span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
<span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
<span class="text-gray-400 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
<span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
<span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
<span class="text-gray-400 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>
<span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>
<span class="text-neutral-200">{language.maxContextSize}</span>
<span class="text-textcolor">{language.maxContextSize}</span>
<NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
<span class="text-neutral-200">{language.maxResponseSize}</span>
<span class="text-textcolor">{language.maxResponseSize}</span>
<NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
<span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
<span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
<SliderInput min={0} max={200} bind:value={$DataBase.temperature}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.temperature / 100).toFixed(2)}</span>
{#if $DataBase.aiModel === 'textgen_webui'}
<span class="text-neutral-200">Repetition Penalty</span>
<span class="text-textcolor">Repetition Penalty</span>
<SliderInput min={1} max={1.5} step={0.01} bind:value={$DataBase.ooba.repetition_penalty}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
<span class="text-neutral-200">Length Penalty</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
<span class="text-textcolor">Length Penalty</span>
<SliderInput min={-5} max={5} step={0.05} bind:value={$DataBase.ooba.length_penalty}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
<span class="text-neutral-200">Top K</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
<span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} bind:value={$DataBase.ooba.top_k} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
<span class="text-neutral-200">Top P</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
<span class="text-textcolor">Top P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_p}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
<span class="text-neutral-200">Typical P</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
<span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.typical_p}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
<span class="text-neutral-200">Top A</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
<span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_a}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
<span class="text-neutral-200">No Repeat n-gram Size</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_a).toFixed(2)}</span>
<span class="text-textcolor">No Repeat n-gram Size</span>
<SliderInput min={0} max={20} step={1} bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ooba.no_repeat_ngram_size).toFixed(0)}</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ooba.no_repeat_ngram_size).toFixed(0)}</span>
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
</div>
@@ -286,98 +286,98 @@
<Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
</div>
<div class="flex flex-col p-3 bg-darkbg mt-4">
<span class="text-neutral-200">Header</span>
<span class="text-textcolor">Header</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.header} />
<span class="text-neutral-200">System Prefix</span>
<span class="text-textcolor">System Prefix</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.systemPrefix} />
<span class="text-neutral-200">User Prefix</span>
<span class="text-textcolor">User Prefix</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.userPrefix} />
<span class="text-neutral-200">Assistant Prefix</span>
<span class="text-textcolor">Assistant Prefix</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.assistantPrefix} />
<span class="text-neutral-200">Seperator</span>
<span class="text-textcolor">Seperator</span>
<TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.seperator} />
</div>
<span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
<span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.autoSuggestPrompt} />
<span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
<span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
<span class="text-neutral-200">{language.autoSuggest} Prefix</span>
<span class="text-textcolor">{language.autoSuggest} Prefix</span>
<TextInput marginBottom={true} bind:value={$DataBase.autoSuggestPrefix} />
{:else if $DataBase.aiModel.startsWith('novelai')}
<span class="text-neutral-200">Top P</span>
<span class="text-textcolor">Top P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topP}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
<span class="text-neutral-200">Top K</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
<span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} bind:value={$DataBase.NAIsettings.topK}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
<span class="text-neutral-200">Top A</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
<span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topA}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
<span class="text-neutral-200">Tailfree Sampling</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
<span class="text-textcolor">Tailfree Sampling</span>
<SliderInput min={0} max={1} step={0.001} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
<span class="text-neutral-200">Typical P</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
<span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.typicalp}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
<span class="text-neutral-200">Repetition Penalty</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
<span class="text-textcolor">Repetition Penalty</span>
<SliderInput min={0} max={3} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
<span class="text-neutral-200">Repetition Penalty Range</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
<span class="text-textcolor">Repetition Penalty Range</span>
<SliderInput min={0} max={2048} step={1} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
<span class="text-neutral-200">Repetition Penalty Slope</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
<span class="text-textcolor">Repetition Penalty Slope</span>
<SliderInput min={0} max={10} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
<span class="text-neutral-200">Frequency Penalty</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
<span class="text-textcolor">Frequency Penalty</span>
<SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
<span class="text-neutral-200">Presence Penalty</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
<span class="text-textcolor">Presence Penalty</span>
<SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.presencePenalty}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.NAIsettings.presencePenalty).toFixed(2)}</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.presencePenalty).toFixed(2)}</span>
{:else if $DataBase.aiModel.startsWith('novellist')}
<span class="text-neutral-200">Top P</span>
<span class="text-textcolor">Top P</span>
<SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.top_p}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
<span class="text-neutral-200">Reputation Penalty</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
<span class="text-textcolor">Reputation Penalty</span>
<SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.rep_pen}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
<span class="text-neutral-200">Reputation Penalty Range</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
<span class="text-textcolor">Reputation Penalty Range</span>
<SliderInput min={0} max={2048} step={1} bind:value={$DataBase.ainconfig.rep_pen_range}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
<span class="text-neutral-200">Reputation Penalty Slope</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
<span class="text-textcolor">Reputation Penalty Slope</span>
<SliderInput min={0} max={10} step={0.1} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
<span class="text-neutral-200">Top K</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
<span class="text-textcolor">Top K</span>
<SliderInput min={1} max={500} step={1} bind:value={$DataBase.ainconfig.top_k}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
<span class="text-neutral-200">Top A</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
<span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.top_a}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
<span class="text-neutral-200">Typical P</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
<span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.typical_p}/>
<span class="text-gray-400 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.typical_p).toFixed(2)}</span>
{:else}
<span class="text-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
<span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
<SliderInput min={0} max={100} bind:value={$DataBase.frequencyPenalty} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
<span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
<span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
<SliderInput min={0} max={100} bind:value={$DataBase.PresensePenalty} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.PresensePenalty / 100).toFixed(2)}</span>
<span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
<span class="text-textcolor mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
<TextAreaInput height="20" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt} />
<span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
<span class="text-textcolor2 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>
{/if}
{/if}
{#if advancedBotSettings}
<span class="text-neutral-200 mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
<span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
<DropList bind:list={$DataBase.formatingOrder} />
<span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
<span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
<table class="contain w-full max-w-full tabler mt-2">
<tr>
<th class="font-medium w-1/2">Bias</th>
@@ -392,7 +392,7 @@
</tr>
{#if $DataBase.bias.length === 0}
<tr>
<div class="text-gray-500">{language.noBias}</div>
<div class="text-textcolor2">{language.noBias}</div>
</tr>
{/if}
{#each $DataBase.bias as bias, i}

42
src/lib/Setting/Pages/DisplaySettings.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { language } from "src/lang";
import { DataBase, saveImage, updateTextTheme } from "src/ts/storage/database";
import { DataBase, saveImage } from "src/ts/storage/database";
import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
import Check from "src/lib/UI/GUI/CheckInput.svelte";
import Help from "src/lib/Others/Help.svelte";
@@ -8,11 +8,16 @@
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import { updateAnimationSpeed } from "src/ts/gui/animation";
import { changeColorScheme, colorSchemeList, updateTextTheme } from "src/ts/gui/colorscheme";
const onSchemeInputChange = (e:Event) => {
changeColorScheme((e.target as HTMLInputElement).value)
}
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
<span class="text-neutral-200 mt-4">{language.theme}</span>
<span class="text-textcolor mt-4">{language.theme}</span>
<SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifu" >Waifulike</OptionInput>
@@ -21,16 +26,23 @@
{#if $DataBase.theme === "waifu"}
<span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
<span class="text-textcolor mt-4">{language.waifuWidth}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
<span class="text-gray-400 text-sm">{($DataBase.waifuWidth)}%</span>
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
<span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
<span class="text-textcolor mt-4">{language.waifuWidth2}</span>
<SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
<span class="text-gray-400 text-sm">{($DataBase.waifuWidth2)}%</span>
<span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
{/if}
<span class="text-neutral-200 mt-4">{language.textColor}</span>
<span class="text-textcolor mt-4">{language.colorScheme}</span>
<SelectInput className="mt-2" value={$DataBase.colorSchemeName} on:change={onSchemeInputChange}>
{#each colorSchemeList as scheme}
<OptionInput value={scheme} >{scheme}</OptionInput>
{/each}
</SelectInput>
<span class="text-textcolor mt-4">{language.textColor}</span>
<SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
@@ -56,25 +68,25 @@
</div>
{/if}
<span class="text-neutral-200">{language.UISize}</span>
<span class="text-textcolor">{language.UISize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.zoomsize} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
<span class="text-neutral-200">{language.iconSize}</span>
<span class="text-textcolor">{language.iconSize}</span>
<SliderInput min={50} max={200} bind:value={$DataBase.iconsize} />
<span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-textcolor2 mb-6 text-sm">{($DataBase.iconsize)}%</span>
<span class="text-neutral-200">{language.assetWidth}</span>
<span class="text-textcolor">{language.assetWidth}</span>
<SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} />
<span class="text-gray-400 mb-6 text-sm">{
<span class="text-textcolor2 mb-6 text-sm">{
($DataBase.assetWidth === -1) ? "Unlimited" :
($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
<span class="text-neutral-200">{language.animationSpeed}</span>
<span class="text-textcolor">{language.animationSpeed}</span>
<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
<span class="text-gray-400 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
<span class="text-textcolor2 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>

2
src/lib/Setting/Pages/GlobalRegex.svelte
View File

@@ -8,7 +8,7 @@
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.globalRegexScript} <Help key="regexScript" /></h2>
<RegexList bind:value={$DataBase.globalscript} />
<div class="text-gray-500 mt-2 flex gap-2">
<div class="text-textcolor2 mt-2 flex gap-2">
<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
let script = $DataBase.globalscript
script.push({

4
src/lib/Setting/Pages/LanguageSettings.svelte
View File

@@ -13,7 +13,7 @@
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
<span class="text-textcolor mt-4">{language.UiLanguage}</span>
<SelectInput className="mt-2" bind:value={$DataBase.language} on:change={async () => {
if($DataBase.language === 'translang'){
downloadFile('lang.json', new TextEncoder().encode(JSON.stringify(languageEnglish, null, 4)))
@@ -32,7 +32,7 @@
{#if langChanged}
<span class="bg-red-500 text-sm">Close the settings to take effect</span>
{/if}
<span class="text-neutral-200 mt-4">{language.translator}</span>
<span class="text-textcolor mt-4">{language.translator}</span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.translator}>
<OptionInput value="" >{language.disabled}</OptionInput>
<OptionInput value="ko" >Korean</OptionInput>

36
src/lib/Setting/Pages/OtherBotSettings.svelte
View File

@@ -12,9 +12,9 @@
</script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
<span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>
<span class="text-textcolor mt-4 text-lg font-bold">{language.imageGeneration}</span>
<span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
<span class="text-textcolor mt-2">{language.provider} <Help key="sdProvider"/></span>
<SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
<OptionInput value="" >None</OptionInput>
<OptionInput value="webui" >Stable Diffusion WebUI</OptionInput>
@@ -28,44 +28,44 @@
{#if !isTauri}
<span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
{/if}
<span class="text-neutral-200 mt-2">WebUI {language.providerURL}</span>
<span class="text-textcolor mt-2">WebUI {language.providerURL}</span>
<TextInput size="sm" marginBottom placeholder="https://..." bind:value={$DataBase.webUiUrl}/>
<span class="text-neutral-200">Steps</span>
<span class="text-textcolor">Steps</span>
<NumberInput size="sm" marginBottom min={0} max={100} bind:value={$DataBase.sdSteps}/>
<span class="text-neutral-200">CFG Scale</span>
<span class="text-textcolor">CFG Scale</span>
<NumberInput size="sm" marginBottom min={0} max={20} bind:value={$DataBase.sdCFG}/>
<span class="text-neutral-200">Width</span>
<span class="text-textcolor">Width</span>
<NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.width}/>
<span class="text-neutral-200">Height</span>
<span class="text-textcolor">Height</span>
<NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.height}/>
<span class="text-neutral-200">Sampler</span>
<span class="text-textcolor">Sampler</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.sampler_name}/>
<div class="flex items-center mt-2">
<Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
</div>
{#if $DataBase.sdConfig.enable_hr === true}
<span class="text-neutral-200">denoising_strength</span>
<span class="text-textcolor">denoising_strength</span>
<NumberInput size="sm" marginBottom min={0} max={10} bind:value={$DataBase.sdConfig.denoising_strength}/>
<span class="text-neutral-200">hr_scale</span>
<span class="text-textcolor">hr_scale</span>
<NumberInput size="sm" marginBottom min={0} max={10} bind:value={$DataBase.sdConfig.hr_scale}/>
<span class="text-neutral-200">Upscaler</span>
<span class="text-textcolor">Upscaler</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.hr_upscaler}/>
{/if}
{/if}
<span class="text-neutral-200 mt-4 text-lg font-bold">TTS</span>
<span class="text-neutral-200 mt-2">ElevenLabs API key</span>
<span class="text-textcolor mt-4 text-lg font-bold">TTS</span>
<span class="text-textcolor mt-2">ElevenLabs API key</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
<span class="text-neutral-200 mt-2">VOICEVOX URL</span>
<span class="text-textcolor mt-2">VOICEVOX URL</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.voicevoxUrl}/>
<span class="text-neutral-200 mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
<span class="text-neutral-200 mt-4">{language.SuperMemory} {language.model}</span>
<span class="text-textcolor mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
<span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
<SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
<OptionInput value="none" >None</OptionInput>
<OptionInput value="davinci" >OpenAI Davinci</OptionInput>
@@ -73,11 +73,11 @@
<OptionInput value="subModel" >{language.submodel} ({language.unrecommended})</OptionInput>
</SelectInput>
{#if $DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie'}
<span class="text-neutral-200">{language.SuperMemory} OpenAI Key</span>
<span class="text-textcolor">{language.SuperMemory} OpenAI Key</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
{/if}
{#if $DataBase.supaMemoryType !== 'none'}
<span class="text-neutral-200">{language.SuperMemory} Prompt</span>
<span class="text-textcolor">{language.SuperMemory} Prompt</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="recommended to leave it blank to use default"/>
{/if}
{#if ($DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie') && $DataBase.useExperimental}

16
src/lib/Setting/Pages/PersonaSettings.svelte
View File

@@ -17,12 +17,12 @@
changeUserPersona(i)
}}>
{#if persona.icon === ''}
<div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
<div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona} />
{:else}
{#await getCharImage(persona.icon, 'css')}
<div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
<div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}/>
{:then im}
<div class="rounded-md h-20 w-20 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />
<div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona} />
{/await}
{/if}
</button>
@@ -61,20 +61,20 @@
<div class="flex flex-col mt-4">
<button on:click={() => {selectUserImg()}}>
{#if $DataBase.userIcon === ''}
<div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
<div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
{:else}
{#await getCharImage($DataBase.userIcon, 'css')}
<div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
<div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
{:then im}
<div class="rounded-md h-28 w-28 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />
<div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />
{/await}
{/if}
</button>
</div>
<div class="flex flex-grow flex-col p-2 ml-4">
<span class="text-sm text-gray-500">{language.name}</span>
<span class="text-sm text-textcolor2">{language.name}</span>
<TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username} />
<span class="text-sm text-gray-500">{language.description}</span>
<span class="text-sm text-textcolor2">{language.description}</span>
<TextAreaInput height="32" autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
<div>
<button class="float-right rounded-md border border-red-700 p-2 hover:bg-red-700 transition-colors mt-4 text-sm" on:click={async () => {

6
src/lib/Setting/Pages/PluginSettings.svelte
View File

@@ -27,7 +27,7 @@
<div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
<div class="flex">
<span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
<button class="gray-500 hover:gray-200 cursor-pointer" on:click={async () => {
<button class="textcolor2 hover:gray-200 cursor-pointer" on:click={async () => {
const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
if(v){
if($DataBase.currentPluginProvider === plugin.name){
@@ -61,10 +61,10 @@
{/if}
{/each}
</div>
<div class="text-gray-500 mt-2 flex">
<div class="text-textcolor2 mt-2 flex">
<button on:click={() => {
importPlugin()
}} class="hover:text-neutral-200 cursor-pointer">
}} class="hover:text-textcolor cursor-pointer">
<PlusIcon />
</button>
</div>

2
src/lib/Setting/Pages/UserSettings.svelte
View File

@@ -82,7 +82,7 @@
{/if}</h1>
</div>
{#if $DataBase.account}
<span class="mb-4 text-gray-400">ID: {$DataBase.account.id}</span>
<span class="mb-4 text-textcolor2">ID: {$DataBase.account.id}</span>
{#if !isTauri}
<div class="flex items-center mt-2">
{#if $DataBase.account.useSync || forageStorage.isAccount}

32
src/lib/Setting/Settings.svelte
View File

@@ -30,87 +30,87 @@
{#if window.innerWidth >= 700 || selected === -1}
<div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
class:w-full={window.innerWidth < 700}>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 1} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 1} on:click={() => {
selected = 1
}}>
<BotIcon />
<span>{language.chatBot}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 12} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 12} on:click={() => {
selected = 12
}}>
<ContactIcon />
<span>{language.persona}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 2} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 2} on:click={() => {
selected = 2
}}>
<Sailboat />
<span>{language.otherBots}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 3} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 3} on:click={() => {
selected = 3
}}>
<MonitorIcon />
<span>{language.display}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 10} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 10} on:click={() => {
selected = 10
}}>
<LanguagesIcon />
<span>{language.language}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 11} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 11} on:click={() => {
selected = 11
}}>
<AccessibilityIcon />
<span>{language.accessibility}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 8} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 8} on:click={() => {
selected = 8
}}>
<BookIcon />
<span>{language.globalLoreBook}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 9} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 9} on:click={() => {
selected = 9
}}>
<AlignLeft />
<span>{language.globalRegexScript}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 4} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 4} on:click={() => {
selected = 4
}}>
<CodeIcon />
<span>{language.plugin}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 0} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 0} on:click={() => {
selected = 0
}}>
<UserIcon />
<span>{language.account} & {language.files}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 6} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 6} on:click={() => {
selected = 6
}}>
<ActivityIcon />
<span>{language.advancedSettings}</span>
</button>
<button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 7} on:click={() => {
<button class="text-textcolor2 flex gap-2 items-center hover:text-textcolor" class:text-textcolor={selected === 7} on:click={() => {
selected = 7
}}>
<BoxIcon />
<span>{language.community}</span>
</button>
{#if window.innerWidth < 700}
<button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
<button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
settingsOpen.set(false)
}}> <XCircleIcon /> </button>
{/if}
</div>
{/if}
{#if window.innerWidth >= 700 || selected !== -1}
<div class="flex-grow p-4 bg-bgcolor flex flex-col text-white overflow-y-auto relative">
<div class="flex-grow p-4 bg-bgcolor flex flex-col text-textcolor overflow-y-auto relative">
{#if selected === 0}
<UserSettings />
{:else if selected === 1}
@@ -139,7 +139,7 @@
<PersonaSettings/>
{/if}
</div>
<button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
<button class="absolute top-2 right-2 hover:text-green-500 text-textcolor" on:click={() => {
if(window.innerWidth >= 700){
settingsOpen.set(false)
}
@@ -160,7 +160,7 @@
{/if}
<style>
.setting-bg{
background: linear-gradient(to right, #21222C 50%, #282a36 50%);
background: linear-gradient(to right, var(--risu-theme-darkbg) 50%, var(--risu-theme-bgcolor) 50%);
}
</style>

22
src/lib/Setting/botpreset.svelte
View File

@@ -13,10 +13,10 @@
<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
<div class="flex items-center text-neutral-200 mb-4">
<div class="flex items-center text-textcolor mb-4">
<h2 class="mt-0 mb-0">{language.presets}</h2>
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
<XIcon size={24}/>
</button>
</div>
@@ -27,30 +27,30 @@
changeToPreset(i)
close()
}
}} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
}} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
{#if editMode}
<TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/>
{:else}
{#if i < 9}
<span class="w-2 text-center mr-2 text-gray-400">{i + 1}</span>
<span class="w-2 text-center mr-2 text-textcolor2">{i + 1}</span>
{/if}
<span>{presets.name}</span>
{/if}
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
e.stopPropagation()
copyPreset(i)
}}>
<CopyIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
e.stopPropagation()
downloadPreset(i)
}}>
<DownloadIcon size={18} />
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
if($DataBase.botPresets.length === 1){
alertError(language.errors.onlyOneChat)
@@ -72,7 +72,7 @@
</button>
{/each}
<div class="flex mt-2 items-center">
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
let botPresets = $DataBase.botPresets
let newPreset = cloneDeep(presetTemplate)
newPreset.name = `New Preset`
@@ -82,18 +82,18 @@
}}>
<PlusIcon/>
</button>
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
importPreset()
}}>
<FolderUpIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
editMode = !editMode
}}>
<EditIcon size={18}/>
</button>
</div>
<span class="text-gray-400 text-sm">{language.quickPreset}</span>
<span class="text-textcolor2 text-sm">{language.quickPreset}</span>
</div>
</div>

12
src/lib/Setting/lorepreset.svelte
View File

@@ -10,10 +10,10 @@
<div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
<div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
<div class="flex items-center text-neutral-200 mb-4">
<div class="flex items-center text-textcolor mb-4">
<h2 class="mt-0 mb-0">{language.loreBook}</h2>
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
<XIcon size={24}/>
</button>
</div>
@@ -23,14 +23,14 @@
if(!editMode){
$DataBase.loreBookPage = ind
}
}} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
}} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
{#if editMode}
<TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
{:else}
<span>{lore.name}</span>
{/if}
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
if($DataBase.loreBook.length === 1){
return
@@ -49,7 +49,7 @@
</button>
{/each}
<div class="flex mt-2 items-center">
<button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
let loreBooks = $DataBase.loreBook
let newLoreBook = {
name: `New LoreBook`,
@@ -61,7 +61,7 @@
}}>
<PlusIcon/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={() => {
editMode = !editMode
}}>
<EditIcon size={18}/>

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

@@ -140,24 +140,24 @@
{#if licensed !== 'private'}
<div class="flex gap-2 mb-2">
<button class={subMenu === 0 ? 'text-gray-200 ' : 'text-gray-500'} on:click={() => {subMenu = 0}}>
<button class={subMenu === 0 ? 'text-textcolor ' : 'text-textcolor2'} on:click={() => {subMenu = 0}}>
<UserIcon />
</button>
<button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 1}}>
<button class={subMenu === 1 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 1}}>
<SmileIcon />
</button>
<button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3}}>
<button class={subMenu === 3 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 3}}>
<BookIcon />
</button>
{#if currentChar.type === 'character'}
<button class={subMenu === 5 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 5}}>
<button class={subMenu === 5 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 5}}>
<Volume2Icon />
</button>
<button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 4}}>
<button class={subMenu === 4 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 4}}>
<CurlyBraces />
</button>
{/if}
<button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 2}}>
<button class={subMenu === 2 ? 'text-textcolor' : 'text-textcolor2'} on:click={() => {subMenu = 2}}>
<ActivityIcon />
</button>
</div>
@@ -167,19 +167,19 @@
{#if subMenu === 0}
{#if currentChar.type !== 'group' && licensed !== 'private'}
<TextInput size="xl" marginBottom placeholder="Character Name" bind:value={currentChar.data.name} />
<span class="text-neutral-200">{language.description} <Help key="charDesc"/></span>
<span class="text-textcolor">{language.description} <Help key="charDesc"/></span>
<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>
<span class="text-textcolor2 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
<span class="text-textcolor">{language.firstMessage} <Help key="charFirstMessage"/></span>
<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>
<span class="text-textcolor2 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
{:else if licensed !== 'private' && currentChar.type === 'group'}
<TextInput size="xl" marginBottom placeholder="Group Name" bind:value={currentChar.data.name} />
<span class="text-neutral-200">{language.character}</span>
<span class="text-textcolor">{language.character}</span>
<div class="p-4 gap-2 bg-bgcolor rounded-lg char-grid">
{#if currentChar.data.characters.length === 0}
<span class="text-gray-500">No Character</span>
<span class="text-textcolor2">No Character</span>
{:else}
<div></div>
<div class="text-center">{language.talkness}</div>
@@ -217,16 +217,16 @@
{/each}
{/if}
</div>
<div class="text-gray-500 mt-1 flex mb-6">
<button on:click={addGroupChar} class="hover:text-neutral-200 cursor-pointer">
<div class="text-textcolor2 mt-1 flex mb-6">
<button on:click={addGroupChar} class="hover:text-textcolor cursor-pointer">
<PlusIcon />
</button>
</div>
{/if}
<span class="text-neutral-200">{language.authorNote} <Help key="chatNote"/></span>
<span class="text-textcolor">{language.authorNote} <Help key="chatNote"/></span>
<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>
<span class="text-textcolor2 mb-6 text-sm">{tokens.localNote} {language.tokens}</span>
<div class="flex mt-6 items-center">
<Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
</div>
@@ -267,15 +267,15 @@
})()}
{:else if subMenu === 1}
<h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
<span class="text-neutral-200 mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
<span class="text-textcolor mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
<button on:click={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
{#if currentChar.data.image === ''}
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
<div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
{:else}
{#await getCharImage(currentChar.data.image, 'css')}
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500"></div>
<div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
{:then im}
<div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />
<div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />
{/await}
{/if}
</button>
@@ -289,7 +289,7 @@
{/if}
<span class="text-neutral-200 mt-6 mb-2">{language.viewScreen}</span>
<span class="text-textcolor mt-6 mb-2">{language.viewScreen}</span>
<!-- svelte-ignore empty-block -->
{#if currentChar.type !== 'group'}
@@ -309,8 +309,8 @@
{/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>
<span class="text-textcolor mt-6">{language.emotionImage} <Help key="emotion"/></span>
<span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
<div class="w-full max-w-full border border-selected p-2 rounded-md">
@@ -322,7 +322,7 @@
</tr>
{#if currentChar.data.emotionImages.length === 0}
<tr>
<div class="text-gray-500">{language.noImages}</div>
<div class="text-textcolor2">{language.noImages}</div>
</tr>
{:else}
{#each emos as emo, i}
@@ -345,7 +345,7 @@
</div>
<div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
<div class="text-textcolor2 hover:text-textcolor mt-2 flex">
{#if !$addingEmotion}
<button class="cursor-pointer hover:text-green-500" on:click={() => {addCharEmotion($selectedCharID)}}>
<PlusIcon />
@@ -356,8 +356,8 @@
</div>
{/if}
{#if currentChar.data.viewScreen === 'imggen'}
<span class="text-neutral-200 mt-6">{language.imageGeneration} <Help key="imggen"/></span>
<span class="text-gray-400 text-xs">{language.emotionWarn}</span>
<span class="text-textcolor mt-6">{language.imageGeneration} <Help key="imggen"/></span>
<span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
<div class="w-full max-w-full border border-selected rounded-md p-2">
<table class="w-full max-w-full tabler">
@@ -368,7 +368,7 @@
</tr>
{#if currentChar.data.sdData.length === 0}
<tr>
<div class="text-gray-500">{language.noData}</div>
<div class="text-textcolor2">{language.noData}</div>
</tr>
{/if}
{#each currentChar.data.sdData as emo, i}
@@ -397,7 +397,7 @@
{/each}
</table>
</div>
<div class="text-gray-500 hover:text-neutral-200 mt-2 flex">
<div class="text-textcolor2 hover:text-textcolor mt-2 flex">
{#if !$addingEmotion}
<button class="cursor-pointer hover:text-green-500" on:click={() => {
let db = ($DataBase)
@@ -415,11 +415,11 @@
<span>Loading...</span>
{/if}
</div>
<span class="text-neutral-200 mt-6">{language.currentImageGeneration}</span>
<span class="text-textcolor mt-6">{language.currentImageGeneration}</span>
{#if currentChar.data.chats[currentChar.data.chatPage].sdData}
<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>
<span><div class="text-textcolor2">{language.noData}</div></span>
{/if}
{/if}
{:else if subMenu === 3}
@@ -429,7 +429,7 @@
{#if currentChar.type === 'character'}
<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>
<span class="text-textcolor mt-2">Bias <Help key="bias"/></span>
<div class="w-full max-w-full border border-selected rounded-md p-2">
<table class="w-full max-w-full tabler mt-2">
@@ -448,7 +448,7 @@
</tr>
{#if currentChar.data.bias.length === 0}
<tr>
<div class="text-gray-500"> {language.noBias}</div>
<div class="text-textcolor2"> {language.noBias}</div>
</tr>
{/if}
{#each currentChar.data.bias as bias, i}
@@ -475,7 +475,7 @@
</div>
<span class="text-neutral-200 mt-4">{language.regexScript} <Help key="regexScript"/></span>
<span class="text-textcolor mt-4">{language.regexScript} <Help key="regexScript"/></span>
<RegexList bind:value={currentChar.data.customscript} />
<button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
if(currentChar.type === 'character'){
@@ -490,7 +490,7 @@
}
}}><PlusIcon /></button>
<span class="text-neutral-200 mt-4">{language.triggerScript} <Help key="regexScript"/></span>
<span class="text-textcolor mt-4">{language.triggerScript} <Help key="regexScript"/></span>
<TriggerList bind:value={currentChar.data.triggerscript} />
<button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
if(currentChar.type === 'character'){
@@ -508,7 +508,7 @@
{:else if subMenu === 5}
{#if currentChar.type === 'character'}
<h2 class="mb-2 text-2xl font-bold mt-2">TTS</h2>
<span class="text-neutral-200">{language.provider}</span>
<span class="text-textcolor">{language.provider}</span>
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsMode} on:change={() => {
if(currentChar.type === 'character'){
currentChar.data.ttsSpeech = ''
@@ -523,9 +523,9 @@
{#if currentChar.data.ttsMode === 'webspeech'}
{#if !speechSynthesis}
<span class="text-neutral-200">Web Speech isn't supported in your browser or OS</span>
<span class="text-textcolor">Web Speech isn't supported in your browser or OS</span>
{:else}
<span class="text-neutral-200">{language.Speech}</span>
<span class="text-textcolor">{language.Speech}</span>
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
<OptionInput value="">Auto</OptionInput>
{#each getWebSpeechTTSVoices() as voice}
@@ -537,9 +537,9 @@
{/if}
{/if}
{:else if currentChar.data.ttsMode === 'elevenlab'}
<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>
<span class="text-sm mb-2 text-textcolor2">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>
<span class="text-textcolor">{language.Speech}</span>
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
<OptionInput value="">Unset</OptionInput>
{#each voices as voice}
@@ -548,7 +548,7 @@
</SelectInput>
{/await}
{:else if currentChar.data.ttsMode === 'VOICEVOX'}
<span class="text-neutral-200">Speaker</span>
<span class="text-textcolor">Speaker</span>
<SelectInput className="mb-4 mt-2" bind:value={currentChar.data.voicevoxConfig.speaker}>
{#await getVOICEVOXVoices() then voices}
{#each voices as voice}
@@ -564,18 +564,18 @@
{/each}
</SelectInput>
{/if}
<span class="text-neutral-200">Speed scale</span>
<span class="text-textcolor">Speed scale</span>
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
<span class="text-neutral-200">Pitch scale</span>
<span class="text-textcolor">Pitch scale</span>
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
<span class="text-neutral-200">Volume scale</span>
<span class="text-textcolor">Volume scale</span>
<NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
<span class="text-neutral-200">Intonation scale</span>
<span class="text-textcolor">Intonation scale</span>
<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>
<span class="text-sm mb-2 text-textcolor2">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">
@@ -586,44 +586,44 @@
{:else if subMenu === 2}
<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>
<span class="text-textcolor">{language.exampleMessage} <Help key="exampleMessage"/></span>
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.exampleMessage}></TextAreaInput>
<span class="text-neutral-200">{language.creatorNotes} <Help key="creatorQuotes"/></span>
<span class="text-textcolor">{language.creatorNotes} <Help key="creatorQuotes"/></span>
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.creatorNotes} on:input={() => {
currentChar.data.removedQuotes = false
}}></TextAreaInput>
<span class="text-neutral-200">{language.systemPrompt} <Help key="systemPrompt"/></span>
<span class="text-textcolor">{language.systemPrompt} <Help key="systemPrompt"/></span>
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.systemPrompt}></TextAreaInput>
<span class="text-neutral-200">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
<span class="text-textcolor">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
<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>
<span class="text-textcolor">{language.SuperMemory}</span>
<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>
<span class="text-textcolor">{language.personality} <Help key="personality" unrecommended/></span>
<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>
<span class="text-textcolor">{language.scenario} <Help key="scenario" unrecommended/></span>
<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>
<span class="text-textcolor mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></TextAreaInput>
<span class="text-neutral-200">{language.creator}</span>
<span class="text-textcolor">{language.creator}</span>
<TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
<span class="text-neutral-200">{language.CharVersion}</span>
<span class="text-textcolor">{language.CharVersion}</span>
<TextInput size="sm" bind:value={currentChar.data.additionalData.character_version}/>
<span class="text-neutral-200 mt-2">{language.altGreet}</span>
<span class="text-textcolor mt-2">{language.altGreet}</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>
@@ -642,7 +642,7 @@
</tr>
{#if currentChar.data.alternateGreetings.length === 0}
<tr>
<div class="text-gray-500"> No Messages</div>
<div class="text-textcolor2"> No Messages</div>
</tr>
{/if}
{#each currentChar.data.alternateGreetings as bias, i}
@@ -667,7 +667,7 @@
</table>
</div>
<span class="text-neutral-200 mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
<span class="text-textcolor 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>
@@ -697,7 +697,7 @@
</tr>
{#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
<tr>
<div class="text-gray-500"> No Assets</div>
<div class="text-textcolor2"> No Assets</div>
</tr>
{:else}
{#each currentChar.data.additionalAssets as assets, i}
@@ -770,7 +770,7 @@
{/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>
<span class="text-textcolor">{language.SuperMemory}</span>
<TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
{/if}
{#if $DataBase.useExperimental}

16
src/lib/SideBars/LoreBook/LoreBookData.svelte
View File

@@ -45,21 +45,21 @@
</div>
{#if open}
<div class="border-0 outline-none w-full mt-2 flex flex-col mb-2">
<span class="text-neutral-200 mt-6">{language.name} <Help key="loreName"/></span>
<span class="text-textcolor mt-6">{language.name} <Help key="loreName"/></span>
<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>
<span class="text-textcolor mt-6">{language.activationKeys} <Help key="loreActivationKey"/></span>
<span class="text-xs text-textcolor2">{language.activationKeysInfo}</span>
<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>
<span class="text-textcolor mt-6">{language.SecondaryKeys}</span>
<span class="text-xs text-textcolor2">{language.activationKeysInfo}</span>
<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>
<span class="text-textcolor mt-6">{language.activationProbability}</span>
<NumberInput size="sm" bind:value={value.activationPercent} onChange={() => {
if(isNaN(value.activationPercent) || !value.activationPercent || value.activationPercent < 0){
value.activationPercent = 0
@@ -69,9 +69,9 @@
}
}} />
{/if}
<span class="text-neutral-200 mt-4">{language.insertOrder} <Help key="loreorder"/></span>
<span class="text-textcolor mt-4">{language.insertOrder} <Help key="loreorder"/></span>
<NumberInput size="sm" bind:value={value.insertorder} min={0} max={1000}/>
<span class="text-neutral-200 mt-4 mb-2">{language.prompt}</span>
<span class="text-textcolor mt-4 mb-2">{language.prompt}</span>
<TextAreaInput autocomplete="off" bind:value={value.content} />
<div class="flex items-center mt-4">
<Check bind:check={value.alwaysActive} name={language.alwaysActive}/>

6
src/lib/SideBars/LoreBook/LoreBookList.svelte
View File

@@ -75,7 +75,7 @@
{#key sorted}
{#if globalMode}
{#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
<span class="text-gray-500">No Lorebook</span>
<span class="text-textcolor2">No Lorebook</span>
{:else}
{#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
<LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => {
@@ -87,7 +87,7 @@
{/if}
{:else if submenu === 0}
{#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
<span class="text-gray-500">No Lorebook</span>
<span class="text-textcolor2">No Lorebook</span>
{:else}
{#each $DataBase.characters[$selectedCharID].globalLore as book, i}
<LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
@@ -99,7 +99,7 @@
{/if}
{:else if submenu === 1}
{#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
<span class="text-gray-500">No Lorebook</span>
<span class="text-textcolor2">No Lorebook</span>
{:else}
{#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
<LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} idx={i} onRemove={() => {

14
src/lib/SideBars/LoreBook/LoreBookSetting.svelte
View File

@@ -33,7 +33,7 @@
{/if}
{#if submenu !== 2}
{#if !globalMode}
<span class="text-gray-500 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
<span class="text-textcolor2 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
{/if}
<LoreBookList bind:globalMode bind:submenu />
{:else}
@@ -51,9 +51,9 @@
<div class="flex items-center mt-4">
<Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/>
</div>
<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
<span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
<NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
<span class="text-neutral-200">{language.loreBookToken}</span>
<span class="text-textcolor">{language.loreBookToken}</span>
<NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
{:else}
<div class="flex items-center mt-4">
@@ -71,18 +71,18 @@
{/if}
{#if submenu !== 2}
<div class="text-gray-500 mt-2 flex">
<button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer">
<div class="text-textcolor2 mt-2 flex">
<button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-textcolor cursor-pointer">
<PlusIcon />
</button>
<button on:click={() => {
exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
}} class="hover:text-neutral-200 ml-1 cursor-pointer">
}} class="hover:text-textcolor ml-1 cursor-pointer">
<DownloadIcon />
</button>
<button on:click={() => {
importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local')
}} class="hover:text-neutral-200 ml-2 cursor-pointer">
}} class="hover:text-textcolor ml-2 cursor-pointer">
<FolderUpIcon />
</button>
</div>

10
src/lib/SideBars/Scripts/RegexData.svelte
View File

@@ -44,21 +44,21 @@
</div>
{#if open}
<div class="seperator p-2">
<span class="text-neutral-200 mt-6">{language.name}</span>
<span class="text-textcolor mt-6">{language.name}</span>
<TextInput size="sm" bind:value={value.comment} />
<span class="text-neutral-200 mt-4">Modification Type</span>
<span class="text-textcolor mt-4">Modification Type</span>
<SelectInput bind:value={value.type}>
<OptionInput value="editinput">{language.editInput}</OptionInput>
<OptionInput value="editoutput">{language.editOutput}</OptionInput>
<OptionInput value="editprocess">{language.editProcess}</OptionInput>
<OptionInput value="editdisplay">{language.editDisplay}</OptionInput>
</SelectInput>
<span class="text-neutral-200 mt-6">IN:</span>
<span class="text-textcolor mt-6">IN:</span>
<TextInput size="sm" bind:value={value.in} />
<span class="text-neutral-200 mt-6">OUT:</span>
<span class="text-textcolor mt-6">OUT:</span>
<TextInput size="sm" bind:value={value.out} />
{#if value.ableFlag}
<span class="text-neutral-200 mt-6">FLAG:</span>
<span class="text-textcolor mt-6">FLAG:</span>
<TextInput size="sm" bind:value={value.flag} />
{/if}
<div class="flex items-center mt-4">

2
src/lib/SideBars/Scripts/RegexList.svelte
View File

@@ -53,7 +53,7 @@
<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
{#if value.length === 0}
<div class="text-gray-500">No Scripts</div>
<div class="text-textcolor2">No Scripts</div>
{/if}
{#key sorted}
{#each value as customscript, i}

46
src/lib/SideBars/Scripts/TriggerData.svelte
View File

@@ -46,9 +46,9 @@
</div>
{#if open}
<div class="seperator p-2">
<span class="text-neutral-200 mt-6">{language.name}</span>
<span class="text-textcolor mt-6">{language.name}</span>
<TextInput size="sm" bind:value={value.comment} />
<span class="text-neutral-200 mt-4">{language.type}</span>
<span class="text-textcolor mt-4">{language.type}</span>
<SelectInput bind:value={value.type}>
<OptionInput value="start">{language.triggerStart}</OptionInput>
<OptionInput value="output">{language.triggerOutput}</OptionInput>
@@ -56,8 +56,8 @@
<OptionInput value="manual">{language.triggerManual}</OptionInput>
</SelectInput>
<span class="text-neutral-200 mt-4">Conditions
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
<span class="text-textcolor mt-4">Conditions
<button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
value.conditions.push({
type: 'exists',
value: '',
@@ -70,14 +70,14 @@
</span>
<div class="flex flex-col px-2 py-4 border border-selected rounded-md">
{#if value.conditions.length === 0}
<span class="text-gray-500 text-sm">{language.always}</span>
<span class="text-textcolor2 text-sm">{language.always}</span>
{/if}
{#each value.conditions as cond,i}
{#if i > 0}
<hr class="border-selected my-4" />
{/if}
<span class="text-gray-400 text-sm">{language.type}
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
<span class="text-textcolor2 text-sm">{language.type}
<button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
value.conditions.splice(i, 1)
value.conditions = value.conditions
@@ -121,18 +121,18 @@
<OptionInput value="strict">{language.triggerMatchStrict}</OptionInput>
<OptionInput value="regex">{language.triggerMatchRegex}</OptionInput>
</SelectInput>
<span class="text-gray-400 text-sm">{language.value}</span>
<span class="text-textcolor2 text-sm">{language.value}</span>
<TextInput size="sm" bind:value={cond.value} />
<span class="text-gray-400 text-sm">{language.searchDepth}</span>
<span class="text-textcolor2 text-sm">{language.searchDepth}</span>
<NumberInput size="sm" bind:value={cond.depth} />
{/if}
{#if cond.type === 'var' || cond.type === 'chatindex'}
{#if cond.type === 'var'}
<span class="text-gray-400 text-sm">{language.varableName}</span>
<span class="text-textcolor2 text-sm">{language.varableName}</span>
<TextInput size="sm" bind:value={cond.var} />
{/if}
<span class="text-gray-400 text-sm">{language.value}</span>
<span class="text-textcolor2 text-sm">{language.value}</span>
<SelectInput bind:value={cond.operator} size="sm">
<OptionInput value="=">{language.equal}</OptionInput>
<OptionInput value="!=">{language.notEqual}</OptionInput>
@@ -150,8 +150,8 @@
{/each}
</div>
<span class="text-neutral-200 mt-4">Effects
<button aria-labelledby="Add Effects" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
<span class="text-textcolor mt-4">Effects
<button aria-labelledby="Add Effects" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
if(value.type === 'start'){
value.effect.push({
type: 'systemprompt',
@@ -174,14 +174,14 @@
<div class="flex flex-col px-2 py-4 border border-selected rounded-md">
{#if value.effect.length === 0}
<span class="text-gray-500 text-sm">{language.noEffect}</span>
<span class="text-textcolor2 text-sm">{language.noEffect}</span>
{/if}
{#each value.effect as effect,i}
{#if i > 0}
<hr class="border-selected my-4" />
{/if}
<span class="text-gray-400 text-sm">{language.type}
<button aria-labelledby="Add Conditions" class="float-right text-gray-400 hover:text-green-500" on:click={() => {
<span class="text-textcolor2 text-sm">{language.type}
<button aria-labelledby="Add Conditions" class="float-right text-textcolor2 hover:text-green-500" on:click={() => {
value.effect.splice(i, 1)
value.effect = value.effect
@@ -222,19 +222,19 @@
{#if value.type !== 'start'}
<span class="text-red-400 text-sm">{language.invaildTriggerEffect}</span>
{/if}
<span class="text-gray-400 text-sm">{language.location}</span>
<span class="text-textcolor2 text-sm">{language.location}</span>
<SelectInput bind:value={effect.location} size="sm">
<OptionInput value="start">{language.promptstart}</OptionInput>
<OptionInput value="historyend">{language.historyend}</OptionInput>
<OptionInput value="promptend">{language.promptend}</OptionInput>
</SelectInput>
<span class="text-gray-400 text-sm">{language.value}</span>
<span class="text-textcolor2 text-sm">{language.value}</span>
<TextAreaInput size="sm" bind:value={effect.value} />
{/if}
{#if effect.type === 'setvar'}
<span class="text-gray-400 text-sm">{language.varableName}</span>
<span class="text-textcolor2 text-sm">{language.varableName}</span>
<TextInput size="sm" bind:value={effect.var} />
<span class="text-gray-400 text-sm">{language.operator}</span>
<span class="text-textcolor2 text-sm">{language.operator}</span>
<SelectInput bind:value={effect.operator} size="sm">
<OptionInput value="=">{language.TriggerSetToVar}</OptionInput>
<OptionInput value="+=">{language.TriggerAddToVar}</OptionInput>
@@ -242,16 +242,16 @@
<OptionInput value="*=">{language.TriggerMulToVar}</OptionInput>
<OptionInput value="/=">{language.TriggerDivToVar}</OptionInput>
</SelectInput>
<span class="text-gray-400 text-sm">{language.value}</span>
<span class="text-textcolor2 text-sm">{language.value}</span>
<TextInput size="sm" bind:value={effect.value} />
{/if}
{#if effect.type === 'impersonate'}
<span class="text-gray-400 text-sm">{language.role}</span>
<span class="text-textcolor2 text-sm">{language.role}</span>
<SelectInput bind:value={effect.role} size="sm">
<OptionInput value="user">{language.user}</OptionInput>
<OptionInput value="char">{language.character}</OptionInput>
</SelectInput>
<span class="text-gray-400 text-sm">{language.value}</span>
<span class="text-textcolor2 text-sm">{language.value}</span>
<TextAreaInput size="sm" bind:value={effect.value} />
{/if}
{/each}

2
src/lib/SideBars/Scripts/TriggerList.svelte
View File

@@ -9,7 +9,7 @@
<div class="contain w-full max-w-full mt-4 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
{#if value.length === 0}
<div class="text-gray-500">No Scripts</div>
<div class="text-textcolor2">No Scripts</div>
{/if}
{#key sorted}
{#each value as triggerscript, i}

8
src/lib/SideBars/SideChatList.svelte
View File

@@ -40,25 +40,25 @@
if(!editMode){
chara.chatPage = i
}
}} class="flex items-center text-neutral-200 border-solid border-0 border-gray-600 p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
}} class="flex items-center text-textcolor border-solid border-0 border-darkborderc p-2 cursor-pointer rounded-md"class:bg-selected={i === chara.chatPage}>
{#if editMode}
<TextInput bind:value={chara.chats[i].name} additionalClass="flex-grow min-w-0" padding={false}/>
{:else}
<span>{chat.name}</span>
{/if}
<div class="flex-grow flex justify-end">
<button class="text-gray-500 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={() => {
editMode = !editMode
}}>
<EditIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 mr-1 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
exportChat(i)
}}>
<DownloadIcon size={18}/>
</button>
<button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 cursor-pointer" on:click={async (e) => {
e.stopPropagation()
if(chara.chats.length === 1){
alertError(language.errors.onlyOneChat)

18
src/lib/SideBars/Sidebar.svelte
View File

@@ -328,7 +328,7 @@
</script>
<div
class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg relative"
class="h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-textcolor shadow-lg relative"
class:editMode
class:risu-sub-sidebar={$sideBarClosing}
class:risu-sub-sidebar-close={$sideBarClosing}
@@ -336,12 +336,12 @@
class:flex={!hidden}
>
<button
class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer mt-2 items-center justify-center rounded-md bg-gray-500 transition-colors hover:bg-green-500"
class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer text-white mt-2 items-center justify-center rounded-md bg-textcolor2 transition-colors hover:bg-green-500"
on:click={() => {
menuMode = 1 - menuMode;
}}><ListIcon />
</button>
<div class="mt-2 border-b border-b-selected w-full relative">
<div class="mt-2 border-b border-b-selected w-full relative text-white ">
{#if menuMode === 1}
<div class="absolute w-20 min-w-20 flex border-b-selected border-b bg-bgcolor flex-col items-center pt-2 rounded-b-md z-20 pb-2">
<BarIcon
@@ -585,7 +585,7 @@
</div>
</div>
<div
class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-gray-200 max-h-full"
class="setting-area w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg py-6 text-textcolor max-h-full"
class:risu-sidebar={!$sideBarClosing}
class:risu-sidebar-close={$sideBarClosing}
class:minw96={!$DynamicGUI}
@@ -602,7 +602,7 @@
}}
>
<button
class="flex w-full justify-end text-gray-200"
class="flex w-full justify-end text-textcolor"
on:click={async () => {
if($sideBarClosing){
return
@@ -610,18 +610,18 @@
$sideBarClosing = true;
}}
>
<!-- <button class="border-none bg-transparent p-0 text-gray-200"><X /></button> -->
<!-- <button class="border-none bg-transparent p-0 text-textcolor"><X /></button> -->
</button>
{#if sideBarMode === 0}
{#if $selectedCharID < 0 || $settingsOpen}
<div>
<h1 class="text-xl">Welcome to RisuAI!</h1>
<span class="text-xs text-gray-400">Select a bot to start chating</span>
<span class="text-xs text-textcolor2">Select a bot to start chating</span>
</div>
{:else}
<div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
<button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-gray-500={$botMakerMode}>{language.Chat}</button>
<button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-gray-500={!$botMakerMode}>{language.character}</button>
<button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
<button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
</div>
{#if $botMakerMode}
<CharConfig />

2
src/lib/UI/BaseRoundedButton.svelte
View File

@@ -8,7 +8,7 @@
on:click={onClick}
class="flex h-[56px] w-[56px] cursor-pointer select-none items-center justify-center
transition-colors rounded-full
border border-gray-500 text-gray-300
border border-textcolor2 text-gray-300
hover:border-gray-300
{isDisabled ? '!cursor-not-allowed' : ''}"
>

2
src/lib/UI/GUI/Button.svelte
View File

@@ -1,6 +1,6 @@
<button
on:click
class="{selected ? 'bg-borderc' : 'bg-gray-700'} border border-gray-600 text-white rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
class="{selected ? 'bg-borderc' : 'bg-darkbutton'} border border-darkborderc text-textcolor rounded-md shadow-sm hover:bg-borderc focus:outline-none focus:ring-2 focus:ring-borderc transition-colors duration-200{className ? (" " + className) : ""}"
class:px-4 = {size == "md"}
class:px-2 = {size == "sm"}
class:px-6 = {size == "lg"}

4
src/lib/UI/GUI/CheckInput.svelte
View File

@@ -9,7 +9,7 @@
</script>
<label
class="flex items-center space-x-2 cursor-pointer text-white"
class="flex items-center space-x-2 cursor-pointer text-textcolor"
class:mr-2={margin}
aria-describedby="{name} {check ? 'abled' : 'disabled'}"
>
@@ -23,7 +23,7 @@
}}
/>
<span
class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-gray-600 flex justify-center items-center {check ? 'bg-borderc' : 'bg-gray-700'} transition-colors duration-200"
class="w-5 h-5 min-w-5 min-h-5 rounded-md border-2 border-darkborderc flex justify-center items-center {check ? 'bg-borderc' : 'bg-darkbutton'} transition-colors duration-200"
aria-hidden="true"
>
{#if check}

2
src/lib/UI/GUI/NumberInput.svelte
View File

@@ -1,5 +1,5 @@
<input
class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent numinput focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

2
src/lib/UI/GUI/SelectInput.svelte
View File

@@ -1,5 +1,5 @@
<select
class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((className) ? (' ' + className) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

4
src/lib/UI/GUI/SideBarArrow.svelte
View File

@@ -5,14 +5,14 @@
</script>
{#if $sideBarStore && !$DynamicGUI}
<button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 z-20">
<button on:click={() => {sideBarClosing.set(true)}} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-transparent rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor z-20">
<ArrowLeft />
</button>
{:else}
<button on:click={() => {
sideBarClosing.set(false);
sideBarStore.set(true)}
} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-neutral-200 opacity-50 hover:opacity-90 z-20">
} class="absolute top-3 left-0 h-12 w-12 border-r border-b border-t border-borderc rounded-r-md bg-darkbg hover:border-neutral-200 transition-colors flex items-center justify-center text-textcolor opacity-50 hover:opacity-90 z-20">
<ArrowRight />
</button>
{/if}

4
src/lib/UI/GUI/SliderInput.svelte
View File

@@ -1,5 +1,5 @@
<input
class="text-neutral-200 bg-transparent input-text"
class="text-textcolor bg-transparent input-text"
class:mb-4={marginBottom}
type="range"
min={min}
@@ -11,7 +11,7 @@
<!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>
<div
class="relative w-full h-2 bg-gray-700 rounded-full cursor-pointer"
class="relative w-full h-2 bg-darkbutton rounded-full cursor-pointer"
on:click={changeValue}
>
<div

4
src/lib/UI/GUI/TextAreaInput.svelte
View File

@@ -1,6 +1,6 @@
{#if optimaizedInput}
<textarea
class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}
@@ -36,7 +36,7 @@
/>
{:else}
<textarea
class={"border border-gray-600 n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc n-scroll focus:border-borderc resize-none rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

2
src/lib/UI/GUI/TextAreaResizable.svelte
View File

@@ -29,7 +29,7 @@
resize: none;
box-sizing: border-box;
background: transparent;
color: white;
color: var(--risu-theme-textcolor);
border: 1px solid rgba(98, 114, 164, 0.5);
max-width: calc(95% - 2rem);
padding: 1rem;

2
src/lib/UI/GUI/TextInput.svelte
View File

@@ -1,5 +1,5 @@
<input
class={"border border-gray-600 focus:border-borderc rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class={"border border-darkborderc focus:border-borderc rounded-md shadow-sm text-textcolor bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')}
class:text-sm={size === 'sm'}
class:text-md={size === 'md'}
class:text-lg={size === 'lg'}

18
src/lib/UI/MainMenu.svelte
View File

@@ -12,26 +12,26 @@
</script>
<div class="h-full w-full flex flex-col overflow-y-auto items-center">
{#if !openHub}
<h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
<h2 class="text-4xl text-textcolor mb-0 mt-6 font-black">RisuAI</h2>
{#if (!isTauri) && (!isNodeServer)}
<h3 class="text-gray-500 mt-1">Version {appVer}{webAppSubVer}</h3>
<h3 class="text-textcolor2 mt-1">Version {appVer}{webAppSubVer}</h3>
{:else}
<h3 class="text-gray-500 mt-1">Version {appVer}</h3>
<h3 class="text-textcolor2 mt-1">Version {appVer}</h3>
{/if}
<GithubStars />
{/if}
<div class="w-full flex p-4 flex-col text-white max-w-4xl">
<div class="w-full flex p-4 flex-col text-textcolor max-w-4xl">
{#if !openHub}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
openURL("https://github.com/kwaroran/RisuAI/wiki")
}}>
<h1 class="text-2xl font-bold text-start">{language.officialWiki}</h1>
<span class="mt-2 text-gray-400 text-start">{language.officialWikiDesc}</span>
<span class="mt-2 text-textcolor2 text-start">{language.officialWikiDesc}</span>
</button>
<button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
<h1 class="text-2xl font-bold text-start">{language.officialDiscord}</h1>
<span class="mt-2 text-gray-400 text-start">{language.officialDiscordDesc}</span>
<span class="mt-2 text-textcolor2 text-start">{language.officialDiscordDesc}</span>
</button>
</div>
<div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
@@ -52,15 +52,15 @@
{/each}
</div>
{:else}
<div class="text-gray-500">Failed to load {language.hub}...</div>
<div class="text-textcolor2">Failed to load {language.hub}...</div>
{/if}
{/await}
{:else}
<div class="text-gray-500">{language.hideRealm}</div>
<div class="text-textcolor2">{language.hideRealm}</div>
{/if}
{:else}
<div class="flex items-center mt-4">
<button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
<button class="mr-2 text-textcolor2 hover:text-green-500" on:click={() => (openHub = false)}>
<ArrowLeft/>
</button>
</div>

2
src/lib/UI/ModelList.svelte
View File

@@ -74,7 +74,7 @@
}}>
<div class="w-96 max-w-full max-h-full overflow-y-auto overflow-x-hidden bg-bgcolor p-4 flex flex-col" on:click|stopPropagation>
<h1 class="font-bold text-xl">{language.model}
<!-- <button class="float-right text-sm font-light text-gray-500 hover:text-green-300"
<!-- <button class="float-right text-sm font-light text-textcolor2 hover:text-green-300"
class:text-green-500={openAdv} on:click={() => {
openAdv = !openAdv
}}>

10
src/lib/UI/Realm/RealmHubIcon.svelte
View File

@@ -12,8 +12,8 @@
<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}> <div class="flex gap-2 w-full">
<img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
<div class="flex flex-col flex-grow min-w-0">
<span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
<span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
<span class="text-textcolor text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
<span class="text-textcolor2 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
<div class="flex flex-wrap">
{#each chara.tags as tag, i}
{#if i < 4}
@@ -26,13 +26,13 @@
<div class="flex-grow"></div>
<div class="flex flex-wrap w-full flex-row-reverse gap-1">
{#if chara.hasEmotion}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
{/if}
{#if chara.hasAsset}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
{/if}
{#if chara.hasLore}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
{/if}
</div>
</div>

2
src/lib/UI/Realm/RealmLicense.svelte
View File

@@ -13,7 +13,7 @@
openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
}}>
<img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />
<span class="text-gray-500">
<span class="text-textcolor2">
Licensed with {CCLicenseData[license][2]}
</span>

2
src/lib/UI/Realm/RealmMain.svelte
View File

@@ -120,7 +120,7 @@
<span>
Menu
</span>
<button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
<button class="float-right text-textcolor2 hover:text-green-500" on:click={() => {menuOpen = false}}>
<XIcon />
</button>
</h1>

18
src/lib/UI/Realm/RealmPopUp.svelte
View File

@@ -14,7 +14,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-white" on:click={() => {
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" on:click={() => {
openedData = null
}}>
<div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
@@ -25,7 +25,7 @@
{/if}
<div class="flex justify-start gap-4 mt-4">
<img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
<span class="text-gray-400 break-words text-base chattext prose prose-invert">
<span class="text-textcolor2 break-words text-base chattext prose prose-invert">
{@html parseMarkdownSafe(openedData.desc)}
</span>
</div>
@@ -37,24 +37,24 @@
{/each}
</div>
<div class="flex flex-wrap w-full flex-row gap-1 mt-2">
<span class="text-gray-500">
<span class="text-textcolor2">
{language.popularityLevel.replace('{}', openedData.download.toString())}
</span>
<div class="border-l-selected border-l ml-1 mr-1"></div>
{#if openedData.hasEmotion}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
{/if}
{#if openedData.hasAsset}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
{/if}
{#if openedData.hasLore}
<button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
{/if}
</div>
</div>
<div class="flex flex-row-reverse gap-2">
<button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
const conf = await alertConfirm('Report this character?')
if(conf){
const report = await alertInput('Write a report text that would be sent to the admin')
@@ -71,7 +71,7 @@
<FlagIcon />
</button>
{#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
<button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
const conf = await alertConfirm('Do you want to remove this character from Realm?')
if(conf){
const da = await fetch(hubURL + '/hub/remove', {
@@ -87,7 +87,7 @@
<TrashIcon />
</button>
{/if}
<button class="text-gray-400 hover:text-green-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-green-500" on:click|stopPropagation={async () => {
await navigator.clipboard.writeText(`https://risuai.xyz/?realm=${openedData.id}`)
alertNormal("Copied to clipboard")
}}>

22
src/lib/UI/Realm/RealmUpload.svelte
View File

@@ -4,35 +4,35 @@
{#if !$DataBase.account}
<span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
<span class="text-gray-500">You can login in app settings 🡲 account</span>
<span class="text-textcolor2">You can login in app settings 🡲 account</span>
<button on:click={async () => {
close()
}} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
}} class="text-textcolor mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
{:else}
<h1 class="font-bold text-2xl w-full">
<span>
Share {char.name} to {language.hub}
</span>
<button class="float-right text-gray-400 hover:text-green-500" on:click={close}>
<button class="float-right text-textcolor2 hover:text-green-500" on:click={close}>
<XIcon />
</button>
</h1>
<div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div>
<span class="text-neutral-200">{language.creatorNotes}</span>
<span class="text-gray-400 text-sm">A description that displays when you search and when you first open a bot.</span>
<span class="text-gray-400 text-sm">More than 20 characters.</span>
<span class="text-textcolor">{language.creatorNotes}</span>
<span class="text-textcolor2 text-sm">A description that displays when you search and when you first open a bot.</span>
<span class="text-textcolor2 text-sm">More than 20 characters.</span>
<TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
<span class="text-neutral-200">{language.tags}</span>
<span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
<span class="text-textcolor">{language.tags}</span>
<span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
<TextInput placeholder="" bind:value={tags} on:input={() => {
tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
}} />
{#if char.license !== 'CC BY-NC-SA 4.0' && char.license !== 'CC BY-SA 4.0'}
<span class="text-neutral-200 mt-4">License</span>
<span class="text-gray-400 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
<span class="text-textcolor mt-4">License</span>
<span class="text-textcolor2 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
<SelectInput bind:value={license}>
<OptionInput value="">None</OptionInput>
{#each Object.keys(CCLicenseData) as ccl}
@@ -50,7 +50,7 @@
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
</div>
{#if nsfwMode}
<span class="text-gray-400 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
<span class="text-textcolor2 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
{/if}
<Button on:click={async () => {
if(char.creatorNotes.length < 20){

20
src/styles.css
View File

@@ -6,17 +6,27 @@ body{
margin: 0;
padding: 0;
margin-top: 0px;
background-color: #282a36;
background-color: var(--risu-theme-bgcolor);
overflow-y: hidden;
overflow-x: hidden;
}
:root{
--FontColorStandard: #fafafa;
--FontColorBold : #fafafa;
--FontColorBold : ##e5e5e5;
--FontColorItalic : #8C8D93;
--FontColorItalicBold : #8C8D93;
--risu-animation-speed: 0.2s
--risu-animation-speed: 0.2s;
--risu-theme-bgcolor: #282a36;
--risu-theme-darkbg: #21222c;
--risu-theme-borderc: #6272a4;
--risu-theme-selected: #44475a;
--risu-theme-draculared: #ff5555;
--risu-theme-textcolor: #f5f5f5;
--risu-theme-textcolor2: #64748b;
--risu-theme-darkborderc: #4b5563;
--risu-theme-darkbutton: #374151;
}
html, body{
@@ -28,7 +38,7 @@ html, body{
}
.chattext2 pre{
background-color: #282a36;
background-color: var(--risu-theme-bgcolor);
padding: 0.5rem;
overflow-x: auto;
}
@@ -126,7 +136,7 @@ html, body{
.input-text{
border: none;
outline: 0;
border-bottom: 1px solid #6272a4;
border-bottom: 1px solid var(--risu-theme-borderc);
}
.bgc{

160
src/ts/gui/colorscheme.ts Normal file
View File

@@ -0,0 +1,160 @@
import { get } from "svelte/store";
import { DataBase, setDatabase } from "../storage/database";
import { cloneDeep } from "lodash";
export interface ColorScheme{
bgcolor: string;
darkbg: string;
borderc: string;
selected: string;
draculared: string;
textcolor: string;
textcolor2: string;
darkBorderc: string;
darkbutton: string;
type:'light'|'dark';
}
export const defaultColorScheme: ColorScheme = {
bgcolor: "#282a36",
darkbg: "#21222c",
borderc: "#6272a4",
selected: "#44475a",
draculared: "#ff5555",
textcolor: "#f8f8f2",
textcolor2: "#64748b",
darkBorderc: "#4b5563",
darkbutton: "#374151",
type:'dark'
}
const colorShemes = {
"default": defaultColorScheme,
"light": {
bgcolor: "#f0f0f0",
darkbg: "#ffffff",
borderc: "#0f172a",
selected: "#e0e0e0",
draculared: "#ff5555",
textcolor: "#0f172a",
textcolor2: "#64748b",
darkBorderc: "#d1d5db",
darkbutton: "#e5e7eb",
type:'light'
},
"cherry": {
bgcolor: "#450a0a",
darkbg: "#7f1d1d",
borderc: "#ea580c",
selected: "#d97706",
draculared: "#ff5555",
textcolor: "#f8f8f2",
textcolor2: "#fca5a5",
darkBorderc: "#92400e",
darkbutton: "#b45309",
type:'dark'
},
"galaxy": {
bgcolor: "#0f172a",
darkbg: "#1f2a48",
borderc: "#8be9fd",
selected: "#457b9d",
draculared: "#ff5555",
textcolor: "#f8f8f2",
textcolor2: "#8be9fd",
darkBorderc: "#457b9d",
darkbutton: "#1f2a48",
type:'dark'
},
"nature": {
bgcolor: "#1b4332",
darkbg: "#2d6a4f",
borderc: "#a8dadc",
selected: "#4d908e",
draculared: "#ff5555",
textcolor: "#f8f8f2",
textcolor2: "#4d908e",
darkBorderc: "#457b9d",
darkbutton: "#2d6a4f",
type:'dark'
}
} as const
export const colorSchemeList = Object.keys(colorShemes) as (keyof typeof colorShemes)[]
export function changeColorScheme(colorScheme: string){
let db = get(DataBase)
db.colorScheme = cloneDeep(colorShemes[colorScheme])
db.colorSchemeName = colorScheme
setDatabase(db)
updateColorScheme()
}
export function updateColorScheme(){
let db = get(DataBase)
let colorScheme = db.colorScheme
if(colorScheme == null){
colorScheme = defaultColorScheme
}
//set css variables
document.documentElement.style.setProperty("--risu-theme-bgcolor", colorScheme.bgcolor);
document.documentElement.style.setProperty("--risu-theme-darkbg", colorScheme.darkbg);
document.documentElement.style.setProperty("--risu-theme-borderc", colorScheme.borderc);
document.documentElement.style.setProperty("--risu-theme-selected", colorScheme.selected);
document.documentElement.style.setProperty("--risu-theme-draculared", colorScheme.draculared);
document.documentElement.style.setProperty("--risu-theme-textcolor", colorScheme.textcolor);
document.documentElement.style.setProperty("--risu-theme-textcolor2", colorScheme.textcolor2);
document.documentElement.style.setProperty("--risu-theme-darkborderc", colorScheme.darkBorderc);
document.documentElement.style.setProperty("--risu-theme-darkbutton", colorScheme.darkbutton);
}
export function updateTextTheme(){
let db = get(DataBase)
const root = document.querySelector(':root') as HTMLElement;
if(!root){
return
}
switch(db.textTheme){
case "standard":{
if(db.colorScheme.type === 'dark'){
root.style.setProperty('--FontColorStandard', '#fafafa');
root.style.setProperty('--FontColorItalic', '#8C8D93');
root.style.setProperty('--FontColorBold', '#fafafa');
root.style.setProperty('--FontColorItalicBold', '#8C8D93');
}else{
root.style.setProperty('--FontColorStandard', '#0f172a');
root.style.setProperty('--FontColorItalic', '#8C8D93');
root.style.setProperty('--FontColorBold', '#0f172a');
root.style.setProperty('--FontColorItalicBold', '#8C8D93');
}
break
}
case "highcontrast":{
if(db.colorScheme.type === 'dark'){
root.style.setProperty('--FontColorStandard', '#f8f8f2');
root.style.setProperty('--FontColorItalic', '#F1FA8C');
root.style.setProperty('--FontColorBold', '#8BE9FD');
root.style.setProperty('--FontColorItalicBold', '#FFB86C');
}
else{
root.style.setProperty('--FontColorStandard', '#0f172a');
root.style.setProperty('--FontColorItalic', '#F1FA8C');
root.style.setProperty('--FontColorBold', '#8BE9FD');
root.style.setProperty('--FontColorItalicBold', '#FFB86C');
}
break
}
case "custom":{
root.style.setProperty('--FontColorStandard', db.customTextTheme.FontColorStandard);
root.style.setProperty('--FontColorItalic', db.customTextTheme.FontColorItalic);
root.style.setProperty('--FontColorBold', db.customTextTheme.FontColorBold);
root.style.setProperty('--FontColorItalicBold', db.customTextTheme.FontColorItalicBold);
break
}
}
}

36
src/ts/storage/database.ts
View File

@@ -9,6 +9,7 @@ import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from '.
import { alertNormal } from '../alert';
import type { NAISettings } from '../process/models/nai';
import { prebuiltNAIpresets } from '../process/templates/templates';
import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
export const DataBase = writable({} as any as Database)
export const loadedStore = writable(false)
@@ -294,6 +295,8 @@ export function setDatabase(data:Database){
data.NAIsettings ??= cloneDeep(prebuiltNAIpresets)
data.assetWidth ??= -1
data.animationSpeed ??= 0.4
data.colorScheme ??= cloneDeep(defaultColorScheme)
data.colorSchemeName ??= 'default'
changeLanguage(data.language)
DataBase.set(data)
@@ -604,6 +607,8 @@ export interface Database{
botSettingAtStart:false
NAIsettings:NAISettings
hideRealm:boolean
colorScheme:ColorScheme
colorSchemeName:string
}
interface hordeConfig{
@@ -789,37 +794,6 @@ export const defaultSdDataFunc = () =>{
return cloneDeep(defaultSdData)
}
export function updateTextTheme(){
let db = get(DataBase)
const root = document.querySelector(':root') as HTMLElement;
if(!root){
return
}
switch(db.textTheme){
case "standard":{
root.style.setProperty('--FontColorStandard', '#fafafa');
root.style.setProperty('--FontColorItalic', '#8C8D93');
root.style.setProperty('--FontColorBold', '#fafafa');
root.style.setProperty('--FontColorItalicBold', '#8C8D93');
break
}
case "highcontrast":{
root.style.setProperty('--FontColorStandard', '#f8f8f2');
root.style.setProperty('--FontColorItalic', '#F1FA8C');
root.style.setProperty('--FontColorBold', '#8BE9FD');
root.style.setProperty('--FontColorItalicBold', '#FFB86C');
break
}
case "custom":{
root.style.setProperty('--FontColorStandard', db.customTextTheme.FontColorStandard);
root.style.setProperty('--FontColorItalic', db.customTextTheme.FontColorItalic);
root.style.setProperty('--FontColorBold', db.customTextTheme.FontColorBold);
root.style.setProperty('--FontColorItalicBold', db.customTextTheme.FontColorItalicBold);
break
}
}
}
export function saveCurrentPreset(){
let db = get(DataBase)
let pres = db.botPresets

22
src/ts/storage/globalApi.ts
View File

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
import { appDataDir, join } from "@tauri-apps/api/path";
import { get } from "svelte/store";
import {open} from '@tauri-apps/api/shell'
import { DataBase, loadedStore, setDatabase, type Database, updateTextTheme, defaultSdDataFunc } from "./database";
import { DataBase, loadedStore, setDatabase, type Database, defaultSdDataFunc } from "./database";
import { appWindow } from "@tauri-apps/api/window";
import { checkOldDomain, checkUpdate } from "../update";
import { botMakerMode, selectedCharID } from "../stores";
@@ -21,6 +21,7 @@ import { loadRisuAccountData } from "../drive/accounter";
import { decodeRisuSave, encodeRisuSave } from "./risuSave";
import { AutoStorage } from "./autoStorage";
import { updateAnimationSpeed } from "../gui/animation";
import { updateColorScheme, updateTextTheme } from "../gui/colorscheme";
//@ts-ignore
export const isTauri = !!window.__TAURI__
@@ -425,6 +426,7 @@ export async function loadData() {
}
await checkNewFormat()
const db = get(DataBase);
updateColorScheme()
updateTextTheme()
updateAnimationSpeed()
if(db.botSettingAtStart){
@@ -441,14 +443,20 @@ export async function loadData() {
const knownHostes = ["localhost","127.0.0.1"]
export function addFetchLog(body:any, headers:any, response:any, success:boolean, url:string){
export function addFetchLog(arg:{
body:any,
headers?:{[key:string]:string},
response:any,
success:boolean,
url:string
}){
fetchLog.unshift({
body: JSON.stringify(body, null, 2),
header: JSON.stringify(headers ?? {}, null, 2),
response: JSON.stringify(response, null, 2),
success: success,
body: JSON.stringify(arg.body, null, 2),
header: JSON.stringify(arg.headers ?? {}, null, 2),
response: JSON.stringify(arg.response, null, 2),
success: arg.success,
date: (new Date()).toLocaleTimeString(),
url: url
url: arg.url
})
}

14
tailwind.config.js
View File

@@ -7,11 +7,15 @@ export default {
theme: {
extend: {
colors:{
bgcolor: "#282a36",
darkbg: "#21222C",
borderc: "#6272a4",
selected: "#44475a",
draculared: "#ff5555"
bgcolor: "var(--risu-theme-bgcolor)",
darkbg: "var(--risu-theme-darkbg)",
borderc: "var(--risu-theme-borderc)",
selected: "var(--risu-theme-selected)",
draculared: "var(--risu-theme-draculared)",
textcolor: "var(--risu-theme-textcolor)",
textcolor2: "var(--risu-theme-textcolor2)",
darkborderc: "var(--risu-theme-darkborderc)",
darkbutton: "var(--risu-theme-darkbutton)",
},
minWidth: {
'2': '0.5rem',