Update to 1.12.0 (#73)

2023-05-19 01:20:38 +09:00
parent 2c06bf8ca7 d622a2bd47
commit 3b7b4a78b7
35 changed files with 926 additions and 689 deletions
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "@msgpack/msgpack": "3.0.0-beta2",
    "@tauri-apps/api": "1.2.0",
    "buffer": "^6.0.3",
+    "core-js": "^3.30.2",
    "dompurify": "^3.0.1",
    "exifr": "^7.1.3",
    "gpt-3-encoder": "^1.1.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,7 @@ specifiers:
  '@types/wicg-file-system-access': ^2020.9.6
  autoprefixer: ^10.4.14
  buffer: ^6.0.3
+  core-js: ^3.30.2
  dompurify: ^3.0.1
  exifr: ^7.1.3
  gpt-3-encoder: ^1.1.4
@@ -55,6 +56,7 @@ dependencies:
  '@msgpack/msgpack': 3.0.0-beta2
  '@tauri-apps/api': 1.2.0
  buffer: 6.0.3
+  core-js: 3.30.2
  dompurify: 3.0.1
  exifr: 7.1.3
  gpt-3-encoder: 1.1.4
@@ -852,6 +854,11 @@ packages:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true

+  /core-js/3.30.2:
+    resolution: {integrity: sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==}
+    requiresBuild: true
+    dev: false
+
  /crc-32/0.3.0:
    resolution: {integrity: sha512-kucVIjOmMc1f0tv53BJ/5WIX+MGLcKuoBhnGqQrgKJNqLByb/sVMWfW/Aw6hw0jgcqjJ2pi9E5y32zOIpaUlsA==}
    engines: {node: '>=0.8'}
--- a/public/discord-mark-white.svg
+++ b/public/discord-mark-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
  },
  "package": {
    "productName": "RisuAI",
-    "version": "1.11.0"
+    "version": "1.12.0"
  },
  "tauri": {
    "allowlist": {
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
    import Sidebar from './lib/SideBars/Sidebar.svelte';
    import {ArrowRight} from 'lucide-svelte'
-    import { SizeStore, sideBarStore } from './ts/stores';
+    import { SizeStore, settingsOpen, sideBarStore } from './ts/stores';
    import { DataBase, loadedStore } from './ts/database';
    import ChatScreen from './lib/ChatScreens/ChatScreen.svelte';
    import AlertComp from './lib/Others/AlertComp.svelte';
    import { alertStore } from './ts/alert';
    import GridChars from './lib/Others/GridCatalog.svelte';
    import WelcomeRisu from './lib/Others/WelcomeRisu.svelte';
+    import Settings from './lib/Setting/Settings.svelte';

    let didFirstSetup: boolean  = false
    let gridOpen = false
@@ -27,6 +28,8 @@
        </div>
    {:else if !didFirstSetup}
        <WelcomeRisu />
+    {:else if $settingsOpen}
+        <Settings />
    {:else}
        {#if gridOpen}
            <GridChars endGrid={() => {gridOpen = false}} />
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -71,7 +71,8 @@ export const languageEnglish = {
        personality: "A brief description about character's personality. \n\n**It is not recommended to use this option. Describe it in character description instead.**",
        scenario: "A brief description about character's scenario. \n\n**It is not recommended to use this option. Describe it in character description instead.**",
        utilityBot: "When activated, it ignores main prompt. \n\n**It is not recommended to use this option. Modifiy system prompt instead.**",
-        loreSelective: "If Selective mode is toggled, both Activation Key and Secondary key should have a match to activate the lore."
+        loreSelective: "If Selective mode is toggled, both Activation Key and Secondary key should have a match to activate the lore.",
+        additionalAssets: "Additional assets to display in your chat. \n\n - use `{{raw::<asset name>}}` to use as path.\n - use `{{img::<asset name>}}` to use as image"
    },
    setup: {
        chooseProvider: "Choose AI Provider",
@@ -248,5 +249,11 @@ export const languageEnglish = {
    useExperimental: "Able Experimental Features",
    showMemoryLimit: "Show Memory Limit",
    roundIcons: "Round Icons",
-    streaming: "Streaming"
+    streaming: "Streaming",
+    chatBot:'Chat Bot',
+    otherBots:'Other Bots',
+    user:"User",
+    additionalAssets:"Additional Assets",
+    editDisplay: "Modify Display",
+    community: "Community"
 }
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -234,5 +234,11 @@ export const languageKorean = {
    useExperimental: "실험적 요소 보이기",
    showMemoryLimit: "기억 한계치 보이기",
    roundIcons: "둥근 아이콘",
-    streaming: "스트리밍"
+    streaming: "스트리밍",
+    chatBot:'채팅 봇',
+    otherBots:'기타 봇',
+    user:"유저",
+    editDisplay: "디스플레이 수정",
+    community: "커뮤니티"
+
 }
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -4,7 +4,7 @@
    import AutoresizeArea from "./AutoresizeArea.svelte";
    import { alertConfirm } from "../../ts/alert";
    import { language } from "../../lang";
-    import { DataBase } from "../../ts/database";
+    import { DataBase, type character, type groupChat } from "../../ts/database";
    import { selectedCharID } from "../../ts/stores";
    import { translate } from "../../ts/translator/translator";
    import { replacePlaceholders } from "../../ts/util";
@@ -16,6 +16,7 @@
    export let rerollIcon = false
    export let onReroll = () => {}
    export let unReroll = () => {}
+    export let character:character|groupChat|null = null
    let translating = false
    let editMode = false
    export let altGreeting = false
@@ -127,10 +128,12 @@
            {#if editMode}
                <AutoresizeArea bind:value={message} />
            {:else}
-                <span class="text chat chattext prose prose-invert"
-                    style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
-                    style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
-                >{@html ParseMarkdown(msgDisplay)}</span>
+                {#await ParseMarkdown(msgDisplay, character) then md} 
+                    <span class="text chat chattext prose prose-invert"
+                        style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
+                        style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
+                    >{@html md}</span>
+                {/await}
            {/if}
        </span>

--- a/src/lib/ChatScreens/CreatorQuote.svelte
+++ b/src/lib/ChatScreens/CreatorQuote.svelte
@@ -6,14 +6,16 @@
            </button>
        </h1>
        <div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
-            {@html ParseMarkdown(quote)}
+            {#await ParseMarkdown(quote) then md} 
+                {@html md}
+            {/await}
        </div>
    </div>
 </div>
 <script lang="ts">
    import { XIcon } from "lucide-svelte";
-  import { language } from "src/lang";
-  import { ParseMarkdown } from "src/ts/parser";
+    import { language } from "src/lang";
+    import { ParseMarkdown } from "src/ts/parser";

    export let onRemove: () => void
    export let quote:string
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -247,6 +247,7 @@
                            onReroll={reroll}
                            unReroll={unReroll}
                            isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $DataBase.showMemoryLimit}
+                            character={$DataBase.characters[$selectedCharID]}
                        />
                    {:else}
                        <Chat
@@ -258,10 +259,12 @@
                            unReroll={unReroll}
                            img={getCharImage(findCharacterbyId(chat.saying).image, 'css')}
                            isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $DataBase.showMemoryLimit}
+                            character={findCharacterbyId(chat.saying)}
                        />
                    {/if}
                {:else}
                    <Chat
+                        character={$DataBase.characters[$selectedCharID]}
                        idx={chat.index}
                        name={$DataBase.username} 
                        message={chat.data}
@@ -273,6 +276,7 @@
            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
                {#if $DataBase.characters[$selectedCharID].type !== 'group'}
                    <Chat
+                        character={$DataBase.characters[$selectedCharID]}
                        name={$DataBase.characters[$selectedCharID].name}
                        message={$DataBase.characters[$selectedCharID].firstMsgIndex === -1 ? $DataBase.characters[$selectedCharID].firstMessage :
                            $DataBase.characters[$selectedCharID].alternateGreetings[$DataBase.characters[$selectedCharID].firstMsgIndex]}
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -33,7 +33,11 @@
                <h2 class="text-green-700 mt-0 mb-2 w-40 max-w-full">Input</h2>
            {/if}
            {#if $alertStore.type === 'markdown'}
-                <span class="text-gray-300 chattext prose prose-invert chattext2">{@html ParseMarkdown($alertStore.msg)}</span>
+                <span class="text-gray-300 chattext prose prose-invert chattext2">
+                    {#await ParseMarkdown($alertStore.msg) then msg}
+                        {@html msg}                        
+                    {/await}
+                </span>
            {:else if $alertStore.type !== 'select'}
                <span class="text-gray-300">{$alertStore.msg}</span>
            {/if}
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -104,34 +104,6 @@
                <img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
            </div>
        {:else if step === 4}
-            <h2>{language.setup.theme}</h2>
-            <div class="flex flex-col items-start ml-2">
-                <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                    $DataBase.theme = ''
-                    step += 1
-                }}><span>• Standard Risu</span>
-                <img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
-                <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                    $DataBase.theme = 'waifu'
-                    step += 1
-                }}><span>• Waifulike</span>
-                <img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
-            </div>
-        {:else if step === 4}
-            <h2>{language.setup.theme}</h2>
-            <div class="flex flex-col items-start ml-2">
-                <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                    $DataBase.theme = ''
-                    step += 1
-                }}><span>• Standard Risu</span>
-                <img class="w-3/4 mt-2" src="/ss2.webp" alt="example"></button>
-                <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
-                    $DataBase.theme = 'waifu'
-                    step += 1
-                }}><span>• Waifulike</span>
-                <img class="w-3/4 mt-2" src="/ss3.webp" alt="example"></button>
-            </div>
-        {:else if step === 5}
            <h2>{language.setup.texttheme}</h2>
            <div class="flex flex-col items-start ml-2">
                <button class="hover:text-green-500 transition-colors flex flex-col items-start" on:click={() => {
@@ -159,7 +131,7 @@
                    </div>
                </button>
            </div>
-        {:else if step === 6}
+        {:else if step === 5}
            <h2>{language.setup.inputName}</h2>
            <div class="w-full ml-2">
                <input class="text-neutral-200 mt-2 p-2 bg-transparent input-text focus:bg-selected m-0" bind:value={$DataBase.username}>
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/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 Type</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>
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/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>
+
--- a/src/lib/Setting/Pages/Communities.svelte
+++ b/src/lib/Setting/Pages/Communities.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { language } from "src/lang";
+    import { openURL } from "src/ts/globalApi";
+</script>
+
+<h2 class="mb-2 text-2xl font-bold mt-2">{language.community}</h2>
+<button
+    on:click={async () => {openURL("https://github.com/kwaroran/RisuAI")}}
+    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">
+    Github
+</button>
+<button
+    on:click={async () => {openURL("https://discord.gg/JzP8tB9ZK8")}}
+    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">
+    Discord
+</button>
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/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>
--- a/src/lib/Setting/Pages/FilesSettings.svelte
+++ b/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>
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/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}>
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/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>
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/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}>
--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { ActivityIcon, BotIcon, BoxIcon, 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";
+  import Communities from "./Pages/Communities.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>
+                <button class="text-gray-400 flex gap-2 items-center hover:text-gray-200" class:text-white={selected === 7} on:click={() => {
+                    selected = 7
+                }}>
+                    <BoxIcon />
+                    <span>{language.community}</span>
+                </button>
+                {#if window.innerWidth < 700}
+                    <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
+                        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 />
+                {:else if selected === 7}
+                    <Communities />
+                {/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 close={() => {openPresetList = false}} />
+{/if}
+<style>
+    .setting-bg{
+        background: linear-gradient(to right, #21222C 50%, #282a36 50%);
+
+    }
+</style>
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
    import { language } from "../../lang";
    import { tokenize } from "../../ts/tokenizer";
-    import { DataBase, type Database, type character, type groupChat } from "../../ts/database";
+    import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/database";
    import { selectedCharID } from "../../ts/stores";
    import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, LoaderIcon, User, DnaIcon, CurlyBracesIcon, Volume2Icon } from 'lucide-svelte'
    import Check from "../Others/Check.svelte";
@@ -9,7 +9,7 @@
    import LoreBook from "./LoreBookSetting.svelte";
    import { alertConfirm, alertError, alertSelectChar } from "../../ts/alert";
    import BarIcon from "./BarIcon.svelte";
-    import { findCharacterbyId } from "../../ts/util";
+    import { findCharacterbyId, selectMultipleFile } from "../../ts/util";
    import { onDestroy } from "svelte";
    import {isEqual, cloneDeep} from 'lodash'
    import Help from "../Others/Help.svelte";
@@ -578,6 +578,59 @@
            {/each}
        </table>
      
+        <span class="text-neutral-200 mt-2">{language.additionalAssets} <Help key="additionalAssets" /></span>
+        <table class="contain w-full max-w-full tabler mt-2">
+            <tr>
+                <th class="font-medium">{language.value}</th>
+                <th class="font-medium cursor-pointer w-10">
+                    <button class="hover:text-green-500" on:click={async () => {
+                        if(currentChar.type === 'character'){
+                            const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3'])
+                            currentChar.data.additionalAssets = currentChar.data.additionalAssets ?? []
+                            if(!da){
+                                return
+                            }
+                            for(const f of da){
+                                console.log(f)
+                                const img = f.data
+                                const imgp = await saveAsset(img)
+                                const name = f.name
+                                currentChar.data.additionalAssets.push([name, imgp])
+                                currentChar.data.additionalAssets = currentChar.data.additionalAssets
+                            }
+                        }
+                    }}>
+                        <PlusIcon />
+                    </button>
+                </th>
+            </tr>
+            {#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
+                <tr>
+                    <div class="text-gray-500"> No Assets</div>
+                </tr>
+            {:else}
+                {#each currentChar.data.additionalAssets as assets, i}
+                    <tr>
+                        <td class="font-medium truncate">
+                            <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-full resize-none" bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
+                        </td>
+                        <th class="font-medium cursor-pointer w-10">
+                            <button class="hover:text-green-500" on:click={() => {
+                                if(currentChar.type === 'character'){
+                                    currentChar.data.firstMsgIndex = -1
+                                    let additionalAssets = currentChar.data.additionalAssets
+                                    additionalAssets.splice(i, 1)
+                                    currentChar.data.additionalAssets = additionalAssets
+                                }
+                            }}>
+                                <TrashIcon />
+                            </button>
+                        </th>
+                    </tr>
+                {/each}
+            {/if}
+        </table>
+
        {#if $DataBase.showUnrecommended || currentChar.data.utilityBot}
            <div class="flex items-center mt-4">
                <Check bind:check={currentChar.data.utilityBot}/>
--- a/src/lib/SideBars/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBookSetting.svelte
@@ -7,25 +7,28 @@
    import LoreBookData from "./LoreBookData.svelte";
    import Check from "../Others/Check.svelte";
    let submenu = 0
+    let globalMode = false
 </script>

-<div class="flex w-full">
-    <button on:click={() => {
-        submenu = 0
-    }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 0}>
-        <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
-    </button>
-    <button on:click={() => {
-        submenu = 1
-    }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 1}>
-        <span>{language.Chat}</span>
-    </button>
-    <button on:click={() => {
-        submenu = 2
-    }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 2}>
-        <span>{language.settings}</span>
-    </button>
-</div>
+{#if !globalMode}
+    <div class="flex w-full">
+        <button on:click={() => {
+            submenu = 0
+        }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 0}>
+            <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
+        </button>
+        <button on:click={() => {
+            submenu = 1
+        }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 1}>
+            <span>{language.Chat}</span>
+        </button>
+        <button on:click={() => {
+            submenu = 2
+        }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={submenu === 2}>
+            <span>{language.settings}</span>
+        </button>
+    </div>
+{/if}
 {#if submenu !== 2}
    <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>
    <div class="border-solid border-borderc p-2 flex flex-col border-1">
--- a/src/lib/SideBars/RegexData.svelte
+++ b/src/lib/SideBars/RegexData.svelte
@@ -34,6 +34,7 @@
                <option value="editinput">{language.editInput}</option>
                <option value="editoutput">{language.editOutput}</option>
                <option value="editprocess">{language.editProcess}</option>
+                <option value="editdisplay">{language.editDisplay}</option>
            </select>
            <span class="text-neutral-200 mt-6">IN:</span>
            <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={value.in}>
--- a/src/lib/SideBars/Settings.svelte
+++ b/src/lib/SideBars/Settings.svelte
@@ -1,595 +0,0 @@
-<script>
-    import { ActivityIcon, Bot, CodeIcon, FolderIcon, LayoutDashboardIcon, MonitorIcon, PlusIcon, TrashIcon, UserIcon } from "lucide-svelte";
-    import { tokenize } from "../../ts/tokenizer";
-    import { DataBase, saveImage, updateTextTheme } from "../../ts/database";
-    import DropList from "./DropList.svelte";
-    import { changeLanguage, language } from "../../lang";
-    import { getCharImage, selectUserImg } from "../../ts/characters";
-    import { changeFullscreen, selectSingleFile, sleep } from "../../ts/util";
-    import { customProviderStore, getCurrentPluginMax, importPlugin } from "../../ts/process/plugins";
-    import { alertConfirm, alertMd } from "../../ts/alert";
-    import Check from "../Others/Check.svelte";
-    import { getRequestLog, isTauri } from "../../ts/globalApi";
-    import { checkDriver } from "../../ts/drive/drive";
-    import Help from "../Others/Help.svelte";
-    let subMenu = -1
-    let subSubMenu = 0
-    export let openPresetList =false
-
-    let tokens = {
-        mainPrompt: 0,
-        jailbreak: 0,
-        globalNote: 0
-    }
-
-    let lasttokens = {
-        mainPrompt: '',
-        jailbreak: '',
-        globalNote: ''
-    }
-
-    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>
-
-<div class="flex gap-2 mb-2">
-    <button class={subMenu === -1 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = -1}}>
-        <UserIcon />
-    </button>
-    <button class={subMenu === 0 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 0}}>
-        <Bot />
-    </button>
-    <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 3}}>
-        <MonitorIcon />
-    </button>
-    <button class={subMenu === 2 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 2}}>
-        <CodeIcon />
-    </button>
-    <button class={subMenu === 4 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 4}}>
-        <FolderIcon />
-    </button>
-    <button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500 cursor-pointer'} on:click={() => {subMenu = 1}}>
-        <ActivityIcon />
-    </button>
-</div>
-
-{#if subMenu === -1}
-    <h2 class="mb-2 text-2xl font-bold mt-2">{language.userSetting}</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}>
-    
-{:else if subMenu === 0 && subSubMenu === 0}
-    <h2 class="mb-2 text-2xl font-bold mt-2">{language.botSettings}</h2>
-    <div class="flex w-full mb-2">
-        <button on:click={() => {
-            subSubMenu = 0
-        }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer" class:bg-selected={subSubMenu === 0}>
-            <span>{language.Chat}</span>
-        </button>
-        <button on:click={() => {
-            subSubMenu = 1
-        }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer">
-            <span>{language.others}</span>
-        </button>
-    </div>
-    <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 focus:bg-selected text-xs" 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 focus:bg-selected text-xs" 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 focus:bg-selected text-xs" 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>
-
-
-{:else if subMenu === 0 && subSubMenu === 1}
-    <h2 class="mb-2 text-2xl font-bold mt-2">{language.botSettings}</h2>
-    <div class="flex w-full mb-2">
-        <button on:click={() => {
-            subSubMenu = 0
-        }} class="flex-1 border-solid border-borderc border-1 p-2 flex justify-center cursor-pointer">
-            <span>{language.Chat}</span>
-        </button>
-        <button on:click={() => {
-            subSubMenu = 1
-        }} class="flex-1 border-solid border-borderc border-1 border-l-transparent p-2 flex justify-center cursor-pointer" class:bg-selected={subSubMenu === 1}>
-            <span>{language.others}</span>
-        </button>
-    </div>
-    <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}>
-
-    
-{:else if subMenu == 3}
-    <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)
-        subMenu = -1
-    }}>
-        <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>
-
-{:else if subMenu === 2}
-    <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>
-{:else if subMenu === 1}
-    <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>
-
-{:else if subMenu === 4}
-    <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>
-
-{/if}
-
-<style>
-    .style2 {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-color: transparent;
-        width: 2rem;
-        height: 2rem;
-        border: none;
-        cursor: pointer;
-    }
-    .style2::-webkit-color-swatch {
-        border-radius: 0.5rem;
-        border: 1px solid #6272a4;
-    }
-    .style2::-moz-color-swatch {
-        border-radius: 0.5rem;
-        border: 1pxs solid #6272a4;
-    }
-</style>
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -29,10 +29,9 @@
    getCharImage,
  } from "../../ts/characters";
  import { importCharacter } from "src/ts/characterCards";
-  import SettingsDom from "./Settings.svelte";
  import CharConfig from "./CharConfig.svelte";
  import { language } from "../../lang";
-  import Botpreset from "../Others/botpreset.svelte";
+  import Botpreset from "../Setting/botpreset.svelte";
  import { onDestroy } from "svelte";
  import { isEqual } from "lodash";
  import SidebarAvatar from "./SidebarAvatar.svelte";
@@ -226,7 +225,10 @@
  </button>
  {#if sideBarMode === 0}
    {#if $selectedCharID < 0 || $settingsOpen}
-      <SettingsDom bind:openPresetList />
+      <div>
+        <h1 class="text-xl">Welcome to RisuAI!</h1>
+        <span class="text-xs text-gray-400">Select a bot to start chating</span>
+      </div>
    {:else}
      <CharConfig />
    {/if}
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,5 @@
 import "./styles.css";
+import "core-js/actual"
 import App from "./App.svelte";
 import { loadData } from "./ts/globalApi";
 import { ReadableStream, WritableStream, TransformStream } from "web-streams-polyfill/ponyfill/es2018";
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert"
-import { DataBase, defaultSdDataFunc, type character, saveImage, setDatabase, type customscript, type loreSettings, type loreBook } from "./database"
+import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook } from "./database"
 import { checkNullish, selectSingleFile, sleep } from "./util"
 import { language } from "src/lang"
 import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpack";
@@ -8,7 +8,7 @@ import { v4 as uuidv4 } from 'uuid';
 import exifr from 'exifr'
 import { PngMetadata } from "./exif"
 import { characterFormatUpdate } from "./characters"
-import { downloadFile, readImage } from "./globalApi"
+import { downloadFile, readImage, saveAsset } from "./globalApi"
 import { cloneDeep } from "lodash"


@@ -69,7 +69,7 @@ export async function importCharacter() {
                        msg: `Loading... (Getting Emotions ${i} / ${char.emotionImages.length})`
                    })
                    await sleep(10)
-                    const imgp = await saveImage(char.emotionImages[i][1] as any)
+                    const imgp = await saveAsset(char.emotionImages[i][1] as any)
                    char.emotionImages[i][1] = imgp
                }
            }
@@ -85,7 +85,7 @@ export async function importCharacter() {
            }

            char.chatPage = 0
-            char.image = await saveImage(PngMetadata.filter(img))
+            char.image = await saveAsset(PngMetadata.filter(img))
            db.characters.push(characterFormatUpdate(char))
            char.chaId = uuidv4()
            setDatabase(db)
@@ -94,7 +94,7 @@ export async function importCharacter() {
        }
        else if(readed.chara){
            const charaData:OldTavernChar = JSON.parse(Buffer.from(readed.chara, 'base64').toString('utf-8'))
-            const imgp = await saveImage(PngMetadata.filter(img))
+            const imgp = await saveAsset(PngMetadata.filter(img))
            let db = get(DataBase)
            db.characters.push(convertOldTavernAndJSON(charaData, imgp))
            DataBase.set(db)
@@ -140,7 +140,7 @@ export async function characterHubImport() {
                }
            }
            {
-                const imgp = await saveImage(PngMetadata.filter(img))
+                const imgp = await saveAsset(PngMetadata.filter(img))
                let db = get(DataBase)
                const charaData:OldTavernChar = JSON.parse(Buffer.from(readed.chara, 'base64').toString('utf-8'))    
                db.characters.push(convertOldTavernAndJSON(charaData, imgp))
@@ -300,7 +300,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
    }

    const data = card.data
-    const im = img ? await saveImage(PngMetadata.filter(img)) : undefined
+    const im = img ? await saveAsset(PngMetadata.filter(img)) : undefined
    let db = get(DataBase)

    const risuext = cloneDeep(data.extensions.risuai)
@@ -310,6 +310,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
    let customScripts:customscript[] = []
    let utilityBot = false
    let sdData = defaultSdDataFunc()
+    let extAssets:[string,string][] = []

    if(risuext){
        if(risuext.emotions){
@@ -319,10 +320,21 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
                    msg: `Loading... (Getting Emotions ${i} / ${risuext.emotions.length})`
                })
                await sleep(10)
-                const imgp = await saveImage(Buffer.from(risuext.emotions[i][1], 'base64'))
+                const imgp = await saveAsset(Buffer.from(risuext.emotions[i][1], 'base64'))
                emotions.push([risuext.emotions[i][0],imgp])
            }
        }
+        if(risuext.additionalAssets){
+            for(let i=0;i<risuext.additionalAssets.length;i++){
+                alertStore.set({
+                    type: 'wait',
+                    msg: `Loading... (Getting Assets ${i} / ${risuext.additionalAssets.length})`
+                })
+                await sleep(10)
+                const imgp = await saveAsset(Buffer.from(risuext.additionalAssets[i][1], 'base64'))
+                extAssets.push([risuext.additionalAssets[i][0],imgp])
+            }
+        }
        bias = risuext.bias ?? bias
        viewScreen = risuext.viewScreen ?? viewScreen
        customScripts = risuext.customScripts ?? customScripts
@@ -403,7 +415,8 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
            tag: data.tags,
            creator: data.creator,
            character_version: data.character_version
-        }
+        },
+        additionalAssets: extAssets
    }

    db.characters.push(char)
@@ -467,7 +480,8 @@ export async function exportSpecV2(char:character) {
                        viewScreen: char.viewScreen,
                        customScripts: char.customscript,
                        utilityBot: char.utilityBot,
-                        sdData: char.sdData
+                        sdData: char.sdData,
+                        additionalAssets: char.additionalAssets
                    }
                }
            }
@@ -478,12 +492,24 @@ export async function exportSpecV2(char:character) {
            for(let i=0;i<card.data.extensions.risuai.emotions.length;i++){
                alertStore.set({
                    type: 'wait',
-                    msg: `Loading... (Getting Emotions ${i} / ${card.data.extensions.risuai.emotions.length})`
+                    msg: `Loading... (Adding Emotions ${i} / ${card.data.extensions.risuai.emotions.length})`
                })
                const rData = await readImage(card.data.extensions.risuai.emotions[i][1])
                char.emotionImages[i][1] = Buffer.from(rData).toString('base64')
            }
        }
+
+        
+        if(card.data.extensions.risuai.additionalAssets && card.data.extensions.risuai.additionalAssets.length > 0){
+            for(let i=0;i<card.data.extensions.risuai.additionalAssets.length;i++){
+                alertStore.set({
+                    type: 'wait',
+                    msg: `Loading... (Adding Additional Assets ${i} / ${card.data.extensions.risuai.additionalAssets.length})`
+                })
+                const rData = await readImage(card.data.extensions.risuai.additionalAssets[i][1])
+                char.additionalAssets[i][1] = Buffer.from(rData).toString('base64')
+            }
+        }
    
        alertStore.set({
            type: 'wait',
@@ -538,7 +564,8 @@ type CharacterCardV2 = {
                viewScreen?: "none" | "emotion" | "imggen",
                customScripts?:customscript[]
                utilityBot?: boolean,
-                sdData?:[string,string][]
+                sdData?:[string,string][],
+                additionalAssets?:[string,string][],
            }
        }
    }
--- a/src/ts/database.ts
+++ b/src/ts/database.ts
@@ -2,12 +2,12 @@ import { get, writable } from 'svelte/store';
 import { checkNullish } from './util';
 import { changeLanguage } from '../lang';
 import type { RisuPlugin } from './process/plugins';
-import { saveImage as saveImageGlobal } from './globalApi';
+import { saveAsset as saveImageGlobal } from './globalApi';
 import { cloneDeep } from 'lodash';

 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '1.11.0'
+export let appVer = '1.12.0'


 export function setDatabase(data:Database){
@@ -277,6 +277,7 @@ export interface character{
    ttsMode?:string
    ttsSpeech?:string
    supaMemory?:boolean
+    additionalAssets?:[string, string][]
 }


--- a/src/ts/globalApi.ts
+++ b/src/ts/globalApi.ts
@@ -5,6 +5,7 @@ import { convertFileSrc, invoke } from "@tauri-apps/api/tauri"
 import { v4 as uuidv4 } from 'uuid';
 import { appDataDir, join } from "@tauri-apps/api/path";
 import { get } from "svelte/store";
+import {open} from '@tauri-apps/api/shell'
 import { DataBase, loadedStore, setDatabase, type Database, updateTextTheme, defaultSdDataFunc } from "./database";
 import pako from "pako";
 import { appWindow } from "@tauri-apps/api/window";
@@ -163,7 +164,7 @@ export async function readImage(data:string) {
    }
 }

-export async function saveImage(data:Uint8Array, customId:string = ''){
+export async function saveAsset(data:Uint8Array, customId:string = ''){
    let id = ''
    if(customId !== ''){
        id = customId
@@ -534,7 +535,7 @@ function getBasename(data:string){
 export function getUnpargeables(db:Database) {
    let unpargeable:string[] = []

-    function addParge(data:string){
+    function addUnparge(data:string){
        if(!data){
            return
        }
@@ -547,16 +548,23 @@ export function getUnpargeables(db:Database) {
        }
    }

-    addParge(db.customBackground)
-    addParge(db.userIcon)
+    addUnparge(db.customBackground)
+    addUnparge(db.userIcon)

    for(const cha of db.characters){
        if(cha.image){
-            addParge(cha.image)
+            addUnparge(cha.image)
        }
        if(cha.emotionImages){
            for(const em of cha.emotionImages){
-                addParge(em[1])
+                addUnparge(em[1])
+            }
+        }
+        if(cha.type !== 'group'){
+            if(cha.additionalAssets){
+                for(const em of cha.additionalAssets){
+                    addUnparge(em[1])
+                }
            }
        }
    }
@@ -654,4 +662,13 @@ export function getRequestLog(){
    }
    console.log(logString)
    return logString
+}
+
+export function openURL(url:string){
+    if(isTauri){
+        open(url)
+    }
+    else{
+        window.open(url, "_blank")
+    }
 }
--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -1,12 +1,40 @@
 import DOMPurify from 'isomorphic-dompurify';
 import showdown from 'showdown';
+import type { character, groupChat } from './database';
+import { getFileSrc } from './globalApi';
+import { processScript } from './process/scripts';

-const convertor = new showdown.Converter()
-convertor.setOption('simpleLineBreaks', true);
+const convertor = new showdown.Converter({
+    simpleLineBreaks: true,
+    strikethrough: true,
+    tables: true
+})

-export function ParseMarkdown(data:string) {
+
+DOMPurify.addHook("uponSanitizeElement", (node: HTMLElement, data) => {
+    if (data.tagName === "iframe") {
+       const src = node.getAttribute("src") || "";
+       if (!src.startsWith("https://www.youtube.com/embed/")) {
+          return node.parentNode.removeChild(node);
+       }
+    }
+});
+
+export async function ParseMarkdown(data:string, char:(character | groupChat) = null) {
+    if(char && char.type !== 'group'){
+        if(char.customscript){
+            data = processScript(char, data, 'editdisplay')
+        }
+        if(char.additionalAssets){
+            for(const asset of char.additionalAssets){
+                const assetPath = await getFileSrc(asset[1])
+                data = data.replaceAll(`{{raw::${asset[0]}}}`, assetPath).replaceAll(`{{img::${asset[0]}}}`,`<img src="${asset[0]}" />`)
+            }
+        }
+    }
    return DOMPurify.sanitize(convertor.makeHtml(data), {
-        FORBID_TAGS: []
+        ADD_TAGS: ["iframe"],
+        ADD_ATTR: ["allow", "allowfullscreen", "frameborder", "scrolling"],
    })
 }

--- a/src/ts/process/scripts.ts
+++ b/src/ts/process/scripts.ts
@@ -4,7 +4,7 @@ import type { character } from "../database";

 const dreg = /{{data}}/g

-type ScriptMode = 'editinput'|'editoutput'|'editprocess'
+type ScriptMode = 'editinput'|'editoutput'|'editprocess'|'editdisplay'

 export function processScript(char:character, data:string, mode:ScriptMode){
    return processScriptFull(char, data, mode).data
--- a/src/ts/translator/translator.ts
+++ b/src/ts/translator/translator.ts
@@ -1,7 +1,4 @@
-import { Body,fetch as TauriFetch,ResponseType } from "@tauri-apps/api/http"
-import { isTauri } from "../globalApi"
 import { translatorPlugin } from "../process/plugins"
-import { sleep } from "../util"

 let cache={
    origin: [''],
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"1.11.0"}
+{"version":"1.12.0"}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>