Merge branch 'main' of https://github.com/kwaroran/RisuAI

2023-11-27 23:21:52 +09:00
parent f138c7857e cecc1731bc
commit 7f65a130d8
25 changed files with 790 additions and 571 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ dependencies:
  isomorphic-dompurify:
    specifier: ^1.8.0
    version: 1.8.0
+  jszip:
+    specifier: ^3.10.1
+    version: 3.10.1
  libsodium-wrappers-sumo:
    specifier: ^0.7.11
    version: 0.7.11
@@ -1537,6 +1540,10 @@ packages:
    requiresBuild: true
    dev: false

+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
  /cors@2.8.5:
    resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
    engines: {node: '>= 0.10'}
@@ -2238,6 +2245,10 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: false
+
  /isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true
@@ -2298,6 +2309,15 @@ packages:
      - utf-8-validate
    dev: false

+  /jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+    dev: false
+
  /kleur@4.1.5:
    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
    engines: {node: '>=6'}
@@ -2319,6 +2339,12 @@ packages:
      immediate: 3.0.6
    dev: false

+  /lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+    dependencies:
+      immediate: 3.0.6
+    dev: false
+
  /lil-gui@0.17.0:
    resolution: {integrity: sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==}
    dev: true
@@ -2730,6 +2756,10 @@ packages:
      p-finally: 1.0.0
    dev: true

+  /pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+    dev: false
+
  /parent-module@1.0.1:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}
@@ -2931,6 +2961,10 @@ packages:
      tunnel-agent: 0.6.0
    dev: false

+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: false
+
  /protobufjs@6.11.3:
    resolution: {integrity: sha512-xL96WDdCZYdU7Slin569tFX712BxsxslWwAfAhCYjQKGTq7dAU91Lomy6nLLhh/dyGhk/YH4TwTSRxTzhuHyZg==}
    hasBin: true
@@ -3035,6 +3069,18 @@ packages:
      pify: 2.3.0
    dev: true

+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: false
+
  /readable-stream@3.6.2:
    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
    engines: {node: '>= 6'}
@@ -3105,6 +3151,10 @@ packages:
      mri: 1.2.0
    dev: true

+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: false
+
  /safe-buffer@5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
    dev: false
@@ -3174,6 +3224,10 @@ packages:
      - supports-color
    dev: false

+  /setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+    dev: false
+
  /setprototypeof@1.2.0:
    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
    dev: false
@@ -3276,6 +3330,12 @@ packages:
      queue-tick: 1.0.1
    dev: false

+  /string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: false
+
  /string_decoder@1.3.0:
    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
    dependencies:
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
  },
  "package": {
    "productName": "RisuAI",
-    "version": "1.59.9"
+    "version": "1.60.1"
  },
  "tauri": {
    "allowlist": {
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -453,4 +453,8 @@ export const languageEnglish = {
    joinMultiUserRoom: "Join MultiUser Room",
    exactTokens: "Exact Tokens",
    fixedTokens: "Approximate Tokens",
+    inlayViewScreen: "Inlay Screen",
+    imgGenPrompt: "Image Generation Prompt",
+    imgGenNegatives: "Image Generation Negative Prompt",
+    imgGenInstructions: "Image Generation Instructions",
 }
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ArrowLeft, ArrowRight, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, PencilIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon, CopyIcon } from "lucide-svelte";
    import { ParseMarkdown, type simpleCharacterArgument } from "../../ts/parser";
    import AutoresizeArea from "../UI/GUI/TextAreaResizable.svelte";
    import { alertConfirm, alertError } from "../../ts/alert";
@@ -154,7 +154,7 @@
                                edit()
                            }
                        }}>
-                            <EditIcon size={20}/>
+                            <PencilIcon size={20}/>
                        </button>
                        <button class="ml-2 hover:text-green-500 transition-colors" on:click={rm}>
                            <TrashIcon size={20}/>
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -36,7 +36,7 @@
        <BackgroundDom />
        <div style={bgImg} class="h-full w-full" class:max-w-6xl={$DataBase.classicMaxWidth}>
            {#if $selectedCharID >= 0}
-                {#if $CurrentCharacter.viewScreen !== 'none'}
+                {#if $CurrentCharacter.viewScreen !== 'none' && ($CurrentCharacter.type === 'group' || (!$CurrentCharacter.inlayViewScreen))}
                    <ResizeBox />
                {/if}
            {/if}
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -4,20 +4,21 @@
    import Help from "src/lib/Others/Help.svelte";
    import { selectSingleFile } from "src/ts/util";
    import { DataBase } from "src/ts/storage/database";
-    import { isTauri } from "src/ts/storage/globalApi";
+    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";
    import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
    import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
    import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
    import Button from "src/lib/UI/GUI/Button.svelte";
-    import { convertToBase64 } from "src/ts/process/uinttobase64";
+    import { getCharImage } from "src/ts/characters";
+    import Arcodion from "src/lib/UI/Arcodion.svelte";

 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>

-<span class="text-textcolor mt-4 text-lg font-bold">{language.imageGeneration}</span>

+<Arcodion name={language.imageGeneration}  styled>
    <span class="text-textcolor mt-2">{language.imageGeneration} {language.provider} <Help key="sdProvider"/></span>
    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.sdProvider}>
        <OptionInput value="" >None</OptionInput>
@@ -70,38 +71,6 @@
        <span class="text-textcolor">Model</span>
        <TextInput size="sm" marginBottom placeholder="nai-diffusion-3" bind:value={$DataBase.NAIImgModel}/>
    
-    <span class="text-textcolor">Enable I2I</span>
-    <Check bind:check={$DataBase.NAII2I}/>
-
-
-    {#if $DataBase.NAII2I}
-
-        <span class="text-textcolor">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>
-        <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>
-
-        <span class="text-textcolor">base image</span>
-        <TextInput size="sm" marginBottom placeholder="If empty, a profile picture is sent." bind:value={$DataBase.NAIImgConfig.image}/>
-        <span class="text-textcolor">If empty, a profile picture is sent.</span>
-        
-        <Button on:click={async () => {
-            const img = await selectSingleFile([
-                'jpg',
-                'jpeg',
-                'png',
-                'webp'
-            ])
-            if(!img){
-                return null
-            }
-            const base64 = await convertToBase64(img.data)
-            $DataBase.NAIImgConfig.image = base64
-        }}>Select Image</Button>
-    {/if}
-
        <span class="text-textcolor">Width</span>
        <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.NAIImgConfig.width}/>
        <span class="text-textcolor">Height</span>
@@ -114,14 +83,50 @@
        <NumberInput size="sm" marginBottom min={0} max={2048} bind:value={$DataBase.NAIImgConfig.scale}/>
    
        {#if !$DataBase.NAII2I}
-        <span class="text-textcolor">Use SMEA</span>
-        <Check bind:check={$DataBase.NAIImgConfig.sm}/>
-        <span class="text-textcolor">Use DYN</span>
-        <Check bind:check={$DataBase.NAIImgConfig.sm_dyn}/>
-    {/if}
+            <Check bind:check={$DataBase.NAIImgConfig.sm} name="Use SMEA"/>
+            <Check bind:check={$DataBase.NAIImgConfig.sm_dyn} name='Use DYN'/>
        {/if}
+        <Check bind:check={$DataBase.NAII2I} name="Enable I2I"/>
    
-<span class="text-textcolor mt-4 text-lg font-bold">TTS</span>
+        {#if $DataBase.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>
+            <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>
+    
+            <span class="text-textcolor">Base image</span>
+            <button on:click={async () => {
+                const img = await selectSingleFile([
+                    'jpg',
+                    'jpeg',
+                    'png',
+                    'webp'
+                ])
+                if(!img){
+                    return null
+                }
+                const saveId = await saveAsset(img.data)
+                $DataBase.NAIImgConfig.image = saveId
+            }}>
+                {#if $DataBase.NAIImgConfig.image === ''}
+                    <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"/>
+                {:else}
+                    {#await getCharImage($DataBase.NAIImgConfig.image, 'css')}
+                        <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"/>
+                    {:then im} 
+                        <div class="rounded-md h-20 w-20 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />                
+                    {/await}
+                {/if}
+            </button>
+    
+        {/if}
+    {/if}
+</Arcodion>
+
+<Arcodion name="TTS" styled>
    <span class="text-textcolor mt-2">ElevenLabs API key</span>
    <TextInput size="sm" marginBottom bind:value={$DataBase.elevenLabKey}/>
    
@@ -131,15 +136,19 @@
    <span class="text-textcolor mt-2">NovelAI API key</span>
    <TextInput size="sm" marginBottom placeholder="pst-..." bind:value={$DataBase.NAIApiKey}/>
    
-<span class="text-textcolor mt-4 text-lg font-bold">{language.emotionImage}</span>
    
+</Arcodion>
+
+<Arcodion name={language.emotionImage} styled>
    <span class="text-textcolor mt-2">{language.emotionMethod}</span>
+
    <SelectInput className="mt-2 mb-4" bind:value={$DataBase.emotionProcesser}>
        <OptionInput value="submodel" >Ax. Model</OptionInput>
        <OptionInput value="embedding" >MiniLM-L6-v2</OptionInput>
    </SelectInput>
+</Arcodion>

-<span class="text-textcolor mt-4 text-lg font-bold">{language.SuperMemory} <Help key="superMemory" /></span>
+<Arcodion name="superMemory" styled>
    <span class="text-textcolor mt-4">{language.SuperMemory} {language.model}</span>
    <SelectInput className="mt-2 mb-2" bind:value={$DataBase.supaMemoryType}>
        <OptionInput value="none" >None</OptionInput>
@@ -169,3 +178,4 @@
            <Check bind:check={$DataBase.hypaMemory} name={language.able + ' ' + language.HypaMemory}/> <Help key="experimental" />
        </div>
    {/if}
+</Arcodion>
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -27,6 +27,8 @@
    import OptionInput from "../UI/GUI/OptionInput.svelte";
    import RegexList from "./Scripts/RegexList.svelte";
    import TriggerList from "./Scripts/TriggerList.svelte";
+  import CheckInput from "../UI/GUI/CheckInput.svelte";
+  import { updateInlayScreen } from "src/ts/process/inlayScreen";
    

    let subMenu = 0
@@ -319,7 +321,11 @@
    <!-- svelte-ignore empty-block -->

    {#if currentChar.type !== 'group'}
-        <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
+        <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen} on:change={() => {
+            if(currentChar.type === 'character'){
+                currentChar.data = updateInlayScreen(currentChar.data)
+            }
+        }}>
            <OptionInput value="none">{language.none}</OptionInput>
            <OptionInput value="emotion">{language.emotionImage}</OptionInput>
            <OptionInput value="imggen">{language.imageGeneration}</OptionInput>
@@ -383,73 +389,34 @@
                <span>Loading...</span>
            {/if}
        </div>
+
+        {#if currentChar.data.inlayViewScreen}
+            <span class="text-textcolor mt-2">{language.imgGenInstructions}</span>
+            <TextAreaInput bind:value={currentChar.data.newGenData.emotionInstructions} />
+        {/if}
+
+        <CheckInput bind:check={currentChar.data.inlayViewScreen} name={language.inlayViewScreen} onChange={() => {
+            if(currentChar.type === 'character'){
+                currentChar.data = updateInlayScreen(currentChar.data)
+            }
+        }}/>
    {/if}
    {#if currentChar.data.viewScreen === 'imggen'}
        <span class="text-textcolor mt-6">{language.imageGeneration} <Help key="imggen"/></span>
        <span class="text-textcolor2 text-xs">{language.emotionWarn}</span>
        
-        <div class="w-full max-w-full border border-selected rounded-md p-2">
-            <table class="w-full max-w-full tabler">
-                <tr>
-                    <th class="font-medium w-1/3">{language.key}</th>
-                    <th class="font-medium w-1/2">{language.value}</th>
-                    <th class="font-medium"></th>
-                </tr>
-                {#if currentChar.data.sdData.length === 0}
-                    <tr>
-                        <div class="text-textcolor2">{language.noData}</div>
-                    </tr>
-                {/if}
-                {#each currentChar.data.sdData as emo, i}
-                    <tr>
-                        <td class="font-medium truncate w-1/3">
-                            <TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][0]} />
-                        </td>
-                        <td class="font-medium truncate w-1/2">
-                            <TextInput size="sm" marginBottom bind:value={currentChar.data.sdData[i][1]} />
-                        </td>
-                        {#if (!['always','negative'].includes(currentChar.data.sdData[i][0]))}
-                        <button class="font-medium flex justify-center items-center h-full cursor-pointer hover:text-green-500" on:click={() => {
-                                let db = ($DataBase)
-                                let charId = $selectedCharID
-                                let dbChar = db.characters[charId]
-                                if(dbChar.type !== 'group'){
-                                    dbChar.sdData.splice(i, 1)
-                                    db.characters[charId] = dbChar
+        <span class="text-textcolor mt-2">{language.imgGenPrompt}</span>
+        <TextAreaInput bind:value={currentChar.data.newGenData.prompt} />
+        <span class="text-textcolor mt-2">{language.imgGenNegatives}</span>
+        <TextAreaInput bind:value={currentChar.data.newGenData.negative} />
+        <span class="text-textcolor mt-2">{language.imgGenInstructions}</span>
+        <TextAreaInput bind:value={currentChar.data.newGenData.instructions} />
+
+        <CheckInput bind:check={currentChar.data.inlayViewScreen} name={language.inlayViewScreen} onChange={() => {
+            if(currentChar.type === 'character'){
+                currentChar.data = updateInlayScreen(currentChar.data)
            }
-                                $DataBase = (db)
-                        }}><TrashIcon /></button>
-                        {:else}
-                        <td></td>
-                        {/if}
-                    </tr>
-                {/each}
-            </table>
-        </div>
-        <div class="text-textcolor2 hover:text-textcolor mt-2 flex">
-            {#if !$addingEmotion}
-                <button class="cursor-pointer hover:text-green-500" on:click={() => {
-                    let db = ($DataBase)
-                    let charId = $selectedCharID
-                    let dbChar = db.characters[charId]
-                    if(dbChar.type !== 'group'){
-                        dbChar.sdData.push(['', ''])
-                        db.characters[charId] = dbChar
-                    }
-                    $DataBase = (db)
-                }}>
-                    <PlusIcon />
-                </button>
-            {:else}
-                <span>Loading...</span>
-            {/if}
-        </div>
-        <span class="text-textcolor mt-6">{language.currentImageGeneration}</span>
-        {#if currentChar.data.chats[currentChar.data.chatPage].sdData}
-            <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.chats[currentChar.data.chatPage].sdData}></TextAreaInput>
-        {:else}
-            <span><div class="text-textcolor2">{language.noData}</div></span>
-        {/if}
+        }}/>
    {/if}
 {:else if subMenu === 3}
    <h2 class="mb-2 text-2xl font-bold mt-2">{language.loreBook} <Help key="lorebook"/></h2>
--- a/src/lib/UI/Arcodion.svelte
+++ b/src/lib/UI/Arcodion.svelte
@@ -1,8 +1,25 @@
 <script lang="ts">
    export let name = ""
    let open = false
+    export let styled = false
 </script>

+{#if styled}
+    <div class="flex flex-col mt-2">
+        <button class="hover:bg-selected px-6 py-2 text-lg rounded-t-md border-selected border"
+            class:bg-selected={open}
+            class:rounded-b-md={!open}
+            on:click={() => {
+                open = !open
+            }}
+        >{name}</button>
+        {#if open}
+            <div class="flex flex-col border border-selected p-2 rounded-b-md">
+                <slot></slot>
+            </div>
+        {/if}
+    </div>
+{:else}
    <div class="flex flex-col">
        <button class="hover:bg-selected px-6 py-2 text-lg" class:bg-selected={open} on:click={() => {
            open = !open
@@ -13,3 +30,4 @@
            </div>
        {/if}
    </div>
+{/if}
--- a/src/lib/VisualNovel/VisualNovelChat.svelte
+++ b/src/lib/VisualNovel/VisualNovelChat.svelte
@@ -1,9 +1,49 @@
 <script lang="ts">
+    import { getFileSrc } from "src/ts/storage/globalApi";
    import { CurrentCharacter } from "src/ts/stores";
+    import { sleep } from "src/ts/util";
+    import { onDestroy, onMount } from "svelte";

+    const style:number = 1
+    export let text:string = "Hello World, this is a test, so I can see if this works. I hope it does, because I don't want to have to rewrite this. I hope this is long enough to test the text wrapping. Lonnnnnng String "
+    let renderedText = ''
+    let alive = true

+    export const forceRender = () => {
+        renderedText = text
+    }
+
+    onMount(async () => {
+        while(alive){
+            if(renderedText.length >= text.length){
+                if(renderedText !== text){
+                    renderedText = ''
+                }
+                else{
+                    renderedText = text
+                }
+            }
+            if(renderedText.length < text.length){
+                renderedText += text[renderedText.length]
+            }
+            await sleep(10)
+        }
+    })
+
+    onDestroy(() => {
+        renderedText = ''
+        alive = false
+    })
 </script>

+{#if $CurrentCharacter.type === 'character' && $CurrentCharacter.emotionImages[0]}
+    {#await getFileSrc($CurrentCharacter.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>
+    {/await}
+{/if}
+{#if style === 0}
    <div class="w-full flex justify-center absolute bottom-5">
        <div class="w-3xl max-w-full flex flex-col">

@@ -15,3 +55,24 @@
            </div>
        </div>
    </div>
+{:else}
+    <div class="w-full flex justify-center absolute bottom-5">
+        <div class="w-3xl max-w-full flex flex-col text-black">
+
+            <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">{$CurrentCharacter.name}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-neutral-200 h-40 rounded-lg border-pink-900 border-1 w-full">
+                <div class="border-pink-300 border-4 h-full rounded-lg">
+                    <div class="border-pink-900 border-1 px-4 pt-6 pb-4 h-full rounded-lg tracking-normal text-clip">
+                        {renderedText}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}
--- a/src/lib/VisualNovel/VisualNovelMain.svelte
+++ b/src/lib/VisualNovel/VisualNovelMain.svelte
@@ -3,11 +3,11 @@
    import { DataBase } from "../../ts/storage/database";
    import BackgroundDom from "../ChatScreens/BackgroundDom.svelte";
    import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
-    import defaultWallpaper from '../../etc/bg.jpg'
+    import defaultWallpaper from './test.png'
    import VisualNovelChat from "./VisualNovelChat.svelte";

-    const wallPaper = `background: url(${defaultWallpaper})`
-
+    const wallPaper = `background-image: url(${defaultWallpaper})`
+    let forceRender:() => void
    let bgImg= ''
    let lastBg = ''
    $: (async () =>{
@@ -20,7 +20,9 @@
 <div class="flex-grow h-full min-w-0 relative justify-center flex">
    <SideBarArrow />
    <BackgroundDom />
-    <div style={wallPaper} class="h-full w-full">
-        <VisualNovelChat />
+    <div style={wallPaper} class="h-full w-full bg-cover" on:click={() => {
+        forceRender()
+    }}>
+        <VisualNovelChat bind:forceRender />
    </div>
 </div>
--- a/src/lib/VisualNovel/test.png
+++ b/src/lib/VisualNovel/test.png
--- a/src/styles.css
+++ b/src/styles.css
@@ -71,6 +71,11 @@ html, body{
  font-weight: bold;
 }

+.strokeme {
+  color: #000;
+  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
+}
+
 ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -9,6 +9,7 @@ import { selectedCharID } from "./stores";
 import { checkCharOrder, downloadFile, getFileSrc, readImage } from "./storage/globalApi";
 import * as yuso from 'yuso'
 import { reencodeImage } from "./image";
+import { updateInlayScreen } from "./process/inlayScreen";

 export function createNewCharacter() {
    let db = get(DataBase)
@@ -300,6 +301,9 @@ export function characterFormatUpdate(index:number|character){
            depth: 0,
            prompt: ''
        }
+        if(!cha.newGenData){
+            cha = updateInlayScreen(cha)
+        }
    }
    else{
        if((!cha.characterTalks) || cha.characterTalks.length !== cha.characters.length){
--- a/src/ts/image.ts
+++ b/src/ts/image.ts
@@ -24,12 +24,21 @@ export async function postInlayImage(){

    const extention = img.name.split('.').at(-1)

-    //darw in canvas to convert to png
+    const imgObj = new Image()
+    imgObj.src = URL.createObjectURL(new Blob([img.data], {type: `image/${extention}`}))
+
+    return await writeInlayImage(imgObj, {
+        name: img.name,
+        ext: extention
+    })
+}
+
+export async function writeInlayImage(imgObj:HTMLImageElement, arg:{name?:string, ext?:string} = {}) {
+
+    let drawHeight = 0
+    let drawWidth = 0
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
-    const imgObj = new Image()
-    let drawHeight, drawWidth = 0
-    imgObj.src = URL.createObjectURL(new Blob([img.data], {type: `image/${extention}`}))
    await new Promise((resolve) => {
        imgObj.onload = () => {
            drawHeight = imgObj.height
@@ -59,9 +68,9 @@ export async function postInlayImage(){
    const imgid = v4()

    await inlayStorage.setItem(imgid, {
-        name: img.name,
+        name: arg.name ?? imgid,
        data: dataURI,
-        ext: extention,
+        ext: arg.ext ?? 'png',
        height: drawHeight,
        width: drawWidth
    })
--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -65,7 +65,7 @@ DOMPurify.addHook("uponSanitizeAttribute", (node, data) => {
 })


-const assetRegex = /{{(raw|img|video|audio|bg)::(.+?)}}/g
+const assetRegex = /{{(raw|img|video|audio|bg|emotion)::(.+?)}}/g

 async function parseAdditionalAssets(data:string, char:simpleCharacterArgument|character, mode:'normal'|'back', mode2:'unset'|'pre'|'post' = 'unset'){
    const db = get(DataBase)
@@ -74,13 +74,28 @@ async function parseAdditionalAssets(data:string, char:simpleCharacterArgument|c
    if(char.additionalAssets){

        let assetPaths:{[key:string]:string} = {}
+        let emoPaths:{[key:string]:string} = {}

        for(const asset of char.additionalAssets){
            const assetPath = await getFileSrc(asset[1])
            assetPaths[asset[0].toLocaleLowerCase()] = assetPath
        }
+        if(char.emotionImages){
+            for(const emo of char.emotionImages){
+                const emoPath = await getFileSrc(emo[1])
+                emoPaths[emo[0].toLocaleLowerCase()] = emoPath
+            }
+        }
        data = data.replaceAll(assetRegex, (full:string, type:string, name:string) => {
            name = name.toLocaleLowerCase()
+            if(type === 'emotion'){
+                console.log(emoPaths, name)
+                const path = emoPaths[name]
+                if(!path){
+                    return ''
+                }
+                return `<img src="${path}" alt="${path}" style="${assetWidthString} "/>`
+            }
            const path = assetPaths[name]
            if(!path){
                return ''
@@ -129,6 +144,7 @@ export interface simpleCharacterArgument{
    customscript: customscript[]
    chaId: string,
    virtualscript?: string
+    emotionImages?: [string, string][]
 }


--- a/src/ts/process/generateSeed.ts
+++ b/src/ts/process/generateSeed.ts
@@ -1,9 +0,0 @@
-export function generateRandomSeed(length) {
-    let result = '';
-    const characters = '0123456789';
-    const charactersLength = characters.length;
-    for (let i = 0; i < length; i++) {
-        result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    }
-    return result;
-}
--- a/src/ts/process/index.ts
+++ b/src/ts/process/index.ts
@@ -22,6 +22,7 @@ import { cipherChat, decipherChat } from "./cipherChat";
 import { getInlayImage, supportsInlayImage } from "../image";
 import { getGenerationModelString } from "./models/modelString";
 import { sendPeerChar } from "../sync/multiuser";
+import { runInlayScreen } from "./inlayScreen";

 export interface OpenAIChat{
    role: 'system'|'user'|'assistant'|'function'
@@ -300,6 +301,21 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
        })
    }
    
+    if(currentChar.inlayViewScreen){
+        if(currentChar.viewScreen === 'emotion'){
+            unformated.postEverything.push({
+                role: 'system',
+                content: currentChar.newGenData.emotionInstructions.replaceAll('{{slot}}', currentChar.emotionImages.map((v) => v[0]).join(', '))
+            })
+        }
+        if(currentChar.viewScreen === 'imggen'){
+            unformated.postEverything.push({
+                role: 'system',
+                content: currentChar.newGenData.instructions
+            })
+        }
+    }
+
    if(lorepmt.special_act){
        unformated.postEverything.push({
            role: 'system',
@@ -498,6 +514,10 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
        }
        let inlays:string[] = []
        if(db.inlayImage){
+            if(msg.role === 'char'){
+                formedChat = formedChat.replace(/{{inlay::(.+?)}}/g, '')
+            }
+            else{
                const inlayMatch = formedChat.match(/{{inlay::(.+?)}}/g)
                if(inlayMatch){
                    for(const inlay of inlayMatch){
@@ -505,6 +525,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
                    }
                }
            }
+        }

        if(inlays.length > 0){
            for(const inlay of inlays){
@@ -653,7 +674,6 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
        })
    }

-
    function pushPrompts(cha:OpenAIChat[]){
        for(const chat of cha){
            if(!chat.content){
@@ -913,9 +933,17 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n

        currentChat = db.characters[selectedChar].chats[selectedChat]        
        const triggerResult = await runTrigger(currentChar, 'output', {chat:currentChat})
-        console.log(triggerResult)
        if(triggerResult && triggerResult.chat){
-            db.characters[selectedChar].chats[selectedChat] = triggerResult.chat
+            currentChat = triggerResult.chat
+        }
+        const inlayr = runInlayScreen(currentChar, currentChat.message[msgIndex].data)
+        currentChat.message[msgIndex].data = inlayr.text
+        db.characters[selectedChar].chats[selectedChat] = currentChat
+        setDatabase(db)
+        if(inlayr.promise){
+            const t = await inlayr.promise
+            currentChat.message[msgIndex].data = t
+            db.characters[selectedChar].chats[selectedChat] = currentChat
            setDatabase(db)
        }
        await sayTTS(currentChar, result)
@@ -938,6 +966,8 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
                result2 = await processScriptFull(nowChatroom, reformatContent(beforeChat.data + mess), 'editoutput', msgIndex)
            }
            result = result2.data
+            const inlayResult = runInlayScreen(currentChar, result)
+            result = inlayResult.text
            emoChanged = result2.emoChanged
            if(i === 0 && arg.continue){
                db.characters[selectedChar].chats[selectedChat].message[msgIndex] = {
@@ -950,6 +980,10 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
                        generationId: generationId,
                    }
                }       
+                if(inlayResult.promise){
+                    const p = await inlayResult.promise
+                    db.characters[selectedChar].chats[selectedChat].message[msgIndex].data = p
+                }
            }
            else{
                db.characters[selectedChar].chats[selectedChat].message.push({
@@ -962,6 +996,11 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
                        generationId: generationId,
                    }
                })
+                const ind = db.characters[selectedChar].chats[selectedChat].message.length - 1
+                if(inlayResult.promise){
+                    const p = await inlayResult.promise
+                    db.characters[selectedChar].chats[selectedChat].message[ind].data = p
+                }
            }
            db.characters[selectedChar].reloadKeys += 1
            await sayTTS(currentChar, result)
@@ -1005,6 +1044,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
        }
    }

+    if(!currentChar.inlayViewScreen){
        if(currentChar.viewScreen === 'emotion' && (!emoChanged) && (abortSignal.aborted === false)){

            let currentEmotion = currentChar.emotionImages
@@ -1198,10 +1238,7 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
            }


-        const ch = await stableDiff(currentChar, msgStr)
-        if(ch){
-            db.characters[selectedChar].chats[selectedChat].sdData = ch
-            setDatabase(db)
+            await stableDiff(currentChar, msgStr)
        }
    }

--- a/src/ts/process/inlayScreen.ts
+++ b/src/ts/process/inlayScreen.ts
@@ -0,0 +1,97 @@
+import { writeInlayImage } from "../image";
+import type { character } from "../storage/database";
+import { generateAIImage } from "./stableDiff";
+
+const imggenRegex = [/<ImgGen="(.+?)">/gi, /{{ImgGen="(.+?)"}}/gi] as const
+
+export function runInlayScreen(char:character, data:string):{text:string, promise?:Promise<string>} {
+    if(char.inlayViewScreen){      
+        if(char.viewScreen === 'emotion'){
+            return {text: data.replace(/<Emotion="(.+?)">/gi, '{{emotion::$1}}')}
+        }
+        if(char.viewScreen === 'imggen'){
+            return {
+                text: data.replace(imggenRegex[0],'[Generating...]').replace(imggenRegex[1],'[Generating...]'),
+                promise : (async () => {
+                    for(const regex of imggenRegex){
+                        const promises:Promise<string|false>[] = [];
+                        const neg = char.newGenData.negative
+                        data.replace(regex, (match, p1) => {
+                            const prompt = char.newGenData.prompt.replaceAll('{{slot}}', p1)
+                            promises.push((async () => {
+                                const v = await generateAIImage(prompt, char, neg, 'inlay')
+                                if(!v){
+                                    return ''
+                                }
+                                const imgHTML = new Image()
+                                imgHTML.src = v
+                                const inlay = await writeInlayImage(imgHTML)
+                                return inlay
+                            })())
+                            return match
+                        })
+                        const d = await Promise.all(promises)
+                        data = data.replace(regex, () => {
+                            const result = d.shift()
+                            if(result === false){
+                                return ''
+                            }
+                            return result
+                        })
+                    }
+                    return data
+                })()
+            }
+        }
+        
+    }
+
+    return {text: data}
+}
+
+export function updateInlayScreen(char:character):character {
+    switch(char.viewScreen){
+        case 'emotion':
+            if(char.inlayViewScreen){
+                char.newGenData = {
+                    prompt: '',
+                    negative: '',
+                    instructions: '',
+                    emotionInstructions: `You must always output the character's emotional image as a command at the end of a conversation. The command must be selected from a given list, and it's better to have variety than to repeat images used in previous chats. Use one image, depending on the character's emotion. See the list below. Form: <Emotion="<image command>"> Example: <Emotion="Agree"> List of commands: {{slot}}`,
+                }
+                return char
+            }
+            char.newGenData = {
+                prompt: '',
+                negative: '',
+                instructions: '',
+                emotionInstructions: `You must always output the character's emotional image as a command. The command must be selected from a given list, only output the command, depending on the character's emotion. List of commands: {{slot}}`
+            }
+            return char
+        case 'imggen':
+            if(char.inlayViewScreen){
+                char.newGenData = {
+                    prompt: 'best quality, {{slot}}',
+                    negative: 'worse quality',
+                    instructions: 'You must always output the character\'s image as a keyword-formatted prompts that can be used in stable diffusion  at the end of a conversation. Use one image, depending on character, place, situation, etc. keyword should be long enough. Form: <ImgGen="<keyword-formatted prompt>">',
+                    emotionInstructions: ''
+                }
+                return char
+            }
+            char.newGenData = {
+                prompt: 'best quality, {{slot}}',
+                negative: 'worse quality',
+                instructions: 'You must always output the character\'s image as a keyword-formatted prompts that can be used in stable diffusion. only output the that prompt, depending on character, place, situation, etc. keyword should be long enough.',
+                emotionInstructions: ''
+            }
+            return char
+        default:
+            char.newGenData = {
+                prompt: '',
+                negative: '',
+                instructions: '',
+                emotionInstructions: ''
+            }
+            return char
+    }
+}
--- a/src/ts/process/processzip.ts
+++ b/src/ts/process/processzip.ts
@@ -1,8 +1,8 @@
-import JSZip from "jszip";

 export async function processZip(dataArray: Uint8Array): Promise<string> {
+    const jszip = await import("jszip");
    const blob = new Blob([dataArray], { type: "application/zip" });
-    const zip = new JSZip();
+    const zip = new jszip.default();
    const zipData = await zip.loadAsync(blob);

    const imageFile = Object.keys(zipData.files).find(fileName => /\.(jpg|jpeg|png)$/.test(fileName));
--- a/src/ts/process/stableDiff.ts
+++ b/src/ts/process/stableDiff.ts
@@ -6,11 +6,7 @@ import { globalFetch, readImage } from "../storage/globalApi"
 import { CharEmotion } from "../stores"
 import type { OpenAIChat } from "."
 import { processZip } from "./processzip"
-import { convertToBase64 } from "./uinttobase64" 
-import type { List } from "lodash"
-import { generateRandomSeed } from "./generateSeed"
 export async function stableDiff(currentChar:character,prompt:string){
-    const mainPrompt = "assistant is a chat analyzer.\nuser will input a data of situation with key and values before chat, and a chat of a user and character.\nView the status of the chat and change the data.\nif data's key starts with $, it must change it every time.\nif data value is none, it must change it."
    let db = get(DataBase)

    if(db.sdProvider === ''){
@@ -18,53 +14,14 @@ export async function stableDiff(currentChar:character,prompt:string){
        return false
    }

-    let proompt = 'Data:'

-    let currentSd:[string,string][] = []
-
-    const sdData = currentChar.chats[currentChar.chatPage].sdData
-    if(sdData){
-        const das = sdData.split('\n')
-        for(const data of das){
-            const splited = data.split(':::')
-            currentSd.push([splited[0].trim(), splited[1].trim()])
-        }
-    }
-    else{
-        currentSd = JSON.parse(JSON.stringify(currentChar.sdData))
-    }
-
-    for(const d of currentSd){
-        let val = d[1].trim()
-        if(val === ''){
-            val = 'none'
-        }
-
-        if(!d[0].startsWith('|') || d[0] === 'negative' || d[0] === 'always'){
-            proompt += `\n${d[0].trim()}: ${val}`
-        }
-    }
-
-    proompt += `\n\nChat:\n${prompt}`
+    const proompt = `Chat:\n${prompt}`

    const promptbody:OpenAIChat[] = [
        {

            role:'system',
-            content: mainPrompt
-        },
-        {
-            role: 'user',
-            content: `Data:\ncharacter's appearance: red hair, cute, black eyes\ncurrent situation: none\n$character's pose: none\n$character's emotion: none\n\nChat:\nuser: *eats breakfeast* \n I'm ready.\ncharacter: Lemon waits patiently outside your room while you get ready. Once you are dressed and have finished your breakfast, she escorts you to the door.\n"Have a good day at school, Master. Don't forget to study hard and make the most of your time there," Lemon reminds you with a smile as she sees you off.`
-        },
-        {
-            role: 'assistant',
-            content: "character's appearance: red hair, cute, black eyes\ncurrent situation:  waking up in the morning\n$character's pose: standing\n$character's emotion: apologetic"
-        },
-        {
-
-            role:'system',
-            content: mainPrompt
+            content: currentChar.newGenData.instructions
        },
        {
            role: 'user',
@@ -72,7 +29,6 @@ export async function stableDiff(currentChar:character,prompt:string){
        },
    ]

-    console.log(proompt)
    const rq = await requestChatData({
        formated: promptbody,
        currentChar: currentChar,
@@ -86,38 +42,20 @@ export async function stableDiff(currentChar:character,prompt:string){
        alertError(`${rq.result}`)
        return false
    }
-    else{
-        const res = rq.result
-        const das = res.split('\n')
-        for(const data of das){
-            const splited = data.split(':')
-            if(splited.length === 2){
-                for(let i=0;i<currentSd.length;i++){
-                    if(currentSd[i][0].trim() === splited[0]){
-                        currentSd[i][1] = splited[1].trim()
-                    }
-                }
-            }
-        }
+
+    const r = rq.result
+
+
+    const genPrompt = currentChar.newGenData.prompt.replaceAll('{{slot}}', r)
+    const neg = currentChar.newGenData.negative
+
+    return await generateAIImage(genPrompt, currentChar, neg, '')
 }

-    let returnSdData = currentSd.map((val) => {
-        return val.join(':::')
-    }).join('\n')
-
+export async function generateAIImage(genPrompt:string, currentChar:character, neg:string, returnSdData:string){
+    const db = get(DataBase)
    if(db.sdProvider === 'webui'){

-        let prompts:string[] = []
-        let neg = ''
-        for(let i=0;i<currentSd.length;i++){
-            if(currentSd[i][0] !== 'negative'){
-                prompts.push(currentSd[i][1])
-            }
-            else{
-                neg = currentSd[i][1]
-            }
-        }
-

        const uri = new URL(db.webUiUrl)
        uri.pathname = '/sdapi/v1/txt2img'
@@ -129,7 +67,7 @@ export async function stableDiff(currentChar:character,prompt:string){
                    "seed": -1,
                    "steps": db.sdSteps,
                    "cfg_scale": db.sdCFG,
-                    "prompt": prompts.join(','),
+                    "prompt": genPrompt,
                    "negative_prompt": neg,
                    "sampler_name": db.sdConfig.sampler_name,
                    "enable_hr": db.sdConfig.enable_hr,
@@ -142,6 +80,16 @@ export async function stableDiff(currentChar:character,prompt:string){
                }
            })   

+            if(returnSdData === 'inlay'){
+                if(da.ok){
+                    return `data:image/png;base64,${da.data.images[0]}`
+                }
+                else{
+                    alertError(JSON.stringify(da.data))
+                    return ''
+                }
+            }
+
            if(da.ok){
                let charemotions = get(CharEmotion)
                const img = `data:image/png;base64,${da.data.images[0]}`
@@ -165,39 +113,32 @@ export async function stableDiff(currentChar:character,prompt:string){
    }
    if(db.sdProvider === 'novelai'){

-        let prompts:string[] = []
-        let neg = ''
-        for(let i=0;i<currentSd.length;i++){
-            if(currentSd[i][0] !== 'negative'){
-                prompts.push(currentSd[i][1])
-            }
-            else{
-                neg = currentSd[i][1]
-            }
-        }
-
-
-
        let reqlist= {}

        if(db.NAII2I){
+            genPrompt = genPrompt
+                .replaceAll('\\(', "♧")
+                .replaceAll('\\)', "♤")
+                .replaceAll('(','{')
+                .replaceAll(')','}')
+                .replaceAll('♧','(')
+                .replaceAll('♤',')')
+
            let base64img = ''
            if(db.NAIImgConfig.image === ''){
                const charimg = currentChar.image;
                
                const img = await readImage(charimg)
-                const base64 = await convertToBase64(img);
-                base64img = base64.split('base64,')[1];
+                base64img = Buffer.from(img).toString('base64');
            }   else{
-                base64img = db.NAIImgConfig.image.split('base64,')[1];
+                base64img = Buffer.from(await readImage(db.NAIImgConfig.image)).toString('base64');
            }
            
-            let randomseed = generateRandomSeed(10);
-            let seed = parseInt(randomseed, 10);
+            let seed = Math.floor(Math.random() * 100000000000)
            reqlist = {
                body: {
                    "action": "img2img",
-                    "input": prompts.join(','),
+                    "input": genPrompt,
                    "model": db.NAIImgModel,
                    "parameters": {
                        "seed": seed,
@@ -225,12 +166,13 @@ export async function stableDiff(currentChar:character,prompt:string){
                },
                headers:{
                    "Authorization": "Bearer " + db.NAIApiKey
-                }
+                },
+                rawResponse: true
            }
        }else{
            reqlist = {
                body: {
-                    "input": prompts.join(','),
+                    "input": genPrompt,
                    "model": db.NAIImgModel,
                    "parameters": {
                        "width": db.NAIImgConfig.width,
@@ -245,13 +187,26 @@ export async function stableDiff(currentChar:character,prompt:string){
                },
                headers:{
                    "Authorization": "Bearer " + db.NAIApiKey
-                }
+                },
+                rawResponse: true
+
            }
        }
        try {
            const da = await globalFetch(db.NAIImgUrl, reqlist)   

-            if(da){
+            if(returnSdData === 'inlay'){
+                if(da.ok){
+                    const img = await processZip(da.data);
+                    return img
+                }
+                else{
+                    alertError(Buffer.from(da.data).toString())
+                    return ''
+                }
+            }
+
+            if(da.ok){
                let charemotions = get(CharEmotion)
                const img = await processZip(da.data);
                const emos:[string, string,number][] = [[img, img, Date.now()]]
@@ -259,7 +214,7 @@ export async function stableDiff(currentChar:character,prompt:string){
                CharEmotion.set(charemotions)
            }
            else{
-                alertError(JSON.stringify(da.data))
+                alertError(Buffer.from(da.data).toString())
                return false   
            }

--- a/src/ts/process/uinttobase64.ts
+++ b/src/ts/process/uinttobase64.ts
@@ -1,17 +0,0 @@
-export async function convertToBase64(data: Uint8Array): Promise<string> {
-    return new Promise((resolve, reject) => {
-        const blob = new Blob([data]);
-        const reader = new FileReader();
-
-        reader.onloadend = function() {
-            const base64String = reader.result as string;
-            resolve(base64String);
-        };
-
-        reader.onerror = function(error) {
-            reject(error);
-        };
-
-        reader.readAsDataURL(blob);
-    });
-}
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -15,7 +15,7 @@ import type { OobaChatCompletionRequestParams } from '../model/ooba';

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

 export function setDatabase(data:Database){
@@ -588,6 +588,12 @@ export interface character{
    globalLore: loreBook[]
    chaId: string
    sdData: [string, string][]
+    newGenData?: {
+        prompt: string,
+        negative: string,
+        instructions: string,
+        emotionInstructions: string,
+    }
    customscript: customscript[]
    triggerscript: triggerscript[]
    utilityBot: boolean
@@ -641,6 +647,7 @@ export interface character{
    extentions?:{[key:string]:any}
    largePortrait?:boolean
    lorePlus?:boolean
+    inlayViewScreen?:boolean
 }


--- a/src/ts/storage/globalApi.ts
+++ b/src/ts/storage/globalApi.ts
@@ -685,16 +685,6 @@ export async function globalFetch(url:string, arg:{
                        headers: headers,
                        method: method
                    })
-                    if(da.headers.get('content-type')?.includes('application/x-zip-compressed')){
-                        const daText = await da.blob()
-                        
-                        addFetchLog(daText, da.ok && da.status >= 200 && da.status < 300)
-                        return {
-                            ok: da.ok && da.status >= 200 && da.status < 300,
-                            data: daText,
-                            headers: Object.fromEntries(da.headers)
-                        }   
-                    }
                    const daText = await da.text()
                    try {
                        const dat = JSON.parse(daText)
--- a/src/ts/stores.ts
+++ b/src/ts/stores.ts
@@ -49,6 +49,7 @@ function createSimpleCharacter(char:character|groupChat){
        chaId: char.chaId,
        additionalAssets: char.additionalAssets,
        virtualscript: char.virtualscript,
+        emotionImages: char.emotionImages,
    }

    return simpleChar
@@ -71,7 +72,9 @@ function updateCurrentCharacter(){
    if(isEqual(gotCharacter, currentChar)){
        return
    }
+    if((currentChar?.viewScreen === 'vn') !== get(ShowVN)){
        ShowVN.set(currentChar?.viewScreen === 'vn')   
+    }

    console.log("Character updated")
    CurrentCharacter.set(cloneDeep(currentChar))
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"1.59.9"}
+{"version":"1.60.1"}