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> </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} {#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> <span>Loading...</span>
</div> </div>
{:else if !didFirstSetup} {:else if !didFirstSetup}

1
src/lang/en.ts
View File

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

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

@@ -28,7 +28,7 @@
} }
</script> </script>
{#if currentCharacter.type ==='character'} {#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'){ if(currentCharacter.type === 'character'){
const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif']) const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? [] currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? []

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

@@ -75,18 +75,18 @@
$: displaya(message) $: displaya(message)
</script> </script>
<div class="flex max-w-full justify-center risu-chat" class:bgc={isLastMemory}> <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} {#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} /> class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
{:then m} {: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} /> class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons} />
{/await} {/await}
<span class="flex flex-col ml-4 w-full max-w-full min-w-0"> <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
<div class="flexium items-center chat"> <div class="flexium items-center chat">
<span class="chat text-xl unmargin">{name}</span> <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> <span class="text-xs">{statusMessage}</span>
{#if $DataBase.useChatCopy} {#if $DataBase.useChatCopy}
<button class="ml-2 hover:text-green-500 transition-colors" on:click={()=>{ <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="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} <h1 class="font-bold mb-2">{language.creatorNotes}
<button class="float-right" on:click={onRemove}> <button class="float-right" on:click={onRemove}>
<XIcon /> <XIcon />

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

@@ -270,7 +270,7 @@
mergedCanvas.height = totalHeight; mergedCanvas.height = totalHeight;
} }
mergedCtx.fillStyle = '#282a36' mergedCtx.fillStyle = 'var(--risu-theme-bgcolor)'
mergedCtx.fillRect(0, 0, maxWidth, totalHeight); mergedCtx.fillRect(0, 0, maxWidth, totalHeight);
let indh = 0 let indh = 0
for(let i = 0; i < canvases.length; i++) { for(let i = 0; i < canvases.length; i++) {
@@ -313,11 +313,11 @@
<div class="flex items-end mt-2 mb-2 w-full"> <div class="flex items-end mt-2 mb-2 w-full">
{#if $DataBase.useChatSticker && currentCharacter.type !== 'group'} {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
<div on:click={()=>{toggleStickers = !toggleStickers}} <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/> <Laugh/>
</div> </div>
{/if} {/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:value={messageInput}
bind:this={inputEle} bind:this={inputEle}
on:keydown={(e) => { on:keydown={(e) => {
@@ -339,28 +339,28 @@
{#if $doingChat || doingChatInputTranslate} {#if $doingChat || doingChatInputTranslate}
<div <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 class="loadmove" class:autoload={autoMode}>
</div> </div>
</div> </div>
{:else} {:else}
<div on:click={send} <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> </div>
{/if} {/if}
<div on:click={(e) => { <div on:click={(e) => {
openMenu = !openMenu openMenu = !openMenu
e.stopPropagation() 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>
</div> </div>
{#if $DataBase.useAutoTranslateInput} {#if $DataBase.useAutoTranslateInput}
<div class="flex items-center mt-2 mb-2 w-full"> <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 /> <LanguagesIcon />
</label> </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:value={messageInputTranslate}
bind:this={inputTranslateEle} bind:this={inputTranslateEle}
on:keydown={(e) => { on:keydown={(e) => {
@@ -491,7 +491,7 @@
{/if} {/if}
{#if openMenu} {#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() e.stopPropagation()
}}> }}>
{#if $DataBase.characters[$selectedCharID].type === 'group'} {#if $DataBase.characters[$selectedCharID].type === 'group'}
@@ -569,8 +569,8 @@
border: 0.4rem solid rgba(0,0,0,0); border: 0.4rem solid rgba(0,0,0,0);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-top: 0.4rem solid #6272a4; border-top: 0.4rem solid var(--risu-theme-borderc);
border-left: 0.4rem solid #6272a4; border-left: 0.4rem solid var(--risu-theme-borderc);
} }
.autoload{ .autoload{

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

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

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

@@ -128,14 +128,14 @@
<div class="ml-4 flex flex-wrap"> <div class="ml-4 flex flex-wrap">
{#if progress} {#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 class="loadmove mx-2"/>
<div>{language.creatingSuggestions}</div> <div>{language.creatingSuggestions}</div>
</div> </div>
{:else if !$doingChat} {:else if !$doingChat}
{#if $DataBase.translator !== ''} {#if $DataBase.translator !== ''}
<div class="flex mr-2 mb-2"> <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={() => { on:click={() => {
toggleTranslate = !toggleTranslate toggleTranslate = !toggleTranslate
}} }}
@@ -147,7 +147,7 @@
<div class="flex mr-2 mb-2"> <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={() => { on:click={() => {
alertConfirm(language.askReRollAutoSuggestions).then((result) => { alertConfirm(language.askReRollAutoSuggestions).then((result) => {
if(result) { if(result) {
@@ -163,7 +163,7 @@
</div> </div>
{#each suggestMessages??[] as suggest, i} {#each suggestMessages??[] as suggest, i}
<div class="flex mr-2 mb-2"> <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 = [] suggestMessages = []
messageInput(suggest) messageInput(suggest)
send() send()
@@ -172,7 +172,7 @@
{@html md} {@html md}
{/await} {/await}
</button> </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) messageInput(suggest)
}}> }}>
<CopyIcon/> <CopyIcon/>
@@ -191,8 +191,8 @@
border: 0.4rem solid rgba(0,0,0,0); border: 0.4rem solid rgba(0,0,0,0);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-top: 0.4rem solid white; border-top: 0.4rem solid var(--risu-theme-textcolor);
border-left: 0.4rem solid white; border-left: 0.4rem solid var(--risu-theme-textcolor);
} }
@keyframes spin { @keyframes spin {

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

@@ -61,7 +61,7 @@
{:else if $alertStore.type === 'tos'} {:else if $alertStore.type === 'tos'}
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- 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') openURL('https://sv.risuai.xyz/hub/tos')
}}>Terms of Service</a> to continue</div> }}>Terms of Service</a> to continue</div>
{:else if $alertStore.type !== 'select'} {:else if $alertStore.type !== 'select'}
@@ -161,7 +161,7 @@
</div> </div>
</div> </div>
{:else if $alertStore.type === 'toast'} {: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={() => { on:animationend={() => {
alertStore.set({ alertStore.set({
type: 'none', 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="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="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> <h2 class="mt-0 mb-0">{language.chatList}</h2>
<div class="flex-grow flex justify-end"> <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}/> <XIcon size={24}/>
</button> </button>
</div> </div>
@@ -28,20 +28,20 @@
$DataBase.characters[$selectedCharID].chatPage = i $DataBase.characters[$selectedCharID].chatPage = i
close() 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} {#if editMode}
<TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/> <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
{:else} {:else}
<span>{chat.name}</span> <span>{chat.name}</span>
{/if} {/if}
<div class="flex-grow flex justify-end"> <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() e.stopPropagation()
exportChat(i) exportChat(i)
}}> }}>
<DownloadIcon size={18}/> <DownloadIcon size={18}/>
</button> </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() e.stopPropagation()
if($DataBase.characters[$selectedCharID].chats.length === 1){ if($DataBase.characters[$selectedCharID].chats.length === 1){
alertError(language.errors.onlyOneChat) alertError(language.errors.onlyOneChat)
@@ -61,7 +61,7 @@
</button> </button>
{/each} {/each}
<div class="flex mt-2 items-center"> <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 cha = $DataBase.characters[$selectedCharID]
const len = $DataBase.characters[$selectedCharID].chats.length const len = $DataBase.characters[$selectedCharID].chats.length
let chats = $DataBase.characters[$selectedCharID].chats let chats = $DataBase.characters[$selectedCharID].chats
@@ -83,12 +83,12 @@
}}> }}>
<PlusIcon/> <PlusIcon/>
</button> </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() importChat()
}}> }}>
<FolderUpIcon size={18}/> <FolderUpIcon size={18}/>
</button> </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 editMode = !editMode
}}> }}>
<EditIcon size={18}/> <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" /> <img src="/icon/github-mark-white.svg" width="24" alt="github" />
</button> </button>
{/if} {/if}
<button class="text-white" on:click={() => { <button class="text-textcolor" on:click={() => {
openURL("https://www.patreon.com/RisuAI") openURL("https://www.patreon.com/RisuAI")
}}> }}>
<WalletIcon size={24} /> <WalletIcon size={24} />
</button> </button>
<button class="text-white" on:click={() => { <button class="text-textcolor" on:click={() => {
openURL("mailto:amasio1234@proton.me") openURL("mailto:amasio1234@proton.me")
}}> }}>
<MailIcon size={24} /> <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 w-full flex justify-center">
<div class="h-full p-2 bg-darkbg max-w-full w-2xl flex items-center flex-col "> <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}/> <TextInput placeholder="Search" bind:value={search} size="lg" autocomplete="off" marginBottom={true}/>
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
<div class="flex flex-wrap gap-2 mx-auto container"> <div class="flex flex-wrap gap-2 mx-auto container">
{#each formatChars(search) as char} {#each formatChars(search) as char}
<div class="flex items-center text-neutral-200"> <div class="flex items-center text-textcolor">
{#if char.image} {#if char.image}
<BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon> <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
{:else} {: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'} {#if char.type === 'group'}
<Users /> <Users />
{:else} {:else}

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

@@ -12,7 +12,7 @@
let provider = 0 let provider = 0
</script> </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"> <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"> <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"> <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> <span class="mb-2">API key</span>
<TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/> <TextInput bind:value={$DataBase.openAIKey} placeholder="API Key" autocomplete="off"/>
</div> </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"> <div class="flex flex-col items-start ml-2 mt-6">
<button class="hover:text-green-500 transition-colors" on:click={() => { <button class="hover:text-green-500 transition-colors" on:click={() => {
provider = 1 provider = 1

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

@@ -12,24 +12,24 @@
</script> </script>
<h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2> <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-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}/> <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}/> <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}/> <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}/> <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"/> <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}/> <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}> <SelectInput bind:value={$DataBase.requester}>
<OptionInput value="new">Reqwest</OptionInput> <OptionInput value="new">Reqwest</OptionInput>
<OptionInput value="old">Tauri</OptionInput> <OptionInput value="old">Tauri</OptionInput>

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

@@ -74,13 +74,13 @@
</button> </button>
</div> </div>
{#if advancedBotSettings} {#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}/> <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}/> <ModelList bind:value={$DataBase.subModel}/>
{:else} {: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) => { <ModelList bind:value={$DataBase.aiModel} onChange={(v) => {
$DataBase.subModel = v $DataBase.subModel = v
if(v.startsWith('gpt') || v.startsWith('palm2')){ if(v.startsWith('gpt') || v.startsWith('palm2')){
@@ -112,24 +112,24 @@
</div> </div>
{/if} {/if}
{#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'} {#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}/> <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.palmAPI}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')} {#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}/> <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
{/if} {/if}
{#if $DataBase.aiModel.startsWith('claude') || $DataBase.subModel.startsWith('claude')} {#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}/> <TextInput marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
{/if} {/if}
{#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'} {#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//..." /> <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} /> <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}> <SelectInput className="mt-2 mb-4" bind:value={$DataBase.proxyRequestModel}>
<OptionInput value="">None</OptionInput> <OptionInput value="">None</OptionInput>
<OptionInput value="gpt35">GPT 3.5</OptionInput> <OptionInput value="gpt35">GPT 3.5</OptionInput>
@@ -147,10 +147,10 @@
</SelectInput> </SelectInput>
{/if} {/if}
{#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'} {#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} /> <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()} {#await openRouterModels()}
<SelectInput className="mt-2 mb-4" value=""> <SelectInput className="mt-2 mb-4" value="">
<OptionInput value="">Loading..</OptionInput> <OptionInput value="">Loading..</OptionInput>
@@ -177,7 +177,7 @@
{/await} {/await}
{/if} {/if}
{#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')} {#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"/> <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
{/if} {/if}
@@ -188,7 +188,7 @@
{/if} {/if}
{#if $DataBase.aiModel === 'custom'} {#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}> <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
<OptionInput value="">None</OptionInput> <OptionInput value="">None</OptionInput>
{#each $customProviderStore as plugin} {#each $customProviderStore as plugin}
@@ -198,7 +198,7 @@
{/if} {/if}
{#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'} {#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}/> <TextInput marginBottom={true} bind:value={$DataBase.novelai.token}/>
{#if !($DataBase.novelai.token)} {#if !($DataBase.novelai.token)}
@@ -209,70 +209,70 @@
{/if} {/if}
{#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"} {#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} /> <TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
{/if} {/if}
{#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") } {#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} /> <TextInput marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
{/if} {/if}
{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'} {#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://..."/> <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-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://..."/> <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
{#if !isTauri} {#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> <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} {/if}
{#if advancedBotSettings} {#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> <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-textcolor2 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-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput> <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-textcolor2 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-textcolor">{language.globalNote} <Help key="globalNote"/></span>
<TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput> <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}/> <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}/> <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}/> <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'} {#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}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ooba.repetition_penalty).toFixed(2)}</span>
<span class="text-neutral-200">Length Penalty</span> <span class="text-textcolor">Length Penalty</span>
<SliderInput min={-5} max={5} step={0.05} bind:value={$DataBase.ooba.length_penalty}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ooba.length_penalty).toFixed(2)}</span>
<span class="text-neutral-200">Top K</span> <span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} bind:value={$DataBase.ooba.top_k} /> <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-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_k).toFixed(0)}</span>
<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.ooba.top_p}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ooba.top_p).toFixed(2)}</span>
<span class="text-neutral-200">Typical P</span> <span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.typical_p}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ooba.typical_p).toFixed(2)}</span>
<span class="text-neutral-200">Top A</span> <span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ooba.top_a}/> <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-textcolor2 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-textcolor">No Repeat n-gram Size</span>
<SliderInput min={0} max={20} step={1} bind:value={$DataBase.ooba.no_repeat_ngram_size}/> <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"> <div class="flex items-center mt-4">
<Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/> <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
</div> </div>
@@ -286,98 +286,98 @@
<Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/> <Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
</div> </div>
<div class="flex flex-col p-3 bg-darkbg mt-4"> <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} /> <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} /> <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} /> <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} /> <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} /> <TextAreaInput fullwidth autocomplete="off" height={"24"} bind:value={$DataBase.ooba.formating.seperator} />
</div> </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} /> <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} /> <TextInput marginBottom={true} bind:value={$DataBase.autoSuggestPrefix} />
{:else if $DataBase.aiModel.startsWith('novelai')} {: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}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topP).toFixed(2)}</span>
<span class="text-neutral-200">Top K</span> <span class="text-textcolor">Top K</span>
<SliderInput min={0} max={100} step={1} bind:value={$DataBase.NAIsettings.topK}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topK).toFixed(0)}</span>
<span class="text-neutral-200">Top A</span> <span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.topA}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.topA).toFixed(2)}</span>
<span class="text-neutral-200">Tailfree Sampling</span> <span class="text-textcolor">Tailfree Sampling</span>
<SliderInput min={0} max={1} step={0.001} bind:value={$DataBase.NAIsettings.tailFreeSampling}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(3)}</span>
<span class="text-neutral-200">Typical P</span> <span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIsettings.typicalp}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.tailFreeSampling).toFixed(2)}</span>
<span class="text-neutral-200">Repetition Penalty</span> <span class="text-textcolor">Repetition Penalty</span>
<SliderInput min={0} max={3} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenalty}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenalty).toFixed(2)}</span>
<span class="text-neutral-200">Repetition Penalty Range</span> <span class="text-textcolor">Repetition Penalty Range</span>
<SliderInput min={0} max={2048} step={1} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltyRange).toFixed(0)}</span>
<span class="text-neutral-200">Repetition Penalty Slope</span> <span class="text-textcolor">Repetition Penalty Slope</span>
<SliderInput min={0} max={10} step={0.01} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.repetitionPenaltySlope).toFixed(2)}</span>
<span class="text-neutral-200">Frequency Penalty</span> <span class="text-textcolor">Frequency Penalty</span>
<SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.frequencyPenalty}/> <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-textcolor2 mb-6 text-sm">{($DataBase.NAIsettings.frequencyPenalty).toFixed(2)}</span>
<span class="text-neutral-200">Presence Penalty</span> <span class="text-textcolor">Presence Penalty</span>
<SliderInput min={-2} max={2} step={0.01} bind:value={$DataBase.NAIsettings.presencePenalty}/> <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')} {: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}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_p).toFixed(2)}</span>
<span class="text-neutral-200">Reputation Penalty</span> <span class="text-textcolor">Reputation Penalty</span>
<SliderInput min={0} max={2} step={0.01} bind:value={$DataBase.ainconfig.rep_pen}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen).toFixed(2)}</span>
<span class="text-neutral-200">Reputation Penalty Range</span> <span class="text-textcolor">Reputation Penalty Range</span>
<SliderInput min={0} max={2048} step={1} bind:value={$DataBase.ainconfig.rep_pen_range}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_range).toFixed(2)}</span>
<span class="text-neutral-200">Reputation Penalty Slope</span> <span class="text-textcolor">Reputation Penalty Slope</span>
<SliderInput min={0} max={10} step={0.1} bind:value={$DataBase.ainconfig.rep_pen_slope}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.rep_pen_slope).toFixed(2)}</span>
<span class="text-neutral-200">Top K</span> <span class="text-textcolor">Top K</span>
<SliderInput min={1} max={500} step={1} bind:value={$DataBase.ainconfig.top_k}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_k).toFixed(2)}</span>
<span class="text-neutral-200">Top A</span> <span class="text-textcolor">Top A</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.top_a}/> <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-textcolor2 mb-6 text-sm">{($DataBase.ainconfig.top_a).toFixed(2)}</span>
<span class="text-neutral-200">Typical P</span> <span class="text-textcolor">Typical P</span>
<SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.ainconfig.typical_p}/> <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} {: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} /> <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-textcolor2 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
<span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span> <span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
<SliderInput min={0} max={100} bind:value={$DataBase.PresensePenalty} /> <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} /> <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} {/if}
{#if advancedBotSettings} {#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} /> <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"> <table class="contain w-full max-w-full tabler mt-2">
<tr> <tr>
<th class="font-medium w-1/2">Bias</th> <th class="font-medium w-1/2">Bias</th>
@@ -392,7 +392,7 @@
</tr> </tr>
{#if $DataBase.bias.length === 0} {#if $DataBase.bias.length === 0}
<tr> <tr>
<div class="text-gray-500">{language.noBias}</div> <div class="text-textcolor2">{language.noBias}</div>
</tr> </tr>
{/if} {/if}
{#each $DataBase.bias as bias, i} {#each $DataBase.bias as bias, i}

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

@@ -1,18 +1,23 @@
<script lang="ts"> <script lang="ts">
import { language } from "src/lang"; 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 { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
import Check from "src/lib/UI/GUI/CheckInput.svelte"; import Check from "src/lib/UI/GUI/CheckInput.svelte";
import Help from "src/lib/Others/Help.svelte"; import Help from "src/lib/Others/Help.svelte";
import SliderInput from "src/lib/UI/GUI/SliderInput.svelte"; import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
import SelectInput from "src/lib/UI/GUI/SelectInput.svelte"; import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
import OptionInput from "src/lib/UI/GUI/OptionInput.svelte"; import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
import { updateAnimationSpeed } from "src/ts/gui/animation"; 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> </script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2> <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}> <SelectInput className="mt-2" bind:value={$DataBase.theme}>
<OptionInput value="" >Standard Risu</OptionInput> <OptionInput value="" >Standard Risu</OptionInput>
<OptionInput value="waifu" >Waifulike</OptionInput> <OptionInput value="waifu" >Waifulike</OptionInput>
@@ -21,16 +26,23 @@
{#if $DataBase.theme === "waifu"} {#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} /> <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} /> <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} {/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}> <SelectInput className="mt-2" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
<OptionInput value="standard" >{language.classicRisu}</OptionInput> <OptionInput value="standard" >{language.classicRisu}</OptionInput>
<OptionInput value="highcontrast" >{language.highcontrast}</OptionInput> <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
@@ -56,25 +68,25 @@
</div> </div>
{/if} {/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} /> <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} /> <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} /> <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 === -1) ? "Unlimited" :
($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span> ($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} /> <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"> <div class="flex items-center mt-2">
<Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/> <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>

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

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

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

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

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

@@ -12,9 +12,9 @@
</script> </script>
<h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2> <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}> <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
<OptionInput value="" >None</OptionInput> <OptionInput value="" >None</OptionInput>
<OptionInput value="webui" >Stable Diffusion WebUI</OptionInput> <OptionInput value="webui" >Stable Diffusion WebUI</OptionInput>
@@ -28,44 +28,44 @@
{#if !isTauri} {#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> <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}
<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}/> <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}/> <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}/> <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}/> <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}/> <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}/> <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.sampler_name}/>
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
<Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/> <Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
</div> </div>
{#if $DataBase.sdConfig.enable_hr === true} {#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}/> <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}/> <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}/> <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.hr_upscaler}/>
{/if} {/if}
{/if} {/if}
<span class="text-neutral-200 mt-4 text-lg font-bold">TTS</span> <span class="text-textcolor mt-4 text-lg font-bold">TTS</span>
<span class="text-neutral-200 mt-2">ElevenLabs API key</span> <span class="text-textcolor mt-2">ElevenLabs API key</span>
<TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/> <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}/> <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-textcolor 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">{language.SuperMemory} {language.model}</span>
<SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}> <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
<OptionInput value="none" >None</OptionInput> <OptionInput value="none" >None</OptionInput>
<OptionInput value="davinci" >OpenAI Davinci</OptionInput> <OptionInput value="davinci" >OpenAI Davinci</OptionInput>
@@ -73,11 +73,11 @@
<OptionInput value="subModel" >{language.submodel} ({language.unrecommended})</OptionInput> <OptionInput value="subModel" >{language.submodel} ({language.unrecommended})</OptionInput>
</SelectInput> </SelectInput>
{#if $DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie'} {#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}/> <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
{/if} {/if}
{#if $DataBase.supaMemoryType !== 'none'} {#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"/> <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="recommended to leave it blank to use default"/>
{/if} {/if}
{#if ($DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie') && $DataBase.useExperimental} {#if ($DataBase.supaMemoryType === 'davinci' || $DataBase.supaMemoryType === 'curie') && $DataBase.useExperimental}

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

@@ -17,12 +17,12 @@
changeUserPersona(i) changeUserPersona(i)
}}> }}>
{#if persona.icon === ''} {#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} {:else}
{#await getCharImage(persona.icon, 'css')} {#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} {: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} {/await}
{/if} {/if}
</button> </button>
@@ -61,20 +61,20 @@
<div class="flex flex-col mt-4"> <div class="flex flex-col mt-4">
<button on:click={() => {selectUserImg()}}> <button on:click={() => {selectUserImg()}}>
{#if $DataBase.userIcon === ''} {#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} {:else}
{#await getCharImage($DataBase.userIcon, 'css')} {#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} {: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} {/await}
{/if} {/if}
</button> </button>
</div> </div>
<div class="flex flex-grow flex-col p-2 ml-4"> <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} /> <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.]`} /> <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> <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 () => { <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="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
<div class="flex"> <div class="flex">
<span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span> <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)) const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
if(v){ if(v){
if($DataBase.currentPluginProvider === plugin.name){ if($DataBase.currentPluginProvider === plugin.name){
@@ -61,10 +61,10 @@
{/if} {/if}
{/each} {/each}
</div> </div>
<div class="text-gray-500 mt-2 flex"> <div class="text-textcolor2 mt-2 flex">
<button on:click={() => { <button on:click={() => {
importPlugin() importPlugin()
}} class="hover:text-neutral-200 cursor-pointer"> }} class="hover:text-textcolor cursor-pointer">
<PlusIcon /> <PlusIcon />
</button> </button>
</div> </div>

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

@@ -82,7 +82,7 @@
{/if}</h1> {/if}</h1>
</div> </div>
{#if $DataBase.account} {#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} {#if !isTauri}
<div class="flex items-center mt-2"> <div class="flex items-center mt-2">
{#if $DataBase.account.useSync || forageStorage.isAccount} {#if $DataBase.account.useSync || forageStorage.isAccount}

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

@@ -30,87 +30,87 @@
{#if window.innerWidth >= 700 || selected === -1} {#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" <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}> 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 selected = 1
}}> }}>
<BotIcon /> <BotIcon />
<span>{language.chatBot}</span> <span>{language.chatBot}</span>
</button> </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 selected = 12
}}> }}>
<ContactIcon /> <ContactIcon />
<span>{language.persona}</span> <span>{language.persona}</span>
</button> </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 selected = 2
}}> }}>
<Sailboat /> <Sailboat />
<span>{language.otherBots}</span> <span>{language.otherBots}</span>
</button> </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 selected = 3
}}> }}>
<MonitorIcon /> <MonitorIcon />
<span>{language.display}</span> <span>{language.display}</span>
</button> </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 selected = 10
}}> }}>
<LanguagesIcon /> <LanguagesIcon />
<span>{language.language}</span> <span>{language.language}</span>
</button> </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 selected = 11
}}> }}>
<AccessibilityIcon /> <AccessibilityIcon />
<span>{language.accessibility}</span> <span>{language.accessibility}</span>
</button> </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 selected = 8
}}> }}>
<BookIcon /> <BookIcon />
<span>{language.globalLoreBook}</span> <span>{language.globalLoreBook}</span>
</button> </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 selected = 9
}}> }}>
<AlignLeft /> <AlignLeft />
<span>{language.globalRegexScript}</span> <span>{language.globalRegexScript}</span>
</button> </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 selected = 4
}}> }}>
<CodeIcon /> <CodeIcon />
<span>{language.plugin}</span> <span>{language.plugin}</span>
</button> </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 selected = 0
}}> }}>
<UserIcon /> <UserIcon />
<span>{language.account} & {language.files}</span> <span>{language.account} & {language.files}</span>
</button> </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 selected = 6
}}> }}>
<ActivityIcon /> <ActivityIcon />
<span>{language.advancedSettings}</span> <span>{language.advancedSettings}</span>
</button> </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 selected = 7
}}> }}>
<BoxIcon /> <BoxIcon />
<span>{language.community}</span> <span>{language.community}</span>
</button> </button>
{#if window.innerWidth < 700} {#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) settingsOpen.set(false)
}}> <XCircleIcon /> </button> }}> <XCircleIcon /> </button>
{/if} {/if}
</div> </div>
{/if} {/if}
{#if window.innerWidth >= 700 || selected !== -1} {#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} {#if selected === 0}
<UserSettings /> <UserSettings />
{:else if selected === 1} {:else if selected === 1}
@@ -139,7 +139,7 @@
<PersonaSettings/> <PersonaSettings/>
{/if} {/if}
</div> </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){ if(window.innerWidth >= 700){
settingsOpen.set(false) settingsOpen.set(false)
} }
@@ -160,7 +160,7 @@
{/if} {/if}
<style> <style>
.setting-bg{ .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> </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="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="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> <h2 class="mt-0 mb-0">{language.presets}</h2>
<div class="flex-grow flex justify-end"> <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}/> <XIcon size={24}/>
</button> </button>
</div> </div>
@@ -27,30 +27,30 @@
changeToPreset(i) changeToPreset(i)
close() 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} {#if editMode}
<TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/> <TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/>
{:else} {:else}
{#if i < 9} {#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} {/if}
<span>{presets.name}</span> <span>{presets.name}</span>
{/if} {/if}
<div class="flex-grow flex justify-end"> <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() e.stopPropagation()
copyPreset(i) copyPreset(i)
}}> }}>
<CopyIcon size={18}/> <CopyIcon size={18}/>
</button> </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() e.stopPropagation()
downloadPreset(i) downloadPreset(i)
}}> }}>
<DownloadIcon size={18} /> <DownloadIcon size={18} />
</button> </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() e.stopPropagation()
if($DataBase.botPresets.length === 1){ if($DataBase.botPresets.length === 1){
alertError(language.errors.onlyOneChat) alertError(language.errors.onlyOneChat)
@@ -72,7 +72,7 @@
</button> </button>
{/each} {/each}
<div class="flex mt-2 items-center"> <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 botPresets = $DataBase.botPresets
let newPreset = cloneDeep(presetTemplate) let newPreset = cloneDeep(presetTemplate)
newPreset.name = `New Preset` newPreset.name = `New Preset`
@@ -82,18 +82,18 @@
}}> }}>
<PlusIcon/> <PlusIcon/>
</button> </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() importPreset()
}}> }}>
<FolderUpIcon size={18}/> <FolderUpIcon size={18}/>
</button> </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 editMode = !editMode
}}> }}>
<EditIcon size={18}/> <EditIcon size={18}/>
</button> </button>
</div> </div>
<span class="text-gray-400 text-sm">{language.quickPreset}</span> <span class="text-textcolor2 text-sm">{language.quickPreset}</span>
</div> </div>
</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="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="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> <h2 class="mt-0 mb-0">{language.loreBook}</h2>
<div class="flex-grow flex justify-end"> <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}/> <XIcon size={24}/>
</button> </button>
</div> </div>
@@ -23,14 +23,14 @@
if(!editMode){ if(!editMode){
$DataBase.loreBookPage = ind $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} {#if editMode}
<TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/> <TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
{:else} {:else}
<span>{lore.name}</span> <span>{lore.name}</span>
{/if} {/if}
<div class="flex-grow flex justify-end"> <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() e.stopPropagation()
if($DataBase.loreBook.length === 1){ if($DataBase.loreBook.length === 1){
return return
@@ -49,7 +49,7 @@
</button> </button>
{/each} {/each}
<div class="flex mt-2 items-center"> <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 loreBooks = $DataBase.loreBook
let newLoreBook = { let newLoreBook = {
name: `New LoreBook`, name: `New LoreBook`,
@@ -61,7 +61,7 @@
}}> }}>
<PlusIcon/> <PlusIcon/>
</button> </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 editMode = !editMode
}}> }}>
<EditIcon size={18}/> <EditIcon size={18}/>

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

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

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

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

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

@@ -75,7 +75,7 @@
{#key sorted} {#key sorted}
{#if globalMode} {#if globalMode}
{#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0} {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
<span class="text-gray-500">No Lorebook</span> <span class="text-textcolor2">No Lorebook</span>
{:else} {:else}
{#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i} {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
<LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => { <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => {
@@ -87,7 +87,7 @@
{/if} {/if}
{:else if submenu === 0} {:else if submenu === 0}
{#if $DataBase.characters[$selectedCharID].globalLore.length === 0} {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
<span class="text-gray-500">No Lorebook</span> <span class="text-textcolor2">No Lorebook</span>
{:else} {:else}
{#each $DataBase.characters[$selectedCharID].globalLore as book, i} {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
<LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => { <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
@@ -99,7 +99,7 @@
{/if} {/if}
{:else if submenu === 1} {:else if submenu === 1}
{#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0} {#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} {:else}
{#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i} {#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={() => { <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}
{#if submenu !== 2} {#if submenu !== 2}
{#if !globalMode} {#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} {/if}
<LoreBookList bind:globalMode bind:submenu /> <LoreBookList bind:globalMode bind:submenu />
{:else} {:else}
@@ -51,9 +51,9 @@
<div class="flex items-center mt-4"> <div class="flex items-center mt-4">
<Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/> <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/>
</div> </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} /> <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} /> <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
{:else} {:else}
<div class="flex items-center mt-4"> <div class="flex items-center mt-4">
@@ -71,18 +71,18 @@
{/if} {/if}
{#if submenu !== 2} {#if submenu !== 2}
<div class="text-gray-500 mt-2 flex"> <div class="text-textcolor2 mt-2 flex">
<button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-neutral-200 cursor-pointer"> <button on:click={() => {addLorebook(globalMode ? -1 : submenu)}} class="hover:text-textcolor cursor-pointer">
<PlusIcon /> <PlusIcon />
</button> </button>
<button on:click={() => { <button on:click={() => {
exportLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local') 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 /> <DownloadIcon />
</button> </button>
<button on:click={() => { <button on:click={() => {
importLoreBook(globalMode ? 'sglobal' : submenu === 0 ? 'global' : 'local') 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 /> <FolderUpIcon />
</button> </button>
</div> </div>

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

@@ -44,21 +44,21 @@
</div> </div>
{#if open} {#if open}
<div class="seperator p-2"> <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} /> <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}> <SelectInput bind:value={value.type}>
<OptionInput value="editinput">{language.editInput}</OptionInput> <OptionInput value="editinput">{language.editInput}</OptionInput>
<OptionInput value="editoutput">{language.editOutput}</OptionInput> <OptionInput value="editoutput">{language.editOutput}</OptionInput>
<OptionInput value="editprocess">{language.editProcess}</OptionInput> <OptionInput value="editprocess">{language.editProcess}</OptionInput>
<OptionInput value="editdisplay">{language.editDisplay}</OptionInput> <OptionInput value="editdisplay">{language.editDisplay}</OptionInput>
</SelectInput> </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} /> <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} /> <TextInput size="sm" bind:value={value.out} />
{#if value.ableFlag} {#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} /> <TextInput size="sm" bind:value={value.flag} />
{/if} {/if}
<div class="flex items-center mt-4"> <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}> <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} {#if value.length === 0}
<div class="text-gray-500">No Scripts</div> <div class="text-textcolor2">No Scripts</div>
{/if} {/if}
{#key sorted} {#key sorted}
{#each value as customscript, i} {#each value as customscript, i}

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

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

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

@@ -40,25 +40,25 @@
if(!editMode){ if(!editMode){
chara.chatPage = i 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} {#if editMode}
<TextInput bind:value={chara.chats[i].name} additionalClass="flex-grow min-w-0" padding={false}/> <TextInput bind:value={chara.chats[i].name} additionalClass="flex-grow min-w-0" padding={false}/>
{:else} {:else}
<span>{chat.name}</span> <span>{chat.name}</span>
{/if} {/if}
<div class="flex-grow flex justify-end"> <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 editMode = !editMode
}}> }}>
<EditIcon size={18}/> <EditIcon size={18}/>
</button> </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() e.stopPropagation()
exportChat(i) exportChat(i)
}}> }}>
<DownloadIcon size={18}/> <DownloadIcon size={18}/>
</button> </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() e.stopPropagation()
if(chara.chats.length === 1){ if(chara.chats.length === 1){
alertError(language.errors.onlyOneChat) alertError(language.errors.onlyOneChat)

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

@@ -328,7 +328,7 @@
</script> </script>
<div <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:editMode
class:risu-sub-sidebar={$sideBarClosing} class:risu-sub-sidebar={$sideBarClosing}
class:risu-sub-sidebar-close={$sideBarClosing} class:risu-sub-sidebar-close={$sideBarClosing}
@@ -336,12 +336,12 @@
class:flex={!hidden} class:flex={!hidden}
> >
<button <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={() => { on:click={() => {
menuMode = 1 - menuMode; menuMode = 1 - menuMode;
}}><ListIcon /> }}><ListIcon />
</button> </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} {#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"> <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 <BarIcon
@@ -585,7 +585,7 @@
</div> </div>
</div> </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={!$sideBarClosing}
class:risu-sidebar-close={$sideBarClosing} class:risu-sidebar-close={$sideBarClosing}
class:minw96={!$DynamicGUI} class:minw96={!$DynamicGUI}
@@ -602,7 +602,7 @@
}} }}
> >
<button <button
class="flex w-full justify-end text-gray-200" class="flex w-full justify-end text-textcolor"
on:click={async () => { on:click={async () => {
if($sideBarClosing){ if($sideBarClosing){
return return
@@ -610,18 +610,18 @@
$sideBarClosing = true; $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> </button>
{#if sideBarMode === 0} {#if sideBarMode === 0}
{#if $selectedCharID < 0 || $settingsOpen} {#if $selectedCharID < 0 || $settingsOpen}
<div> <div>
<h1 class="text-xl">Welcome to RisuAI!</h1> <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> </div>
{:else} {: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"> <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(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-gray-500={!$botMakerMode}>{language.character}</button> <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
</div> </div>
{#if $botMakerMode} {#if $botMakerMode}
<CharConfig /> <CharConfig />

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

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

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

@@ -1,6 +1,6 @@
<button <button
on:click 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-4 = {size == "md"}
class:px-2 = {size == "sm"} class:px-2 = {size == "sm"}
class:px-6 = {size == "lg"} class:px-6 = {size == "lg"}

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

@@ -9,7 +9,7 @@
</script> </script>
<label <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} class:mr-2={margin}
aria-describedby="{name} {check ? 'abled' : 'disabled'}" aria-describedby="{name} {check ? 'abled' : 'disabled'}"
> >
@@ -23,7 +23,7 @@
}} }}
/> />
<span <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" aria-hidden="true"
> >
{#if check} {#if check}

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

@@ -1,5 +1,5 @@
<input <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-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}

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

@@ -1,5 +1,5 @@
<select <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-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}

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

@@ -5,14 +5,14 @@
</script> </script>
{#if $sideBarStore && !$DynamicGUI} {#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 /> <ArrowLeft />
</button> </button>
{:else} {:else}
<button on:click={() => { <button on:click={() => {
sideBarClosing.set(false); sideBarClosing.set(false);
sideBarStore.set(true)} 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 /> <ArrowRight />
</button> </button>
{/if} {/if}

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

@@ -1,5 +1,5 @@
<input <input
class="text-neutral-200 bg-transparent input-text" class="text-textcolor bg-transparent input-text"
class:mb-4={marginBottom} class:mb-4={marginBottom}
type="range" type="range"
min={min} 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="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 <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} on:click={changeValue}
> >
<div <div

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

@@ -1,6 +1,6 @@
{#if optimaizedInput} {#if optimaizedInput}
<textarea <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-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}
@@ -36,7 +36,7 @@
/> />
{:else} {:else}
<textarea <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-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}

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

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

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

@@ -1,5 +1,5 @@
<input <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-sm={size === 'sm'}
class:text-md={size === 'md'} class:text-md={size === 'md'}
class:text-lg={size === 'lg'} class:text-lg={size === 'lg'}

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

@@ -12,26 +12,26 @@
</script> </script>
<div class="h-full w-full flex flex-col overflow-y-auto items-center"> <div class="h-full w-full flex flex-col overflow-y-auto items-center">
{#if !openHub} {#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)} {#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} {:else}
<h3 class="text-gray-500 mt-1">Version {appVer}</h3> <h3 class="text-textcolor2 mt-1">Version {appVer}</h3>
{/if} {/if}
<GithubStars /> <GithubStars />
{/if} {/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} {#if !openHub}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <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={() => { <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") openURL("https://github.com/kwaroran/RisuAI/wiki")
}}> }}>
<h1 class="text-2xl font-bold text-start">{language.officialWiki}</h1> <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>
<button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}> <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> <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> </button>
</div> </div>
<div class="mt-4 mb-4 w-full border-t border-t-selected"></div> <div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
@@ -52,15 +52,15 @@
{/each} {/each}
</div> </div>
{:else} {:else}
<div class="text-gray-500">Failed to load {language.hub}...</div> <div class="text-textcolor2">Failed to load {language.hub}...</div>
{/if} {/if}
{/await} {/await}
{:else} {:else}
<div class="text-gray-500">{language.hideRealm}</div> <div class="text-textcolor2">{language.hideRealm}</div>
{/if} {/if}
{:else} {:else}
<div class="flex items-center mt-4"> <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/> <ArrowLeft/>
</button> </button>
</div> </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> <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} <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={() => { class:text-green-500={openAdv} on:click={() => {
openAdv = !openAdv 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"> <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}> <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"> <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-textcolor 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-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"> <div class="flex flex-wrap">
{#each chara.tags as tag, i} {#each chara.tags as tag, i}
{#if i < 4} {#if i < 4}
@@ -26,13 +26,13 @@
<div class="flex-grow"></div> <div class="flex-grow"></div>
<div class="flex flex-wrap w-full flex-row-reverse gap-1"> <div class="flex flex-wrap w-full flex-row-reverse gap-1">
{#if chara.hasEmotion} {#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}
{#if chara.hasAsset} {#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}
{#if chara.hasLore} {#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} {/if}
</div> </div>
</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/`) 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" /> <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]} Licensed with {CCLicenseData[license][2]}
</span> </span>

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

@@ -120,7 +120,7 @@
<span> <span>
Menu Menu
</span> </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 /> <XIcon />
</button> </button>
</h1> </h1>

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

@@ -14,7 +14,7 @@
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- 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 openedData = null
}}> }}>
<div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto"> <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} {/if}
<div class="flex justify-start gap-4 mt-4"> <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}> <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)} {@html parseMarkdownSafe(openedData.desc)}
</span> </span>
</div> </div>
@@ -37,24 +37,24 @@
{/each} {/each}
</div> </div>
<div class="flex flex-wrap w-full flex-row gap-1 mt-2"> <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())} {language.popularityLevel.replace('{}', openedData.download.toString())}
</span> </span>
<div class="border-l-selected border-l ml-1 mr-1"></div> <div class="border-l-selected border-l ml-1 mr-1"></div>
{#if openedData.hasEmotion} {#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}
{#if openedData.hasAsset} {#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}
{#if openedData.hasLore} {#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} {/if}
</div> </div>
</div> </div>
<div class="flex flex-row-reverse gap-2"> <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?') const conf = await alertConfirm('Report this character?')
if(conf){ if(conf){
const report = await alertInput('Write a report text that would be sent to the admin') const report = await alertInput('Write a report text that would be sent to the admin')
@@ -71,7 +71,7 @@
<FlagIcon /> <FlagIcon />
</button> </button>
{#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator} {#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?') const conf = await alertConfirm('Do you want to remove this character from Realm?')
if(conf){ if(conf){
const da = await fetch(hubURL + '/hub/remove', { const da = await fetch(hubURL + '/hub/remove', {
@@ -87,7 +87,7 @@
<TrashIcon /> <TrashIcon />
</button> </button>
{/if} {/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}`) await navigator.clipboard.writeText(`https://risuai.xyz/?realm=${openedData.id}`)
alertNormal("Copied to clipboard") alertNormal("Copied to clipboard")
}}> }}>

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

@@ -4,35 +4,35 @@
{#if !$DataBase.account} {#if !$DataBase.account}
<span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span> <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 () => { <button on:click={async () => {
close() 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} {:else}
<h1 class="font-bold text-2xl w-full"> <h1 class="font-bold text-2xl w-full">
<span> <span>
Share {char.name} to {language.hub} Share {char.name} to {language.hub}
</span> </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 /> <XIcon />
</button> </button>
</h1> </h1>
<div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div> <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-textcolor">{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-textcolor2 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-textcolor2 text-sm">More than 20 characters.</span>
<TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} /> <TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
<span class="text-neutral-200">{language.tags}</span> <span class="text-textcolor">{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-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
<TextInput placeholder="" bind:value={tags} on:input={() => { <TextInput placeholder="" bind:value={tags} on:input={() => {
tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase() tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
}} /> }} />
{#if char.license !== 'CC BY-NC-SA 4.0' && char.license !== 'CC BY-SA 4.0'} {#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-textcolor 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-textcolor2 text-sm">You can choose license for the downloaders to limit the usages of your card's prompt.</span>
<SelectInput bind:value={license}> <SelectInput bind:value={license}>
<OptionInput value="">None</OptionInput> <OptionInput value="">None</OptionInput>
{#each Object.keys(CCLicenseData) as ccl} {#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> <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
</div> </div>
{#if nsfwMode} {#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} {/if}
<Button on:click={async () => { <Button on:click={async () => {
if(char.creatorNotes.length < 20){ if(char.creatorNotes.length < 20){

20
src/styles.css
View File

@@ -6,17 +6,27 @@ body{
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-top: 0px; margin-top: 0px;
background-color: #282a36; background-color: var(--risu-theme-bgcolor);
overflow-y: hidden; overflow-y: hidden;
overflow-x: hidden; overflow-x: hidden;
} }
:root{ :root{
--FontColorStandard: #fafafa; --FontColorStandard: #fafafa;
--FontColorBold : #fafafa; --FontColorBold : ##e5e5e5;
--FontColorItalic : #8C8D93; --FontColorItalic : #8C8D93;
--FontColorItalicBold : #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{ html, body{
@@ -28,7 +38,7 @@ html, body{
} }
.chattext2 pre{ .chattext2 pre{
background-color: #282a36; background-color: var(--risu-theme-bgcolor);
padding: 0.5rem; padding: 0.5rem;
overflow-x: auto; overflow-x: auto;
} }
@@ -126,7 +136,7 @@ html, body{
.input-text{ .input-text{
border: none; border: none;
outline: 0; outline: 0;
border-bottom: 1px solid #6272a4; border-bottom: 1px solid var(--risu-theme-borderc);
} }
.bgc{ .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 { alertNormal } from '../alert';
import type { NAISettings } from '../process/models/nai'; import type { NAISettings } from '../process/models/nai';
import { prebuiltNAIpresets } from '../process/templates/templates'; import { prebuiltNAIpresets } from '../process/templates/templates';
import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
export const DataBase = writable({} as any as Database) export const DataBase = writable({} as any as Database)
export const loadedStore = writable(false) export const loadedStore = writable(false)
@@ -294,6 +295,8 @@ export function setDatabase(data:Database){
data.NAIsettings ??= cloneDeep(prebuiltNAIpresets) data.NAIsettings ??= cloneDeep(prebuiltNAIpresets)
data.assetWidth ??= -1 data.assetWidth ??= -1
data.animationSpeed ??= 0.4 data.animationSpeed ??= 0.4
data.colorScheme ??= cloneDeep(defaultColorScheme)
data.colorSchemeName ??= 'default'
changeLanguage(data.language) changeLanguage(data.language)
DataBase.set(data) DataBase.set(data)
@@ -604,6 +607,8 @@ export interface Database{
botSettingAtStart:false botSettingAtStart:false
NAIsettings:NAISettings NAIsettings:NAISettings
hideRealm:boolean hideRealm:boolean
colorScheme:ColorScheme
colorSchemeName:string
} }
interface hordeConfig{ interface hordeConfig{
@@ -789,37 +794,6 @@ export const defaultSdDataFunc = () =>{
return cloneDeep(defaultSdData) 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(){ export function saveCurrentPreset(){
let db = get(DataBase) let db = get(DataBase)
let pres = db.botPresets 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 { appDataDir, join } from "@tauri-apps/api/path";
import { get } from "svelte/store"; import { get } from "svelte/store";
import {open} from '@tauri-apps/api/shell' 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 { appWindow } from "@tauri-apps/api/window";
import { checkOldDomain, checkUpdate } from "../update"; import { checkOldDomain, checkUpdate } from "../update";
import { botMakerMode, selectedCharID } from "../stores"; import { botMakerMode, selectedCharID } from "../stores";
@@ -21,6 +21,7 @@ import { loadRisuAccountData } from "../drive/accounter";
import { decodeRisuSave, encodeRisuSave } from "./risuSave"; import { decodeRisuSave, encodeRisuSave } from "./risuSave";
import { AutoStorage } from "./autoStorage"; import { AutoStorage } from "./autoStorage";
import { updateAnimationSpeed } from "../gui/animation"; import { updateAnimationSpeed } from "../gui/animation";
import { updateColorScheme, updateTextTheme } from "../gui/colorscheme";
//@ts-ignore //@ts-ignore
export const isTauri = !!window.__TAURI__ export const isTauri = !!window.__TAURI__
@@ -425,6 +426,7 @@ export async function loadData() {
} }
await checkNewFormat() await checkNewFormat()
const db = get(DataBase); const db = get(DataBase);
updateColorScheme()
updateTextTheme() updateTextTheme()
updateAnimationSpeed() updateAnimationSpeed()
if(db.botSettingAtStart){ if(db.botSettingAtStart){
@@ -441,14 +443,20 @@ export async function loadData() {
const knownHostes = ["localhost","127.0.0.1"] 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({ fetchLog.unshift({
body: JSON.stringify(body, null, 2), body: JSON.stringify(arg.body, null, 2),
header: JSON.stringify(headers ?? {}, null, 2), header: JSON.stringify(arg.headers ?? {}, null, 2),
response: JSON.stringify(response, null, 2), response: JSON.stringify(arg.response, null, 2),
success: success, success: arg.success,
date: (new Date()).toLocaleTimeString(), date: (new Date()).toLocaleTimeString(),
url: url url: arg.url
}) })
} }

14
tailwind.config.js
View File

@@ -7,11 +7,15 @@ export default {
theme: { theme: {
extend: { extend: {
colors:{ colors:{
bgcolor: "#282a36", bgcolor: "var(--risu-theme-bgcolor)",
darkbg: "#21222C", darkbg: "var(--risu-theme-darkbg)",
borderc: "#6272a4", borderc: "var(--risu-theme-borderc)",
selected: "#44475a", selected: "var(--risu-theme-selected)",
draculared: "#ff5555" 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: { minWidth: {
'2': '0.5rem', '2': '0.5rem',