Merge remote-tracking branch 'upstream/main'

2023-07-02 17:38:03 +08:00
parent 114f1627be ca1a0afe99
commit d0a0d177d0
34 changed files with 564 additions and 4550 deletions
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/logo.png" />
+    <meta name="description" content="An AI frontend for both light and core users.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RisuAI</title>
  </head>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -16,7 +16,6 @@
  "dependencies": {
    "@adobe/css-tools": "4.3.0-beta.2",
    "@dqbd/tiktoken": "^1.0.4",
-    "@msgpack/msgpack": "3.0.0-beta2",
    "@tauri-apps/api": "1.3.0",
    "@xenova/transformers": "^2.1.1",
    "blueimp-md5": "^2.19.0",
@@ -27,6 +26,7 @@
    "dompurify": "^3.0.1",
    "exifr": "^7.1.3",
    "express": "^4.18.2",
+    "fflate": "^0.8.0",
    "gpt-3-encoder": "^1.1.4",
    "gpt3-tokenizer": "^1.1.5",
    "isomorphic-dompurify": "^1.2.0",
@@ -34,8 +34,8 @@
    "lodash": "^4.17.21",
    "lucide-svelte": "^0.130.0",
    "mobile-drag-drop": "3.0.0-rc.0",
+    "msgpackr": "^1.9.5",
    "node-html-parser": "^6.1.5",
-    "pako": "^2.1.0",
    "png-chunk-text": "^1.0.0",
    "png-chunks-encode": "^1.0.0",
    "png-chunks-extract": "^1.0.0",
@@ -58,7 +58,6 @@
    "@types/lodash.clonedeep": "^4.5.7",
    "@types/lodash.isequal": "^4.5.6",
    "@types/node": "^18.7.10",
-    "@types/pako": "^2.0.0",
    "@types/pngjs": "^6.0.1",
    "@types/showdown": "^2.0.0",
    "@types/uuid": "^9.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,9 +7,6 @@ dependencies:
  '@dqbd/tiktoken':
    specifier: ^1.0.4
    version: 1.0.4
-  '@msgpack/msgpack':
-    specifier: 3.0.0-beta2
-    version: 3.0.0-beta2
  '@tauri-apps/api':
    specifier: 1.3.0
    version: 1.3.0
@@ -40,6 +37,9 @@ dependencies:
  express:
    specifier: ^4.18.2
    version: 4.18.2
+  fflate:
+    specifier: ^0.8.0
+    version: 0.8.0
  gpt-3-encoder:
    specifier: ^1.1.4
    version: 1.1.4
@@ -61,12 +61,12 @@ dependencies:
  mobile-drag-drop:
    specifier: 3.0.0-rc.0
    version: 3.0.0-rc.0
+  msgpackr:
+    specifier: ^1.9.5
+    version: 1.9.5
  node-html-parser:
    specifier: ^6.1.5
    version: 6.1.5
-  pako:
-    specifier: ^2.1.0
-    version: 2.1.0
  png-chunk-text:
    specifier: ^1.0.0
    version: 1.0.0
@@ -129,9 +129,6 @@ devDependencies:
  '@types/node':
    specifier: ^18.7.10
    version: 18.15.11
-  '@types/pako':
-    specifier: ^2.0.0
-    version: 2.0.0
  '@types/pngjs':
    specifier: ^6.0.1
    version: 6.0.1
@@ -405,10 +402,53 @@ packages:
      '@jridgewell/sourcemap-codec': 1.4.14
    dev: true

-  /@msgpack/msgpack@3.0.0-beta2:
-    resolution: {integrity: sha512-y+l1PNV0XDyY8sM3YtuMLK5vE3/hkfId+Do8pLo/OPxfxuFAUwcGz3oiiUuV46/aBpwTzZ+mRWVMtlSKbradhw==}
-    engines: {node: '>= 14'}
+  /@msgpackr-extract/msgpackr-extract-darwin-arm64@3.0.2:
+    resolution: {integrity: sha512-9bfjwDxIDWmmOKusUcqdS4Rw+SETlp9Dy39Xui9BEGEk19dDwH0jhipwFzEff/pFg95NKymc6TOTbRKcWeRqyQ==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
    dev: false
+    optional: true
+
+  /@msgpackr-extract/msgpackr-extract-darwin-x64@3.0.2:
+    resolution: {integrity: sha512-lwriRAHm1Yg4iDf23Oxm9n/t5Zpw1lVnxYU3HnJPTi2lJRkKTrps1KVgvL6m7WvmhYVt/FIsssWay+k45QHeuw==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@msgpackr-extract/msgpackr-extract-linux-arm64@3.0.2:
+    resolution: {integrity: sha512-FU20Bo66/f7He9Fp9sP2zaJ1Q8L9uLPZQDub/WlUip78JlPeMbVL8546HbZfcW9LNciEXc8d+tThSJjSC+tmsg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@msgpackr-extract/msgpackr-extract-linux-arm@3.0.2:
+    resolution: {integrity: sha512-MOI9Dlfrpi2Cuc7i5dXdxPbFIgbDBGgKR5F2yWEa6FVEtSWncfVNKW5AKjImAQ6CZlBK9tympdsZJ2xThBiWWA==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@msgpackr-extract/msgpackr-extract-linux-x64@3.0.2:
+    resolution: {integrity: sha512-gsWNDCklNy7Ajk0vBBf9jEx04RUxuDQfBse918Ww+Qb9HCPoGzS+XJTLe96iN3BVK7grnLiYghP/M4L8VsaHeA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@msgpackr-extract/msgpackr-extract-win32-x64@3.0.2:
+    resolution: {integrity: sha512-O+6Gs8UeDbyFpbSh2CPEz/UOrrdWPTBYNblZK5CxxLisYt4kGX3Sc+czffFonyjiGSq3jWLwJS/CCJc7tBr4sQ==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true

  /@nodelib/fs.scandir@2.1.5:
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -784,10 +824,6 @@ packages:
  /@types/node@18.15.11:
    resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}

-  /@types/pako@2.0.0:
-    resolution: {integrity: sha512-10+iaz93qR5WYxTo+PMifD5TSxiOtdRaxBf7INGGXMQgTCu8Z/7GYWYFUOS3q/G0nE5boj1r4FEB+WSy7s5gbA==}
-    dev: true
-
  /@types/pngjs@6.0.1:
    resolution: {integrity: sha512-J39njbdW1U/6YyVXvC9+1iflZghP8jgRf2ndYghdJb5xL49LYDB+1EuAxfbuJ2IBbWIL3AjHPQhgaTxT3YaYeg==}
    dependencies:
@@ -1505,6 +1541,10 @@ packages:
      reusify: 1.0.4
    dev: true

+  /fflate@0.8.0:
+    resolution: {integrity: sha512-FAdS4qMuFjsJj6XHbBaZeXOgaypXp8iw/Tpyuq/w3XA41jjLHT8NPA+n7czH/DDhdncq0nAyDZmPeWXh2qmdIg==}
+    dev: false
+
  /fill-range@7.0.1:
    resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
    engines: {node: '>=8'}
@@ -2079,6 +2119,28 @@ packages:
    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
    dev: false

+  /msgpackr-extract@3.0.2:
+    resolution: {integrity: sha512-SdzXp4kD/Qf8agZ9+iTu6eql0m3kWm1A2y1hkpTeVNENutaB0BwHlSvAIaMxwntmRUAUjon2V4L8Z/njd0Ct8A==}
+    hasBin: true
+    requiresBuild: true
+    dependencies:
+      node-gyp-build-optional-packages: 5.0.7
+    optionalDependencies:
+      '@msgpackr-extract/msgpackr-extract-darwin-arm64': 3.0.2
+      '@msgpackr-extract/msgpackr-extract-darwin-x64': 3.0.2
+      '@msgpackr-extract/msgpackr-extract-linux-arm': 3.0.2
+      '@msgpackr-extract/msgpackr-extract-linux-arm64': 3.0.2
+      '@msgpackr-extract/msgpackr-extract-linux-x64': 3.0.2
+      '@msgpackr-extract/msgpackr-extract-win32-x64': 3.0.2
+    dev: false
+    optional: true
+
+  /msgpackr@1.9.5:
+    resolution: {integrity: sha512-/IJ3cFSN6Ci3eG2wLhbFEL6GT63yEaoN/R5My2QkV6zro+OJaVRLPlwvxY7EtHYSmDlQpk8stvOQTL2qJFkDRg==}
+    optionalDependencies:
+      msgpackr-extract: 3.0.2
+    dev: false
+
  /mz@2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
    dependencies:
@@ -2113,6 +2175,12 @@ packages:
    resolution: {integrity: sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==}
    dev: false

+  /node-gyp-build-optional-packages@5.0.7:
+    resolution: {integrity: sha512-YlCCc6Wffkx0kHkmam79GKvDQ6x+QZkMjFGrIMxgFNILFvGSbCp2fCBC55pGTT9gVaz8Na5CLmxt/urtzRv36w==}
+    hasBin: true
+    dev: false
+    optional: true
+
  /node-html-parser@6.1.5:
    resolution: {integrity: sha512-fAaM511feX++/Chnhe475a0NHD8M7AxDInsqQpz6x63GRF7xYNdS8Vo5dKsIVPgsOvG7eioRRTZQnWBrhDHBSg==}
    dependencies:
@@ -2244,10 +2312,6 @@ packages:
      p-finally: 1.0.0
    dev: true

-  /pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
-    dev: false
-
  /parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -3182,9 +3182,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"

 [[package]]
 name = "tokio"
-version = "1.28.1"
+version = "1.28.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0aa32867d44e6f2ce3385e89dceb990188b8bb0fb25b0cf576647a6f98ac5105"
+checksum = "94d7b1cfd2aa4011f2de74c2c4c63665e27a71006b0a192dcd2710272e73dfa2"
 dependencies = [
 "autocfg",
 "bytes",
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
  },
  "package": {
    "productName": "RisuAI",
-    "version": "1.27.1"
+    "version": "1.27.4"
  },
  "tauri": {
    "allowlist": {
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -304,6 +304,8 @@ export const languageChinese = {
    tags: "标签",
    copied: "已复制",
    useChatCopy: "使用聊天复制",
+    useChatSticker: "使用聊天贴纸",
+    useAdditionalAssetsPreview: "使用附加资源预览",
    autoTranslateInput: "使用自动翻译输入",
    enterMessageForTranslateToEnglish: "输入要翻译为英语的消息",
    recent: '最新',
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -308,6 +308,8 @@ export const languageEnglish = {
    backgroundHTML: "Background Embedding",
    copied: "Copied",
    useChatCopy: "Use Chat Message Copy",
+    useChatSticker: "Use Chat Sticker",
+    useAdditionalAssetsPreview: "Use Additional Assets Preview",
    autoTranslateInput: "Auto Translate Input",
    enterMessageForTranslateToEnglish: "Enter Message for Translate to English",
    recent: 'Recent',
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -280,6 +280,8 @@ export const languageKorean = {
    backgroundHTML: "백그라운드 임베딩",
    copied: "복사됨",
    useChatCopy: "채팅 메시지 복사 사용",
+    useChatSticker: "채팅 스티커 사용",
+    useAdditionalAssetsPreview: "추가 에셋 미리보기 사용",
    autoTranslateInput: "입력 자동 번역",
    enterMessageForTranslateToEnglish: "영어로 번역할 메시지를 입력해주세요",
    imageCompression: "이미지 압축",
--- a/src/lib/ChatScreens/AssetInput.svelte
+++ b/src/lib/ChatScreens/AssetInput.svelte
@@ -0,0 +1,75 @@
+<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 { getFileSrc, saveAsset } from "src/ts/storage/globalApi";
+    import { selectMultipleFile } from "src/ts/util";
+    export let currentCharacter:character|groupChat;
+    export let onSelect:(additionalAsset:[string,string,string])=>void;
+    let assetFileExtensions:string[] = []
+    let assetFilePath:string[] = []
+
+    $:{
+        if(currentCharacter.type ==='character'){
+            if(currentCharacter.additionalAssets){
+                for(let i = 0; i < currentCharacter.additionalAssets.length; i++){
+                    // console.log('check content type ...', currentCharacter.additionalAssets[i][0], currentCharacter.additionalAssets[i][1]);
+                    if(currentCharacter.additionalAssets[i].length > 2 && currentCharacter.additionalAssets[i][2]) {
+                        assetFileExtensions[i] = currentCharacter.additionalAssets[i][2]
+                    } else {
+                        assetFileExtensions[i] = currentCharacter.additionalAssets[i][1].split('.').pop()
+                    }
+                    getFileSrc(currentCharacter.additionalAssets[i][1]).then((filePath) => {
+                        assetFilePath[i] = filePath
+                    })
+                }
+            }
+        }
+    }
+</script>
+{#if currentCharacter.type ==='character'}
+    <button class="hover:text-green-500 bg-gray-500 flex justify-center items-center w-16 h-16 m-1 rounded-md" on:click={async () => {
+        if(currentCharacter.type === 'character'){
+            const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif'])
+            currentCharacter.additionalAssets = currentCharacter.additionalAssets ?? []
+            if(!da){
+                return
+            }
+            for(const f of da){
+                console.log(f)
+                const img = f.data
+                const name = f.name
+                const extension = name.split('.').pop().toLowerCase()
+                const imgp = await saveAsset(img,'',extension)
+                currentCharacter.additionalAssets.push([name, imgp, extension])
+                currentCharacter = currentCharacter
+            }
+            const db = get(DataBase);
+            setDatabase(db)
+        }
+    }}>
+        <PlusIcon />
+    </button>
+    {#if currentCharacter.additionalAssets}
+        {#each currentCharacter.additionalAssets as additionalAsset, i}
+                <button on:click={()=>{
+                    onSelect(additionalAsset)
+                }}>
+                    {#if assetFilePath[i]}
+                        {#if assetFileExtensions[i] === 'mp4'}
+                            <!-- svelte-ignore a11y-media-has-caption -->
+                            <video class="w-16 h-16 m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
+                        {:else if assetFileExtensions[i] === 'mp3'}
+                            <div class='w-16 h-16 m-1 rounded-md bg-slate-500 flex flex-col justify-center items-center'>
+                                <FileAudioIcon/>
+                                <div class='w-16 px-1 text-ellipsis whitespace-nowrap overflow-hidden'>{additionalAsset[0]}</div>
+                            </div>
+                            <!-- <audio controls class="w-16 h-16 m-1 rounded-md"><source src={assetPath} type="audio/mpeg"></audio> -->
+                        {:else}
+                        <img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={additionalAsset[0]}/>
+                        {/if}
+                    {/if}
+                </button>
+        {/each}
+    {/if}
+{/if}
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -8,6 +8,7 @@
    import { selectedCharID } from "../../ts/stores";
    import { translate } from "../../ts/translator/translator";
    import { replacePlaceholders } from "../../ts/util";
+    
    export let message = ''
    export let name = ''
    export let isLastMemory:boolean
@@ -17,6 +18,7 @@
    export let onReroll = () => {}
    export let unReroll = () => {}
    export let character:character|groupChat|null = null
+    let md:string
    let translating = false
    let editMode = false
    let statusMessage:string = ''
@@ -24,7 +26,8 @@

    let msgDisplay = ''
    let msgTranslated = ''
-    let translated = false;
+    let translated = false
+
    async function rm(){
        const rm = $DataBase.askRemoval ? await alertConfirm(language.removeChat) : true
        if(rm){
@@ -53,7 +56,7 @@
        $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
    }

-    async function displaya(message:string){
+    async function displaya(message:string, isStreaming:boolean = false){
        if($DataBase.autoTranslate && $DataBase.translator !== ''){
            if(msgTranslated==='')
                msgDisplay = replacePlaceholders(message, name)
@@ -64,6 +67,12 @@
        else{
            msgDisplay = replacePlaceholders(message, name)
        }
+
+        if(!md || !isStreaming || isStreaming && idx === $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length - 1) {
+            ParseMarkdown(msgDisplay, character, 'normal').then(mdNew=>{
+                md = mdNew
+            })
+        }
    }

    const setStatusMessage = (message:string, timeout:number = 0)=>{
@@ -74,7 +83,7 @@
        }, timeout)
    }

-    $: displaya(message)
+    $: displaya(message, $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].isStreaming)
 </script>
 <div class="flex max-w-full justify-center" class:bgc={isLastMemory}>
    <div class="text-neutral-200 mt-1 ml-4 mr-4 mb-1 p-2 bg-transparent flex-grow border-t-gray-900 border-opacity-30 border-transparent flexium items-start max-w-full" >
@@ -161,8 +170,7 @@
            </div>
            {#if editMode}
                <AutoresizeArea bind:value={message} />
-            {:else}
-                {#await ParseMarkdown(msgDisplay, character) then md} 
+            {:else if md}
                <!-- svelte-ignore a11y-click-events-have-key-events -->
                <span class="text chat chattext prose prose-invert minw-0" on:click={() => {
                    if($DataBase.clickToEdit && idx > -1){
@@ -173,7 +181,6 @@
                    style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
                    style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
                >{@html md}</span>
-                {/await}
            {/if}
        </span>

--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/src/lib/ChatScreens/DefaultChatScreen.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
 	import Suggestion from './Suggestion.svelte';
-    import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, MicOffIcon, PowerIcon, RefreshCcwIcon, ReplyIcon, Send } from "lucide-svelte";
+    import { DatabaseIcon, DicesIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, RefreshCcwIcon, ReplyIcon, Send } from "lucide-svelte";
    import { selectedCharID } from "../../ts/stores";
    import Chat from "./Chat.svelte";
-    import { DataBase, type Message } from "../../ts/storage/database";
+    import { DataBase, type Message, type character, type groupChat } from "../../ts/storage/database";
    import { getCharImage } from "../../ts/characters";
    import { doingChat, sendChat } from "../../ts/process/index";
    import { findCharacterbyId, messageForm, sleep } from "../../ts/util";
@@ -17,6 +17,7 @@
    import { stopTTS } from "src/ts/process/tts";
    import MainMenu from '../UI/MainMenu.svelte';
    import Help from '../Others/Help.svelte';
+    import AssetInput from './AssetInput.svelte';

    let messageInput:string = ''
    let messageInputTranslate:string = ''
@@ -28,6 +29,8 @@
    let rerollid = -1
    let lastCharId = -1
    let doingChatInputTranslate = false
+    let currentCharacter:character|groupChat = $DataBase.characters[$selectedCharID]
+    let toggleStickers:boolean = false

    async function send() {
        let selectedChar = $selectedCharID
@@ -218,6 +221,10 @@
            }
        })
    }
+
+    $: {
+        currentCharacter = $DataBase.characters[$selectedCharID]
+    }
 </script>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="w-full h-full" style={customStyle} on:click={() => {
@@ -234,6 +241,12 @@
            }
        }}>
            <div class="flex items-end mt-2 mb-2 w-full">
+                {#if $DataBase.useChatSticker && currentCharacter.type !== 'group'}
+                    <div on:click={()=>{toggleStickers = !toggleStickers}}
+                            class={"ml-4 bg-gray-500 flex justify-center items-center  w-12 h-12 rounded-md hover:bg-green-500 transition-colors "+(toggleStickers ? 'text-green-500':'text-white')}>
+                            <Laugh/>
+                    </div>    
+                {/if}
                <textarea class="text-neutral-200 p-2 min-w-0 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected overflow-y-hidden overflow-x-hidden max-w-full"
                    bind:value={messageInput}
                    bind:this={inputEle}
@@ -299,9 +312,27 @@
                </div>
            {/if}
            
+            {#if toggleStickers}
+                <div class="ml-4 flex flex-wrap">
+                    <AssetInput bind:currentCharacter={currentCharacter} onSelect={(additionalAsset)=>{
+                        let fileType = 'img'
+                        if(additionalAsset.length > 2 && additionalAsset[2]) {
+                            const fileExtension = additionalAsset[2]
+                            if(fileExtension === 'mp4' || fileExtension === 'webm')
+                                fileType = 'video'
+                            else if(fileExtension === 'mp3' || fileExtension === 'wav')
+                                fileType = 'audio'
+                        }
+                        messageInput += `<span class='notranslate' translate='no'>{{${fileType}::${additionalAsset[0]}}}</span> *${additionalAsset[0]} added*`
+                        updateInputSizeAll()
+                    }}/>
+                </div>    
+            {/if}
+
            {#if $DataBase.useAutoSuggestions}
                <Suggestion messageInput={(msg)=>messageInput=msg} {send}/>
            {/if}
+            
            {#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
                {#if chat.role === 'char'}
                    {#if $DataBase.characters[$selectedCharID].type !== 'group'}
--- a/src/lib/Setting/Pages/AdvancedSettings.svelte
+++ b/src/lib/Setting/Pages/AdvancedSettings.svelte
@@ -26,24 +26,11 @@
 <span class="text-neutral-200">{language.requestretrys}</span>
 <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" type="number" min={0} max="20" bind:value={$DataBase.requestRetrys}>

-<span class="text-neutral-200">Request Type</span>
-<select class="bg-transparent input-text text-gray-200 appearance-none text-sm mb-4" bind:value={$DataBase.requestmet}>
-    <option value="normal" class="bg-darkbg appearance-none">Normal</option>
-    <option value="proxy" class="bg-darkbg appearance-none">Proxy</option>
-    <option value="plain" class="bg-darkbg appearance-none">Plain Fetch</option>
-</select>
-
-{#if $DataBase.requestmet === 'proxy'}
-    <span class="text-neutral-200">Request Proxy URL</span>
-    <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected text-sm" bind:value={$DataBase.requestproxy}>
-{/if}
-{#if isTauri && $DataBase.requestmet === 'normal'}
 <span class="text-neutral-200">Request Lib</span>
 <select class="bg-transparent input-text text-gray-200 appearance-none text-sm" bind:value={$DataBase.requester}>
    <option value="new" class="bg-darkbg appearance-none">Reqwest</option>
    <option value="old" class="bg-darkbg appearance-none">Tauri</option>
 </select>
-{/if}

 <div class="flex items-center mt-4">
    <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}/>
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -3,7 +3,7 @@
    import { language } from "src/lang";
    import Help from "src/lib/Others/Help.svelte";
    import { DataBase } from "src/ts/storage/database";
-    import { customProviderStore, getCurrentPluginMax } from "src/ts/process/plugins";
+    import { customProviderStore, getCurrentPluginMax } from "src/ts/plugins/plugins";
    import { isTauri } from "src/ts/storage/globalApi";
    import { tokenize } from "src/ts/tokenizer";
    import ModelList from "src/lib/UI/ModelList.svelte";
--- a/src/lib/Setting/Pages/DisplaySettings.svelte
+++ b/src/lib/Setting/Pages/DisplaySettings.svelte
@@ -142,3 +142,14 @@
 <div class="flex items-center mt-2">
    <Check bind:check={$DataBase.useChatCopy} name={language.useChatCopy}/>
 </div>
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.useAdditionalAssetsPreview} name={language.useAdditionalAssetsPreview}/>
+</div>
+
+{#if $DataBase.useExperimental}
+    <div class="flex items-center mt-2">
+        <Check bind:check={$DataBase.useChatSticker} name={language.useChatSticker}/>
+        <Help key="experimental" name={language.useChatSticker}/>
+    </div>
+{/if}
--- a/src/lib/Setting/Pages/PluginSettings.svelte
+++ b/src/lib/Setting/Pages/PluginSettings.svelte
@@ -3,7 +3,7 @@
  import { language } from "src/lang";
  import { alertConfirm } from "src/ts/alert";
  import { DataBase } from "src/ts/storage/database";
-  import { importPlugin } from "src/ts/process/plugins";
+  import { importPlugin } from "src/ts/plugins/plugins";

 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.plugin}</h2>
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -1,8 +1,9 @@
 <script>
    import { alertConfirm, alertError } from "../../ts/alert";
    import { language } from "../../lang";
-    import { DataBase, changeToPreset, copyPreset, presetTemplate } from "../../ts/storage/database";
-    import { CopyIcon, EditIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
+    import { DataBase, changeToPreset, copyPreset, downloadPreset, importPreset, presetTemplate } from "../../ts/storage/database";
+    import { CopyIcon, DownloadIcon, EditIcon, FolderUpIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
+  import { cloneDeep } from "lodash";

    let editMode = false
    export let close = () => {}
@@ -41,6 +42,13 @@
                    }}>
                        <CopyIcon size={18}/>
                    </button>
+                    <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-2" on:click={(e) => {
+                        e.stopPropagation()
+                        downloadPreset(i)
+                    }}>
+
+                        <DownloadIcon size={18} />
+                    </button>
                    <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={async (e) => {
                        e.stopPropagation()
                        if($DataBase.botPresets.length === 1){
@@ -63,7 +71,7 @@
        <div class="flex mt-2 items-center">
            <button class="text-gray-500 hover:text-green-500 cursor-pointer mr-1" on:click={() => {
                let botPresets = $DataBase.botPresets
-                let newPreset = JSON.parse(JSON.stringify(presetTemplate))
+                let newPreset = cloneDeep(presetTemplate)
                newPreset.name = `New Preset`
                botPresets.push(newPreset)

@@ -71,6 +79,11 @@
            }}>
                <PlusIcon/>
            </button>
+            <button class="text-gray-500 hover:text-green-500 mr-2 cursor-pointer" on:click={() => {
+                importPreset()
+            }}>
+                <FolderUpIcon size={18}/>
+            </button>
            <button class="text-gray-500 hover:text-green-500 cursor-pointer" on:click={() => {
                editMode = !editMode
            }}>
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -16,7 +16,7 @@
    import RegexData from "./RegexData.svelte";
    import { exportChar, shareRisuHub } from "src/ts/characterCards";
    import { getElevenTTSVoices, getWebSpeechTTSVoices, getVOICEVOXVoices } from "src/ts/process/tts";
-    import { checkCharOrder } from "src/ts/storage/globalApi";
+    import { checkCharOrder, getFileSrc } from "src/ts/storage/globalApi";
    import { addGroupChar, rmCharFromGroup } from "src/ts/process/group";
  import HubUpload from "../UI/HubUpload.svelte";

@@ -95,6 +95,8 @@
        currentChar = currentChar
    })

+    let assetFileExtensions:string[] = []
+    let assetFilePath:string[] = []

    $: {
        if(database.characters[$selectedCharID].chaId === currentChar.data.chaId){
@@ -106,6 +108,20 @@
        emos = currentChar.data.emotionImages
        DataBase.set(database)
        loadTokenize(currentChar.data)
+
+        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]
+                    } else 
+                        assetFileExtensions[i] = currentChar.data.additionalAssets[i][1].split('.').pop()
+                    getFileSrc(currentChar.data.additionalAssets[i][1]).then((filePath) => {
+                        assetFilePath[i] = filePath
+                    })
+                }
+            }
+        }
    }

    onDestroy(unsub);
@@ -615,9 +631,10 @@
                            for(const f of da){
                                console.log(f)
                                const img = f.data
-                                const imgp = await saveAsset(img)
                                const name = f.name
-                                currentChar.data.additionalAssets.push([name, imgp])
+                                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
                            }
                        }
@@ -634,8 +651,19 @@
                {#each currentChar.data.additionalAssets as assets, i}
                    <tr>
                        <td class="font-medium truncate">
+                            {#if assetFilePath[i] && database.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>
+                                {:else if assetFileExtensions[i] === 'mp3'}
+                                    <audio controls class="mt-2 px-2 w-full h-16 m-1 rounded-md" loop><source src={assetFilePath[i]} type="audio/mpeg"></audio>
+                                {:else}
+                                    <img src={assetFilePath[i]} class="w-16 h-16 m-1 rounded-md" alt={assets[0]}/>
+                                {/if}
+                            {/if}
                            <input class="text-neutral-200 mt-2 mb-4 p-2 bg-transparent input-text focus:bg-selected w-full resize-none" bind:value={currentChar.data.additionalAssets[i][0]} placeholder="..." />
                        </td>
+                        
                        <th class="font-medium cursor-pointer w-10">
                            <button class="hover:text-green-500" on:click={() => {
                                if(currentChar.type === 'character'){
--- a/src/lib/UI/MainMenu.svelte
+++ b/src/lib/UI/MainMenu.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { appVer } from "src/ts/storage/database";
+  import { appVer, webAppSubVer } from "src/ts/storage/database";
  import GithubStars from "../Others/GithubStars.svelte";
  import Hub from "./Hub.svelte";
  import { sideBarStore } from "src/ts/stores";
  import { ArrowLeft } from "lucide-svelte";
-  import { openURL } from "src/ts/storage/globalApi";
+  import { isNodeServer, isTauri, openURL } from "src/ts/storage/globalApi";
  import { language } from "src/lang";
  import { getRisuHub } from "src/ts/characterCards";
  import RisuHubIcon from "./RisuHubIcon.svelte";
@@ -13,7 +13,11 @@
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
    {#if !openHub}
      <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
+      {#if (!isTauri) && (!isNodeServer)}
+        <h3 class="text-gray-500 mt-1">Version {appVer}{webAppSubVer}</h3>
+      {:else}
        <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
+      {/if}
      <GithubStars />
    {/if}
    <div class="w-full flex p-4 flex-col text-white max-w-4xl">
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -3,7 +3,7 @@ import { alertConfirm, alertError, alertMd, alertNormal, alertSelect, alertStore
 import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook } from "./storage/database"
 import { checkNullish, selectMultipleFile, selectSingleFile, sleep } from "./util"
 import { language } from "src/lang"
-import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpack";
+import { encode as encodeMsgpack, decode as decodeMsgpack } from "msgpackr";
 import { v4 as uuidv4 } from 'uuid';
 import exifr from 'exifr'
 import { PngMetadata } from "./exif"
@@ -132,7 +132,7 @@ export async function characterHubImport() {
            const url = new URL(location.href);
            url.searchParams.delete('charahub');
            window.history.pushState(null, '', url.toString());
-            const chara = await fetch("https://api.characterhub.org/api/characters/download", {
+            const chara = await fetch("https://api.chub.ai/api/characters/download", {
                method: "POST",
                body: JSON.stringify({
                    "format": "tavern",
@@ -329,7 +329,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array, mode?:'hub'|'
    let customScripts:customscript[] = []
    let utilityBot = false
    let sdData = defaultSdDataFunc()
-    let extAssets:[string,string][] = []
+    let extAssets:[string,string,string][] = []

    if(risuext){
        if(risuext.emotions){
@@ -350,8 +350,11 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array, mode?:'hub'|'
                    msg: `Loading... (Getting Assets ${i} / ${risuext.additionalAssets.length})`
                })
                await sleep(10)
-                const imgp = await saveAsset(mode === 'hub' ? (await getHubResources(risuext.additionalAssets[i][1])) :Buffer.from(risuext.additionalAssets[i][1], 'base64'))
-                extAssets.push([risuext.additionalAssets[i][0],imgp])
+                let fileName = ''
+                if(risuext.additionalAssets[i].length >= 3)
+                    fileName = risuext.additionalAssets[i][2]
+                const imgp = await saveAsset(mode === 'hub' ? (await getHubResources(risuext.additionalAssets[i][1])) :Buffer.from(risuext.additionalAssets[i][1], 'base64'), '', fileName)
+                extAssets.push([risuext.additionalAssets[i][0],imgp,fileName])
            }
        }
        bias = risuext.bias ?? bias
@@ -756,7 +759,7 @@ type CharacterCardV2 = {
                customScripts?:customscript[]
                utilityBot?: boolean,
                sdData?:[string,string][],
-                additionalAssets?:[string,string][],
+                additionalAssets?:[string,string,string][],
                backgroundHTML?:string
            }
        }
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -4,7 +4,7 @@ import exifr from 'exifr'
 import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert";
 import { language } from "../lang";
 import { PngMetadata } from "./exif";
-import { encode as encodeMsgpack, decode as decodeMsgpack } from "@msgpack/msgpack";
+import { encode as encodeMsgpack, decode as decodeMsgpack } from "msgpackr";
 import { checkNullish, findCharacterbyId, selectMultipleFile, selectSingleFile, sleep } from "./util";
 import { v4 as uuidv4 } from 'uuid';
 import { selectedCharID } from "./stores";
--- a/src/ts/drive/drive.ts
+++ b/src/ts/drive/drive.ts
@@ -245,7 +245,7 @@ async function backupDrive(ACCESS_TOKEN:string) {
        }
    }

-    const dbData = encodeRisuSave(get(DataBase))
+    const dbData = encodeRisuSave(get(DataBase), 'compression')

    alertStore.set({
        type: "wait",
@@ -402,7 +402,7 @@ async function loadDrive(ACCESS_TOKEN:string, mode: 'backup'|'sync'):Promise<voi
            }
        }
        db.didFirstSetup = true
-        const dbData = encodeRisuSave(db)
+        const dbData = encodeRisuSave(db, 'compression')

        if(isTauri){
            await writeBinaryFile('database/database.bin', dbData, {dir: BaseDirectory.AppData})
--- a/src/ts/exif.ts
+++ b/src/ts/exif.ts
@@ -20,6 +20,23 @@ export const PngMetadata = {
        const encoded = encode(chunks);
        return encoded
    },
+    writeStream:(pngBuffer: Uint8Array, metadata: Record<string, string>): Buffer => {
+        let chunks:{
+            name:string
+            data:Uint8Array
+        }[] = extract(Buffer.from(pngBuffer));
+
+        chunks = chunks.filter((v) => {
+            return v.name.toLocaleLowerCase() !== 'text'
+        })
+
+        for (const key in metadata) {
+            const value = metadata[key];
+            chunks.splice(-1, 0, textKey.encode(key, value))
+        }
+        const encoded = encode(chunks);
+        return encoded
+    },
    filter: (pngBuffer: Uint8Array) => {
        let chunks:{
            name:string
--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -63,9 +63,9 @@ async function parseAdditionalAssets(data:string, char:character, mode:'normal'|
        for(const asset of char.additionalAssets){
            const assetPath = await getFileSrc(asset[1])
            data = data.replaceAll(`{{raw::${asset[0]}}}`, assetPath).
-                    replaceAll(`{{img::${asset[0]}}}`,`<img src="${assetPath}" />`)
-                    .replaceAll(`{{video::${asset[0]}}}`,`<video autoplay loop><source src="${assetPath}" type="video/mp4"></video>`)
-                    .replaceAll(`{{audio::${asset[0]}}}`,`<audio autoplay loop><source src="${assetPath}" type="audio/mpeg"></audio>`)
+                    replaceAll(`{{img::${asset[0]}}}`,`<img src="${assetPath}" alt="${asset[0]}"/>`)
+                    .replaceAll(`{{video::${asset[0]}}}`,`<video controls autoplay loop><source src="${assetPath}" type="video/mp4"></video>`)
+                    .replaceAll(`{{audio::${asset[0]}}}`,`<audio controls autoplay loop><source src="${assetPath}" type="audio/mpeg"></audio>`)
            if(mode === 'back'){
                data = data.replaceAll(`{{bg::${asset[0]}}}`, `<div style="width:100%;height:100%;background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url(${assetPath}); background-size: cover;"></div>`)
            }
--- a/src/ts/plugins/automark.ts
+++ b/src/ts/plugins/automark.ts
@@ -0,0 +1,56 @@
+const reg:[RegExp,string][] = []
+
+
+export function autoMarkPlugin(data:string){
+    if(reg.length === 0){
+        const pluginRegex = [
+            {
+              "in": "“|”",
+              "out": "\"",
+              "flag": "g"
+            },
+            {
+              "in": "‘|’",
+              "out": "'",
+              "flag": "g"
+            },
+            {
+              "in": "^(?!\\d\\.)([\\wㄱ-ㅎ가-힣'])(?!.*[{<>}])|(?<=^\\[.*\\] *|^\\(.*\\) *)([\\wㄱ-ㅎ가-힣'])(?!.*[{<>}])",
+              "out": "<em>$1$2",
+              "flag": "gm"
+            },
+            {
+              "in": "(?<!^ +.*)(\".*|<em>.*)(?<!\")$",
+              "out": "$1</em>",
+              "flag": "gm"
+            },
+            {
+              "in": "(?<=<em>.*|^\".*)( +\"[\\S])|(?<=<em>.*|\" +.*)( *\\[)",
+              "out": "</em>$1$2",
+              "flag": "gm"
+            },
+            {
+              "in": "(?<=^\".*|<\\/em>.*)([\\S]\" +|[\\S]\"(?=[,.…ㄱ-ㅎ가-힣]))|(?<=<\\/em>.*)( *\\] *)",
+              "out": "$1$2<em>",
+              "flag": "gm"
+            },
+            {
+              "in": "(?<=<em>.*? +|\\[|\\[.* +|\\(|\\(.* +|\"|\".*? +)(?<!style=.*)(')|(?<=<em>)('[\\wㄱ-ㅎ가-힣])",
+              "out": "<strong><em>$1$2",
+              "flag": "gm"
+            },
+            {
+              "in": "(?<=<strong><em>')(.*?')(?= +.+?|[ㄱ-ㅎ가-힣?!:;,.…—-])|(?<=<strong><em>'.*)(')(?=<\\/em>|\")|(?<=\\(<strong><em>')(?=\\))",
+              "out": "$1$2</em></strong>",
+              "flag": "gm"
+            }
+        ]
+        for(const r of pluginRegex){
+            reg.push([new RegExp(r.in, r.flag),r.out])
+        }
+    }
+    for(let i=0;i<reg.length;i++){
+        data = data.replace(reg[i][0], reg[i][1])
+    }
+    return data
+}
--- a/src/ts/plugins/plugins.ts
+++ b/src/ts/plugins/plugins.ts
@@ -3,7 +3,7 @@ import { language } from "../../lang";
 import { alertError } from "../alert";
 import { DataBase } from "../storage/database";
 import { checkNullish, selectSingleFile, sleep } from "../util";
-import type { OpenAIChat } from ".";
+import type { OpenAIChat } from "../process";
 import { globalFetch } from "../storage/globalApi";
 import { selectedCharID } from "../stores";

--- a/src/ts/process/index.ts
+++ b/src/ts/process/index.ts
@@ -409,6 +409,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
    else if(req.type === 'streaming'){
        const reader = req.result.getReader()
        const msgIndex = db.characters[selectedChar].chats[selectedChat].message.length
+        db.characters[selectedChar].chats[selectedChat].isStreaming = true
        db.characters[selectedChar].chats[selectedChat].message.push({
            role: 'char',
            data: "",
@@ -424,6 +425,8 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
                setDatabase(db)
            }
            if(readed.done){
+                db.characters[selectedChar].chats[selectedChat].isStreaming = false
+                setDatabase(db)
                break
            }   
        }
--- a/src/ts/process/lorebook.ts
+++ b/src/ts/process/lorebook.ts
@@ -200,19 +200,26 @@ export async function importLoreBook(mode:'global'|'local'|'sglobal'){
                comment:string
                content:string
                order:number
-                constant:boolean
+                constant:boolean,
+                name:string,
+                keywords:string[],
+                priority:number
+                entry:string
+                secondary_keys:string[]
+                selective:boolean
            }} = importedlore.entries
            for(const key in entries){
                const currentLore = entries[key]
                lore.push({
-                    key: currentLore.key.join(', '),
-                    insertorder: currentLore.order,
-                    comment: currentLore.comment.length < 1 ? 'Unnamed Imported Lore' : currentLore.comment,
-                    content: currentLore.content,
+                    key: currentLore.key ? currentLore.key.join(', ') :
+                        currentLore.keywords ? currentLore.keywords.join(', ') : '',
+                    insertorder: currentLore.order ?? currentLore.priority ?? 0,
+                    comment: currentLore.comment || currentLore.name || '',
+                    content: currentLore.content || currentLore.entry || '',
                    mode: "normal",
-                    alwaysActive: currentLore.constant,
-                    secondkey: "",
-                    selective: false
+                    alwaysActive: currentLore.constant ?? false,
+                    secondkey: currentLore.secondary_keys ? currentLore.secondary_keys.join(', ') : "",
+                    selective: currentLore.selective ?? false
                })
            }
        }
--- a/src/ts/process/request.ts
+++ b/src/ts/process/request.ts
@@ -1,10 +1,10 @@
 import { get } from "svelte/store";
 import type { OpenAIChat, OpenAIChatFull } from ".";
 import { DataBase, setDatabase, type character } from "../storage/database";
-import { pluginProcess } from "./plugins";
+import { pluginProcess } from "../plugins/plugins";
 import { language } from "../../lang";
 import { stringlizeChat, unstringlizeChat } from "./stringlize";
-import { globalFetch, isTauri } from "../storage/globalApi";
+import { globalFetch, isNodeServer, isTauri } from "../storage/globalApi";
 import { sleep } from "../util";
 import { createDeep } from "./deepai";

@@ -167,7 +167,20 @@ export async function requestChatDataMain(arg:requestDataArgument, model:'model'

            if(db.useStreaming && arg.useStreaming){
                body.stream = true
-                const da = await fetch(replacerURL, {
+                const da =  ((!isTauri) && (!isNodeServer))
+                    ? await fetch(`/proxy?url=${encodeURIComponent(replacerURL)}`, {
+                        body: JSON.stringify(body),
+                        headers: {
+                            "risu-header": encodeURIComponent(JSON.stringify({
+                                "Authorization": "Bearer " + db.openAIKey,
+                                "Content-Type": "application/json"
+                            })),
+                            "Content-Type": "application/json"
+                        },
+                        method: "POST",
+                        signal: abortSignal
+                    })
+                    : await fetch(replacerURL, {
                        body: JSON.stringify(body),
                        method: "POST",
                        headers: {
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -1,16 +1,19 @@
 import { get, writable } from 'svelte/store';
-import { checkNullish } from '../util';
-import { changeLanguage } from '../../lang';
-import type { RisuPlugin } from '../process/plugins';
-import { saveAsset as saveImageGlobal } from './globalApi';
+import { checkNullish, selectSingleFile } from '../util';
+import { changeLanguage, language } from '../../lang';
+import type { RisuPlugin } from '../plugins/plugins';
+import { downloadFile, saveAsset as saveImageGlobal } from './globalApi';
 import { cloneDeep } from 'lodash';
 import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from './defaultPrompts';
+import { alertNormal } from '../alert';

 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '1.27.1'
+export let appVer = '1.27.4'
+export let webAppSubVer = ''

 export function setDatabase(data:Database){
+    console.log(data)
    if(checkNullish(data.characters)){
        data.characters = []
    }
@@ -339,7 +342,7 @@ export interface character{
        VOLUME_SCALE?: number
    }
    supaMemory?:boolean
-    additionalAssets?:[string, string][]
+    additionalAssets?:[string, string, string][]
    ttsReadOnlyQuoted?:boolean
    replaceGlobalNote:string
    backgroundHTML?:string
@@ -522,7 +525,9 @@ export interface Database{
            expires_in?: number
        }
    },
-    classicMaxWidth: boolean
+    classicMaxWidth: boolean,
+    useChatSticker:boolean,
+    useAdditionalAssetsPreview:boolean,
 }

 interface hordeConfig{
@@ -561,6 +566,7 @@ export interface Chat{
    supaMemoryData?:string
    lastMemory?:string
    suggestMessages?:string[]
+    isStreaming?:boolean
 }

 export interface Message{
@@ -710,3 +716,26 @@ export function changeToPreset(id =0){
    db.koboldURL = newPres.koboldURL ?? db.koboldURL
    DataBase.set(db)
 }
+
+export function downloadPreset(id:number){
+    saveCurrentPreset()
+    let db = get(DataBase)
+    let pres = cloneDeep(db.botPresets[id])
+    pres.openAIKey = ''
+    pres.forceReplaceUrl = ''
+    pres.forceReplaceUrl2 = ''
+    downloadFile(pres.name + "_preset.json", Buffer.from(JSON.stringify(pres, null, 2)))
+    alertNormal(language.successExport)
+}
+
+export async function importPreset(){
+    const f = await selectSingleFile(["json"])
+    if(!f){
+        return
+    }
+    let db = get(DataBase)
+    const pre = (JSON.parse(Buffer.from(f.data).toString('utf-8')))
+    pre.name ??= "Imported"
+    db.botPresets.push(pre)
+    DataBase.set(db)
+}
--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -11,7 +11,7 @@ import { appWindow } from "@tauri-apps/api/window";
 import { checkOldDomain, checkUpdate } from "../update";
 import { selectedCharID } from "../stores";
 import { Body, ResponseType, fetch as TauriFetch } from "@tauri-apps/api/http";
-import { loadPlugins } from "../process/plugins";
+import { loadPlugins } from "../plugins/plugins";
 import { alertError, alertStore } from "../alert";
 import { checkDriverInit, syncDrive } from "../drive/drive";
 import { hasher } from "../parser";
@@ -170,7 +170,7 @@ export async function readImage(data:string) {
    }
 }

-export async function saveAsset(data:Uint8Array, customId:string = ''){
+export async function saveAsset(data:Uint8Array, customId:string = '', fileName:string = ''){
    let id = ''
    if(customId !== ''){
        id = customId
@@ -182,13 +182,17 @@ export async function saveAsset(data:Uint8Array, customId:string = ''){
            id = uuidv4()
        }
    }
+    let fileExtension:string = 'png'
+    if(fileName && fileName.split('.').length > 0){
+        fileExtension = fileName.split('.').pop()
+    }
    if(isTauri){
-        await writeBinaryFile(`assets/${id}.png`, data ,{dir: BaseDirectory.AppData})
-        return `assets/${id}.png`
+        await writeBinaryFile(`assets/${id}.${fileExtension}`, data ,{dir: BaseDirectory.AppData})
+        return `assets/${id}.${fileExtension}`
    }
    else{
-        await forageStorage.setItem(`assets/${id}.png`, data)
-        return `assets/${id}.png`
+        await forageStorage.setItem(`assets/${id}.${fileExtension}`, data)
+        return `assets/${id}.${fileExtension}`
    }
 }

@@ -203,6 +207,7 @@ export async function saveDb(){
    })
    while(true){
        if(changed){
+            changed = false
            const dbData = encodeRisuSave(get(DataBase))
            if(isTauri){
                await writeBinaryFile('database/database.bin', dbData, {dir: BaseDirectory.AppData})
@@ -373,7 +378,7 @@ export async function loadData() {
    }
 }

-const knownHostes = ["localhost","127.0.0.1","api.openai.com"]
+const knownHostes = ["localhost","127.0.0.1"]

 export async function globalFetch(url:string, arg:{body?:any,headers?:{[key:string]:string}, rawResponse?:boolean, method?:"POST"|"GET", abortSignal?:AbortSignal} = {}): Promise<{
    ok: boolean;
@@ -383,6 +388,7 @@ export async function globalFetch(url:string, arg:{body?:any,headers?:{[key:stri
    try {
        const db = get(DataBase)
        const method = arg.method ?? "POST"
+        db.requestmet = "normal"
    
        function addFetchLog(response:any, success:boolean){
            try{
@@ -410,7 +416,7 @@ export async function globalFetch(url:string, arg:{body?:any,headers?:{[key:stri
        const urlHost = (new URL(url)).hostname
        let forcePlainFetch = knownHostes.includes(urlHost) && (!isTauri)
    
-        if(db.requestmet === 'plain' || forcePlainFetch){
+        if(forcePlainFetch){
            try {
                let headers = arg.headers ?? {}
                if(!headers["Content-Type"]){
@@ -451,48 +457,6 @@ export async function globalFetch(url:string, arg:{body?:any,headers?:{[key:stri
                }
            }
        }
-        if(db.requestmet === 'proxy'){
-            try {
-                let headers = arg.headers ?? {}
-                if(!headers["Content-Type"]){
-                    headers["Content-Type"] =  `application/json`
-                }
-                const furl = new URL(db.requestproxy)
-                furl.pathname = url
-    
-                const da = await fetch(furl, {
-                    body: JSON.stringify(arg.body),
-                    headers: arg.headers,
-                    method: method,
-                    signal: arg.abortSignal
-                })
-    
-                if(arg.rawResponse){
-                    addFetchLog("Uint8Array Response", da.ok && da.status >= 200 && da.status < 300)
-                    return {
-                        ok: da.ok && da.status >= 200 && da.status < 300,
-                        data: new Uint8Array(await da.arrayBuffer()),
-                        headers: Object.fromEntries(da.headers)
-                    }   
-                }
-                else{
-                    const dat = await da.json()
-                    addFetchLog(dat, da.ok && da.status >= 200 && da.status < 300)
-                    return {
-                        ok: da.ok && da.status >= 200 && da.status < 300,
-                        data: dat,
-                        headers: Object.fromEntries(da.headers)
-                    }
-                }
-    
-            } catch (error) {
-                return {
-                    ok: false,
-                    data: `${error}`,
-                    headers: {}
-                }
-            }
-        }
        if(isTauri){
            if(db.requester === 'new'){
                try {
@@ -609,8 +573,8 @@ export async function globalFetch(url:string, arg:{body?:any,headers?:{[key:stri
                            "risu-header": encodeURIComponent(JSON.stringify(arg.headers)),
                            "Content-Type": "application/json"
                        },
-                        method: method
-                        ,signal: arg.abortSignal
+                        method: method,
+                        signal: arg.abortSignal
                    })
    
                    addFetchLog("Uint8Array Response", da.ok && da.status >= 200 && da.status < 300)
--- a/src/ts/storage/risuSave.ts
+++ b/src/ts/storage/risuSave.ts
@@ -1,31 +1,90 @@
-import { decode, encode } from "@msgpack/msgpack";
-import { isEqual } from "lodash";
-import pako from "pako";
+import { Packr, Unpackr, decode } from "msgpackr";
+import * as fflate from "fflate";
+import { isTauri } from "./globalApi";

+const packr = new Packr({
+    useRecords:false
+});

-export function encodeRisuSave(data:any){
-    const risuSaveHeader = new Uint8Array(Buffer.from("\u0000\u0000RISU",'utf-8'))
-    const encoded = encode(data)
-    const mergedArray = new Uint8Array(risuSaveHeader.length + encoded.length);
-    mergedArray.set(risuSaveHeader);
-    mergedArray.set(encoded, risuSaveHeader.length);
-    return mergedArray
+const unpackr = new Unpackr({
+    int64AsType: 'number',
+    useRecords:false
+})
+
+const magicHeader = new Uint8Array([0, 82, 73, 83, 85, 83, 65, 86, 69, 0, 7]); 
+const magicCompressedHeader = new Uint8Array([0, 82, 73, 83, 85, 83, 65, 86, 69, 0, 8]); 
+
+export function encodeRisuSave(data:any, compression:'noCompression'|'compression' = 'noCompression'){
+    let encoded:Uint8Array = packr.encode(data)
+    if(isTauri || compression === 'compression'){
+        encoded = fflate.compressSync(encoded)
+        const result = new Uint8Array(encoded.length + magicCompressedHeader.length);
+        result.set(magicCompressedHeader, 0)
+        result.set(encoded, magicCompressedHeader.length)
+        return result
+    }
+    else{
+        const result = new Uint8Array(encoded.length + magicHeader.length);
+        result.set(magicHeader, 0)
+        result.set(encoded, magicHeader.length)
+        return result
+    }
 }

 export function decodeRisuSave(data:Uint8Array){
-    const risuSaveHeader = new Uint8Array(Buffer.from("\u0000\u0000RISU",'utf-8'))
-    const sub = data.subarray(0, risuSaveHeader.length)
-    if(isEqual(sub, risuSaveHeader)){
    try {
+        switch(checkHeader(data)){
+            case "compressed":
+                data = data.slice(magicCompressedHeader.length)
+                return decode(fflate.decompressSync(data))
+            case "raw":
+                data = data.slice(magicHeader.length)
+                return unpackr.decode(data)
+        }
+        return unpackr.decode(data)
+    }
+    catch (error) {
+        try {
+            console.log('risudecode')
+            const risuSaveHeader = new Uint8Array(Buffer.from("\u0000\u0000RISU",'utf-8'))
            const realData = data.subarray(risuSaveHeader.length)
-            const dec = decode(realData)
+            const dec = unpackr.decode(realData)
            return dec   
        } catch (error) {
-            console.error(error)
-            throw error
+            const buf = Buffer.from(fflate.decompressSync(Buffer.from(data)))
+            try {
+                return JSON.parse(buf.toString('utf-8'))                            
+            } catch (error) {
+                return unpackr.decode(buf)
            }
        }
-    else{
-        return JSON.parse(Buffer.from(pako.inflate(Buffer.from(data))).toString('utf-8'))
    }
 }
+
+function checkHeader(data: Uint8Array) {
+
+    let header:'none'|'compressed'|'raw' = 'raw'
+
+    if (data.length < magicHeader.length) {
+      return false;
+    }
+  
+    for (let i = 0; i < magicHeader.length; i++) {
+      if (data[i] !== magicHeader[i]) {
+        header = 'none'
+        break
+      }
+    }
+
+    if(header === 'none'){
+        header = 'compressed'
+        for (let i = 0; i < magicCompressedHeader.length; i++) {
+            if (data[i] !== magicCompressedHeader[i]) {
+                header = 'none'
+                break
+            }
+        }
+    }  
+    // All bytes matched
+    return header;
+  }
--- a/src/ts/translator/translator.ts
+++ b/src/ts/translator/translator.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { translatorPlugin } from "../process/plugins"
+import { translatorPlugin } from "../plugins/plugins"
 import { DataBase } from "../storage/database"

 let cache={
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"1.27.1"}
+{"version":"1.27.4"}