From 1e3574754e4d1629b85566d8139647653f2e1713 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Sun, 8 Sep 2024 18:22:13 +0900
Subject: [PATCH] Add prompt preview

---
 src/lang/en.ts                  |  1 +
 src/lib/SideBars/DevTool.svelte | 38 ++++++++++++++++++++++++++++++---
 src/ts/process/index.ts         | 14 +++++++++++-
 3 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 0c3c6685..1a82b1d2 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -699,4 +699,5 @@ export const languageEnglish = {
     selectFile: "Select File",
     namespace: "Namespace",
     moduleIntergration: "Module Integration",
+    previewInfo: "This preview shows prompt before model-specific processing.",
 }
\ No newline at end of file
diff --git a/src/lib/SideBars/DevTool.svelte b/src/lib/SideBars/DevTool.svelte
index 74f05a78..3f995e22 100644
--- a/src/lib/SideBars/DevTool.svelte
+++ b/src/lib/SideBars/DevTool.svelte
@@ -4,7 +4,7 @@
     import NumberInput from "../UI/GUI/NumberInput.svelte";
     import Button from "../UI/GUI/Button.svelte";
     import { getRequestLog } from "src/ts/storage/globalApi";
-    import { alertMd } from "src/ts/alert";
+    import { alertMd, alertWait } from "src/ts/alert";
     import Arcodion from "../UI/Arcodion.svelte";
     import { getCharToken, getChatToken } from "src/ts/tokenizer";
     import { tokenizePreset } from "src/ts/process/prompt";
@@ -13,7 +13,7 @@
   import { FolderUpIcon, PlusIcon, TrashIcon } from "lucide-svelte";
   import { selectSingleFile } from "src/ts/util";
   import { file } from "jszip";
-  import { doingChat, sendChat } from "src/ts/process";
+  import { doingChat, previewFormated, sendChat } from "src/ts/process";
 
     
     let autopilot = []
@@ -148,6 +148,38 @@
         doingChat.set(false)
     }}>Run</Button>
 </Arcodion>
+
 <Button className="mt-2" on:click={() => {
     alertMd(getRequestLog())
-}}>Request Log</Button>
\ No newline at end of file
+}}>Request Log</Button>
+
+<Button className="mt-2" on:click={async () => {
+    if($doingChat){
+        return false
+    }
+    alertWait("Loading...")
+    await sendChat(-1, {
+        preview: true
+    })
+
+    let md = ''
+    const styledRole = {
+        "function": "📐 Function",
+        "user": "😐 User",
+        "system": "⚙️ System",
+        "assistant": "✨ Assistant",
+    }
+    for(let i=0;i<previewFormated.length;i++){
+        
+        md += '### ' + (styledRole[previewFormated[i].role] ?? '🤔 Unknown role') + '\n'
+        const modals = previewFormated[i].multimodals
+
+        if(modals && modals.length > 0){
+            md += `> ${modals.length} non-text content(s) included\n` 
+        }
+
+        md += '```\n' + previewFormated[i].content.replaceAll('```', '\\`\\`\\`') + '\n```\n'
+    }
+    $doingChat = false
+    alertMd(md)
+}}>Preview Prompt</Button>
\ No newline at end of file
diff --git a/src/ts/process/index.ts b/src/ts/process/index.ts
index 86312035..e4a94e19 100644
--- a/src/ts/process/index.ts
+++ b/src/ts/process/index.ts
@@ -56,8 +56,15 @@ export interface OpenAIChatFull extends OpenAIChat{
 export const doingChat = writable(false)
 export const chatProcessStage = writable(0)
 export const abortChat = writable(false)
+export let previewFormated:OpenAIChat[] = []
 
-export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:number,signal?:AbortSignal,continue?:boolean,usedContinueTokens?:number} = {}):Promise<boolean> {
+export async function sendChat(chatProcessIndex = -1,arg:{
+    chatAdditonalTokens?:number,
+    signal?:AbortSignal,
+    continue?:boolean,
+    usedContinueTokens?:number,
+    preview?:boolean
+} = {}):Promise<boolean> {
 
     chatProcessStage.set(0)
     const abortSignal = arg.signal ?? (new AbortController()).signal
@@ -1090,6 +1097,11 @@ export async function sendChat(chatProcessIndex = -1,arg:{chatAdditonalTokens?:n
         maxContext: maxContextTokens,
     }
     chatProcessStage.set(3)
+    if(arg.preview){
+        previewFormated = formated
+        return true
+    }
+
     const req = await requestChatData({
         formated: formated,
         biasString: biases,