From 317a7ab14aebfc4fbd0deb9500ff01ecdbf3d650 Mon Sep 17 00:00:00 2001
From: Concedo <39025047+LostRuins@users.noreply.github.com>
Date: Fri, 16 May 2025 14:49:23 +0800
Subject: [PATCH] updated lite

---
 klite.embd | 209 +++++++++++++++++++++++++++--------------------------
 1 file changed, 108 insertions(+), 101 deletions(-)

diff --git a/klite.embd b/klite.embd
index 76f3e754a..9650fbd08 100644
--- a/klite.embd
+++ b/klite.embd
@@ -12,7 +12,7 @@ Current version indicated by LITEVER below.
 -->
 
 <script>
-	const LITEVER = 241;
+	const LITEVER = 242;
 	const urlParams = new URLSearchParams(window.location.search);
 	var localflag = urlParams.get('local'); //this will be replaced automatically in embedded kcpp
 	const STORAGE_PREFIX = (localflag?"e_":"")+"kaihordewebui_";
@@ -1207,9 +1207,17 @@ Current version indicated by LITEVER below.
 		padding: 4px;
 		clear: both;
 	}
-	.storyimgside
+	.storyimgsidevertical
 	{
-		display: inline-block;
+		width: fit-content;
+		text-align: center;
+		position: relative;
+		padding: 4px;
+		margin: 0;
+	}
+	.storyimgsidehorizontal
+	{
+		display: table-cell;
 		width: fit-content;
 		text-align: center;
 		position: relative;
@@ -2465,6 +2473,12 @@ Current version indicated by LITEVER below.
 	const instructstartplaceholder_end = "\n{{[INPUT_END]}}\n";
 	const instructendplaceholder_end = "\n{{[OUTPUT_END]}}\n";
 	const instructsysplaceholder_end = "\n{{[SYSTEM_END]}}\n";
+	const get_instructstartplaceholder = ()=>{if(localsettings.raw_instruct_tags){return get_instruct_starttag(false);};return instructstartplaceholder;}
+	const get_instructendplaceholder = ()=>{if(localsettings.raw_instruct_tags){return get_instruct_endtag(false);};return instructendplaceholder;}
+	const get_instructsysplaceholder = ()=>{if(localsettings.raw_instruct_tags){return get_instruct_systag(false);};return instructsysplaceholder;}
+	const get_instructstartplaceholder_end = ()=>{if(localsettings.raw_instruct_tags){return get_instruct_starttag_end(false);};return instructstartplaceholder_end;}
+	const get_instructendplaceholder_end = ()=>{if(localsettings.raw_instruct_tags){return get_instruct_endtag_end(false);};return instructendplaceholder_end;}
+	const get_instructsysplaceholder_end = ()=>{if(localsettings.raw_instruct_tags){return get_instruct_systag_end(false);};return instructsysplaceholder_end;}
 
 	// list of all preinstalled quick start scenarios
 	const scenario_db = [
@@ -3268,6 +3282,7 @@ Current version indicated by LITEVER below.
 		img_allowhd: true,
 		img_crop: false,
 		img_newturn: false,
+		img_stacking: false,
 		img_img2imgstr: 0.6,
 		img_clipskip: -1,
 		img_steps: 20,
@@ -3302,6 +3317,7 @@ Current version indicated by LITEVER below.
 		passed_ai_warning: false, //used to store AI safety panel acknowledgement state
 		entersubmit: true, //enter sends the prompt
 		darkmode: true,
+		raw_instruct_tags: false, //experimental flag
 
 		//section migrated from story itself
 		extrastopseq: "",
@@ -4274,9 +4290,9 @@ Current version indicated by LITEVER below.
 	{
 		//scan history for the newest end tag. if none, return empty
 		let truncated_context = concat_gametext(true, "");
-		let strA = instructstartplaceholder;
-		let strB = instructendplaceholder;
-		let strC = instructsysplaceholder;
+		let strA = get_instructstartplaceholder();
+		let strB = get_instructendplaceholder();
+		let strC = get_instructsysplaceholder();
 		let lastA = strA?truncated_context.lastIndexOf(strA):-1;
 		let lastB = strB?truncated_context.lastIndexOf(strB):-1;
 		let lastC = strC?truncated_context.lastIndexOf(strC):-1;
@@ -4284,8 +4300,8 @@ Current version indicated by LITEVER below.
 		const maxIndex = Math.max(lastA, lastB, lastC);
 
 		if (maxIndex === -1) return "";
-		if (maxIndex === lastA) return instructstartplaceholder_end;
-		if (maxIndex === lastB) return instructendplaceholder_end;
+		if (maxIndex === lastA) return get_instructstartplaceholder_end();
+		if (maxIndex === lastB) return get_instructendplaceholder_end();
 		return instructsysplaceholder_end;
 
 	}
@@ -7585,7 +7601,7 @@ Current version indicated by LITEVER below.
 					localsettings.opmode = 4;
 					localsettings.gui_type_instruct = 2;
 					localsettings.inject_chatnames_instruct = true;
-					gametext_arr.push(instructendplaceholder+chatopponent+": "+greeting);
+					gametext_arr.push(get_instructendplaceholder()+chatopponent+": "+greeting);
 				}
 				//handle character book
 				if(obj.character_book && obj.character_book.entries && obj.character_book.entries.length>0)
@@ -11550,6 +11566,7 @@ Current version indicated by LITEVER below.
 		document.getElementById("instruct_starttag_end").value = localsettings.instruct_starttag_end;
 		document.getElementById("instruct_systag_end").value = localsettings.instruct_systag_end;
 		document.getElementById("instruct_endtag_end").value = localsettings.instruct_endtag_end;
+		document.getElementById("raw_instruct_tags").checked = localsettings.raw_instruct_tags;
 		document.getElementById("min_p").value = localsettings.min_p;
 		document.getElementById("dynatemp_range").value = localsettings.dynatemp_range;
 		document.getElementById("dynatemp_exponent").value = localsettings.dynatemp_exponent;
@@ -11772,6 +11789,7 @@ Current version indicated by LITEVER below.
 		document.getElementById("img_allowhd").checked = localsettings.img_allowhd;
 		document.getElementById("img_crop").checked = localsettings.img_crop;
 		document.getElementById("img_newturn").checked = localsettings.img_newturn;
+		document.getElementById("img_stacking").checked = localsettings.img_stacking;
 		document.getElementById("img_autogen").checked = localsettings.img_autogen;
 		document.getElementById("img_gen_from_instruct").checked = localsettings.img_gen_from_instruct;
 		document.getElementById("save_images").checked = localsettings.save_images;
@@ -12071,6 +12089,7 @@ Current version indicated by LITEVER below.
 		localsettings.request_logprobs = (document.getElementById("request_logprobs").checked ? true : false);
 		localsettings.eos_ban_mode = document.getElementById("eos_ban_mode").value;
 		localsettings.persist_session = (document.getElementById("persist_session").checked ? true : false);
+		localsettings.raw_instruct_tags = (document.getElementById("raw_instruct_tags").checked ? true : false);
 		if(document.getElementById("opmode").value==1)
 		{
 			localsettings.gui_type_story = document.getElementById("gui_type").value;
@@ -12234,6 +12253,7 @@ Current version indicated by LITEVER below.
 		localsettings.tokenstreammode = document.getElementById("tokenstreammode").value;
 		localsettings.img_crop = (document.getElementById("img_crop").checked ? true : false);
 		localsettings.img_newturn = (document.getElementById("img_newturn").checked ? true : false);
+		localsettings.img_stacking = (document.getElementById("img_stacking").checked ? true : false);
 		localsettings.img_allowhd = (document.getElementById("img_allowhd").checked ? true : false);
 		localsettings.img_autogen = (document.getElementById("img_autogen").checked ? true : false);
 		localsettings.img_gen_from_instruct = (document.getElementById("img_gen_from_instruct").checked ? true : false);
@@ -14283,9 +14303,9 @@ Current version indicated by LITEVER below.
 
 	function wrap_newgen_instruct_format(newgen, addendtag)
 	{
-		let ist = instructstartplaceholder;
-		let iet = instructendplaceholder;
-		let iste = instructstartplaceholder_end;
+		let ist = get_instructstartplaceholder();
+		let iet = get_instructendplaceholder();
+		let iste = get_instructstartplaceholder_end();
 		let prev_et = get_instruct_latest_end(false);
 
 		if(newgen != "")
@@ -14510,7 +14530,7 @@ Current version indicated by LITEVER below.
 				}
 				else if(localsettings.strip_thinking_mode==1) //strip except recent
 				{
-					let endmatcher = instructendplaceholder;
+					let endmatcher = get_instructendplaceholder();
 					let lastInstructIdx = truncated_context.lastIndexOf(endmatcher);
 					if (lastInstructIdx !== -1) {
 						let beforePart = truncated_context.slice(0, lastInstructIdx); // Split into two parts
@@ -14652,7 +14672,7 @@ Current version indicated by LITEVER below.
 			{
 				if (pending_context_preinjection == "" && truncated_context != "")
 				{
-					let endmatcher = instructendplaceholder;
+					let endmatcher = get_instructendplaceholder();
 					if (truncated_context.toLowerCase().trim().endsWith(endmatcher.toLowerCase().trim())) {
 						if (localsettings.inject_timestamps) {
 							pending_context_preinjection += "[" + (new Date().toLocaleTimeString([], { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' })) + "]";
@@ -16475,15 +16495,36 @@ Current version indicated by LITEVER below.
 		}
 	}
 
-	function render_image_html(data, pend_txt = "", float=true, center=false) {
+	function render_all_image_html(text, float=true, center=false)
+	{
+		let siclass = (float?"storyimgfloat":(center?"storyimgcenter":"storyimgsidevertical"));
+		if(localsettings.img_stacking && !float) //allow horizontal stacking
+		{
+			siclass = "storyimgsidehorizontal"; //horizontal stack
+		}
+		text = text.replace(/\[<\|p\|.+?\|p\|>\]/g, function (m) {
+			// m here means the whole matched string
+			let inner = m.substring(5, m.length - 5);
+			inner = render_image_html("", inner, siclass);
+			return inner;
+		});
+		text = text.replace(/\[<\|d\|.+?\|d\|>\]/g, function (m) {
+			// m here means the whole matched string
+			let inner = m.substring(5, m.length - 5);
+			inner = render_image_html(inner, "", siclass);
+			return inner;
+		});
+		text = text.replace(/\[<\|[\s\S]+?\|>\]/g, ""); //remove normal comments too
+		return text;
+	}
+
+	function render_image_html(data, pend_txt = "", siclass="storyimgfloat") {
 		var dim = (localsettings.opmode == 2 ? 160 : 180); //adventure mode has smaller pictures
 		dimW = dim;
 		dimH = dim;
-		let siclass = (float?"storyimgfloat":(center?"storyimgcenter":"storyimgside"));
 		let reinvertcolor = localsettings.invert_colors?" invert_colors":"";
 		let alttxt = "";
 		let suffix = "";
-		let prefix = ((float==false&&center==false)?"<br>":"");
 		if (!data || data == "") {
 			let waittime = "Unavailable";
 			if (image_db[pend_txt] != null) {
@@ -16494,7 +16535,7 @@ Current version indicated by LITEVER below.
 				console.log("Cannot render " + pend_txt);
 			}
 
-			return prefix + `<div class="`+siclass+reinvertcolor+`" contenteditable="false"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABsSFBcUERsXFhceHBsgKEIrKCUlKFE6PTBCYFVlZF9VXVtqeJmBanGQc1tdhbWGkJ6jq62rZ4C8ybqmx5moq6T/2wBDARweHigjKE4rK06kbl1upKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT/wAARCAEAAQADASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAEDAgQF/8QAIBABAAIBBQEBAQEAAAAAAAAAAAECEgMRMVKRIWFBof/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABETPENNPT3je3jUHm22HpmInljqUx+xwDgAAAAAAAAAAAAAAAAAAAAAAAAABaxvaIRaztaJB6AAEmN4mFSZ2iZB5wAAAAAAAAAAAAAAAAAAAAAAAAAAAaaeptG1vWrzETMcSD0zMRyx1L5fI4cb7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7rpzNd/HAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTT09/s8Gnp7/Z4agONSmX2OXYDzDbUpl9jliAAAAAAAAAAAAAAAAAAAsVmd9o4KVm0/jeIiI2gHnGupp/2vjIAABpp6e/2TT09/s8NQAAAAHGpTL7HLsB5htqUy+xyxAAAAAAAAAAAAAAAWlZtP4UrNp/G8RFY2gCIiI2hQAZ6mn/a+NAHmaaenv8AZ4dzp1m2/wDjoAAAAAAAABxqUy+xy7AeYbalMvscsQAAAAAAAAAAFpWbT+FKzafxvEREbQBEREbQoAAAAAAAAAAAAAAAAAONSmX2OXYDzDbUpl9jliAAAAAAAtKzafxaVm0/jaIiI2gCIiI2hQAAAAAAAAAAAAAAAAAAAAAcalMvscuwHmG2pTL7HLEAAAAFi0xxMwZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6kzvyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/Z" width=` + dim + ` height=` + dim + ` style="border-radius: 6%;" title="`+alttxt+`" alt="` + pend_txt + `"><div class=\"imgloader\"></div><div class=\"imagelabel\">` + waittime + `</div></div>` + suffix;
+			return `<div class="`+siclass+reinvertcolor+`" contenteditable="false"><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDABsSFBcUERsXFhceHBsgKEIrKCUlKFE6PTBCYFVlZF9VXVtqeJmBanGQc1tdhbWGkJ6jq62rZ4C8ybqmx5moq6T/2wBDARweHigjKE4rK06kbl1upKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKSkpKT/wAARCAEAAQADASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAAAAEDAgQF/8QAIBABAAIBBQEBAQEAAAAAAAAAAAECEgMRMVKRIWFBof/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwD7AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABETPENNPT3je3jUHm22HpmInljqUx+xwDgAAAAAAAAAAAAAAAAAAAAAAAAABaxvaIRaztaJB6AAEmN4mFSZ2iZB5wAAAAAAAAAAAAAAAAAAAAAAAAAAAaaeptG1vWrzETMcSD0zMRyx1L5fI4cb7gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7rpzNd/HAAAAAAAAAAAAAAAAAAAAAAAAAAAAADTT09/s8Gnp7/Z4agONSmX2OXYDzDbUpl9jliAAAAAAAAAAAAAAAAAAAsVmd9o4KVm0/jeIiI2gHnGupp/2vjIAABpp6e/2TT09/s8NQAAAAHGpTL7HLsB5htqUy+xyxAAAAAAAAAAAAAAAWlZtP4UrNp/G8RFY2gCIiI2hQAZ6mn/a+NAHmaaenv8AZ4dzp1m2/wDjoAAAAAAAABxqUy+xy7AeYbalMvscsQAAAAAAAAAAFpWbT+FKzafxvEREbQBEREbQoAAAAAAAAAAAAAAAAAONSmX2OXYDzDbUpl9jliAAAAAAAtKzafxaVm0/jaIiI2gCIiI2hQAAAAAAAAAAAAAAAAAAAAAcalMvscuwHmG2pTL7HLEAAAAFi0xxMwZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6ZW7T6gC5W7T6kzvyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/Z" width=` + dim + ` height=` + dim + ` style="border-radius: 6%;" title="`+alttxt+`" alt="` + pend_txt + `"><div class=\"imgloader\"></div><div class=\"imagelabel\">` + waittime + `</div></div>` + suffix;
 		} else {
 			let imghash = cyrb_hash(data).trim();
 			if (completed_imgs_meta[imghash] != null) {
@@ -16520,7 +16561,7 @@ Current version indicated by LITEVER below.
 					dimH *= 0.75;
 				}
 			}
-			return prefix + `<div class="`+siclass+reinvertcolor+`"><img src="` + data + `" width=` + dimW + ` height=` + dimH + ` title="`+alttxt+`" style="border-radius: 6%; cursor: pointer;" onclick="return click_image(this,\'`+imghash+`\');"></div>` + suffix;
+			return `<div class="`+siclass+reinvertcolor+`"><img src="` + data + `" width=` + dimW + ` height=` + dimH + ` title="`+alttxt+`" style="border-radius: 6%; cursor: pointer;" onclick="return click_image(this,\'`+imghash+`\');"></div>` + suffix;
 		}
 	}
 
@@ -17218,7 +17259,7 @@ Current version indicated by LITEVER below.
 				{
 					if(!localsettings.allow_continue_chat)
 					{
-						pending_context_preinjection =  instructendplaceholder;
+						pending_context_preinjection =  get_instructendplaceholder();
 
 						if(localsettings.inject_timestamps)
 						{
@@ -17986,7 +18027,7 @@ Current version indicated by LITEVER below.
 				redo_prev_text = [];
 
 				//stash images
-				gametext_elem.querySelectorAll('div.storyimgcenter,div.storyimgside,div.storyimgfloat').forEach(
+				gametext_elem.querySelectorAll('div.storyimgcenter,div.storyimgsidevertical,div.storyimgsidehorizontal,div.storyimgfloat').forEach(
 					(el) => {
 						let chimg = el.getElementsByTagName("img")[0];
 						if(el && chimg)
@@ -18565,18 +18606,7 @@ Current version indicated by LITEVER below.
 				let floatimg = (localsettings.opmode!=4);
 
 				//handle images
-				fulltxt = fulltxt.replace(/\[<\|p\|.+?\|p\|>\]/g, function (m) {
-					// m here means the whole matched string
-					let inner = m.substring(5, m.length - 5);
-					inner = render_image_html("", inner,floatimg,false);
-					return inner;
-				});
-				fulltxt = fulltxt.replace(/\[<\|d\|.+?\|d\|>\]/g, function (m) {
-					// m here means the whole matched string
-					let inner = m.substring(5, m.length - 5);
-					inner = render_image_html(inner, "",floatimg,false);
-					return inner;
-				});
+				fulltxt = render_all_image_html(fulltxt,floatimg,false);
 			}
 			else
 			{
@@ -19106,11 +19136,11 @@ Current version indicated by LITEVER below.
 
 				let ste = "";
 				let ete = "";
-				let st = instructstartplaceholder;
-				let et = instructendplaceholder;
+				let st = get_instructstartplaceholder();
+				let et = get_instructendplaceholder();
 				if (localsettings.separate_end_tags) {
-					ste = instructstartplaceholder_end;
-					ete = instructendplaceholder_end;
+					ste = get_instructstartplaceholder_end();
+					ete = get_instructendplaceholder_end();
 				}
 
 				for(let i=0;i<=idx;++i)
@@ -19243,11 +19273,11 @@ Current version indicated by LITEVER below.
 			{
 				let ste = "";
 				let ete = "";
-				let st = instructstartplaceholder;
-				let et = instructendplaceholder;
+				let st = get_instructstartplaceholder();
+				let et = get_instructendplaceholder();
 				if (localsettings.separate_end_tags) {
-					ste = instructstartplaceholder_end;
-					ete = instructendplaceholder_end;
+					ste = get_instructstartplaceholder_end();
+					ete = get_instructendplaceholder_end();
 				}
 
 				let finalturnai = false;
@@ -19341,19 +19371,7 @@ Current version indicated by LITEVER below.
 				}
 
 				//convert the msg into images
-				processed_msg = processed_msg.replace(/\[<\|p\|.+?\|p\|>\]/g, function (m) {
-					// m here means the whole matched string
-					let inner = m.substring(5, m.length - 5);
-					inner = render_image_html("", inner,false,true);
-					return inner;
-				});
-				processed_msg = processed_msg.replace(/\[<\|d\|.+?\|d\|>\]/g, function (m) {
-					// m here means the whole matched string
-					let inner = m.substring(5, m.length - 5);
-					inner = render_image_html(inner, "",false,true);
-					return inner;
-				});
-				processed_msg = processed_msg.replace(/\[<\|[\s\S]+?\|>\]/g, ""); //remove normal comments too
+				processed_msg = render_all_image_html(processed_msg,false,true);
 			}
 
 			let namepart = (curr.myturn ? "User" : cosmetic_corpo_ai_nick);
@@ -19659,21 +19677,7 @@ Current version indicated by LITEVER below.
 				curr.msg = curr.msg.replace(bold_regex,"<b style='opacity:0.7'>$1</b>");
 				curr.msg = curr.msg.replace(italics_regex,"<em style='opacity:0.7'>$1</em>");
 				//convert the msg into images
-				curr.msg = curr.msg.replace(/\[<\|p\|.+?\|p\|>\]/g, function (m) {
-					// m here means the whole matched string
-					let inner = m.substring(5, m.length - 5);
-					inner = render_image_html("", inner,false,true);
-					return inner;
-				});
-				curr.msg = curr.msg.replace(/\[<\|d\|.+?\|d\|>\]/g, function (m) {
-					// m here means the whole matched string
-					let inner = m.substring(5, m.length - 5);
-					inner = render_image_html(inner, "",false,true);
-					return inner;
-				});
-				curr.msg = curr.msg.replace(/\[<\|[\s\S]+?\|>\]/g, ""); //remove normal comments too
-
-
+				curr.msg = render_all_image_html(curr.msg,false,true);
 			}
 
 			if(curr.myturn)
@@ -20595,7 +20599,7 @@ Current version indicated by LITEVER below.
 					}
 
 					//append instruction for instruct mode
-					txt = instructendplaceholder + userinput;
+					txt = get_instructendplaceholder() + userinput;
 
 					gametext_arr.push(txt);
 					render_gametext();
@@ -21146,18 +21150,7 @@ Current version indicated by LITEVER below.
 				newbodystr = newbodystr.replace(`%CodeStash${i}%`,codestashes[i]);
 			}
 		}
-		newbodystr = newbodystr.replace(/\[<\|p\|.+?\|p\|>\]/g, function (m) {
-			// m here means the whole matched string
-			let inner = m.substring(5, m.length - 5);
-			inner = render_image_html("", inner,false,true);
-			return inner;
-		});
-		newbodystr = newbodystr.replace(/\[<\|d\|.+?\|d\|>\]/g, function (m) {
-			// m here means the whole matched string
-			let inner = m.substring(5, m.length - 5);
-			inner = render_image_html(inner, "",false,true);
-			return inner;
-		});
+		newbodystr = render_all_image_html(newbodystr,false,true);
 		return portraitsStyling + newbodystr.replaceAll(/(\r\n|\r|\n)/g,'<br>'); // Finally, convert newlines to HTML format and return the stylized string.
 
 
@@ -22418,9 +22411,11 @@ Current version indicated by LITEVER below.
 								<option value="5">Pollinations.ai</option>
 							</select>
 							<div id="generate_images_model_container" class="hidden">
-								<select class="form-control" id="generate_images_model" style="font-size: 12px;height:20px;padding:2px;margin:0px 0 0;" onblur="validate_sd_model()" title="Stable Diffusion Model Selection">
+								<div style="display: inline-flex;">
+								<select class="form-control" id="generate_images_model" style="font-size: 12px;height:20px;padding:2px;margin-top:2px;width:calc(100% - 60px)" onblur="validate_sd_model()" title="Stable Diffusion Model Selection">
 								</select>
-								<button id="generate_images_horde_setkey" type="button" class="btn btn-primary" style="width:100%; padding:2px 3px;margin-top:2px;font-size:11px;" onclick="set_horde_key()">Set Horde Key</button>
+								<button id="generate_images_horde_setkey" type="button" class="btn btn-primary" style="width:52px; padding:2px 3px;margin:2px;font-size:11px;" onclick="set_horde_key()">Set Key</button>
+								</div>
 								<div class="settinglabel">
 									<div class="justifyleft settingsmall"  title="If NSFW is disabled, explicit images will be censored">Allow NSFW </div>
 								<input title="Allow NSFW Images" type="checkbox" id="img_allownsfw" style="margin:0px 0px 0px auto;">
@@ -22602,21 +22597,19 @@ Current version indicated by LITEVER below.
 						</div>
 						<div class="inlinelabel" style="font-size: 11px;">
 							<div class="justifyleft" style="padding:2px"  title="Language Code">Language </div>
-							<input class="settinglabel miniinput" type="text" placeholder="en" value="auto" id="voice_langcode" style="height:18px; width: 36px; padding: 2px;">
-
-						</div>
-
-						<div class="inlinelabel" style="font-size: 11px;">
-							<div class="justifyleft" style="padding:3px">Voice Delay: </div>
-							<input title="Voice Delay Milliseconds" type="text" inputmode="decimal" value="300" id="voice_end_delay" style="width:40px">
+							<input class="settinglabel miniinput" type="text" placeholder="en" value="auto" id="voice_langcode" style="height:18px; width: 30px; padding: 2px;">
+							<div class="justifyleft" style="padding:3px">Delay </div>
+							<input title="Voice Delay Milliseconds" type="text" inputmode="decimal" value="300" id="voice_end_delay" style="width:30px">
 							<input type="file" id="transcribe_file_input" accept="audio/*,video/*" style="display:none;">
-							<button id="transcribe_file_btn" type="button" class="bg_green btn btn-primary" style="height:20px; padding:2px 3px; font-size:11px;margin-top: 3px;" onclick="transcribe_file_btn()">Transcribe File</button>
+							<button id="transcribe_file_btn" type="button" class="bg_green btn btn-primary" style="height:20px; padding:2px 3px; font-size:11px;margin-top: 3px;" onclick="transcribe_file_btn()">Narrate File</button>
 						</div>
+
+
 					</div>
 
 					<div class="settingitem">
-						<div style="font-size:12px; line-height: 1.2;">
-							<div class="settingsdesctxt">Style tags to use for generating images:<br>(E.g. Sketch, Realistic, Anime, 3D Render, Drawing)<br></div>
+						<div style="font-size:11px; line-height: 1.1;">
+							<div class="settingsdesctxt">Style tags to use for generating images:<br>(E.g. Sketch, Realistic, Anime, 3D)<br></div>
 							<input class="settinglabel miniinput" title="Style Tags" type="text" placeholder="Default Style" value="" id="imagestyleinput">
 
 							<div class="inlinelabel">
@@ -22625,11 +22618,11 @@ Current version indicated by LITEVER below.
 							</div>
 							<div class="inlinelabel">
 								<div class="justifyleft rowitem">Step Count: </div>
-								<input title="Number of Steps" type="text" inputmode="decimal" id="img_steps" style="width:60px">
+								<input title="Number of Steps" type="text" inputmode="decimal" id="img_steps" style="width:50px">
 							</div>
 							<div class="inlinelabel">
 								<div class="justifyleft rowitem">Cfg. Scale: </div>
-								<input title="Cfg. Scale" type="text" inputmode="decimal" id="img_cfgscale" style="width:60px">
+								<input title="Cfg. Scale" type="text" inputmode="decimal" id="img_cfgscale" style="width:50px">
 							</div>
 							<div class="inlinelabel">
 								<div class="justifyleft rowitem">Sampler: </div>
@@ -22660,11 +22653,11 @@ Current version indicated by LITEVER below.
 								<div class="justifyleft rowitem">Img2Img Strength <span class="helpicon">?
 									<span class="helptext">Higher values lead to a more different image.</span>
 								</span>: </div>
-								<input title="Img2Img Strength" type="text" inputmode="decimal" id="img_img2imgstr" style="width:60px">
+								<input title="Img2Img Strength" type="text" inputmode="decimal" id="img_img2imgstr" style="width:50px">
 							</div>
 							<div class="inlinelabel">
 								<div class="justifyleft rowitem">Clip Skip: </div>
-								<input title="Clip Skip" type="text" inputmode="decimal" id="img_clipskip" style="width:60px">
+								<input title="Clip Skip" type="text" inputmode="decimal" id="img_clipskip" style="width:50px">
 							</div>
 							<div class="inlinelabel">
 								<div class="justifyleft rowitem">Save Higher-Res <span class="helpicon">?
@@ -22679,16 +22672,22 @@ Current version indicated by LITEVER below.
 								<input title="Crop Images" type="checkbox" id="img_crop" style="margin:0px 0 0;">
 							</div>
 							<div class="inlinelabel">
-								<div class="justifyleft rowitem">Insert Images as New Message <span class="helpicon">?
+								<div class="justifyleft rowitem">Add as New Turn <span class="helpicon">?
 									<span class="helptext">If enabled, images will be added in a new turn message instead of the existing one.</span>
 								</span>: </div>
 								<input title="Insert Images as New Message" type="checkbox" id="img_newturn" style="margin:0px 0 0;">
 							</div>
+							<div class="inlinelabel">
+								<div class="justifyleft rowitem">Stack Sideways <span class="helpicon">?
+									<span class="helptext">If enabled, multiple images can stack horizontally on the same row.</span>
+								</span>: </div>
+								<input title="Stack Images Horizontally" type="checkbox" id="img_stacking" style="margin:0px 0 0;">
+							</div>
 						</div>
 					</div>
 
 					<div class="settingitem">
-						<div style="font-size:12px; line-height: 1.2;">
+						<div style="font-size:11px; line-height: 1.1;">
 							<div class="settinglabel" style="padding: 4px;">Search the Web for relevant information when using instruct mode<br>(Requires WebSearch enabled KoboldCpp)</div>
 							<div id="websearchunsupporteddiv" class="color_red hidden" style="font-weight:bold;padding:3px;font-size:12px">WebSearch Not Supported</div>
 							<div class="settinglabel" style="padding: 4px;">
@@ -22807,7 +22806,7 @@ Current version indicated by LITEVER below.
 					<div id="expandplaceholdertags" class="hidden">
 						<div class="settinglabel">
 							<div class="justifyleft settingsmall">Enable Placeholder Tags <span class="helpicon">?<span
-								class="helptext">If enabled, uses universal {{user}} and {{[INPUT]}} and other custom placeholders here that get swapped on submit. If disabled, uses plaintext chat or instruct tags verbatim.</span></span></div>
+								class="helptext">If enabled, substitutes placeholders like {{user}} and other custom placeholders here that get swapped on submit.</span></span></div>
 						<input type="checkbox" id="placeholder_tags">
 						</div>
 						<table id="placeholder_replace_table" class="settinglabel" style="text-align: center; border-spacing: 3px 2px; border-collapse: separate;">
@@ -22963,6 +22962,14 @@ Current version indicated by LITEVER below.
 							<button title="Remove Background Image" type="button" class="btn btn-primary bg_red" style="padding:2px 2px;margin:0px 0px 0px 1px;font-size:10px;" onclick="clear_bg_img()">Clear</button>
 						</div>
 					</div>
+					<div class="settingitem wide">
+						<div class="settinglabel settingsmall">Options below are experimental. Use at your own risk.</div>
+						<div class="settinglabel">
+							<div class="justifyleft settingsmall">RawInstructTags <span class="helpicon">?<span
+								class="helptext">Does not insert instruct placeholders, only uses raw tags</span></span></div>
+						   <input title="Raw Instruct Tags" type="checkbox" id="raw_instruct_tags" style="margin:0px 0px 0px 0px;">
+						</div>
+					</div>
 
 					<div class="settingitem wide">
 						<button title="Reset All Settings" id="resetallsettings" type="button" class="btn btn-primary bg_red" style="padding:2px 3px;margin-top:2px;font-size:11px;" onclick="reset_all_settings()">Reset ALL Settings</button>