From 2044d9b63b1246622bc1a178c75cc1d46f399045 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Wed, 23 Oct 2024 23:46:32 +0900
Subject: [PATCH] Change DataBase inside svelte to DBState for performance

---
 src/App.svelte                                |   2 +-
 src/lib/ChatScreens/AdvancedChatEditor.svelte |   6 +-
 src/lib/ChatScreens/AssetInput.svelte         |   2 +-
 src/lib/ChatScreens/BackgroundDom.svelte      |   2 +-
 src/lib/ChatScreens/Chat.svelte               |  76 +--
 src/lib/ChatScreens/ChatScreen.svelte         |  42 +-
 src/lib/ChatScreens/DefaultChatScreen.svelte  | 168 +++---
 src/lib/ChatScreens/EmotionBox.svelte         |   4 +-
 src/lib/ChatScreens/ResizeBox.svelte          |   4 +-
 src/lib/ChatScreens/Suggestion.svelte         |  24 +-
 src/lib/Mobile/MobileBody.svelte              |   4 +-
 src/lib/Mobile/MobileCharacters.svelte        |   4 +-
 src/lib/Mobile/MobileHeader.svelte            |   4 +-
 src/lib/Others/AlertComp.svelte               |  30 +-
 src/lib/Others/ChatList.svelte                |  28 +-
 src/lib/Others/GridCatalog.svelte             |  20 +-
 src/lib/Others/WelcomeRisu.svelte             |  50 +-
 src/lib/Playground/PlaygroundMenu.svelte      |   2 +-
 .../Pages/AccessibilitySettings.svelte        |  24 +-
 src/lib/Setting/Pages/AdvancedSettings.svelte |  78 +--
 src/lib/Setting/Pages/BotSettings.svelte      | 354 +++++------
 .../Setting/Pages/ChatFormatSettings.svelte   |   8 +-
 src/lib/Setting/Pages/DisplaySettings.svelte  | 160 ++---
 src/lib/Setting/Pages/FilesSettings.svelte    |   2 +-
 .../Pages/GlobalLoreBookSettings.svelte       |  10 +-
 src/lib/Setting/Pages/GlobalRegex.svelte      |   8 +-
 src/lib/Setting/Pages/LanguageSettings.svelte |  46 +-
 .../Pages/Module/ModuleChatMenu.svelte        |  22 +-
 .../Setting/Pages/Module/ModuleMenu.svelte    |   9 +-
 .../Pages/Module/ModuleSettings.svelte        |  31 +-
 src/lib/Setting/Pages/OobaSettings.svelte     | 114 ++--
 .../Setting/Pages/OpenrouterSettings.svelte   |  12 +-
 src/lib/Setting/Pages/OtherBotSettings.svelte | 242 ++++----
 src/lib/Setting/Pages/PersonaSettings.svelte  |  36 +-
 src/lib/Setting/Pages/PluginSettings.svelte   |  22 +-
 src/lib/Setting/Pages/PromptSettings.svelte   |  64 +-
 src/lib/Setting/Pages/UserSettings.svelte     |  24 +-
 src/lib/Setting/botpreset.svelte              |  18 +-
 src/lib/Setting/listedPersona.svelte          |   6 +-
 src/lib/Setting/lorepreset.svelte             |  22 +-
 src/lib/SideBars/CharConfig.svelte            | 555 ++++++++----------
 src/lib/SideBars/DevTool.svelte               |  27 +-
 src/lib/SideBars/LoreBook/LoreBookData.svelte |   2 +-
 src/lib/SideBars/LoreBook/LoreBookList.svelte |  44 +-
 .../SideBars/LoreBook/LoreBookSetting.svelte  |  30 +-
 src/lib/SideBars/Scripts/RegexData.svelte     |   2 +-
 src/lib/SideBars/Scripts/RegexList.svelte     |   2 +-
 src/lib/SideBars/Scripts/TriggerData.svelte   |   2 +-
 src/lib/SideBars/Scripts/TriggerList.svelte   |   2 +-
 src/lib/SideBars/SideChatList.svelte          |  49 +-
 src/lib/SideBars/Sidebar.svelte               |  52 +-
 src/lib/UI/GUI/TextAreaResizable.svelte       |   6 +-
 src/lib/UI/MainMenu.svelte                    |   4 +-
 src/lib/UI/ModelList.svelte                   |   6 +-
 src/lib/UI/PromptDataItem.svelte              |   6 +-
 src/lib/UI/Realm/RealmFrame.svelte            |  16 +-
 src/lib/UI/Realm/RealmPopUp.svelte            |   6 +-
 src/lib/UI/Realm/RealmUpload.svelte           |   4 +-
 src/lib/UI/Title.svelte                       |  10 +-
 src/lib/VisualNovel/VisualNovelChat.svelte    |  12 +-
 src/lib/VisualNovel/VisualNovelMain.svelte    |   8 +-
 src/main.ts                                   |   2 +-
 src/ts/alert.ts                               |   2 +-
 src/ts/characterCards.ts                      |   2 +-
 src/ts/characters.ts                          |   2 +-
 src/ts/creation/creator.ts                    |   2 +-
 src/ts/drive/accounter.ts                     |   2 +-
 src/ts/drive/backuplocal.ts                   |   2 +-
 src/ts/drive/drive.ts                         |   2 +-
 src/ts/gui/animation.ts                       |   2 +-
 src/ts/gui/colorscheme.ts                     |   2 +-
 src/ts/gui/guisize.ts                         |   2 +-
 src/ts/hotkey.ts                              |   2 +-
 src/ts/kei/backup.ts                          |   2 +-
 src/ts/kei/kei.ts                             |   2 +-
 src/ts/model/openrouter.ts                    |   2 +-
 src/ts/observer.ts                            |   2 +-
 src/ts/parser.ts                              |   2 +-
 src/ts/persona.ts                             |   2 +-
 src/ts/plugins/embedscript.ts                 |   4 +-
 src/ts/plugins/plugins.ts                     |   2 +-
 src/ts/process/command.ts                     |   2 +-
 src/ts/process/embedding/addinfo.ts           |   2 +-
 src/ts/process/exampleMessages.ts             |   2 +-
 src/ts/process/files/image.ts                 |   2 +-
 src/ts/process/files/multisend.ts             |   2 +-
 src/ts/process/group.ts                       |   2 +-
 src/ts/process/index.ts                       |   2 +-
 src/ts/process/inlayScreen.ts                 |   2 +-
 src/ts/process/lorebook.ts                    |   2 +-
 src/ts/process/lua.ts                         |   2 +-
 src/ts/process/memory/hanuraiMemory.ts        |   2 +-
 src/ts/process/memory/hypav2.ts               |   2 +-
 src/ts/process/memory/supaMemory.ts           |   2 +-
 src/ts/process/models/local.ts                |   2 +-
 src/ts/process/models/modelString.ts          |   2 +-
 src/ts/process/models/nai.ts                  |   2 +-
 src/ts/process/modules.ts                     |   2 +-
 src/ts/process/prompt.ts                      |   2 +-
 src/ts/process/request.ts                     |   2 +-
 src/ts/process/scripts.ts                     |   2 +-
 src/ts/process/stableDiff.ts                  |   2 +-
 src/ts/process/stringlize.ts                  |   2 +-
 src/ts/process/templates/chatTemplate.ts      |   2 +-
 src/ts/process/templates/getRecomended.ts     |   2 +-
 src/ts/process/templates/jsonSchema.ts        |   2 +-
 src/ts/process/templates/templateCheck.ts     |   2 +-
 src/ts/process/templates/templates.ts         |   2 +-
 src/ts/process/triggers.ts                    |   2 +-
 src/ts/process/tts.ts                         |   2 +-
 src/ts/realm.ts                               |   2 +-
 src/ts/storage/accountStorage.ts              |   2 +-
 src/ts/storage/autoStorage.ts                 |   2 +-
 .../{database.ts => database.svelte.ts}       |  43 +-
 src/ts/storage/exportAsDataset.ts             |   2 +-
 src/ts/storage/globalApi.ts                   |   2 +-
 src/ts/storage/persistant.ts                  |   2 +-
 src/ts/stores.ts                              |   2 +-
 src/ts/sync/multiuser.ts                      |   2 +-
 src/ts/tokenizer.ts                           |   2 +-
 src/ts/translator/translator.ts               |   2 +-
 src/ts/util.ts                                |   4 +-
 122 files changed, 1372 insertions(+), 1424 deletions(-)
 rename src/ts/storage/{database.ts => database.svelte.ts} (98%)

diff --git a/src/App.svelte b/src/App.svelte
index c4adcb0b..df57dc04 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Sidebar from './lib/SideBars/Sidebar.svelte';
     import { DynamicGUI, settingsOpen, sideBarStore, ShowRealmFrameStore, openPresetList, openPersonaList, MobileGUI, CustomGUISettingMenuStore } from './ts/stores';
-    import { DataBase, loadedStore } from './ts/storage/database';
+    import { DataBase, loadedStore } from './ts/storage/database.svelte';
     import ChatScreen from './lib/ChatScreens/ChatScreen.svelte';
     import AlertComp from './lib/Others/AlertComp.svelte';
     import RealmPopUp from './lib/UI/Realm/RealmPopUp.svelte';
diff --git a/src/lib/ChatScreens/AdvancedChatEditor.svelte b/src/lib/ChatScreens/AdvancedChatEditor.svelte
index 7abffe4d..e5948176 100644
--- a/src/lib/ChatScreens/AdvancedChatEditor.svelte
+++ b/src/lib/ChatScreens/AdvancedChatEditor.svelte
@@ -1,7 +1,7 @@
 <script>
     import { onMount, createEventDispatcher } from 'svelte';
     import { EditIcon, LanguagesIcon } from "lucide-svelte";
-    import { DataBase } from "../../ts/storage/database";
+    import { DataBase, DBState } from "../../ts/storage/database.svelte";
     import CodeMirror from 'codemirror';
     import 'codemirror/lib/codemirror.css';
 
@@ -9,7 +9,7 @@
     let { value = $bindable(), translate = $bindable() } = $props();
 
     const dispatch = createEventDispatcher();
-    let toggleTranslate = $state(!$DataBase.useAutoTranslateInput);
+    let toggleTranslate = $state(!DBState.db.useAutoTranslateInput);
     let velement = $state(), veditor = $state();
     let telement = $state(), teditor = $state();
     let _value = $state(value);
@@ -111,7 +111,7 @@
 </script>
 
 <div class="flex flex-1 items-end ml-2 mr-2">
-    {#if $DataBase.useAutoTranslateInput}
+    {#if DBState.db.useAutoTranslateInput}
         <button 
             onclick={toggleTranslateText}
             class="mr-2 bg-textcolor2 flex justify-center items-center text-gray-100 w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
diff --git a/src/lib/ChatScreens/AssetInput.svelte b/src/lib/ChatScreens/AssetInput.svelte
index 7d751712..57c53a16 100644
--- a/src/lib/ChatScreens/AssetInput.svelte
+++ b/src/lib/ChatScreens/AssetInput.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { get } from 'svelte/store';
     import { FileAudioIcon, PlusIcon } from "lucide-svelte";
-    import { DataBase, setDatabase, type character, type groupChat } from "src/ts/storage/database";
+    import { DataBase, setDatabase, type character, type groupChat } from "src/ts/storage/database.svelte";
     import { getFileSrc, saveAsset } from "src/ts/storage/globalApi";
     import { selectMultipleFile } from "src/ts/util";
     interface Props {
diff --git a/src/lib/ChatScreens/BackgroundDom.svelte b/src/lib/ChatScreens/BackgroundDom.svelte
index eec66325..8792ef38 100644
--- a/src/lib/ChatScreens/BackgroundDom.svelte
+++ b/src/lib/ChatScreens/BackgroundDom.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { ParseMarkdown, risuChatParser } from "src/ts/parser";
-    import { DataBase, type Database, type character, type groupChat } from "src/ts/storage/database";
+    import { DataBase, type Database, type character, type groupChat } from "src/ts/storage/database.svelte";
     import { moduleBackgroundEmbedding, ReloadGUIPointer, selectedCharID } from "src/ts/stores";
     import { onDestroy } from "svelte";
 
diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index 9ae07da3..fd7aa5c7 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -4,7 +4,7 @@
     import AutoresizeArea from "../UI/GUI/TextAreaResizable.svelte";
     import { alertConfirm, alertError, alertRequestData } from "../../ts/alert";
     import { language } from "../../lang";
-    import { DataBase, type MessageGenerationInfo } from "../../ts/storage/database";
+    import { DBState, type MessageGenerationInfo } from "../../ts/storage/database.svelte";
     import { HideIconStore, ReloadGUIPointer, selectedCharID } from "../../ts/stores";
     import { translateHTML } from "../../ts/translator/translator";
     import { risuChatParser } from "src/ts/process/scripts";
@@ -19,7 +19,7 @@
     import { onDestroy, onMount } from "svelte";
     let translating = $state(false)
     try {
-        translating = get(DataBase).autoTranslate                
+        translating = DBState.db.autoTranslate                
     } catch (error) {}
     let editMode = $state(false)
     let statusMessage:string = $state('')
@@ -56,46 +56,46 @@
     }: Props = $props();
 
     let msgDisplay = $state('')
-    let translated = $state(get(DataBase).autoTranslate)
+    let translated = $state(DBState.db.autoTranslate)
     async function rm(e:MouseEvent, rec?:boolean){
         if(e.shiftKey){
-            let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
+            let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
             msg = msg.slice(0, idx)
-            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
+            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
             return
         }
 
-        const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true
+        const rm = DBState.db.askRemoval ? await alertConfirm(language.removeChat) : true
         if(rm){
-            if($DataBase.instantRemove || rec){
+            if(DBState.db.instantRemove || rec){
                 const r = await alertConfirm(language.instantRemoveConfirm)
-                let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
+                let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
                 if(!r){
                     msg = msg.slice(0, idx)
                 }
                 else{
                     msg.splice(idx, 1)
                 }
-                $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
+                DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
             }
             else{
-                let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
+                let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
                 msg.splice(idx, 1)
-                $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
+                DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
             }
         }
     }
 
     async function edit(){
-        let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
+        let msg = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
         msg[idx].data = message
-        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
+        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msg
     }
 
     function getCbsCondition(){
         const cbsConditions:CbsConditions = {
             firstmsg: firstMessage ?? false,
-            chatRole: $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]?.message?.[idx]?.role ?? null,
+            chatRole: DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]?.message?.[idx]?.role ?? null,
         }
         return cbsConditions
     }
@@ -130,14 +130,14 @@
                 lastChatId = chatID
                 translateText = false
                 try {
-                    translated = get(DataBase).autoTranslate
+                    translated = DBState.db.autoTranslate
                     if(translated){
                         translateText = true
                     }
                 } catch (error) {}
             }
             if(translateText){
-                if(!$DataBase.legacyTranslation){
+                if(!DBState.db.legacyTranslation){
                     const marked = await ParseMarkdown(data, charArg, 'pretranslate', chatID, getCbsCondition())
                     translating = true
                     const translated = await postTranslationParse(await translateHTML(marked, false, charArg, chatID))
@@ -192,12 +192,12 @@
         unsubscribers.forEach(u => u())
     })
 </script>
-<div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${$DataBase.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
+<div class="flex max-w-full justify-center risu-chat" style={isLastMemory ? `border-top:${DBState.db.memoryLimitThickness}px solid rgba(98, 114, 164, 0.7);` : ''}>
     <div class="text-textcolor mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
         {#if !blankMessage && !$HideIconStore}
-            {#if $DataBase.characters[$selectedCharID]?.chaId === "§playground"}
-                <div class="shadow-lg border-textcolor2 border mt-2 flex justify-center items-center text-textcolor2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}>
+            {#if DBState.db.characters[$selectedCharID]?.chaId === "§playground"}
+                <div class="shadow-lg border-textcolor2 border mt-2 flex justify-center items-center text-textcolor2" style={`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
+                class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}>
                     {#if name === 'assistant'}
                         <BotIcon />
                     {:else}
@@ -206,27 +206,27 @@
                 </div>
             {:else}
                 {#await img}
-                    <div class="shadow-lg bg-textcolor2 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                    class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}></div>
+                    <div class="shadow-lg bg-textcolor2 mt-2" style={`height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
+                    class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
                 {:then m}
-                    {#if largePortrait && (!$DataBase.roundIcons)}
-                        <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100 / 0.75}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}></div>
+                    {#if largePortrait && (!DBState.db.roundIcons)}
+                        <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${DBState.db.iconsize * 3.5 / 100 / 0.75}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
+                        class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
                     {:else}
-                        <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem;min-width:${$DataBase.iconsize * 3.5 / 100}rem`}
-                        class:rounded-md={!$DataBase.roundIcons} class:rounded-full={$DataBase.roundIcons}></div>
+                        <div class="shadow-lg bg-textcolor2 mt-2" style={m + `height:${DBState.db.iconsize * 3.5 / 100}rem;width:${DBState.db.iconsize * 3.5 / 100}rem;min-width:${DBState.db.iconsize * 3.5 / 100}rem`}
+                        class:rounded-md={!DBState.db.roundIcons} class:rounded-full={DBState.db.roundIcons}></div>
                     {/if}
                 {/await}
             {/if}
         {/if}
         <span class="flex flex-col ml-4 w-full max-w-full min-w-0">
             <div class="flexium items-center chat">
-                {#if $DataBase.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
+                {#if DBState.db.characters[$selectedCharID]?.chaId === "§playground" && !blankMessage}
                     <span class="chat text-xl border-darkborderc flex items-center">
                         <span>{name === 'assistant' ? 'Assistant' : 'User'}</span>
                         <button class="ml-2 text-textcolor2 hover:text-textcolor" onclick={() => {
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[idx].role = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage] = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[idx].role === 'char' ? 'user' : 'char'
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
                         }}><ArrowLeftRightIcon size="18" /></button>
                     </span>
                 {:else if !blankMessage && !$HideIconStore}
@@ -234,7 +234,7 @@
                 {/if}
                 <div class="flex-grow flex items-center justify-end text-textcolor2">
                     <span class="text-xs">{statusMessage}</span>
-                    {#if $DataBase.useChatCopy && !blankMessage}
+                    {#if DBState.db.useChatCopy && !blankMessage}
                         <button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
                             window.navigator.clipboard.writeText(msgDisplay).then(() => {
                                 setStatusMessage(language.copied)
@@ -244,7 +244,7 @@
                         </button>    
                     {/if}
                     {#if idx > -1}
-                        {#if $DataBase.characters[$selectedCharID].type !== 'group' && $DataBase.characters[$selectedCharID].ttsMode !== 'none' && ($DataBase.characters[$selectedCharID].ttsMode)}
+                        {#if DBState.db.characters[$selectedCharID].type !== 'group' && DBState.db.characters[$selectedCharID].ttsMode !== 'none' && (DBState.db.characters[$selectedCharID].ttsMode)}
                             <button class="ml-2 hover:text-green-500 transition-colors" onclick={()=>{
                                 return sayTTS(null, message)
                             }}>
@@ -269,7 +269,7 @@
                             </button>
                         {/if}
                     {/if}
-                    {#if $DataBase.translator !== '' && !blankMessage}
+                    {#if DBState.db.translator !== '' && !blankMessage}
                         <button class={"ml-2 cursor-pointer hover:text-green-500 transition-colors " + (translated ? 'text-green-400':'')} class:translating={translating} onclick={async () => {
                             translated = !translated
                         }}>
@@ -277,7 +277,7 @@
                         </button>
                     {/if}
                     {#if rerollIcon || altGreeting}
-                        {#if $DataBase.swipe || altGreeting}
+                        {#if DBState.db.swipe || altGreeting}
                             <button class="ml-2 hover:text-green-500 transition-colors" onclick={unReroll}>
                                 <ArrowLeft size={22}/>
                             </button>
@@ -292,7 +292,7 @@
                     {/if}
                 </div>
             </div>
-            {#if messageGenerationInfo && $DataBase.requestInfoInsideChat}
+            {#if messageGenerationInfo && DBState.db.requestInfoInsideChat}
                 <div>
                     <button class="text-sm p-1 text-textcolor2 border-darkborderc float-end mr-2 my-2
                                     hover:ring-darkbutton hover:ring rounded-md hover:text-textcolor transition-all flex justify-center items-center" 
@@ -321,12 +321,12 @@
             {:else}
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <span class="text chat chattext prose minw-0" class:prose-invert={$ColorSchemeTypeStore} onclick={() => {
-                    if($DataBase.clickToEdit && idx > -1){
+                    if(DBState.db.clickToEdit && idx > -1){
                         editMode = true
                     }
                 }}
-                    style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
-                    style:line-height="{($DataBase.lineHeight ?? 1.25) * ($DataBase.zoomsize / 100)}rem"
+                    style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
+                    style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
                 >
                     {#key $ReloadGUIPointer}
                         {#await markParsing(msgDisplay, character, 'normal', idx, translated)}
diff --git a/src/lib/ChatScreens/ChatScreen.svelte b/src/lib/ChatScreens/ChatScreen.svelte
index fa92f0a4..6a117129 100644
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getCustomBackground, getEmotion } from "../../ts/util";
-    import { DataBase } from "../../ts/storage/database";
+    import { DBState } from "../../ts/storage/database.svelte";
     import { CharEmotion, ShowVN, selectedCharID } from "../../ts/stores";
     import ResizeBox from './ResizeBox.svelte'
     import DefaultChatScreen from "./DefaultChatScreen.svelte";
@@ -16,17 +16,17 @@
 
     const wallPaper = `background: url(${defaultWallpaper})`
     const externalStyles = 
-            ("background: " + ($DataBase.textScreenColor ? ($DataBase.textScreenColor + '80') : "rgba(0,0,0,0.8)") + ';\n')
-        +   ($DataBase.textBorder ? "text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;" : '')
-        +   ($DataBase.textScreenRounded ? "border-radius: 2rem; padding: 1rem;" : '')
-        +   ($DataBase.textScreenBorder ? `border: 0.3rem solid ${$DataBase.textScreenBorder};` : '')
+            ("background: " + (DBState.db.textScreenColor ? (DBState.db.textScreenColor + '80') : "rgba(0,0,0,0.8)") + ';\n')
+        +   (DBState.db.textBorder ? "text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;" : '')
+        +   (DBState.db.textScreenRounded ? "border-radius: 2rem; padding: 1rem;" : '')
+        +   (DBState.db.textScreenBorder ? `border: 0.3rem solid ${DBState.db.textScreenBorder};` : '')
     let bgImg= $state('')
     let lastBg = $state('')
     $effect.pre(() => {
         (async () =>{
-            if($DataBase.customBackground !== lastBg){
-                lastBg = $DataBase.customBackground
-                bgImg = await getCustomBackground($DataBase.customBackground)
+            if(DBState.db.customBackground !== lastBg){
+                lastBg = DBState.db.customBackground
+                bgImg = await getCustomBackground(DBState.db.customBackground)
             }
         })()
     });
@@ -34,48 +34,48 @@
 
 {#if $ShowVN}
     <VisualNovelMain />
-{:else if $DataBase.theme === ''}
+{:else if DBState.db.theme === ''}
     <div class="flex-grow h-full min-w-0 relative justify-center flex">
         <SideBarArrow />
         <BackgroundDom />
-        <div style={bgImg} class="h-full w-full" class:max-w-6xl={$DataBase.classicMaxWidth}>
+        <div style={bgImg} class="h-full w-full" class:max-w-6xl={DBState.db.classicMaxWidth}>
             {#if $selectedCharID >= 0}
-                {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none' && ($DataBase.characters[$selectedCharID].type === 'group' || (!$DataBase.characters[$selectedCharID].inlayViewScreen))}
+                {#if DBState.db.characters[$selectedCharID].viewScreen !== 'none' && (DBState.db.characters[$selectedCharID].type === 'group' || (!DBState.db.characters[$selectedCharID].inlayViewScreen))}
                     <ResizeBox />
                 {/if}
             {/if}
             <DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList bind:openModuleList/>
         </div>
     </div>
-{:else if $DataBase.theme === 'waifu'}
+{:else if DBState.db.theme === 'waifu'}
     <div class="flex-grow h-full flex justify-center relative" style="{bgImg.length < 4 ? wallPaper : bgImg}">
         <SideBarArrow />
         <BackgroundDom />
         {#if $selectedCharID >= 0}
-            {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
-                <div class="h-full mr-10 flex justify-end halfw" style:width="{42 * ($DataBase.waifuWidth2 / 100)}rem">
-                    <TransitionImage classType="waifu" src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
+            {#if DBState.db.characters[$selectedCharID].viewScreen !== 'none'}
+                <div class="h-full mr-10 flex justify-end halfw" style:width="{42 * (DBState.db.waifuWidth2 / 100)}rem">
+                    <TransitionImage classType="waifu" src={getEmotion(DBState.db, $CharEmotion, 'plain')}/>
                 </div>
             {/if}
         {/if}
-        <div class="h-full w-2xl" style:width="{42 * ($DataBase.waifuWidth / 100)}rem" class:halfwp={$selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none'}>
+        <div class="h-full w-2xl" style:width="{42 * (DBState.db.waifuWidth / 100)}rem" class:halfwp={$selectedCharID >= 0 && DBState.db.characters[$selectedCharID].viewScreen !== 'none'}>
             <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList bind:openModuleList/>
         </div>
     </div>
-{:else if $DataBase.theme === 'waifuMobile'}
+{:else if DBState.db.theme === 'waifuMobile'}
     <div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
         <SideBarArrow />
         <BackgroundDom />
         <div class="w-full absolute z-10 bottom-0 left-0"
-            class:per33={$selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
-            class:h-full={!($selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none')}
+            class:per33={$selectedCharID >= 0 && DBState.db.characters[$selectedCharID].viewScreen !== 'none'}
+            class:h-full={!($selectedCharID >= 0 && DBState.db.characters[$selectedCharID].viewScreen !== 'none')}
         >
             <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList bind:openModuleList/>
         </div>
         {#if $selectedCharID >= 0}
-            {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
+            {#if DBState.db.characters[$selectedCharID].viewScreen !== 'none'}
                 <div class="h-full w-full absolute bottom-0 left-0 max-w-full">
-                    <TransitionImage classType="mobile" src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
+                    <TransitionImage classType="mobile" src={getEmotion(DBState.db, $CharEmotion, 'plain')}/>
                 </div>
             {/if}
         {/if}
diff --git a/src/lib/ChatScreens/DefaultChatScreen.svelte b/src/lib/ChatScreens/DefaultChatScreen.svelte
index 7afd7d8f..37a91ed1 100644
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -5,7 +5,7 @@
     import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, PackageIcon, Plus, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
     import { selectedCharID, CurrentShowMemoryLimit, PlaygroundStore, UserIconProtrait, createSimpleCharacter } from "../../ts/stores";
     import Chat from "./Chat.svelte";
-    import { DataBase, type Message, type character, type groupChat } from "../../ts/storage/database";
+    import { DBState, type Message, type character, type groupChat } from "../../ts/storage/database.svelte";
     import { getCharImage } from "../../ts/characters";
     import { chatProcessStage, doingChat, sendChat } from "../../ts/process/index";
     import { findCharacterbyId, messageForm, sleep } from "../../ts/util";
@@ -37,7 +37,7 @@
     let rerollid = -1
     let lastCharId = -1
     let doingChatInputTranslate = false
-    let currentCharacter:character|groupChat = $state($DataBase.characters[$selectedCharID])
+    let currentCharacter:character|groupChat = $state(DBState.db.characters[$selectedCharID])
     let toggleStickers:boolean = $state(false)
     let fileInput:string[] = $state([])
 
@@ -58,7 +58,7 @@
             rerollid = -1
         }
 
-        let cha = $DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message
+        let cha = DBState.db.characters[selectedChar].chats[DBState.db.characters[selectedChar].chatPage].message
 
         if(messageInput.startsWith('/')){
             const commandProcessed = await processMultiCommand(messageInput)
@@ -76,20 +76,20 @@
         }
 
         if(messageInput === ''){
-            if($DataBase.characters[selectedChar].type !== 'group'){
+            if(DBState.db.characters[selectedChar].type !== 'group'){
                 if(cha.length === 0 || cha[cha.length - 1].role !== 'user'){
-                    if($DataBase.useSayNothing){
+                    if(DBState.db.useSayNothing){
                         cha.push({
                             role: 'user',
                             data: '*says nothing*',
-                            name: $ConnectionOpenStore ? $DataBase.username : null
+                            name: $ConnectionOpenStore ? DBState.db.username : null
                         })
                     }
                 }
             }
         }
         else{
-            const char = $DataBase.characters[selectedChar]
+            const char = DBState.db.characters[selectedChar]
             if(char.type === 'character'){
                 let triggerResult = await runTrigger(char,'input', {chat: char.chats[char.chatPage]})
                 if(triggerResult){
@@ -100,7 +100,7 @@
                     role: 'user',
                     data: await processScript(char,messageInput,'editinput'),
                     time: Date.now(),
-                    name: $ConnectionOpenStore ? $DataBase.username : null
+                    name: $ConnectionOpenStore ? DBState.db.username : null
                 })
             }
             else{
@@ -108,13 +108,13 @@
                     role: 'user',
                     data: messageInput,
                     time: Date.now(),
-                    name: $ConnectionOpenStore ? $DataBase.username : null
+                    name: $ConnectionOpenStore ? DBState.db.username : null
                 })
             }
         }
         messageInput = ''
         messageInputTranslate = ''
-        $DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message = cha
+        DBState.db.characters[selectedChar].chats[DBState.db.characters[selectedChar].chatPage].message = cha
         rerolls = []
         await sleep(10)
         updateInputSizeAll()
@@ -130,33 +130,33 @@
             rerolls = []
             rerollid = -1
         }
-        const genId = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.at(-1)?.generationInfo?.generationId
+        const genId = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.at(-1)?.generationInfo?.generationId
         if(genId){
             const r = Prereroll(genId)
             if(r){
-                $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length - 1].data = r
+                DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length - 1].data = r
                 return
             }
         }
         if(rerollid < rerolls.length - 1){
             if(Array.isArray(rerolls[rerollid + 1])){
-                let db = $DataBase
+                let db = DBState.db
                 rerollid += 1
                 let rerollData = structuredClone(rerolls[rerollid])
-                let msgs = db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
+                let msgs = db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
                 for(let i = 0; i < rerollData.length; i++){
                     msgs[msgs.length - rerollData.length + i] = rerollData[i]
                 }
-                db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msgs
-                $DataBase = db
+                db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msgs
+                DBState.db = db
             }
             return
         }
         if(rerolls.length === 0){
-            rerolls.push(structuredClone([$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.at(-1)]))
+            rerolls.push(structuredClone([DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.at(-1)]))
             rerollid = rerolls.length - 1
         }
-        let cha = structuredClone($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message)
+        let cha = structuredClone(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message)
         if(cha.length === 0 ){
             return
         }
@@ -175,7 +175,7 @@
                 return
             }
         }
-        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cha
+        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = cha
         await sendChatMain()
     }
 
@@ -187,11 +187,11 @@
             rerolls = []
             rerollid = -1
         }
-        const genId = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.at(-1)?.generationInfo?.generationId
+        const genId = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.at(-1)?.generationInfo?.generationId
         if(genId){
             const r = PreUnreroll(genId)
             if(r){
-                $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length - 1].data = r
+                DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length - 1].data = r
                 return
             }
         }
@@ -199,15 +199,15 @@
             return
         }
         if(Array.isArray(rerolls[rerollid - 1])){
-            let db = $DataBase
+            let db = DBState.db
             rerollid -= 1
             let rerollData = structuredClone(rerolls[rerollid])
-            let msgs = db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
+            let msgs = db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message
             for(let i = 0; i < rerollData.length; i++){
                 msgs[msgs.length - rerollData.length + i] = rerollData[i]
             }
-            db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msgs
-            $DataBase = db
+            db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message = msgs
+            DBState.db = db
         }
     }
 
@@ -215,7 +215,7 @@
 
     async function sendChatMain(continued:boolean = false) {
 
-        let previousLength = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length
+        let previousLength = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length
         messageInput = ''
         abortController = new AbortController()
         try {
@@ -223,8 +223,8 @@
                 signal:abortController.signal,
                 continue:continued
             })
-            if(previousLength < $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length){
-                rerolls.push(structuredClone($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message).slice(previousLength))
+            if(previousLength < DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length){
+                rerolls.push(structuredClone(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message).slice(previousLength))
                 rerollid = rerolls.length - 1
             }
         } catch (error) {
@@ -233,7 +233,7 @@
         }
         lastCharId = $selectedCharID
         $doingChat = false
-        if($DataBase.playMessage){
+        if(DBState.db.playMessage){
             const audio = new Audio(sendSound);
             audio.play();
         }
@@ -396,7 +396,7 @@
     }
 
     $effect.pre(() => {
-        currentCharacter = $DataBase.characters[$selectedCharID]
+        currentCharacter = DBState.db.characters[$selectedCharID]
     });
 </script>
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -414,25 +414,25 @@
         <div class="h-full w-full flex flex-col-reverse overflow-y-auto relative default-chat-screen"  onscroll={(e) => {
             //@ts-ignore  
             const scrolled = (e.target.scrollHeight - e.target.clientHeight + e.target.scrollTop)
-            if(scrolled < 100 && $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length > loadPages){
+            if(scrolled < 100 && DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length > loadPages){
                 loadPages += 15
             }
         }}>
             <div class="flex items-stretch mt-2 mb-2 w-full">
-                {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
+                {#if DBState.db.useChatSticker && currentCharacter.type !== 'group'}
                     <div onclick={()=>{toggleStickers = !toggleStickers}}
                             class={"ml-4 bg-textcolor2 flex justify-center items-center  w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-textcolor')}>
                             <Laugh/>
                     </div>    
                 {/if}
 
-                {#if !$DataBase.useAdvancedEditor}
+                {#if !DBState.db.useAdvancedEditor}
                 <textarea class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full"
                     bind:value={messageInput}
                     bind:this={inputEle}
                     onkeydown={(e) => {
                         if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey) && !e.isComposing){
-                            if($DataBase.sendWithEnter){
+                            if(DBState.db.sendWithEnter){
                                 send()
                                 e.preventDefault()
                             }
@@ -469,7 +469,7 @@
                         <Send />
                     </button>
                 {/if}
-                {#if $DataBase.characters[$selectedCharID]?.chaId !== '§playground'}
+                {#if DBState.db.characters[$selectedCharID]?.chaId !== '§playground'}
                     <button
                         onclick={(e) => {
                             openMenu = !openMenu
@@ -482,11 +482,11 @@
                     </button>
                 {:else}
                     <div onclick={(e) => {
-                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.push({
+                        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.push({
                             role: 'char',
                             data: ''
                         })
-                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage] = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]
+                        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
                     }}
                         class="peer-focus:border-textcolor mr-2 flex border-y border-r border-darkborderc justify-center items-center text-gray-100 p-3 rounded-r-md hover:bg-blue-500 transition-colors"
                         style:height={inputHeight}
@@ -495,7 +495,7 @@
                     </div>
                 {/if}
             </div>
-            {#if $DataBase.useAutoTranslateInput && !$DataBase.useAdvancedEditor && $DataBase.characters[$selectedCharID]?.chaId !== '§playground'}
+            {#if DBState.db.useAutoTranslateInput && !DBState.db.useAdvancedEditor && DBState.db.characters[$selectedCharID]?.chaId !== '§playground'}
                 <div class="flex items-center mt-2 mb-2">
                     <label for='messageInputTranslate' class="text-textcolor ml-4">
                         <LanguagesIcon />
@@ -505,7 +505,7 @@
                         bind:this={inputTranslateEle}
                         onkeydown={(e) => {
                             if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
-                                if($DataBase.sendWithEnter){
+                                if(DBState.db.sendWithEnter){
                                     send()
                                     e.preventDefault()
                                 }
@@ -550,28 +550,28 @@
                 </div>    
             {/if}
 
-            {#if $DataBase.useAutoSuggestions}
+            {#if DBState.db.useAutoSuggestions}
                 <Suggestion messageInput={(msg)=>messageInput=(
-                    ($DataBase.subModel === "textgen_webui" || $DataBase.subModel === "mancer" || $DataBase.subModel.startsWith('local_')) && $DataBase.autoSuggestClean
+                    (DBState.db.subModel === "textgen_webui" || DBState.db.subModel === "mancer" || DBState.db.subModel.startsWith('local_')) && DBState.db.autoSuggestClean
                     ? msg.replace(/ +\(.+?\) *$| - [^"'*]*?$/, '')
                     : msg
                 )} {send}/>
             {/if}
             
-            {#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
+            {#each messageForm(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
                 {#if chat.role === 'char'}
-                    {#if $DataBase.characters[$selectedCharID].type !== 'group'}
+                    {#if DBState.db.characters[$selectedCharID].type !== 'group'}
                         <Chat
                             idx={chat.index}
-                            name={$DataBase.characters[$selectedCharID].name} 
+                            name={DBState.db.characters[$selectedCharID].name} 
                             message={chat.data}
-                            img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
+                            img={getCharImage(DBState.db.characters[$selectedCharID].image, 'css')}
                             rerollIcon={i === 0}
                             onReroll={reroll}
                             unReroll={unReroll}
-                            isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
-                            character={createSimpleCharacter($DataBase.characters[$selectedCharID])}
-                            largePortrait={$DataBase.characters[$selectedCharID].largePortrait}
+                            isLastMemory={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
+                            character={createSimpleCharacter(DBState.db.characters[$selectedCharID])}
+                            largePortrait={DBState.db.characters[$selectedCharID].largePortrait}
                             messageGenerationInfo={chat.generationInfo}
                         />
                     {:else}
@@ -583,7 +583,7 @@
                             onReroll={reroll}
                             unReroll={unReroll}
                             img={getCharImage(findCharacterbyId(chat.saying).image, 'css')}
-                            isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
+                            isLastMemory={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                             character={chat.saying}
                             largePortrait={findCharacterbyId(chat.saying).largePortrait}
                             messageGenerationInfo={chat.generationInfo}
@@ -591,32 +591,32 @@
                     {/if}
                 {:else}
                     <Chat
-                        character={createSimpleCharacter($DataBase.characters[$selectedCharID])}
+                        character={createSimpleCharacter(DBState.db.characters[$selectedCharID])}
                         idx={chat.index}
-                        name={chat.name ?? $DataBase.username} 
+                        name={chat.name ?? DBState.db.username} 
                         message={chat.data}
-                        img={$ConnectionOpenStore ? '' : getCharImage($DataBase.userIcon, 'css')}
-                        isLastMemory={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
+                        img={$ConnectionOpenStore ? '' : getCharImage(DBState.db.userIcon, 'css')}
+                        isLastMemory={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].lastMemory === (chat.chatId ?? 'none') && $CurrentShowMemoryLimit}
                         largePortrait={$UserIconProtrait}
                         messageGenerationInfo={chat.generationInfo}
                     />
                 {/if}
             {/each}
-            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
-                {#if $DataBase.characters[$selectedCharID].type !== 'group' }
+            {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length <= loadPages}
+                {#if DBState.db.characters[$selectedCharID].type !== 'group' }
                     <Chat
-                        character={createSimpleCharacter($DataBase.characters[$selectedCharID])}
-                        name={$DataBase.characters[$selectedCharID].name}
-                        message={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].fmIndex === -1 ? $DataBase.characters[$selectedCharID].firstMessage :
-                            $DataBase.characters[$selectedCharID].alternateGreetings[$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].fmIndex]}
-                        img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
+                        character={createSimpleCharacter(DBState.db.characters[$selectedCharID])}
+                        name={DBState.db.characters[$selectedCharID].name}
+                        message={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].fmIndex === -1 ? DBState.db.characters[$selectedCharID].firstMessage :
+                            DBState.db.characters[$selectedCharID].alternateGreetings[DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].fmIndex]}
+                        img={getCharImage(DBState.db.characters[$selectedCharID].image, 'css')}
                         idx={-1}
-                        altGreeting={$DataBase.characters[$selectedCharID].alternateGreetings.length > 0}
-                        largePortrait={$DataBase.characters[$selectedCharID].largePortrait}
+                        altGreeting={DBState.db.characters[$selectedCharID].alternateGreetings.length > 0}
+                        largePortrait={DBState.db.characters[$selectedCharID].largePortrait}
                         firstMessage={true}
                         onReroll={() => {
-                            const cha = $DataBase.characters[$selectedCharID]
-                            const chat = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]
+                            const cha = DBState.db.characters[$selectedCharID]
+                            const chat = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
                             if(cha.type !== 'group'){
                                 if (chat.fmIndex >= (cha.alternateGreetings.length - 1)){
                                     chat.fmIndex = -1
@@ -625,11 +625,11 @@
                                     chat.fmIndex += 1
                                 }
                             }
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage] = chat
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = chat
                         }}
                         unReroll={() => {
-                            const cha = $DataBase.characters[$selectedCharID]
-                            const chat = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage]
+                            const cha = DBState.db.characters[$selectedCharID]
+                            const chat = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage]
                             if(cha.type !== 'group'){
                                 if (chat.fmIndex === -1){
                                     chat.fmIndex = (cha.alternateGreetings.length - 1)
@@ -638,18 +638,18 @@
                                     chat.fmIndex -= 1
                                 }
                             }
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage] = chat
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage] = chat
                         }}
                         isLastMemory={false}
 
                     />
-                    {#if !$DataBase.characters[$selectedCharID].removedQuotes && $DataBase.characters[$selectedCharID].creatorNotes.length >= 2}
-                        <CreatorQuote quote={$DataBase.characters[$selectedCharID].creatorNotes} onRemove={() => {
-                            const cha = $DataBase.characters[$selectedCharID]
+                    {#if !DBState.db.characters[$selectedCharID].removedQuotes && DBState.db.characters[$selectedCharID].creatorNotes.length >= 2}
+                        <CreatorQuote quote={DBState.db.characters[$selectedCharID].creatorNotes} onRemove={() => {
+                            const cha = DBState.db.characters[$selectedCharID]
                             if(cha.type !== 'group'){
                                 cha.removedQuotes = true
                             }
-                            $DataBase.characters[$selectedCharID] = cha
+                            DBState.db.characters[$selectedCharID] = cha
                         }} />
                     {/if}
                 {/if}
@@ -659,7 +659,7 @@
                 <div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-textcolor rounded-md" onclick={(e) => {
                     e.stopPropagation()
                 }}>
-                    {#if $DataBase.characters[$selectedCharID].type === 'group'}
+                    {#if DBState.db.characters[$selectedCharID].type === 'group'}
                         <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" onclick={runAutoMode}>
                             <DicesIcon />
                             <span class="ml-2">{language.autoMode}</span>
@@ -668,7 +668,7 @@
 
                     
                     <!-- svelte-ignore block_empty -->
-                    {#if $DataBase.characters[$selectedCharID].ttsMode === 'webspeech' || $DataBase.characters[$selectedCharID].ttsMode === 'elevenlab'}
+                    {#if DBState.db.characters[$selectedCharID].ttsMode === 'webspeech' || DBState.db.characters[$selectedCharID].ttsMode === 'elevenlab'}
                         <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" onclick={() => {
                             stopTTS()
                         }}>
@@ -678,9 +678,9 @@
                     {/if}
 
                     <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors"
-                        class:text-textcolor2={($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length < 2) || ($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length - 1].role !== 'char')}
+                        class:text-textcolor2={(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length < 2) || (DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length - 1].role !== 'char')}
                         onclick={() => {
-                            if(($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length < 2) || ($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length - 1].role !== 'char')){
+                            if((DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length < 2) || (DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message.length - 1].role !== 'char')){
                                 return
                             }
                             sendContinue();
@@ -691,7 +691,7 @@
                     </div>
 
 
-                    {#if $DataBase.showMenuChatList}
+                    {#if DBState.db.showMenuChatList}
                         <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" onclick={() => {
                             openChatList = true
                             openMenu = false
@@ -701,9 +701,9 @@
                         </div>
                     {/if}
                     
-                    {#if $DataBase.translator !== ''}
-                        <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoTranslateInput ? 'text-green-500':'lg:hover:text-green-500')} onclick={() => {
-                            $DataBase.useAutoTranslateInput = !$DataBase.useAutoTranslateInput
+                    {#if DBState.db.translator !== ''}
+                        <div class={"flex items-center cursor-pointer "+ (DBState.db.useAutoTranslateInput ? 'text-green-500':'lg:hover:text-green-500')} onclick={() => {
+                            DBState.db.useAutoTranslateInput = !DBState.db.useAutoTranslateInput
                         }}>
                             <GlobeIcon />
                             <span class="ml-2">{language.autoTranslateInput}</span>
@@ -734,8 +734,8 @@
                     </div>
 
 
-                    <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} onclick={async () => {
-                        $DataBase.useAutoSuggestions = !$DataBase.useAutoSuggestions
+                    <div class={"flex items-center cursor-pointer "+ (DBState.db.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} onclick={async () => {
+                        DBState.db.useAutoSuggestions = !DBState.db.useAutoSuggestions
                     }}>
                         <ReplyIcon />
                         <span class="ml-2">{language.autoSuggest}</span>
@@ -743,7 +743,7 @@
 
 
                     <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" onclick={() => {
-                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules ??= []
+                        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules ??= []
                         openModuleList = true
                         openMenu = false
                     }}>
@@ -751,7 +751,7 @@
                         <span class="ml-2">{language.modules}</span>
                     </div>
 
-                    {#if $DataBase.sideMenuRerollButton}
+                    {#if DBState.db.sideMenuRerollButton}
                         <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" onclick={reroll}>
                             <RefreshCcwIcon />
                             <span class="ml-2">{language.reroll}</span>
diff --git a/src/lib/ChatScreens/EmotionBox.svelte b/src/lib/ChatScreens/EmotionBox.svelte
index 5297b83d..924dab51 100644
--- a/src/lib/ChatScreens/EmotionBox.svelte
+++ b/src/lib/ChatScreens/EmotionBox.svelte
@@ -1,10 +1,10 @@
 <script>
-    import { DataBase } from '../../ts/storage/database';
+    import { DBState } from '../../ts/storage/database.svelte';
     import { CharEmotion } from '../../ts/stores';
     import { getEmotion } from '../../ts/util';
 </script>
 
-{#await getEmotion($DataBase,$CharEmotion, 'contain') then images}
+{#await getEmotion(DBState.db,$CharEmotion, 'contain') then images}
     {#each images as image, i}
     <div style={image + `width:${(100 / images.length)}%;bottom:0;left:${100 / images.length * i}%`} class="h-full bg-center absolute"></div>
 
diff --git a/src/lib/ChatScreens/ResizeBox.svelte b/src/lib/ChatScreens/ResizeBox.svelte
index ea11aa3a..477ec148 100644
--- a/src/lib/ChatScreens/ResizeBox.svelte
+++ b/src/lib/ChatScreens/ResizeBox.svelte
@@ -4,7 +4,7 @@
     import EmotionBox from './EmotionBox.svelte';
     import TransitionImage from './TransitionImage.svelte';
     import { getEmotion } from '../../ts/util';
-    import { DataBase } from '../../ts/storage/database';
+    import { DBState } from '../../ts/storage/database.svelte';
 
     let box = $state();
     let isResizing = false;
@@ -85,7 +85,7 @@
 
 <div class="box bg-darkbg bg-opacity-70" bind:this="{box}" style="width: {$ViewBoxsize.width}px; height: {$ViewBoxsize.height}px;">
     <!-- Your content here -->
-    <TransitionImage classType='risu' src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
+    <TransitionImage classType='risu' src={getEmotion(DBState.db, $CharEmotion, 'plain')}/>
     <div
       class="resize-handle"
       onmousedown={handleStart}
diff --git a/src/lib/ChatScreens/Suggestion.svelte b/src/lib/ChatScreens/Suggestion.svelte
index 1175e636..f4703dc1 100644
--- a/src/lib/ChatScreens/Suggestion.svelte
+++ b/src/lib/ChatScreens/Suggestion.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { requestChatData } from "src/ts/process/request";
     import { doingChat, type OpenAIChat } from "../../ts/process/index";
-    import { DataBase, setDatabase, type character, type Message, type groupChat, type Database } from "../../ts/storage/database";
+    import { DBState, setDatabase, type character, type Message, type groupChat, type Database } from "../../ts/storage/database.svelte";
     import { selectedCharID } from "../../ts/stores";
     import { translate } from "src/ts/translator/translator";
     import { CopyIcon, LanguagesIcon, RefreshCcwIcon } from "lucide-svelte";
@@ -18,9 +18,9 @@
     }
 
     let { send, messageInput }: Props = $props();
-    let suggestMessages:string[] = $state($DataBase.characters[$selectedCharID]?.chats[$DataBase.characters[$selectedCharID].chatPage]?.suggestMessages)
+    let suggestMessages:string[] = $state(DBState.db.characters[$selectedCharID]?.chats[DBState.db.characters[$selectedCharID].chatPage]?.suggestMessages)
     let suggestMessagesTranslated:string[] = $state()
-    let toggleTranslate:boolean = $state($DataBase.autoTranslate)
+    let toggleTranslate:boolean = $state(DBState.db.autoTranslate)
     let progress:boolean = $state();
     let progressChatPage=-1;
     let abortController:AbortController;
@@ -32,7 +32,7 @@
                 progress=false
                 abortController?.abort()
             }
-            let currentChar = $DataBase.characters[$selectedCharID];
+            let currentChar = DBState.db.characters[$selectedCharID];
             suggestMessages = currentChar?.chats[currentChar.chatPage].suggestMessages
         }
     }
@@ -45,7 +45,7 @@
             suggestMessages = []
         }
         if(!v && $selectedCharID > -1 && (!suggestMessages || suggestMessages.length === 0) && !progress){
-            let currentChar:character|groupChat = $DataBase.characters[$selectedCharID];
+            let currentChar:character|groupChat = DBState.db.characters[$selectedCharID];
             let messages:Message[] = []
             
             messages = [...messages, ...currentChar.chats[currentChar.chatPage].message];
@@ -55,7 +55,7 @@
             let promptbody:OpenAIChat[] = [
             {
                 role:'system',
-                content: replacePlaceholders($DataBase.autoSuggestPrompt, currentChar.name)
+                content: replacePlaceholders(DBState.db.autoSuggestPrompt, currentChar.name)
             }
             ,{
                 role: 'user', 
@@ -63,11 +63,11 @@
             }
             ]
 
-            if($DataBase.subModel === "textgen_webui" || $DataBase.subModel === 'mancer' || $DataBase.subModel.startsWith('local_')){
+            if(DBState.db.subModel === "textgen_webui" || DBState.db.subModel === 'mancer' || DBState.db.subModel.startsWith('local_')){
                 promptbody = [
                     {
                         role: 'system',
-                        content: replacePlaceholders($DataBase.autoSuggestPrompt, currentChar.name)
+                        content: replacePlaceholders(DBState.db.autoSuggestPrompt, currentChar.name)
                     },
                     ...lastMessages.map(({ role, data }) => ({
                         role: role === "user" ? "user" as const : "assistant" as const,
@@ -86,7 +86,7 @@
             }, 'submodel', abortController.signal).then(rq2=>{
                 if(rq2.type !== 'fail' && rq2.type !== 'streaming' && rq2.type !== 'multiline' && progress){
                     var suggestMessagesNew = rq2.result.split('\n').filter(msg => msg.startsWith('-')).map(msg => msg.replace('-','').trim())
-                    const db:Database = get(DataBase);
+                    const db:Database = DBState.db;
                     db.characters[$selectedCharID].chats[currentChar.chatPage].suggestMessages = suggestMessagesNew
                     setDatabase(db)
                     suggestMessages = suggestMessagesNew
@@ -112,7 +112,7 @@
     $effect.pre(() => {
         $selectedCharID
         //FIXME add selectedChatPage for optimize render
-        chatPage = $DataBase.characters[$selectedCharID].chatPage
+        chatPage = DBState.db.characters[$selectedCharID].chatPage
         updateSuggestions()
     });
     $effect.pre(() => {translateSuggest(toggleTranslate, suggestMessages)});
@@ -125,7 +125,7 @@
             <div>{language.creatingSuggestions}</div>
         </div>        
     {:else if !$doingChat}
-        {#if $DataBase.translator !== ''}
+        {#if DBState.db.translator !== ''}
             <div class="flex mr-2 mb-2">
                 <button class={"bg-textcolor2 hover:bg-darkbutton font-bold py-2 px-4 rounded " + (toggleTranslate ? 'text-green-500' : 'text-textcolor')}
                     onclick={() => {
@@ -160,7 +160,7 @@
                     messageInput(suggest)
                     send()
                 }}>
-                {#await ParseMarkdown(($DataBase.translator !== '' && toggleTranslate && suggestMessagesTranslated && suggestMessagesTranslated.length > 0) ? suggestMessagesTranslated[i]??suggest : suggest) then md}
+                {#await ParseMarkdown((DBState.db.translator !== '' && toggleTranslate && suggestMessagesTranslated && suggestMessagesTranslated.length > 0) ? suggestMessagesTranslated[i]??suggest : suggest) then md}
                     {@html md}
                 {/await}
                 </button>
diff --git a/src/lib/Mobile/MobileBody.svelte b/src/lib/Mobile/MobileBody.svelte
index 73124580..865fd02b 100644
--- a/src/lib/Mobile/MobileBody.svelte
+++ b/src/lib/Mobile/MobileBody.svelte
@@ -10,7 +10,7 @@
     import SideChatList from "../SideBars/SideChatList.svelte";
     import DevTool from "../SideBars/DevTool.svelte";
     import { isLite } from "src/ts/lite";
-  import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
 </script>
 
 {#if $MobileSideBar > 0 && !$isLite}
@@ -36,7 +36,7 @@
     {#if $MobileSideBar > 0}
         <div class="w-full flex flex-col p-2 mt-2 h-full">
             {#if $MobileSideBar === 1}
-                <SideChatList bind:chara={$DataBase.characters[$selectedCharID]} />
+                <SideChatList bind:chara={DBState.db.characters[$selectedCharID]} />
             {:else if $MobileSideBar === 2}
                 <CharConfig />
             {:else if $MobileSideBar === 3}
diff --git a/src/lib/Mobile/MobileCharacters.svelte b/src/lib/Mobile/MobileCharacters.svelte
index 0072875f..4045f88c 100644
--- a/src/lib/Mobile/MobileCharacters.svelte
+++ b/src/lib/Mobile/MobileCharacters.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { type character, DataBase, type groupChat } from "src/ts/storage/database";
+    import { type character, DBState, type groupChat } from "src/ts/storage/database.svelte";
     import BarIcon from "../SideBars/BarIcon.svelte";
     import { addCharacter, changeChar, getCharImage } from "src/ts/characters";
     import { MobileSearch } from "src/ts/stores";
@@ -55,7 +55,7 @@
     }
 </script>
 <div class="flex flex-col items-center w-full overflow-y-auto h-full">
-    {#each sortChar($DataBase.characters) as char, i}
+    {#each sortChar(DBState.db.characters) as char, i}
         {#if char.name.toLocaleLowerCase().includes($MobileSearch.toLocaleLowerCase())}
             <button class="flex p-2 border-t-darkborderc gap-2 w-full" class:border-t={i !== 0} onclick={() => {
                 changeChar(char.i)
diff --git a/src/lib/Mobile/MobileHeader.svelte b/src/lib/Mobile/MobileHeader.svelte
index ffc9b551..307398e5 100644
--- a/src/lib/Mobile/MobileHeader.svelte
+++ b/src/lib/Mobile/MobileHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { ArrowLeft, MenuIcon } from "lucide-svelte";
     import { language } from "src/lang";
-  import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { MobileGUIStack, MobileSearch, selectedCharID, SettingsMenuIndex, MobileSideBar } from "src/ts/stores";
 
 </script>
@@ -19,7 +19,7 @@
         }}>
             <ArrowLeft />
         </button>
-        <span class="font-bold text-lg w-2/3 truncate">{$DataBase.characters[$selectedCharID].name}</span>
+        <span class="font-bold text-lg w-2/3 truncate">{DBState.db.characters[$selectedCharID].name}</span>
         <div class="flex-1 flex justify-end">
             <button onclick={() => {
                 MobileSideBar.set(1)
diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index 317546cd..41ce2896 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { alertStore, alertGenerationInfoStore } from "../../ts/alert";
-    import { DataBase } from '../../ts/storage/database';
+    import { DBState } from '../../ts/storage/database.svelte';
     import { getCharImage } from '../../ts/characters';
     import { ParseMarkdown } from '../../ts/parser';
     import BarIcon from '../SideBars/BarIcon.svelte';
@@ -160,10 +160,10 @@
                 </div>
             {:else if $alertStore.type === 'selectChar'}
                 <div class="flex w-full items-start flex-wrap gap-2 justify-start">
-                    {#each $DataBase.characters as char, i}
+                    {#each DBState.db.characters as char, i}
                         {#if char.type !== 'group'}
                             {#if char.image}
-                                {#await getCharImage($DataBase.characters[i].image, 'css')}
+                                {#await getCharImage(DBState.db.characters[i].image, 'css')}
                                     <BarIcon onClick={() => {
                                         //@ts-ignore
                                         alertStore.set({type: 'none',msg: char.chaId})
@@ -237,17 +237,17 @@
                     <span class="text-amber-500">Model</span>
                     <span class="text-amber-500 justify-self-end">{$alertGenerationInfoStore.genInfo.model}</span>
                     <span class="text-green-500">ID</span>
-                    <span class="text-green-500 justify-self-end">{$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].chatId ?? "None"}</span>
+                    <span class="text-green-500 justify-self-end">{DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].chatId ?? "None"}</span>
                     <span class="text-red-500">GenID</span>
                     <span class="text-red-500 justify-self-end">{$alertGenerationInfoStore.genInfo.generationId}</span>
                     <span class="text-cyan-500">Saying</span>
-                    <span class="text-cyan-500 justify-self-end">{$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].saying}</span>
+                    <span class="text-cyan-500 justify-self-end">{DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].saying}</span>
                     <span class="text-purple-500">Size</span>
-                    <span class="text-purple-500 justify-self-end">{JSON.stringify($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx]).length} Bytes</span>
+                    <span class="text-purple-500 justify-self-end">{JSON.stringify(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx]).length} Bytes</span>
                     <span class="text-yellow-500">Time</span>
-                    <span class="text-yellow-500 justify-self-end">{(new Date($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].time ?? 0)).toLocaleString()}</span>
+                    <span class="text-yellow-500 justify-self-end">{(new Date(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].time ?? 0)).toLocaleString()}</span>
                     <span class="text-green-500">Tokens</span>
-                    {#await tokenize($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].data)}
+                    {#await tokenize(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].message[$alertGenerationInfoStore.idx].data)}
                         <span class="text-green-500 justify-self-end">Loading</span>
                     {:then tokens} 
                         <span class="text-green-500 justify-self-end">{tokens}</span>
@@ -286,20 +286,20 @@
                 </div>
                 {#if generationInfoMenuIndex === 0}
                     <div class="flex flex-col gap-2 w-full">
-                        {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk}
+                        {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk}
                             <TextAreaInput bind:value={chunk.text} />
                         {/each}
 
                         <Button onclick={() => {
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks.push({
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks.push({
                                 text: '',
                                 targetId: 'all'
                             })
-                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks
+                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks
                         }}>+</Button>
                     </div>
                 {:else}
-                    {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk, i}
+                    {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data.chunks as chunk, i}
                         <div class="flex flex-col p-2 rounded-md border-darkborderc border">
                             {#if i === 0}
                                 <span class="text-green-500">Active</span>
@@ -418,7 +418,7 @@
                             <ChevronRightIcon />
                         </div>
                     </button>
-                    {#if $DataBase.useExperimental}
+                    {#if DBState.db.useExperimental}
                         <button class="border-darkborderc border py-2 px-8 flex rounded-md hover:ring-2 items-center mt-2" onclick={() => {
                             alertStore.set({
                                 type: 'none',
@@ -478,7 +478,7 @@
                     <span class="text-textcolor2 text-sm">{language.risupresetDesc}</span>
                 {:else}
                     <span class="text-textcolor2 text-sm">{language.ccv3Desc}</span>
-                    {#if cardExportType2 !== 'charx' && isCharacterHasAssets($DataBase.characters[$selectedCharID])}
+                    {#if cardExportType2 !== 'charx' && isCharacterHasAssets(DBState.db.characters[$selectedCharID])}
                         <span class="text-red-500 text-sm">{language.notCharxWarn}</span>
                     {/if}
                 {/if}
@@ -501,7 +501,7 @@
                     <button class="bg-bgcolor px-2 py-4 rounded-lg flex-1" class:ring-1={cardExportType === 'realm'} onclick={() => {cardExportType = 'realm'}}>RisuRealm</button>
                     <button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === ''} onclick={() => {
                         cardExportType = ''
-                        cardExportType2 = isCharacterHasAssets($DataBase.characters[$selectedCharID]) ? 'charx' : ''
+                        cardExportType2 = isCharacterHasAssets(DBState.db.characters[$selectedCharID]) ? 'charx' : ''
                     }}>Character Card V3</button>
                     <button class="bg-bgcolor px-2 py-4 rounded-lg ml-2 flex-1" class:ring-1={cardExportType === 'ccv2'} onclick={() => {cardExportType = 'ccv2'}}>Character Card V2</button>
                 {/if}
diff --git a/src/lib/Others/ChatList.svelte b/src/lib/Others/ChatList.svelte
index 601fd62c..af6276fa 100644
--- a/src/lib/Others/ChatList.svelte
+++ b/src/lib/Others/ChatList.svelte
@@ -1,7 +1,7 @@
 <script>
     import { alertConfirm, alertError } from "../../ts/alert";
     import { language } from "../../lang";
-    import { DataBase } from "../../ts/storage/database";
+    import { DBState } from "../../ts/storage/database.svelte";
     import { ReloadGUIPointer, selectedCharID } from "../../ts/stores";
     import { DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
     import { exportChat, importChat } from "../../ts/characters";
@@ -23,15 +23,15 @@
                 </button>
             </div>
         </div>
-        {#each $DataBase.characters[$selectedCharID].chats as chat, i}
+        {#each DBState.db.characters[$selectedCharID].chats as chat, i}
             <button onclick={() => {
                 if(!editMode){
-                    $DataBase.characters[$selectedCharID].chatPage = i
+                    DBState.db.characters[$selectedCharID].chatPage = i
                      close()
                 }
-            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.characters[$selectedCharID].chatPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === DBState.db.characters[$selectedCharID].chatPage}>
                 {#if editMode}
-                    <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[i].name} padding={false}/>
+                    <TextInput bind:value={DBState.db.characters[$selectedCharID].chats[i].name} padding={false}/>
                 {:else}
                     <span>{chat.name}</span>
                 {/if}
@@ -44,16 +44,16 @@
                     </div>
                     <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
                         e.stopPropagation()
-                        if($DataBase.characters[$selectedCharID].chats.length === 1){
+                        if(DBState.db.characters[$selectedCharID].chats.length === 1){
                             alertError(language.errors.onlyOneChat)
                             return
                         }
                         const d = await alertConfirm(`${language.removeConfirm}${chat.name}`)
                         if(d){
-                            $DataBase.characters[$selectedCharID].chatPage = 0
-                            let chats = $DataBase.characters[$selectedCharID].chats
+                            DBState.db.characters[$selectedCharID].chatPage = 0
+                            let chats = DBState.db.characters[$selectedCharID].chats
                             chats.splice(i, 1)
-                            $DataBase.characters[$selectedCharID].chats = chats
+                            DBState.db.characters[$selectedCharID].chats = chats
                         }
                     }}>
                         <TrashIcon size={18}/>
@@ -63,9 +63,9 @@
         {/each}
         <div class="flex mt-2 items-center">
             <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" onclick={() => {
-                const cha = $DataBase.characters[$selectedCharID]
-                const len = $DataBase.characters[$selectedCharID].chats.length
-                let chats = $DataBase.characters[$selectedCharID].chats
+                const cha = DBState.db.characters[$selectedCharID]
+                const len = DBState.db.characters[$selectedCharID].chats.length
+                let chats = DBState.db.characters[$selectedCharID].chats
                 chats.unshift({
                     message:[], note:'', name:`New Chat ${len + 1}`, localLore:[], fmIndex: -1
                 })
@@ -78,9 +78,9 @@
                         })
                     })
                 }
-                $DataBase.characters[$selectedCharID].chats = chats
+                DBState.db.characters[$selectedCharID].chats = chats
                 $ReloadGUIPointer += 1
-                $DataBase.characters[$selectedCharID].chatPage = len
+                DBState.db.characters[$selectedCharID].chatPage = len
                 close()
             }}>
                 <PlusIcon/>
diff --git a/src/lib/Others/GridCatalog.svelte b/src/lib/Others/GridCatalog.svelte
index f6a79fa4..187ff6d6 100644
--- a/src/lib/Others/GridCatalog.svelte
+++ b/src/lib/Others/GridCatalog.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { characterFormatUpdate, getCharImage, removeChar } from "../../ts/characters";
-    import { DataBase, type Database } from "../../ts/storage/database";
+    import { DBState, type Database } from "../../ts/storage/database.svelte";
     import BarIcon from "../SideBars/BarIcon.svelte";
     import { ArrowLeft, User, Users, Inspect, TrashIcon, Undo2Icon } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
@@ -8,12 +8,12 @@
     import Button from "../UI/GUI/Button.svelte";
     import { language } from "src/lang";
     import { parseMultilangString } from "src/ts/util";
-  import { checkCharOrder } from "src/ts/storage/globalApi";
-  interface Props {
-    endGrid?: any;
-  }
+    import { checkCharOrder } from "src/ts/storage/globalApi";
+    interface Props {
+        endGrid?: any;
+    }
 
-  let { endGrid = () => {} }: Props = $props();
+    let { endGrid = () => {} }: Props = $props();
     let search = $state('')
     let selected = $state(0)
 
@@ -79,7 +79,7 @@
         {#if selected === 0}
             <div class="w-full flex justify-center">
                 <div class="flex flex-wrap gap-2 w-full justify-center">
-                    {#each formatChars(search, $DataBase) as char}
+                    {#each formatChars(search, DBState.db) as char}
                         <div class="flex items-center text-textcolor">
                             {#if char.image}
                                 <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
@@ -97,7 +97,7 @@
                 </div>
             </div>
         {:else if selected === 1}
-            {#each formatChars(search, $DataBase) as char}
+            {#each formatChars(search, DBState.db) as char}
                 <div class="flex p-2 border border-darkborderc rounded-md mb-2">
                     <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                     <div class="flex-1 flex flex-col ml-2">
@@ -120,7 +120,7 @@
             {/each}
         {:else if selected === 2}
             <span class="text-textcolor2 text-sm mb-2">{language.trashDesc}</span>
-            {#each formatChars(search, $DataBase, true) as char}
+            {#each formatChars(search, DBState.db, true) as char}
                 <div class="flex p-2 border border-darkborderc rounded-md mb-2">
                     <BarIcon onClick={() => {changeChar(char.index)}} additionalStyle={getCharImage(char.image, 'css')}></BarIcon>
                     <div class="flex-1 flex flex-col ml-2">
@@ -128,7 +128,7 @@
                         <span class="text-textcolor2">{parseMultilangString(char.desc)['en'] || parseMultilangString(char.desc)['xx'] || 'No description'}</span>
                         <div class="flex gap-2 justify-end">
                             <button class="hover:text-textcolor text-textcolor2" onclick={() => {
-                                $DataBase.characters[char.index].trashTime = undefined
+                                DBState.db.characters[char.index].trashTime = undefined
                                 checkCharOrder()
                             }}>
                                 <Undo2Icon />
diff --git a/src/lib/Others/WelcomeRisu.svelte b/src/lib/Others/WelcomeRisu.svelte
index d1456333..96850df5 100644
--- a/src/lib/Others/WelcomeRisu.svelte
+++ b/src/lib/Others/WelcomeRisu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { ArrowBigLeftIcon, Send } from "lucide-svelte";
+    import { Send } from "lucide-svelte";
     import { changeLanguage, language } from "src/lang";
-    import { DataBase, setPreset } from "src/ts/storage/database";
+    import { DBState, setPreset } from "src/ts/storage/database.svelte";
     import Chat from "../ChatScreens/Chat.svelte";
     import { prebuiltPresets } from "src/ts/process/templates/templates";
     import { updateTextThemeAndCSS } from "src/ts/gui/colorscheme";
@@ -16,7 +16,7 @@
         const usableLangs = ['de', 'en', 'ko', 'cn', 'vi', 'zh-Hant']
         if(usableLangs.includes(browserLangShort)){
             changeLanguage(browserLangShort)
-            $DataBase.language = browserLangShort
+            DBState.db.language = browserLangShort
             step = 1
         }
     }
@@ -26,7 +26,7 @@
         switch(step){
             case 1:{
                 if(input.length > 0){
-                    $DataBase.username = input
+                    DBState.db.username = input
                     step = 2
                     input = ''
                 }
@@ -43,14 +43,14 @@
             case 3:{
                 if(provider === 'openai'){
                     if(input.length > 0 && input.startsWith('sk-')){
-                        $DataBase.openAIKey = input
+                        DBState.db.openAIKey = input
                         step = 10
                         input = ''
                     }
                 }
                 if(provider === 'openrouter'){
                     if(input.length > 0 && input.startsWith('sk-')){
-                        $DataBase.openrouterKey = input
+                        DBState.db.openrouterKey = input
                         step = 10
                         input = ''
                     }
@@ -62,24 +62,24 @@
     $effect.pre(() => {
         if(step === 10){
             setTimeout(() => {
-                $DataBase = setPreset($DataBase, prebuiltPresets.OAI2)
-                $DataBase.textTheme = 'highcontrast'
+                DBState.db = setPreset(DBState.db, prebuiltPresets.OAI2)
+                DBState.db.textTheme = 'highcontrast'
                 updateTextThemeAndCSS()
                 if(provider === 'openrouter'){
-                    $DataBase.aiModel = 'openrouter'
-                    $DataBase.subModel = 'openrouter'
-                    $DataBase.openrouterRequestModel = 'risu/free'
-                    $DataBase.maxContext = 6000
+                    DBState.db.aiModel = 'openrouter'
+                    DBState.db.subModel = 'openrouter'
+                    DBState.db.openrouterRequestModel = 'risu/free'
+                    DBState.db.maxContext = 6000
                 }
                 if(provider === 'horde'){
-                    $DataBase.aiModel = 'horde:::auto'
-                    $DataBase.subModel = 'horde:::auto'
+                    DBState.db.aiModel = 'horde:::auto'
+                    DBState.db.subModel = 'horde:::auto'
                 }
 
                 if(provider === 'openai'){
-                    $DataBase.maxContext = 4000
+                    DBState.db.maxContext = 4000
                 }
-                $DataBase.didFirstSetup = true
+                DBState.db.didFirstSetup = true
             }, 1000);
         }
 
@@ -101,32 +101,32 @@
                     <div class="flex flex-col items-start ml-2">
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('de')
-                            $DataBase.language='de'
+                            DBState.db.language='de'
                             step = 1
                         }}>• Deutsch</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('en')
-                            $DataBase.language='en'
+                            DBState.db.language='en'
                             step = 1
                         }}>• English</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('ko')
-                            $DataBase.language='ko'
+                            DBState.db.language='ko'
                             step = 1
                         }}>• 한국어</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('cn')
-                            $DataBase.language='cn'
+                            DBState.db.language='cn'
                             step = 1
                         }}>• 中文</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('zh-Hant')
-                            $DataBase.language='zh-Hant'
+                            DBState.db.language='zh-Hant'
                             step = 1
                         }}>• 中文(繁體)</button>
                         <button class="hover:text-green-500 transition-colors" onclick={() => {
                             changeLanguage('vi')
-                            $DataBase.language='vi'
+                            DBState.db.language='vi'
                             step = 1
                         }}>• Tiếng Việt</button>
                     </div>
@@ -134,8 +134,8 @@
                 {:else}
                     <Chat name="Risu" message={language.setup.welcome} isLastMemory={false} />
                     {#if step >= 2}
-                        <Chat name={$DataBase.username} message={$DataBase.username} isLastMemory={false} />
-                        <Chat name="Risu" message={language.setup.welcome2.replace('{username}', $DataBase.username)} isLastMemory={false} />
+                        <Chat name={DBState.db.username} message={DBState.db.username} isLastMemory={false} />
+                        <Chat name="Risu" message={language.setup.welcome2.replace('{username}', DBState.db.username)} isLastMemory={false} />
                     {/if}
                     {#if step === 2}
                         <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -170,7 +170,7 @@
                         </div>
                     {/if}
                     {#if step >= 3}
-                        <Chat name={$DataBase.username} message={provider} isLastMemory={false} />
+                        <Chat name={DBState.db.username} message={provider} isLastMemory={false} />
                         {#if provider === 'openai'}
                             <Chat name="Risu" message={language.setup.setupOpenAI} isLastMemory={false} />
                         {/if}
diff --git a/src/lib/Playground/PlaygroundMenu.svelte b/src/lib/Playground/PlaygroundMenu.svelte
index 9fdd7654..ee91cb0f 100644
--- a/src/lib/Playground/PlaygroundMenu.svelte
+++ b/src/lib/Playground/PlaygroundMenu.svelte
@@ -9,7 +9,7 @@
     import { findCharacterIndexbyId } from "src/ts/util";
     import { characterFormatUpdate, createBlankChar } from "src/ts/characters";
     import { get } from "svelte/store";
-    import { DataBase, setDatabase, type character } from "src/ts/storage/database";
+    import { DataBase, setDatabase, type character } from "src/ts/storage/database.svelte";
     import PlaygroundImageGen from "./PlaygroundImageGen.svelte";
     import PlaygroundParser from "./PlaygroundParser.svelte";
     import ToolConvertion from "./ToolConvertion.svelte";
diff --git a/src/lib/Setting/Pages/AccessibilitySettings.svelte b/src/lib/Setting/Pages/AccessibilitySettings.svelte
index ff9ae299..d67f0dca 100644
--- a/src/lib/Setting/Pages/AccessibilitySettings.svelte
+++ b/src/lib/Setting/Pages/AccessibilitySettings.svelte
@@ -1,52 +1,52 @@
 <script lang="ts">
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
 
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.accessibility}</h2>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.askRemoval} name={language.askRemoval}/>
+    <Check bind:check={DBState.db.askRemoval} name={language.askRemoval}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.swipe} name={language.SwipeRegenerate}/>
+    <Check bind:check={DBState.db.swipe} name={language.SwipeRegenerate}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.instantRemove} name={language.instantRemove}/>
+    <Check bind:check={DBState.db.instantRemove} name={language.instantRemove}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.sendWithEnter} name={language.sendWithEnter}/>
+    <Check bind:check={DBState.db.sendWithEnter} name={language.sendWithEnter}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.clickToEdit} name={language.clickToEdit}/>
+    <Check bind:check={DBState.db.clickToEdit} name={language.clickToEdit}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.botSettingAtStart} name={language.botSettingAtStart}/>
+    <Check bind:check={DBState.db.botSettingAtStart} name={language.botSettingAtStart}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.toggleConfirmRecommendedPreset} name={language.toggleConfirmRecommendedPreset}/>
+    <Check bind:check={DBState.db.toggleConfirmRecommendedPreset} name={language.toggleConfirmRecommendedPreset}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.showMenuChatList} name={language.showMenuChatList}/>
+    <Check bind:check={DBState.db.showMenuChatList} name={language.showMenuChatList}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.goCharacterOnImport} name={language.goCharacterOnImport}/>
+    <Check bind:check={DBState.db.goCharacterOnImport} name={language.goCharacterOnImport}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.sideMenuRerollButton} name={language.sideMenuRerollButton}/>
+    <Check bind:check={DBState.db.sideMenuRerollButton} name={language.sideMenuRerollButton}/>
 </div>
 
 <div class="flex items-center mt-2">
-    <Check bind:check={$DataBase.requestInfoInsideChat} name={language.requestInfoInsideChat}/>
+    <Check bind:check={DBState.db.requestInfoInsideChat} name={language.requestInfoInsideChat}/>
 </div>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/AdvancedSettings.svelte b/src/lib/Setting/Pages/AdvancedSettings.svelte
index 18d5e43a..2a4273ca 100644
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { alertMd } from "src/ts/alert";
     import { getRequestLog, isTauri } from "src/ts/storage/globalApi";
     import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
@@ -10,8 +10,8 @@
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
     import Help from "src/lib/Others/Help.svelte";
     import { installPython } from "src/ts/process/models/local";
-  import { Capacitor } from "@capacitor/core";
-  import { capStorageInvestigation } from "src/ts/storage/mobileStorage";
+    import { Capacitor } from "@capacitor/core";
+    import { capStorageInvestigation } from "src/ts/storage/mobileStorage";
 
     let estaStorage:{
         key:string,
@@ -22,38 +22,38 @@
 <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-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
-<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.loreBookDepth}/>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={DBState.db.loreBookDepth}/>
 <span class="text-textcolor">{language.loreBookToken}</span>
-<NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={$DataBase.loreBookToken}/>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={DBState.db.loreBookToken}/>
 <span class="text-textcolor">{language.autoContinueMinTokens}</span>
-<NumberInput marginBottom={true} size={"sm"} min={0} bind:value={$DataBase.autoContinueMinTokens}/>
+<NumberInput marginBottom={true} size={"sm"} min={0} bind:value={DBState.db.autoContinueMinTokens}/>
 
 <span class="text-textcolor">{language.additionalPrompt}</span>
-<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.additionalPrompt}/>
+<TextInput marginBottom={true} size={"sm"} bind:value={DBState.db.additionalPrompt}/>
 
 <span class="text-textcolor">{language.descriptionPrefix}</span>
-<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.descriptionPrefix}/>
+<TextInput marginBottom={true} size={"sm"} bind:value={DBState.db.descriptionPrefix}/>
 
 <span class="text-textcolor">{language.emotionPrompt} <Help key="emotionPrompt"/></span>
-<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.emotionPrompt2} placeholder="Leave it blank to use default"/>
+<TextInput marginBottom={true} size={"sm"} bind:value={DBState.db.emotionPrompt2} placeholder="Leave it blank to use default"/>
 
 <span class="text-textcolor">Kei Server URL</span>
-<TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.keiServerURL} placeholder="Leave it blank to use default"/>
+<TextInput marginBottom={true} size={"sm"} bind:value={DBState.db.keiServerURL} placeholder="Leave it blank to use default"/>
 
 <span class="text-textcolor">{language.requestretrys} <Help key="requestretrys"/></span>
-<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={$DataBase.requestRetrys}/>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={20} bind:value={DBState.db.requestRetrys}/>
 
 <span class="text-textcolor">{language.genTimes} <Help key="genTimes"/></span>
-<NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={$DataBase.genTime}/>
+<NumberInput marginBottom={true} size={"sm"} min={0} max={4096} bind:value={DBState.db.genTime}/>
 
 <span class="text-textcolor mt-4">GPT Vision Quality <Help key="gptVisionQuality"/></span>
-<SelectInput bind:value={$DataBase.gptVisionQuality}>
+<SelectInput bind:value={DBState.db.gptVisionQuality}>
     <OptionInput value="low">Low</OptionInput>
     <OptionInput value="high">High</OptionInput>
 </SelectInput>
 
 <span class="text-textcolor mt-4">{language.heightMode}</span>
-<SelectInput bind:value={$DataBase.heightMode}>
+<SelectInput bind:value={DBState.db.heightMode}>
     <OptionInput value="normal">Normal</OptionInput>
     <OptionInput value="percent">Percent</OptionInput>
     <OptionInput value="vh">VH</OptionInput>
@@ -63,86 +63,86 @@
 </SelectInput>
 
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}> <Help key="sayNothing"/></Check>
+    <Check bind:check={DBState.db.useSayNothing} name={language.sayNothing}> <Help key="sayNothing"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.showUnrecommended} name={language.showUnrecommended}> <Help key="showUnrecommended"/></Check>
+    <Check bind:check={DBState.db.showUnrecommended} name={language.showUnrecommended}> <Help key="showUnrecommended"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.imageCompression} name={language.imageCompression}> <Help key="imageCompression"/></Check>
+    <Check bind:check={DBState.db.imageCompression} name={language.imageCompression}> <Help key="imageCompression"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.useExperimental} name={language.useExperimental}> <Help key="useExperimental"/></Check>
+    <Check bind:check={DBState.db.useExperimental} name={language.useExperimental}> <Help key="useExperimental"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.forceProxyAsOpenAI} name={language.forceProxyAsOpenAI}> <Help key="forceProxyAsOpenAI"/></Check>
+    <Check bind:check={DBState.db.forceProxyAsOpenAI} name={language.forceProxyAsOpenAI}> <Help key="forceProxyAsOpenAI"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.autofillRequestUrl} name={language.autoFillRequestURL}> <Help key="autoFillRequestURL"/></Check>
+    <Check bind:check={DBState.db.autofillRequestUrl} name={language.autoFillRequestURL}> <Help key="autoFillRequestURL"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.autoContinueChat} name={language.autoContinueChat}> <Help key="autoContinueChat"/></Check>
+    <Check bind:check={DBState.db.autoContinueChat} name={language.autoContinueChat}> <Help key="autoContinueChat"/></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.removeIncompleteResponse} name={language.removeIncompleteResponse}></Check>
+    <Check bind:check={DBState.db.removeIncompleteResponse} name={language.removeIncompleteResponse}></Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.newOAIHandle} name={language.newOAIHandle}/>
+    <Check bind:check={DBState.db.newOAIHandle} name={language.newOAIHandle}/>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.noWaitForTranslate} name={language.noWaitForTranslate}/>
+    <Check bind:check={DBState.db.noWaitForTranslate} name={language.noWaitForTranslate}/>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.allowAllExtentionFiles} name="Allow all in file select"/>
+    <Check bind:check={DBState.db.allowAllExtentionFiles} name="Allow all in file select"/>
 </div>
-{#if $DataBase.useExperimental}
+{#if DBState.db.useExperimental}
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.antiClaudeOverload} name={language.antiClaudeOverload}>
+        <Check bind:check={DBState.db.antiClaudeOverload} name={language.antiClaudeOverload}>
             <Help key="experimental"/><Help key="antiClaudeOverload"/>
         </Check>
     </div>
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.claudeCachingExperimental} name={language.claudeCachingExperimental}>
+        <Check bind:check={DBState.db.claudeCachingExperimental} name={language.claudeCachingExperimental}>
             <Help key="experimental"/><Help key="claudeCachingExperimental"/>
         </Check>
     </div>
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.putUserOpen} name={language.oaiRandomUser}>
+        <Check bind:check={DBState.db.putUserOpen} name={language.oaiRandomUser}>
             <Help key="experimental"/><Help key="oaiRandomUser"/>
         </Check>
     </div>
 {/if}
-{#if $DataBase.showUnrecommended}
+{#if DBState.db.showUnrecommended}
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.chainOfThought} name={language.cot}>
+        <Check bind:check={DBState.db.chainOfThought} name={language.cot}>
             <Help key="customChainOfThought" unrecommended/>
         </Check>
     </div>
 {/if}
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.removePunctuationHypa} name={language.removePunctuationHypa}>
+    <Check bind:check={DBState.db.removePunctuationHypa} name={language.removePunctuationHypa}>
         <Help key="removePunctuationHypa"/>
     </Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.enableDevTools} name={language.enableDevTools}>
+    <Check bind:check={DBState.db.enableDevTools} name={language.enableDevTools}>
     </Check>
 </div>
 <div class="flex items-center mt-4">
-    <Check bind:check={$DataBase.dynamicAssets} name={language.dynamicAssets}>
+    <Check bind:check={DBState.db.dynamicAssets} name={language.dynamicAssets}>
         <Help key="dynamicAssets"/>
     </Check>
 </div>
-{#if $DataBase.dynamicAssets}
+{#if DBState.db.dynamicAssets}
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.dynamicAssetsEditDisplay} name={language.dynamicAssetsEditDisplay}>
+        <Check bind:check={DBState.db.dynamicAssetsEditDisplay} name={language.dynamicAssetsEditDisplay}>
             <Help key="dynamicAssetsEditDisplay"/>
         </Check>
     </div>
 {/if}
-{#if $DataBase.showUnrecommended}
+{#if DBState.db.showUnrecommended}
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.usePlainFetch} name={language.forcePlainFetch}> <Help key="forcePlainFetch" unrecommended/></Check>
+        <Check bind:check={DBState.db.usePlainFetch} name={language.forcePlainFetch}> <Help key="forcePlainFetch" unrecommended/></Check>
     </div>
 {/if}
 <button
@@ -172,7 +172,7 @@
         </div>
     {/if}
 {/if}
-{#if $DataBase.tpo}
+{#if DBState.db.tpo}
     <button
         onclick={async () => {
             installPython()
diff --git a/src/lib/Setting/Pages/BotSettings.svelte b/src/lib/Setting/Pages/BotSettings.svelte
index 58288ef6..3a25da8d 100644
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -3,7 +3,7 @@
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { customProviderStore } from "src/ts/plugins/plugins";
     import { downloadFile, getModelMaxContext, isTauri } from "src/ts/storage/globalApi";
     import { tokenizeAccurate, tokenizerList } from "src/ts/tokenizer";
@@ -40,18 +40,18 @@
     let { goPromptTemplate = () => {} }: Props = $props();
 
     async function loadTokenize(){
-        tokens.mainPrompt = await tokenizeAccurate($DataBase.mainPrompt, true)
-        tokens.jailbreak = await tokenizeAccurate($DataBase.jailbreak, true)
-        tokens.globalNote = await tokenizeAccurate($DataBase.globalNote, true)
+        tokens.mainPrompt = await tokenizeAccurate(DBState.db.mainPrompt, true)
+        tokens.jailbreak = await tokenizeAccurate(DBState.db.jailbreak, true)
+        tokens.globalNote = await tokenizeAccurate(DBState.db.globalNote, true)
     }
 
     $effect.pre(() => {
-        if($DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'mancer'){
-            $DataBase.useStreaming = $DataBase.textgenWebUIStreamURL.startsWith("wss://")
+        if(DBState.db.aiModel === 'textgen_webui' || DBState.db.subModel === 'mancer'){
+            DBState.db.useStreaming = DBState.db.textgenWebUIStreamURL.startsWith("wss://")
         }
     });
 
-    let submenu = $state($DataBase.useLegacyGUI ? -1 : 0)
+    let submenu = $state(DBState.db.useLegacyGUI ? -1 : 0)
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.chatBot}</h2>
 
@@ -82,57 +82,57 @@
 
 {#if submenu === 0 || submenu === -1}
     <span class="text-textcolor mt-4">{language.model} <Help key="model"/></span>
-    <ModelList bind:value={$DataBase.aiModel}/>
+    <ModelList bind:value={DBState.db.aiModel}/>
 
     <span class="text-textcolor mt-2">{language.submodel} <Help key="submodel"/></span>
-    <ModelList bind:value={$DataBase.subModel}/>
+    <ModelList bind:value={DBState.db.subModel}/>
 
-    {#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
+    {#if DBState.db.aiModel.startsWith('palm2') || DBState.db.subModel.startsWith('palm2') || DBState.db.aiModel.startsWith('gemini') || DBState.db.subModel.startsWith('gemini')}
         <span class="text-textcolor">
-            {#if $DataBase.google.projectId === 'aigoogle'}
+            {#if DBState.db.google.projectId === 'aigoogle'}
                 GoogleAI API Key
             {:else}
                 Google Bearer Token
             {/if}
         </span>
-        <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText={$DataBase.hideApiKey} bind:value={$DataBase.google.accessToken}/>
+        <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText={DBState.db.hideApiKey} bind:value={DBState.db.google.accessToken}/>
 
-        {#if $DataBase.google.projectId !== 'aigoogle'}
+        {#if DBState.db.google.projectId !== 'aigoogle'}
             <span class="text-textcolor">Google Project ID</span>
-            <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText={$DataBase.hideApiKey} bind:value={$DataBase.google.projectId}/>
+            <TextInput marginBottom={true} size={"sm"} placeholder="..." hideText={DBState.db.hideApiKey} bind:value={DBState.db.google.projectId}/>
         {/if}
     {/if}
-    {#if $DataBase.aiModel.startsWith('jamba') || $DataBase.subModel.startsWith('jamba')}
+    {#if DBState.db.aiModel.startsWith('jamba') || DBState.db.subModel.startsWith('jamba')}
         <span class="text-textcolor">AI21 {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.ai21Key}/>
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={DBState.db.ai21Key}/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('novellist') || $DataBase.subModel.startsWith('novellist')}
+    {#if DBState.db.aiModel.startsWith('novellist') || DBState.db.subModel.startsWith('novellist')}
         <span class="text-textcolor">NovelList {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.novellistAPI}/>
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={DBState.db.novellistAPI}/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('mancer') || $DataBase.subModel.startsWith('mancer')}
+    {#if DBState.db.aiModel.startsWith('mancer') || DBState.db.subModel.startsWith('mancer')}
         <span class="text-textcolor">Mancer {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mancerHeader}/>
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={DBState.db.mancerHeader}/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
+    {#if DBState.db.aiModel.startsWith('claude-') || DBState.db.subModel.startsWith('claude-')}
         <span class="text-textcolor">Claude {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.claudeAPIKey}/>
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={DBState.db.claudeAPIKey}/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('mistral') || $DataBase.subModel.startsWith('mistral')}
+    {#if DBState.db.aiModel.startsWith('mistral') || DBState.db.subModel.startsWith('mistral')}
         <span class="text-textcolor">Mistral {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={$DataBase.mistralKey}/>
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={true} size={"sm"} placeholder="..." bind:value={DBState.db.mistralKey}/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('novelai') || $DataBase.subModel.startsWith('novelai')}
+    {#if DBState.db.aiModel.startsWith('novelai') || DBState.db.subModel.startsWith('novelai')}
         <span class="text-textcolor">NovelAI Bearer Token</span>
-        <TextInput bind:value={$DataBase.novelai.token}/>
+        <TextInput bind:value={DBState.db.novelai.token}/>
     {/if}
-    {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
+    {#if DBState.db.aiModel === 'reverse_proxy' || DBState.db.subModel === 'reverse_proxy'}
         <span class="text-textcolor mt-2">URL <Help key="forceUrl"/></span>
-        <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.forceReplaceUrl} placeholder="https//..." />
+        <TextInput marginBottom={false} size={"sm"} bind:value={DBState.db.forceReplaceUrl} placeholder="https//..." />
         <span class="text-textcolor mt-4"> {language.proxyAPIKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={$DataBase.proxyKey} />
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={false} size={"sm"} placeholder="leave it blank if it hasn't password" bind:value={DBState.db.proxyKey} />
         <span class="text-textcolor mt-4"> {language.proxyRequestModel}</span>
-        <SelectInput className="mt-2" bind:value={$DataBase.proxyRequestModel}>
+        <SelectInput className="mt-2" bind:value={DBState.db.proxyRequestModel}>
             <OptionInput value="">None</OptionInput>
             <OptionInput value="gpt35">GPT 3.5</OptionInput>
             <OptionInput value="gpt35_16k">GPT 3.5 16k</OptionInput>
@@ -160,30 +160,30 @@
             <OptionInput value="claude-3-5-sonnet-20241022">claude-3-5-sonnet-20241022</OptionInput>
             <OptionInput value="custom">Custom</OptionInput>
         </SelectInput>
-        {#if $DataBase.proxyRequestModel === 'custom'}
-            <TextInput marginBottom={true} size={"sm"} bind:value={$DataBase.customProxyRequestModel} placeholder="Name" />
+        {#if DBState.db.proxyRequestModel === 'custom'}
+            <TextInput marginBottom={true} size={"sm"} bind:value={DBState.db.customProxyRequestModel} placeholder="Name" />
         {:else}
             <div class="mb-4"></div>
         {/if}
     {/if}
-    {#if $DataBase.aiModel.startsWith('risullm')}
+    {#if DBState.db.aiModel.startsWith('risullm')}
         <span class="text-textcolor mt-4">Risu {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={false} size={"sm"} bind:value={$DataBase.proxyKey} />
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={false} size={"sm"} bind:value={DBState.db.proxyKey} />
     {/if}
-    {#if $DataBase.aiModel.startsWith('cohere')}
+    {#if DBState.db.aiModel.startsWith('cohere')}
         <span class="text-textcolor mt-4">Cohere {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={false} size={"sm"} bind:value={$DataBase.cohereAPIKey} />
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={false} size={"sm"} bind:value={DBState.db.cohereAPIKey} />
     {/if}
-    {#if $DataBase.aiModel === 'ollama-hosted'}
+    {#if DBState.db.aiModel === 'ollama-hosted'}
         <span class="text-textcolor mt-4">Ollama URL</span>
-        <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaURL} />
+        <TextInput marginBottom={false} size={"sm"} bind:value={DBState.db.ollamaURL} />
 
         <span class="text-textcolor mt-4">Ollama Model</span>
-        <TextInput marginBottom={false} size={"sm"} bind:value={$DataBase.ollamaModel} />
+        <TextInput marginBottom={false} size={"sm"} bind:value={DBState.db.ollamaModel} />
     {/if}
-    {#if $DataBase.aiModel === 'openrouter' || $DataBase.subModel === 'openrouter'}
+    {#if DBState.db.aiModel === 'openrouter' || DBState.db.subModel === 'openrouter'}
         <span class="text-textcolor mt-4">Openrouter Key</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={false} size={"sm"} bind:value={$DataBase.openrouterKey} />
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={false} size={"sm"} bind:value={DBState.db.openrouterKey} />
 
         <span class="text-textcolor mt-4">Openrouter Model</span>
         {#await openRouterModels()}
@@ -191,7 +191,7 @@
                 <OptionInput value="">Loading..</OptionInput>
             </SelectInput>
         {:then m}
-            <SelectInput className="mt-2 mb-4" bind:value={$DataBase.openrouterRequestModel}>
+            <SelectInput className="mt-2 mb-4" bind:value={DBState.db.openrouterRequestModel}>
                 {#if (!m) || (m.length === 0)}
                     <OptionInput value="openai/gpt-3.5-turbo">GPT 3.5</OptionInput>
                     <OptionInput value="openai/gpt-3.5-turbo-16k">GPT 3.5 16k</OptionInput>
@@ -213,52 +213,52 @@
             </SelectInput>
         {/await}
     {/if}
-    {#if $DataBase.aiModel === 'openrouter' || $DataBase.aiModel === 'reverse_proxy'}
+    {#if DBState.db.aiModel === 'openrouter' || DBState.db.aiModel === 'reverse_proxy'}
         <span class="text-textcolor">{language.tokenizer}</span>
-        <SelectInput bind:value={$DataBase.customTokenizer}>
+        <SelectInput bind:value={DBState.db.customTokenizer}>
             {#each tokenizerList as entry}
                 <OptionInput value={entry[0]}>{entry[1]}</OptionInput>
             {/each}
         </SelectInput>
     {/if}
-    {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.subModel.startsWith('gpt')
-        || $DataBase.aiModel.startsWith('instructgpt') || $DataBase.subModel.startsWith('instructgpt')}
+    {#if DBState.db.aiModel.startsWith('gpt') || DBState.db.subModel.startsWith('gpt')
+        || DBState.db.aiModel.startsWith('instructgpt') || DBState.db.subModel.startsWith('instructgpt')}
         <span class="text-textcolor">OpenAI {language.apiKey} <Help key="oaiapikey"/></span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={false} size={"sm"} bind:value={$DataBase.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={false} size={"sm"} bind:value={DBState.db.openAIKey} placeholder="sk-XXXXXXXXXXXXXXXXXXXX"/>
 
     {/if}
 
     <div class="py-2 flex flex-col gap-2 mb-4">
-        {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter' || $DataBase.aiModel.startsWith('claude-3')}
-            <Check bind:check={$DataBase.useStreaming} name={`Response ${language.streaming}`}/>
+        {#if DBState.db.aiModel.startsWith('gpt') || DBState.db.aiModel === 'reverse_proxy' || DBState.db.aiModel === 'openrouter' || DBState.db.aiModel.startsWith('claude-3')}
+            <Check bind:check={DBState.db.useStreaming} name={`Response ${language.streaming}`}/>
         {/if}
 
-        {#if $DataBase.aiModel.startsWith('palm2') || $DataBase.subModel.startsWith('palm2') || $DataBase.aiModel.startsWith('gemini') || $DataBase.subModel.startsWith('gemini')}
-            <Check check={$DataBase.google.projectId !== 'aigoogle'} name={'Use Vertex AI'} onChange={(v) => {
+        {#if DBState.db.aiModel.startsWith('palm2') || DBState.db.subModel.startsWith('palm2') || DBState.db.aiModel.startsWith('gemini') || DBState.db.subModel.startsWith('gemini')}
+            <Check check={DBState.db.google.projectId !== 'aigoogle'} name={'Use Vertex AI'} onChange={(v) => {
                 if(!v){
-                    $DataBase.google.projectId = 'aigoogle'
+                    DBState.db.google.projectId = 'aigoogle'
                 }
                 else{
-                    $DataBase.google.projectId = ''
+                    DBState.db.google.projectId = ''
                 }
             }}/>
         {/if}
-        {#if $DataBase.aiModel.startsWith('claude-') || $DataBase.subModel.startsWith('claude-')}
-            <Check name="AWS Claude" bind:check={$DataBase.claudeAws}></Check>
+        {#if DBState.db.aiModel.startsWith('claude-') || DBState.db.subModel.startsWith('claude-')}
+            <Check name="AWS Claude" bind:check={DBState.db.claudeAws}></Check>
         {/if}
-        {#if $DataBase.aiModel === 'reverse_proxy' || $DataBase.subModel === 'reverse_proxy'}
-            <Check bind:check={$DataBase.reverseProxyOobaMode} name={`${language.reverseProxyOobaMode}`}/>
+        {#if DBState.db.aiModel === 'reverse_proxy' || DBState.db.subModel === 'reverse_proxy'}
+            <Check bind:check={DBState.db.reverseProxyOobaMode} name={`${language.reverseProxyOobaMode}`}/>
         {/if}
-        {#if $DataBase.aiModel === "novelai" || $DataBase.subModel === "novelai" || $DataBase.aiModel === 'novelai_kayra' || $DataBase.subModel === 'novelai_kayra'}
-            <Check bind:check={$DataBase.NAIadventure} name={language.textAdventureNAI}/>
+        {#if DBState.db.aiModel === "novelai" || DBState.db.subModel === "novelai" || DBState.db.aiModel === 'novelai_kayra' || DBState.db.subModel === 'novelai_kayra'}
+            <Check bind:check={DBState.db.NAIadventure} name={language.textAdventureNAI}/>
 
-            <Check bind:check={$DataBase.NAIappendName} name={language.appendNameNAI}/>
+            <Check bind:check={DBState.db.NAIappendName} name={language.appendNameNAI}/>
         {/if}
     </div>
 
-    {#if $DataBase.aiModel === 'custom' || $DataBase.subModel === 'custom'}
+    {#if DBState.db.aiModel === 'custom' || DBState.db.subModel === 'custom'}
         <span class="text-textcolor mt-2">{language.plugin}</span>
-        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.currentPluginProvider}>
+        <SelectInput className="mt-2 mb-4" bind:value={DBState.db.currentPluginProvider}>
             <OptionInput value="">None</OptionInput>
             {#each $customProviderStore as plugin}
                 <OptionInput value={plugin}>{plugin}</OptionInput>
@@ -266,131 +266,131 @@
         </SelectInput>
     {/if}
 
-    {#if $DataBase.aiModel === "kobold" || $DataBase.subModel === "kobold"}
+    {#if DBState.db.aiModel === "kobold" || DBState.db.subModel === "kobold"}
         <span class="text-textcolor">Kobold URL</span>
-        <TextInput marginBottom={true} bind:value={$DataBase.koboldURL} />
+        <TextInput marginBottom={true} bind:value={DBState.db.koboldURL} />
 
     {/if}
 
 
-    {#if $DataBase.aiModel.startsWith("horde") || $DataBase.subModel.startsWith("horde") }
+    {#if DBState.db.aiModel.startsWith("horde") || DBState.db.subModel.startsWith("horde") }
         <span class="text-textcolor">Horde {language.apiKey}</span>
-        <TextInput hideText={$DataBase.hideApiKey} marginBottom={true} bind:value={$DataBase.hordeConfig.apiKey} />
+        <TextInput hideText={DBState.db.hideApiKey} marginBottom={true} bind:value={DBState.db.hordeConfig.apiKey} />
     {/if}
-    {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.subModel === 'textgen_webui'
-        || $DataBase.aiModel === 'mancer' || $DataBase.subModel === 'mancer'}
+    {#if DBState.db.aiModel === 'textgen_webui' || DBState.db.subModel === 'textgen_webui'
+        || DBState.db.aiModel === 'mancer' || DBState.db.subModel === 'mancer'}
         <span class="text-textcolor mt-2">Blocking {language.providerURL}</span>
-        <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
+        <TextInput marginBottom={true} bind:value={DBState.db.textgenWebUIBlockingURL} placeholder="https://..."/>
         <span class="text-draculared text-xs mb-2">You must use textgen webui with --public-api</span>
         <span class="text-textcolor mt-2">Stream {language.providerURL}</span>
-        <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIStreamURL} placeholder="wss://..."/>
+        <TextInput marginBottom={true} bind:value={DBState.db.textgenWebUIStreamURL} placeholder="wss://..."/>
         {#if !isTauri}
             <span class="text-draculared text-xs mb-2">You are using web version. you must use ngrok or other tunnels to use your local webui.</span>
         {/if}
         <span class="text-draculared text-xs mb-2">Warning: For Ooba version over 1.7, use "Ooba" as model, and use url like http://127.0.0.1:5000/v1/chat/completions</span>
     {/if}
-    {#if $DataBase.aiModel === 'ooba' || $DataBase.subModel === 'ooba'}
+    {#if DBState.db.aiModel === 'ooba' || DBState.db.subModel === 'ooba'}
         <span class="text-textcolor mt-2">Ooba {language.providerURL}</span>
-        <TextInput marginBottom={true} bind:value={$DataBase.textgenWebUIBlockingURL} placeholder="https://..."/>
+        <TextInput marginBottom={true} bind:value={DBState.db.textgenWebUIBlockingURL} placeholder="https://..."/>
     {/if}
-    {#if $DataBase.aiModel.startsWith("horde") || $DataBase.aiModel === 'kobold' }
+    {#if DBState.db.aiModel.startsWith("horde") || DBState.db.aiModel === 'kobold' }
         <ChatFormatSettings />
     {/if}
 {/if}
 
 {#if submenu === 1 || submenu === -1}
     <span class="text-textcolor">{language.maxContextSize}</span>
-    <NumberInput min={0} max={getModelMaxContext($DataBase.aiModel)} marginBottom={true} bind:value={$DataBase.maxContext}/>
+    <NumberInput min={0} max={getModelMaxContext(DBState.db.aiModel)} marginBottom={true} bind:value={DBState.db.maxContext}/>
 
 
     <span class="text-textcolor">{language.maxResponseSize}</span>
-    <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.maxResponse}/>
+    <NumberInput min={0} max={2048} marginBottom={true} bind:value={DBState.db.maxResponse}/>
 
-    {#if $DataBase.aiModel.startsWith('gpt') || $DataBase.aiModel === 'reverse_proxy' || $DataBase.aiModel === 'openrouter'}
+    {#if DBState.db.aiModel.startsWith('gpt') || DBState.db.aiModel === 'reverse_proxy' || DBState.db.aiModel === 'openrouter'}
     <span class="text-textcolor">{language.seed}</span>
 
-    <NumberInput bind:value={$DataBase.generationSeed} marginBottom={true}/>
+    <NumberInput bind:value={DBState.db.generationSeed} marginBottom={true}/>
     {/if}
     <span class="text-textcolor">{language.temperature} <Help key="tempature"/></span>
 
-    {#if $DataBase.aiModel.startsWith("novelai")}
-        <SliderInput min={0} max={250} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2} disableable/>
+    {#if DBState.db.aiModel.startsWith("novelai")}
+        <SliderInput min={0} max={250} marginBottom bind:value={DBState.db.temperature} multiple={0.01} fixed={2} disableable/>
     {:else}
-        <SliderInput min={0} max={200} marginBottom bind:value={$DataBase.temperature} multiple={0.01} fixed={2} disableable/>
+        <SliderInput min={0} max={200} marginBottom bind:value={DBState.db.temperature} multiple={0.01} fixed={2} disableable/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel.startsWith('claude-3') || $DataBase.aiModel.startsWith('cohere-')|| $DataBase.aiModel === 'kobold'}
+    {#if DBState.db.aiModel.startsWith('openrouter') || DBState.db.aiModel.startsWith('claude-3') || DBState.db.aiModel.startsWith('cohere-')|| DBState.db.aiModel === 'kobold'}
         <span class="text-textcolor">Top K</span>
-        <SliderInput min={0} max={100} marginBottom step={1} bind:value={$DataBase.top_k} disableable/>
+        <SliderInput min={0} max={100} marginBottom step={1} bind:value={DBState.db.top_k} disableable/>
     {/if}
-    {#if $DataBase.aiModel.startsWith('openrouter')}
+    {#if DBState.db.aiModel.startsWith('openrouter')}
         <span class="text-textcolor">Min P</span>
-        <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.min_p} disableable/>
+        <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={DBState.db.min_p} disableable/>
 
     {/if}
-    {#if $DataBase.aiModel.startsWith('openrouter') || $DataBase.aiModel === 'kobold'}
+    {#if DBState.db.aiModel.startsWith('openrouter') || DBState.db.aiModel === 'kobold'}
         <span class="text-textcolor">Top A</span>
-        <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={$DataBase.top_a} disableable/>
+        <SliderInput min={0} max={1} marginBottom step={0.01} fixed={2} bind:value={DBState.db.top_a} disableable/>
 
         <span class="text-textcolor">Repetition penalty</span>
-        <SliderInput min={0} max={2} marginBottom step={0.01} fixed={2} bind:value={$DataBase.repetition_penalty} disableable/>
+        <SliderInput min={0} max={2} marginBottom step={0.01} fixed={2} bind:value={DBState.db.repetition_penalty} disableable/>
 
     {/if}
-    {#if $DataBase.aiModel === 'textgen_webui' || $DataBase.aiModel === 'mancer' || $DataBase.aiModel.startsWith('local_') || $DataBase.aiModel.startsWith('hf:::')}
+    {#if DBState.db.aiModel === 'textgen_webui' || DBState.db.aiModel === 'mancer' || DBState.db.aiModel.startsWith('local_') || DBState.db.aiModel.startsWith('hf:::')}
         <span class="text-textcolor">Repetition Penalty</span>
-        <SliderInput min={1} max={1.5} step={0.01} fixed={2} marginBottom bind:value={$DataBase.ooba.repetition_penalty}/>
+        <SliderInput min={1} max={1.5} step={0.01} fixed={2} marginBottom bind:value={DBState.db.ooba.repetition_penalty}/>
         <span class="text-textcolor">Length Penalty</span>
-        <SliderInput min={-5} max={5} step={0.05} marginBottom fixed={2} bind:value={$DataBase.ooba.length_penalty}/>
+        <SliderInput min={-5} max={5} step={0.05} marginBottom fixed={2} bind:value={DBState.db.ooba.length_penalty}/>
         <span class="text-textcolor">Top K</span>
-        <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.ooba.top_k} />
+        <SliderInput min={0} max={100} step={1} marginBottom bind:value={DBState.db.ooba.top_k} />
         <span class="text-textcolor">Top P</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_p}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ooba.top_p}/>
         <span class="text-textcolor">Typical P</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.typical_p}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ooba.typical_p}/>
         <span class="text-textcolor">Top A</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ooba.top_a}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ooba.top_a}/>
         <span class="text-textcolor">No Repeat n-gram Size</span>
-        <SliderInput min={0} max={20} step={1} marginBottom bind:value={$DataBase.ooba.no_repeat_ngram_size}/>
+        <SliderInput min={0} max={20} step={1} marginBottom bind:value={DBState.db.ooba.no_repeat_ngram_size}/>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.ooba.do_sample} name={'Do Sample'}/>
+            <Check bind:check={DBState.db.ooba.do_sample} name={'Do Sample'}/>
         </div>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.ooba.add_bos_token} name={'Add BOS Token'}/>
+            <Check bind:check={DBState.db.ooba.add_bos_token} name={'Add BOS Token'}/>
         </div>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.ooba.ban_eos_token} name={'Ban EOS Token'}/>
+            <Check bind:check={DBState.db.ooba.ban_eos_token} name={'Ban EOS Token'}/>
         </div>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
+            <Check bind:check={DBState.db.ooba.skip_special_tokens} name={'Skip Special Tokens'}/>
         </div>
         <div class="flex items-center mt-4">
-            <Check check={!!$DataBase.localStopStrings} name={language.customStopWords} onChange={() => {
-                if(!$DataBase.localStopStrings){
-                    $DataBase.localStopStrings = []
+            <Check check={!!DBState.db.localStopStrings} name={language.customStopWords} onChange={() => {
+                if(!DBState.db.localStopStrings){
+                    DBState.db.localStopStrings = []
                 }
                 else{
-                    $DataBase.localStopStrings = null
+                    DBState.db.localStopStrings = null
                 }
             }} />
         </div>
-        {#if $DataBase.localStopStrings}
+        {#if DBState.db.localStopStrings}
             <div class="flex flex-col p-2 rounded border border-selected mt-2 gap-1">
                 <div class="p-2">
                     <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" onclick={() => {
-                        let localStopStrings = $DataBase.localStopStrings
+                        let localStopStrings = DBState.db.localStopStrings
                         localStopStrings.push('')
-                        $DataBase.localStopStrings = localStopStrings
+                        DBState.db.localStopStrings = localStopStrings
                     }}><PlusIcon /></button>
                 </div>
-                {#each $DataBase.localStopStrings as stopString, i}
+                {#each DBState.db.localStopStrings as stopString, i}
                     <div class="flex w-full">
                         <div class="flex-grow">
-                            <TextInput marginBottom bind:value={$DataBase.localStopStrings[i]} fullwidth fullh/>
+                            <TextInput marginBottom bind:value={DBState.db.localStopStrings[i]} fullwidth fullh/>
                         </div>
                         <div>
                             <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" onclick={() => {
-                                let localStopStrings = $DataBase.localStopStrings
+                                let localStopStrings = DBState.db.localStopStrings
                                 localStopStrings.splice(i, 1)
-                                $DataBase.localStopStrings = localStopStrings
+                                DBState.db.localStopStrings = localStopStrings
                             }}><TrashIcon /></button>
                         </div>
                     </div>
@@ -400,80 +400,80 @@
         <div class="flex flex-col p-3 rounded-md border-selected border mt-4">
             <ChatFormatSettings />
         </div>
-        <Check bind:check={$DataBase.ooba.formating.useName} name={language.useNamePrefix}/>
+        <Check bind:check={DBState.db.ooba.formating.useName} name={language.useNamePrefix}/>
     
-    {:else if $DataBase.aiModel.startsWith('novelai')}
+    {:else if DBState.db.aiModel.startsWith('novelai')}
         <div class="flex flex-col p-3 bg-darkbg mt-4">
             <span class="text-textcolor">Starter</span>
-            <TextInput bind:value={$DataBase.NAIsettings.starter} placeholder={'⁂'} />
+            <TextInput bind:value={DBState.db.NAIsettings.starter} placeholder={'⁂'} />
             <span class="text-textcolor">Seperator</span>
-            <TextInput bind:value={$DataBase.NAIsettings.seperator} placeholder={"\\n"}/>
+            <TextInput bind:value={DBState.db.NAIsettings.seperator} placeholder={"\\n"}/>
         </div>
         <span class="text-textcolor">Top P</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topP}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.topP}/>
         <span class="text-textcolor">Top K</span>
-        <SliderInput min={0} max={100} step={1} marginBottom bind:value={$DataBase.NAIsettings.topK}/>
+        <SliderInput min={0} max={100} step={1} marginBottom bind:value={DBState.db.NAIsettings.topK}/>
         <span class="text-textcolor">Top A</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.topA}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.topA}/>
         <span class="text-textcolor">Tailfree Sampling</span>
-        <SliderInput min={0} max={1} step={0.001} marginBottom fixed={3} bind:value={$DataBase.NAIsettings.tailFreeSampling}/>
+        <SliderInput min={0} max={1} step={0.001} marginBottom fixed={3} bind:value={DBState.db.NAIsettings.tailFreeSampling}/>
         <span class="text-textcolor">Typical P</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.typicalp}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.typicalp}/>
         <span class="text-textcolor">Repetition Penalty</span>
-        <SliderInput min={0} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenalty}/>
+        <SliderInput min={0} max={3} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.repetitionPenalty}/>
         <span class="text-textcolor">Repetition Penalty Range</span>
-        <SliderInput min={0} max={8192} step={1} marginBottom fixed={0} bind:value={$DataBase.NAIsettings.repetitionPenaltyRange}/>
+        <SliderInput min={0} max={8192} step={1} marginBottom fixed={0} bind:value={DBState.db.NAIsettings.repetitionPenaltyRange}/>
         <span class="text-textcolor">Repetition Penalty Slope</span>
-        <SliderInput min={0} max={10} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.repetitionPenaltySlope}/>
+        <SliderInput min={0} max={10} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.repetitionPenaltySlope}/>
         <span class="text-textcolor">Frequency Penalty</span>
-        <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.frequencyPenalty}/>
+        <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.frequencyPenalty}/>
         <span class="text-textcolor">Presence Penalty</span>
-        <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.presencePenalty}/>
+        <SliderInput min={-2} max={2} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.presencePenalty}/>
         <span class="text-textcolor">Mirostat LR</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_lr}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.mirostat_lr}/>
         <span class="text-textcolor">Mirostat Tau</span>
-        <SliderInput min={0} max={6} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.mirostat_tau}/>
+        <SliderInput min={0} max={6} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.mirostat_tau}/>
         <span class="text-textcolor">Cfg Scale</span>
-        <SliderInput min={1} max={3} step={0.01} marginBottom fixed={2} bind:value={$DataBase.NAIsettings.cfg_scale}/>
+        <SliderInput min={1} max={3} step={0.01} marginBottom fixed={2} bind:value={DBState.db.NAIsettings.cfg_scale}/>
 
-    {:else if $DataBase.aiModel.startsWith('novellist')}
+    {:else if DBState.db.aiModel.startsWith('novellist')}
         <span class="text-textcolor">Top P</span>
-        <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_p}/>
+        <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ainconfig.top_p}/>
         <span class="text-textcolor">Reputation Penalty</span>
-        <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen}/>
+        <SliderInput min={0} max={2} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ainconfig.rep_pen}/>
         <span class="text-textcolor">Reputation Penalty Range</span>
-        <SliderInput min={0} max={2048} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_range}/>
+        <SliderInput min={0} max={2048} step={1} marginBottom fixed={2} bind:value={DBState.db.ainconfig.rep_pen_range}/>
         <span class="text-textcolor">Reputation Penalty Slope</span>
-        <SliderInput min={0} max={10} step={0.1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.rep_pen_slope}/>
+        <SliderInput min={0} max={10} step={0.1} marginBottom fixed={2} bind:value={DBState.db.ainconfig.rep_pen_slope}/>
         <span class="text-textcolor">Top K</span>
-        <SliderInput min={1} max={500} step={1} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_k}/>
+        <SliderInput min={1} max={500} step={1} marginBottom fixed={2} bind:value={DBState.db.ainconfig.top_k}/>
         <span class="text-textcolor">Top A</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.top_a}/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ainconfig.top_a}/>
         <span class="text-textcolor">Typical P</span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.ainconfig.typical_p}/>
-    {:else if $DataBase.aiModel.startsWith('claude')}
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.ainconfig.typical_p}/>
+    {:else if DBState.db.aiModel.startsWith('claude')}
         <span class="text-textcolor">Top P <Help key="topP"/></span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p} disableable/>
-    {:else if $DataBase.aiModel.startsWith('kobold')}
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.top_p} disableable/>
+    {:else if DBState.db.aiModel.startsWith('kobold')}
     <span class="text-textcolor">Top P <Help key="topP"/></span>
-    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p} disableable/>
+    <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.top_p} disableable/>
     {:else}
 
 
         <span class="text-textcolor">Top P <Help key="topP"/></span>
-        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={$DataBase.top_p} disableable/>
+        <SliderInput min={0} max={1} step={0.01} marginBottom fixed={2} bind:value={DBState.db.top_p} disableable/>
 
         <span class="text-textcolor">{language.frequencyPenalty} <Help key="frequencyPenalty"/></span>
-        <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.frequencyPenalty} disableable/>
+        <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={DBState.db.frequencyPenalty} disableable/>
         <span class="text-textcolor">{language.presensePenalty} <Help key="presensePenalty"/></span>
-        <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={$DataBase.PresensePenalty} disableable/>
+        <SliderInput min={0} max={200} marginBottom fixed={2} multiple={0.01} bind:value={DBState.db.PresensePenalty} disableable/>
     {/if}
 
-    {#if ($DataBase.reverseProxyOobaMode && $DataBase.aiModel === 'reverse_proxy') || ($DataBase.aiModel === 'ooba')}
-        <OobaSettings instructionMode={$DataBase.aiModel === 'ooba'} />
+    {#if (DBState.db.reverseProxyOobaMode && DBState.db.aiModel === 'reverse_proxy') || (DBState.db.aiModel === 'ooba')}
+        <OobaSettings instructionMode={DBState.db.aiModel === 'ooba'} />
     {/if}
 
-    {#if $DataBase.aiModel.startsWith('openrouter')}
+    {#if DBState.db.aiModel.startsWith('openrouter')}
         <OpenrouterSettings />
     {/if}
 
@@ -488,30 +488,30 @@
                 <th class="font-medium">{language.value}</th>
                 <th>
                     <button class="font-medium cursor-pointer hover:text-green-500 w-full flex justify-center items-center" onclick={() => {
-                        let bia = $DataBase.bias
+                        let bia = DBState.db.bias
                         bia.push(['', 0])
-                        $DataBase.bias = bia
+                        DBState.db.bias = bia
                     }}><PlusIcon /></button>
                 </th>
             </tr>
-            {#if $DataBase.bias.length === 0}
+            {#if DBState.db.bias.length === 0}
                 <tr>
                     <td colspan="3" class="text-textcolor2">{language.noBias}</td>
                 </tr>
             {/if}
-            {#each $DataBase.bias as bias, i}
+            {#each DBState.db.bias as bias, i}
                 <tr>
                     <td class="font-medium truncate">
-                        <TextInput bind:value={$DataBase.bias[i][0]} size="lg" fullwidth/>
+                        <TextInput bind:value={DBState.db.bias[i][0]} size="lg" fullwidth/>
                     </td>
                     <td class="font-medium truncate">
-                        <NumberInput bind:value={$DataBase.bias[i][1]} max={100} min={-101} size="lg" fullwidth/>
+                        <NumberInput bind:value={DBState.db.bias[i][1]} max={100} min={-101} size="lg" fullwidth/>
                     </td>
                     <td>
                         <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" onclick={() => {
-                            let bia = $DataBase.bias
+                            let bia = DBState.db.bias
                             bia.splice(i, 1)
-                            $DataBase.bias = bia
+                            DBState.db.bias = bia
                         }}><TrashIcon /></button>
                     </td>
                 </tr>
@@ -520,20 +520,20 @@
         </table>
         <div class="text-textcolor2 mt-2 flex items-center gap-2">
             <button class="font-medium cursor-pointer hover:text-textcolor gap-2" onclick={() => {
-                const data = JSON.stringify($DataBase.bias, null, 2)
+                const data = JSON.stringify(DBState.db.bias, null, 2)
                 downloadFile('bias.json', data)
             }}><DownloadIcon /></button>
             <button class="font-medium cursor-pointer hover:text-textcolor" onclick={async () => {
                 const sel = await selectSingleFile(['json'])
                 const utf8 = new TextDecoder().decode(sel.data)
                 if(Array.isArray(JSON.parse(utf8))){
-                    $DataBase.bias = JSON.parse(utf8)
+                    DBState.db.bias = JSON.parse(utf8)
                 }
             }}><FolderUpIcon /></button>
         </div>
     </Arcodion>
 
-    {#if $DataBase.aiModel === 'reverse_proxy'}
+    {#if DBState.db.aiModel === 'reverse_proxy'}
     <Arcodion styled name="{language.additionalParams} " help="additionalParams">
         <table class="contain w-full max-w-full tabler">
             <tbody>
@@ -542,30 +542,30 @@
                 <th class="font-medium">{language.value}</th>
                 <th>
                     <button class="font-medium cursor-pointer hover:text-green-500 w-full flex justify-center items-center" onclick={() => {
-                        let additionalParams = $DataBase.additionalParams
+                        let additionalParams = DBState.db.additionalParams
                         additionalParams.push(['', ''])
-                        $DataBase.additionalParams = additionalParams
+                        DBState.db.additionalParams = additionalParams
                     }}><PlusIcon /></button>
                 </th>
             </tr>
-            {#if $DataBase.bias.length === 0}
+            {#if DBState.db.bias.length === 0}
                 <tr class="text-textcolor2">
                     <td colspan="3">{language.noData}</td>
                 </tr>
             {/if}
-            {#each $DataBase.additionalParams as additionalParams, i}
+            {#each DBState.db.additionalParams as additionalParams, i}
                 <tr>
                     <td class="font-medium truncate">
-                        <TextInput bind:value={$DataBase.additionalParams[i][0]} size="lg" fullwidth/>
+                        <TextInput bind:value={DBState.db.additionalParams[i][0]} size="lg" fullwidth/>
                     </td>
                     <td class="font-medium truncate">
-                        <TextInput bind:value={$DataBase.additionalParams[i][1]} size="lg" fullwidth/>
+                        <TextInput bind:value={DBState.db.additionalParams[i][1]} size="lg" fullwidth/>
                     </td>
                     <td>
                         <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" onclick={() => {
-                            let additionalParams = $DataBase.additionalParams
+                            let additionalParams = DBState.db.additionalParams
                             additionalParams.splice(i, 1)
-                            $DataBase.additionalParams = additionalParams
+                            DBState.db.additionalParams = additionalParams
                         }}><TrashIcon /></button>
                     </td>
                 </tr>
@@ -577,29 +577,29 @@
 
 
     <Arcodion styled name={language.promptTemplate}>
-        {#if $DataBase.promptTemplate}
+        {#if DBState.db.promptTemplate}
             {#if submenu !== -1}
                 <PromptSettings mode='inline' subMenu={1} />
             {/if}
-            <Check check={!!$DataBase.promptTemplate} name={language.usePromptTemplate} className="mt-4" onChange={async ()=>{
+            <Check check={!!DBState.db.promptTemplate} name={language.usePromptTemplate} className="mt-4" onChange={async ()=>{
                 const conf = await alertConfirm(language.resetPromptTemplateConfirm)
                 
                 if(conf){
-                    $DataBase.promptTemplate = undefined
+                    DBState.db.promptTemplate = undefined
                 }
                 else{
-                    $DataBase.promptTemplate = $DataBase.promptTemplate
+                    DBState.db.promptTemplate = DBState.db.promptTemplate
                 }
             }}/>
         {:else}
             <Check check={false} name={language.usePromptTemplate} onChange={() => {
-                $DataBase.promptTemplate = []
+                DBState.db.promptTemplate = []
             }}/>
         {/if}
     </Arcodion>
     
     <Arcodion styled name={language.moduleIntergration} help="moduleIntergration">
-        <TextAreaInput bind:value={$DataBase.moduleIntergration} fullwidth height={"32"} autocomplete="off"/>
+        <TextAreaInput bind:value={DBState.db.moduleIntergration} fullwidth height={"32"} autocomplete="off"/>
     </Arcodion>
     {#if submenu !== -1}
         <Button onclick={() => {$openPresetList = true}} className="mt-4">{language.presets}</Button>
@@ -607,20 +607,20 @@
 {/if}
 
 {#if submenu === 2 || submenu === -1}
-    {#if !$DataBase.promptTemplate}
+    {#if !DBState.db.promptTemplate}
         <span class="text-textcolor">{language.mainPrompt} <Help key="mainprompt"/></span>
-        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.mainPrompt}></TextAreaInput>
+        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={DBState.db.mainPrompt}></TextAreaInput>
         <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.mainPrompt} {language.tokens}</span>
         <span class="text-textcolor">{language.jailbreakPrompt} <Help key="jailbreak"/></span>
-        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.jailbreak}></TextAreaInput>
+        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={DBState.db.jailbreak}></TextAreaInput>
         <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.jailbreak} {language.tokens}</span>
         <span class="text-textcolor">{language.globalNote} <Help key="globalNote"/></span>
-        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={$DataBase.globalNote}></TextAreaInput>
+        <TextAreaInput fullwidth autocomplete="off" height={"32"} bind:value={DBState.db.globalNote}></TextAreaInput>
         <span class="text-textcolor2 mb-6 text-sm mt-2">{tokens.globalNote} {language.tokens}</span>  
         <span class="text-textcolor mb-2 mt-4">{language.formatingOrder} <Help key="formatOrder"/></span>
-        <DropList bind:list={$DataBase.formatingOrder} />
+        <DropList bind:list={DBState.db.formatingOrder} />
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.promptPreprocess} name={language.promptPreprocess}/>
+            <Check bind:check={DBState.db.promptPreprocess} name={language.promptPreprocess}/>
         </div>
     {:else if submenu === 2}
         <PromptSettings mode='inline' />
@@ -628,7 +628,7 @@
 {/if}
 
 
-{#if $DataBase.promptTemplate && submenu === -1}
+{#if DBState.db.promptTemplate && submenu === -1}
     <div class="mt-2">
         <Button onclick={goPromptTemplate} size="sm">{language.promptTemplate}</Button>
     </div>
diff --git a/src/lib/Setting/Pages/ChatFormatSettings.svelte b/src/lib/Setting/Pages/ChatFormatSettings.svelte
index 6b335275..5a696fae 100644
--- a/src/lib/Setting/Pages/ChatFormatSettings.svelte
+++ b/src/lib/Setting/Pages/ChatFormatSettings.svelte
@@ -2,12 +2,12 @@
     import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { language } from "src/lang";
 </script>
 
 <span class="text-textcolor">{language.chatFormating}</span>
-<SelectInput bind:value={$DataBase.instructChatTemplate}>
+<SelectInput bind:value={DBState.db.instructChatTemplate}>
     <OptionInput value="chatml">ChatML</OptionInput>
     <OptionInput value="llama3">Llama3</OptionInput>
     <OptionInput value="gpt2">GPT2</OptionInput>
@@ -19,7 +19,7 @@
     <OptionInput value="jinja">Custom (Jinja)</OptionInput>
 </SelectInput>
 
-{#if $DataBase.instructChatTemplate === 'jinja'}
+{#if DBState.db.instructChatTemplate === 'jinja'}
     <span class="text-textcolor">Jinja Template</span>
-    <TextAreaInput fullwidth autocomplete="off" bind:value={$DataBase.JinjaTemplate} />
+    <TextAreaInput fullwidth autocomplete="off" bind:value={DBState.db.JinjaTemplate} />
 {/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte
index c0df2851..7c189653 100644
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { language } from "src/lang";
-    import { DataBase, saveImage } from "src/ts/storage/database";
+    import { DBState, saveImage } from "src/ts/storage/database.svelte";
     import { changeFullscreen, selectSingleFile, sleep } from "src/ts/util";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import Help from "src/lib/Others/Help.svelte";
@@ -22,7 +22,7 @@
         changeColorScheme((e.target as HTMLInputElement).value)
     }
 
-    let submenu = $state($DataBase.useLegacyGUI ? -1 : 0)
+    let submenu = $state(DBState.db.useLegacyGUI ? -1 : 0)
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
@@ -49,78 +49,78 @@
 
 {#if submenu === 0 || submenu === -1}
     <span class="text-textcolor mt-4">{language.theme}</span>
-    <SelectInput className="mt-2" bind:value={$DataBase.theme}>
+    <SelectInput className="mt-2" bind:value={DBState.db.theme}>
         <OptionInput value="" >Standard Risu</OptionInput>
         <OptionInput value="waifu" >Waifulike</OptionInput>
         <OptionInput value="waifuMobile" >WaifuCut</OptionInput>
         <!-- <OptionInput value="custom" >Custom GUI</OptionInput> -->
     </SelectInput>
 
-    {#if $DataBase.theme === "custom"}
+    {#if DBState.db.theme === "custom"}
         <Button className="mt-2" onclick={() => {
             CustomGUISettingMenuStore.set(true)
         }}>{language.defineCustomGUI}</Button>
     {/if}
 
 
-    {#if $DataBase.theme === "waifu"}
+    {#if DBState.db.theme === "waifu"}
         <span class="text-textcolor mt-4">{language.waifuWidth}</span>
-        <SliderInput min={50} max={200} bind:value={$DataBase.waifuWidth} />
-        <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth)}%</span>
+        <SliderInput min={50} max={200} bind:value={DBState.db.waifuWidth} />
+        <span class="text-textcolor2 text-sm">{(DBState.db.waifuWidth)}%</span>
 
         <span class="text-textcolor mt-4">{language.waifuWidth2}</span>
-        <SliderInput min={20} max={150} bind:value={$DataBase.waifuWidth2} />
-        <span class="text-textcolor2 text-sm">{($DataBase.waifuWidth2)}%</span>
+        <SliderInput min={20} max={150} bind:value={DBState.db.waifuWidth2} />
+        <span class="text-textcolor2 text-sm">{(DBState.db.waifuWidth2)}%</span>
     {/if}
 
     <span class="text-textcolor mt-4">{language.colorScheme}</span>
-    <SelectInput className="mt-2" value={$DataBase.colorSchemeName} onchange={onSchemeInputChange}>
+    <SelectInput className="mt-2" value={DBState.db.colorSchemeName} onchange={onSchemeInputChange}>
         {#each colorSchemeList as scheme}
             <OptionInput value={scheme} >{scheme}</OptionInput>
         {/each}
         <OptionInput value="custom" >Custom</OptionInput>
     </SelectInput>
 
-    {#if $DataBase.colorSchemeName === "custom"}
+    {#if DBState.db.colorSchemeName === "custom"}
     <div class="border border-darkborderc p-2 m-2 rounded-md">
-        <SelectInput className="mt-2" value={$DataBase.colorScheme.type} onchange={updateColorScheme}>
+        <SelectInput className="mt-2" value={DBState.db.colorScheme.type} onchange={updateColorScheme}>
             <OptionInput value="light">Light</OptionInput>
             <OptionInput value="dark">Dark</OptionInput>
         </SelectInput>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.bgcolor} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.bgcolor} oninput={updateColorScheme} />
             <span class="ml-2">Background</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.darkbg} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.darkbg} oninput={updateColorScheme} />
             <span class="ml-2">Dark Background</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.borderc} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.borderc} oninput={updateColorScheme} />
             <span class="ml-2">Color 1</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.selected} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.selected} oninput={updateColorScheme} />
             <span class="ml-2">Color 2</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.draculared} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.draculared} oninput={updateColorScheme} />
             <span class="ml-2">Color 3</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.darkBorderc} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.darkBorderc} oninput={updateColorScheme} />
             <span class="ml-2">Color 4</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.darkbutton} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.darkbutton} oninput={updateColorScheme} />
             <span class="ml-2">Color 5</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.textcolor} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.textcolor} oninput={updateColorScheme} />
             <span class="ml-2">Text Color</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.colorScheme.textcolor2} oninput={updateColorScheme} />
+            <ColorInput bind:value={DBState.db.colorScheme.textcolor2} oninput={updateColorScheme} />
             <span class="ml-2">Text Color 2</span>
         </div>
         <div class="flex-grow flex justify-end">
@@ -139,48 +139,48 @@
     {/if}
 
     <span class="text-textcolor mt-4">{language.textColor}</span>
-    <SelectInput className="mt-2" bind:value={$DataBase.textTheme} onchange={updateTextThemeAndCSS}>
+    <SelectInput className="mt-2" bind:value={DBState.db.textTheme} onchange={updateTextThemeAndCSS}>
         <OptionInput value="standard" >{language.classicRisu}</OptionInput>
         <OptionInput value="highcontrast" >{language.highcontrast}</OptionInput>
         <OptionInput value="custom" >Custom</OptionInput>
     </SelectInput>
 
-    {#if $DataBase.textTheme === "custom"}
+    {#if DBState.db.textTheme === "custom"}
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorStandard} oninput={updateTextThemeAndCSS} />
+            <ColorInput bind:value={DBState.db.customTextTheme.FontColorStandard} oninput={updateTextThemeAndCSS} />
             <span class="ml-2">Normal Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalic} oninput={updateTextThemeAndCSS} />
+            <ColorInput bind:value={DBState.db.customTextTheme.FontColorItalic} oninput={updateTextThemeAndCSS} />
             <span class="ml-2">Italic Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorBold} oninput={updateTextThemeAndCSS} />
+            <ColorInput bind:value={DBState.db.customTextTheme.FontColorBold} oninput={updateTextThemeAndCSS} />
             <span class="ml-2">Bold Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput bind:value={$DataBase.customTextTheme.FontColorItalicBold} oninput={updateTextThemeAndCSS} />
+            <ColorInput bind:value={DBState.db.customTextTheme.FontColorItalicBold} oninput={updateTextThemeAndCSS} />
             <span class="ml-2">Italic Bold Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote1} oninput={updateTextThemeAndCSS} />
+            <ColorInput nullable bind:value={DBState.db.customTextTheme.FontColorQuote1} oninput={updateTextThemeAndCSS} />
             <span class="ml-2">Single Quote Text</span>
         </div>
         <div class="flex items-center mt-2">
-            <ColorInput nullable bind:value={$DataBase.customTextTheme.FontColorQuote2} oninput={updateTextThemeAndCSS} />
+            <ColorInput nullable bind:value={DBState.db.customTextTheme.FontColorQuote2} oninput={updateTextThemeAndCSS} />
             <span class="ml-2">Double Quote Text</span>
         </div>
     {/if}
 
     <span class="text-textcolor mt-4">{language.font}</span>
-    <SelectInput className="mt-2" bind:value={$DataBase.font} onchange={updateTextThemeAndCSS}>
+    <SelectInput className="mt-2" bind:value={DBState.db.font} onchange={updateTextThemeAndCSS}>
         <OptionInput value="default" >Default</OptionInput>
         <OptionInput value="timesnewroman" >Times New Roman</OptionInput>
         <OptionInput value="custom" >Custom</OptionInput>
     </SelectInput>
 
-    {#if $DataBase.font === "custom"}
-        <TextInput bind:value={$DataBase.customFont} onchange={updateTextThemeAndCSS} />
+    {#if DBState.db.font === "custom"}
+        <TextInput bind:value={DBState.db.customFont} onchange={updateTextThemeAndCSS} />
     {/if}
 
 {/if}
@@ -188,35 +188,35 @@
 {#if submenu === 1 || submenu === -1}
 
     <span class="text-textcolor mt-4">{language.UISize}</span>
-    <SliderInput  min={50} max={200} bind:value={$DataBase.zoomsize} marginBottom/>
+    <SliderInput  min={50} max={200} bind:value={DBState.db.zoomsize} marginBottom/>
 
     <span class="text-textcolor">{language.lineHeight}</span>
-    <SliderInput  min={0.5} max={3} step={0.05} bind:value={$DataBase.lineHeight} marginBottom/>
+    <SliderInput  min={0.5} max={3} step={0.05} bind:value={DBState.db.lineHeight} marginBottom/>
 
     <span class="text-textcolor">{language.iconSize}</span>
-    <SliderInput min={50} max={200} bind:value={$DataBase.iconsize} marginBottom/>
+    <SliderInput min={50} max={200} bind:value={DBState.db.iconsize} marginBottom/>
 
     <span class="text-textcolor">{language.textAreaSize}</span>
-    <SliderInput min={-5} max={5} bind:value={$DataBase.textAreaSize} onchange={updateGuisize} customText={guiSizeText($DataBase.textAreaSize)} marginBottom/>
+    <SliderInput min={-5} max={5} bind:value={DBState.db.textAreaSize} onchange={updateGuisize} customText={guiSizeText(DBState.db.textAreaSize)} marginBottom/>
 
     <span class="text-textcolor">{language.textAreaTextSize}</span>
-    <SliderInput min={0} max={3} bind:value={$DataBase.textAreaTextSize} onchange={updateGuisize} customText={guiSizeText($DataBase.textAreaTextSize)} marginBottom/>
+    <SliderInput min={0} max={3} bind:value={DBState.db.textAreaTextSize} onchange={updateGuisize} customText={guiSizeText(DBState.db.textAreaTextSize)} marginBottom/>
 
     <span class="text-textcolor">{language.sideBarSize}</span>
-    <SliderInput min={0} max={3} bind:value={$DataBase.sideBarSize} onchange={updateGuisize} customText={guiSizeText($DataBase.sideBarSize)} marginBottom/>
+    <SliderInput min={0} max={3} bind:value={DBState.db.sideBarSize} onchange={updateGuisize} customText={guiSizeText(DBState.db.sideBarSize)} marginBottom/>
 
     <span class="text-textcolor">{language.assetWidth}</span>
-    <SliderInput min={-1} max={40} step={1} bind:value={$DataBase.assetWidth} customText={
-        ($DataBase.assetWidth === -1) ? "Unlimited" : 
-        ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)
+    <SliderInput min={-1} max={40} step={1} bind:value={DBState.db.assetWidth} customText={
+        (DBState.db.assetWidth === -1) ? "Unlimited" : 
+        (DBState.db.assetWidth === 0) ? "Hidden" : (`${(DBState.db.assetWidth).toFixed(1)} rem`)
     } marginBottom />
 
     <span class="text-textcolor">{language.animationSpeed}</span>
-    <SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={$DataBase.animationSpeed} onchange={updateAnimationSpeed} marginBottom />
+    <SliderInput min={0} max={1} step={0.05} fixed={2} bind:value={DBState.db.animationSpeed} onchange={updateAnimationSpeed} marginBottom />
 
-    {#if $DataBase.showMemoryLimit}
+    {#if DBState.db.showMemoryLimit}
         <span class="text-textcolor">{language.memoryLimitThickness}</span>
-        <SliderInput min={1} max={500} step={1} bind:value={$DataBase.memoryLimitThickness} marginBottom />
+        <SliderInput min={1} max={500} step={1} bind:value={DBState.db.memoryLimitThickness} marginBottom />
     {/if}
 
 {/if}
@@ -224,56 +224,56 @@
 {#if submenu === 2 || submenu === -1}
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
+        <Check bind:check={DBState.db.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.showMemoryLimit} name={language.showMemoryLimit}/>
+        <Check bind:check={DBState.db.showMemoryLimit} name={language.showMemoryLimit}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.hideRealm} name={language.hideRealm}/>
+        <Check bind:check={DBState.db.hideRealm} name={language.hideRealm}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check check={$DataBase.customBackground !== ''} onChange={async (check) => {
+        <Check check={DBState.db.customBackground !== ''} onChange={async (check) => {
             if(check){
-                $DataBase.customBackground = '-'
+                DBState.db.customBackground = '-'
                 const d = await selectSingleFile(['png', 'webp', 'gif'])
                 if(!d){
-                    $DataBase.customBackground = ''
+                    DBState.db.customBackground = ''
                     return
                 }
                 const img = await saveImage(d.data)
-                $DataBase.customBackground = img
+                DBState.db.customBackground = img
             }
             else{
-                $DataBase.customBackground = ''
+                DBState.db.customBackground = ''
             }
         }} name={language.useCustomBackground}></Check>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.playMessage} name={language.playMessage}/>
+        <Check bind:check={DBState.db.playMessage} name={language.playMessage}/>
         <span> <Help key="msgSound" name={language.playMessage}/></span>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.roundIcons} name={language.roundIcons}/>
+        <Check bind:check={DBState.db.roundIcons} name={language.roundIcons}/>
     </div>
 
-    {#if $DataBase.textScreenColor}
+    {#if DBState.db.textScreenColor}
         <div class="flex items-center mt-2">
             <Check check={true} onChange={() => {
-                $DataBase.textScreenColor = null
+                DBState.db.textScreenColor = null
             }} name={language.textBackgrounds} hiddenName/>
-            <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
+            <input type="color" class="style2 text-sm mr-2" bind:value={DBState.db.textScreenColor} >
             <span>{language.textBackgrounds}</span>
         </div>
     {:else}
         <div class="flex items-center mt-2">
             <Check check={false} onChange={() => {
-                $DataBase.textScreenColor = "#121212"
+                DBState.db.textScreenColor = "#121212"
             }} name={language.textBackgrounds}/>
         </div>
 
@@ -281,87 +281,87 @@
     {/if}
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.textBorder} name={language.textBorder}/>
+        <Check bind:check={DBState.db.textBorder} name={language.textBorder}/>
     </div>
 
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.textScreenRounded} name={language.textScreenRound}/>
+        <Check bind:check={DBState.db.textScreenRounded} name={language.textScreenRound}/>
     </div>
 
-    {#if $DataBase.textScreenBorder}
+    {#if DBState.db.textScreenBorder}
         <div class="flex items-center mt-2">
             <Check check={true} onChange={() => {
-                $DataBase.textScreenBorder = null
+                DBState.db.textScreenBorder = null
             }} name={language.textScreenBorder} hiddenName/>
-            <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
+            <input type="color" class="style2 text-sm mr-2" bind:value={DBState.db.textScreenBorder} >
             <span>{language.textScreenBorder}</span>
         </div>
     {:else}
         <div class="flex items-center mt-2">
             <Check check={false} onChange={() => {
-                $DataBase.textScreenBorder = "#121212"
+                DBState.db.textScreenBorder = "#121212"
             }} name={language.textScreenBorder}/>
         </div>
     {/if}
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
+        <Check bind:check={DBState.db.useChatCopy} name={language.useChatCopy}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
+        <Check bind:check={DBState.db.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.useLegacyGUI} name={language.useLegacyGUI}/>
+        <Check bind:check={DBState.db.useLegacyGUI} name={language.useLegacyGUI}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.hideApiKey} name={language.hideApiKeys}/>
+        <Check bind:check={DBState.db.hideApiKey} name={language.hideApiKeys}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.unformatQuotes} name={language.unformatQuotes}/>
+        <Check bind:check={DBState.db.unformatQuotes} name={language.unformatQuotes}/>
     </div>
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.customQuotes} name={language.customQuotes}/>
+        <Check bind:check={DBState.db.customQuotes} name={language.customQuotes}/>
     </div>
 
-    {#if $DataBase.customQuotes}
+    {#if DBState.db.customQuotes}
         <span class="text-textcolor mt-4">{language.leadingSingleQuote}</span>
-        <TextInput bind:value={$DataBase.customQuotesData[0]} />
+        <TextInput bind:value={DBState.db.customQuotesData[0]} />
 
         <span class="text-textcolor mt-4">{language.trailingSingleQuote}</span>
-        <TextInput bind:value={$DataBase.customQuotesData[1]} />
+        <TextInput bind:value={DBState.db.customQuotesData[1]} />
 
         <span class="text-textcolor mt-4">{language.leadingDoubleQuote}</span>
-        <TextInput bind:value={$DataBase.customQuotesData[2]} />
+        <TextInput bind:value={DBState.db.customQuotesData[2]} />
 
         <span class="text-textcolor mt-4">{language.trailingDoubleQuote}</span>
-        <TextInput bind:value={$DataBase.customQuotesData[3]} />
+        <TextInput bind:value={DBState.db.customQuotesData[3]} />
     {/if}
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.betaMobileGUI} name={language.betaMobileGUI}/>
+        <Check bind:check={DBState.db.betaMobileGUI} name={language.betaMobileGUI}/>
         <Help key="betaMobileGUI"/>
     </div>
 
-    {#if $DataBase.showUnrecommended}
+    {#if DBState.db.showUnrecommended}
         <div class="flex items-center mt-2">
-            <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
+            <Check bind:check={DBState.db.useChatSticker} name={language.useChatSticker}/>
             <Help key="unrecommended" name={language.useChatSticker} unrecommended/>
         </div>
 
         <div class="flex items-center mt-2">
-            <Check bind:check={$DataBase.useAdvancedEditor} name={language.useAdvancedEditor}/>
+            <Check bind:check={DBState.db.useAdvancedEditor} name={language.useAdvancedEditor}/>
             <Help key="unrecommended" unrecommended/>
         </div>    
     {/if}
 
     <span class="text-textcolor mt-4">{language.customCSS}<Help key="customCSS" /></span>
-    <TextAreaInput bind:value={$DataBase.customCSS} onInput={() => {
+    <TextAreaInput bind:value={DBState.db.customCSS} onInput={() => {
         updateTextThemeAndCSS()
     }} />
 
diff --git a/src/lib/Setting/Pages/FilesSettings.svelte b/src/lib/Setting/Pages/FilesSettings.svelte
index 56ab2250..4a2d2cc7 100644
--- a/src/lib/Setting/Pages/FilesSettings.svelte
+++ b/src/lib/Setting/Pages/FilesSettings.svelte
@@ -2,7 +2,7 @@
     import { language } from "src/lang";
     import { alertConfirm } from "src/ts/alert";
     import { checkDriver } from "src/ts/drive/drive";
-    import { DataBase } from "src/ts/storage/database";
+    import { DataBase } from "src/ts/storage/database.svelte";
     import { isNodeServer, isTauri } from "src/ts/storage/globalApi";
     import { persistantStorageRecommended } from "src/ts/storage/persistant";
 
diff --git a/src/lib/Setting/Pages/GlobalLoreBookSettings.svelte b/src/lib/Setting/Pages/GlobalLoreBookSettings.svelte
index 29135bb0..643fff7c 100644
--- a/src/lib/Setting/Pages/GlobalLoreBookSettings.svelte
+++ b/src/lib/Setting/Pages/GlobalLoreBookSettings.svelte
@@ -2,14 +2,14 @@
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
     import LoreBookSetting from "src/lib/SideBars/LoreBook/LoreBookSetting.svelte";
-    import { DataBase } from "src/ts/storage/database";
-  interface Props {
-    openLoreList?: boolean;
-  }
+    import { DBState } from "src/ts/storage/database.svelte";
+    interface Props {
+      openLoreList?: boolean;
+    }
 
   let { openLoreList = $bindable(false) }: Props = $props();
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.globalLoreBook} <Help key="lorebook" /></h2>
-<button onclick={() => {openLoreList = true}} class="mt-4 drop-shadow-lg p-3 flex justify-center items-center ml-2 mr-2 rounded-lg bg-selected mb-4">{$DataBase.loreBook[$DataBase.loreBookPage].name}</button>
+<button onclick={() => {openLoreList = true}} class="mt-4 drop-shadow-lg p-3 flex justify-center items-center ml-2 mr-2 rounded-lg bg-selected mb-4">{DBState.db.loreBook[DBState.db.loreBookPage].name}</button>
 
 <LoreBookSetting globalMode />
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/GlobalRegex.svelte b/src/lib/Setting/Pages/GlobalRegex.svelte
index db170050..cb991290 100644
--- a/src/lib/Setting/Pages/GlobalRegex.svelte
+++ b/src/lib/Setting/Pages/GlobalRegex.svelte
@@ -2,22 +2,22 @@
     import { DownloadIcon, FolderUpIcon, PlusIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { exportRegex, importRegex } from "src/ts/process/scripts";
     import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.globalRegexScript} <Help key="regexScript" /></h2>
-<RegexList bind:value={$DataBase.globalscript} />
+<RegexList bind:value={DBState.db.globalscript} />
 <div class="text-textcolor2 mt-2 flex gap-2">
     <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
-        let script = $DataBase.globalscript
+        let script = DBState.db.globalscript
         script.push({
             comment: "",
             in: "",
             out: "",
             type: "editinput"
         })
-        $DataBase.globalscript = script
+        DBState.db.globalscript = script
     }}><PlusIcon /></button>
     <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
         exportRegex()
diff --git a/src/lib/Setting/Pages/LanguageSettings.svelte b/src/lib/Setting/Pages/LanguageSettings.svelte
index 0a4c3b13..2c28d7e2 100644
--- a/src/lib/Setting/Pages/LanguageSettings.svelte
+++ b/src/lib/Setting/Pages/LanguageSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { changeLanguage, language } from "src/lang";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { sleep } from "src/ts/util";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
@@ -18,8 +18,8 @@
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.language}</h2>
 
 <span class="text-textcolor mt-4">{language.UiLanguage}</span>
-<SelectInput className="mt-2" bind:value={$DataBase.language} onchange={async () => {
-    if($DataBase.language === 'translang'){
+<SelectInput className="mt-2" bind:value={DBState.db.language} onchange={async () => {
+    if(DBState.db.language === 'translang'){
 
         const j = await alertSelect([
             'Continue Translating Existing Language',
@@ -46,10 +46,10 @@
             alertNormal("Downloaded JSON, translate it, and send it to the dev by discord DM and email. I will add it to the next version.")
         }
 
-        $DataBase.language = 'en'
+        DBState.db.language = 'en'
     }
     await sleep(10)
-    changeLanguage($DataBase.language)
+    changeLanguage(DBState.db.language)
     langChanged = true
 }}>
     <OptionInput value="de" >Deutsch</OptionInput>
@@ -64,12 +64,12 @@
     <span class="bg-red-500 text-sm">Close the settings to take effect</span>
 {/if}
 <span class="text-textcolor mt-4">{language.translatorLanguage}</span>
-<SelectInput className="mt-2 mb-4" bind:value={$DataBase.translator}>
+<SelectInput className="mt-2 mb-4" bind:value={DBState.db.translator}>
     <OptionInput value="" >{language.disabled}</OptionInput>
     <OptionInput value="ko" >Korean</OptionInput>
     <OptionInput value="ru" >Russian</OptionInput>
     <OptionInput value="zh" >Chinese</OptionInput>
-    {#if $DataBase.translatorType === 'google'}
+    {#if DBState.db.translatorType === 'google'}
         <OptionInput value="zh-TW" >Chinese (Traditional)</OptionInput>
     {/if}
     <OptionInput value="ja" >Japanese</OptionInput>
@@ -82,44 +82,44 @@
     <OptionInput value="uk" >Ukranian</OptionInput>
 </SelectInput>
 
-{#if $DataBase.translator}
+{#if DBState.db.translator}
     <span class="text-textcolor mt-4">{language.translatorType}</span>
-    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.translatorType}>
+    <SelectInput className="mt-2 mb-4" bind:value={DBState.db.translatorType}>
         <OptionInput value="google" >Google</OptionInput>
         <OptionInput value="deepl" >DeepL</OptionInput>
         <OptionInput value="llm" >Ax. Model</OptionInput>
         <OptionInput value="deeplX" >DeepL X</OptionInput>
     </SelectInput>
 
-    {#if $DataBase.translatorType === 'deepl'}
+    {#if DBState.db.translatorType === 'deepl'}
         {#if !isTauri}
             <span class="text-draculared text-xs ml-2">{language.webdeeplwarn}</span>
         {/if}
         <span class="text-textcolor mt-4">{language.deeplKey}</span>
-        <TextInput bind:value={$DataBase.deeplOptions.key} />
+        <TextInput bind:value={DBState.db.deeplOptions.key} />
 
         <div class="flex items-center mt-2">
-            <Check bind:check={$DataBase.deeplOptions.freeApi} name={language.deeplFreeKey}/>
+            <Check bind:check={DBState.db.deeplOptions.freeApi} name={language.deeplFreeKey}/>
         </div>
     {/if}
 
-    {#if $DataBase.translatorType === 'deeplX'}
+    {#if DBState.db.translatorType === 'deeplX'}
         <span class="text-textcolor mt-4" placeholder="http://localhost:1188">{language.deeplXUrl}</span>
-        <TextInput bind:value={$DataBase.deeplXOptions.url} />
+        <TextInput bind:value={DBState.db.deeplXOptions.url} />
         
         <span class="text-textcolor mt-4">{language.deeplXToken}</span>
-        <TextInput bind:value={$DataBase.deeplXOptions.token} />
+        <TextInput bind:value={DBState.db.deeplXOptions.token} />
     {/if}
     
-    {#if $DataBase.translatorType === 'llm'}
+    {#if DBState.db.translatorType === 'llm'}
         <span class="text-textcolor mt-4">{language.translationResponseSize}</span>
-        <NumberInput min={0} max={2048} marginBottom={true} bind:value={$DataBase.translatorMaxResponse}/>
-        <TextAreaInput bind:value={$DataBase.translatorPrompt} placeholder={"You are a translator. translate the following html or text into {{slot}}. do not output anything other than the translation."}/>
+        <NumberInput min={0} max={2048} marginBottom={true} bind:value={DBState.db.translatorMaxResponse}/>
+        <TextAreaInput bind:value={DBState.db.translatorPrompt} placeholder={"You are a translator. translate the following html or text into {{slot}}. do not output anything other than the translation."}/>
     {/if}
 
-    {#if $DataBase.translatorType === 'google'}
+    {#if DBState.db.translatorType === 'google'}
         <span class="text-textcolor mt-4">Translator Input Language</span>
-        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.translatorInputLanguage}>
+        <SelectInput className="mt-2 mb-4" bind:value={DBState.db.translatorInputLanguage}>
             <OptionInput value="auto">Auto</OptionInput>
             <OptionInput value="en">English</OptionInput>
             <OptionInput value="zh">Chinese</OptionInput>
@@ -134,17 +134,17 @@
 
 
     <div class="flex items-center mt-2">
-        <Check bind:check={$DataBase.autoTranslate} name={language.autoTranslation}/>
+        <Check bind:check={DBState.db.autoTranslate} name={language.autoTranslation}/>
     </div>
 
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.combineTranslation} name={language.combineTranslation}>
+        <Check bind:check={DBState.db.combineTranslation} name={language.combineTranslation}>
             <Help key="combineTranslation"/>
         </Check>
     </div>
 
     <div class="flex items-center mt-4">
-        <Check bind:check={$DataBase.legacyTranslation} name={language.legacyTranslation}>
+        <Check bind:check={DBState.db.legacyTranslation} name={language.legacyTranslation}>
             <Help key="legacyTranslation"/>
         </Check>
     </div>
diff --git a/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte b/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
index 268519c1..c98a4c0d 100644
--- a/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
@@ -4,7 +4,7 @@
     import Button from "src/lib/UI/GUI/Button.svelte";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import type { RisuModule } from "src/ts/process/modules";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { selectedCharID } from "src/ts/stores";
     import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
     interface Props {
@@ -16,7 +16,7 @@
     let moduleSearch = $state('')
 
     function sortModules(modules:RisuModule[], search:string){
-        const db = $DataBase
+        const db = DBState.db
         return modules.filter((v) => {
             if(search === '') return true
             return v.name.toLowerCase().includes(search.toLowerCase())
@@ -48,15 +48,15 @@
         <TextInput className="mt-4" placeholder={language.search} bind:value={moduleSearch} />
 
         <div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md">
-            {#if $DataBase.modules.length === 0}
+            {#if DBState.db.modules.length === 0}
                 <div class="text-textcolor2 p-3">{language.noModules}</div>
             {:else}
-                {#each sortModules($DataBase.modules, moduleSearch) as rmodule, i}
+                {#each sortModules(DBState.db.modules, moduleSearch) as rmodule, i}
                     {#if i !== 0}
                         <div class="border-t-1 border-selected"></div>
                     {/if}
                     <div class="pl-3 py-3 text-left flex">
-                        {#if !alertMode && $DataBase.enabledModules.includes(rmodule.id)}
+                        {#if !alertMode && DBState.db.enabledModules.includes(rmodule.id)}
                             <span class="text-textcolor2">{rmodule.name}</span>
                         {:else}
                             <span class="">{rmodule.name}</span>
@@ -71,23 +71,23 @@
                                 }}>
                                     <CheckCircle2Icon size={18}/>
                                 </button>
-                            {:else if $DataBase.enabledModules.includes(rmodule.id)}
+                            {:else if DBState.db.enabledModules.includes(rmodule.id)}
                                 <button class="mr-2 text-textcolor2 cursor-not-allowed">
                                 </button>
                             {:else}
-                                <button class={(!$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
+                                <button class={(!DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
                                         "text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
                                         "mr-2 cursor-pointer text-blue-500"
                                 } onclick={async (e) => {
                                     e.stopPropagation()
 
-                                    if($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
-                                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.splice($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
+                                    if(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
+                                        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.splice(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
                                     }
                                     else{
-                                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
+                                        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
                                     }
-                                    $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules
+                                    DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].modules
                                 }}>
                                     <CheckCircle2Icon size={18}/>
                                 </button>
diff --git a/src/lib/Setting/Pages/Module/ModuleMenu.svelte b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
index f2e7cf5f..60966218 100644
--- a/src/lib/Setting/Pages/Module/ModuleMenu.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleMenu.svelte
@@ -4,18 +4,15 @@
     import LoreBookData from "src/lib/SideBars/LoreBook/LoreBookData.svelte";
     import type { RisuModule } from "src/ts/process/modules";
     import { DownloadIcon, FolderUpIcon, PlusIcon, TrashIcon } from "lucide-svelte";
-    import { alertConfirm } from "src/ts/alert";
     import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";
     import TriggerList from "src/lib/SideBars/Scripts/TriggerList.svelte";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import Help from "src/lib/Others/Help.svelte";
     import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
-    import Button from "src/lib/UI/GUI/Button.svelte";
     import { getFileSrc, openURL, saveAsset } from "src/ts/storage/globalApi";
-    import { hubURL } from "src/ts/characterCards";
     import { exportRegex, importRegex } from "src/ts/process/scripts";
     import { selectMultipleFile } from "src/ts/util";
-    import { DataBase } from 'src/ts/storage/database';
+    import { DBState } from 'src/ts/storage/database.svelte';
 
     let submenu = $state(0)
     interface Props {
@@ -27,7 +24,7 @@
     let assetFilePath:string[] = $state([])
 
     $effect.pre(() => {
-        if($DataBase.useAdditionalAssetsPreview){
+        if(DBState.db.useAdditionalAssetsPreview){
             if(currentModule?.assets){
                 for(let i = 0; i < currentModule.assets.length; i++){
                     if(currentModule.assets[i].length > 2 && currentModule.assets[i][2]) {
@@ -202,7 +199,7 @@
                 {#each currentModule.assets as assets, i}
                     <tr>
                         <td class="font-medium truncate">
-                            {#if assetFilePath[i] && $DataBase.useAdditionalAssetsPreview}
+                            {#if assetFilePath[i] && DBState.db.useAdditionalAssetsPreview}
                                 {#if assetFileExtensions[i] === 'mp4'}
                                 <!-- svelte-ignore a11y_media_has_caption -->
                                     <video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
diff --git a/src/lib/Setting/Pages/Module/ModuleSettings.svelte b/src/lib/Setting/Pages/Module/ModuleSettings.svelte
index 1ad1f9eb..1c253d67 100644
--- a/src/lib/Setting/Pages/Module/ModuleSettings.svelte
+++ b/src/lib/Setting/Pages/Module/ModuleSettings.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { language } from "src/lang";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import Button from "src/lib/UI/GUI/Button.svelte";
     import ModuleMenu from "src/lib/Setting/Pages/Module/ModuleMenu.svelte";
     import { exportModule, importModule, type RisuModule } from "src/ts/process/modules";
@@ -9,7 +9,7 @@
     import { tooltip } from "src/ts/gui/tooltip";
     import { alertCardExport, alertConfirm, alertError } from "src/ts/alert";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
-  import { ShowRealmFrameStore } from "src/ts/stores";
+    import { ShowRealmFrameStore } from "src/ts/stores";
     let tempModule:RisuModule = $state({
         name: '',
         description: '',
@@ -20,7 +20,6 @@
     let moduleSearch = $state('')
 
     function sortModules(modules:RisuModule[], search:string){
-        const db = $DataBase
         return modules.filter((v) => {
             if(search === '') return true
             return v.name.toLowerCase().includes(search.toLowerCase())
@@ -37,10 +36,10 @@
     <TextInput className="mt-4" placeholder={language.search} bind:value={moduleSearch} />
 
     <div class="contain w-full max-w-full mt-4 flex flex-col border-selected border-1 rounded-md flex-1 overflow-y-auto">
-        {#if $DataBase.modules.length === 0}
+        {#if DBState.db.modules.length === 0}
             <div class="text-textcolor2 p-3">{language.noModules}</div>
         {:else}
-            {#each sortModules($DataBase.modules, moduleSearch) as rmodule, i}
+            {#each sortModules(DBState.db.modules, moduleSearch) as rmodule, i}
                 {#if i !== 0}
                     <div class="border-t-1 border-selected"></div>
                 {/if}
@@ -48,18 +47,18 @@
                 <div class="pl-3 pt-3 text-left flex">
                     <span class="text-lg">{rmodule.name}</span>
                     <div class="flex-grow flex justify-end">
-                        <button class={(!$DataBase.enabledModules.includes(rmodule.id)) ?
+                        <button class={(!DBState.db.enabledModules.includes(rmodule.id)) ?
                                 "text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
                                 "mr-2 cursor-pointer text-blue-500"
                             } use:tooltip={language.enableGlobal} onclick={async (e) => {
                             e.stopPropagation()
-                            if($DataBase.enabledModules.includes(rmodule.id)){
-                                $DataBase.enabledModules.splice($DataBase.enabledModules.indexOf(rmodule.id), 1)
+                            if(DBState.db.enabledModules.includes(rmodule.id)){
+                                DBState.db.enabledModules.splice(DBState.db.enabledModules.indexOf(rmodule.id), 1)
                             }
                             else{
-                                $DataBase.enabledModules.push(rmodule.id)
+                                DBState.db.enabledModules.push(rmodule.id)
                             }
-                            $DataBase.enabledModules = $DataBase.enabledModules
+                            DBState.db.enabledModules = DBState.db.enabledModules
                         }}>
                             <Globe size={18}/>
                         </button>
@@ -71,7 +70,7 @@
                         </button>
                         <button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.edit} onclick={async (e) => {
                             e.stopPropagation()
-                            const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
+                            const index = DBState.db.modules.findIndex((v) => v.id === rmodule.id)
                             tempModule = rmodule
                             editModuleIndex = index
                             mode = 2
@@ -82,9 +81,9 @@
                             e.stopPropagation()
                             const d = await alertConfirm(`${language.removeConfirm}` + rmodule.name)
                             if(d){
-                                const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
-                                $DataBase.modules.splice(index, 1)
-                                $DataBase.modules = $DataBase.modules
+                                const index = DBState.db.modules.findIndex((v) => v.id === rmodule.id)
+                                DBState.db.modules.splice(index, 1)
+                                DBState.db.modules = DBState.db.modules
                             }
                         }}>
                             <TrashIcon size={18}/>
@@ -110,7 +109,7 @@
     <h2 class="mb-2 text-2xl font-bold mt-2">{language.createModule}</h2>
     <ModuleMenu bind:currentModule={tempModule}/>
     <Button className="mt-6" onclick={() => {
-        $DataBase.modules.push(tempModule)
+        DBState.db.modules.push(tempModule)
         mode = 0
     }}>{language.createModule}</Button>
 {:else if mode === 2}
@@ -118,7 +117,7 @@
     <ModuleMenu bind:currentModule={tempModule}/>
     {#if tempModule.name !== ''}
         <Button className="mt-6" onclick={() => {
-            $DataBase.modules[editModuleIndex] = tempModule
+            DBState.db.modules[editModuleIndex] = tempModule
             mode = 0
         }}>{language.editModule}</Button>
     {/if}
diff --git a/src/lib/Setting/Pages/OobaSettings.svelte b/src/lib/Setting/Pages/OobaSettings.svelte
index f13bebdc..f01875bf 100644
--- a/src/lib/Setting/Pages/OobaSettings.svelte
+++ b/src/lib/Setting/Pages/OobaSettings.svelte
@@ -2,7 +2,7 @@
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
     import OptionalInput from "src/lib/UI/GUI/OptionalInput.svelte";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
     import { language } from "src/lang";
     import { PlusIcon, TrashIcon } from "lucide-svelte";
@@ -21,136 +21,136 @@
         <ChatFormatSettings />
     {:else}
         <span class="text-textcolor">Ooba Mode</span>
-        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.reverseProxyOobaArgs.mode}>
+        <SelectInput className="mt-2 mb-4" bind:value={DBState.db.reverseProxyOobaArgs.mode}>
             <OptionInput value="instruct">Instruct</OptionInput>
             <OptionInput value="chat">Chat</OptionInput>
             <OptionInput value="chat-instruct">Chat-Instruct</OptionInput>
         </SelectInput>
         <!-- name1 = user | name2 = bot --->
 
-        {#if $DataBase.reverseProxyOobaArgs.mode === 'instruct'}
+        {#if DBState.db.reverseProxyOobaArgs.mode === 'instruct'}
             <span class="text-textcolor">user prefix</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.name1_instruct} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.name1_instruct} />
             <span class="text-textcolor">bot prefix</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.name2_instruct} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.name2_instruct} />
             <span class="text-textcolor">system prefix</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.context_instruct} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.context_instruct} />
             <span class="text-textcolor">system message</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.system_message} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.system_message} />
         {/if}
-        {#if $DataBase.reverseProxyOobaArgs.mode === 'chat' || $DataBase.reverseProxyOobaArgs.mode === 'chat-instruct'}
+        {#if DBState.db.reverseProxyOobaArgs.mode === 'chat' || DBState.db.reverseProxyOobaArgs.mode === 'chat-instruct'}
             <span class="text-textcolor">user prefix</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.name1} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.name1} />
             <span class="text-textcolor">bot prefix</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.name2} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.name2} />
             <span class="text-textcolor">system prefix</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.context} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.context} />
             <span class="text-textcolor">start message</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.greeting} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.greeting} />
         {/if}
-        {#if $DataBase.reverseProxyOobaArgs.mode === 'chat-instruct'}
+        {#if DBState.db.reverseProxyOobaArgs.mode === 'chat-instruct'}
             <span class="text-textcolor">chat_instruct_command</span>
-            <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.chat_instruct_command} />
+            <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.chat_instruct_command} />
         {/if}
     {/if}
     <span class="text-textcolor">tokenizer</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.tokenizer} />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.tokenizer} />
     <span class="text-textcolor">min_p</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.min_p} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.min_p} numberMode />
     <span class="text-textcolor">top_k</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.top_k} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.top_k} numberMode />
     <span class="text-textcolor">repetition_penalty</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.repetition_penalty} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.repetition_penalty} numberMode />
     <span class="text-textcolor">repetition_penalty_range</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.repetition_penalty_range} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.repetition_penalty_range} numberMode />
     <span class="text-textcolor">typical_p</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.typical_p} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.typical_p} numberMode />
     <span class="text-textcolor">tfs</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.tfs} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.tfs} numberMode />
     <span class="text-textcolor">top_a</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.top_a} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.top_a} numberMode />
     <span class="text-textcolor">epsilon_cutoff</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.epsilon_cutoff} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.epsilon_cutoff} numberMode />
     <span class="text-textcolor">eta_cutoff</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.eta_cutoff} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.eta_cutoff} numberMode />
     <span class="text-textcolor">guidance_scale</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.guidance_scale} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.guidance_scale} numberMode />
     <span class="text-textcolor">penalty_alpha</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.penalty_alpha} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.penalty_alpha} numberMode />
     <span class="text-textcolor">mirostat_mode</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.mirostat_mode} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.mirostat_mode} numberMode />
     <span class="text-textcolor">mirostat_tau</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.mirostat_tau} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.mirostat_tau} numberMode />
     <span class="text-textcolor">mirostat_eta</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.mirostat_eta} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.mirostat_eta} numberMode />
     <span class="text-textcolor">encoder_repetition_penalty</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.encoder_repetition_penalty} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.encoder_repetition_penalty} numberMode />
     <span class="text-textcolor">no_repeat_ngram_size</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.no_repeat_ngram_size} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.no_repeat_ngram_size} numberMode />
     <span class="text-textcolor">min_length</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.min_length} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.min_length} numberMode />
     <span class="text-textcolor">num_beams</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.num_beams} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.num_beams} numberMode />
     <span class="text-textcolor">length_penalty</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.length_penalty} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.length_penalty} numberMode />
     <span class="text-textcolor">truncation_length</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.truncation_length} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.truncation_length} numberMode />
     <span class="text-textcolor">max_tokens_second</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.max_tokens_second} numberMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.max_tokens_second} numberMode />
     <span class="text-textcolor">negative_prompt</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.negative_prompt} />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.negative_prompt} />
     <span class="text-textcolor">custom_token_bans</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.custom_token_bans} />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.custom_token_bans} />
     <span class="text-textcolor">grammar_string</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.grammar_string} />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.grammar_string} />
     
     <span class="text-textcolor">temperature_last</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.temperature_last} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.temperature_last} boolMode />
     <span class="text-textcolor">do_sample</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.do_sample} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.do_sample} boolMode />
     <span class="text-textcolor">early_stopping</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.early_stopping} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.early_stopping} boolMode />
     <span class="text-textcolor">auto_max_new_tokens</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.auto_max_new_tokens} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.auto_max_new_tokens} boolMode />
 
     <span class="text-textcolor">ban_eos_token</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.ban_eos_token} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.ban_eos_token} boolMode />
     <span class="text-textcolor">add_bos_token</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.add_bos_token} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.add_bos_token} boolMode />
     <span class="text-textcolor">skip_special_tokens</span>
-    <OptionalInput marginBottom={true} bind:value={$DataBase.reverseProxyOobaArgs.skip_special_tokens} boolMode />
+    <OptionalInput marginBottom={true} bind:value={DBState.db.reverseProxyOobaArgs.skip_special_tokens} boolMode />
 
     
     {#if instructionMode}
         <div class="flex items-center mt-4">
-            <CheckInput check={!!$DataBase.localStopStrings} name={language.customStopWords} onChange={() => {
-                if(!$DataBase.localStopStrings){
-                    $DataBase.localStopStrings = []
+            <CheckInput check={!!DBState.db.localStopStrings} name={language.customStopWords} onChange={() => {
+                if(!DBState.db.localStopStrings){
+                    DBState.db.localStopStrings = []
                 }
                 else{
-                    $DataBase.localStopStrings = null
+                    DBState.db.localStopStrings = null
                 }
             }} />
         </div>
-        {#if $DataBase.localStopStrings}
+        {#if DBState.db.localStopStrings}
             <div class="flex flex-col p-2 rounded border border-selected mt-2 gap-1">
                 <div class="p-2">
                     <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" onclick={() => {
-                        let localStopStrings = $DataBase.localStopStrings
+                        let localStopStrings = DBState.db.localStopStrings
                         localStopStrings.push('')
-                        $DataBase.localStopStrings = localStopStrings
+                        DBState.db.localStopStrings = localStopStrings
                     }}><PlusIcon /></button>
                 </div>
-                {#each $DataBase.localStopStrings as stopString, i}
+                {#each DBState.db.localStopStrings as stopString, i}
                     <div class="flex w-full">
                         <div class="flex-grow">
-                            <TextInput marginBottom bind:value={$DataBase.localStopStrings[i]} fullwidth fullh/>
+                            <TextInput marginBottom bind:value={DBState.db.localStopStrings[i]} fullwidth fullh/>
                         </div>
                         <div>
                             <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500 w-full" onclick={() => {
-                                let localStopStrings = $DataBase.localStopStrings
+                                let localStopStrings = DBState.db.localStopStrings
                                 localStopStrings.splice(i, 1)
-                                $DataBase.localStopStrings = localStopStrings
+                                DBState.db.localStopStrings = localStopStrings
                             }}><TrashIcon /></button>
                         </div>
                     </div>
diff --git a/src/lib/Setting/Pages/OpenrouterSettings.svelte b/src/lib/Setting/Pages/OpenrouterSettings.svelte
index 88e5d033..ea129991 100644
--- a/src/lib/Setting/Pages/OpenrouterSettings.svelte
+++ b/src/lib/Setting/Pages/OpenrouterSettings.svelte
@@ -2,7 +2,7 @@
     import { language } from "src/lang";
     import Arcodion from "src/lib/UI/Arcodion.svelte";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
     import ChatFormatSettings from "./ChatFormatSettings.svelte";
@@ -34,23 +34,23 @@
 
 <Arcodion name="Openrouter Settings" styled>
     <div class="flex items-center mb-4">
-        <Check bind:check={$DataBase.openrouterFallback} name={language.openrouterFallback}/>
+        <Check bind:check={DBState.db.openrouterFallback} name={language.openrouterFallback}/>
     </div>
     <div class="flex items-center mb-4">
-        <Check bind:check={$DataBase.openrouterMiddleOut} name={language.openrouterMiddleOut}/>
+        <Check bind:check={DBState.db.openrouterMiddleOut} name={language.openrouterMiddleOut}/>
     </div>
     <div class="flex items-center mb-4">
-        <Check bind:check={$DataBase.useInstructPrompt} name={language.useInstructPrompt}/>
+        <Check bind:check={DBState.db.useInstructPrompt} name={language.useInstructPrompt}/>
     </div>
     <span class="mb-2 text-2xl font-bold mt-2">{language.provider}</span>
-    <SelectInput bind:value={$DataBase.openrouterProvider}>
+    <SelectInput bind:value={DBState.db.openrouterProvider}>
         <OptionInput value="">Auto (Default)</OptionInput>
         {#each openrouterProviders as provider}
             <OptionInput value={provider}>{provider}</OptionInput>
         {/each}
     </SelectInput>
 
-    {#if $DataBase.useInstructPrompt}
+    {#if DBState.db.useInstructPrompt}
         <ChatFormatSettings />
     {/if}
 </Arcodion>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index ee62cf46..1e70b4e7 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -3,7 +3,7 @@
     import { language } from "src/lang";
     import Help from "src/lib/Others/Help.svelte";
     import { selectSingleFile } from "src/ts/util";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { isTauri, saveAsset } from "src/ts/storage/globalApi";
     import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
@@ -15,7 +15,7 @@
     import Arcodion from "src/lib/UI/Arcodion.svelte";
     import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
     $effect.pre(() => {
-        $DataBase.NAIImgConfig ??= {
+        DBState.db.NAIImgConfig ??= {
             width: 512,
             height: 512,
             sampler: 'k_euler',
@@ -30,13 +30,13 @@
             RefStrength: 0.5,
             refimage: ''
         }
-        if ($DataBase.NAIImgConfig.sampler === 'ddim_v3'){
-            $DataBase.NAIImgConfig.sm = false
-            $DataBase.NAIImgConfig.sm_dyn = false
+        if (DBState.db.NAIImgConfig.sampler === 'ddim_v3'){
+            DBState.db.NAIImgConfig.sm = false
+            DBState.db.NAIImgConfig.sm_dyn = false
         }
     });
 
-    let submenu = $state($DataBase.useLegacyGUI ? -1 : 0)
+    let submenu = $state(DBState.db.useLegacyGUI ? -1 : 0)
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
 
@@ -69,7 +69,7 @@
 {#if submenu === 3 || submenu === -1}
     <Arcodion name={language.imageGeneration} styled disabled={submenu !== -1}>
         <span class="text-textcolor mt-2">{language.imageGeneration} {language.provider} <Help key="sdProvider"/></span>
-        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
+        <SelectInput className="mt-2 mb-4" bind:value={DBState.db.sdProvider}>
             <OptionInput value="" >None</OptionInput>
             <OptionInput value="webui" >Stable Diffusion WebUI</OptionInput>
             <OptionInput value="novelai" >Novel AI</OptionInput>
@@ -79,55 +79,55 @@
             <OptionInput value="fal" >Fal.ai</OptionInput>
         </SelectInput>
         
-        {#if $DataBase.sdProvider === 'webui'}
+        {#if DBState.db.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-textcolor mt-2">WebUI {language.providerURL}</span>
-            <TextInput size="sm" marginBottom placeholder="https://..." bind:value={$DataBase.webUiUrl}/>
+            <TextInput size="sm" marginBottom placeholder="https://..." bind:value={DBState.db.webUiUrl}/>
             <span class="text-textcolor">Steps</span>
-            <NumberInput size="sm" marginBottom min={0} max={100} bind:value={$DataBase.sdSteps}/>
+            <NumberInput size="sm" marginBottom min={0} max={100} bind:value={DBState.db.sdSteps}/>
             
             <span class="text-textcolor">CFG Scale</span>
-            <NumberInput size="sm" marginBottom min={0} max={20} bind:value={$DataBase.sdCFG}/>
+            <NumberInput size="sm" marginBottom min={0} max={20} bind:value={DBState.db.sdCFG}/>
         
             <span class="text-textcolor">Width</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.width}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.sdConfig.width}/>
             <span class="text-textcolor">Height</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.height}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.sdConfig.height}/>
             <span class="text-textcolor">Sampler</span>
-            <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.sampler_name}/>
+            <TextInput size="sm" marginBottom bind:value={DBState.db.sdConfig.sampler_name}/>
             
             <div class="flex items-center mt-2">
-                <Check bind:check={$DataBase.sdConfig.enable_hr} name='Enable Hires'/>
+                <Check bind:check={DBState.db.sdConfig.enable_hr} name='Enable Hires'/>
             </div>
-            {#if $DataBase.sdConfig.enable_hr === true}
+            {#if DBState.db.sdConfig.enable_hr === true}
                 <span class="text-textcolor">denoising_strength</span>
-                <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.denoising_strength}/>
+                <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={DBState.db.sdConfig.denoising_strength}/>
                 <span class="text-textcolor">hr_scale</span>
-                <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={$DataBase.sdConfig.hr_scale}/>
+                <NumberInput size="sm" marginBottom  min={0} max={10} bind:value={DBState.db.sdConfig.hr_scale}/>
                 <span class="text-textcolor">Upscaler</span>
-                <TextInput size="sm" marginBottom bind:value={$DataBase.sdConfig.hr_upscaler}/>
+                <TextInput size="sm" marginBottom bind:value={DBState.db.sdConfig.hr_upscaler}/>
             {/if}
         {/if}
         
-        {#if $DataBase.sdProvider === 'novelai'}
+        {#if DBState.db.sdProvider === 'novelai'}
             <span class="text-textcolor mt-2">Novel AI {language.providerURL}</span>
-            <TextInput size="sm" marginBottom placeholder="https://image.novelai.net" bind:value={$DataBase.NAIImgUrl}/>
+            <TextInput size="sm" marginBottom placeholder="https://image.novelai.net" bind:value={DBState.db.NAIImgUrl}/>
             <span class="text-textcolor">API Key</span>
-            <TextInput size="sm" marginBottom placeholder="pst-..." bind:value={$DataBase.NAIApiKey}/>
+            <TextInput size="sm" marginBottom placeholder="pst-..." bind:value={DBState.db.NAIApiKey}/>
         
             <span class="text-textcolor">Model</span>
-            <TextInput size="sm" marginBottom placeholder="nai-diffusion-3" bind:value={$DataBase.NAIImgModel}/>
+            <TextInput size="sm" marginBottom placeholder="nai-diffusion-3" bind:value={DBState.db.NAIImgModel}/>
         
             <span class="text-textcolor">Width</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.NAIImgConfig.width}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.NAIImgConfig.width}/>
             <span class="text-textcolor">Height</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.NAIImgConfig.height}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.NAIImgConfig.height}/>
             <span class="text-textcolor">Sampler</span>
-            <SelectInput className="mt-2 mb-4" bind:value={$DataBase.NAIImgConfig.sampler}>
+            <SelectInput className="mt-2 mb-4" bind:value={DBState.db.NAIImgConfig.sampler}>
                 <OptionInput value="k_euler" >Euler</OptionInput>
                 <OptionInput value="k_euler_ancestral" >Euler Ancestral</OptionInput>
                 <OptionInput value="k_dpmpp_2s_ancestral" >DPM++ 2S Ancestral</OptionInput>
@@ -137,24 +137,24 @@
                 <OptionInput value="ddim_v3" >DDIM</OptionInput>
             </SelectInput>
             <span class="text-textcolor">steps</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.NAIImgConfig.steps}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.NAIImgConfig.steps}/>
             <span class="text-textcolor">CFG scale</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.NAIImgConfig.scale}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.NAIImgConfig.scale}/>
         
-            {#if !$DataBase.NAII2I || $DataBase.NAIImgConfig.sampler !== 'ddim_v3'}
-                <Check bind:check={$DataBase.NAIImgConfig.sm} name="Use SMEA"/>
-                <Check bind:check={$DataBase.NAIImgConfig.sm_dyn} name='Use DYN'/>
+            {#if !DBState.db.NAII2I || DBState.db.NAIImgConfig.sampler !== 'ddim_v3'}
+                <Check bind:check={DBState.db.NAIImgConfig.sm} name="Use SMEA"/>
+                <Check bind:check={DBState.db.NAIImgConfig.sm_dyn} name='Use DYN'/>
             {/if}
-            <Check bind:check={$DataBase.NAII2I} name="Enable I2I"/>
+            <Check bind:check={DBState.db.NAII2I} name="Enable I2I"/>
         
-            {#if $DataBase.NAII2I}
+            {#if DBState.db.NAII2I}
         
                 <span class="text-textcolor mt-4">Strength</span>
-                <SliderInput min={0} max={0.99} step={0.01} bind:value={$DataBase.NAIImgConfig.strength}/>
-                <span class="text-textcolor2 mb-6 text-sm">{$DataBase.NAIImgConfig.strength}</span>
+                <SliderInput min={0} max={0.99} step={0.01} bind:value={DBState.db.NAIImgConfig.strength}/>
+                <span class="text-textcolor2 mb-6 text-sm">{DBState.db.NAIImgConfig.strength}</span>
                 <span class="text-textcolor">Noise</span>
-                <SliderInput min={0} max={0.99} step={0.01} bind:value={$DataBase.NAIImgConfig.noise}/>
-                <span class="text-textcolor2 mb-6 text-sm">{$DataBase.NAIImgConfig.noise}</span>
+                <SliderInput min={0} max={0.99} step={0.01} bind:value={DBState.db.NAIImgConfig.noise}/>
+                <span class="text-textcolor2 mb-6 text-sm">{DBState.db.NAIImgConfig.noise}</span>
         
                 <span class="text-textcolor">Base image</span>
                 <button onclick={async () => {
@@ -168,12 +168,12 @@
                         return null
                     }
                     const saveId = await saveAsset(img.data)
-                    $DataBase.NAIImgConfig.image = saveId
+                    DBState.db.NAIImgConfig.image = saveId
                 }}>
-                    {#if $DataBase.NAIImgConfig.image === ''}
+                    {#if DBState.db.NAIImgConfig.image === ''}
                         <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
                     {:else}
-                        {#await getCharImage($DataBase.NAIImgConfig.image, 'css')}
+                        {#await getCharImage(DBState.db.NAIImgConfig.image, 'css')}
                             <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
                         {:then im} 
                             <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im}></div>                
@@ -183,17 +183,17 @@
         
             {/if}
 
-            <Check bind:check={$DataBase.NAIREF} name="Enable Reference" className="mt-4"/>
+            <Check bind:check={DBState.db.NAIREF} name="Enable Reference" className="mt-4"/>
 
-            {#if $DataBase.NAIREF}
+            {#if DBState.db.NAIREF}
 
 
                 <span class="text-textcolor mt-4">Information Extracted</span>
-                <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIImgConfig.InfoExtracted}/>
-                <span class="text-textcolor2 mb-6 text-sm">{$DataBase.NAIImgConfig.InfoExtracted}</span>
+                <SliderInput min={0} max={1} step={0.01} bind:value={DBState.db.NAIImgConfig.InfoExtracted}/>
+                <span class="text-textcolor2 mb-6 text-sm">{DBState.db.NAIImgConfig.InfoExtracted}</span>
                 <span class="text-textcolor">Reference Strength</span>
-                <SliderInput min={0} max={1} step={0.01} bind:value={$DataBase.NAIImgConfig.RefStrength}/>
-                <span class="text-textcolor2 mb-6 text-sm">{$DataBase.NAIImgConfig.RefStrength}</span>
+                <SliderInput min={0} max={1} step={0.01} bind:value={DBState.db.NAIImgConfig.RefStrength}/>
+                <span class="text-textcolor2 mb-6 text-sm">{DBState.db.NAIImgConfig.RefStrength}</span>
 
 
 
@@ -210,12 +210,12 @@
                         return null
                     }
                     const saveId = await saveAsset(img.data)
-                    $DataBase.NAIImgConfig.refimage = saveId
+                    DBState.db.NAIImgConfig.refimage = saveId
                 }}>
-                    {#if $DataBase.NAIImgConfig.refimage === ''}
+                    {#if DBState.db.NAIImgConfig.refimage === ''}
                         <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
                     {:else}
-                        {#await getCharImage($DataBase.NAIImgConfig.refimage, 'css')}
+                        {#await getCharImage(DBState.db.NAIImgConfig.refimage, 'css')}
                             <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
                         {:then im} 
                             <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im}></div>                
@@ -226,33 +226,33 @@
         {/if}
 
 
-        {#if $DataBase.sdProvider === 'dalle'}
+        {#if DBState.db.sdProvider === 'dalle'}
             <span class="text-textcolor">OpenAI API Key</span>
-            <TextInput size="sm" marginBottom placeholder="sk-..." bind:value={$DataBase.openAIKey}/>
+            <TextInput size="sm" marginBottom placeholder="sk-..." bind:value={DBState.db.openAIKey}/>
 
             <span class="text-textcolor mt-4">Dall-E Quality</span>
-            <SelectInput className="mt-2 mb-4" bind:value={$DataBase.dallEQuality}>
+            <SelectInput className="mt-2 mb-4" bind:value={DBState.db.dallEQuality}>
                 <OptionInput value="standard" >Standard</OptionInput>
                 <OptionInput value="hd" >HD</OptionInput>
             </SelectInput>
 
         {/if}
 
-        {#if $DataBase.sdProvider === 'stability'}
+        {#if DBState.db.sdProvider === 'stability'}
             <span class="text-textcolor">Stability API Key</span>
-            <TextInput size="sm" marginBottom placeholder="..." bind:value={$DataBase.stabilityKey}/>
+            <TextInput size="sm" marginBottom placeholder="..." bind:value={DBState.db.stabilityKey}/>
 
             <span class="text-textcolor">Stability Model</span>
-            <SelectInput className="mt-2 mb-4" bind:value={$DataBase.stabilityModel}>
+            <SelectInput className="mt-2 mb-4" bind:value={DBState.db.stabilityModel}>
                 <OptionInput value="ultra" >SD Ultra</OptionInput>
                 <OptionInput value="core" >SD Core</OptionInput>
                 <OptionInput value="sd3-large" >SD3 Large</OptionInput>
                 <OptionInput value="sd3-medium" >SD3 Medium</OptionInput>
             </SelectInput>
 
-            {#if $DataBase.stabilityModel === 'core'}
+            {#if DBState.db.stabilityModel === 'core'}
                 <span class="text-textcolor">SD Core Style</span>
-                <SelectInput className="mt-2 mb-4" bind:value={$DataBase.stabllityStyle}>
+                <SelectInput className="mt-2 mb-4" bind:value={DBState.db.stabllityStyle}>
                     <OptionInput value="" >Unspecified</OptionInput>
                     <OptionInput value="3d-model" >3D Model</OptionInput>
                     <OptionInput value="analog-film" >Analog Film</OptionInput>
@@ -275,51 +275,51 @@
             {/if}
         {/if}
 
-        {#if $DataBase.sdProvider === 'comfy'}
+        {#if DBState.db.sdProvider === 'comfy'}
         <span class="text-draculared text-xs mb-2">The first image generated by the prompt will be selected. </span>
             {#if !isTauri}
                 <span class="text-draculared text-xs mb-2">"Please run comfyUI with --enable-cors-header."</span>
             {/if}
             <span class="text-textcolor mt-2">ComfyUI {language.providerURL}</span>
-            <TextInput size="sm" marginBottom placeholder="http://127.0.0.1:8188" bind:value={$DataBase.comfyUiUrl}/>
+            <TextInput size="sm" marginBottom placeholder="http://127.0.0.1:8188" bind:value={DBState.db.comfyUiUrl}/>
             <span class="text-textcolor">Workflow</span>
-            <TextInput size="sm" marginBottom placeholder="valid ComfyUI API json (Enable Dev mode Options in ComfyUI)" bind:value={$DataBase.comfyConfig.workflow}/>
+            <TextInput size="sm" marginBottom placeholder="valid ComfyUI API json (Enable Dev mode Options in ComfyUI)" bind:value={DBState.db.comfyConfig.workflow}/>
 
             <span class="text-textcolor">Positive Text Node: ID</span>
-            <TextInput size="sm" marginBottom placeholder="eg. 1, 3, etc" bind:value={$DataBase.comfyConfig.posNodeID}/>
+            <TextInput size="sm" marginBottom placeholder="eg. 1, 3, etc" bind:value={DBState.db.comfyConfig.posNodeID}/>
             <span class="text-textcolor">Positive Text Node: Input Field Name</span>
-            <TextInput size="sm" marginBottom placeholder="eg. text" bind:value={$DataBase.comfyConfig.posInputName}/>
+            <TextInput size="sm" marginBottom placeholder="eg. text" bind:value={DBState.db.comfyConfig.posInputName}/>
             <span class="text-textcolor">Negative Text Node: ID</span>
-            <TextInput size="sm" marginBottom placeholder="eg. 1, 3, etc" bind:value={$DataBase.comfyConfig.negNodeID}/>
+            <TextInput size="sm" marginBottom placeholder="eg. 1, 3, etc" bind:value={DBState.db.comfyConfig.negNodeID}/>
             <span class="text-textcolor">Positive Text Node: Input Field Name</span>
-            <TextInput size="sm" marginBottom placeholder="eg. text" bind:value={$DataBase.comfyConfig.negInputName}/>
+            <TextInput size="sm" marginBottom placeholder="eg. text" bind:value={DBState.db.comfyConfig.negInputName}/>
             <span class="text-textcolor">Timeout (sec)</span>
-            <NumberInput size="sm" marginBottom bind:value={$DataBase.comfyConfig.timeout} min={1} max={120} />
+            <NumberInput size="sm" marginBottom bind:value={DBState.db.comfyConfig.timeout} min={1} max={120} />
         {/if}
 
-        {#if $DataBase.sdProvider === 'fal'}
+        {#if DBState.db.sdProvider === 'fal'}
             <span class="text-textcolor">Fal.ai API Key</span>
-            <TextInput size="sm" marginBottom placeholder="..." bind:value={$DataBase.falToken}/>
+            <TextInput size="sm" marginBottom placeholder="..." bind:value={DBState.db.falToken}/>
 
             <span class="text-textcolor mt-4">Width</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.width}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.sdConfig.width}/>
             <span class="text-textcolor mt-4">Height</span>
-            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.sdConfig.height}/>
+            <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={DBState.db.sdConfig.height}/>
 
             <span class="text-textcolor mt-4">Model</span>
-            <SelectInput className="mt-2" bind:value={$DataBase.falModel}>
+            <SelectInput className="mt-2" bind:value={DBState.db.falModel}>
                 <OptionInput value="fal-ai/flux/dev" >Flux[Dev]</OptionInput>
                 <OptionInput value="fal-ai/flux-lora" >Flux[Dev] with Lora</OptionInput>
                 <OptionInput value="fal-ai/flux-pro" >Flux[Pro]</OptionInput>
                 <OptionInput value="fal-ai/flux/schnell" >Flux[Schnell]</OptionInput>
             </SelectInput>
 
-            {#if $DataBase.falModel === 'fal-ai/flux-lora'}
+            {#if DBState.db.falModel === 'fal-ai/flux-lora'}
                 <span class="text-textcolor mt-4">Lora Model URL <Help key="urllora" /></span>
-                <TextInput size="sm" marginBottom bind:value={$DataBase.falLora}/>
+                <TextInput size="sm" marginBottom bind:value={DBState.db.falLora}/>
 
                 <span class="text-textcolor mt-4">Lora Weight</span>
-                <SliderInput fixed={2} min={0}  max={2} step={0.01} bind:value={$DataBase.falLoraScale}/>
+                <SliderInput fixed={2} min={0}  max={2} step={0.01} bind:value={DBState.db.falLoraScale}/>
             {/if}
 
 
@@ -330,25 +330,25 @@
 {#if submenu === 1 || submenu === -1}
 <Arcodion name="TTS" styled disabled={submenu !== -1}>
     <span class="text-textcolor mt-2">Auto Speech</span>
-    <CheckInput bind:check={$DataBase.ttsAutoSpeech}/>
+    <CheckInput bind:check={DBState.db.ttsAutoSpeech}/>
 
     <span class="text-textcolor mt-2">ElevenLabs API key</span>
-    <TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
+    <TextInput size="sm" marginBottom bind:value={DBState.db.elevenLabKey}/>
     
     <span class="text-textcolor mt-2">VOICEVOX URL</span>
-    <TextInput size="sm" marginBottom bind:value={$DataBase.voicevoxUrl}/>
+    <TextInput size="sm" marginBottom bind:value={DBState.db.voicevoxUrl}/>
     
     <span class="text-textcolor">OpenAI Key</span>
-    <TextInput size="sm" marginBottom bind:value={$DataBase.openAIKey}/>
+    <TextInput size="sm" marginBottom bind:value={DBState.db.openAIKey}/>
 
     <span class="text-textcolor mt-2">NovelAI API key</span>
-    <TextInput size="sm" marginBottom placeholder="pst-..." bind:value={$DataBase.NAIApiKey}/>
+    <TextInput size="sm" marginBottom placeholder="pst-..." bind:value={DBState.db.NAIApiKey}/>
     
     <span class="text-textcolor">Huggingface Key</span>
-    <TextInput size="sm" marginBottom bind:value={$DataBase.huggingfaceKey} placeholder="hf_..."/>
+    <TextInput size="sm" marginBottom bind:value={DBState.db.huggingfaceKey} placeholder="hf_..."/>
 
     <span class="text-textcolor">fish-speech API Key</span>
-    <TextInput size="sm" marginBottom bind:value={$DataBase.fishSpeechKey}/>
+    <TextInput size="sm" marginBottom bind:value={DBState.db.fishSpeechKey}/>
 
 </Arcodion>
 {/if}
@@ -357,7 +357,7 @@
 <Arcodion name={language.emotionImage} styled disabled={submenu !== -1}>
     <span class="text-textcolor mt-2">{language.emotionMethod}</span>
 
-    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.emotionProcesser}>
+    <SelectInput className="mt-2 mb-4" bind:value={DBState.db.emotionProcesser}>
         <OptionInput value="submodel" >Ax. Model</OptionInput>
         <OptionInput value="embedding" >MiniLM-L6-v2</OptionInput>
     </SelectInput>
@@ -369,32 +369,32 @@
         <span class="text-textcolor mt-4">{language.type}</span>
 
         <SelectInput value={
-            $DataBase.hypav2 ? 'hypaV2' :
-            $DataBase.supaModelType !== 'none' ? 'supaMemory' :
-            $DataBase.hanuraiEnable ? 'hanuraiMemory' : 'none'
+            DBState.db.hypav2 ? 'hypaV2' :
+            DBState.db.supaModelType !== 'none' ? 'supaMemory' :
+            DBState.db.hanuraiEnable ? 'hanuraiMemory' : 'none'
         } onchange={(v) => {
             //@ts-ignore
             const value = v.target.value
             if (value === 'supaMemory'){
-                $DataBase.supaModelType = 'distilbart'
-                $DataBase.memoryAlgorithmType = 'supaMemory'
-                $DataBase.hypav2 = false
-                $DataBase.hanuraiEnable = false
+                DBState.db.supaModelType = 'distilbart'
+                DBState.db.memoryAlgorithmType = 'supaMemory'
+                DBState.db.hypav2 = false
+                DBState.db.hanuraiEnable = false
             } else if (value === 'hanuraiMemory'){
-                $DataBase.supaModelType = 'none'
-                $DataBase.memoryAlgorithmType = 'hanuraiMemory'
-                $DataBase.hypav2 = false
-                $DataBase.hanuraiEnable = true
+                DBState.db.supaModelType = 'none'
+                DBState.db.memoryAlgorithmType = 'hanuraiMemory'
+                DBState.db.hypav2 = false
+                DBState.db.hanuraiEnable = true
             } else if (value === 'hypaV2') {
-                $DataBase.supaModelType = 'distilbart'
-                $DataBase.memoryAlgorithmType = 'hypaMemoryV2'
-                $DataBase.hypav2= true
-                $DataBase.hanuraiEnable = false
+                DBState.db.supaModelType = 'distilbart'
+                DBState.db.memoryAlgorithmType = 'hypaMemoryV2'
+                DBState.db.hypav2= true
+                DBState.db.hanuraiEnable = false
             } else {
-                $DataBase.supaModelType = 'none'
-                $DataBase.memoryAlgorithmType = 'none'
-                $DataBase.hypav2 = false
-                $DataBase.hanuraiEnable = false
+                DBState.db.supaModelType = 'none'
+                DBState.db.memoryAlgorithmType = 'none'
+                DBState.db.hypav2 = false
+                DBState.db.hanuraiEnable = false
             }
         }}>
             <OptionInput value="none" >None</OptionInput>
@@ -403,64 +403,64 @@
             <OptionInput value="hanuraiMemory" >{language.hanuraiMemory}</OptionInput>
         </SelectInput>
 
-        {#if $DataBase.hanuraiEnable}
+        {#if DBState.db.hanuraiEnable}
             <span class="mb-2 text-textcolor2 text-sm text-wrap break-words max-w-full">{language.hanuraiDesc}</span>
             <span>Chunk Size</span>
-            <NumberInput size="sm" marginBottom bind:value={$DataBase.hanuraiTokens} min={100} />
+            <NumberInput size="sm" marginBottom bind:value={DBState.db.hanuraiTokens} min={100} />
             <div class="flex">
-                <Check bind:check={$DataBase.hanuraiSplit} name="Text Spliting"/>
+                <Check bind:check={DBState.db.hanuraiSplit} name="Text Spliting"/>
             </div>
-        {:else if $DataBase.hypav2}
+        {:else if DBState.db.hypav2}
             <span class="mb-2 text-textcolor2 text-sm text-wrap break-words max-w-full">{language.hypaV2Desc}</span>
             <span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
-            <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaModelType}>
+            <SelectInput className="mt-2 mb-2" bind:value={DBState.db.supaModelType}>
                 <OptionInput value="distilbart">distilbart-cnn-6-6 (Free/Local)</OptionInput>
                 <OptionInput value="instruct35">OpenAI 3.5 Turbo Instruct</OptionInput>
                 <OptionInput value="subModel">{language.submodel}</OptionInput>
             </SelectInput>
-            {#if $DataBase.supaModelType === 'davinci' || $DataBase.supaModelType === 'curie' || $DataBase.supaModelType === 'instruct35'}
+            {#if DBState.db.supaModelType === 'davinci' || DBState.db.supaModelType === 'curie' || DBState.db.supaModelType === 'instruct35'}
             <span class="text-textcolor">{language.SuperMemory} OpenAI Key</span>
-            <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
+            <TextInput size="sm" marginBottom bind:value={DBState.db.supaMemoryKey}/>
             {/if}
             <span class="text-textcolor">{language.SuperMemory} Prompt</span>
-            <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="Leave it blank to use default"/>
+            <TextInput size="sm" marginBottom bind:value={DBState.db.supaMemoryPrompt} placeholder="Leave it blank to use default"/>
             <span class="text-textcolor">{language.HypaMemory} Model</span>
-            <SelectInput className="mt-2 mb-2" bind:value={$DataBase.hypaModel}>
+            <SelectInput className="mt-2 mb-2" bind:value={DBState.db.hypaModel}>
                 <OptionInput value="MiniLM">MiniLM-L6-v2 (Free / Local)</OptionInput>
                 <OptionInput value="nomic">Nomic (Free / Local)</OptionInput>
                 <OptionInput value="ada">OpenAI Ada (Davinci / Curie Only)</OptionInput>
             </SelectInput>
             <span class="text-textcolor">{language.hypaChunkSize}</span>
-            <NumberInput size="sm" marginBottom bind:value={$DataBase.hypaChunkSize} min={100} />
+            <NumberInput size="sm" marginBottom bind:value={DBState.db.hypaChunkSize} min={100} />
             <span class="text-textcolor">{language.hypaAllocatedTokens}</span>
-            <NumberInput size="sm" marginBottom bind:value={$DataBase.hypaAllocatedTokens} min={100} />
-        {:else if ($DataBase.supaModelType !== 'none' && $DataBase.hypav2 === false)}
+            <NumberInput size="sm" marginBottom bind:value={DBState.db.hypaAllocatedTokens} min={100} />
+        {:else if (DBState.db.supaModelType !== 'none' && DBState.db.hypav2 === false)}
             <span class="mb-2 text-textcolor2 text-sm text-wrap break-words max-w-full">{language.supaDesc}</span>
             <span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
-            <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaModelType}>
+            <SelectInput className="mt-2 mb-2" bind:value={DBState.db.supaModelType}>
                 <OptionInput value="distilbart" >distilbart-cnn-6-6 (Free/Local)</OptionInput>
                 <OptionInput value="instruct35" >OpenAI 3.5 Turbo Instruct</OptionInput>
                 <OptionInput value="subModel" >{language.submodel}</OptionInput>
             </SelectInput>
             <span class="text-textcolor">{language.maxSupaChunkSize}</span>
-            <NumberInput size="sm" marginBottom bind:value={$DataBase.maxSupaChunkSize} min={100} />
-            {#if $DataBase.supaModelType === 'davinci' || $DataBase.supaModelType === 'curie' || $DataBase.supaModelType === 'instruct35'}
+            <NumberInput size="sm" marginBottom bind:value={DBState.db.maxSupaChunkSize} min={100} />
+            {#if DBState.db.supaModelType === 'davinci' || DBState.db.supaModelType === 'curie' || DBState.db.supaModelType === 'instruct35'}
                 <span class="text-textcolor">{language.SuperMemory} OpenAI Key</span>
-                <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryKey}/>
+                <TextInput size="sm" marginBottom bind:value={DBState.db.supaMemoryKey}/>
             {/if}
-            {#if $DataBase.supaModelType !== 'none'}
+            {#if DBState.db.supaModelType !== 'none'}
                 <span class="text-textcolor">{language.SuperMemory} Prompt</span>
-                <TextInput size="sm" marginBottom bind:value={$DataBase.supaMemoryPrompt} placeholder="Leave it blank to use default"/>
+                <TextInput size="sm" marginBottom bind:value={DBState.db.supaMemoryPrompt} placeholder="Leave it blank to use default"/>
             {/if}
-            {#if $DataBase.hypaMemory}
+            {#if DBState.db.hypaMemory}
                 <span class="text-textcolor">{language.HypaMemory} Model</span>
-                <SelectInput className="mt-2 mb-2" bind:value={$DataBase.hypaModel}>
+                <SelectInput className="mt-2 mb-2" bind:value={DBState.db.hypaModel}>
                     <OptionInput value="MiniLM" >MiniLM-L6-v2 (Free / Local)</OptionInput>
                     <OptionInput value="ada" >OpenAI Ada (Davinci / Curie Only)</OptionInput>
                 </SelectInput>
             {/if}
             <div class="flex">
-                <Check bind:check={$DataBase.hypaMemory} name={language.enable + ' ' + language.HypaMemory}/>
+                <Check bind:check={DBState.db.hypaMemory} name={language.enable + ' ' + language.HypaMemory}/>
             </div>
         {/if}
 
diff --git a/src/lib/Setting/Pages/PersonaSettings.svelte b/src/lib/Setting/Pages/PersonaSettings.svelte
index a2c7da19..63f0109b 100644
--- a/src/lib/Setting/Pages/PersonaSettings.svelte
+++ b/src/lib/Setting/Pages/PersonaSettings.svelte
@@ -8,24 +8,24 @@
     import { alertConfirm, alertSelect } from "src/ts/alert";
     import { getCharImage } from "src/ts/characters";
     import { changeUserPersona, exportUserPersona, importUserPersona, saveUserPersona, selectUserImg } from "src/ts/persona";
-    import { DataBase, setDatabase } from "src/ts/storage/database";
+    import { DBState, setDatabase } from "src/ts/storage/database.svelte";
     import { get } from "svelte/store";
 
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.persona}</h2>
 
 <div class="p-4 rounded-md border-darkborderc border mb-2 flex-wrap flex gap-2">
-    {#each $DataBase.personas as persona, i}
+    {#each DBState.db.personas as persona, i}
         <button onclick={() => {
             changeUserPersona(i)
         }}>
             {#if persona.icon === ''}
-                <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}></div>
+                <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === DBState.db.selectedPersona}></div>
             {:else}
                 {#await getCharImage(persona.icon, 'css')}
-                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === $DataBase.selectedPersona}></div>
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" class:ring={i === DBState.db.selectedPersona}></div>
                 {:then im} 
-                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} class:ring={i === $DataBase.selectedPersona}></div>                
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} class:ring={i === DBState.db.selectedPersona}></div>                
                 {/await}
             {/if}
         </button>
@@ -37,14 +37,12 @@
                 if(sel === 1){
                     return
                 }
-                let db = get(DataBase)
-                db.personas.push({
+                DBState.db.personas.push({
                     name: 'New Persona',
                     icon: '',
                     personaPrompt: ''
                 })
-                setDatabase(db)
-                changeUserPersona(db.personas.length - 1)
+                changeUserPersona(DBState.db.personas.length - 1)
             }}
             ><svg viewBox="0 0 24 24" width="1.2em" height="1.2em"
                 ><path
@@ -63,10 +61,10 @@
 <div class="flex w-full items-starts rounded-md border-darkborderc border p-4 max-w-full flex-wrap">
     <div class="flex flex-col mt-4 mr-4">
         <button onclick={() => {selectUserImg()}}>
-            {#if $DataBase.userIcon === ''}
+            {#if DBState.db.userIcon === ''}
                 <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
             {:else}
-                {#await getCharImage($DataBase.userIcon, $DataBase.personas[$DataBase.selectedPersona].largePortrait ? 'lgcss' : 'css')}
+                {#await getCharImage(DBState.db.userIcon, DBState.db.personas[DBState.db.selectedPersona].largePortrait ? 'lgcss' : 'css')}
                     <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
                 {:then im} 
                     <div class="rounded-md h-28 w-28 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im}></div>                
@@ -76,27 +74,27 @@
     </div>
     <div class="flex flex-grow flex-col p-2 max-w-full">
         <span class="text-sm text-textcolor2">{language.name}</span>
-        <TextInput marginBottom size="lg" placeholder="User" bind:value={$DataBase.username}/>
+        <TextInput marginBottom size="lg" placeholder="User" bind:value={DBState.db.username}/>
         <span class="text-sm text-textcolor2">{language.description}</span>
-        <TextAreaInput autocomplete="off" bind:value={$DataBase.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
+        <TextAreaInput autocomplete="off" bind:value={DBState.db.personaPrompt} placeholder={`Put the description of this persona here.\nExample: [<user> is a 20 year old girl.]`} />
         <div class="flex gap-2 mt-4 max-w-full flex-wrap">
             <Button onclick={exportUserPersona}>{language.export}</Button>
             <Button onclick={importUserPersona}>{language.import}</Button>
 
             <Button styled="danger" onclick={async () => {
-                if($DataBase.personas.length === 1){
+                if(DBState.db.personas.length === 1){
                     return
                 }
-                const d = await alertConfirm(`${language.removeConfirm}${$DataBase.personas[$DataBase.selectedPersona].name}`)
+                const d = await alertConfirm(`${language.removeConfirm}${DBState.db.personas[DBState.db.selectedPersona].name}`)
                 if(d){
                     saveUserPersona()
-                    let personas = $DataBase.personas
-                    personas.splice($DataBase.selectedPersona, 1)
-                    $DataBase.personas = personas
+                    let personas = DBState.db.personas
+                    personas.splice(DBState.db.selectedPersona, 1)
+                    DBState.db.personas = personas
                     changeUserPersona(0, 'noSave')
                 }
             }}>{language.remove}</Button>
-            <Check bind:check={$DataBase.personas[$DataBase.selectedPersona].largePortrait}>{language.largePortrait}</Check>
+            <Check bind:check={DBState.db.personas[DBState.db.selectedPersona].largePortrait}>{language.largePortrait}</Check>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/PluginSettings.svelte b/src/lib/Setting/Pages/PluginSettings.svelte
index f2c54657..4fbd00bc 100644
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/src/lib/Setting/Pages/PluginSettings.svelte
@@ -2,14 +2,12 @@
     import { PlusIcon, TrashIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import { alertConfirm } from "src/ts/alert";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { importPlugin } from "src/ts/plugins/plugins";
-    import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
     import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
-    import Help from "src/lib/Others/Help.svelte";
 
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
@@ -18,22 +16,22 @@
 
 
 <div class="border-solid border-darkborderc p-2 flex flex-col border-1">
-    {#if !$DataBase.plugins || $DataBase.plugins?.length === 0}
+    {#if !DBState.db.plugins || DBState.db.plugins?.length === 0}
         <span class="text-textcolor2">{language.noPlugins}</span>
     {/if}
-    {#each $DataBase.plugins as plugin, i}
+    {#each DBState.db.plugins as plugin, i}
         <div class="border-darkborderc mt-2 mb-2 w-full border-solid border-b-1 seperator"></div>
         <div class="flex">
             <span class="font-bold flex-grow">{plugin.displayName ?? plugin.name}</span>
             <button class="textcolor2 hover:gray-200 cursor-pointer" onclick={async () => {
                 const v = await alertConfirm(language.removeConfirm + (plugin.displayName ?? plugin.name))
                 if(v){
-                    if($DataBase.currentPluginProvider === plugin.name){
-                        $DataBase.currentPluginProvider  = ''
+                    if(DBState.db.currentPluginProvider === plugin.name){
+                        DBState.db.currentPluginProvider  = ''
                     }
-                    let plugins = $DataBase.plugins ?? []
+                    let plugins = DBState.db.plugins ?? []
                     plugins.splice(i, 1)
-                    $DataBase.plugins = plugins
+                    DBState.db.plugins = plugins
                 }
             }}>
                 <TrashIcon />
@@ -44,15 +42,15 @@
                 {#each Object.keys(plugin.arguments) as arg}
                     <span>{arg}</span>
                     {#if Array.isArray(plugin.arguments[arg])}
-                        <SelectInput className="mt-2 mb-4" bind:value={$DataBase.plugins[i].realArg[arg]}>
+                        <SelectInput className="mt-2 mb-4" bind:value={DBState.db.plugins[i].realArg[arg] as string}>
                             {#each plugin.arguments[arg] as a}
                                 <OptionInput value={a}>a</OptionInput>
                             {/each}
                         </SelectInput>
                     {:else if plugin.arguments[arg] === 'string'}
-                        <TextInput  bind:value={$DataBase.plugins[i].realArg[arg]} />
+                        <TextInput  bind:value={DBState.db.plugins[i].realArg[arg] as string} />
                     {:else if plugin.arguments[arg] === 'int'}
-                        <NumberInput bind:value={$DataBase.plugins[i].realArg[arg]} />
+                        <NumberInput bind:value={DBState.db.plugins[i].realArg[arg] as number} />
                     {/if}
                 {/each}
             </div>
diff --git a/src/lib/Setting/Pages/PromptSettings.svelte b/src/lib/Setting/Pages/PromptSettings.svelte
index 94d83142..50178989 100644
--- a/src/lib/Setting/Pages/PromptSettings.svelte
+++ b/src/lib/Setting/Pages/PromptSettings.svelte
@@ -4,7 +4,7 @@
     import PromptDataItem from "src/lib/UI/PromptDataItem.svelte";
     import { tokenizePreset, type PromptItem } from "src/ts/process/prompt";
     import { templateCheck } from "src/ts/process/templates/templateCheck";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
@@ -18,7 +18,7 @@
     let warns: string[] = $state([])
     let tokens = $state(0)
     let extokens = $state(0)
-    executeTokenize($DataBase.promptTemplate)
+    executeTokenize(DBState.db.promptTemplate)
   interface Props {
     onGoBack?: () => void;
     mode?: 'independent'|'inline';
@@ -33,10 +33,10 @@
     }
 
     $effect.pre(() => {
-    warns = templateCheck($DataBase)
+    warns = templateCheck(DBState.db)
   });
   $effect.pre(() => {
-    executeTokenize($DataBase.promptTemplate)
+    executeTokenize(DBState.db.promptTemplate)
   });
 </script>
 {#if mode === 'independent'}
@@ -72,84 +72,84 @@
 
 {#if subMenu === 0}
     <div class="contain w-full max-w-full mt-4 flex flex-col p-3 rounded-md">
-        {#if $DataBase.promptTemplate.length === 0}
+        {#if DBState.db.promptTemplate.length === 0}
                 <div class="text-textcolor2">No Format</div>
         {/if}
         {#key sorted}
-            {#each $DataBase.promptTemplate as prompt, i}
-                <PromptDataItem bind:promptItem={$DataBase.promptTemplate[i]} onRemove={() => {
-                    let templates = $DataBase.promptTemplate
+            {#each DBState.db.promptTemplate as prompt, i}
+                <PromptDataItem bind:promptItem={DBState.db.promptTemplate[i]} onRemove={() => {
+                    let templates = DBState.db.promptTemplate
                     templates.splice(i, 1)
-                    $DataBase.promptTemplate = templates
+                    DBState.db.promptTemplate = templates
                 }} moveDown={() => {
-                    if(i === $DataBase.promptTemplate.length - 1){
+                    if(i === DBState.db.promptTemplate.length - 1){
                         return
                     }
-                    let templates = $DataBase.promptTemplate
+                    let templates = DBState.db.promptTemplate
                     let temp = templates[i]
                     templates[i] = templates[i + 1]
                     templates[i + 1] = temp
-                    $DataBase.promptTemplate = templates
+                    DBState.db.promptTemplate = templates
                 }} moveUp={() => {
                     if(i === 0){
                         return
                     }
-                    let templates = $DataBase.promptTemplate
+                    let templates = DBState.db.promptTemplate
                     let temp = templates[i]
                     templates[i] = templates[i - 1]
                     templates[i - 1] = temp
-                    $DataBase.promptTemplate = templates
+                    DBState.db.promptTemplate = templates
                 }} />
             {/each}
         {/key}
     </div>
 
     <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
-        let value = $DataBase.promptTemplate ?? []
+        let value = DBState.db.promptTemplate ?? []
         value.push({
             type: "plain",
             text: "",
             role: "system",
             type2: 'normal'
         })
-        $DataBase.promptTemplate = value
+        DBState.db.promptTemplate = value
     }}><PlusIcon /></button>
 
     <span class="text-textcolor2 text-sm mt-2">{tokens} {language.fixedTokens}</span>
     <span class="text-textcolor2 mb-6 text-sm mt-2">{extokens} {language.exactTokens}</span>
 {:else}
     <span class="text-textcolor mt-4">{language.postEndInnerFormat}</span>
-    <TextInput bind:value={$DataBase.promptSettings.postEndInnerFormat}/>
+    <TextInput bind:value={DBState.db.promptSettings.postEndInnerFormat}/>
 
-    <Check bind:check={$DataBase.promptSettings.sendChatAsSystem} name={language.sendChatAsSystem} className="mt-4"/>
-    <Check bind:check={$DataBase.promptSettings.sendName} name={language.formatGroupInSingle} className="mt-4"/>
-    <Check bind:check={$DataBase.promptSettings.utilOverride} name={language.utilOverride} className="mt-4"/>
-    <Check bind:check={$DataBase.jsonSchemaEnabled} name={language.enableJsonSchema} className="mt-4"/>
-    <Check bind:check={$DataBase.strictJsonSchema} name={language.strictJsonSchema} className="mt-4"/>
+    <Check bind:check={DBState.db.promptSettings.sendChatAsSystem} name={language.sendChatAsSystem} className="mt-4"/>
+    <Check bind:check={DBState.db.promptSettings.sendName} name={language.formatGroupInSingle} className="mt-4"/>
+    <Check bind:check={DBState.db.promptSettings.utilOverride} name={language.utilOverride} className="mt-4"/>
+    <Check bind:check={DBState.db.jsonSchemaEnabled} name={language.enableJsonSchema} className="mt-4"/>
+    <Check bind:check={DBState.db.strictJsonSchema} name={language.strictJsonSchema} className="mt-4"/>
 
-    {#if $DataBase.showUnrecommended}
-        <Check bind:check={$DataBase.promptSettings.customChainOfThought} name={language.customChainOfThought} className="mt-4">
+    {#if DBState.db.showUnrecommended}
+        <Check bind:check={DBState.db.promptSettings.customChainOfThought} name={language.customChainOfThought} className="mt-4">
             <Help unrecommended key='customChainOfThought' />
         </Check>
     {/if}
     <span class="text-textcolor mt-4">{language.maxThoughtTagDepth}</span>
-    <NumberInput bind:value={$DataBase.promptSettings.maxThoughtTagDepth}/>
+    <NumberInput bind:value={DBState.db.promptSettings.maxThoughtTagDepth}/>
     <span class="text-textcolor mt-4">{language.groupOtherBotRole} <Help key="groupOtherBotRole"/></span>
-    <SelectInput bind:value={$DataBase.groupOtherBotRole}>
+    <SelectInput bind:value={DBState.db.groupOtherBotRole}>
         <OptionInput value="user">User</OptionInput>
         <OptionInput value="system">System</OptionInput>
         <OptionInput value="assistant">assistant</OptionInput>
     </SelectInput>
     <span class="text-textcolor mt-4">{language.customPromptTemplateToggle} <Help key='customPromptTemplateToggle' /></span>
-    <TextAreaInput bind:value={$DataBase.customPromptTemplateToggle}/>
+    <TextAreaInput bind:value={DBState.db.customPromptTemplateToggle}/>
     <span class="text-textcolor mt-4">{language.defaultVariables} <Help key='defaultVariables' /></span>
-    <TextAreaInput bind:value={$DataBase.templateDefaultVariables}/>
+    <TextAreaInput bind:value={DBState.db.templateDefaultVariables}/>
     <span class="text-textcolor mt-4">{language.groupInnerFormat} <Help key='groupInnerFormat' /></span>
-    <TextAreaInput placeholder={`<{{char}}\'s Message>\n{{slot}}\n</{{char}}\'s Message>`} bind:value={$DataBase.groupTemplate}/>
-    {#if $DataBase.jsonSchemaEnabled}
+    <TextAreaInput placeholder={`<{{char}}\'s Message>\n{{slot}}\n</{{char}}\'s Message>`} bind:value={DBState.db.groupTemplate}/>
+    {#if DBState.db.jsonSchemaEnabled}
         <span class="text-textcolor mt-4">{language.jsonSchema} <Help key='jsonSchema' /></span>
-        <TextAreaInput bind:value={$DataBase.jsonSchema}/>
+        <TextAreaInput bind:value={DBState.db.jsonSchema}/>
         <span class="text-textcolor mt-4">{language.extractJson} <Help key='extractJson' /></span>
-        <TextInput bind:value={$DataBase.extractJson}/>
+        <TextInput bind:value={DBState.db.extractJson}/>
     {/if}
 {/if}
\ No newline at end of file
diff --git a/src/lib/Setting/Pages/UserSettings.svelte b/src/lib/Setting/Pages/UserSettings.svelte
index 0bb606fc..eba078c5 100644
--- a/src/lib/Setting/Pages/UserSettings.svelte
+++ b/src/lib/Setting/Pages/UserSettings.svelte
@@ -2,7 +2,7 @@
     import { language } from "src/lang";
     import { hubURL } from "src/ts/characterCards";
     import { loadRisuAccountData, saveRisuAccountData } from "src/ts/drive/accounter";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import Check from "src/lib/UI/GUI/CheckInput.svelte";
     import { alertConfirm} from "src/ts/alert";
     import { forageStorage, isNodeServer, isTauri, loadInternalBackup } from "src/ts/storage/globalApi";
@@ -21,15 +21,15 @@
     if(e.origin.startsWith("https://sv.risuai.xyz") || e.origin.startsWith("http://127.0.0.1")){
         if(e.data.msg.type === 'drive'){
             await loadRisuAccountData()
-            $DataBase.account.data.refresh_token = e.data.msg.data.refresh_token
-            $DataBase.account.data.access_token = e.data.msg.data.access_token
-            $DataBase.account.data.expires_in = (e.data.msg.data.expires_in * 700) + Date.now()
+            DBState.db.account.data.refresh_token = e.data.msg.data.refresh_token
+            DBState.db.account.data.access_token = e.data.msg.data.access_token
+            DBState.db.account.data.expires_in = (e.data.msg.data.expires_in * 700) + Date.now()
             await saveRisuAccountData()
             popup.close()
         }
         else if(e.data.msg.data.vaild){
             openIframe = false
-            $DataBase.account = {
+            DBState.db.account = {
                 id: e.data.msg.id,
                 token: e.data.msg.token,
                 data: e.data.msg.data
@@ -59,7 +59,7 @@
     {language.loadBackupLocal}
 </Button>
 
-{#if !$DataBase.account}
+{#if !DBState.db.account}
     <Button
         onclick={async () => {
             if((await alertConfirm(language.backupLoadConfirm)) && (await alertConfirm(language.backupLoadConfirm2))){
@@ -107,21 +107,21 @@
 </Button>
 <div class="bg-darkbg p-3 rounded-md mb-2 flex flex-col items-start mt-2">
     <div class="w-full">
-        <h1 class="text-3xl font-black min-w-0">Risu Account{#if $DataBase.account}
+        <h1 class="text-3xl font-black min-w-0">Risu Account{#if DBState.db.account}
             <button class="bg-selected p-1 text-sm font-light rounded-md hover:bg-green-500 transition-colors float-right" onclick={async () => {
-                if($DataBase.account.useSync || forageStorage.isAccount){
+                if(DBState.db.account.useSync || forageStorage.isAccount){
                     unMigrationAccount()
                 }
                 
-                $DataBase.account = undefined
+                DBState.db.account = undefined
             }}>{language.logout}</button>
         {/if}</h1>
     </div>
-    {#if $DataBase.account}
-        <span class="mb-4 text-textcolor2">ID: {$DataBase.account.id}</span>
+    {#if DBState.db.account}
+        <span class="mb-4 text-textcolor2">ID: {DBState.db.account.id}</span>
         {#if !isTauri && (!Capacitor.isNativePlatform())}
             <div class="flex items-center mt-2">
-                {#if $DataBase.account.useSync || forageStorage.isAccount}
+                {#if DBState.db.account.useSync || forageStorage.isAccount}
                     <Check check={true} name={language.SaveDataInAccount} onChange={(v) => {
                         if(v){
                             unMigrationAccount()
diff --git a/src/lib/Setting/botpreset.svelte b/src/lib/Setting/botpreset.svelte
index 2b9b1f0f..3121c040 100644
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { alertCardExport, alertConfirm, alertError } from "../../ts/alert";
     import { language } from "../../lang";
-    import { DataBase, changeToPreset, copyPreset, downloadPreset, importPreset } from "../../ts/storage/database";
+    import { DBState, changeToPreset, copyPreset, downloadPreset, importPreset } from "../../ts/storage/database.svelte";
     import { CopyIcon, Share2Icon, PencilIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
     import TextInput from "../UI/GUI/TextInput.svelte";
     import { prebuiltPresets } from "src/ts/process/templates/templates";
@@ -26,15 +26,15 @@
                 </button>
             </div>
         </div>
-        {#each $DataBase.botPresets as presets, i}
+        {#each DBState.db.botPresets as presets, i}
             <button onclick={() => {
                 if(!editMode){
                     changeToPreset(i)
                     close()
                 }
-            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.botPresetsId}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === DBState.db.botPresetsId}>
                 {#if editMode}
-                    <TextInput bind:value={$DataBase.botPresets[i].name} placeholder="string" padding={false}/>
+                    <TextInput bind:value={DBState.db.botPresets[i].name} placeholder="string" padding={false}/>
                 {:else}
                     {#if i < 9}
                     <span class="w-2 text-center mr-2 text-textcolor2">{i + 1}</span>
@@ -64,16 +64,16 @@
                     </div>
                     <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
                         e.stopPropagation()
-                        if($DataBase.botPresets.length === 1){
+                        if(DBState.db.botPresets.length === 1){
                             alertError(language.errors.onlyOneChat)
                             return
                         }
                         const d = await alertConfirm(`${language.removeConfirm}${presets.name}`)
                         if(d){
                             changeToPreset(0)
-                            let botPresets = $DataBase.botPresets
+                            let botPresets = DBState.db.botPresets
                             botPresets.splice(i, 1)
-                            $DataBase.botPresets = botPresets
+                            DBState.db.botPresets = botPresets
                             changeToPreset(0, false)
                         }
                     }}>
@@ -84,12 +84,12 @@
         {/each}
         <div class="flex mt-2 items-center">
             <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" onclick={() => {
-                let botPresets = $DataBase.botPresets
+                let botPresets = DBState.db.botPresets
                 let newPreset = structuredClone(prebuiltPresets.OAI2)
                 newPreset.name = `New Preset`
                 botPresets.push(newPreset)
 
-                $DataBase.botPresets = botPresets
+                DBState.db.botPresets = botPresets
             }}>
                 <PlusIcon/>
             </button>
diff --git a/src/lib/Setting/listedPersona.svelte b/src/lib/Setting/listedPersona.svelte
index a822df52..b90c7156 100644
--- a/src/lib/Setting/listedPersona.svelte
+++ b/src/lib/Setting/listedPersona.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { XIcon } from "lucide-svelte";
     import { language } from "../../lang";
-    import { DataBase } from "../../ts/storage/database";
+    import { DBState } from "../../ts/storage/database.svelte";
     import { changeUserPersona } from "src/ts/persona";
 
 
@@ -23,11 +23,11 @@
                 </button>
             </div>
         </div>
-        {#each $DataBase.personas as persona, i}
+        {#each DBState.db.personas as persona, i}
             <button onclick={() => {
                 changeUserPersona(i)
                 close()
-            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === $DataBase.selectedPersona}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={i === DBState.db.selectedPersona}>
                 <span>{persona.name}</span>
             </button>
         {/each}
diff --git a/src/lib/Setting/lorepreset.svelte b/src/lib/Setting/lorepreset.svelte
index 14df8f3b..9b4d92ef 100644
--- a/src/lib/Setting/lorepreset.svelte
+++ b/src/lib/Setting/lorepreset.svelte
@@ -1,7 +1,7 @@
 <script>
     import { alertConfirm, alertError } from "../../ts/alert";
     import { language } from "../../lang";
-    import { DataBase } from "../../ts/storage/database";
+    import { DBState } from "../../ts/storage/database.svelte";
     import { EditIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
     import TextInput from "../UI/GUI/TextInput.svelte";
     let editMode = $state(false)
@@ -19,29 +19,29 @@
                 </button>
             </div>
         </div>
-        {#each $DataBase.loreBook as lore, ind}
+        {#each DBState.db.loreBook as lore, ind}
             <button onclick={() => {
                 if(!editMode){
-                    $DataBase.loreBookPage = ind
+                    DBState.db.loreBookPage = ind
                 }
-            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
+            }} class="flex items-center text-textcolor border-t-1 border-solid border-0 border-darkborderc p-2 cursor-pointer" class:bg-selected={ind === DBState.db.loreBookPage}>
                 {#if editMode}
-                    <TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
+                    <TextInput bind:value={DBState.db.loreBook[ind].name} placeholder="string" padding={false}/>
                 {:else}
                     <span>{lore.name}</span>
                 {/if}
                 <div class="flex-grow flex justify-end">
                     <div class="text-textcolor2 hover:text-green-500 cursor-pointer" onclick={async (e) => {
                         e.stopPropagation()
-                        if($DataBase.loreBook.length === 1){
+                        if(DBState.db.loreBook.length === 1){
                             return
                         }
                         const d = await alertConfirm(`${language.removeConfirm}${lore.name}`)
                         if(d){
-                            $DataBase.loreBookPage = 0
-                            let loreBook = $DataBase.loreBook
+                            DBState.db.loreBookPage = 0
+                            let loreBook = DBState.db.loreBook
                             loreBook.splice(ind, 1)
-                            $DataBase.loreBook = loreBook
+                            DBState.db.loreBook = loreBook
                         }
                     }}>
                         <TrashIcon size={18}/>
@@ -51,14 +51,14 @@
         {/each}
         <div class="flex mt-2 items-center">
             <button class="text-textcolor2 hover:text-green-500 cursor-pointer mr-1" onclick={() => {
-                let loreBooks = $DataBase.loreBook
+                let loreBooks = DBState.db.loreBook
                 let newLoreBook = {
                     name: `New LoreBook`,
                     data: []
                 }
                 loreBooks.push(newLoreBook)
 
-                $DataBase.loreBook = loreBooks
+                DBState.db.loreBook = loreBooks
             }}>
                 <PlusIcon/>
             </button>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index a191de42..1a7ad335 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { language } from "../../lang";
     import { tokenizeAccurate } from "../../ts/tokenizer";
-    import { DataBase, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database";
+    import { DBState, saveImage as saveAsset, type Database, type character, type groupChat } from "../../ts/storage/database.svelte";
     import { CharConfigSubMenu, MobileGUI, ShowRealmFrameStore, selectedCharID } from "../../ts/stores";
     import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, User, CurlyBraces, Volume2Icon, DownloadIcon, FolderUpIcon } from 'lucide-svelte'
     import Check from "../UI/GUI/CheckInput.svelte";
@@ -64,85 +64,31 @@
                 tokens.firstMsg = await tokenizeAccurate(chara.firstMessage)
             }
         }
-        if(lasttokens.localNote !== currentChar.data.chats[currentChar.data.chatPage].note){
-            lasttokens.localNote = currentChar.data.chats[currentChar.data.chatPage].note
-            tokens.localNote = await tokenizeAccurate(currentChar.data.chats[currentChar.data.chatPage].note)
+        if(lasttokens.localNote !== DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].note){
+            lasttokens.localNote = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].note
+            tokens.localNote = await tokenizeAccurate(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].note)
         
         }
 
     }
 
-    let database:Database = $state()
-    let currentChar:{
-        type: 'character',
-        data: character
-    }|{
-        type: 'group',
-        data: groupChat
-    } = $state()
-
-
-    const unsub = DataBase.subscribe(async (v) => {
-        database = v
-        const cha = (v.characters[$selectedCharID])
-        if(!cha){
-            return
-        }
-        if((!currentChar) || (!isEqual(currentChar.data, cha))){
-            if(cha.type === 'character'){
-                currentChar = {
-                    type: 'character',
-                    data: structuredClone(cha)
-                }
-            }
-            else{
-                currentChar = {
-                    type: 'group',
-                    data: structuredClone(cha)
-                }
-            }
-        }
-        emos = currentChar.data.emotionImages
-        currentChar = currentChar
-
-        if (currentChar.data.ttsMode === 'gptsovits' && (currentChar.data as character).gptSoVitsConfig) {
-            if (!(currentChar.data as character).gptSoVitsConfig.use_prompt) {
-                (currentChar.data as character).gptSoVitsConfig.prompt = undefined
-            }
-            if((currentChar.data as character).gptSoVitsConfig.use_auto_path){
-                (currentChar.data as character).gptSoVitsConfig.ref_audio_path = undefined;
-
-                (currentChar.data as character).gptSoVitsConfig.use_prompt = false;
-                (currentChar.data as character).gptSoVitsConfig.prompt = undefined;
-
-            }
-        }
-
-    })
 
     let assetFileExtensions:string[] = $state([])
     let assetFilePath:string[] = $state([])
-    let licensed = $state((currentChar.type === 'character') ? currentChar.data.license : '')
+    let licensed = $state((DBState.db.characters[$selectedCharID].type === 'character') ? (DBState.db.characters[$selectedCharID] as character).license : '')
 
     $effect.pre(() => {
-        if(database.characters[$selectedCharID].chaId === currentChar.data.chaId){
-            database.characters[$selectedCharID] = currentChar.data
-        }
-        else{
-            loadTokenize(currentChar.data)
-        }
-        emos = currentChar.data.emotionImages
-        DataBase.set(database)
-        loadTokenize(currentChar.data)
+        emos = DBState.db.characters[$selectedCharID].emotionImages
+        loadTokenize(DBState.db.characters[$selectedCharID])
 
-        if(currentChar.type ==='character' && database.useAdditionalAssetsPreview){
-            if(currentChar.data.additionalAssets){
-                for(let i = 0; i < currentChar.data.additionalAssets.length; i++){
-                    if(currentChar.data.additionalAssets[i].length > 2 && currentChar.data.additionalAssets[i][2]) {
-                        assetFileExtensions[i] = currentChar.data.additionalAssets[i][2]
+        if(DBState.db.characters[$selectedCharID].type ==='character' && DBState.db.useAdditionalAssetsPreview){
+            if((DBState.db.characters[$selectedCharID] as character).additionalAssets){
+                for(let i = 0; i < (DBState.db.characters[$selectedCharID] as character).additionalAssets.length; i++){
+                    if((DBState.db.characters[$selectedCharID] as character).additionalAssets[i].length > 2 && (DBState.db.characters[$selectedCharID] as character).additionalAssets[i][2]) {
+                        assetFileExtensions[i] = (DBState.db.characters[$selectedCharID] as character).additionalAssets[i][2]
                     } else 
-                        assetFileExtensions[i] = currentChar.data.additionalAssets[i][1].split('.').pop()
-                    getFileSrc(currentChar.data.additionalAssets[i][1]).then((filePath) => {
+                        assetFileExtensions[i] = (DBState.db.characters[$selectedCharID] as character).additionalAssets[i][1].split('.').pop()
+                    getFileSrc((DBState.db.characters[$selectedCharID] as character).additionalAssets[i][1]).then((filePath) => {
                         assetFilePath[i] = filePath
                     })
                 }
@@ -151,15 +97,12 @@
         
     });
 
-    onDestroy(unsub);
-
-
     $effect.pre(() => {
-        licensed = (currentChar.type === 'character') ? currentChar.data.license : ''
+        licensed = (DBState.db.characters[$selectedCharID].type === 'character') ? (DBState.db.characters[$selectedCharID] as character).license : ''
     });
     $effect.pre(() => {
-        if (currentChar.data.ttsMode === 'novelai' && (currentChar.data as character).naittsConfig === undefined) {
-            (currentChar.data as character).naittsConfig = {
+        if (DBState.db.characters[$selectedCharID].ttsMode === 'novelai' && (DBState.db.characters[$selectedCharID] as character).naittsConfig === undefined) {
+            (DBState.db.characters[$selectedCharID] as character).naittsConfig = {
                 customvoice: false,
                 voice: 'Aini',
                 version: 'v2'
@@ -167,8 +110,8 @@
         }
     });
     $effect.pre(() => {
-        if (currentChar.data.ttsMode === 'gptsovits' && (currentChar.data as character).gptSoVitsConfig === undefined) {
-            (currentChar.data as character).gptSoVitsConfig = {
+        if (DBState.db.characters[$selectedCharID].ttsMode === 'gptsovits' && (DBState.db.characters[$selectedCharID] as character).gptSoVitsConfig === undefined) {
+            (DBState.db.characters[$selectedCharID] as character).gptSoVitsConfig = {
                 url: '',
                 use_auto_path: false,
                 ref_audio_path: '',
@@ -198,8 +141,8 @@
     }[] = $state([])
 
     $effect.pre(() => {
-        if (currentChar.data.ttsMode === 'fishspeech' && (currentChar.data as character).fishSpeechConfig === undefined) {
-            (currentChar.data as character).fishSpeechConfig = {
+        if (DBState.db.characters[$selectedCharID].ttsMode === 'fishspeech' && (DBState.db.characters[$selectedCharID] as character).fishSpeechConfig === undefined) {
+            (DBState.db.characters[$selectedCharID] as character).fishSpeechConfig = {
                 model: {
                     _id: '',
                     title: '',
@@ -212,7 +155,7 @@
     });
 
     $effect.pre(() => {
-        if(currentChar.type === 'group' && ($CharConfigSubMenu === 4 || $CharConfigSubMenu === 5)){
+        if(DBState.db.characters[$selectedCharID].type === 'group' && ($CharConfigSubMenu === 4 || $CharConfigSubMenu === 5)){
             $CharConfigSubMenu = 0
         }
 
@@ -222,12 +165,12 @@
         try {
             const res = await fetch(`https://api.fish.audio/model?self=true`, {
                 headers: {
-                    'Authorization': `Bearer ${$DataBase.fishSpeechKey}`
+                    'Authorization': `Bearer ${DBState.db.fishSpeechKey}`
                 }
             });
             const data = await res.json();
             console.log(data.items);
-            console.log(currentChar.data)
+            console.log(DBState.db.characters[$selectedCharID])
             
             if (Array.isArray(data.items)) {
                 fishSpeechModels = data.items.map((item) => ({
@@ -258,7 +201,7 @@
         <button class={$CharConfigSubMenu === 3 ? 'text-textcolor' : 'text-textcolor2'} onclick={() => {$CharConfigSubMenu = 3}}>
             <BookIcon />
         </button>
-        {#if currentChar.type === 'character'}
+        {#if DBState.db.characters[$selectedCharID].type === 'character'}
             <button class={$CharConfigSubMenu === 5 ? 'text-textcolor' : 'text-textcolor2'} onclick={() => {$CharConfigSubMenu = 5}}>
                 <Volume2Icon />
             </button>
@@ -274,26 +217,26 @@
 
 
 {#if $CharConfigSubMenu === 0}
-    {#if currentChar.type !== 'group' && licensed !== 'private'}
-        <TextInput size="xl" marginBottom placeholder="Character Name" bind:value={currentChar.data.name} />
+    {#if DBState.db.characters[$selectedCharID].type !== 'group' && licensed !== 'private'}
+        <TextInput size="xl" marginBottom placeholder="Character Name" bind:value={DBState.db.characters[$selectedCharID].name} />
         <span class="text-textcolor">{language.description} <Help key="charDesc"/></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.desc}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={(DBState.db.characters[$selectedCharID] as character).desc}></TextAreaInput>
         <span class="text-textcolor2 mb-6 text-sm">{tokens.desc} {language.tokens}</span>
         <span class="text-textcolor">{language.firstMessage} <Help key="charFirstMessage"/></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.firstMessage}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].firstMessage}></TextAreaInput>
         <span class="text-textcolor2 mb-6 text-sm">{tokens.firstMsg} {language.tokens}</span>
 
-    {:else if licensed !== 'private' && currentChar.type === 'group'}
-        <TextInput size="xl" marginBottom placeholder="Group Name" bind:value={currentChar.data.name} />
+    {:else if licensed !== 'private' && DBState.db.characters[$selectedCharID].type === 'group'}
+        <TextInput size="xl" marginBottom placeholder="Group Name" bind:value={DBState.db.characters[$selectedCharID].name} />
         <span class="text-textcolor">{language.character}</span>
         <div class="p-4 gap-2 bg-bgcolor rounded-lg char-grid">
-            {#if currentChar.data.characters.length === 0}
+            {#if (DBState.db.characters[$selectedCharID] as groupChat).characters.length === 0}
                 <span class="text-textcolor2">No Character</span>
             {:else}
                 <div></div>
                 <div class="text-center">{language.talkness}</div>
                 <div class="text-center">{language.active}</div>
-                {#each currentChar.data.characters as char, i}
+                {#each (DBState.db.characters[$selectedCharID] as groupChat).characters as char, i}
                     {#await getCharImage(findCharacterbyId(char).image, 'css')}
                         <BarIcon onClick={() => {
                             rmCharFromGroup(i)
@@ -308,20 +251,20 @@
                     <div class="flex items-center px-2 py-3">
                         {#each [1,2,3,4,5,6] as barIndex}
                             <button class="bg-selected h-full flex-1 border-r-bgcolor border-r" 
-                                class:bg-green-500={currentChar.data.characterTalks[i] >= (1 / 6 * barIndex)}
-                                class:bg-selected={currentChar.data.characterTalks[i] < (1 / 6 * barIndex)}
+                                class:bg-green-500={(DBState.db.characters[$selectedCharID] as groupChat).characterTalks[i] >= (1 / 6 * barIndex)}
+                                class:bg-selected={(DBState.db.characters[$selectedCharID] as groupChat).characterTalks[i] < (1 / 6 * barIndex)}
                                 class:rounded-l-lg={barIndex === 1}
                                 class:rounded-r-lg={barIndex === 6}
                                 onclick={() => {
-                                    if(currentChar.data.type === 'group'){
-                                        currentChar.data.characterTalks[i] = (1 / 6 * barIndex)
+                                    if(DBState.db.characters[$selectedCharID].type === 'group'){
+                                        (DBState.db.characters[$selectedCharID] as groupChat).characterTalks[i] = (1 / 6 * barIndex)
                                     }
                                 }}
                             ></button>
                         {/each}
                     </div>
                     <div class="flex items-center justify-center">
-                        <Check margin={false} bind:check={currentChar.data.characterActive[i]} />
+                        <Check margin={false} bind:check={(DBState.db.characters[$selectedCharID] as groupChat).characterActive[i]} />
                     </div>
                 {/each}
             {/if}
@@ -337,7 +280,7 @@
     <TextAreaInput
         margin="both"
         autocomplete="off"
-        bind:value={currentChar.data.chats[currentChar.data.chatPage].note}
+        bind:value={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].note}
         highlight
         placeholder={getAuthorNoteDefaultText()}
     />
@@ -345,57 +288,57 @@
 
     {#if !$MobileGUI}
         <div class="flex mt-6 items-center">
-            <Check bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
+            <Check bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
         </div>
 
-        {#each parseKeyValue($DataBase.customPromptTemplateToggle) as toggle}
+        {#each parseKeyValue(DBState.db.customPromptTemplateToggle) as toggle}
             <div class="flex mt-2 items-center">
-                <Check check={$DataBase.globalChatVariables[`toggle_${toggle[0]}`] === '1'} name={toggle[1]} onChange={() => {
-                    $DataBase.globalChatVariables[`toggle_${toggle[0]}`] = $DataBase.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
+                <Check check={DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1'} name={toggle[1]} onChange={() => {
+                    DBState.db.globalChatVariables[`toggle_${toggle[0]}`] = DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
                 }} />
             </div>
         {/each}
 
         
-        {#if $DataBase.supaModelType !== 'none' || $DataBase.hanuraiEnable}
-            {#if $DataBase.hanuraiEnable}
+        {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
+            {#if DBState.db.hanuraiEnable}
                 <div class="flex mt-2 items-center">
-                    <Check bind:check={currentChar.data.supaMemory} name={ language.hanuraiMemory}/>
+                    <Check bind:check={DBState.db.characters[$selectedCharID].supaMemory} name={ language.hanuraiMemory}/>
                 </div>
-            {:else if $DataBase.hypaMemory}
+            {:else if DBState.db.hypaMemory}
                 <div class="flex mt-2 items-center">
-                    <Check bind:check={currentChar.data.supaMemory} name={ language.ToggleHypaMemory}/>
+                    <Check bind:check={DBState.db.characters[$selectedCharID].supaMemory} name={ language.ToggleHypaMemory}/>
                 </div>
             {:else}
                 <div class="flex mt-2 items-center">
-                    <Check bind:check={currentChar.data.supaMemory} name={ language.ToggleSuperMemory}/>
+                    <Check bind:check={DBState.db.characters[$selectedCharID].supaMemory} name={ language.ToggleSuperMemory}/>
                 </div>
             {/if}
         {/if}
 
-        {#if currentChar.type === 'group'}
+        {#if DBState.db.characters[$selectedCharID].type === 'group'}
             <div class="flex mt-2 items-center">
-                <Check bind:check={currentChar.data.orderByOrder} name={language.orderByOrder}/>
+                <Check bind:check={(DBState.db.characters[$selectedCharID] as groupChat).orderByOrder} name={language.orderByOrder}/>
             </div>
         {/if}
     {/if}
     {#if licensed === 'private'}
         <Button onclick={async () => {
-            const conf = await alertConfirm(language.removeConfirm + currentChar.data.name)
+            const conf = await alertConfirm(language.removeConfirm + DBState.db.characters[$selectedCharID].name)
             if(!conf){
                 return
             }
-            const conf2 = await alertConfirm(language.removeConfirm2 + currentChar.data.name)
+            const conf2 = await alertConfirm(language.removeConfirm2 + DBState.db.characters[$selectedCharID].name)
             if(!conf2){
                 return
             }
-            let chars = $DataBase.characters
+            let chars = DBState.db.characters
             chars.splice($selectedCharID, 1)
             checkCharOrder()
             $selectedCharID = -1
-            $DataBase.characters = chars
+            DBState.db.characters = chars
 
-        }} className="mt-2" size="sm">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
+        }} className="mt-2" size="sm">{ DBState.db.characters[$selectedCharID].type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
     {/if}
 {:else if licensed === 'private'}
     <span>You are not allowed</span>
@@ -406,10 +349,10 @@
     {#if !$MobileGUI}
         <h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
     {/if}
-    <span class="text-textcolor mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
-    {#if currentChar.type === 'group'}
-        <button onclick={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
-            {#await getCharImage(currentChar.data.image, 'css')}
+    <span class="text-textcolor mt-2 mb-2">{DBState.db.characters[$selectedCharID].type !== 'group' ? language.charIcon : language.groupIcon}</span>
+    {#if DBState.db.characters[$selectedCharID].type === 'group'}
+        <button onclick={async () => {await selectCharImg($selectedCharID)}}>
+            {#await getCharImage(DBState.db.characters[$selectedCharID].image, 'css')}
                 <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring"></div>
             {:then im}
                 <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring" style={im}></div>     
@@ -417,23 +360,22 @@
         </button>
     {:else}
         <div class="p-2 border-darkborderc border rounded-md flex flex-wrap gap-2">
-            {#if currentChar.data.image !== '' && currentChar.data.image}
+            {#if DBState.db.characters[$selectedCharID].image !== '' && DBState.db.characters[$selectedCharID].image}
                 <button onclick={() => {
                     if(
-                        currentChar.type === 'character' &&
-                        currentChar.data.image !== '' &&
-                        currentChar.data.image &&
+                        DBState.db.characters[$selectedCharID].type === 'character' &&
+                        DBState.db.characters[$selectedCharID].image !== '' &&
+                        DBState.db.characters[$selectedCharID].image &&
                         iconRemoveMode
                     ){
-                        currentChar.data.image = ''
-                        if(currentChar.data.ccAssets && currentChar.data.ccAssets.length > 0){
+                        DBState.db.characters[$selectedCharID].image = ''
+                        if((DBState.db.characters[$selectedCharID] as character).ccAssets && (DBState.db.characters[$selectedCharID] as character).ccAssets.length > 0){
                             changeCharImage($selectedCharID, 0)
-                            currentChar = currentChar
                         }
                         iconRemoveMode = false
                     }
                 }}>
-                    {#await getCharImage(currentChar.data.image, currentChar.data.largePortrait ? 'lgcss' : 'css')}
+                    {#await getCharImage(DBState.db.characters[$selectedCharID].image, (DBState.db.characters[$selectedCharID] as character).largePortrait ? 'lgcss' : 'css')}
                         <div
                             class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring transition-shadow"
                             class:ring-red-500={iconRemoveMode}
@@ -447,20 +389,18 @@
                     {/await}
                 </button>
             {/if}
-            {#if currentChar.data.ccAssets}
-                {#each currentChar.data.ccAssets as assets, i}
+            {#if (DBState.db.characters[$selectedCharID] as character).ccAssets}
+                {#each (DBState.db.characters[$selectedCharID] as character).ccAssets as assets, i}
                     <button onclick={async () => {
                         if(!iconRemoveMode){
                             changeCharImage($selectedCharID, i)
-                            currentChar = currentChar
                         }
-                        else if(currentChar.type === 'character'){
-                            currentChar.data.ccAssets.splice(i, 1)
-                            currentChar.data.ccAssets = currentChar.data.ccAssets
+                        else if(DBState.db.characters[$selectedCharID].type === 'character'){
+                            (DBState.db.characters[$selectedCharID] as character).ccAssets.splice(i, 1)
                             iconRemoveMode = false
                         }
                     }}>
-                        {#await getCharImage(assets.uri, currentChar.data.largePortrait ? 'lgcss' : 'css')}
+                        {#await getCharImage(assets.uri, (DBState.db.characters[$selectedCharID] as character).largePortrait ? 'lgcss' : 'css')}
                             <div
                                 class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer hover:ring transition-shadow"
                                 class:ring-red-500={iconRemoveMode} class:ring={iconRemoveMode}
@@ -474,10 +414,10 @@
                     </button>
                 {/each}
             {/if}
-            <button onclick={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
+            <button onclick={async () => {await selectCharImg($selectedCharID);}}>
                 <div
                     class="rounded-md h-24 w-24 cursor-pointer border-darkborderc border border-dashed flex justify-center items-center hover:border-blue-500"
-                    style={currentChar.data.largePortrait ? 'height: 10.66rem;' : ''}
+                    style={(DBState.db.characters[$selectedCharID] as character).largePortrait ? 'height: 10.66rem;' : ''}
                 >
                     <PlusIcon />
                 </div>
@@ -492,13 +432,13 @@
         </div>
     {/if}
 
-    {#if currentChar.type === 'character' && currentChar.data.image !== ''}
+    {#if DBState.db.characters[$selectedCharID].type === 'character' && DBState.db.characters[$selectedCharID].image !== ''}
         <div class="flex items-center mt-4">
-            <Check bind:check={currentChar.data.largePortrait} name={language.largePortrait}/>
+            <Check bind:check={(DBState.db.characters[$selectedCharID] as character).largePortrait} name={language.largePortrait}/>
         </div>
     {/if}
 
-    {#if currentChar.type === 'group'}
+    {#if DBState.db.characters[$selectedCharID].type === 'group'}
         <Button onclick={makeGroupImage}>
             {language.createGroupImg}
         </Button>
@@ -508,21 +448,21 @@
     <span class="text-textcolor mt-6 mb-2">{language.viewScreen}</span>
     <!-- svelte-ignore block_empty -->
 
-    {#if currentChar.type !== 'group'}
-        <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen} onchange={() => {
-            if(currentChar.type === 'character'){
-                currentChar.data = updateInlayScreen(currentChar.data)
+    {#if DBState.db.characters[$selectedCharID].type !== 'group'}
+        <SelectInput className="mb-2" bind:value={DBState.db.characters[$selectedCharID].viewScreen} onchange={() => {
+            if(DBState.db.characters[$selectedCharID].type === 'character'){
+                DBState.db.characters[$selectedCharID] = updateInlayScreen((DBState.db.characters[$selectedCharID] as character))
             }
         }}>
             <OptionInput value="none">{language.none}</OptionInput>
             <OptionInput value="emotion">{language.emotionImage}</OptionInput>
             <OptionInput value="imggen">{language.imageGeneration}</OptionInput>
-            {#if $DataBase.tpo}
+            {#if DBState.db.tpo}
                 <OptionInput value="vn">VN test</OptionInput>
             {/if}
         </SelectInput>
     {:else}
-        <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
+        <SelectInput className="mb-2" bind:value={DBState.db.characters[$selectedCharID].viewScreen}>
             <OptionInput value="none">{language.none}</OptionInput>
             <OptionInput value="single">{language.singleView}</OptionInput>
             <OptionInput value="multiple">{language.SpacedView}</OptionInput>
@@ -531,7 +471,7 @@
         </SelectInput>
     {/if}
 
-    {#if currentChar.data.viewScreen === 'emotion'}
+    {#if DBState.db.characters[$selectedCharID].viewScreen === 'emotion'}
         <span class="text-textcolor mt-6">{language.emotionImage} <Help key="emotion"/></span>
         <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
 
@@ -544,7 +484,7 @@
                     <th class="font-medium w-1/2">{language.emotion}</th>
                     <th class="font-medium"></th>
                 </tr>
-                {#if currentChar.data.emotionImages.length === 0}
+                {#if DBState.db.characters[$selectedCharID].emotionImages.length === 0}
                     <tr>
                         <td colspan="3">{language.noImages}</td>
                     </tr>
@@ -557,7 +497,7 @@
                                 <td class="font-medium truncate w-1/3"><img src={im} alt="img" class="w-full"></td>                        
                             {/await}
                             <td class="font-medium truncate w-1/2">
-                                <TextInput marginBottom size='lg' bind:value={currentChar.data.emotionImages[i][0]} />
+                                <TextInput marginBottom size='lg' bind:value={DBState.db.characters[$selectedCharID].emotionImages[i][0]} />
                             </td>
                             <td>
                                 <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
@@ -583,37 +523,37 @@
             {/if}
         </div>
 
-        {#if currentChar.data.inlayViewScreen}
+        {#if (DBState.db.characters[$selectedCharID] as character).inlayViewScreen}
             <span class="text-textcolor mt-2">{language.imgGenInstructions}</span>
-            <TextAreaInput highlight bind:value={currentChar.data.newGenData.emotionInstructions} />
+            <TextAreaInput highlight bind:value={(DBState.db.characters[$selectedCharID] as character).newGenData.emotionInstructions} />
         {/if}
 
-        <CheckInput bind:check={currentChar.data.inlayViewScreen} name={language.inlayViewScreen} onChange={() => {
-            if(currentChar.type === 'character'){
-                if(currentChar.data.inlayViewScreen && currentChar.data.additionalAssets === undefined){
-                    currentChar.data.additionalAssets = []
-                }else if(!currentChar.data.inlayViewScreen && currentChar.data.additionalAssets.length === 0){
-                    currentChar.data.additionalAssets = undefined
+        <CheckInput bind:check={(DBState.db.characters[$selectedCharID] as character).inlayViewScreen} name={language.inlayViewScreen} onChange={() => {
+            if(DBState.db.characters[$selectedCharID].type === 'character'){
+                if((DBState.db.characters[$selectedCharID] as character).inlayViewScreen && (DBState.db.characters[$selectedCharID] as character).additionalAssets === undefined){
+                    (DBState.db.characters[$selectedCharID] as character).additionalAssets = []
+                }else if(!(DBState.db.characters[$selectedCharID] as character).inlayViewScreen && (DBState.db.characters[$selectedCharID] as character).additionalAssets.length === 0){
+                    (DBState.db.characters[$selectedCharID] as character).additionalAssets = undefined
                 }
                 
-                currentChar.data = updateInlayScreen(currentChar.data)
+                DBState.db.characters[$selectedCharID] = updateInlayScreen((DBState.db.characters[$selectedCharID] as character))
             }
         }}/>
     {/if}
-    {#if currentChar.data.viewScreen === 'imggen'}
+    {#if DBState.db.characters[$selectedCharID].viewScreen === 'imggen'}
         <span class="text-textcolor mt-6">{language.imageGeneration} <Help key="imggen"/></span>
         <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
         
         <span class="text-textcolor mt-2">{language.imgGenPrompt}</span>
-        <TextAreaInput highlight bind:value={currentChar.data.newGenData.prompt} />
+        <TextAreaInput highlight bind:value={(DBState.db.characters[$selectedCharID] as character).newGenData.prompt} />
         <span class="text-textcolor mt-2">{language.imgGenNegatives}</span>
-        <TextAreaInput highlight bind:value={currentChar.data.newGenData.negative} />
+        <TextAreaInput highlight bind:value={(DBState.db.characters[$selectedCharID] as character).newGenData.negative} />
         <span class="text-textcolor mt-2">{language.imgGenInstructions}</span>
-        <TextAreaInput highlight bind:value={currentChar.data.newGenData.instructions} />
+        <TextAreaInput highlight bind:value={(DBState.db.characters[$selectedCharID] as character).newGenData.instructions} />
 
-        <CheckInput bind:check={currentChar.data.inlayViewScreen} name={language.inlayViewScreen} onChange={() => {
-            if(currentChar.type === 'character'){
-                currentChar.data = updateInlayScreen(currentChar.data)
+        <CheckInput bind:check={(DBState.db.characters[$selectedCharID] as character).inlayViewScreen} name={language.inlayViewScreen} onChange={() => {
+            if((DBState.db.characters[$selectedCharID] as character).type === 'character'){
+                (DBState.db.characters[$selectedCharID] as character) = updateInlayScreen((DBState.db.characters[$selectedCharID] as character))
             }
         }}/>
     {/if}
@@ -623,7 +563,7 @@
     {/if}
     <LoreBook />
 {:else if $CharConfigSubMenu === 4}
-    {#if currentChar.type === 'character'}
+    {#if DBState.db.characters[$selectedCharID].type === 'character'}
         {#if !$MobileGUI}
             <h2 class="mb-2 text-2xl font-bold mt-2">{language.scripts}</h2>
         {/if}
@@ -637,34 +577,30 @@
                 <th class="font-medium w-1/3">{language.value}</th>
                 <th>
                     <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
-                        if(currentChar.type === 'character'){
-                            let bia = currentChar.data.bias
-                            bia.push(['', 0])
-                            currentChar.data.bias = bia
+                        if(DBState.db.characters[$selectedCharID].type === 'character'){
+                            (DBState.db.characters[$selectedCharID] as character).bias.push(['', 0])
                         }
                     }}><PlusIcon /></button>
                 </th>
             </tr>
-            {#if currentChar.data.bias.length === 0}
+            {#if (DBState.db.characters[$selectedCharID] as character).bias.length === 0}
                 <tr>
                     <td colspan="3">{language.noBias}</td>
 
                 </tr>
             {/if}
-            {#each currentChar.data.bias as bias, i}
+            {#each (DBState.db.characters[$selectedCharID] as character).bias as bias, i}
                 <tr class="align-middle text-center">
                     <td class="font-medium truncate w-1/2">
-                        <TextInput fullh fullwidth bind:value={currentChar.data.bias[i][0]} placeholder="string" />
+                        <TextInput fullh fullwidth bind:value={(DBState.db.characters[$selectedCharID] as character).bias[i][0]} placeholder="string" />
                     </td> 
                     <td class="font-medium truncate w-1/3">
-                        <NumberInput fullh fullwidth bind:value={currentChar.data.bias[i][1]} max={100} min={-100} />
+                        <NumberInput fullh fullwidth bind:value={(DBState.db.characters[$selectedCharID] as character).bias[i][1]} max={100} min={-100} />
                     </td>
                     <td>
                         <button class="font-medium flex justify-center items-center w-full h-full cursor-pointer hover:text-green-500" onclick={() => {
-                            if(currentChar.type === 'character'){
-                                let bia = currentChar.data.bias
-                                bia.splice(i, 1)
-                                currentChar.data.bias = bia
+                            if(DBState.db.characters[$selectedCharID].type === 'character'){
+                                (DBState.db.characters[$selectedCharID] as character).bias.splice(i, 1)
                             }
                         }}><TrashIcon /></button>
                     </td>
@@ -677,46 +613,46 @@
         </div>
 
         <span class="text-textcolor mt-4">{language.regexScript} <Help key="regexScript"/></span>
-        <RegexList bind:value={currentChar.data.customscript} />
+        <RegexList bind:value={DBState.db.characters[$selectedCharID].customscript} />
         <div class="text-textcolor2 mt-2 flex gap-2">
             <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
-                if(currentChar.type === 'character'){
-                    let script = currentChar.data.customscript
+                if(DBState.db.characters[$selectedCharID].type === 'character'){
+                    let script = DBState.db.characters[$selectedCharID].customscript
                     script.push({
                     comment: "",
                     in: "",
                     out: "",
                     type: "editinput"
                     })
-                    currentChar.data.customscript = script
+                    DBState.db.characters[$selectedCharID].customscript = script
                 }
             }}><PlusIcon /></button>
             <button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
-                exportRegex(currentChar.data.customscript)
+                exportRegex(DBState.db.characters[$selectedCharID].customscript)
             }}><DownloadIcon /></button>
             <button class="font-medium cursor-pointer hover:text-green-500" onclick={async () => {
-                currentChar.data.customscript = await importRegex(currentChar.data.customscript)
+                DBState.db.characters[$selectedCharID].customscript = await importRegex(DBState.db.characters[$selectedCharID].customscript)
             }}><FolderUpIcon /></button>
         </div>
 
         <span class="text-textcolor mt-4">{language.triggerScript} <Help key="triggerScript"/></span>
-        <TriggerList bind:value={currentChar.data.triggerscript} lowLevelAble={currentChar.data.lowLevelAccess} />
+        <TriggerList bind:value={(DBState.db.characters[$selectedCharID] as character).triggerscript} lowLevelAble={DBState.db.characters[$selectedCharID].lowLevelAccess} />
 
 
-        {#if currentChar.data.virtualscript || $DataBase.showUnrecommended}
+        {#if DBState.db.characters[$selectedCharID].virtualscript || DBState.db.showUnrecommended}
             <span class="text-textcolor mt-4">{language.charjs} <Help key="charjs" unrecommended/></span>
-            <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.virtualscript}></TextAreaInput>
+            <TextAreaInput margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].virtualscript}></TextAreaInput>
         {/if}
     {/if}
 {:else if $CharConfigSubMenu === 5}
-    {#if currentChar.type === 'character'}
+    {#if DBState.db.characters[$selectedCharID].type === 'character'}
         {#if !$MobileGUI}
             <h2 class="mb-2 text-2xl font-bold mt-2">TTS</h2>
         {/if}
         <span class="text-textcolor">{language.provider}</span>
-        <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsMode} onchange={(e) => {
-            if(currentChar.type === 'character'){
-                currentChar.data.ttsSpeech = ''
+        <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].ttsMode} onchange={(e) => {
+            if(DBState.db.characters[$selectedCharID].type === 'character'){
+                (DBState.db.characters[$selectedCharID] as character).ttsSpeech = ''
             }
         }}>
             <OptionInput value="">{language.disabled}</OptionInput>
@@ -732,72 +668,72 @@
         </SelectInput>
         
 
-        {#if currentChar.data.ttsMode === 'webspeech'}
+        {#if DBState.db.characters[$selectedCharID].ttsMode === 'webspeech'}
             {#if !speechSynthesis}
                 <span class="text-textcolor">Web Speech isn't supported in your browser or OS</span>
             {:else}
                 <span class="text-textcolor">{language.Speech}</span>
-                <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
+                <SelectInput className="mb-4 mt-2" bind:value={(DBState.db.characters[$selectedCharID] as character).ttsSpeech}>
                     <OptionInput value="">Auto</OptionInput>
                     {#each getWebSpeechTTSVoices() as voice}
                         <OptionInput value={voice}>{voice}</OptionInput>
                     {/each}
                 </SelectInput>
-                {#if currentChar.data.ttsSpeech !== ''}
+                {#if (DBState.db.characters[$selectedCharID] as character).ttsSpeech !== ''}
                     <span class="text-red-400 text-sm">If you do not set it to Auto, it may not work properly when importing from another OS or browser.</span>
                 {/if}
             {/if}
-        {:else if currentChar.data.ttsMode === 'elevenlab'}
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'elevenlab'}
             <span class="text-sm mb-2 text-textcolor2">Please set the ElevenLabs API key in "global Settings → Bot Settings → Others → ElevenLabs API key"</span>
             {#await getElevenTTSVoices() then voices}
                 <span class="text-textcolor">{language.Speech}</span>
-                <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
+                <SelectInput className="mb-4 mt-2" bind:value={(DBState.db.characters[$selectedCharID] as character).ttsSpeech}>
                     <OptionInput value="">Unset</OptionInput>
                         {#each voices as voice}
                             <OptionInput value={voice.voice_id}>{voice.name}</OptionInput>
                         {/each}
                 </SelectInput>
             {/await}
-         {:else if currentChar.data.ttsMode === 'VOICEVOX'}
+         {:else if DBState.db.characters[$selectedCharID].ttsMode === 'VOICEVOX'}
                 <span class="text-textcolor">Speaker</span>
-                <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.voicevoxConfig.speaker}>
+                <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].voicevoxConfig.speaker}>
                     {#await getVOICEVOXVoices() then voices}
                         {#each voices as voice}
-                            <OptionInput value={voice.list}  selected={currentChar.data.voicevoxConfig.speaker === voice.list}>{voice.name}</OptionInput>
+                            <OptionInput value={voice.list}  selected={DBState.db.characters[$selectedCharID].voicevoxConfig.speaker === voice.list}>{voice.name}</OptionInput>
                         {/each}
                     {/await}
                 </SelectInput>
-                {#if currentChar.data.voicevoxConfig.speaker}
+                {#if DBState.db.characters[$selectedCharID].voicevoxConfig.speaker}
                 <span class="text=neutral-200">Style</span>
-                <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.ttsSpeech}>
-                {#each JSON.parse(currentChar.data.voicevoxConfig.speaker) as styles}
-                        <OptionInput value={styles.id} selected={currentChar.data.ttsSpeech === styles.id}>{styles.name}</OptionInput>
+                <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].ttsSpeech}>
+                {#each JSON.parse(DBState.db.characters[$selectedCharID].voicevoxConfig.speaker) as styles}
+                        <OptionInput value={styles.id} selected={DBState.db.characters[$selectedCharID].ttsSpeech === styles.id}>{styles.name}</OptionInput>
                 {/each}
                 </SelectInput>
                 {/if}
                 <span class="text-textcolor">Speed scale</span>
-                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.SPEED_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={DBState.db.characters[$selectedCharID].voicevoxConfig.SPEED_SCALE}/>
 
                 <span class="text-textcolor">Pitch scale</span>
-                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.PITCH_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={DBState.db.characters[$selectedCharID].voicevoxConfig.PITCH_SCALE}/>
 
                 <span class="text-textcolor">Volume scale</span>
-                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.VOLUME_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={DBState.db.characters[$selectedCharID].voicevoxConfig.VOLUME_SCALE}/>
 
                 <span class="text-textcolor">Intonation scale</span>
-                <NumberInput size={"sm"} marginBottom bind:value={currentChar.data.voicevoxConfig.INTONATION_SCALE}/>
+                <NumberInput size={"sm"} marginBottom bind:value={DBState.db.characters[$selectedCharID].voicevoxConfig.INTONATION_SCALE}/>
                 <span class="text-sm mb-2 text-textcolor2">To use VOICEVOX, you need to run a colab and put the localtunnel URL in "Settings → Other Bots". https://colab.research.google.com/drive/1tyeXJSklNfjW-aZJAib1JfgOMFarAwze</span>
-        {:else if currentChar.data.ttsMode === 'novelai'}
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'novelai'}
             <span class="text-textcolor">Custom Voice Seed</span>
-            <Check bind:check={currentChar.data.naittsConfig.customvoice}/>
-            {#if !currentChar.data.naittsConfig.customvoice}
+            <Check bind:check={DBState.db.characters[$selectedCharID].naittsConfig.customvoice}/>
+            {#if !DBState.db.characters[$selectedCharID].naittsConfig.customvoice}
                 <span class="text-textcolor">Voice</span>
-                <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.naittsConfig.voice}>
+                <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].naittsConfig.voice}>
                     {#await getNovelAIVoices() then voices}
                         {#each voices as voiceGroup}
                             <optgroup label={voiceGroup.gender} class="bg-darkbg appearance-none">
                                 {#each voiceGroup.voices as voice}
-                                    <OptionInput value={voice} selected={currentChar.data.naittsConfig.voice === voice}>{voice}</OptionInput>
+                                    <OptionInput value={voice} selected={DBState.db.characters[$selectedCharID].naittsConfig.voice === voice}>{voice}</OptionInput>
                                 {/each}
                             </optgroup>
                         {/each}
@@ -805,54 +741,54 @@
                 </SelectInput>
             {:else}
                 <span class="text-textcolor">Voice</span>
-                <TextInput size={"sm"} bind:value={currentChar.data.naittsConfig.voice}/>
+                <TextInput size={"sm"} bind:value={DBState.db.characters[$selectedCharID].naittsConfig.voice}/>
             {/if}
             <span class="text-textcolor">Version</span>
-            <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.naittsConfig.version}>
+            <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].naittsConfig.version}>
                 <OptionInput value="v1">v1</OptionInput>
                 <OptionInput value="v2">v2</OptionInput>
             </SelectInput>
-        {:else if currentChar.data.ttsMode === 'openai'}
-            <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.oaiVoice}>
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'openai'}
+            <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].oaiVoice}>
                 <OptionInput value="">Unset</OptionInput>
                 {#each oaiVoices as voice}
                     <OptionInput value={voice}>{voice}</OptionInput>
                 {/each}
             </SelectInput>
-        {:else if currentChar.data.ttsMode === 'huggingface'}
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'huggingface'}
             <span class="text-textcolor">Model</span>
-            <TextInput className="mb-4 mt-2" bind:value={currentChar.data.hfTTS.model} />
+            <TextInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].hfTTS.model} />
 
             <span class="text-textcolor">Language</span>
-            <TextInput className="mb-4 mt-2" bind:value={currentChar.data.hfTTS.language} placeholder="en" />
-        {:else if currentChar.data.ttsMode === 'vits'}
-            {#if currentChar.data.vits}
-                <span class="text-textcolor">{currentChar.data.vits.name ?? 'Unnamed VitsModel'}</span>
+            <TextInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].hfTTS.language} placeholder="en" />
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'vits'}
+            {#if DBState.db.characters[$selectedCharID].vits}
+                <span class="text-textcolor">{DBState.db.characters[$selectedCharID].vits.name ?? 'Unnamed VitsModel'}</span>
             {:else}
                 <span class="text-textcolor">No Model</span>
             {/if}
             <Button onclick={async () => {
                 const model = await registerOnnxModel()
-                if(model && currentChar.type === 'character'){
-                    currentChar.data.vits = model
+                if(model && DBState.db.characters[$selectedCharID].type === 'character'){
+                    DBState.db.characters[$selectedCharID].vits = model
                 }
             }}>{language.selectModel}</Button>
-        {:else if currentChar.data.ttsMode === 'gptsovits'}
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'gptsovits'}
             <span class="text-textcolor">Volume</span>
-            <SliderInput min={0.0} max={1.0} step={0.01} fixed={2} bind:value={currentChar.data.gptSoVitsConfig.volume}/>
+            <SliderInput min={0.0} max={1.0} step={0.01} fixed={2} bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.volume}/>
             <span class="text-textcolor">URL</span>
-            <TextInput className="mb-4 mt-2" bind:value={currentChar.data.gptSoVitsConfig.url}/>
+            <TextInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.url}/>
 
             <span class="text-textcolor">Use Auto Path</span>
-            <Check bind:check={currentChar.data.gptSoVitsConfig.use_auto_path}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_auto_path}/>
 
-            {#if !currentChar.data.gptSoVitsConfig.use_auto_path}
+            {#if !DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_auto_path}
                 <span class="text-textcolor">Reference Audio Path (e.g. C:/Users/user/Downloads/GPT-SoVITS-v2-240821)</span>
-                <TextInput className="mb-4 mt-2" bind:value={currentChar.data.gptSoVitsConfig.ref_audio_path}/>
+                <TextInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.ref_audio_path}/>
             {/if}
 
             <span class="text-textcolor">Use Long Audio</span>
-            <Check bind:check={currentChar.data.gptSoVitsConfig.use_long_audio}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_long_audio}/>
 
             <span class="text-textcolor">Reference Audio Data (3~10s audio file)</span>
             <Button onclick={async () => {
@@ -866,8 +802,7 @@
                     return null
                 }
                 const saveId = await saveAsset(audio.data)
-                // @ts-expect-error not groupChat
-                currentChar.data.gptSoVitsConfig.ref_audio_data = {
+                DBState.db.characters[$selectedCharID].gptSoVitsConfig.ref_audio_data = {
                     fileName: audio.name,
                     assetId: saveId
                 }
@@ -875,14 +810,14 @@
             }}
             className="h-10">
                 
-                {#if currentChar.data.gptSoVitsConfig.ref_audio_data.assetId === '' || currentChar.data.gptSoVitsConfig.ref_audio_data.assetId === undefined}
+                {#if DBState.db.characters[$selectedCharID].gptSoVitsConfig.ref_audio_data.assetId === '' || DBState.db.characters[$selectedCharID].gptSoVitsConfig.ref_audio_data.assetId === undefined}
                     {language.selectFile}
                 {:else}
-                    {currentChar.data.gptSoVitsConfig.ref_audio_data.fileName}
+                    {DBState.db.characters[$selectedCharID].gptSoVitsConfig.ref_audio_data.fileName}
                 {/if}
             </Button>
             <span class="text-textcolor">Text Language</span>
-            <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.gptSoVitsConfig.text_lang}>
+            <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.text_lang}>
                 <OptionInput value="auto">Multi-language Mixed</OptionInput>
                 <OptionInput value="auto_yue">Multi-language Mixed (Cantonese)</OptionInput>
                 <OptionInput value="en">English</OptionInput>
@@ -896,18 +831,18 @@
                 <OptionInput value="all_ko">Korean</OptionInput>
             </SelectInput>
 
-            {#if !currentChar.data.gptSoVitsConfig.use_long_audio}
+            {#if !DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_long_audio}
                 <span class="text-textcolor">Use Reference Audio Script</span>
-                <Check bind:check={currentChar.data.gptSoVitsConfig.use_prompt}/>
+                <Check bind:check={DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_prompt}/>
             {/if}
 
-            {#if currentChar.data.gptSoVitsConfig.use_prompt && !currentChar.data.gptSoVitsConfig.use_long_audio}
+            {#if DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_prompt && !DBState.db.characters[$selectedCharID].gptSoVitsConfig.use_long_audio}
                 <span class="text-textcolor">Reference Audio Script</span>
-                <TextAreaInput className="mb-4 mt-2" bind:value={currentChar.data.gptSoVitsConfig.prompt}/>
+                <TextAreaInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.prompt}/>
             {/if}
 
             <span class="text-textcolor">Reference Audio Language</span>
-            <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.gptSoVitsConfig.prompt_lang}>
+            <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.prompt_lang}>
                 <OptionInput value="auto">Multi-language Mixed</OptionInput>
                 <OptionInput value="auto_yue">Multi-language Mixed (Cantonese)</OptionInput>
                 <OptionInput value="en">English</OptionInput>
@@ -921,19 +856,19 @@
                 <OptionInput value="all_ko">Korean</OptionInput>
             </SelectInput>
             <span class="text-textcolor">Top P</span>
-            <SliderInput min={0.0} max={1.0} step={0.05} fixed={2} bind:value={currentChar.data.gptSoVitsConfig.top_p}/>
+            <SliderInput min={0.0} max={1.0} step={0.05} fixed={2} bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.top_p}/>
 
             <span class="text-textcolor">Temperature</span>
-            <SliderInput min={0.0} max={1.0} step={0.05} fixed={2} bind:value={currentChar.data.gptSoVitsConfig.temperature}/>
+            <SliderInput min={0.0} max={1.0} step={0.05} fixed={2} bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.temperature}/>
 
             <span class="text-textcolor">Speed</span>
-            <SliderInput min={0.6} max={1.65} step={0.05} fixed={2} bind:value={currentChar.data.gptSoVitsConfig.speed}/>
+            <SliderInput min={0.6} max={1.65} step={0.05} fixed={2} bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.speed}/>
 
             <span class="text-textcolor">Top K</span>
-            <SliderInput min={1} max={100} step={1} bind:value={currentChar.data.gptSoVitsConfig.top_k}/>
+            <SliderInput min={1} max={100} step={1} bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.top_k}/>
 
             <span class="text-textcolor">Text Split Method</span>
-            <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.gptSoVitsConfig.text_split_method}>
+            <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].gptSoVitsConfig.text_split_method}>
                 <OptionInput value="cut0">Cut 0 (No splitting)</OptionInput>
                 <OptionInput value="cut1">Cut 1 (Split every 4 sentences)</OptionInput>
                 <OptionInput value="cut2">Cut 2 (Split every 50 characters)</OptionInput>
@@ -941,12 +876,12 @@
                 <OptionInput value="cut4">Cut 4 (Split by English periods)</OptionInput>
                 <OptionInput value="cut5">Cut 5 (Split by various punctuation marks)</OptionInput>
             </SelectInput>        
-        {:else if currentChar.data.ttsMode === 'fishspeech'}
+        {:else if DBState.db.characters[$selectedCharID].ttsMode === 'fishspeech'}
             {#await getFishSpeechModels()}
                 <span class="text-textcolor">Loading...</span>
             {:then}
                 <span class="text-textcolor">Model</span>
-                <SelectInput className="mb-4 mt-2" bind:value={currentChar.data.fishSpeechConfig.model._id}>
+                <SelectInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].fishSpeechConfig.model._id}>
                     <OptionInput value="">Not selected</OptionInput>
                     {#each fishSpeechModels as model}
                         <OptionInput value={model._id}>
@@ -962,14 +897,14 @@
             {/await}
 
             <span class="text-textcolor">Chunk Length</span>
-            <NumberInput className="mb-4 mt-2" bind:value={currentChar.data.fishSpeechConfig.chunk_length}/>
+            <NumberInput className="mb-4 mt-2" bind:value={DBState.db.characters[$selectedCharID].fishSpeechConfig.chunk_length}/>
 
             <span class="mt-2 text-textcolor">Normalize</span>
-            <Check className="mb-4 mt-2" bind:check={currentChar.data.fishSpeechConfig.normalize}/>
+            <Check className="mb-4 mt-2" bind:check={DBState.db.characters[$selectedCharID].fishSpeechConfig.normalize}/>
         {/if}
-        {#if currentChar.data.ttsMode}
+        {#if DBState.db.characters[$selectedCharID].ttsMode}
             <div class="flex items-center mt-2">
-                <Check bind:check={currentChar.data.ttsReadOnlyQuoted} name={language.ttsReadOnlyQuoted}/>
+                <Check bind:check={DBState.db.characters[$selectedCharID].ttsReadOnlyQuoted} name={language.ttsReadOnlyQuoted}/>
             </div>
         {/if}
     {/if}
@@ -977,55 +912,55 @@
     {#if !$MobileGUI}
         <h2 class="mb-2 text-2xl font-bold mt-2">{language.advancedSettings}</h2>
     {/if}
-    {#if currentChar.type !== 'group'}
+    {#if DBState.db.characters[$selectedCharID].type !== 'group'}
         <span class="text-textcolor">{language.exampleMessage} <Help key="exampleMessage"/></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.exampleMessage}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].exampleMessage}></TextAreaInput>
 
         <span class="text-textcolor">{language.creatorNotes} <Help key="creatorQuotes"/></span>
-        <MultiLangInput bind:value={currentChar.data.creatorNotes} className="my-2" onInput={() => {
-            currentChar.data.removedQuotes = false
+        <MultiLangInput bind:value={DBState.db.characters[$selectedCharID].creatorNotes} className="my-2" onInput={() => {
+            DBState.db.characters[$selectedCharID].removedQuotes = false
         }}></MultiLangInput>
 
         <span class="text-textcolor">{language.systemPrompt} <Help key="systemPrompt"/></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.systemPrompt}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].systemPrompt}></TextAreaInput>
 
         <span class="text-textcolor">{language.replaceGlobalNote} <Help key="replaceGlobalNote"/></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.replaceGlobalNote}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].replaceGlobalNote}></TextAreaInput>
 
         <span class="text-textcolor mt-2">{language.additionalText} <Help key="additionalText" /></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.additionalText}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].additionalText}></TextAreaInput>
 
-        {#if $DataBase.showUnrecommended || currentChar.data.personality.length > 3}
+        {#if DBState.db.showUnrecommended || DBState.db.characters[$selectedCharID].personality.length > 3}
             <span class="text-textcolor">{language.personality} <Help key="personality" unrecommended/></span>
-            <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.personality}></TextAreaInput>
+            <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].personality}></TextAreaInput>
         {/if}
-        {#if $DataBase.showUnrecommended || currentChar.data.scenario.length > 3}
+        {#if DBState.db.showUnrecommended || DBState.db.characters[$selectedCharID].scenario.length > 3}
             <span class="text-textcolor">{language.scenario} <Help key="scenario" unrecommended/></span>
-            <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.scenario}></TextAreaInput>
+            <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].scenario}></TextAreaInput>
         {/if}
 
         <span class="text-textcolor mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
-        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></TextAreaInput>
+        <TextAreaInput highlight margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].backgroundHTML}></TextAreaInput>
 
         <span class="text-textcolor mt-2">{language.defaultVariables} <Help key="defaultVariables" /></span>
-        <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.defaultVariables}></TextAreaInput>
+        <TextAreaInput margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].defaultVariables}></TextAreaInput>
 
         <span class="text-textcolor mt-2">{language.translatorNote} <Help key="translatorNote" /></span>
-        <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.translatorNote}></TextAreaInput>
+        <TextAreaInput margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].translatorNote}></TextAreaInput>
 
         <span class="text-textcolor">{language.creator}</span>
-        <TextInput size="sm" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />
+        <TextInput size="sm" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].additionalData.creator} />
 
         <span class="text-textcolor">{language.CharVersion}</span>
-        <TextInput size="sm" bind:value={currentChar.data.additionalData.character_version}/>
+        <TextInput size="sm" bind:value={DBState.db.characters[$selectedCharID].additionalData.character_version}/>
 
         <span class="text-textcolor">{language.nickname} <Help key="nickname" /></span>
-        <TextInput size="sm" bind:value={currentChar.data.nickname}/>
+        <TextInput size="sm" bind:value={DBState.db.characters[$selectedCharID].nickname}/>
 
         <span class="text-textcolor">{language.depthPrompt}</span>
         <div class="flex justify-center items-center">
-            <NumberInput size="sm" bind:value={currentChar.data.depth_prompt.depth} className="w-12"/>
-            <TextInput size="sm" bind:value={currentChar.data.depth_prompt.prompt} className="flex-1"/>
+            <NumberInput size="sm" bind:value={DBState.db.characters[$selectedCharID].depth_prompt.depth} className="w-12"/>
+            <TextInput size="sm" bind:value={DBState.db.characters[$selectedCharID].depth_prompt.prompt} className="flex-1"/>
         </div>
 
         <span class="text-textcolor mt-2">{language.altGreet}</span>
@@ -1036,33 +971,33 @@
                     <th class="font-medium">{language.value}</th>
                     <th class="font-medium cursor-pointer w-10">
                         <button class="hover:text-green-500" onclick={() => {
-                            if(currentChar.type === 'character'){
-                                let alternateGreetings = currentChar.data.alternateGreetings
+                            if(DBState.db.characters[$selectedCharID].type === 'character'){
+                                let alternateGreetings = DBState.db.characters[$selectedCharID].alternateGreetings
                                 alternateGreetings.push('')
-                                currentChar.data.alternateGreetings = alternateGreetings
+                                DBState.db.characters[$selectedCharID].alternateGreetings = alternateGreetings
                             }
                         }}>
                             <PlusIcon />
                         </button>
                     </th>
                 </tr>
-                {#if currentChar.data.alternateGreetings.length === 0}
+                {#if DBState.db.characters[$selectedCharID].alternateGreetings.length === 0}
                     <tr>
                         <td colspan="3">{language.noData}</td>
                     </tr>
                 {/if}
-                {#each currentChar.data.alternateGreetings as bias, i}
+                {#each DBState.db.characters[$selectedCharID].alternateGreetings as bias, i}
                     <tr>
                         <td class="font-medium truncate">
-                            <TextAreaInput highlight bind:value={currentChar.data.alternateGreetings[i]} placeholder="..." fullwidth />
+                            <TextAreaInput highlight bind:value={DBState.db.characters[$selectedCharID].alternateGreetings[i]} placeholder="..." fullwidth />
                         </td>
                         <th class="font-medium cursor-pointer w-10">
                             <button class="hover:text-green-500" onclick={() => {
-                                if(currentChar.type === 'character'){
-                                    $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].fmIndex = -1
-                                    let alternateGreetings = currentChar.data.alternateGreetings
+                                if(DBState.db.characters[$selectedCharID].type === 'character'){
+                                    DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].fmIndex = -1
+                                    let alternateGreetings = DBState.db.characters[$selectedCharID].alternateGreetings
                                     alternateGreetings.splice(i, 1)
-                                    currentChar.data.alternateGreetings = alternateGreetings
+                                    DBState.db.characters[$selectedCharID].alternateGreetings = alternateGreetings
                                 }
                             }}>
                                 <TrashIcon />
@@ -1082,9 +1017,9 @@
                         <th class="font-medium">{language.value}</th>
                         <th class="font-medium cursor-pointer w-10">
                             <button class="hover:text-green-500" onclick={async () => {
-                                if(currentChar.type === 'character'){
+                                if(DBState.db.characters[$selectedCharID].type === 'character'){
                                     const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif', 'jpeg', 'jpg', 'ttf', 'otf', 'css', 'webm', 'woff', 'woff2', 'svg', 'avif'])
-                                    currentChar.data.additionalAssets = currentChar.data.additionalAssets ?? []
+                                    DBState.db.characters[$selectedCharID].additionalAssets = DBState.db.characters[$selectedCharID].additionalAssets ?? []
                                     if(!da){
                                         return
                                     }
@@ -1093,8 +1028,8 @@
                                         const name = f.name
                                         const extension = name.split('.').pop().toLowerCase()
                                         const imgp = await saveAsset(img,'', extension)
-                                        currentChar.data.additionalAssets.push([name, imgp, extension])
-                                        currentChar.data.additionalAssets = currentChar.data.additionalAssets
+                                        DBState.db.characters[$selectedCharID].additionalAssets.push([name, imgp, extension])
+                                        DBState.db.characters[$selectedCharID].additionalAssets = DBState.db.characters[$selectedCharID].additionalAssets
                                     }
                                 }
                             }}>
@@ -1102,15 +1037,15 @@
                             </button>
                         </th>
                     </tr>
-                    {#if (!currentChar.data.additionalAssets) || currentChar.data.additionalAssets.length === 0}
+                    {#if (!DBState.db.characters[$selectedCharID].additionalAssets) || DBState.db.characters[$selectedCharID].additionalAssets.length === 0}
                         <tr>
                             <td class="text-textcolor2"> No Assets</td>
                         </tr>
                     {:else}
-                        {#each currentChar.data.additionalAssets as assets, i}
+                        {#each DBState.db.characters[$selectedCharID].additionalAssets as assets, i}
                             <tr>
                                 <td class="font-medium truncate">
-                                    {#if assetFilePath[i] && database.useAdditionalAssetsPreview}
+                                    {#if assetFilePath[i] && DBState.db.useAdditionalAssetsPreview}
                                         {#if assetFileExtensions[i] === 'mp4'}
                                         <!-- svelte-ignore a11y_media_has_caption -->
                                             <video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
@@ -1120,16 +1055,16 @@
                                             <img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={assets[0]}/>
                                         {/if}
                                     {/if}
-                                    <TextInput size="sm" marginBottom bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
+                                    <TextInput size="sm" marginBottom bind:value={DBState.db.characters[$selectedCharID].additionalAssets[i][0]} placeholder="..." />
                                 </td>
                                 
                                 <th class="font-medium cursor-pointer w-10">
                                     <button class="hover:text-green-500" onclick={() => {
-                                        if(currentChar.type === 'character'){
-                                            $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].fmIndex = -1
-                                            let additionalAssets = currentChar.data.additionalAssets
+                                        if(DBState.db.characters[$selectedCharID].type === 'character'){
+                                            DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].fmIndex = -1
+                                            let additionalAssets = DBState.db.characters[$selectedCharID].additionalAssets
                                             additionalAssets.splice(i, 1)
-                                            currentChar.data.additionalAssets = additionalAssets
+                                            DBState.db.characters[$selectedCharID].additionalAssets = additionalAssets
                                         }
                                     }}>
                                         <TrashIcon />
@@ -1144,23 +1079,23 @@
         </Arcodion>
 
         <div class="flex items-center mt-4">
-            <Check bind:check={currentChar.data.lowLevelAccess} name={language.lowLevelAccess}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].lowLevelAccess} name={language.lowLevelAccess}/>
             <span> <Help key="lowLevelAccess" name={language.lowLevelAccess}/></span>
         </div>
 
         <div class="flex items-center mt-4">
-            <Check bind:check={currentChar.data.hideChatIcon} name={language.hideChatIcon}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].hideChatIcon} name={language.hideChatIcon}/>
         </div>
 
         <div class="flex items-center mt-4">
-            <Check bind:check={currentChar.data.utilityBot} name={language.utilityBot}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].utilityBot} name={language.utilityBot}/>
             <span> <Help key="utilityBot" name={language.utilityBot}/></span>
         </div>
 
-        {#if $DataBase.supaModelType !== 'none' && $DataBase.hypav2}
+        {#if DBState.db.supaModelType !== 'none' && DBState.db.hypav2}
             <Button
                 onclick={() => {
-                    currentChar.data.chats[currentChar.data.chatPage].hypaV2Data ??= {
+                    DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV2Data ??= {
                         chunks: [],
                         mainChunks: []
                     }
@@ -1170,9 +1105,9 @@
             >
                 {language.HypaMemory} V2 Data
             </Button>
-        {:else if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4 || currentChar.data.supaMemory}
+        {:else if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData && DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData.length > 4 || DBState.db.characters[$selectedCharID].supaMemory}
             <span class="text-textcolor mt-4">{language.SuperMemory}</span>
-            <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
+            <TextAreaInput margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData}></TextAreaInput>
         {/if}
 
         <Button
@@ -1182,26 +1117,26 @@
             {language.applyModule}
         </Button>
 
-        {#if currentChar.data.license !== 'CC BY-NC-SA 4.0'
-            && currentChar.data.license !== 'CC BY-SA 4.0'
-            && currentChar.data.license !== 'CC BY-ND 4.0'
-            && currentChar.data.license !== 'CC BY-NC-ND 4.0'
-            || $DataBase.tpo
+        {#if DBState.db.characters[$selectedCharID].license !== 'CC BY-NC-SA 4.0'
+            && DBState.db.characters[$selectedCharID].license !== 'CC BY-SA 4.0'
+            && DBState.db.characters[$selectedCharID].license !== 'CC BY-ND 4.0'
+            && DBState.db.characters[$selectedCharID].license !== 'CC BY-NC-ND 4.0'
+            || DBState.db.tpo
         }
             <Button size="lg" onclick={async () => {
                 const res = await exportChar($selectedCharID)
             }} className="mt-2">{language.exportCharacter}</Button>
         {/if}
 
-        {#if currentChar.data.license !== 'CC BY-NC-SA 4.0'
-            && currentChar.data.license !== 'CC BY-SA 4.0'
+        {#if DBState.db.characters[$selectedCharID].license !== 'CC BY-NC-SA 4.0'
+            && DBState.db.characters[$selectedCharID].license !== 'CC BY-SA 4.0'
         }
             <Button size="lg" onclick={async () => {
                 if(await alertTOS()){
                     $ShowRealmFrameStore = 'character'
                 }
             }} className="mt-2">
-                {#if currentChar.data.realmId}
+                {#if DBState.db.characters[$selectedCharID].realmId}
                     {language.updateRealm}
                 {:else}
                     {language.shareCloud}
@@ -1209,19 +1144,19 @@
             </Button>
         {/if}
     {:else}
-        {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4 || currentChar.data.supaMemory}
+        {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData && DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData.length > 4 || DBState.db.characters[$selectedCharID].supaMemory}
             <span class="text-textcolor mt-4">{language.SuperMemory}</span>
-            <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].supaMemoryData}></TextAreaInput>
+            <TextAreaInput margin="both" autocomplete="off" bind:value={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].supaMemoryData}></TextAreaInput>
         {/if}
 
         <div class="flex items-center mt-4">
-            <Check bind:check={currentChar.data.lowLevelAccess} name={language.lowLevelAccess}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].lowLevelAccess} name={language.lowLevelAccess}/>
             <span> <Help key="lowLevelAccess" name={language.lowLevelAccess}/></span>
         </div>
     {/if}
     <Button onclick={async () => {
-        removeChar($selectedCharID, currentChar.data.name)
-    }} className="mt-2" size="sm">{ currentChar.type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
+        removeChar($selectedCharID, DBState.db.characters[$selectedCharID].name)
+    }} className="mt-2" size="sm">{ DBState.db.characters[$selectedCharID].type === 'group' ? language.removeGroup : language.removeCharacter}</Button>
 {/if}
 
 
diff --git a/src/lib/SideBars/DevTool.svelte b/src/lib/SideBars/DevTool.svelte
index 50394b65..2546b00b 100644
--- a/src/lib/SideBars/DevTool.svelte
+++ b/src/lib/SideBars/DevTool.svelte
@@ -8,11 +8,10 @@
     import Arcodion from "../UI/Arcodion.svelte";
     import { getCharToken, getChatToken } from "src/ts/tokenizer";
     import { tokenizePreset } from "src/ts/process/prompt";
-    import { DataBase, setDatabase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
     import { FolderUpIcon, PlusIcon, TrashIcon } from "lucide-svelte";
     import { selectSingleFile } from "src/ts/util";
-    import { file } from "jszip";
     import { doingChat, previewFormated, sendChat } from "src/ts/process";
     import SelectInput from "../UI/GUI/SelectInput.svelte";
     import { applyChatTemplate, chatTemplates } from "src/ts/process/templates/chatTemplate";
@@ -90,15 +89,15 @@
 
 <Arcodion styled name={"Variables"}>
     <div class="rounded-md border border-darkborderc grid grid-cols-2 gap-2 p-2">
-        {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate &&  Object.keys($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate).length > 0}
-            {#each Object.keys($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate) as key}
+        {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate &&  Object.keys(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate).length > 0}
+            {#each Object.keys(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate) as key}
                 <span>{key}</span>
-                {#if typeof $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate[key] === "object"}
+                {#if typeof DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate[key] === "object"}
                     <div class="p-2 text-center">Object</div>
-                {:else if typeof $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate[key] === "string"}
-                    <TextInput bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate[key] as string} />
-                {:else if typeof $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate[key] === "number"}
-                    <NumberInput bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].scriptstate[key] as number} />
+                {:else if typeof DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate[key] === "string"}
+                    <TextInput bind:value={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate[key] as string} />
+                {:else if typeof DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate[key] === "number"}
+                    <NumberInput bind:value={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].scriptstate[key] as number} />
                 {/if}
             {/each}
         {:else}
@@ -109,7 +108,7 @@
 
 <Arcodion styled name={"Tokens"}>
     <div class="rounded-md border border-darkborderc grid grid-cols-2 gap-2 p-2">
-        {#await getCharToken($DataBase.characters[$selectedCharID])}
+        {#await getCharToken(DBState.db.characters[$selectedCharID])}
             <span>Character Persistant</span>
             <div class="p-2 text-center">Loading...</div>
             <span>Character Dynamic</span>
@@ -120,15 +119,15 @@
             <span>Character Dynamic</span>
             <div class="p-2 text-center">{token.dynamic} Tokens</div>
         {/await}
-        {#await getChatToken($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage])}
+        {#await getChatToken(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage])}
             <span>Current Chat</span>
             <div class="p-2 text-center">Loading...</div>
         {:then token}
             <span>Current Chat</span>
             <div class="p-2 text-center">{token} Tokens</div>
         {/await}
-        {#if $DataBase.promptTemplate}
-            {#await tokenizePreset($DataBase.promptTemplate)}
+        {#if DBState.db.promptTemplate}
+            {#await tokenizePreset(DBState.db.promptTemplate)}
                 <span>Prompt Template</span>
                 <div class="p-2 text-center">Loading...</div>
             {:then token}
@@ -195,7 +194,7 @@
             return
         }
         for(let i=0;i<autopilot.length;i++){
-            const db = ($DataBase)
+            const db = (DBState.db)
             let currentChar = db.characters[$selectedCharID]
             let currentChat = currentChar.chats[currentChar.chatPage]
             currentChat.message.push({
diff --git a/src/lib/SideBars/LoreBook/LoreBookData.svelte b/src/lib/SideBars/LoreBook/LoreBookData.svelte
index 23e5718d..1b6e7e0e 100644
--- a/src/lib/SideBars/LoreBook/LoreBookData.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookData.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { XIcon } from "lucide-svelte";
     import { language } from "../../../lang";
-    import type { loreBook } from "../../../ts/storage/database";
+    import type { loreBook } from "../../../ts/storage/database.svelte";
     import { alertConfirm } from "../../../ts/alert";
     import Check from "../../UI/GUI/CheckInput.svelte";
     import Help from "../../Others/Help.svelte";
diff --git a/src/lib/SideBars/LoreBook/LoreBookList.svelte b/src/lib/SideBars/LoreBook/LoreBookList.svelte
index ee2359d7..a0e5bde4 100644
--- a/src/lib/SideBars/LoreBook/LoreBookList.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { DataBase, type loreBook } from "src/ts/storage/database";
+    import { DBState, type loreBook } from "src/ts/storage/database.svelte";
     import LoreBookData from "./LoreBookData.svelte";
     import { selectedCharID } from "src/ts/stores";
     import Sortable from 'sortablejs/modular/sortable.core.esm.js';
@@ -26,23 +26,23 @@
                 if(globalMode){
                     let newLore:loreBook[] = []
                     idx.forEach((i) => {
-                        newLore.push($DataBase.loreBook[$DataBase.loreBookPage].data[i])
+                        newLore.push(DBState.db.loreBook[DBState.db.loreBookPage].data[i])
                     })
-                    $DataBase.loreBook[$DataBase.loreBookPage].data = newLore
+                    DBState.db.loreBook[DBState.db.loreBookPage].data = newLore
                 }
                 else if(submenu === 1){
                     let newLore:loreBook[] = []
                     idx.forEach((i) => {
-                        newLore.push($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i])
+                        newLore.push(DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore[i])
                     })
-                    $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = newLore
+                    DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore = newLore
                 }
                 else{
                     let newLore:loreBook[] = []
                     idx.forEach((i) => {
-                        newLore.push($DataBase.characters[$selectedCharID].globalLore[i])
+                        newLore.push(DBState.db.characters[$selectedCharID].globalLore[i])
                     })
-                    $DataBase.characters[$selectedCharID].globalLore = newLore
+                    DBState.db.characters[$selectedCharID].globalLore = newLore
                 }
                 try {
                     stb.destroy()
@@ -86,38 +86,38 @@
 <div class="border-solid border-selected p-2 flex flex-col border-1 rounded-md" bind:this={ele}>
     {#key sorted}
         {#if globalMode}
-            {#if $DataBase.loreBook[$DataBase.loreBookPage].data.length === 0}
+            {#if DBState.db.loreBook[DBState.db.loreBookPage].data.length === 0}
                 <span class="text-textcolor2">No Lorebook</span>
             {:else}
-                {#each $DataBase.loreBook[$DataBase.loreBookPage].data as book, i}
-                    <LoreBookData bind:value={$DataBase.loreBook[$DataBase.loreBookPage].data[i]} idx={i} onRemove={() => {
-                        let lore = $DataBase.loreBook[$DataBase.loreBookPage].data
+                {#each DBState.db.loreBook[DBState.db.loreBookPage].data as book, i}
+                    <LoreBookData bind:value={DBState.db.loreBook[DBState.db.loreBookPage].data[i]} idx={i} onRemove={() => {
+                        let lore = DBState.db.loreBook[DBState.db.loreBookPage].data
                         lore.splice(i, 1)
-                        $DataBase.loreBook[$DataBase.loreBookPage].data = lore
+                        DBState.db.loreBook[DBState.db.loreBookPage].data = lore
                     }} onOpen={onOpen} onClose={onClose}/>
                 {/each}
             {/if}
         {:else if submenu === 0}
-            {#if $DataBase.characters[$selectedCharID].globalLore.length === 0}
+            {#if DBState.db.characters[$selectedCharID].globalLore.length === 0}
                 <span class="text-textcolor2">No Lorebook</span>
             {:else}
-                {#each $DataBase.characters[$selectedCharID].globalLore as book, i}
-                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
-                        let lore  = $DataBase.characters[$selectedCharID].globalLore
+                {#each DBState.db.characters[$selectedCharID].globalLore as book, i}
+                    <LoreBookData bind:value={DBState.db.characters[$selectedCharID].globalLore[i]} idx={i} onRemove={() => {
+                        let lore  = DBState.db.characters[$selectedCharID].globalLore
                         lore.splice(i, 1)
-                        $DataBase.characters[$selectedCharID].globalLore = lore
+                        DBState.db.characters[$selectedCharID].globalLore = lore
                     }} onOpen={onOpen} onClose={onClose} lorePlus={lorePlus}/>
                 {/each}
             {/if}
         {:else if submenu === 1}
-            {#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore.length === 0}
+            {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore.length === 0}
                 <span class="text-textcolor2">No Lorebook</span>
             {:else}
-                {#each $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore as book, i}
-                    <LoreBookData bind:value={$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore[i]} idx={i} onRemove={() => {
-                        let lore  = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore
+                {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore as book, i}
+                    <LoreBookData bind:value={DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore[i]} idx={i} onRemove={() => {
+                        let lore  = DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore
                         lore.splice(i, 1)
-                        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].localLore = lore
+                        DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].localLore = lore
                     }} onOpen={onOpen} onClose={onClose} lorePlus={lorePlus}/>
                 {/each}
             {/if}
diff --git a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
index 822e9f13..aa687067 100644
--- a/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
+++ b/src/lib/SideBars/LoreBook/LoreBookSetting.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { DataBase } from "../../../ts/storage/database";
+    import { DBState } from "../../../ts/storage/database.svelte";
     import { language } from "../../../lang";
     import { DownloadIcon, FolderUpIcon, ImportIcon, PlusIcon } from "lucide-svelte";
     import { addLorebook, exportLoreBook, importLoreBook } from "../../../ts/process/lorebook";
@@ -22,7 +22,7 @@
         <button onclick={() => {
             submenu = 0
         }} class="p-2 flex-1" class:bg-selected={submenu === 0}>
-            <span>{$DataBase.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
+            <span>{DBState.db.characters[$selectedCharID].type === 'group' ? language.group : language.character}</span>
         </button>
         <button onclick={() => {
             submenu = 1
@@ -38,34 +38,34 @@
 {/if}
 {#if submenu !== 2}
     {#if !globalMode}
-        <span class="text-textcolor2 mt-2 mb-6 text-sm">{submenu === 0 ? $DataBase.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
+        <span class="text-textcolor2 mt-2 mb-6 text-sm">{submenu === 0 ? DBState.db.characters[$selectedCharID].type === 'group' ? language.groupLoreInfo : language.globalLoreInfo : language.localLoreInfo}</span>
     {/if}
-    <LoreBookList globalMode={globalMode} submenu={submenu} lorePlus={(!globalMode) && $DataBase.characters[$selectedCharID]?.lorePlus} />
+    <LoreBookList globalMode={globalMode} submenu={submenu} lorePlus={(!globalMode) && DBState.db.characters[$selectedCharID]?.lorePlus} />
 {:else}
-    {#if $DataBase.characters[$selectedCharID].loreSettings}
+    {#if DBState.db.characters[$selectedCharID].loreSettings}
         <div class="flex items-center mt-4">
             <Check check={false} onChange={() => {
-                $DataBase.characters[$selectedCharID].loreSettings = undefined
+                DBState.db.characters[$selectedCharID].loreSettings = undefined
             }}
             name={language.useGlobalSettings}
             />
         </div>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].loreSettings.recursiveScanning} name={language.recursiveScanning}/>
         </div>
         <div class="flex items-center mt-4">
-            <Check bind:check={$DataBase.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/>
+            <Check bind:check={DBState.db.characters[$selectedCharID].loreSettings.fullWordMatching} name={language.fullWordMatching}/>
         </div>
         <span class="text-textcolor mt-4 mb-2">{language.loreBookDepth}</span>
-        <NumberInput size="sm" min={0} max={20} bind:value={$DataBase.characters[$selectedCharID].loreSettings.scanDepth} />
+        <NumberInput size="sm" min={0} max={20} bind:value={DBState.db.characters[$selectedCharID].loreSettings.scanDepth} />
         <span class="text-textcolor">{language.loreBookToken}</span>
-        <NumberInput size="sm" min={0} max={4096} bind:value={$DataBase.characters[$selectedCharID].loreSettings.tokenBudget} />
+        <NumberInput size="sm" min={0} max={4096} bind:value={DBState.db.characters[$selectedCharID].loreSettings.tokenBudget} />
     {:else}
         <div class="flex items-center mt-4">
             <Check check={true} onChange={() => {
-                $DataBase.characters[$selectedCharID].loreSettings = {
-                    tokenBudget: $DataBase.loreBookToken,
-                    scanDepth:$DataBase.loreBookDepth,
+                DBState.db.characters[$selectedCharID].loreSettings = {
+                    tokenBudget: DBState.db.loreBookToken,
+                    scanDepth:DBState.db.loreBookDepth,
                     recursiveScanning: false
                 }
             }}
@@ -74,8 +74,8 @@
         </div>
     {/if}
     <div class="flex items-center mt-4">
-        {#if $DataBase.useExperimental}
-            <Check bind:check={$DataBase.characters[$selectedCharID].lorePlus}
+        {#if DBState.db.useExperimental}
+            <Check bind:check={DBState.db.characters[$selectedCharID].lorePlus}
                 name={language.lorePlus}
             ><Help key="lorePlus"></Help><Help key="experimental"></Help></Check>
         {/if}
diff --git a/src/lib/SideBars/Scripts/RegexData.svelte b/src/lib/SideBars/Scripts/RegexData.svelte
index 54422282..ef82a37d 100644
--- a/src/lib/SideBars/Scripts/RegexData.svelte
+++ b/src/lib/SideBars/Scripts/RegexData.svelte
@@ -2,7 +2,7 @@
     import { XIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import { alertConfirm } from "src/ts/alert";
-    import type { customscript } from "src/ts/storage/database";
+    import type { customscript } from "src/ts/storage/database.svelte";
     import Check from "../../UI/GUI/CheckInput.svelte";
     import TextInput from "../../UI/GUI/TextInput.svelte";
     import TextAreaInput from "../../UI/GUI/TextAreaInput.svelte";
diff --git a/src/lib/SideBars/Scripts/RegexList.svelte b/src/lib/SideBars/Scripts/RegexList.svelte
index ce008edd..be0f7dd9 100644
--- a/src/lib/SideBars/Scripts/RegexList.svelte
+++ b/src/lib/SideBars/Scripts/RegexList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { customscript } from "src/ts/storage/database";
+    import type { customscript } from "src/ts/storage/database.svelte";
     import RegexData from "./RegexData.svelte";
     import Sortable from "sortablejs";
     import { sleep, sortableOptions } from "src/ts/util";
diff --git a/src/lib/SideBars/Scripts/TriggerData.svelte b/src/lib/SideBars/Scripts/TriggerData.svelte
index ee06f843..1f75fabb 100644
--- a/src/lib/SideBars/Scripts/TriggerData.svelte
+++ b/src/lib/SideBars/Scripts/TriggerData.svelte
@@ -2,7 +2,7 @@
     import { PlusIcon, XIcon } from "lucide-svelte";
     import { language } from "src/lang";
     import { alertConfirm } from "src/ts/alert";
-    import type { triggerscript } from "src/ts/storage/database";
+    import type { triggerscript } from "src/ts/storage/database.svelte";
     import TextInput from "../../UI/GUI/TextInput.svelte";
     import SelectInput from "../../UI/GUI/SelectInput.svelte";
     import OptionInput from "../../UI/GUI/OptionInput.svelte";
diff --git a/src/lib/SideBars/Scripts/TriggerList.svelte b/src/lib/SideBars/Scripts/TriggerList.svelte
index 1ce0e77d..c65abc94 100644
--- a/src/lib/SideBars/Scripts/TriggerList.svelte
+++ b/src/lib/SideBars/Scripts/TriggerList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { stopPropagation } from 'svelte/legacy';
 
-    import type { triggerscript } from "src/ts/storage/database";
+    import type { triggerscript } from "src/ts/storage/database.svelte";
     import TriggerData from "./TriggerData.svelte";
     import Sortable from "sortablejs";
     import { sleep, sortableOptions } from "src/ts/util";
diff --git a/src/lib/SideBars/SideChatList.svelte b/src/lib/SideBars/SideChatList.svelte
index 76f146a3..cb901127 100644
--- a/src/lib/SideBars/SideChatList.svelte
+++ b/src/lib/SideBars/SideChatList.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import type { Chat, character, groupChat } from "src/ts/storage/database";
-    import { DataBase, setDatabase } from "src/ts/storage/database";
+    import type { Chat, character, groupChat } from "src/ts/storage/database.svelte";
+    import { DBState } from "src/ts/storage/database.svelte";
     import TextInput from "../UI/GUI/TextInput.svelte";
     import { DownloadIcon, PencilIcon, FolderUpIcon, MenuIcon, TrashIcon } from "lucide-svelte";
     import { exportChat, importChat } from "src/ts/characters";
@@ -14,7 +14,6 @@
     import Sortable from 'sortablejs/modular/sortable.core.esm.js';
     import { onDestroy, onMount } from "svelte";
     import { v4 } from "uuid";
-    import { reverse } from "lodash";
 
   interface Props {
     chara: character|groupChat;
@@ -127,11 +126,11 @@
                             else{
                                 const confirm = await alertConfirm(language.doYouWantToBindCurrentPersona)
                                 if(confirm){
-                                    if(!$DataBase.personas[$DataBase.selectedPersona].id){
-                                        $DataBase.personas[$DataBase.selectedPersona].id = v4()
+                                    if(!DBState.db.personas[DBState.db.selectedPersona].id){
+                                        DBState.db.personas[DBState.db.selectedPersona].id = v4()
                                     }
-                                    chat.bindedPersona = $DataBase.personas[$DataBase.selectedPersona].id
-                                    console.log($DataBase.personas[$DataBase.selectedPersona])
+                                    chat.bindedPersona = DBState.db.personas[DBState.db.selectedPersona].id
+                                    console.log(DBState.db.personas[DBState.db.selectedPersona])
                                     alertNormal(language.personaBindedSuccess)
                                 }
                             }
@@ -193,50 +192,50 @@
             </button>
         </div>
 
-        {#if $DataBase.characters[$selectedCharID]?.chaId !== '§playground'}
+        {#if DBState.db.characters[$selectedCharID]?.chaId !== '§playground'}
 
             
-            {#if parseKeyValue($DataBase.customPromptTemplateToggle).length > 4}
+            {#if parseKeyValue(DBState.db.customPromptTemplateToggle).length > 4}
                 <div class="h-48 border-darkborderc p-2 border rounded flex flex-col items-start mt-2 overflow-y-auto">
                     <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
-                        <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle} reverse />
+                        <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle} reverse />
                     </div>
-                    {#each parseKeyValue($DataBase.customPromptTemplateToggle) as toggle}
+                    {#each parseKeyValue(DBState.db.customPromptTemplateToggle) as toggle}
                         <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
-                            <CheckInput check={$DataBase.globalChatVariables[`toggle_${toggle[0]}`] === '1'} reverse name={toggle[1]} onChange={() => {
-                                $DataBase.globalChatVariables[`toggle_${toggle[0]}`] = $DataBase.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
+                            <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1'} reverse name={toggle[1]} onChange={() => {
+                                DBState.db.globalChatVariables[`toggle_${toggle[0]}`] = DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
                             }} />
                         </div>
                     {/each}
-                    {#if $DataBase.supaModelType !== 'none' || $DataBase.hanuraiEnable}
+                    {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
                         <div class="flex mt-2 items-center w-full" class:justify-end={$MobileGUI}>
-                            <CheckInput bind:check={chara.supaMemory} reverse name={$DataBase.hanuraiEnable ? language.hanuraiMemory : $DataBase.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
+                            <CheckInput bind:check={chara.supaMemory} reverse name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
                         </div>
                     {/if}
                 </div>
-            {:else if parseKeyValue($DataBase.customPromptTemplateToggle).length > 0}
+            {:else if parseKeyValue(DBState.db.customPromptTemplateToggle).length > 0}
                 <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle} reverse/>
+                    <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle} reverse/>
                 </div>
-                {#each parseKeyValue($DataBase.customPromptTemplateToggle) as toggle}
+                {#each parseKeyValue(DBState.db.customPromptTemplateToggle) as toggle}
                     <div class="flex mt-2 items-center">
-                        <CheckInput check={$DataBase.globalChatVariables[`toggle_${toggle[0]}`] === '1'} reverse name={toggle[1]} onChange={() => {
-                            $DataBase.globalChatVariables[`toggle_${toggle[0]}`] = $DataBase.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
+                        <CheckInput check={DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1'} reverse name={toggle[1]} onChange={() => {
+                            DBState.db.globalChatVariables[`toggle_${toggle[0]}`] = DBState.db.globalChatVariables[`toggle_${toggle[0]}`] === '1' ? '0' : '1'
                         }} />
                     </div>
                 {/each}
-                {#if $DataBase.supaModelType !== 'none' || $DataBase.hanuraiEnable}
+                {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
                     <div class="flex mt-2 items-center">
-                        <CheckInput bind:check={chara.supaMemory} reverse name={$DataBase.hanuraiEnable ? language.hanuraiMemory : $DataBase.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
+                        <CheckInput bind:check={chara.supaMemory} reverse name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
                     </div>
                 {/if}
             {:else}
                 <div class="flex mt-2 items-center">
-                    <CheckInput bind:check={$DataBase.jailbreakToggle} name={language.jailbreakToggle}/>
+                    <CheckInput bind:check={DBState.db.jailbreakToggle} name={language.jailbreakToggle}/>
                 </div>
-                {#if $DataBase.supaModelType !== 'none' || $DataBase.hanuraiEnable}
+                {#if DBState.db.supaModelType !== 'none' || DBState.db.hanuraiEnable}
                     <div class="flex mt-2 items-center">
-                        <CheckInput bind:check={chara.supaMemory} name={$DataBase.hanuraiEnable ? language.hanuraiMemory : $DataBase.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
+                        <CheckInput bind:check={chara.supaMemory} name={DBState.db.hanuraiEnable ? language.hanuraiMemory : DBState.db.hypaMemory ? language.ToggleHypaMemory : language.ToggleSuperMemory}/>
                     </div>
                 {/if}
             {/if}
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte
index 4db06145..266054b9 100644
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -10,7 +10,7 @@
     OpenRealmStore,
     PlaygroundStore
   } from "../../ts/stores";
-    import { DataBase, setDatabase, type folder } from "../../ts/storage/database";
+    import { DBState, setDatabase, type folder } from "../../ts/storage/database.svelte";
     import BarIcon from "./BarIcon.svelte";
     import SidebarIndicator from "./SidebarIndicator.svelte";
     import {
@@ -28,10 +28,8 @@
     changeChar,
     getCharImage,
   } from "../../ts/characters";
-    import { importCharacter } from "src/ts/characterCards";
     import CharConfig from "./CharConfig.svelte";
     import { language } from "../../lang";
-    import Botpreset from "../Setting/botpreset.svelte";
     import { onDestroy } from "svelte";
     import { isEqual } from "lodash";
     import SidebarAvatar from "./SidebarAvatar.svelte";
@@ -40,12 +38,9 @@
     import { getCharacterIndexObject } from "src/ts/util";
     import { v4 } from "uuid";
     import { checkCharOrder } from "src/ts/storage/globalApi";
-    import { doingChat } from "src/ts/process";
-    import { BotCreator } from "src/ts/creation/creator";
-    import Button from "../UI/GUI/Button.svelte";
-    import { alertAddCharacter, alertInput, alertSelect } from "src/ts/alert";
+    import { alertInput, alertSelect } from "src/ts/alert";
     import SideChatList from "./SideChatList.svelte";
-    import { ConnectionIsHost, ConnectionOpenStore, joinMultiuserRoom, RoomIdStore } from "src/ts/sync/multiuser";
+    import { ConnectionIsHost, ConnectionOpenStore, RoomIdStore } from "src/ts/sync/multiuser";
   import { sideBarSize } from "src/ts/gui/guisize";
   import DevTool from "./DevTool.svelte";
   let sideBarMode = $state(0);
@@ -76,15 +71,14 @@
 
   sideBarClosing.set(false)
 
-
-  const unsub = DataBase.subscribe((db) => {
+  $effect(() => {
     let newCharImages: sortType[] = [];
     const idObject = getCharacterIndexObject()
-    for (const id of db.characterOrder) {
+    for (const id of DBState.db.characterOrder) {
       if(typeof(id) === 'string'){
         const index = idObject[id] ?? -1
         if(index !== -1){
-          const cha = db.characters[index]
+          const cha = DBState.db.characters[index]
           newCharImages.push({
             img:cha.image ?? "",
             index:index,
@@ -99,7 +93,7 @@
         for(const id of folder.data){
           const index = idObject[id] ?? -1
           if(index !== -1){
-            const cha = db.characters[index]
+            const cha = DBState.db.characters[index]
             folderCharImages.push({
               img:cha.image ?? "",
               index:index,
@@ -120,16 +114,17 @@
     if (!isEqual(charImages, newCharImages)) {
       charImages = newCharImages;
     }
-    if(IconRounded !== db.roundIcons){
-      IconRounded = db.roundIcons
+    if(IconRounded !== DBState.db.roundIcons){
+      IconRounded = DBState.db.roundIcons
     }
-  });
+  })
+
 
   const inserter = (mainIndex:DragData, targetIndex:DragData) => {
     if(mainIndex.index === targetIndex.index && mainIndex.folder === targetIndex.folder){
       return
     }
-    let db = get(DataBase)
+    let db = DBState.db
     let mainFolderIndex = mainIndex.folder ? getFolderIndex(mainIndex.folder) : null
     let targetFolderIndex = targetIndex.folder ? getFolderIndex(targetIndex.folder) : null
     let mainFolderId = mainIndex.folder ? (db.characterOrder[mainFolderIndex] as folder).id : ''
@@ -202,14 +197,13 @@
       }
     }
 
-    setDatabase(db)
+    DBState.db.characterOrder = db.characterOrder
     checkCharOrder()
   }
 
   function getFolderIndex(id:string){
-    let db = get(DataBase)
-    for(let i=0;i<db.characterOrder.length;i++){
-      const data = db.characterOrder[i]
+    for(let i=0;i<DBState.db.characterOrder.length;i++){
+      const data = DBState.db.characterOrder[i]
       if(typeof(data) !== 'string' && data.id === id){
         return i
       }
@@ -221,7 +215,7 @@
     if(mainIndex.index === targetIndex.index && mainIndex.folder === targetIndex.folder){
       return
     }
-    let db = get(DataBase)
+    let db = DBState.db
     let mainFolderIndex = mainIndex.folder ? getFolderIndex(mainIndex.folder) : null
     let mainFolder = db.characterOrder[mainFolderIndex] as folder
     if(targetIndex.folder){
@@ -296,8 +290,6 @@
     e.stopPropagation()
     return false
   }
-
-  onDestroy(unsub);
 </script>
 
 <div
@@ -411,7 +403,7 @@
                 const sel = parseInt(await alertSelect([language.renameFolder,language.changeFolderColor,language.cancel]))
                 if(sel === 0){
                   const v = await alertInput(language.changeFolderName)
-                  const db = get(DataBase)
+                  const db = DBState.db
                   if(v){
                     const oder = db.characterOrder[ind]
                     if(typeof(oder) === 'string'){
@@ -425,7 +417,7 @@
                 else if(sel === 1){
                   const colors = ["red","green","blue","yellow","indigo","purple","pink","default"]
                   const sel = parseInt(await alertSelect(colors))
-                  const db = get(DataBase)
+                  const db = DBState.db
                   const oder = db.characterOrder[ind]
                   if(typeof(oder) === 'string'){
                     return
@@ -607,8 +599,8 @@
         <h1 class="text-xl">Welcome to RisuAI!</h1>
         <span class="text-xs text-textcolor2">Select a bot to start chating</span>
       </div>
-    {:else if $DataBase.characters[$selectedCharID]?.chaId === '§playground'}
-      <SideChatList bind:chara={ $DataBase.characters[$selectedCharID]} />
+    {:else if DBState.db.characters[$selectedCharID]?.chaId === '§playground'}
+      <SideChatList bind:chara={ DBState.db.characters[$selectedCharID]} />
     {:else if $ConnectionOpenStore}
       <div class="flex flex-col">
         <h1 class="text-xl">{language.connectionOpen}</h1>
@@ -635,7 +627,7 @@
           devTool = false
           botMakerMode.set(true)
         }} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode || devTool}>{language.character}</button>
-        {#if $DataBase.enableDevTools}
+        {#if DBState.db.enableDevTools}
           <button onclick={() => {
             devTool = true
           }} class="border-l border-l-selected rounded-br-md px-1" class:text-textcolor2={!devTool}>
@@ -648,7 +640,7 @@
       {:else if $botMakerMode}
         <CharConfig />
       {:else}
-        <SideChatList bind:chara={ $DataBase.characters[$selectedCharID]} />
+        <SideChatList bind:chara={ DBState.db.characters[$selectedCharID]} />
       {/if}
     {/if}
   {/if}
diff --git a/src/lib/UI/GUI/TextAreaResizable.svelte b/src/lib/UI/GUI/TextAreaResizable.svelte
index 17cbafc5..90072c2e 100644
--- a/src/lib/UI/GUI/TextAreaResizable.svelte
+++ b/src/lib/UI/GUI/TextAreaResizable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { DataBase } from "../../../ts/storage/database";
+    import { DBState } from "../../../ts/storage/database.svelte";
     import { longpress } from 'src/ts/gui/longtouch';
 
     let textarea:HTMLElement = $state();
@@ -35,6 +35,6 @@
     use:longpress={handleLongPress}
     bind:value={value}
     class="rounded-md p-2 text-textcolor bg-transparent resize-none overflow-y-hidden border border-darkborderc"
-    style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
-    style:line-height="{($DataBase.lineHeight ?? 1.25) * ($DataBase.zoomsize / 100)}rem"
+    style:font-size="{0.875 * (DBState.db.zoomsize / 100)}rem"
+    style:line-height="{(DBState.db.lineHeight ?? 1.25) * (DBState.db.zoomsize / 100)}rem"
 ></textarea>
\ No newline at end of file
diff --git a/src/lib/UI/MainMenu.svelte b/src/lib/UI/MainMenu.svelte
index 1451426b..084464e4 100644
--- a/src/lib/UI/MainMenu.svelte
+++ b/src/lib/UI/MainMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { DataBase, appVer, webAppSubVer } from "src/ts/storage/database";
+    import { DBState, appVer, webAppSubVer } from "src/ts/storage/database.svelte";
     import Hub from "./Realm/RealmMain.svelte";
     import { OpenRealmStore } from "src/ts/stores";
     import { ArrowLeft } from "lucide-svelte";
@@ -25,7 +25,7 @@
       <h1 class="text-2xl font-bold">Recently Uploaded<button class="text-base font-medium float-right p-1 bg-darkbg rounded-md hover:ring" onclick={() => {
         $OpenRealmStore = true
       }}>Get More</button></h1>
-          {#if !$DataBase.hideRealm}
+          {#if !DBState.db.hideRealm}
             {#await getRisuHub({
                   search: '',
                   page: 0,
diff --git a/src/lib/UI/ModelList.svelte b/src/lib/UI/ModelList.svelte
index 60e88e32..0c788919 100644
--- a/src/lib/UI/ModelList.svelte
+++ b/src/lib/UI/ModelList.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { getHordeModels } from "src/ts/horde/getModels";
     import Arcodion from "./Arcodion.svelte";
     import { language } from "src/lang";
@@ -89,7 +89,7 @@
                 {/if}
             </Arcodion>
             <button class="hover:bg-selected px-6 py-2 text-lg" onclick={() => {changeModel('reverse_proxy')}}>Custom (OpenAI-compatible)</button>
-            {#if $DataBase.tpo && isTauri}
+            {#if DBState.db.tpo && isTauri}
                 <button class="hover:bg-selected px-6 py-2 text-lg" onclick={async () => {
                     const selected = await open({
                         filters: [{
@@ -178,7 +178,7 @@
             </Arcodion>
             <button class="hover:bg-selected px-6 py-2 text-lg" onclick={() => {changeModel('risullm-proto')}}>RisuAI LLM (Prototype)</button>
             {/if}
-            {#if $DataBase.plugins.length > 0}
+            {#if DBState.db.plugins.length > 0}
                 <button onclick={() => {changeModel('custom')}} class="hover:bg-selected px-6 py-2 text-lg" >Plugin</button>
             {/if}
             <div class="text-textcolor2 text-xs">
diff --git a/src/lib/UI/PromptDataItem.svelte b/src/lib/UI/PromptDataItem.svelte
index 44c42dda..643168d8 100644
--- a/src/lib/UI/PromptDataItem.svelte
+++ b/src/lib/UI/PromptDataItem.svelte
@@ -8,7 +8,7 @@
     import CheckInput from "./GUI/CheckInput.svelte";
     import { ArrowDown, ArrowUp, XIcon } from "lucide-svelte";
     import TextInput from "./GUI/TextInput.svelte";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     interface Props {
         promptItem: PromptItem;
         onRemove?: () => void;
@@ -64,7 +64,7 @@
         <OptionInput value="lorebook">{language.formating.lorebook}</OptionInput>
         <OptionInput value="memory">{language.formating.memory}</OptionInput>
         <OptionInput value="postEverything">{language.formating.postEverything}</OptionInput>
-        {#if $DataBase.promptSettings.customChainOfThought}
+        {#if DBState.db.promptSettings.customChainOfThought}
             <OptionInput value="cot">{language.cot}</OptionInput>
         {/if}
     </SelectInput>
@@ -105,7 +105,7 @@
                     }
                 }} />
             {/if}
-            {#if $DataBase.promptSettings.sendChatAsSystem}
+            {#if DBState.db.promptSettings.sendChatAsSystem}
                 <CheckInput name={language.chatAsOriginalOnSystem} bind:check={promptItem.chatAsOriginalOnSystem}/>
             {/if}
         {/if}
diff --git a/src/lib/UI/Realm/RealmFrame.svelte b/src/lib/UI/Realm/RealmFrame.svelte
index eb3a9059..fddec4fd 100644
--- a/src/lib/UI/Realm/RealmFrame.svelte
+++ b/src/lib/UI/Realm/RealmFrame.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { alertMd } from "src/ts/alert";
     import { shareRealmCardData } from "src/ts/realm";
-    import { DataBase, downloadPreset } from "src/ts/storage/database";
+    import { DBState, downloadPreset } from "src/ts/storage/database.svelte";
     import { selectedCharID, ShowRealmFrameStore } from "src/ts/stores";
     import { sleep } from "src/ts/util";
     import { onDestroy, onMount } from "svelte";
@@ -10,8 +10,8 @@
         $ShowRealmFrameStore = ''
     }
     let iframe: HTMLIFrameElement = $state(null)
-    const tk = $DataBase?.account?.token;
-    const id = $DataBase?.account?.id
+    const tk = DBState.db?.account?.token;
+    const id = DBState.db?.account?.id
     let loadingStage = $state(0)
     let pongGot = false
 
@@ -30,9 +30,9 @@
             if($ShowRealmFrameStore.startsWith('preset') || $ShowRealmFrameStore.startsWith('module')){
                 //TODO, add preset edit
             }
-            else if($DataBase.characters[$selectedCharID].type === 'character'){
+            else if(DBState.db.characters[$selectedCharID].type === 'character'){
                 loadingStage = 0
-                $DataBase.characters[$selectedCharID].realmId = e.data.id
+                DBState.db.characters[$selectedCharID].realmId = e.data.id
             }
             close()
         }
@@ -67,7 +67,7 @@
             }
         }
         else if($ShowRealmFrameStore.startsWith('module')){
-            const predata = $DataBase.modules[Number($ShowRealmFrameStore.split(':')[1])]
+            const predata = DBState.db.modules[Number($ShowRealmFrameStore.split(':')[1])]
             //@ts-ignore
             predata.type = 'risuModule'
             const encodedPredata = new TextEncoder().encode(JSON.stringify(predata))
@@ -96,8 +96,8 @@
         if($ShowRealmFrameStore.startsWith('preset') || $ShowRealmFrameStore.startsWith('module')){
             //TODO, add preset edit
         }
-        else if($DataBase.characters[$selectedCharID].type === 'character' && $DataBase.characters[$selectedCharID].realmId){
-            url += `&edit=${$DataBase.characters[$selectedCharID].realmId}&edit-type=normal`
+        else if(DBState.db.characters[$selectedCharID].type === 'character' && DBState.db.characters[$selectedCharID].realmId){
+            url += `&edit=${DBState.db.characters[$selectedCharID].realmId}&edit-type=normal`
         }
         url += '#noLayout'
         return url
diff --git a/src/lib/UI/Realm/RealmPopUp.svelte b/src/lib/UI/Realm/RealmPopUp.svelte
index 28b1433b..fa613eee 100644
--- a/src/lib/UI/Realm/RealmPopUp.svelte
+++ b/src/lib/UI/Realm/RealmPopUp.svelte
@@ -3,7 +3,7 @@
     import { language } from "src/lang";
     import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
     import { hubURL, type hubType, downloadRisuHub, getRealmInfo } from "src/ts/characterCards";
-    import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import RealmLicense from "./RealmLicense.svelte";
     import MultiLangDisplay from "../GUI/MultiLangDisplay.svelte";
     import { tooltip } from "src/ts/gui/tooltip";
@@ -86,7 +86,7 @@
             })}>
                 <FlagIcon />
             </button>
-            {#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
+            {#if (DBState.db.account?.token?.split('-') ?? [])[1] === openedData.creator}
                 <button class="text-textcolor2 hover:text-red-500" onclick={(async (e) => {
                     e.stopPropagation()
                     const conf = await alertConfirm('Do you want to remove this character from Realm?')
@@ -95,7 +95,7 @@
                             method: "POST",
                             body: JSON.stringify({
                                 id: openedData.id,
-                                token: $DataBase.account?.token
+                                token: DBState.db.account?.token
                             })
                         })
                         alertNormal(await da.text())
diff --git a/src/lib/UI/Realm/RealmUpload.svelte b/src/lib/UI/Realm/RealmUpload.svelte
index 615321ca..bc115a8f 100644
--- a/src/lib/UI/Realm/RealmUpload.svelte
+++ b/src/lib/UI/Realm/RealmUpload.svelte
@@ -5,7 +5,7 @@
         onclick?.(e)
     }}>
         
-        {#if !$DataBase.account}
+        {#if !DBState.db.account}
             <span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
             <span class="text-textcolor2">You can login in app settings 🡲 account</span>
             <button onclick={async () => {
@@ -111,7 +111,7 @@
     import { language } from "src/lang";
     import { alertError } from "src/ts/alert";
     import { shareRisuHub2 } from "src/ts/characterCards";
-    import { DataBase, type character } from "src/ts/storage/database";
+    import { DBState, type character } from "src/ts/storage/database.svelte";
     import TextInput from "../GUI/TextInput.svelte";
     import Button from "../GUI/Button.svelte";
     import SelectInput from "../GUI/SelectInput.svelte";
diff --git a/src/lib/UI/Title.svelte b/src/lib/UI/Title.svelte
index 54c226b1..7a83dc3f 100644
--- a/src/lib/UI/Title.svelte
+++ b/src/lib/UI/Title.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { alertMd, alertNormal } from "src/ts/alert";
-    import { DataBase } from "src/ts/storage/database";
+    import { alertMd } from "src/ts/alert";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { openURL } from "src/ts/storage/globalApi";
     import { sideBarStore } from "src/ts/stores";
 
@@ -22,10 +22,10 @@
         specialDay = 'halloween'
     }
     if( (today.getMonth() === 8 && today.getDate() === 16)){
-        if($DataBase.language === 'ko'){
+        if(DBState.db.language === 'ko'){
             specialDay = 'chuseok'
         }
-        else if($DataBase.language === 'zh-Hant' || $DataBase.language === 'zh'){
+        else if(DBState.db.language === 'zh-Hant' || DBState.db.language === 'zh'){
             specialDay = 'midAutumn'
         }
     }
@@ -37,7 +37,7 @@
 
     const onClick = () => {
         if(specialDay === 'newYear'){
-            const db = $DataBase
+            const db = DBState.db
             let messages = 0
             let chats = 0
             if(db.statistics?.newYear2024){
diff --git a/src/lib/VisualNovel/VisualNovelChat.svelte b/src/lib/VisualNovel/VisualNovelChat.svelte
index 267af3ca..6ec0d29a 100644
--- a/src/lib/VisualNovel/VisualNovelChat.svelte
+++ b/src/lib/VisualNovel/VisualNovelChat.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { DataBase } from "src/ts/storage/database";
+    import { DBState } from "src/ts/storage/database.svelte";
     import { getFileSrc } from "src/ts/storage/globalApi";
-  import { selectedCharID } from "src/ts/stores";
+    import { selectedCharID } from "src/ts/stores";
     import { sleep } from "src/ts/util";
     import { onDestroy, onMount } from "svelte";
 
@@ -41,8 +41,8 @@
     })
 </script>
 
-{#if $DataBase.characters[$selectedCharID].type === 'character' && $DataBase.characters[$selectedCharID].emotionImages[0]}
-    {#await getFileSrc($DataBase.characters[$selectedCharID].emotionImages[0][1]) then imglink}
+{#if DBState.db.characters[$selectedCharID].type === 'character' && DBState.db.characters[$selectedCharID].emotionImages[0]}
+    {#await getFileSrc(DBState.db.characters[$selectedCharID].emotionImages[0][1]) then imglink}
         <div class="w-full absolute top-0 h-full bottom-0 justify-center flex">
             <img src={imglink} alt="character">
         </div>
@@ -53,7 +53,7 @@
         <div class="w-3xl max-w-full flex flex-col">
 
             <div class="bg-slate-700 h-12 rounded-lg border-slate-500 border-1 w-40 mb-2 bg-opacity-90 text-center flex items-center justify-center">
-                <span class="font-bold p-2">{$DataBase.characters[$selectedCharID].name}</span>
+                <span class="font-bold p-2">{DBState.db.characters[$selectedCharID].name}</span>
             </div>
             <div class="bg-slate-700 h-40 rounded-lg border-slate-500 border-1 w-full bg-opacity-90 text-justify p-4">
                 Test
@@ -67,7 +67,7 @@
             <div class="bg-neutral-200 h-12 rounded-lg border-pink-900 border-1 w-48 mb-2 text-center relative top-6 left-4 text-lg">
                 <div class="border-pink-300 border-4 h-full rounded-lg">
                     <div class="border-pink-900 border-1 text-justify h-full rounded-lg flex items-center justify-center">
-                        <span class="font-bold p-2">{$DataBase.characters[$selectedCharID].name}</span>
+                        <span class="font-bold p-2">{DBState.db.characters[$selectedCharID].name}</span>
                     </div>
                 </div>
             </div>
diff --git a/src/lib/VisualNovel/VisualNovelMain.svelte b/src/lib/VisualNovel/VisualNovelMain.svelte
index 857a9a8a..f55f2576 100644
--- a/src/lib/VisualNovel/VisualNovelMain.svelte
+++ b/src/lib/VisualNovel/VisualNovelMain.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getCustomBackground, getEmotion } from "../../ts/util";
-    import { DataBase } from "../../ts/storage/database";
+    import { DBState } from "../../ts/storage/database.svelte";
     import BackgroundDom from "../ChatScreens/BackgroundDom.svelte";
     import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
     import defaultWallpaper from './test.png'
@@ -12,9 +12,9 @@
     let lastBg = $state('')
     $effect.pre(() => {
         (async () =>{
-            if($DataBase.customBackground !== lastBg){
-                lastBg = $DataBase.customBackground
-                bgImg = await getCustomBackground($DataBase.customBackground)
+            if(DBState.db.customBackground !== lastBg){
+                lastBg = DBState.db.customBackground
+                bgImg = await getCustomBackground(DBState.db.customBackground)
             }
         })()
     });
diff --git a/src/main.ts b/src/main.ts
index 08fe1223..be03dc46 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import "./styles.css";
 import "core-js/actual"
-import "./ts/storage/database"
+import "./ts/storage/database.svelte"
 import App from "./App.svelte";
 import { loadData } from "./ts/storage/globalApi";
 import { initHotkey } from "./ts/hotkey";
diff --git a/src/ts/alert.ts b/src/ts/alert.ts
index 30049793..878a822f 100644
--- a/src/ts/alert.ts
+++ b/src/ts/alert.ts
@@ -3,7 +3,7 @@ import { sleep } from "./util"
 import { language } from "../lang"
 import { isNodeServer, isTauri } from "./storage/globalApi"
 import { Capacitor } from "@capacitor/core"
-import { DataBase, type MessageGenerationInfo } from "./storage/database"
+import { DataBase, type MessageGenerationInfo } from "./storage/database.svelte"
 
 interface alertData{
     type: 'error'|'normal'|'none'|'ask'|'wait'|'selectChar'
diff --git a/src/ts/characterCards.ts b/src/ts/characterCards.ts
index 93aa3a02..ec42b872 100644
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -1,6 +1,6 @@
 import { get, writable, type Writable } from "svelte/store"
 import { alertCardExport, alertConfirm, alertError, alertInput, alertMd, alertNormal, alertSelect, alertStore, alertTOS, alertWait } from "./alert"
-import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook, type triggerscript, importPreset, type groupChat, setCurrentCharacter, getCurrentCharacter } from "./storage/database"
+import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook, type triggerscript, importPreset, type groupChat, setCurrentCharacter, getCurrentCharacter } from "./storage/database.svelte"
 import { checkNullish, decryptBuffer, encryptBuffer, isKnownUri, selectFileByDom, selectMultipleFile, sleep } from "./util"
 import { language } from "src/lang"
 import { v4 as uuidv4, v4 } from 'uuid';
diff --git a/src/ts/characters.ts b/src/ts/characters.ts
index 653a44bc..c23cda46 100644
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store";
-import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc, type loreBook } from "./storage/database";
+import { DataBase, saveImage, setDatabase, type character, type Chat, defaultSdDataFunc, type loreBook } from "./storage/database.svelte";
 import { alertAddCharacter, alertConfirm, alertError, alertNormal, alertSelect, alertStore, alertWait } from "./alert";
 import { language } from "../lang";
 import { decode as decodeMsgpack } from "msgpackr";
diff --git a/src/ts/creation/creator.ts b/src/ts/creation/creator.ts
index b84719e0..6bd79a30 100644
--- a/src/ts/creation/creator.ts
+++ b/src/ts/creation/creator.ts
@@ -4,7 +4,7 @@ import { requestChatData } from "../process/request";
 import { checkCharOrder, globalFetch, isNodeServer, isTauri, saveAsset } from "../storage/globalApi";
 import { tokenize } from "../tokenizer";
 import { createBlankChar } from "../characters";
-import { DataBase, setDatabase, type character } from "../storage/database";
+import { DataBase, setDatabase, type character } from "../storage/database.svelte";
 import { get } from "svelte/store";
 import { sleep } from "../util";
 import { Capacitor } from "@capacitor/core";
diff --git a/src/ts/drive/accounter.ts b/src/ts/drive/accounter.ts
index f9ea51c6..31c2dafe 100644
--- a/src/ts/drive/accounter.ts
+++ b/src/ts/drive/accounter.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { hubURL } from "../characterCards"
-import { DataBase } from "../storage/database"
+import { DataBase } from "../storage/database.svelte"
 import { alertError, alertSelect } from "../alert"
 
 export async function risuLogin() {
diff --git a/src/ts/drive/backuplocal.ts b/src/ts/drive/backuplocal.ts
index dfbc4f84..9982cc11 100644
--- a/src/ts/drive/backuplocal.ts
+++ b/src/ts/drive/backuplocal.ts
@@ -3,7 +3,7 @@ import { alertError, alertNormal, alertStore, alertWait } from "../alert";
 import { LocalWriter, forageStorage, isTauri } from "../storage/globalApi";
 import { decodeRisuSave, encodeRisuSave } from "../storage/risuSave";
 import { get } from "svelte/store";
-import { DataBase } from "../storage/database";
+import { DataBase } from "../storage/database.svelte";
 import { save } from "@tauri-apps/plugin-dialog";
 import { relaunch } from "@tauri-apps/plugin-process";
 import { sleep } from "../util";
diff --git a/src/ts/drive/drive.ts b/src/ts/drive/drive.ts
index 3827f042..5c8054f3 100644
--- a/src/ts/drive/drive.ts
+++ b/src/ts/drive/drive.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import { alertError, alertInput, alertNormal, alertSelect, alertStore } from "../alert";
-import { DataBase, type Database } from "../storage/database";
+import { DataBase, type Database } from "../storage/database.svelte";
 import { forageStorage, getUnpargeables, isTauri, openURL } from "../storage/globalApi";
 import { BaseDirectory, exists, readFile, readDir, writeFile } from "@tauri-apps/plugin-fs";
 import { language } from "../../lang";
diff --git a/src/ts/gui/animation.ts b/src/ts/gui/animation.ts
index bb303668..6da3ecb8 100644
--- a/src/ts/gui/animation.ts
+++ b/src/ts/gui/animation.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store";
-import { DataBase } from "../storage/database";
+import { DataBase } from "../storage/database.svelte";
 
 export function updateAnimationSpeed(){
     const db = get(DataBase);
diff --git a/src/ts/gui/colorscheme.ts b/src/ts/gui/colorscheme.ts
index 87d42bc2..e0a6e4ea 100644
--- a/src/ts/gui/colorscheme.ts
+++ b/src/ts/gui/colorscheme.ts
@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store";
-import { DataBase, setDatabase } from "../storage/database";
+import { DataBase, setDatabase } from "../storage/database.svelte";
 import { downloadFile } from "../storage/globalApi";
 import { BufferToText, selectSingleFile } from "../util";
 import { alertError } from "../alert";
diff --git a/src/ts/gui/guisize.ts b/src/ts/gui/guisize.ts
index 1011fcb3..0a35eb82 100644
--- a/src/ts/gui/guisize.ts
+++ b/src/ts/gui/guisize.ts
@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store";
-import { DataBase } from "../storage/database";
+import { DataBase } from "../storage/database.svelte";
 
 export let textAreaSize = writable(0)
 export let sideBarSize = writable(0)
diff --git a/src/ts/hotkey.ts b/src/ts/hotkey.ts
index a39f8de3..4206bb9d 100644
--- a/src/ts/hotkey.ts
+++ b/src/ts/hotkey.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { alertSelect, alertToast, doingAlert } from "./alert"
-import { DataBase, changeToPreset as changeToPreset2  } from "./storage/database"
+import { DataBase, changeToPreset as changeToPreset2  } from "./storage/database.svelte"
 import { MobileGUIStack, MobileSideBar, openPersonaList, openPresetList, SafeModeStore, selectedCharID, settingsOpen } from "./stores"
 import { language } from "src/lang"
 import { updateTextThemeAndCSS } from "./gui/colorscheme"
diff --git a/src/ts/kei/backup.ts b/src/ts/kei/backup.ts
index 063a2f1b..a1bf50e1 100644
--- a/src/ts/kei/backup.ts
+++ b/src/ts/kei/backup.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { alertNormal, alertSelect } from "../alert"
 import { keiServerURL } from "./kei"
-import { DataBase, setDatabase } from "../storage/database"
+import { DataBase, setDatabase } from "../storage/database.svelte"
 
 export async function autoServerBackup(){
     const db = get(DataBase)
diff --git a/src/ts/kei/kei.ts b/src/ts/kei/kei.ts
index 648820ba..6324f7f1 100644
--- a/src/ts/kei/kei.ts
+++ b/src/ts/kei/kei.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import { hubURL } from "../characterCards";
-import { DataBase } from "../storage/database";
+import { DataBase } from "../storage/database.svelte";
 
 export function keiServerURL(){
     const db = get(DataBase)
diff --git a/src/ts/model/openrouter.ts b/src/ts/model/openrouter.ts
index 7bc358e3..bad407f8 100644
--- a/src/ts/model/openrouter.ts
+++ b/src/ts/model/openrouter.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { DataBase } from "../storage/database"
+import { DataBase } from "../storage/database.svelte"
 
 export async function openRouterModels() {
     try {
diff --git a/src/ts/observer.ts b/src/ts/observer.ts
index cf45b351..a40f870c 100644
--- a/src/ts/observer.ts
+++ b/src/ts/observer.ts
@@ -1,7 +1,7 @@
 import { runTrigger } from "./process/triggers";
 import { runCharacterJS } from "./plugins/embedscript";
 import { sleep } from "./util";
-import { getCurrentCharacter, getCurrentChat, setCurrentChat } from "./storage/database";
+import { getCurrentCharacter, getCurrentChat, setCurrentChat } from "./storage/database.svelte";
 
 
 function nodeObserve(node:HTMLElement){
diff --git a/src/ts/parser.ts b/src/ts/parser.ts
index 52bb4680..82cac466 100644
--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -1,6 +1,6 @@
 import DOMPurify from 'isomorphic-dompurify';
 import markdownit from 'markdown-it'
-import { DataBase, getCurrentCharacter, setDatabase, type Database, type Message, type character, type customscript, type groupChat, type triggerscript } from './storage/database';
+import { DataBase, getCurrentCharacter, setDatabase, type Database, type Message, type character, type customscript, type groupChat, type triggerscript } from './storage/database.svelte';
 import { getFileSrc } from './storage/globalApi';
 import { processScriptFull } from './process/scripts';
 import { get } from 'svelte/store';
diff --git a/src/ts/persona.ts b/src/ts/persona.ts
index eb349cc3..e783767f 100644
--- a/src/ts/persona.ts
+++ b/src/ts/persona.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { DataBase, saveImage, setDatabase } from "./storage/database"
+import { DataBase, saveImage, setDatabase } from "./storage/database.svelte"
 import { getUserName, selectSingleFile, sleep } from "./util"
 import { alertError, alertNormal, alertStore } from "./alert"
 import { downloadFile, readImage } from "./storage/globalApi"
diff --git a/src/ts/plugins/embedscript.ts b/src/ts/plugins/embedscript.ts
index 7c6b2553..4ae83bb3 100644
--- a/src/ts/plugins/embedscript.ts
+++ b/src/ts/plugins/embedscript.ts
@@ -2,9 +2,9 @@ import { get } from 'svelte/store'
 import type { ScriptMode } from '../process/scripts'
 //@ts-ignore
 import WorkerUrl from './embedworker?worker&url'
-import { DataBase, type Message } from '../storage/database'
+import { DataBase, type Message } from '../storage/database.svelte'
 import { selectedCharID } from '../stores'
-import { setDatabase } from '../storage/database'
+import { setDatabase } from '../storage/database.svelte'
 
 let worker = new Worker(WorkerUrl, {type: 'module'})
 
diff --git a/src/ts/plugins/plugins.ts b/src/ts/plugins/plugins.ts
index 1f65d37d..37d256fc 100644
--- a/src/ts/plugins/plugins.ts
+++ b/src/ts/plugins/plugins.ts
@@ -1,7 +1,7 @@
 import { get, writable } from "svelte/store";
 import { language } from "../../lang";
 import { alertError } from "../alert";
-import { DataBase } from "../storage/database";
+import { DataBase } from "../storage/database.svelte";
 import { checkNullish, selectSingleFile, sleep } from "../util";
 import type { OpenAIChat } from "../process";
 import { globalFetch } from "../storage/globalApi";
diff --git a/src/ts/process/command.ts b/src/ts/process/command.ts
index bdf16204..2fbe0050 100644
--- a/src/ts/process/command.ts
+++ b/src/ts/process/command.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store";
-import { DataBase, getCurrentCharacter, getCurrentChat, setCurrentChat, setDatabase } from "../storage/database";
+import { DataBase, getCurrentCharacter, getCurrentChat, setCurrentChat, setDatabase } from "../storage/database.svelte";
 import { selectedCharID } from "../stores";
 import { alertInput, alertMd, alertNormal, alertSelect, alertToast } from "../alert";
 import { sayTTS } from "./tts";
diff --git a/src/ts/process/embedding/addinfo.ts b/src/ts/process/embedding/addinfo.ts
index 4913ceb3..77489b9a 100644
--- a/src/ts/process/embedding/addinfo.ts
+++ b/src/ts/process/embedding/addinfo.ts
@@ -1,4 +1,4 @@
-import { DataBase, type Chat, type character } from "src/ts/storage/database";
+import { DataBase, type Chat, type character } from "src/ts/storage/database.svelte";
 import { HypaProcesser } from '../memory/hypamemory'
 import type { OpenAIChat } from "..";
 import { stringlizeChat } from "../stringlize";
diff --git a/src/ts/process/exampleMessages.ts b/src/ts/process/exampleMessages.ts
index 32c4222b..c92d7053 100644
--- a/src/ts/process/exampleMessages.ts
+++ b/src/ts/process/exampleMessages.ts
@@ -1,5 +1,5 @@
 import type { OpenAIChat } from ".";
-import type { character } from "../storage/database";
+import type { character } from "../storage/database.svelte";
 import { risuChatParser } from "./scripts";
 
 export function exampleMessage(char:character, userName:string):OpenAIChat[]{
diff --git a/src/ts/process/files/image.ts b/src/ts/process/files/image.ts
index 384f2e5a..a6097ec1 100644
--- a/src/ts/process/files/image.ts
+++ b/src/ts/process/files/image.ts
@@ -1,7 +1,7 @@
 import localforage from "localforage";
 import { selectSingleFile } from "../../util";
 import { v4 } from "uuid";
-import { DataBase } from "../../storage/database";
+import { DataBase } from "../../storage/database.svelte";
 import { get } from "svelte/store";
 import { checkImageType } from "../../parser";
 
diff --git a/src/ts/process/files/multisend.ts b/src/ts/process/files/multisend.ts
index ffa38936..d7e007eb 100644
--- a/src/ts/process/files/multisend.ts
+++ b/src/ts/process/files/multisend.ts
@@ -1,4 +1,4 @@
-import { DataBase, setDatabase } from 'src/ts/storage/database';
+import { DataBase, setDatabase } from 'src/ts/storage/database.svelte';
 import { selectedCharID } from 'src/ts/stores';
 import { get } from 'svelte/store';
 import { doingChat, sendChat } from '..';
diff --git a/src/ts/process/group.ts b/src/ts/process/group.ts
index 00706f45..7ae9bd6c 100644
--- a/src/ts/process/group.ts
+++ b/src/ts/process/group.ts
@@ -3,7 +3,7 @@ import { findCharacterbyId } from "../util";
 import { alertConfirm, alertError, alertSelectChar } from "../alert";
 import { language } from "src/lang";
 import { get } from "svelte/store";
-import { DataBase, setDatabase } from "../storage/database";
+import { DataBase, setDatabase } from "../storage/database.svelte";
 import { selectedCharID } from "../stores";
 
 export async function addGroupChar(){
diff --git a/src/ts/process/index.ts b/src/ts/process/index.ts
index 18ad7ac1..93148e08 100644
--- a/src/ts/process/index.ts
+++ b/src/ts/process/index.ts
@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store";
-import { DataBase, setDatabase, type character, type MessageGenerationInfo, type Chat } from "../storage/database";
+import { DataBase, setDatabase, type character, type MessageGenerationInfo, type Chat } from "../storage/database.svelte";
 import { CharEmotion, selectedCharID } from "../stores";
 import { ChatTokenizer, tokenize, tokenizeNum } from "../tokenizer";
 import { language } from "../../lang";
diff --git a/src/ts/process/inlayScreen.ts b/src/ts/process/inlayScreen.ts
index dac23def..5e7cbaaf 100644
--- a/src/ts/process/inlayScreen.ts
+++ b/src/ts/process/inlayScreen.ts
@@ -1,5 +1,5 @@
 import { writeInlayImage } from "./files/image";
-import type { character } from "../storage/database";
+import type { character } from "../storage/database.svelte";
 import { generateAIImage } from "./stableDiff";
 
 const imggenRegex = [/<ImgGen="(.+?)">/gi, /{{ImgGen="(.+?)"}}/gi] as const
diff --git a/src/ts/process/lorebook.ts b/src/ts/process/lorebook.ts
index a3d0efe3..1ea117fd 100644
--- a/src/ts/process/lorebook.ts
+++ b/src/ts/process/lorebook.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import {selectedCharID} from '../stores'
-import { DataBase, setDatabase, type Message, type loreBook } from "../storage/database";
+import { DataBase, setDatabase, type Message, type loreBook } from "../storage/database.svelte";
 import { tokenize } from "../tokenizer";
 import { checkNullish, selectSingleFile } from "../util";
 import { alertError, alertNormal } from "../alert";
diff --git a/src/ts/process/lua.ts b/src/ts/process/lua.ts
index 5c5a772e..122b3b72 100644
--- a/src/ts/process/lua.ts
+++ b/src/ts/process/lua.ts
@@ -1,6 +1,6 @@
 import { getChatVar, hasher, risuChatParser, setChatVar, type simpleCharacterArgument } from "../parser";
 import { LuaEngine, LuaFactory } from "wasmoon";
-import { DataBase, getCurrentCharacter, getCurrentChat, setCurrentChat, setDatabase, type Chat, type character, type groupChat } from "../storage/database";
+import { DataBase, getCurrentCharacter, getCurrentChat, setCurrentChat, setDatabase, type Chat, type character, type groupChat } from "../storage/database.svelte";
 import { get } from "svelte/store";
 import { ReloadGUIPointer, selectedCharID } from "../stores";
 import { alertError, alertInput, alertNormal } from "../alert";
diff --git a/src/ts/process/memory/hanuraiMemory.ts b/src/ts/process/memory/hanuraiMemory.ts
index b36d76d1..a2eef774 100644
--- a/src/ts/process/memory/hanuraiMemory.ts
+++ b/src/ts/process/memory/hanuraiMemory.ts
@@ -4,7 +4,7 @@ import { HypaProcesser } from "./hypamemory";
 import { language } from "src/lang";
 import type { ChatTokenizer } from "src/ts/tokenizer";
 import { get } from "svelte/store";
-import { DataBase } from "src/ts/storage/database";
+import { DataBase } from "src/ts/storage/database.svelte";
 
 const maxRecentChatQuery = 4;
 export async function hanuraiMemory(chats:OpenAIChat[],arg:{
diff --git a/src/ts/process/memory/hypav2.ts b/src/ts/process/memory/hypav2.ts
index c7295267..c8a91511 100644
--- a/src/ts/process/memory/hypav2.ts
+++ b/src/ts/process/memory/hypav2.ts
@@ -1,4 +1,4 @@
-import { DataBase, type Chat, type character, type groupChat } from "src/ts/storage/database";
+import { DataBase, type Chat, type character, type groupChat } from "src/ts/storage/database.svelte";
 import type { OpenAIChat } from "..";
 import type { ChatTokenizer } from "src/ts/tokenizer";
 import { get } from "svelte/store";
diff --git a/src/ts/process/memory/supaMemory.ts b/src/ts/process/memory/supaMemory.ts
index a890a220..09fcfc4e 100644
--- a/src/ts/process/memory/supaMemory.ts
+++ b/src/ts/process/memory/supaMemory.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import type { OpenAIChat } from "..";
-import { DataBase, type Chat, type character, type groupChat } from "../../storage/database";
+import { DataBase, type Chat, type character, type groupChat } from "../../storage/database.svelte";
 import { tokenize, type ChatTokenizer } from "../../tokenizer";
 import { requestChatData } from "../request";
 import { HypaProcesser } from "./hypamemory";
diff --git a/src/ts/process/models/local.ts b/src/ts/process/models/local.ts
index 5342ef2d..44bf2583 100644
--- a/src/ts/process/models/local.ts
+++ b/src/ts/process/models/local.ts
@@ -5,7 +5,7 @@ import * as path from "@tauri-apps/api/path";
 import { exists, readTextFile } from "@tauri-apps/plugin-fs";
 import { alertClear, alertError, alertMd, alertWait } from "src/ts/alert";
 import { get } from "svelte/store";
-import { DataBase } from "src/ts/storage/database";
+import { DataBase } from "src/ts/storage/database.svelte";
 let serverRunning = false;
 
 export function checkLocalModel():Promise<string>{
diff --git a/src/ts/process/models/modelString.ts b/src/ts/process/models/modelString.ts
index 284c7997..9e003621 100644
--- a/src/ts/process/models/modelString.ts
+++ b/src/ts/process/models/modelString.ts
@@ -1,4 +1,4 @@
-import { DataBase } from "src/ts/storage/database";
+import { DataBase } from "src/ts/storage/database.svelte";
 import { get } from "svelte/store";
 
 export function getGenerationModelString(){
diff --git a/src/ts/process/models/nai.ts b/src/ts/process/models/nai.ts
index 7eaa117d..51e113d1 100644
--- a/src/ts/process/models/nai.ts
+++ b/src/ts/process/models/nai.ts
@@ -1,4 +1,4 @@
-import { DataBase, setDatabase } from "src/ts/storage/database"
+import { DataBase, setDatabase } from "src/ts/storage/database.svelte"
 import type { OpenAIChat } from ".."
 import { get } from "svelte/store"
 import { globalFetch } from "src/ts/storage/globalApi"
diff --git a/src/ts/process/modules.ts b/src/ts/process/modules.ts
index 553f1c27..afda7118 100644
--- a/src/ts/process/modules.ts
+++ b/src/ts/process/modules.ts
@@ -1,6 +1,6 @@
 import { language } from "src/lang"
 import { alertConfirm, alertError, alertModuleSelect, alertNormal, alertStore } from "../alert"
-import { DataBase, getCurrentCharacter, getCurrentChat, setCurrentCharacter, setDatabase, type customscript, type loreBook, type triggerscript } from "../storage/database"
+import { DataBase, getCurrentCharacter, getCurrentChat, setCurrentCharacter, setDatabase, type customscript, type loreBook, type triggerscript } from "../storage/database.svelte"
 import { AppendableBuffer, downloadFile, isNodeServer, isTauri, readImage, saveAsset } from "../storage/globalApi"
 import { get } from "svelte/store"
 import { selectSingleFile, sleep } from "../util"
diff --git a/src/ts/process/prompt.ts b/src/ts/process/prompt.ts
index 84614498..5c91e7b3 100644
--- a/src/ts/process/prompt.ts
+++ b/src/ts/process/prompt.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import { tokenizeAccurate } from "../tokenizer";
-import { DataBase, presetTemplate, setDatabase, type Database } from "../storage/database";
+import { DataBase, presetTemplate, setDatabase, type Database } from "../storage/database.svelte";
 import { alertError, alertNormal } from "../alert";
 import type { OobaChatCompletionRequestParams } from "../model/ooba";
 
diff --git a/src/ts/process/request.ts b/src/ts/process/request.ts
index 1e052153..6010c90d 100644
--- a/src/ts/process/request.ts
+++ b/src/ts/process/request.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import type { MultiModal, OpenAIChat, OpenAIChatFull } from ".";
-import { DataBase, type character } from "../storage/database";
+import { DataBase, type character } from "../storage/database.svelte";
 import { pluginProcess } from "../plugins/plugins";
 import { language } from "../../lang";
 import { stringlizeAINChat, stringlizeChat, getStopStrings, unstringlizeAIN, unstringlizeChat } from "./stringlize";
diff --git a/src/ts/process/scripts.ts b/src/ts/process/scripts.ts
index 7e90b044..dc31a8a3 100644
--- a/src/ts/process/scripts.ts
+++ b/src/ts/process/scripts.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import { CharEmotion, selectedCharID } from "../stores";
-import { DataBase, setDatabase, type character, type customscript, type groupChat, type Database } from "../storage/database";
+import { DataBase, setDatabase, type character, type customscript, type groupChat, type Database } from "../storage/database.svelte";
 import { downloadFile } from "../storage/globalApi";
 import { alertError, alertNormal } from "../alert";
 import { language } from "src/lang";
diff --git a/src/ts/process/stableDiff.ts b/src/ts/process/stableDiff.ts
index 87e4120c..bd6ea5b4 100644
--- a/src/ts/process/stableDiff.ts
+++ b/src/ts/process/stableDiff.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { DataBase, type character } from "../storage/database"
+import { DataBase, type character } from "../storage/database.svelte"
 import { requestChatData } from "./request"
 import { alertError } from "../alert"
 import { globalFetch, readImage } from "../storage/globalApi"
diff --git a/src/ts/process/stringlize.ts b/src/ts/process/stringlize.ts
index ff5d7ac6..e9301cef 100644
--- a/src/ts/process/stringlize.ts
+++ b/src/ts/process/stringlize.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import type { OpenAIChat } from ".";
-import { DataBase } from "../storage/database";
+import { DataBase } from "../storage/database.svelte";
 import { getUserName } from "../util";
 
 export function multiChatReplacer(){
diff --git a/src/ts/process/templates/chatTemplate.ts b/src/ts/process/templates/chatTemplate.ts
index 736c3d58..7a7b1742 100644
--- a/src/ts/process/templates/chatTemplate.ts
+++ b/src/ts/process/templates/chatTemplate.ts
@@ -1,7 +1,7 @@
 import { Template } from '@huggingface/jinja';
 import type { OpenAIChat } from '..';
 import { get } from 'svelte/store';
-import { DataBase, getCurrentCharacter } from 'src/ts/storage/database';
+import { DataBase, getCurrentCharacter } from 'src/ts/storage/database.svelte';
 import { getUserName } from 'src/ts/util';
 
 export const chatTemplates = {
diff --git a/src/ts/process/templates/getRecomended.ts b/src/ts/process/templates/getRecomended.ts
index 7be362b1..137ffffc 100644
--- a/src/ts/process/templates/getRecomended.ts
+++ b/src/ts/process/templates/getRecomended.ts
@@ -1,4 +1,4 @@
-import { DataBase, setPreset, type botPreset, setDatabase } from "src/ts/storage/database";
+import { DataBase, setPreset, type botPreset, setDatabase } from "src/ts/storage/database.svelte";
 import { defaultAutoSuggestPrefixOoba, defaultAutoSuggestPrompt, defaultAutoSuggestPromptOoba } from "src/ts/storage/defaultPrompts";
 import { get } from "svelte/store";
 import { prebuiltNAIpresets, prebuiltPresets } from "./templates";
diff --git a/src/ts/process/templates/jsonSchema.ts b/src/ts/process/templates/jsonSchema.ts
index 1b162640..b397810a 100644
--- a/src/ts/process/templates/jsonSchema.ts
+++ b/src/ts/process/templates/jsonSchema.ts
@@ -1,5 +1,5 @@
 import { risuChatParser } from "src/ts/parser"
-import { DataBase } from "src/ts/storage/database"
+import { DataBase } from "src/ts/storage/database.svelte"
 import { get } from "svelte/store"
 
 export function convertInterfaceToSchema(int:string){
diff --git a/src/ts/process/templates/templateCheck.ts b/src/ts/process/templates/templateCheck.ts
index 038e9f8a..0da7a2d3 100644
--- a/src/ts/process/templates/templateCheck.ts
+++ b/src/ts/process/templates/templateCheck.ts
@@ -1,4 +1,4 @@
-import type { Database } from 'src/ts/storage/database'
+import type { Database } from 'src/ts/storage/database.svelte'
 
 export function templateCheck(db:Database){
 
diff --git a/src/ts/process/templates/templates.ts b/src/ts/process/templates/templates.ts
index 9521f473..e5d89cc1 100644
--- a/src/ts/process/templates/templates.ts
+++ b/src/ts/process/templates/templates.ts
@@ -1,4 +1,4 @@
-import type { botPreset } from "../../storage/database";
+import type { botPreset } from "../../storage/database.svelte";
 import type { NAISettings } from "../models/nai";
 
 
diff --git a/src/ts/process/triggers.ts b/src/ts/process/triggers.ts
index 06f33b17..157dfc98 100644
--- a/src/ts/process/triggers.ts
+++ b/src/ts/process/triggers.ts
@@ -1,5 +1,5 @@
 import { parseChatML, risuChatParser } from "../parser";
-import { DataBase, getCurrentCharacter, getCurrentChat, type Chat, type character } from "../storage/database";
+import { DataBase, getCurrentCharacter, getCurrentChat, type Chat, type character } from "../storage/database.svelte";
 import { tokenize } from "../tokenizer";
 import { getModuleTriggers } from "./modules";
 import { get } from "svelte/store";
diff --git a/src/ts/process/tts.ts b/src/ts/process/tts.ts
index 274b06a0..71ab805f 100644
--- a/src/ts/process/tts.ts
+++ b/src/ts/process/tts.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store";
 import { alertError } from "../alert";
-import { DataBase, getCurrentCharacter, type character } from "../storage/database";
+import { DataBase, getCurrentCharacter, type character } from "../storage/database.svelte";
 import { runTranslator, translateVox } from "../translator/translator";
 import { globalFetch, loadAsset } from "../storage/globalApi";
 import { language } from "src/lang";
diff --git a/src/ts/realm.ts b/src/ts/realm.ts
index 2eacfd4b..e781e7b7 100644
--- a/src/ts/realm.ts
+++ b/src/ts/realm.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store";
 import { exportCharacterCard } from "./characterCards";
 import { VirtualWriter, isTauri, openURL } from "./storage/globalApi";
-import { DataBase, getCurrentCharacter, type character } from "./storage/database";
+import { DataBase, getCurrentCharacter, type character } from "./storage/database.svelte";
 import { alertStore } from "./alert";
 
 let pong = false;
diff --git a/src/ts/storage/accountStorage.ts b/src/ts/storage/accountStorage.ts
index 5ac66973..2397a67b 100644
--- a/src/ts/storage/accountStorage.ts
+++ b/src/ts/storage/accountStorage.ts
@@ -1,5 +1,5 @@
 import { get, writable } from "svelte/store"
-import { DataBase } from "./database"
+import { DataBase } from "./database.svelte"
 import { hubURL } from "../characterCards"
 import localforage from "localforage"
 import { alertError, alertLogin, alertStore, alertWait } from "../alert"
diff --git a/src/ts/storage/autoStorage.ts b/src/ts/storage/autoStorage.ts
index 2c599b4d..ccb98aa7 100644
--- a/src/ts/storage/autoStorage.ts
+++ b/src/ts/storage/autoStorage.ts
@@ -4,7 +4,7 @@ import { NodeStorage } from "./nodeStorage"
 import { OpfsStorage } from "./opfsStorage"
 import { alertInput, alertSelect, alertStore } from "../alert"
 import { get } from "svelte/store"
-import { DataBase, type Database } from "./database"
+import { DataBase, type Database } from "./database.svelte"
 import { AccountStorage } from "./accountStorage"
 import { decodeRisuSave, encodeRisuSave } from "./risuSave";
 import { language } from "src/lang"
diff --git a/src/ts/storage/database.ts b/src/ts/storage/database.svelte.ts
similarity index 98%
rename from src/ts/storage/database.ts
rename to src/ts/storage/database.svelte.ts
index e7b900fb..fb1d71a2 100644
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.svelte.ts
@@ -1,8 +1,3 @@
-export const DataBase = writable({} as any as Database)
-export const loadedStore = writable(false)
-export let appVer = "137.1.0"
-export let webAppSubVer = ''
-
 import { get, writable } from 'svelte/store';
 import { checkNullish, decryptBuffer, encryptBuffer, selectSingleFile } from '../util';
 import { changeLanguage, language } from '../../lang';
@@ -17,6 +12,18 @@ import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
 import type { PromptItem, PromptSettings } from '../process/prompt';
 import type { OobaChatCompletionRequestParams } from '../model/ooba';
 
+export const DataBase = writable({} as any as Database)
+export const DBState = $state({
+    db: get(DataBase)
+})
+export const loadedStore = writable(false)
+export let appVer = "137.1.0"
+export let webAppSubVer = ''
+
+DataBase.subscribe(data => {
+    DBState.db = data
+})
+
 export function setDatabase(data:Database){
     if(checkNullish(data.characters)){
         data.characters = []
@@ -954,7 +961,7 @@ export interface loreSettings{
 }
 
 
-export interface groupChat{
+export interface groupChat{ 
     type: 'group'
     image?:string
     firstMessage:string
@@ -992,6 +999,30 @@ export interface groupChat{
     lowLevelAccess?:boolean
     hideChatIcon?:boolean
     lastInteraction?:number
+
+    //lazy hack for typechecking
+    voicevoxConfig?:any
+    ttsSpeech?:string
+    naittsConfig?:any
+    oaiVoice?:string
+    hfTTS?: any
+    vits?: OnnxModelFiles
+    gptSoVitsConfig?:any
+    fishSpeechConfig?:any
+    ttsReadOnlyQuoted?:boolean
+    exampleMessage?:string
+    systemPrompt?:string
+    replaceGlobalNote?:string
+    additionalText?:string
+    personality?:string
+    scenario?:string
+    translatorNote?:string
+    additionalData?: any
+    depth_prompt?: { depth: number, prompt: string }
+    additionalAssets?:[string, string, string][]
+    utilityBot?:boolean
+    license?:string
+    realmId:string
 }
 
 export interface botPreset{
diff --git a/src/ts/storage/exportAsDataset.ts b/src/ts/storage/exportAsDataset.ts
index fbff98b7..f157eb6b 100644
--- a/src/ts/storage/exportAsDataset.ts
+++ b/src/ts/storage/exportAsDataset.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store";
-import { DataBase } from "./database";
+import { DataBase } from "./database.svelte";
 import { downloadFile } from "./globalApi";
 import { alertNormal } from "../alert";
 import { language } from "src/lang";
diff --git a/src/ts/storage/globalApi.ts b/src/ts/storage/globalApi.ts
index 07cf9243..f16483bf 100644
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -13,7 +13,7 @@ import { v4 as uuidv4, v4 } from 'uuid';
 import { appDataDir, join } from "@tauri-apps/api/path";
 import { get } from "svelte/store";
 import {open} from '@tauri-apps/plugin-shell'
-import { DataBase, loadedStore, setDatabase, type Database, defaultSdDataFunc } from "./database";
+import { DataBase, loadedStore, setDatabase, type Database, defaultSdDataFunc } from "./database.svelte";
 import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { checkRisuUpdate } from "../update";
 import { MobileGUI, botMakerMode, selectedCharID } from "../stores";
diff --git a/src/ts/storage/persistant.ts b/src/ts/storage/persistant.ts
index 9cc5fead..3f8b7f06 100644
--- a/src/ts/storage/persistant.ts
+++ b/src/ts/storage/persistant.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store";
-import { DataBase } from "./database";
+import { DataBase } from "./database.svelte";
 import { alertNormal } from "../alert";
 import { language } from "src/lang";
 import { isNodeServer, isTauri } from "./globalApi";
diff --git a/src/ts/stores.ts b/src/ts/stores.ts
index 5e6ce5f7..3493df7c 100644
--- a/src/ts/stores.ts
+++ b/src/ts/stores.ts
@@ -1,5 +1,5 @@
 import { get, writable, type Writable } from "svelte/store";
-import { DataBase, getCurrentCharacter, type Chat, type character, type groupChat } from "./storage/database";
+import { DataBase, getCurrentCharacter, type Chat, type character, type groupChat } from "./storage/database.svelte";
 import { isEqual } from "lodash";
 import type { simpleCharacterArgument } from "./parser";
 import { getUserIcon, getUserIconProtrait, getUserName, sleep } from "./util";
diff --git a/src/ts/sync/multiuser.ts b/src/ts/sync/multiuser.ts
index d074f855..e0775164 100644
--- a/src/ts/sync/multiuser.ts
+++ b/src/ts/sync/multiuser.ts
@@ -1,7 +1,7 @@
 import { v4 } from 'uuid';
 import { alertError, alertInput, alertNormal, alertStore, alertWait } from '../alert';
 import { get, writable } from 'svelte/store';
-import { DataBase, setDatabase, type character, saveImage, type Chat, getCurrentChat, setCurrentChat } from '../storage/database';
+import { DataBase, setDatabase, type character, saveImage, type Chat, getCurrentChat, setCurrentChat } from '../storage/database.svelte';
 import { selectedCharID } from '../stores';
 import { findCharacterIndexbyId, sleep } from '../util';
 import type { DataConnection, Peer } from 'peerjs';
diff --git a/src/ts/tokenizer.ts b/src/ts/tokenizer.ts
index 696112aa..2e3d8f41 100644
--- a/src/ts/tokenizer.ts
+++ b/src/ts/tokenizer.ts
@@ -1,6 +1,6 @@
 import type { Tiktoken } from "@dqbd/tiktoken";
 import type { Tokenizer } from "@mlc-ai/web-tokenizers";
-import { DataBase, type groupChat, type character, type Chat, getCurrentCharacter } from "./storage/database";
+import { DataBase, type groupChat, type character, type Chat, getCurrentCharacter } from "./storage/database.svelte";
 import { get } from "svelte/store";
 import type { MultiModal, OpenAIChat } from "./process";
 import { supportsInlayImage } from "./process/files/image";
diff --git a/src/ts/translator/translator.ts b/src/ts/translator/translator.ts
index b0b13b20..0ab93f00 100644
--- a/src/ts/translator/translator.ts
+++ b/src/ts/translator/translator.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { translatorPlugin } from "../plugins/plugins"
-import { DataBase, type character, type customscript, type groupChat } from "../storage/database"
+import { DataBase, type character, type customscript, type groupChat } from "../storage/database.svelte"
 import { globalFetch, isTauri } from "../storage/globalApi"
 import { alertError } from "../alert"
 import { requestChatData } from "../process/request"
diff --git a/src/ts/util.ts b/src/ts/util.ts
index fe5b1e5e..12498709 100644
--- a/src/ts/util.ts
+++ b/src/ts/util.ts
@@ -1,6 +1,6 @@
 import { get, writable, type Writable } from "svelte/store"
-import type { Database, Message } from "./storage/database"
-import { DataBase } from "./storage/database"
+import type { Database, Message } from "./storage/database.svelte"
+import { DataBase } from "./storage/database.svelte"
 import { selectedCharID } from "./stores"
 import {open} from '@tauri-apps/plugin-dialog'
 import { readFile } from "@tauri-apps/plugin-fs"