Add preset related features

2024-12-26 04:29:14 +09:00
parent c6cc258a50
commit 2672195d92
8 changed files with 78 additions and 30 deletions
--- a/src/lang/ko.ts
+++ b/src/lang/ko.ts
@@ -722,7 +722,7 @@ export const languageKorean = {
    "selectFile": "파일 선택",
    "namespace": "네임스페이스",
    "moduleIntergration": "모듈 통합",
-    "previewInfo": "이 프리뷰는 모델 특화 처리 전에 프롬프트를 보여줍니다.",
+    "previewInfo": "미리보기는 모델 특화 처리 전에 프롬프트를 보여줍니다.",
    "miscTools": "기타 도구",
    "promptConvertion": "프롬프트 변환",
    "convertionStep1": "프롬프트와 관련된 모든 파일을 선택하세요 (컨텍스트, 인스트럭트, 샘플러 JSON을 지원합니다)",
@@ -753,7 +753,7 @@ export const languageKorean = {
    "defineCustomGUI": "커스텀 GUI 정의",
    "chatHTML": "채팅 HTML",
    "logShare": "공유 로그 버튼 보이기",
-    "preview": "프리뷰",
+    "preview": "미리보기",
    "recommended": "추천",
    "newChat": "새 채팅",
    "predictedOutput": "출력 예측",
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -10,7 +10,7 @@
    import { tokenizeAccurate, tokenizerList } from "src/ts/tokenizer";
    import ModelList from "src/lib/UI/ModelList.svelte";
    import DropList from "src/lib/SideBars/DropList.svelte";
-    import { PlusIcon, TrashIcon, FolderUpIcon, DownloadIcon } from "lucide-svelte";
+    import { PlusIcon, TrashIcon, FolderUpIcon, DownloadIcon, UploadIcon } from "lucide-svelte";
    import TextInput from "src/lib/UI/GUI/TextInput.svelte";
    import NumberInput from "src/lib/UI/GUI/NumberInput.svelte";
    import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
@@ -29,6 +29,7 @@
    import { selectSingleFile } from "src/ts/util";
  import { getModelInfo, LLMFlags, LLMFormat, LLMProvider } from "src/ts/model/modellist";
  import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
+  import RegexList from "src/lib/SideBars/Scripts/RegexList.svelte";

    let tokens = $state({
        mainPrompt: 0,
@@ -580,16 +581,6 @@
            {#if submenu !== -1}
                <PromptSettings mode='inline' subMenu={1} />
            {/if}
-            <Check check={!!DBState.db.promptTemplate} name={language.usePromptTemplate} className="mt-4" onChange={async ()=>{
-                const conf = await alertConfirm(language.resetPromptTemplateConfirm)
-                
-                if(conf){
-                    DBState.db.promptTemplate = undefined
-                }
-                else{
-                    DBState.db.promptTemplate = DBState.db.promptTemplate
-                }
-            }}/>
        {:else}
            <Check check={false} name={language.usePromptTemplate} onChange={() => {
                DBState.db.promptTemplate = []
@@ -629,8 +620,40 @@
        {/if}
    </Arcodion>

-    <Arcodion styled name={language.moduleIntergration} help="moduleIntergration">
-        <TextAreaInput bind:value={DBState.db.moduleIntergration} fullwidth height={"32"} autocomplete="off"/>
+    <Arcodion styled name={language.regexScript}>
+        <RegexList bind:value={DBState.db.presetRegex} buttons />
+    </Arcodion>
+
+    <Arcodion styled name={language.icon}>
+        <div class="p-2 rounded-md border border-darkborderc flex flex-col items-center gap-2">
+            <span>
+                {language.preview}
+            </span>
+            <div class="flex items-center justify-center gap-2">
+                {#if DBState.db.botPresets[DBState.db.botPresetsId]?.image}
+                    <img src={DBState.db.botPresets[DBState.db.botPresetsId]?.image} alt="icon" class="w-6 h-6 rounded-md" decoding="async"/>
+                    <span class="text-textcolor2">{DBState.db.botPresets[DBState.db.botPresetsId]?.name}</span>
+                {:else}
+                    <span class="text-textcolor2">{language.noImages}</span>
+                {/if}
+            </div>
+        </div>
+        <button class="mt-2 text-textcolor2 hover:text-textcolor focus-within:text-textcolor" onclick={async () => {
+            const sel = await selectSingleFile(['png', 'jpg', 'jpeg', 'webp'])
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+            const img = new Image()
+            const blob = new Blob([sel.data], {type: "image/png"})
+            img.src = URL.createObjectURL(blob)
+            await img.decode()
+            canvas.width = 48
+            canvas.height = 48
+            ctx.drawImage(img, 0, 0, 48, 48)
+            const data = canvas.toDataURL('image/jpeg', 0.7)
+            DBState.db.botPresets[DBState.db.botPresetsId].image = data //Since its small (max 2304 pixels), its okay to store it directly
+        }}>
+            <UploadIcon />
+        </button>
    </Arcodion>
    {#if submenu !== -1}
        <Button onclick={() => {$openPresetList = true}} className="mt-4">{language.presets}</Button>
--- a/src/lib/Setting/botpreset.svelte
+++ b/src/lib/Setting/botpreset.svelte
@@ -18,7 +18,7 @@
 </script>

 <div class="absolute w-full h-full z-40 bg-black bg-opacity-50 flex justify-center items-center">
-    <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-96 max-h-full overflow-y-auto">
+    <div class="bg-darkbg p-4 break-any rounded-md flex flex-col max-w-3xl w-124 max-h-full overflow-y-auto">
        <div class="flex items-center text-textcolor mb-4">
            <h2 class="mt-0 mb-0">{language.presets}</h2>
            <div class="flex-grow flex justify-end">
@@ -27,7 +27,7 @@
                </button>
            </div>
        </div>
-        {#each DBState.db.botPresets as presets, i}
+        {#each DBState.db.botPresets as preset, i}
            <button onclick={() => {
                if(!editMode){
                    changeToPreset(i)
@@ -38,9 +38,13 @@
                    <TextInput bind:value={DBState.db.botPresets[i].name} placeholder="string" padding={false}/>
                {:else}
                    {#if i < 9}
-                    <span class="w-2 text-center mr-2 text-textcolor2">{i + 1}</span>
+                        <span class="w-2 text-center mr-2 text-textcolor2">{i + 1}</span>
                    {/if}
-                    <span>{presets.name}</span>
+                    {#if preset.image}
+                        <img src={DBState.db.botPresets[DBState.db.botPresetsId]?.image} alt="icon" class="mr-2 min-w-6 min-h-6 w-6 h-6 rounded-md" decoding="async"/>
+
+                    {/if}
+                    <span>{preset.name}</span>
                {/if}
                <div class="flex-grow flex justify-end">
                    <div class="text-textcolor2 hover:text-green-500 cursor-pointer mr-2" role="button" tabindex="0" onclick={(e) => {
@@ -77,7 +81,7 @@
                            alertError(language.errors.onlyOneChat)
                            return
                        }
-                        const d = await alertConfirm(`${language.removeConfirm}${presets.name}`)
+                        const d = await alertConfirm(`${language.removeConfirm}${preset.name}`)
                        if(d){
                            changeToPreset(0)
                            let botPresets = DBState.db.botPresets
--- a/src/lib/SideBars/Scripts/RegexList.svelte
+++ b/src/lib/SideBars/Scripts/RegexList.svelte
@@ -4,11 +4,13 @@
    import Sortable from "sortablejs";
    import { sleep, sortableOptions } from "src/ts/util";
    import { onDestroy, onMount } from "svelte";
+  import { PlusIcon } from "lucide-svelte";
    interface Props {
        value?: customscript[];
+        buttons?: boolean
    }

-    let { value = $bindable([]) }: Props = $props();
+    let { value = $bindable([]), buttons = false }: Props = $props();
    let stb: Sortable = null
    let ele: HTMLDivElement = $state()
    let sorted = $state(0)
@@ -75,3 +77,15 @@
        {/each}
    </div>
 {/key}
+{#if buttons}
+    <button class="w-full mt-2 rounded-md text-textcolor2 hover:text-textcolor focus-within:text-textcolor" onclick={() => {
+        value.push({
+          comment: "",
+          in: "",
+          out: "",
+          type: "editinput"
+        })
+    }}>
+        <PlusIcon />
+    </button>
+{/if}
--- a/src/ts/process/modules.ts
+++ b/src/ts/process/modules.ts
@@ -279,10 +279,6 @@ export function getModules(){
    if (currentChat){
        ids = ids.concat(currentChat.modules ?? [])
    }
-    if(db.moduleIntergration){
-        const intList = db.moduleIntergration.split(',').map((s) => s.trim())
-        ids = ids.concat(intList)
-    }
    const idsJoined = ids.join('-')
    if(lastModules === idsJoined){
        return lastModuleData
--- a/src/ts/process/scripts.ts
+++ b/src/ts/process/scripts.ts
@@ -97,12 +97,12 @@ export function resetScriptCache(){
 export async function processScriptFull(char:character|groupChat|simpleCharacterArgument, data:string, mode:ScriptMode, chatID = -1, cbsConditions:CbsConditions = {}){
    let db = getDatabase()
    const originalData = data
-    const cached = getScriptCache((db.globalscript ?? []).concat(char.customscript), originalData, mode)
+    const cached = getScriptCache((db.presetRegex ?? []).concat(char.customscript), originalData, mode)
    if(cached){
        return {data: cached, emoChanged: false}
    }
    let emoChanged = false
-    const scripts = (db.globalscript ?? []).concat(char.customscript).concat(getModuleRegexScripts())
+    const scripts = (db.presetRegex ?? []).concat(char.customscript).concat(getModuleRegexScripts())
    data = await runLuaEditTrigger(char, mode, data)
    if(pluginV2[mode].size > 0){
        for(const plugin of pluginV2[mode]){
--- a/src/ts/storage/database.svelte.ts
+++ b/src/ts/storage/database.svelte.ts
@@ -5,7 +5,7 @@ import type { RisuPlugin } from '../plugins/plugins';
 import type {triggerscript as triggerscriptMain} from '../process/triggers';
 import { downloadFile, saveAsset as saveImageGlobal } from '../globalApi.svelte';
 import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from './defaultPrompts';
-import { alertNormal, alertSelect } from '../alert';
+import { alertError, alertNormal, alertSelect } from '../alert';
 import type { NAISettings } from '../process/models/nai';
 import { prebuiltNAIpresets, prebuiltPresets } from '../process/templates/templates';
 import { defaultColorScheme, type ColorScheme } from '../gui/colorscheme';
@@ -353,6 +353,7 @@ export function setDatabase(data:Database){
    data.huggingfaceKey ??= ''
    data.fishSpeechKey ??= ''
    data.statistics ??= {}
+    data.presetRegex ??= []
    data.reverseProxyOobaArgs ??= {
        mode: 'instruct'
    }
@@ -860,6 +861,7 @@ export interface Database{
    menuSideBar:boolean
    pluginV2: RisuPlugin[]
    showSavingIcon:boolean
+    presetRegex: customscript[]
 }

 interface SeparateParameters{
@@ -1181,6 +1183,8 @@ export interface botPreset{
    openAIPrediction?: string
    enableCustomFlags?: boolean
    customFlags?: LLMFlags[]
+    image?:string
+    regex?:customscript[]
 }


@@ -1481,6 +1485,7 @@ export function saveCurrentPreset(){
        systemRoleReplacement: db.systemRoleReplacement,
        customFlags: safeStructuredClone(db.customFlags),
        enableCustomFlags: db.enableCustomFlags,
+        regex: db.presetRegex
    }
    db.botPresets = pres
    setDatabase(db)
@@ -1588,6 +1593,7 @@ export function setPreset(db:Database, newPres: botPreset){
    db.systemRoleReplacement = newPres.systemRoleReplacement ?? 'user'
    db.customFlags = safeStructuredClone(newPres.customFlags) ?? []
    db.enableCustomFlags = newPres.enableCustomFlags ?? false
+    db.presetRegex = newPres.regex ?? []
    return db
 }

@@ -1613,6 +1619,12 @@ export async function downloadPreset(id:number, type:'json'|'risupreset'|'return
    pres.proxyKey = ''
    pres.textgenWebUIStreamURL=  ''
    pres.textgenWebUIBlockingURL=  ''
+
+    if((pres.image || pres.regex?.length > 0) && type !== 'return'){
+        alertError("Preset with image or regexes cannot be exported for now. use RisuRealm to share the preset.")
+        return
+    }
+
    if(type === 'json'){
        downloadFile(pres.name + "_preset.json", Buffer.from(JSON.stringify(pres, null, 2)))
    }
--- a/src/ts/stores.svelte.ts
+++ b/src/ts/stores.svelte.ts
@@ -111,7 +111,6 @@ $effect.root(() => {
        DBState?.db?.characters?.[selIdState.selId]?.chats?.[DBState?.db?.characters?.[selIdState.selId]?.chatPage]?.modules?.length
        DBState?.db?.characters?.[selIdState.selId]?.hideChatIcon
        DBState?.db?.characters?.[selIdState.selId]?.backgroundHTML
-        DBState?.db?.moduleIntergration
        moduleUpdate()
    })
 })