[feat] added background embedding

2023-06-06 07:17:19 +09:00
parent 33ce7a7254
commit 0ff767e454
8 changed files with 53 additions and 10 deletions
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -81,7 +81,7 @@ export const languageChinese = {
        utilityBot: "激活后，它会忽略主提示词。\n\n**不建议使用此选项。改为修改系统提示词。**",
        loreSelective: "如果已切换选择模式，则激活密钥和次级密钥都应有匹配项才能激活lorebook。",
        loreRandomActivation: "如果启用了使用概率条件，如果lorebook的其他条件都已满足，每次发送聊天时，lorebook将以“概率”设置的概率被激活。",
-        additionalAssets: "在你的聊天中显示的额外资源。 \n\n - 使用 `{{raw::<asset name>}}` 作为路径。\n - 使用 `{{img::<asset name>}}` 作为图片",
+        additionalAssets: "在你的聊天中显示的额外资源。 \n\n - 使用 `{{raw::<asset name>}}` 作为路径。\n - 使用 `{{img::<asset name>}}` 作为图片\n - use `{{video::<asset name>}}` to use as video\n - use `{{audio::<asset name>}}` to use as audio (recommended to put in Background HTML)",
        superMemory: "SuperMemory 通过给 AI 提供总结数据使你的角色记忆更多信息。\n\n"
            + "SuperMemory 模型是一个总结文本的模型。推荐使用Davinci，除非是具有超过2000个token数的高度总结能力的成人模型，否则不推荐使用辅助模型。\n\n"
            + "SuperMemory 提示词决定了应发送什么提示词进行总结。如果你留空，它将使用默认提示词。建议留空。\n\n"
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -80,12 +80,15 @@ export const languageEnglish = {
        utilityBot: "When activated, it ignores main prompt. \n\n**It is not recommended to use this option. Modifiy system prompt instead.**",
        loreSelective: "If Selective mode is toggled, both Activation Key and Secondary key should have a match to activate the lore.",
        loreRandomActivation: "If Use Probability Condition is abled, if the lore's other conditions are all met, the lore will be activated with a set probability which is set by 'Probability' each time a chat is sent.",
-        additionalAssets: "Additional assets to display in your chat. \n\n - use `{{raw::<asset name>}}` to use as path.\n - use `{{img::<asset name>}}` to use as image",
+        additionalAssets: "Additional assets to display in your chat. \n\n - use `{{raw::<asset name>}}` to use as path.\n - use `{{img::<asset name>}}` to use as image\n - use `{{video::<asset name>}}` to use as video\n - use `{{audio::<asset name>}}` to use as audio\n    - recommended to put in Background HTML",
        superMemory: "SuperMemory makes your character memorize more by giving summarized data to AI.\n\n"
        + "SuperMemory model is a model that summarizes that text. davinci is recommended, and Auxiliary models are not recommended unless it is an unfiltered model with over 2000 tokens with great summarizing skill.\n\n"
        + "SuperMemory Prompt decides what prompt should be sent to summarize. if you leave it blank, it will use the default prompt. leaving blank is recommended.\n\n"
        + "After it is all setup, you can able it in the setting of a character.",
-        replaceGlobalNote: "If its not blank, it replaces current global note to this."
+        replaceGlobalNote: "If its not blank, it replaces current global note to this.",
+        backgroundHTML: "A Markdown/HTML Data that would be injected to the background of chat screen.\n\n you can also use additional assets. for example, you can use `{{audio::<asset name}}` for background music."
+            + "\n\n Additionaly, you can use these with additional assets:"
+            + "\n - `{{bg::<asset name>}}`: inject the background as asset"
    },
    setup: {
        chooseProvider: "Choose AI Provider",
@@ -300,5 +303,6 @@ export const languageEnglish = {
    activationProbability: "Probability",
    shareCloud: "Share to RisuRealm",
    hub: "RisuRealm",
-    tags: "Tags"
+    tags: "Tags",
+    backgroundHTML: "Background Embedding"
 }
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -275,5 +275,6 @@ export const languageKorean = {
    talkness: "대화량",
    active: "활성화",
    loreRandomActivation: "확률 조건 사용",
-    activationProbability: "발동 확률"
+    activationProbability: "발동 확률",
+    backgroundHTML: "백그라운드 임베딩"
 }
--- a/src/lib/ChatScreens/BackgroundDom.svelte
+++ b/src/lib/ChatScreens/BackgroundDom.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { ParseMarkdown } from "src/ts/parser";
+  import { DataBase } from "src/ts/storage/database";
+  import { selectedCharID } from "src/ts/stores";
+</script>
+
+
+{#if $selectedCharID > 0 && $DataBase.characters[$selectedCharID].backgroundHTML}
+    <div class="absolute top-0 left-0 w-full h-full">
+        {#await ParseMarkdown($DataBase.characters[$selectedCharID].backgroundHTML, $DataBase.characters[$selectedCharID], 'back') then md} 
+            {@html md}
+        {/await}
+    </div>
+{/if}
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/src/lib/ChatScreens/ChatScreen.svelte
@@ -7,6 +7,7 @@
    import defaultWallpaper from '../../etc/bg.jpg'
    import ChatList from "../Others/ChatList.svelte";
    import TransitionImage from "./TransitionImage.svelte";
+  import BackgroundDom from "./BackgroundDom.svelte";
    let openChatList = false

    const wallPaper = `background: url(${defaultWallpaper})`
@@ -26,16 +27,19 @@
    })()
 </script>
 {#if $DataBase.theme === ''}
-    <div class="flex-grow h-full min-w-0" style={bgImg}>
+    <div class="flex-grow h-full min-w-0 relative" style={bgImg}>
+        
        {#if $selectedCharID >= 0}
            {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
                <ResizeBox />
            {/if}
        {/if}
+        <BackgroundDom />
        <DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} bind:openChatList/>
    </div>
 {:else if $DataBase.theme === 'waifu'}
-    <div class="flex-grow h-full flex justify-center" style="max-width:calc({$sideBarStore ? $SizeStore.w - 400 : $SizeStore.w}px);{bgImg.length < 4 ? wallPaper : bgImg}">
+    <div class="flex-grow h-full flex justify-center relative" style="max-width:calc({$sideBarStore ? $SizeStore.w - 400 : $SizeStore.w}px);{bgImg.length < 4 ? wallPaper : bgImg}">
+        <BackgroundDom />
        {#if $selectedCharID >= 0}
            {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
                <div class="h-full mr-10 flex justify-end halfw" style:width="{42 * ($DataBase.waifuWidth2 / 100)}rem">
@@ -49,6 +53,7 @@
    </div>
 {:else if $DataBase.theme === 'waifuMobile'}
    <div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
+        <BackgroundDom />
        <div class="w-full h-1/3 absolute z-10 bottom-0 left-0">
            <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
        </div>
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -553,6 +553,9 @@
            <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.scenario}></textarea>
        {/if}

+        <span class="text-neutral-200 mt-2">{language.backgroundHTML} <Help key="backgroundHTML" /></span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.backgroundHTML}></textarea>
+
        <span class="text-neutral-200">{language.creator}</span>
        <input class="bg-transparent input-text mt-2 mb-2 text-gray-200 text-xs resize-none h-20 focus:bg-selected" autocomplete="off" bind:value={currentChar.data.additionalData.creator} />

--- a/src/ts/parser.ts
+++ b/src/ts/parser.ts
@@ -26,7 +26,14 @@ DOMPurify.addHook("uponSanitizeElement", (node: HTMLElement, data) => {
    }
 });

-export async function ParseMarkdown(data:string, char:(character | groupChat) = null) {
+DOMPurify.addHook("uponSanitizeAttribute", (node) => {
+    const style = node.getAttribute("style");
+    if(style){
+        node.setAttribute('style', style.replace(/(absolute)|(z-index)|(fixed)/g, ''))
+    }
+})
+
+export async function ParseMarkdown(data:string, char:(character | groupChat) = null, mode:'normal'|'back' = 'normal') {
    if(char && char.type !== 'group'){
        if(char.customscript){
            data = processScript(char, data, 'editdisplay')
@@ -34,7 +41,13 @@ export async function ParseMarkdown(data:string, char:(character | groupChat) =
        if(char.additionalAssets){
            for(const asset of char.additionalAssets){
                const assetPath = await getFileSrc(asset[1])
-                data = data.replaceAll(`{{raw::${asset[0]}}}`, assetPath).replaceAll(`{{img::${asset[0]}}}`,`<img src="${assetPath}" />`)
+                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>`)
+                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>`)
+                }
            }
        }
    }
@@ -46,7 +59,8 @@ export async function ParseMarkdown(data:string, char:(character | groupChat) =

 export function parseMarkdownSafe(data:string) {
    return DOMPurify.sanitize(safeConvertor.makeHtml(data), {
-        FORBID_TAGS: ["a", "style"]
+        FORBID_TAGS: ["a", "style"],
+        FORBID_ATTR: ["style"]
    })
 }

--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -335,6 +335,7 @@ export interface character{
    additionalAssets?:[string, string][]
    ttsReadOnlyQuoted?:boolean
    replaceGlobalNote:string
+    backgroundHTML?:string
 }


@@ -371,6 +372,7 @@ export interface groupChat{
    ttsMode?:string
    suggestMessages?:string[]
    orderByOrder?:boolean
+    backgroundHTML?:string
 }

 export interface botPreset{