Add preset related features

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": "출력 예측",

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 = []
@@ -628,9 +619,41 @@
             {@render CustomFlagButton('mustStartWithUserInput', 10)}
         {/if}
     </Arcodion>
-    
+
-    <Arcodion styled name={language.moduleIntergration} help="moduleIntergration">
+    <Arcodion styled name={language.regexScript}>
-        <TextAreaInput bind:value={DBState.db.moduleIntergration} fullwidth height={"32"} autocomplete="off"/>
+        <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>

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

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}

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

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]){

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)))
     }

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()
     })
 })