[feat] new global settings

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import Check from "src/lib/Others/Check.svelte";
+    import { language } from "src/lang";
+    import Help from "src/lib/Others/Help.svelte";
+    import { DataBase } from "src/ts/database";
+    import { alertMd } from "src/ts/alert";
+    import { getRequestLog, isTauri } from "src/ts/globalApi";
+
+</script>
+<h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
+<span class="text-draculared text-xs mb-2">{language.advancedSettingsWarn}</span>
+<span class="text-neutral-200 mt-4 mb-2">{language.loreBookDepth}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.loreBookDepth}>
+<span class="text-neutral-200">{language.loreBookToken}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="4096" bind:value={$DataBase.loreBookToken}>
+
+<span class="text-neutral-200">{language.additionalPrompt}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.additionalPrompt}>
+
+<span class="text-neutral-200">{language.descriptionPrefix}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.descriptionPrefix}>
+
+<span class="text-neutral-200">{language.emotionPrompt}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default">
+
+<span class="text-neutral-200">{language.SuperMemory} Prompt <Help key="experimental"/></span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.supaMemoryPrompt} placeholder="Leave it blank to use default">
+
+<span class="text-neutral-200">{language.requestretrys}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.requestRetrys}>
+
+<span class="text-neutral-200">Request Method</span>
+<select class="bg-transparent input-text text-gray-200 appearance-none text-sm mb-4" bind:value={$DataBase.requestmet}>
+    <option value="normal" class="bg-darkbg appearance-none">Normal</option>
+    <option value="proxy" class="bg-darkbg appearance-none">Proxy</option>
+    <option value="plain" class="bg-darkbg appearance-none">Plain Fetch</option>
+</select>
+
+{#if $DataBase.requestmet === 'proxy'}
+    <span class="text-neutral-200">Request Proxy URL</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.requestproxy}>
+{/if}
+{#if isTauri && $DataBase.requestmet === 'normal'}
+    <span class="text-neutral-200">Request Lib</span>
+    <select class="bg-transparent input-text text-gray-200 appearance-none text-sm" bind:value={$DataBase.requester}>
+        <option value="new" class="bg-darkbg appearance-none">Reqwest</option>
+        <option value="old" class="bg-darkbg appearance-none">Tauri</option>
+    </select>
+{/if}
+
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.useSayNothing}/>
+    <span>{language.sayNothing}</span>
+</div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.showUnrecommended}/>
+    <span>{language.showUnrecommended}</span>
+</div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.useExperimental}/>
+    <span>{language.useExperimental}</span>
+</div>
+<button
+    on:click={async () => {
+        alertMd(getRequestLog())
+    }}
+    class="drop-shadow-lg p-3 border-borderc border-solid mt-6 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    {language.ShowLog}
+</button>

src/lib/Setting/Pages/BotSettings.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+    import Check from "src/lib/Others/Check.svelte";
+    import { language } from "src/lang";
+    import Help from "src/lib/Others/Help.svelte";
+    import { DataBase } from "src/ts/database";
+    import { customProviderStore, getCurrentPluginMax } from "src/ts/process/plugins";
+    import { isTauri } from "src/ts/globalApi";
+    import { tokenize } from "src/ts/tokenizer";
+    import DropList from "src/lib/SideBars/DropList.svelte";
+    import { PlusIcon, TrashIcon } from "lucide-svelte";
+    let tokens = {
+        mainPrompt: 0,
+        jailbreak: 0,
+        globalNote: 0
+    }
+
+    let lasttokens = {
+        mainPrompt: '',
+        jailbreak: '',
+        globalNote: ''
+    }
+    export let openPresetList =false
+
+    async function loadTokenize(){
+        if(lasttokens.mainPrompt !== $DataBase.mainPrompt){
+            lasttokens.mainPrompt = $DataBase.mainPrompt
+            tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
+        }
+        tokens.mainPrompt = await tokenize($DataBase.mainPrompt)
+        tokens.jailbreak = await tokenize($DataBase.jailbreak)
+        tokens.globalNote = await tokenize($DataBase.globalNote)
+    }
+    
+    $: loadTokenize()
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.chatBot}</h2>
+<span class="text-neutral-200 mt-4">{language.model} <Help key="model"/></span>
+<select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.aiModel}>
+    <option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
+    <option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
+    <option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
+    <option value="palm2" class="bg-darkbg appearance-none">Google Palm2</option>
+    {#if $DataBase.plugins.length > 0}
+        <option value="custom" class="bg-darkbg appearance-none">Plugin</option>
+    {/if}
+</select>
+
+<span class="text-neutral-200 mt-2">{language.submodel} <Help key="submodel"/></span>
+<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.subModel}>
+    <option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
+    <option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
+    <option value="palm2" class="bg-darkbg appearance-none">Google Palm2</option>
+    <option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
+    {#if $customProviderStore.length > 0}
+        <option value="custom" class="bg-darkbg appearance-none">Plugin</option>
+    {/if}
+</select>
+
+{#if $DataBase.aiModel === 'palm2' || $DataBase.subModel === 'palm2'}
+    <span class="text-neutral-200">Palm2 {language.apiKey}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="..." bind:value={$DataBase.palmAPI}>
+{/if}
+{#if $DataBase.aiModel === 'gpt35' || $DataBase.aiModel === 'gpt4' || $DataBase.subModel === 'gpt4' || $DataBase.subModel === 'gpt35'}
+    <span class="text-neutral-200">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
+    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="sk-XXXXXXXXXXXXXXXXXXXX" bind:value={$DataBase.openAIKey}>
+    <div class="flex items-center mt-2 mb-4">
+        <Check bind:check={$DataBase.useStreaming}/>
+        <span>OpenAI {language.streaming}</span>
+    </div>
+{/if}
+{#if $DataBase.aiModel === 'custom'}
+    <span class="text-neutral-200 mt-2">{language.plugin}</span>
+    <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.currentPluginProvider}>
+        <option value="" class="bg-darkbg appearance-none">None</option>
+        {#each $customProviderStore as plugin}
+            <option value={plugin} class="bg-darkbg appearance-none">{plugin}</option>
+        {/each}
+    </select>
+{/if}
+{#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'}
+    <span class="text-neutral-200">TextGen {language.providerURL} <Help key="oogaboogaURL"/></span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="https://..." bind:value={$DataBase.textgenWebUIURL}>
+    <span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
+    <span class="text-draculared text-xs mb-2">You must use textgen webui with --no-stream and without --cai-chat or --chat</span>
+    {#if !isTauri}
+        <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
+    {/if}
+{/if}
+<span class="text-neutral-200">{language.mainPrompt} <Help key="mainprompt"/></span>
+<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.mainPrompt}></textarea>
+<span class="text-gray-400 mb-6 text-sm">{tokens.mainPrompt} {language.tokens}</span>
+<span class="text-neutral-200">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
+<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.jailbreak}></textarea>
+<span class="text-gray-400 mb-6 text-sm">{tokens.jailbreak} {language.tokens}</span>
+<span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
+<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.globalNote}></textarea>
+
+<span class="text-gray-400 mb-6 text-sm">{tokens.globalNote} {language.tokens}</span>
+<span class="text-neutral-200">{language.maxContextSize}</span>
+{#if $DataBase.aiModel === 'gpt35'}
+    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="4000" bind:value={$DataBase.maxContext}>
+{:else if $DataBase.aiModel === 'gpt4' || $DataBase.aiModel === 'textgen_webui'}
+    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max="8000" bind:value={$DataBase.maxContext}>
+{:else if $DataBase.aiModel === 'custom'}
+    <input class="text-neutral-200 mb-4 text-sm p-2 bg-transparent input-text focus:bg-selected" type="number" min={0} max={getCurrentPluginMax($DataBase.currentPluginProvider)} bind:value={$DataBase.maxContext}>
+{/if}
+<span class="text-neutral-200">{language.maxResponseSize}</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.maxResponse}>
+<span class="text-neutral-200">{language.temperature} <Help key="tempature"/></span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" 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-neutral-200">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="0" max="100" bind:value={$DataBase.frequencyPenalty}>
+<span class="text-gray-400 mb-6 text-sm">{($DataBase.frequencyPenalty / 100).toFixed(2)}</span>
+<span class="text-neutral-200">{language.presensePenalty} <Help key="presensePenalty"/></span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" 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-neutral-200 mt-2">{language.forceReplaceUrl} <Help key="forceUrl"/></span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl} placeholder="Leave blank to not replace url">
+<span class="text-neutral-200 mt-2">{language.submodel} {language.forceReplaceUrl} <Help key="forceUrl"/></span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl2} placeholder="Leave blank to not replace url">
+
+
+
+<details class="mt-4">
+    <summary class="mb-2">{language.advancedSettings}</summary>
+    <span class="text-neutral-200 mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
+    <DropList bind:list={$DataBase.formatingOrder} />
+    <span class="text-neutral-200 mt-2">Bias <Help key="bias"/></span>
+    <table class="contain w-full max-w-full tabler mt-2">
+        <tr>
+            <th class="font-medium w-1/2">Bias</th>
+            <th class="font-medium w-1/3">{language.value}</th>
+            <th class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
+                    let bia = $DataBase.bias
+                    bia.push(['', 0])
+                    $DataBase.bias = bia
+            }}><PlusIcon /></th>
+        </tr>
+        {#if $DataBase.bias.length === 0}
+            <tr>
+                <div class="text-gray-500">{language.noBias}</div>
+            </tr>
+        {/if}
+        {#each $DataBase.bias as bias, i}
+            <tr>
+                <td class="font-medium truncate w-1/2">
+                    <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][0]} placeholder="string">
+                </td>
+                <td class="font-medium truncate w-1/3">
+                    <input class="text-neutral-200 mt-2 mb-4 w-full p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.bias[i][1]} type="number" max="100" min="-100">
+                </td>
+                <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
+                    let bia = $DataBase.bias
+                    bia.splice(i, 1)
+                    $DataBase.bias = bia
+                }}><TrashIcon /></button>
+            </tr>
+        {/each}
+    </table>
+
+    <div class="flex items-center mt-4">
+        <Check bind:check={$DataBase.promptPreprocess}/>
+        <span>{language.promptPreprocess}</span>
+    </div>
+</details>
+
+<button on:click={() => {openPresetList = true}} class="mt-4 drop-shadow-lg p-3 border-borderc border-solid flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected">{language.presets}</button>
+

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { changeLanguage, language } from "src/lang";
+    import { DataBase, saveImage, updateTextTheme } from "src/ts/database";
+    import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
+    import Check from "src/lib/Others/Check.svelte";
+    import Help from "src/lib/Others/Help.svelte";
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
+<span class="text-neutral-200 mt-4">{language.UiLanguage}</span>
+<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.language} on:change={async () => {
+    await sleep(10)
+    changeLanguage($DataBase.language)
+}}>
+    <option value="en" class="bg-darkbg appearance-none">English</option>
+    <option value="ko" class="bg-darkbg appearance-none">한국어</option>
+</select>
+
+<span class="text-neutral-200 mt-4">{language.theme}</span>
+<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none text-sm" bind:value={$DataBase.theme}>
+    <option value="" class="bg-darkbg appearance-none">Standard Risu</option>
+    <option value="waifu" class="bg-darkbg appearance-none">Waifulike</option>
+    <option value="waifuMobile" class="bg-darkbg appearance-none">WaifuCut</option>
+    <!-- <option value="free" class="bg-darkbg appearance-none">Freestyle</option> -->
+
+</select>
+
+
+{#if $DataBase.theme === "waifu"}
+    <span class="text-neutral-200 mt-4">{language.waifuWidth}</span>
+    <input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.waifuWidth}>
+    <span class="text-gray-400text-sm">{($DataBase.waifuWidth)}%</span>
+
+    <span class="text-neutral-200 mt-4">{language.waifuWidth2}</span>
+    <input class="text-neutral-200 text-sm p-2 bg-transparent input-text focus:bg-selected" type="range" min="20" max="150" bind:value={$DataBase.waifuWidth2}>
+    <span class="text-gray-400text-sm">{($DataBase.waifuWidth2)}%</span>
+{/if}
+
+<span class="text-neutral-200 mt-4">{language.textColor}</span>
+<select class="bg-transparent input-text mt-2 text-gray-200 appearance-none" bind:value={$DataBase.textTheme} on:change={updateTextTheme}>
+    <option value="standard" class="bg-darkbg appearance-none">{language.classicRisu}</option>
+    <option value="highcontrast" class="bg-darkbg appearance-none">{language.highcontrast}</option>
+    <option value="custom" class="bg-darkbg appearance-none">Custom</option>
+</select>
+
+{#if $DataBase.textTheme === "custom"}
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorStandard} on:change={updateTextTheme}>
+        <span class="ml-2">Normal Text</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalic} on:change={updateTextTheme}>
+        <span class="ml-2">Italic Text</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorBold} on:change={updateTextTheme}>
+        <span class="ml-2">Bold Text</span>
+    </div>
+    <div class="flex items-center mt-2">
+        <input type="color" class="style2 text-sm" bind:value={$DataBase.customTextTheme.FontColorItalicBold} on:change={updateTextTheme}>
+        <span class="ml-2">Italic Bold Text</span>
+    </div>
+{/if}
+
+
+<span class="text-neutral-200 mt-4">{language.translator}</span>
+<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.translator}>
+    <option value="" class="bg-darkbg appearance-none">{language.disabled}</option>
+    <option value="ko" class="bg-darkbg appearance-none">한국어</option>
+</select>
+<span class="text-neutral-200">{language.UISize}</span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.zoomsize}>
+<span class="text-gray-400 mb-6 text-sm">{($DataBase.zoomsize)}%</span>
+
+<span class="text-neutral-200">{language.iconSize}</span>
+<input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="range" min="50" max="200" bind:value={$DataBase.iconsize}>
+<span class="text-gray-400 mb-6 text-sm">{($DataBase.iconsize)}%</span>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.autoTranslate} />
+    <span>{language.autoTranslation}</span>
+</div>
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen}/>
+    <span>{language.fullscreen}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.showMemoryLimit}/>
+    <span>{language.showMemoryLimit}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
+        if(check){
+            $DataBase.customBackground = '-'
+            const d = await selectSingleFile(['png', 'webp', 'gif'])
+            if(!d){
+                $DataBase.customBackground = ''
+                return
+            }
+            const img = await saveImage(d.data)
+            $DataBase.customBackground = img
+        }
+        else{
+            $DataBase.customBackground = ''
+        }
+    }}></Check>
+    <span>{language.useCustomBackground}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.playMessage}/>
+    <span>{language.playMessage} <Help key="msgSound"/></span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.swipe}/>
+    <span>{language.SwipeRegenerate}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.roundIcons}/>
+    <span>{language.roundIcons}</span>
+</div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.instantRemove}/>
+    <span>{language.instantRemove}</span>
+</div>

src/lib/Setting/Pages/FilesSettings.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import { language } from "src/lang";
+    import { alertConfirm } from "src/ts/alert";
+    import { checkDriver } from "src/ts/drive/drive";
+    import { isTauri } from "src/ts/globalApi";
+
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.files}</h2>
+<button
+    on:click={async () => {
+        if(await alertConfirm(language.backupConfirm)){
+            localStorage.setItem('backup', 'save')
+            if(isTauri){
+                checkDriver('savetauri')
+            }
+            else{
+                checkDriver('save')
+            }
+        }
+    }}
+    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    {language.savebackup}
+</button>
+
+<button
+    on:click={async () => {
+        if((await alertConfirm(language.backupLoadConfirm)) && (await alertConfirm(language.backupLoadConfirm2))){
+            localStorage.setItem('backup', 'load')
+            if(isTauri){
+                checkDriver('loadtauri')
+            }
+            else{
+                checkDriver('load')
+            }
+        }
+    }}
+    class="drop-shadow-lg p-3 border-borderc border-solid mt-2 flex justify-center items-center ml-2 mr-2 border-1 hover:bg-selected text-sm">
+    {language.loadbackup}
+</button>

src/lib/Setting/Pages/OtherBotSettings.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import Check from "src/lib/Others/Check.svelte";
+    import { language } from "src/lang";
+    import Help from "src/lib/Others/Help.svelte";
+    import { DataBase } from "src/ts/database";
+    import { isTauri } from "src/ts/globalApi";
+
+</script>
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
+
+<span class="text-neutral-200 mt-4 text-lg font-bold">{language.imageGeneration}</span>
+
+<span class="text-neutral-200 mt-2">{language.provider} <Help key="sdProvider"/></span>
+<select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none text-sm" bind:value={$DataBase.sdProvider}>
+    <option value="" class="bg-darkbg appearance-none">None</option>
+    <option value="webui" class="bg-darkbg appearance-none">Stable Diffusion WebUI</option>
+    <!-- TODO -->
+    <!-- <option value="runpod" class="bg-darkbg appearance-none">Runpod Serverless</option> -->
+</select>
+
+{#if $DataBase.sdProvider === 'webui'}
+<span class="text-draculared text-xs mb-2">You must use WebUI with --api flag</span>
+    <span class="text-draculared text-xs mb-2">You must use WebUI without agpl license or use unmodified version with agpl license to observe the contents of the agpl license.</span>
+    {#if !isTauri}
+        <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
+    {/if}
+    <span class="text-neutral-200 mt-2">WebUI {language.providerURL}</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" placeholder="https://..." bind:value={$DataBase.webUiUrl}>
+    <span class="text-neutral-200">Steps</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="100" bind:value={$DataBase.sdSteps}>
+    
+    <span class="text-neutral-200">CFG Scale</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.sdCFG}>
+
+    <span class="text-neutral-200">Width</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.width}>
+    <span class="text-neutral-200">Height</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="2048" bind:value={$DataBase.sdConfig.height}>
+    <span class="text-neutral-200">Sampler</span>
+    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.sampler_name}>
+    
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.sdConfig.enable_hr}/>
+        <span>Enable Hires</span>
+    </div>
+    {#if $DataBase.sdConfig.enable_hr === true}
+        <span class="text-neutral-200">denoising_strength</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="10" bind:value={$DataBase.sdConfig.denoising_strength}>
+        <span class="text-neutral-200">hr_scale</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="10" bind:value={$DataBase.sdConfig.hr_scale}>
+        <span class="text-neutral-200">Upscaler</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.sdConfig.hr_upscaler}>
+    {/if}
+{/if}
+
+
+<span class="text-neutral-200 mt-4 text-lg font-bold">TTS</span>
+<span class="text-neutral-200 mt-2">ElevenLabs API key</span>
+<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.elevenLabKey}>

src/lib/Setting/Pages/PluginSettings.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  import { PlusIcon, TrashIcon } from "lucide-svelte";
+  import { language } from "src/lang";
+  import { alertConfirm } from "src/ts/alert";
+  import { DataBase } from "src/ts/database";
+  import { importPlugin } from "src/ts/process/plugins";
+
+</script>
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
+<span class="text-draculared text-xs mb-4">{language.pluginWarn}</span>
+
+
+<div class="border-solid border-borderc p-2 flex flex-col border-1">
+    {#if $DataBase.plugins.length === 0}
+        <span class="text-gray-500">No Plugins</span>
+    {:else}
+        {#each $DataBase.plugins as plugin, i}
+            {#if i !== 0}
+                <div class="border-borderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
+            {/if}
+                <div class="flex">
+                    <span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
+                    <button class="gray-500 hover:gray-200 cursor-pointer" on:click={async () => {
+                        const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
+                        if(v){
+                            if($DataBase.currentPluginProvider === plugin.name){
+                                $DataBase.currentPluginProvider  = ''
+                            }
+                            let plugins = $DataBase.plugins
+                            plugins.splice(i, 1)
+                            $DataBase.plugins = plugins
+                        }
+                    }}>
+                        <TrashIcon />
+                    </button>
+                </div>
+                {#if Object.keys(plugin.arguments).length > 0}
+                    <div class="flex flex-col mt-2 bg-dark-900 bg-opacity-50 p-3">
+                        {#each Object.keys(plugin.arguments) as arg}
+                            <span>{arg}</span>
+                            {#if Array.isArray(plugin.arguments[arg])}
+                                <select class="bg-transparent input-text mt-2 mb-4 text-gray-200 appearance-none" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                                    {#each plugin.arguments[arg] as a}
+                                        <option value={a} class="bg-darkbg appearance-none">a</option>
+                                    {/each}
+                                </select>
+                            {:else if plugin.arguments[arg] === 'string'}
+                                <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                            {:else if plugin.arguments[arg] === 'int'}
+                                <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" type="number" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                            {/if}
+                        {/each}
+                    </div>
+                {/if}
+        {/each}
+    {/if}
+</div>
+<div class="text-gray-500 mt-2 flex">
+    <button on:click={() => {
+        importPlugin()  
+    }} class="hover:text-neutral-200 cursor-pointer">
+        <PlusIcon />
+    </button>
+</div>

src/lib/Setting/Pages/UserSettings.svelte

@@ -0,0 +1,21 @@
+<script>
+    import { language } from "src/lang";
+    import { getCharImage, selectUserImg } from "src/ts/characters";
+    import { DataBase } from "src/ts/database";
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.user}</h2>
+<span class="text-neutral-200 mt-2 mb-2">{language.userIcon}</span>
+<button on:click={() => {selectUserImg()}}>
+    {#if $DataBase.userIcon === ''}
+        <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+    {:else}
+        {#await getCharImage($DataBase.userIcon, 'css')}
+            <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" />
+        {:then im} 
+            <div class="rounded-md h-32 w-32 shadow-lg bg-gray-500 cursor-pointer hover:text-green-500" style={im} />                
+        {/await}
+    {/if}
+</button>
+<span class="text-neutral-200 mt-4">{language.username}</span>
+<input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="User" bind:value={$DataBase.username}>

src/lib/Setting/Settings.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { ActivityIcon, BotIcon, CodeIcon, FolderIcon, MonitorIcon, Sailboat, UserIcon, XCircleIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+    import DisplaySettings from "./Pages/DisplaySettings.svelte";
+    import UserSettings from "./Pages/UserSettings.svelte";
+    import BotSettings from "./Pages/BotSettings.svelte";
+    import OtherBotSettings from "./Pages/OtherBotSettings.svelte";
+    import PluginSettings from "./Pages/PluginSettings.svelte";
+    import FilesSettings from "./Pages/FilesSettings.svelte";
+    import AdvancedSettings from "./Pages/AdvancedSettings.svelte";
+    import { SizeStore, settingsOpen } from "src/ts/stores";
+    import Botpreset from "./botpreset.svelte";
+    let selected = -1
+    let openPresetList = false
+    if(window.innerWidth >= 700){
+        selected = 0
+    }
+
+</script>
+<div class="h-full w-full flex justify-center setting-bg">
+    <div class="h-full max-w-screen-lg w-full flex">
+        {#if window.innerWidth >= 700 || selected === -1}
+            <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
+                class:w-full={window.innerWidth < 700}>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 0} on:click={() => {
+                    selected = 0
+                }}>
+                    <UserIcon />
+                    <span>{language.user}</span>
+                </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 1} on:click={() => {
+                    selected = 1
+                }}>
+                    <BotIcon />
+                    <span>{language.chatBot}</span>
+                </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 2} on:click={() => {
+                    selected = 2
+                }}>
+                    <Sailboat />
+                    <span>{language.otherBots}</span>
+                </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 3} on:click={() => {
+                    selected = 3
+                }}>
+                    <MonitorIcon />
+                    <span>{language.display}</span>
+                </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 4} on:click={() => {
+                    selected = 4
+                }}>
+                    <CodeIcon />
+                    <span>{language.plugin}</span>
+                </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 5} on:click={() => {
+                    selected = 5
+                }}>
+                    <FolderIcon />
+                    <span>{language.files}</span>
+                </button>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 6} on:click={() => {
+                    selected = 6
+                }}>
+                    <ActivityIcon />
+                    <span>{language.advancedSettings}</span>
+                </button>
+                {#if window.innerWidth < 700}
+                    <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
+                        settingsOpen.set(false)
+                    }}> <XCircleIcon /> </button>
+                {/if}
+            </div>
+        {/if}
+        {#if window.innerWidth >= 700 || selected !== -1}
+            <div class="flex-grow p-4 bg-bgcolor flex flex-col text-white overflow-y-auto relative">
+                {#if selected === 0}
+                    <UserSettings />
+                {:else if selected === 1}
+                    <BotSettings bind:openPresetList />
+                {:else if selected === 2}
+                    <OtherBotSettings />
+                {:else if selected === 3}
+                    <DisplaySettings />
+                {:else if selected === 4}
+                    <PluginSettings />
+                {:else if selected === 5}
+                    <FilesSettings />
+                {:else if selected === 6}
+                    <AdvancedSettings />
+                {/if}
+                <button class="absolute top-2 right-2 hover:text-green-500" on:click={() => {
+                    if(window.innerWidth >= 700){
+                        settingsOpen.set(false)
+                    }
+                    else{
+                        selected = -1
+                    }
+                }}>
+                    <XCircleIcon />
+                </button>
+            </div>
+        {/if}
+    </div>
+</div>
+{#if openPresetList}
+    <Botpreset />
+{/if}
+<style>
+    .setting-bg{
+        background: linear-gradient(to right, #21222C 50%, #282a36 50%);
+
+    }
+</style>

src/lib/Setting/botpreset.svelte

@@ -0,0 +1,83 @@
+<script>
+    import { alertConfirm, alertError } from "../../ts/alert";
+    import { language } from "../../lang";
+    import { DataBase, changeToPreset, presetTemplate } from "../../ts/database";
+    import { EditIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
+
+    let editMode = false
+    export let close = () => {}
+
+</script>
+
+<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">
+        <div class="flex items-center text-neutral-200 mb-4">
+            <h2 class="mt-0 mb-0">{language.presets}</h2>
+            <div class="flex-grow flex justify-end">
+                <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={close}>
+                    <XIcon size={24}/>
+                </button>
+            </div>
+        </div>
+        {#each $DataBase.botPresets as presets, i}
+            <button on:click={() => {
+                if(!editMode){
+                    changeToPreset(i)
+                    close()
+                }
+            }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
+                {#if editMode}
+                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.botPresets[i].name} placeholder="string">
+                {:else}
+                    {#if i < 9}
+                    <span class="w-2 text-center mr-2 text-gray-400">{i + 1}</span>
+                    {/if}
+                    <span>{presets.name}</span>
+                {/if}
+                <div class="flex-grow flex justify-end">
+                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
+                        e.stopPropagation()
+                        if($DataBase.botPresets.length === 1){
+                            alertError(language.errors.onlyOneChat)
+                            return
+                        }
+                        const d = await alertConfirm(`${language.removeConfirm}${presets.name}`)
+                        if(d){
+                            changeToPreset(0)
+                            let botPresets = $DataBase.botPresets
+                            botPresets.splice(i, 1)
+                            $DataBase.botPresets = botPresets
+                        }
+                    }}>
+                        <TrashIcon size={18}/>
+                    </button>
+                </div>
+            </button>
+        {/each}
+        <div class="flex mt-2 items-center">
+            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
+                let botPresets = $DataBase.botPresets
+                let newPreset = JSON.parse(JSON.stringify(presetTemplate))
+                newPreset.name = `New Preset`
+                botPresets.push(newPreset)
+
+                $DataBase.botPresets = botPresets
+            }}>
+                <PlusIcon/>
+            </button>
+            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
+                editMode = !editMode
+            }}>
+                <EditIcon size={18}/>
+            </button>
+        </div>
+        <span class="text-gray-400 text-sm">{language.quickPreset}</span>
+    </div>
+</div>
+
+<style>
+    .break-any{
+        word-break: normal;
+        overflow-wrap: anywhere;
+    }
+</style>