From 5173ba066ad7f40671c4a6c86896f07f24420754 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Mon, 6 May 2024 10:19:25 +0200
Subject: [PATCH 1/7] initial commit

---
 mikupad.html | 307 +++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 250 insertions(+), 57 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 07e1ea1..f7d4024 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -683,6 +683,9 @@
 html.nockoffAI .SelectBox > select:disabled {
 	background: var(--color-disabled);
 }
+.relative {
+	position: relative;
+}
 
 .Checkbox {
 	user-select: none;
@@ -780,6 +783,17 @@
 	top: 1.45em;
 	right: 5px;
 }
+.token-counter {
+	pointer-events: none;
+	position:absolute;
+	bottom:0;
+	right:0;
+	transform: translate(0%,-50%);
+	color: var(--color-base-50);
+	background: color-mix(in srgb, var(--color-base-30), transparent 50%);
+}.token-counter::after {
+	content:" Tokens";
+}
 button:hover {
 	background: var(--color-base-40);
 }
@@ -1930,14 +1944,19 @@
 					<${InputBox} label="Suffix" type="text" placeholder="[/INST]"
 						readOnly=${!!cancel} value=${memoryTokens.suffix} onValueChange=${(value) => handleMemoryTokensChange("suffix", value)}/>
 				</div>
-				<textarea
-					readOnly=${!!cancel}
-					placeholder="Anything written here will be injected at the head of the prompt. Tokens here DO count towards the Context Limit."
-					defaultValue=${memoryTokens.text}
-					value=${memoryTokens.text}
-					onInput=${(e) => handleMemoryTokensChange("text", e.target.value) }
-					class="expanded-text-area-settings"
-					id="memory-area-settings"/>
+				<div class="relative">
+					<textarea
+						readOnly=${!!cancel}
+						placeholder="Anything written here will be injected at the head of the prompt. Tokens here DO count towards the Context Limit."
+						defaultValue=${memoryTokens.text}
+						value=${memoryTokens.text}
+						onInput=${(e) => handleMemoryTokensChange("text", e.target.value) }
+						class="expanded-text-area-settings"
+						id="memory-area-settings"/>
+					<div class="token-counter">
+						${memoryTokens.tokens}
+					</div>
+				</div>
 			</${Modal}>`;
 }
 
@@ -1959,14 +1978,19 @@
 					<${InputBox} label="AN Injection Depth (0-N)" type="number" step="1"
 						readOnly=${!!cancel} value=${authorNoteDepth} onValueChange=${handleAuthorNoteDepthChange}/>
 				</div>
-				<textarea
-					readOnly=${!!cancel}
-					placeholder="Anything written here will be injected ${authorNoteDepth} newlines from bottom into context."
-					defaultValue=${authorNoteTokens.text}
-					value=${authorNoteTokens.text}
-					onInput=${(e) => handleauthorNoteTokensChange("text", e.target.value) }
-					class="expanded-text-area-settings"
-					id="expanded-an-settings"/>
+				<div class="relative">
+					<textarea
+						readOnly=${!!cancel}
+						placeholder="Anything written here will be injected ${authorNoteDepth} newlines from bottom into context."
+						defaultValue=${authorNoteTokens.text}
+						value=${authorNoteTokens.text}
+						onInput=${(e) => handleauthorNoteTokensChange("text", e.target.value) }
+						class="expanded-text-area-settings"
+						id="expanded-an-settings"/>
+					<div class="token-counter">
+						${authorNoteTokens.tokens}
+					</div>
+				</div>
 			</${Modal}>`;
 }
 
@@ -3360,6 +3384,7 @@
 	const sessionReconnectTimer = useRef();
 	const useScrollSmoothing = useRef(true);
 	const [templates, setTemplates] = useDBTemplates(defaultPresets.instructTemplates);
+	const [templateReplacements, setTemplateReplacements] = useState({});
 	const [addDeleteTemplate, setAddDeleteTemplate] = useState(false);
 	const [templatesImport, setTemplatesImport] = useState(false);
 	const [selectedTemplate, setSelectedTemplate] = usePersistentState('template', "Llama 3");
@@ -3405,6 +3430,8 @@
 	const [openaiPresets, setOpenaiPresets] = useSessionState('openaiPresets', defaultPresets.openaiPresets);
 	const [rejectedAPIKey, setRejectedAPIKey] = useState(false);
 	const [openaiModels, setOpenaiModels] = useState([]);
+	const [nKeepTimeout, setNKeepTimeout] = useState(false);
+	const [nKeep, setNKeep] = useState(0);
 	const [tokens, setTokens] = useState(0);
 	const [predictStartTokens, setPredictStartTokens] = useState(0);
 	const [lastError, setLastError] = useState(undefined);
@@ -3420,13 +3447,162 @@
 	const [authorNoteDepth, setAuthorNoteDepth] = useSessionState('authorNoteDepth', defaultPresets.authorNoteDepth);
 	const [worldInfo, setWorldInfo] = useSessionState('worldInfo', defaultPresets.worldInfo);
 
+
+	function replacePlaceholders(string,placeholders) {
+		return string.replace(/\{[^}]+\}/g, function (placeholder) {
+			return placeholders.hasOwnProperty(placeholder)
+				? placeholders[placeholder]
+				: placeholder;
+		}).replace(/\\n/g, '\n')
+	};
+	useMemo(() => {
+		setTemplateReplacements({
+			"{inst}": templates[selectedTemplate]?.instPre && templates[selectedTemplate]?.instPre !== ""
+				? templates[selectedTemplate]?.instPre
+				: "",
+			"{/inst}": templates[selectedTemplate]?.instSuf && templates[selectedTemplate]?.instSuf !== ""
+				? templates[selectedTemplate]?.instSuf
+				: "",
+			"{sys}": templates[selectedTemplate]?.sysPre && templates[selectedTemplate]?.sysPre !== ""
+				? templates[selectedTemplate]?.sysPre
+				: "",
+			"{/sys}": templates[selectedTemplate]?.sysSuf && templates[selectedTemplate]?.sysSuf !== ""
+				? templates[selectedTemplate]?.sysSuf
+				: "",
+		})
+	}, [selectedTemplate,templates])
+
 	// AN and Memory
 	function handleauthorNoteTokensChange(key,value) {
 		setAuthorNoteTokens((prevauthorNoteTokens) => ({ ...prevauthorNoteTokens, [key]: value }));
 	}
+	// token counts for an
+	useEffect(() => {
+		setNKeepTimeout(false)
+		const order = ["prefix","text","suffix"]
+		const assembled = authorNoteTokens.text && authorNoteTokens.text !== ""
+			? order.map(key => authorNoteTokens[key]).join("")
+			: "";	
+		console.log(assembled)
+		if (assembled == "" || endpointAPI == 3) {
+			setAuthorNoteTokens((prevauthorNoteTokens) => ({ ...prevauthorNoteTokens, "tokens": 0 }))
+			console.log("TOKEN COUNT",0)
+			return
+		}
+		const ac = new AbortController();
+		const to = setTimeout(async () => {
+			try {
+				const tokenCount = await getTokenCount({
+					endpoint,
+					endpointAPI,
+					...(endpointAPI == 3 || endpointAPI == 0 ? { endpointAPIKey } : {}),
+					content: `${replacePlaceholders(assembled,templateReplacements)}`,
+					signal: ac.signal,
+					...(isMikupadEndpoint ? { proxyEndpoint: sessionStorage.proxyEndpoint } : {})
+				});
+				setAuthorNoteTokens((prevauthorNoteTokens) => ({
+					...prevauthorNoteTokens,
+					"tokens": tokenCount - 1 
+				}));
+				console.log("TOKEN COUNT",tokenCount)
+			} catch (e) {
+				if (e.name !== 'AbortError'){
+					reportError(e);
+					setNKeepTimeout(true)
+					setAuthorNoteTokens((prevauthorNoteTokens) => ({ ...prevauthorNoteTokens, "tokens": 0 }))
+				}	
+			}
+		}, 500);
+
+		ac.signal.addEventListener('abort', () => clearTimeout(to));
+		return () => ac.abort();
+	},[authorNoteTokens.text,authorNoteTokens.prefix,authorNoteTokens.suffix,cancel,endpoint,endpointAPI])
+
 	function handleMemoryTokensChange(key,value) {
 		setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, [key]: value }));
 	}
+	// token counts for memory
+	useEffect(() => {
+		setNKeepTimeout(false)
+		const order = ["prefix","text","suffix"]
+		const assembled = memoryTokens.text && memoryTokens.text !== ""
+			? order.map(key => memoryTokens[key]).join("")
+			: "";	
+		console.log(replacePlaceholders(assembled,templateReplacements))
+		if (assembled == "" || endpointAPI == 3){
+			setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, "tokens": 0 }));
+			console.log("TOKEN COUNT",0)
+			return
+		}
+
+		const ac = new AbortController();
+		const to = setTimeout(async () => {
+			try {
+				const tokenCount = await getTokenCount({
+					endpoint,
+					endpointAPI,
+					...(endpointAPI == 3 || endpointAPI == 0 ? { endpointAPIKey } : {}),
+					content: `${replacePlaceholders(assembled,templateReplacements)}`,
+					signal: ac.signal,
+					...(isMikupadEndpoint ? { proxyEndpoint: sessionStorage.proxyEndpoint } : {})
+				});
+				setMemoryTokens((prevMemoryTokens) => ({
+					...prevMemoryTokens,
+					"tokens": tokenCount - 1 
+				}));
+				console.log("TOKEN COUNT",tokenCount)
+			} catch (e) {
+				if (e.name !== 'AbortError'){
+					reportError(e);
+					setNKeepTimeout(true)
+					setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, "tokens": 0 }));
+				}
+			}
+		}, 500);
+
+		ac.signal.addEventListener('abort', () => clearTimeout(to));
+		return () => ac.abort();
+	},[memoryTokens.text,memoryTokens.prefix,memoryTokens.suffix,cancel,endpoint,endpointAPI])
+	// token counts for wi
+	useEffect(() => {
+		setNKeepTimeout(false)
+		const assembled = memoryTokens.worldInfo && memoryTokens.worldInfo !== ""
+			? [worldInfo.prefix,memoryTokens.worldInfo,worldInfo.suffix].join("")
+			: "";
+		if (assembled == "" || endpointAPI == 3){
+			setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, "tokensWI": 0 }));
+			console.log("TOKEN COUNT",0)
+			return
+		}
+
+		const ac = new AbortController();
+		const to = setTimeout(async () => {
+			try {
+				const tokenCount = await getTokenCount({
+					endpoint,
+					endpointAPI,
+					...(endpointAPI == 3 || endpointAPI == 0 ? { endpointAPIKey } : {}),
+					content: `${replacePlaceholders(assembled,templateReplacements)}`,
+					signal: ac.signal,
+					...(isMikupadEndpoint ? { proxyEndpoint: sessionStorage.proxyEndpoint } : {})
+				});
+				setMemoryTokens((prevMemoryTokens) => ({
+					...prevMemoryTokens,
+					"tokensWI": tokenCount - 1 
+				}));
+				console.log("TOKEN COUNT",tokenCount)
+			} catch (e) {
+				if (e.name !== 'AbortError'){
+					reportError(e);
+					setNKeepTimeout(true)
+					setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, "tokensWI": 0 }));
+				}
+			}
+		}, 500);
+
+		ac.signal.addEventListener('abort', () => clearTimeout(to));
+		return () => ac.abort();
+	},[worldInfo.prefix,memoryTokens.worldInfo,worldInfo.suffix,cancel,endpoint,endpointAPI])
 
 
 
@@ -3559,6 +3735,8 @@
 
 	const promptText = useMemo(() => joinPrompt(promptChunks), [promptChunks]);
 
+	
+
 	// compute separately as I imagine this can get expensive
 	const assembledWorldInfo = useMemo(() => {
 		// assemble non-empty wi
@@ -3602,7 +3780,7 @@
 		return assembledWorldInfo
 	}, [worldInfo]);
 
-	const additionalContextPrompt = useMemo(() => {
+	const [persistentContextTemp,promptRemainderTemp] = useMemo(() => {
 		// add world info to memory for easier assembly
 		memoryTokens["worldInfo"] = assembledWorldInfo;
 
@@ -3629,7 +3807,6 @@
 				? memoryTokens.suffix
 				: "",
 		}
-
 		// prompt length estimation
 		const additionalContext = (Object.values(contextReplacements)
 			.filter(value => typeof value === 'string').join('')).length;
@@ -3638,6 +3815,7 @@
 
 		// trunkate prompt to context limit
 		const truncPrompt = promptText.substring(estimatedContextStart);
+		// since we're now using n_keep for llama and kobold, we could just leave this out
 
 		// make injection depth valid
 		const truncPromptLen = truncPrompt.split('\n').length;
@@ -3659,47 +3837,60 @@
 			? memoryTokens.contextOrder
 			: defaultPresets.memoryTokens.contextOrder;
 
-		// assemble context in order:
-		// the context is (1) split by line, (2) persistent context placeholders are 
-		// replaced, (3) instruct template placeholders are replaced (4) non-empty
-		// lines are joined back together.
-		const permContextPrompt = workingContextOrder.split("\n").map(function (line) {
-			return line.replace(/\{[^}]+\}/g, function (placeholder) {
-				return contextReplacements.hasOwnProperty(placeholder)
-					? contextReplacements[placeholder]
-					: placeholder;
-			});
-		}).filter(function (line) {
-			return line.trim() !== "";
-		}).join("\n").replace(/\\n/g, '\n');
 
-		return permContextPrompt;
+		const splitContextOrder = workingContextOrder.replaceAll("}{","},{").split(",")
+
+		const contextOrderList = [
+			splitContextOrder.slice(0, splitContextOrder.indexOf("{prompt}")).join(""),
+			splitContextOrder.slice(splitContextOrder.indexOf("{prompt}")).join("")
+		]
+		
+
+		const contextList = contextOrderList.map(function (line) {
+				return replacePlaceholders(line,contextReplacements)
+			})
+		
+		// we split the prompt into stuff that comes before the prompt, and stuff that
+		// comes after
+		return [ contextList[0],contextList[1] ]
 	}, [contextLength, promptText, memoryTokens, authorNoteTokens, authorNoteDepth, assembledWorldInfo, worldInfo.prefix, worldInfo.suffix]);
 
-	const modifiedPrompt = useMemo(() => {
-		const templateReplacements = {
-			"{inst}": templates[selectedTemplate]?.instPre && templates[selectedTemplate]?.instPre !== ""
-				? templates[selectedTemplate]?.instPre
-				: "",
-			"{/inst}": templates[selectedTemplate]?.instSuf && templates[selectedTemplate]?.instSuf !== ""
-				? templates[selectedTemplate]?.instSuf
-				: "",
-			"{sys}": templates[selectedTemplate]?.sysPre && templates[selectedTemplate]?.sysPre !== ""
-				? templates[selectedTemplate]?.sysPre
-				: "",
-			"{/sys}": templates[selectedTemplate]?.sysSuf && templates[selectedTemplate]?.sysSuf !== ""
-				? templates[selectedTemplate]?.sysSuf
-				: "",
+
+	// we then replace instruct templates in both
+	const persistentContext = useMemo(() => {
+		return replacePlaceholders(persistentContextTemp,templateReplacements)
+	}, [persistentContextTemp])
+
+	const promptRemainder = useMemo(() => {
+		return replacePlaceholders(promptRemainderTemp,templateReplacements)
+	}, [promptRemainderTemp])
+
+	
+	// and if we use an n_keep compatible backend, we get a count of all the stuff
+	// before the prompt, because that's our memory, and we wanna keep that in context
+	const persistentContextTokenTotal = useEffect(() => {
+		if (endpointAPI == 3) // don't think ooba/openai has n_keep
+			return
+
+		console.log("in memo")
+		if (!persistentContext || nKeepTimeout) {
+			setNKeep(0)
+			return
 		}
-		const finalPrompt = additionalContextPrompt
-			.replace(/\{[^}]+\}/g, function (placeholder) {
-				return templateReplacements.hasOwnProperty(placeholder)
-					? templateReplacements[placeholder]
-					: placeholder;
-			}).replace(/\\n/g, '\n');
+		const calc = (memoryTokens?.tokens||0) + (memoryTokens?.tokensWI||0)
+		console.log("calc",calc)
+		setNKeep(calc + 1)
+	}, [memoryTokens.tokens,memoryTokens.tokensWI,nKeepTimeout]);
+
+
+
+	const modifiedPrompt = useMemo(() => {
+		console.log(nKeep)
+		console.log([persistentContext,promptRemainder])
+		const finalPrompt = [persistentContext,promptRemainder].join("")
 
 		return finalPrompt;
-	}, [additionalContextPrompt, templates, selectedTemplate]);
+	}, [persistentContext, promptRemainder]);
 
 	async function predict(prompt = modifiedPrompt, chunkCount = promptChunks.length) {
 		if (cancel) {
@@ -3788,6 +3979,9 @@
 					} : {})
 				}),
 				n_predict: maxPredictTokens,
+				...(endpointAPI != 3 && nKeep > 0 ? {
+					n_keep: nKeep,
+				} : {}),
 				n_probs: 10,
 				...(JSON.parse(stoppingStrings).length ? { stop: JSON.parse(stoppingStrings) } : {}),
 				signal: ac.signal,
@@ -4007,7 +4201,7 @@
 		}, 500);
 		ac.signal.addEventListener('abort', () => clearTimeout(to));
 		return () => ac.abort();
-	}, [promptText, cancel, endpoint, endpointAPI]);
+	}, [modifiedPrompt, cancel, endpoint, endpointAPI]);
 
 	useEffect(() => {
 		if (endpointAPI != 3)
@@ -4586,7 +4780,7 @@
 			</${CollapsibleGroup}>
 			<${CollapsibleGroup} label="Persistent Context">
 				<label className="TextArea">
-					Memory
+					<div>Memory ${memoryTokens.tokens > 0 ? html`<small>(${memoryTokens.tokens} Tokens)</small>`:""}</div>
 					<textarea
 					readOnly=${!!cancel}
 					placeholder="Anything written here will be injected at the head of the prompt. Tokens here DO count towards the Context Limit."
@@ -4598,12 +4792,11 @@
 					className="textAreaSettings"
 					disabled=${!!cancel}
 					onClick=${() => toggleModal("memory")}>
-
 					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -5 8 7" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 3-3C3-4 3-5 5-5L4-4 5-3 6-4C6-2 5-2 4-2L1 1C0 2-1 1 0 0"></path></svg>
 					</button>
 				</label>
 				<label className="TextArea">
-					Author's Note
+					<div>Author's Note ${authorNoteTokens.tokens > 0 ? html`<small>(${authorNoteTokens.tokens} Tokens)</small>`:""}</div>
 					<textarea
 					readOnly=${!!cancel}
 					placeholder="Anything written here will be injected ${authorNoteDepth} newlines from bottom into context."

From e2a0e6a4308c02b44d2c54d52edad43c89104d99 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sun, 19 May 2024 10:55:01 +0200
Subject: [PATCH 2/7] fixed template change not updating persistent context

---
 mikupad.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index b1fac87..1507397 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3872,11 +3872,11 @@
 	// we then replace instruct templates in both
 	const persistentContext = useMemo(() => {
 		return replacePlaceholders(persistentContextTemp,templateReplacements)
-	}, [persistentContextTemp])
+	}, [persistentContextTemp,selectedTemplate,templates])
 
 	const promptRemainder = useMemo(() => {
 		return replacePlaceholders(promptRemainderTemp,templateReplacements)
-	}, [promptRemainderTemp])
+	}, [promptRemainderTemp,selectedTemplate,templates])
 
 	
 	// and if we use an n_keep compatible backend, we get a count of all the stuff

From 079df2b70a8a2db521af96b6cbcccc160d9c7a75 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sun, 19 May 2024 10:56:55 +0200
Subject: [PATCH 3/7] clean-up

---
 mikupad.html | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 453b090..6cedbf2 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3503,10 +3503,8 @@
 		const assembled = authorNoteTokens.text && authorNoteTokens.text !== ""
 			? order.map(key => authorNoteTokens[key]).join("")
 			: "";	
-		console.log(assembled)
 		if (assembled == "" || endpointAPI == 3) {
 			setAuthorNoteTokens((prevauthorNoteTokens) => ({ ...prevauthorNoteTokens, "tokens": 0 }))
-			console.log("TOKEN COUNT",0)
 			return
 		}
 		const ac = new AbortController();
@@ -3524,7 +3522,6 @@
 					...prevauthorNoteTokens,
 					"tokens": tokenCount - 1 
 				}));
-				console.log("TOKEN COUNT",tokenCount)
 			} catch (e) {
 				if (e.name !== 'AbortError'){
 					reportError(e);
@@ -3548,10 +3545,8 @@
 		const assembled = memoryTokens.text && memoryTokens.text !== ""
 			? order.map(key => memoryTokens[key]).join("")
 			: "";	
-		console.log(replacePlaceholders(assembled,templateReplacements))
 		if (assembled == "" || endpointAPI == 3){
 			setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, "tokens": 0 }));
-			console.log("TOKEN COUNT",0)
 			return
 		}
 
@@ -3570,7 +3565,6 @@
 					...prevMemoryTokens,
 					"tokens": tokenCount - 1 
 				}));
-				console.log("TOKEN COUNT",tokenCount)
 			} catch (e) {
 				if (e.name !== 'AbortError'){
 					reportError(e);
@@ -3591,7 +3585,6 @@
 			: "";
 		if (assembled == "" || endpointAPI == 3){
 			setMemoryTokens((prevMemoryTokens) => ({ ...prevMemoryTokens, "tokensWI": 0 }));
-			console.log("TOKEN COUNT",0)
 			return
 		}
 
@@ -3610,7 +3603,6 @@
 					...prevMemoryTokens,
 					"tokensWI": tokenCount - 1 
 				}));
-				console.log("TOKEN COUNT",tokenCount)
 			} catch (e) {
 				if (e.name !== 'AbortError'){
 					reportError(e);
@@ -3892,21 +3884,17 @@
 		if (endpointAPI == 3) // don't think ooba/openai has n_keep
 			return
 
-		console.log("in memo")
 		if (!persistentContext || nKeepTimeout) {
 			setNKeep(0)
 			return
 		}
 		const calc = (memoryTokens?.tokens||0) + (memoryTokens?.tokensWI||0)
-		console.log("calc",calc)
 		setNKeep(calc + 1)
 	}, [memoryTokens.tokens,memoryTokens.tokensWI,nKeepTimeout]);
 
 
 
 	const modifiedPrompt = useMemo(() => {
-		console.log(nKeep)
-		console.log([persistentContext,promptRemainder])
 		const finalPrompt = [persistentContext,promptRemainder].join("")
 
 		return finalPrompt;

From c7d4a2e0a468962c0e76ca90e03a177fa5264592 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sun, 19 May 2024 11:32:25 +0200
Subject: [PATCH 4/7] added table with token counts to context modal

---
 mikupad.html | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/mikupad.html b/mikupad.html
index 6cedbf2..7569599 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -231,6 +231,7 @@
 	min-height: 4em;
 }
 
+
 #advancedContextPlaceholders {
 	background: var(--color-base-30);
 	margin: 1em auto;
@@ -378,6 +379,7 @@
 	color:var(--color-text);
 }
 html.nockoffAI  #context-order-desc,
+html.nockoffAI  #contextTokensTable,
 html.nockoffAI .modal-desc {
 	color:var(--color-base-80);
 }
@@ -2013,11 +2015,37 @@
 			</${Modal}>`;
 }
 
-function ContextModal({ isOpen, closeModal, memoryTokens, handleMemoryTokensChange, modifiedPrompt, defaultPresets, cancel }) {
+function ContextModal({ isOpen, closeModal, tokens, memoryTokens, authorNoteTokens, handleMemoryTokensChange, modifiedPrompt, defaultPresets, cancel }) {
 	return html`
 		<${Modal} isOpen=${isOpen} onClose=${closeModal}
 			title="Context"
 			description="This is the prompt being sent to your large language model.">
+			<div id="advancedContextPlaceholders">
+			<table id="contextTokensTable" border="1" frame="void" rules="all">
+				<thead>
+					<tr>
+						<th></th>
+						<th>Memory</th>
+						<th>World Info</th>
+						<th>Author's Note</th>
+						<th>Prompt</th>
+						<th></th>
+						<th>Total</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th>Tokens</th>
+						<td>${memoryTokens.tokens}</td>
+						<td>${memoryTokens.tokensWI}</td>
+						<td>${authorNoteTokens.tokens}</td>
+						<td>${tokens - authorNoteTokens.tokens - memoryTokens.tokensWI - memoryTokens.tokens}</td>
+						<td></td>
+						<td>${tokens}</td>
+					</tr>
+				</tbody>
+			</table>
+			</div>
 			<${CollapsibleGroup} label="Advanced Context Ordering">
 				<div id="context-order-desc">
 					You can use the following placeholders to order the context according to your needs:<br />
@@ -4923,7 +4951,9 @@
 		<${ContextModal}
 			isOpen=${modalState.context}
 			closeModal=${() => closeModal("context")}
+			tokens=${tokens}
 			memoryTokens=${memoryTokens}
+			authorNoteTokens=${authorNoteTokens}
 			handleMemoryTokensChange=${handleMemoryTokensChange}
 			modifiedPrompt=${modifiedPrompt}
 			defaultPresets=${defaultPresets}

From 46f7d4ec6a1c1bfa8f6c558810b6dc5c74785b3d Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sun, 19 May 2024 12:00:48 +0200
Subject: [PATCH 5/7] small fix to nKeep logic

---
 mikupad.html | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 7569599..f0a11f8 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3820,7 +3820,7 @@
 		return assembledWorldInfo
 	}, [worldInfo]);
 
-	const [persistentContextTemp,promptRemainderTemp] = useMemo(() => {
+	const [persistentContextTemp,promptRemainderTemp,rawPersistentContext] = useMemo(() => {
 		// add world info to memory for easier assembly
 		memoryTokens["worldInfo"] = assembledWorldInfo;
 
@@ -3884,6 +3884,7 @@
 			splitContextOrder.slice(0, splitContextOrder.indexOf("{prompt}")).join(""),
 			splitContextOrder.slice(splitContextOrder.indexOf("{prompt}")).join("")
 		]
+		const rawPersistentContext = contextOrderList[0]
 		
 
 		const contextList = contextOrderList.map(function (line) {
@@ -3892,7 +3893,7 @@
 		
 		// we split the prompt into stuff that comes before the prompt, and stuff that
 		// comes after
-		return [ contextList[0],contextList[1] ]
+		return [ contextList[0],contextList[1],rawPersistentContext ]
 	}, [contextLength, promptText, memoryTokens, authorNoteTokens, authorNoteDepth, assembledWorldInfo, worldInfo.prefix, worldInfo.suffix]);
 
 
@@ -3916,7 +3917,14 @@
 			setNKeep(0)
 			return
 		}
-		const calc = (memoryTokens?.tokens||0) + (memoryTokens?.tokensWI||0)
+		
+		var calc = 0
+		if (rawPersistentContext.includes("{memText}")) {
+			calc += (memoryTokens?.tokens||0)
+		}
+		if (rawPersistentContext.includes("{wiText}")) {
+			calc += (memoryTokens?.tokensWI||0)
+		}
 		setNKeep(calc + 1)
 	}, [memoryTokens.tokens,memoryTokens.tokensWI,nKeepTimeout]);
 

From 7b75e79c990c3e34a926f8a68c1dafa88ff93271 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Thu, 23 May 2024 17:57:57 +0200
Subject: [PATCH 6/7] fixed merge

---
 mikupad.html | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/mikupad.html b/mikupad.html
index 75d6cb6..95b8663 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3557,6 +3557,7 @@
 	const sessionReconnectTimer = useRef();
 	const useScrollSmoothing = useRef(true);
 	const [templates, setTemplates] = useDBTemplates(defaultPresets.instructTemplates);
+	const [templateReplacements, setTemplateReplacements] = useState(false);
 	const [templatesImport, setTemplatesImport] = useState(false);
 	const [selectedTemplate, setSelectedTemplate] = useSessionState('template', "Llama 3");
 	const [chatMode, setChatMode] = useSessionState('chatMode', false);
@@ -3619,6 +3620,31 @@
 	const [authorNoteDepth, setAuthorNoteDepth] = useSessionState('authorNoteDepth', defaultPresets.authorNoteDepth);
 	const [worldInfo, setWorldInfo] = useSessionState('worldInfo', defaultPresets.worldInfo);
 
+
+	function replacePlaceholders(string,placeholders) {
+		return string.replace(/\{[^}]+\}/g, function (placeholder) {
+			return placeholders.hasOwnProperty(placeholder)
+				? placeholders[placeholder]
+				: placeholder;
+		}).replace(/\\n/g, '\n')
+	};
+	useMemo(() => {
+		setTemplateReplacements({
+			"{inst}": templates[selectedTemplate]?.instPre && templates[selectedTemplate]?.instPre !== ""
+				? templates[selectedTemplate]?.instPre
+				: "",
+			"{/inst}": templates[selectedTemplate]?.instSuf && templates[selectedTemplate]?.instSuf !== ""
+				? templates[selectedTemplate]?.instSuf
+				: "",
+			"{sys}": templates[selectedTemplate]?.sysPre && templates[selectedTemplate]?.sysPre !== ""
+				? templates[selectedTemplate]?.sysPre
+				: "",
+			"{/sys}": templates[selectedTemplate]?.sysSuf && templates[selectedTemplate]?.sysSuf !== ""
+				? templates[selectedTemplate]?.sysSuf
+				: "",
+		})
+	}, [selectedTemplate,templates])
+
 	// AN and Memory
 	function handleauthorNoteTokensChange(key,value) {
 		setAuthorNoteTokens((prevauthorNoteTokens) => ({ ...prevauthorNoteTokens, [key]: value }));

From 9bde86cc33ca5681f7742eecaa3c79e2a2c31ee7 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Thu, 23 May 2024 18:46:24 +0200
Subject: [PATCH 7/7] renamed variable for clarity

---
 mikupad.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 222d5f6..2f38bc9 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3922,7 +3922,7 @@
 		return assembledWorldInfo
 	}, [worldInfo]);
 
-	const [persistentContextTemp,promptRemainderTemp,rawPersistentContext] = useMemo(() => {
+	const [persistentContextTemp,promptRemainderTemp,rawNKeepContext] = useMemo(() => {
 		// add world info to memory for easier assembly
 		memoryTokens["worldInfo"] = assembledWorldInfo;
 
@@ -3987,7 +3987,7 @@
 			splitContextOrder.slice(0, splitContextOrder.indexOf("{prompt}")).join(""),
 			splitContextOrder.slice(splitContextOrder.indexOf("{prompt}")).join("")
 		]
-		const rawPersistentContext = contextOrderList[0]
+		const rawNKeepContext = contextOrderList[0]
 		
 
 		const contextList = contextOrderList.map(function (line) {
@@ -3996,7 +3996,7 @@
 		
 		// we split the prompt into stuff that comes before the prompt, and stuff that
 		// comes after
-		return [ contextList[0],contextList[1],rawPersistentContext ]
+		return [ contextList[0],contextList[1],rawNKeepContext ]
 	}, [contextLength, promptText, memoryTokens, authorNoteTokens, authorNoteDepth, assembledWorldInfo, worldInfo.prefix, worldInfo.suffix]);
 
 
@@ -4022,10 +4022,10 @@
 		}
 		
 		var calc = 0
-		if (rawPersistentContext.includes("{memText}")) {
+		if (rawNKeepContext.includes("{memText}")) {
 			calc += (memoryTokens?.tokens||0)
 		}
-		if (rawPersistentContext.includes("{wiText}")) {
+		if (rawNKeepContext.includes("{wiText}")) {
 			calc += (memoryTokens?.tokensWI||0)
 		}
 		setNKeep(calc + 1)