Merge branch 'UI2' of https://github.com/ebolam/KoboldAI into ui2-context-viewer

gensettings.py

@@ -483,7 +483,7 @@ gensettingstf = [
     "UI_V2_Only": True,
  	"uitype": "slider",
  	"unit": "int",
- 	"label": "Insert Depth",
+ 	"label": "AN Depth",
  	"id": "singleline",
  	"min": 0,
  	"max": 5,
@@ -834,4 +834,4 @@ formatcontrols = [{
     "label": "Single Line",
     "id": "singleline",
     "tooltip": "Only allows the AI to output anything before the enter"
-    }]
+    }]

static/koboldai.css

@@ -102,7 +102,7 @@ input[type="range"]::-ms-fill-upper {
 	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #AAA;
 	text-shadow: 0 1px #AAA;
 	margin: 0 -5px;
-	padding: 0 17px;
+	padding: 0 15px;
 }
 .tabrow span.selected {
 	background: #FFF;
@@ -307,7 +307,7 @@ input[type="range"]::-ms-fill-upper {
 .menu_pin {
 	position: absolute;
 	top:10px;
-	left: calc(var(--flyout_menu_width) - 25px);
+	left: calc(var(--flyout_menu_width) - 20px);
 	z-index:50;
 	width: 25px;
 	height: 25px;
@@ -656,6 +656,25 @@ input[type="range"]::-ms-fill-upper {
 	filter: brightness(85%);
 }
 
+/* Tweaks */
+.tweak-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	color: var(--setting_text);
+	background-color: var(--setting_background);
+	border-radius: var(--radius_settings_background);
+	padding: 10px 8px;
+	margin-bottom: 5px;
+	width: 100%;
+}
+
+#Tweaks {
+	/* Don't add space under last tweak-container. Also, CSS, why no last-of-class!?!? */
+	margin-bottom: 0px;
+}
+
 /*----------------RIGHT FLYOUT MENU------------------*/
 .right_menu_icon {
 	position: fixed;
@@ -728,7 +747,7 @@ input[type="range"]::-ms-fill-upper {
 .story_menu_pin {
 	position: absolute;
 	top:10px;
-	right: calc(var(--flyout_menu_width) - 25px);
+	right: calc(var(--flyout_menu_width) - 29px);
 	z-index:50;
 	width: 25px;
 	height: 25px;
@@ -1147,6 +1166,8 @@ body {
 	
 }
 #random_game_prompt{
+	display: flex;
+	flex-direction: column;
 	grid-area: textarea;
 }
 
@@ -1562,7 +1583,8 @@ input {
 	resize: none;
 	border-color: white;
 	border-width: 1px;
-	border-style:solid;
+	border-style: solid;
+	outline: none;
 }
 
 .action_button {
@@ -1614,6 +1636,7 @@ button.disabled {
 textarea {
 	background-color: var(--input_background);
 	color: var(--text);
+	outline: none;
 }
 
 .pulse {
@@ -1721,4 +1744,4 @@ h2 .material-icons-outlined {
 	font-size: 0.9em;
 	display: block;
 	color: var(--setting_category_help_text_color);
-}
+}

static/koboldai.js

@@ -50,7 +50,6 @@ map2.set(2, 'Top P Sampling')
 map2.set(3, 'Tail Free Sampling')
 map2.set(4, 'Typical Sampling')
 map2.set(5, 'Temperature')
-var use_word_highlighting = false;
 var calc_token_usage_timeout;
 var game_text_scroll_timeout;
 var var_processing_time = 0;
@@ -223,31 +222,12 @@ function do_story_text_updates(data) {
 		//clear out the item first
 		while (item.firstChild) { 
 			item.removeChild(item.firstChild);
-		}
+		}		
-		if (use_word_highlighting) {
+		span = document.createElement("span");
-			if (data.value.action['Selected Text'] == null) {
+		span2 = document.createElement("span");
-				var text_array = [];
+		span2.textContent = data.value.action['Selected Text'];
-			} else {
+		span.append(span2);
-				var text_array = data.value.action['Selected Text'].split(" ");
+		item.append(span);
-			}
-			text_array.forEach(function (text, i) {
-				if (text != "") {
-					var word = document.createElement("span");
-					word.classList.add("rawtext");
-					if (i == text_array.length) {
-						word.textContent = text;
-					} else {
-						word.textContent = text+" ";
-					}
-					item.append(word);
-				}
-				
-			});
-		} else {
-			span = document.createElement("span");
-			span.textContent = data.value.action['Selected Text'];
-			item.append(span);
-		}
 		item.original_text = data.value.action['Selected Text'];
 		item.setAttribute("world_info_uids", "");
 		item.classList.remove("pulse")
@@ -268,27 +248,9 @@ function do_story_text_updates(data) {
 			}
 		}
 		span.onkeydown = detect_enter_text;
-		if (use_word_highlighting) {
+		new_span = document.createElement("span");
-			var text_array = data.value.action['Selected Text'].split(" ");
+		new_span.textContent = data.value.action['Selected Text'];
-			text_array.forEach(function (text, i) {
+		span.append(new_span);
-				if (text != "") {
-					var word = document.createElement("span");
-					word.classList.add("rawtext");
-					word.classList.add("world_info_tag");
-					if (i == text_array.length) {
-						word.textContent = text;
-					} else {
-						word.textContent = text+" ";
-					}
-					span.append(word);
-				}
-				
-			});
-		} else {
-			new_span = document.createElement("span");
-			new_span.textContent = data.value.action['Selected Text'];
-			span.append(new_span);
-		}
 		
 		
 		story_area.append(span);
@@ -306,25 +268,11 @@ function do_prompt(data) {
 			item.removeChild(item.firstChild);
 		}
 		
-		if (use_word_highlighting) {
+		span = document.createElement("span");
-			var text_array = data.value.split(" ");
+		span2 = document.createElement("span");
-			text_array.forEach(function (text, i) {
+		span2.textContent = data.value;
-				if (text != "") {
+		span.append(span2);
-					var word = document.createElement("span");
+		item.append(span);
-					word.classList.add("rawtext");
-					if (i == text_array.length) {
-						word.textContent = text;
-					} else {
-						word.textContent = text+" ";
-					}
-					item.append(word);
-				}
-			});
-		} else {
-			span = document.createElement("span");
-			span.textContent = data.value;
-			item.append(span);
-		}
 		item.setAttribute("old_text", data.value)
 		item.classList.remove("pulse");
 	}
@@ -400,7 +348,7 @@ function do_presets(data) {
 		//add our blank option
 		var option = document.createElement("option");
 		option.value="";
-		option.text="presets";
+		option.text="Presets";
 		select.append(option);
 		presets = data.value;
 		
@@ -1264,6 +1212,7 @@ function world_info_entry(data) {
 				}
 			}
 	world_info_card.addEventListener('dragstart', dragStart);
+	world_info_card.addEventListener('dragend', dragend);
 	title.addEventListener('dragenter', dragEnter)
 	title.addEventListener('dragover', dragOver);
 	title.addEventListener('dragleave', dragLeave);
@@ -1274,7 +1223,7 @@ function world_info_entry(data) {
 	delete_icon.setAttribute("title", data.title);
 	delete_icon.onclick = function () {
 		if (confirm("This will delete world info "+this.getAttribute("title"))) {
-			if (this.getAttribute("uid") == "-1") {
+			if (parseInt(this.getAttribute("uid")) < 0) {
 				this.parentElement.parentElement.remove();
 			} else {
 				socket.emit("delete_world_info", this.getAttribute("uid"));
@@ -2360,7 +2309,8 @@ function dragLeave(e) {
 
 function drop(e) {
 	e.preventDefault();
-    element = find_wi_container(e.target);
+    // get the drop element
+	element = find_wi_container(e.target);
     element.classList.remove('drag-over');
 
     // get the draggable element
@@ -2370,8 +2320,6 @@ function drop(e) {
 	dragged_id = draggable.id.split("_").slice(-1)[0];
 	drop_id = element.id.split("_").slice(-1)[0];
 
-    // get the drop element
-	element = find_wi_container(e.target);
 	
 	//check if we're droping on a folder, and then append it to the folder
 	if (element.children[0].tagName == "H2") {
@@ -2394,11 +2342,22 @@ function drop(e) {
 }
 
 function dragend(e) {
-	element = find_wi_container(e.target);
+	// get the draggable element
-	element.classList.remove('hidden');
+    const id = e.dataTransfer.getData('text/plain');
+    const draggable = document.getElementById(id);
+	// display the draggable element
+	draggable.classList.remove('hidden');
 	e.preventDefault();
 }
 
+function checkifancestorhasclass(element, classname) {
+    if (element.classList.contains(classname)) {
+		return true;
+	} else {
+		return hasSomeParentTheClass(element.parentNode, classname);
+	}
+}
+
 function assign_world_info_to_action(action_item, uid) {
 	if (Object.keys(world_info_data).length > 0) {
 		if (uid != null) {
@@ -2415,16 +2374,7 @@ function assign_world_info_to_action(action_item, uid) {
 		
 		for (action of actions) {
 			//First check to see if we have a key in the text
-			if (use_word_highlighting) {
+			var words = action.textContent.split(" ");
-				var words = Array.prototype.slice.call( action.children );
-				words_text = [];
-				for (word of words) {
-					words_text.push(word.textContent);
-				}
-			} else {
-				var words = action.textContent.split(" ");
-				var words_text = words;
-			}
 			for (const [key, worldinfo] of  Object.entries(worldinfo_to_check)) {
 				//remove any world info tags
 				for (tag of action.getElementsByClassName("tag_uid_"+uid)) {
@@ -2449,12 +2399,46 @@ function assign_world_info_to_action(action_item, uid) {
 									//OK we have the phrase in our action. Let's see if we can identify the word(s) that are triggering
 									for (var i = 0; i < words.length; i++) {
 										key_words = keyword.split(" ").length;
-										var to_check = words_text.slice(i, i+key_words).join("").replace(/[^0-9a-z \'\"]/gi, '').trim();
+										var to_check = words.slice(i, i+key_words).join("").replace(/[^0-9a-z \'\"]/gi, '').trim();
 										if (keyword == to_check) {
-											for (var j = i; j < key_words+i; j++) {
+											var start_word = i;
-												action.innerHTML = action.innerHTML.replaceAll(keyword, '<i title="'+worldinfo['content']+'">'+keyword+'</i>')
+											var end_word = i+len_of_keyword;
-												//words[j].title = worldinfo['content'];
+											var passed_words = 0;
-												//words[j].classList.add("tag_uid_"+uid);
+											for (span of action.childNodes) {
+												if (passed_words + span.textContent.split(" ").length < start_word) {
+													passed_words += span.textContent.trim().split(" ").length;
+												} else if (passed_words < end_word) {
+													//OK, we have text that matches, let's do the highlighting
+													//we can skip the highlighting if it's already done though
+													if (span.tagName != "I") {
+														var span_text = span.textContent.trim().split(" ");
+														var before_highlight_text = span_text.slice(0, start_word-passed_words).join(" ")+" ";
+														var highlight_text = span_text.slice(start_word-passed_words, end_word-passed_words).join(" ");
+														if (end_word-passed_words <= span_text.length) {
+															highlight_text += " ";
+														}
+														var after_highlight_text = span_text.slice((end_word-passed_words)).join(" ")+" ";
+														//console.log(span.textContent);
+														//console.log(keyword);
+														//console.log(before_highlight_text);
+														//console.log(highlight_text);
+														//console.log(after_highlight_text);
+														//console.log("passed: "+passed_words+" start:" + start_word + " end: "+end_word+" continue: "+(end_word-passed_words));
+														//console.log(null);
+														var before_span = document.createElement("span");
+														before_span.textContent = before_highlight_text;
+														var hightlight_span = document.createElement("i");
+														hightlight_span.textContent = highlight_text;
+														hightlight_span.title = worldinfo['content'];
+														var after_span = document.createElement("span");
+														after_span.textContent = after_highlight_text;
+														action.insertBefore(before_span, span);
+														action.insertBefore(hightlight_span, span);
+														action.insertBefore(after_span, span);
+														span.remove();
+													}
+													passed_words += span.textContent.trim().split(" ").length;
+												}
 											}
 										}
 									}
@@ -2468,14 +2452,50 @@ function assign_world_info_to_action(action_item, uid) {
 							}
 							action.setAttribute("world_info_uids", current_ids.join(","));
 							//OK we have the phrase in our action. Let's see if we can identify the word(s) that are triggering
+							var len_of_keyword = keyword.split(" ").length;
+							//go through each word to see where we get a match
 							for (var i = 0; i < words.length; i++) {
-								key_words = keyword.split(" ").length;
+								//get the words from the ith word to the i+len_of_keyword. Get rid of non-letters/numbers/'/"
-								var to_check = words_text.slice(i, i+key_words).join("").replace(/[^0-9a-z \'\"]/gi, '').trim();
+								var to_check = words.slice(i, i+len_of_keyword).join(" ").replace(/[^0-9a-z \'\"]/gi, '').trim();
 								if (keyword == to_check) {
-									for (var j = i; j < key_words+i; j++) {
+									var start_word = i;
-										action.innerHTML = action.innerHTML.replaceAll(keyword, '<i title="'+worldinfo['content']+'">'+keyword+'</i>')
+									var end_word = i+len_of_keyword;
-										//words[j].title = worldinfo.content;
+									var passed_words = 0;
-										//words[j].classList.add("tag_uid_"+uid);
+									for (span of action.childNodes) {
+										if (passed_words + span.textContent.split(" ").length < start_word) {
+											passed_words += span.textContent.trim().split(" ").length;
+										} else if (passed_words < end_word) {
+											//OK, we have text that matches, let's do the highlighting
+											//we can skip the highlighting if it's already done though
+											if (span.tagName != "I") {
+												var span_text = span.textContent.trim().split(" ");
+												var before_highlight_text = span_text.slice(0, start_word-passed_words).join(" ")+" ";
+												var highlight_text = span_text.slice(start_word-passed_words, end_word-passed_words).join(" ");
+												if (end_word-passed_words <= span_text.length) {
+													highlight_text += " ";
+												}
+												var after_highlight_text = span_text.slice((end_word-passed_words)).join(" ")+" ";
+												//console.log(span.textContent);
+												//console.log(keyword);
+												//console.log(before_highlight_text);
+												//console.log(highlight_text);
+												//console.log(after_highlight_text);
+												//console.log("passed: "+passed_words+" start:" + start_word + " end: "+end_word+" continue: "+(end_word-passed_words));
+												//console.log(null);
+												var before_span = document.createElement("span");
+												before_span.textContent = before_highlight_text;
+												var hightlight_span = document.createElement("i");
+												hightlight_span.textContent = highlight_text;
+												hightlight_span.title = worldinfo['content'];
+												var after_span = document.createElement("span");
+												after_span.textContent = after_highlight_text;
+												action.insertBefore(before_span, span);
+												action.insertBefore(hightlight_span, span);
+												action.insertBefore(after_span, span);
+												span.remove();
+											}
+											passed_words += span.textContent.trim().split(" ").length;
+										}
 									}
 								}
 							}
@@ -2812,4 +2832,46 @@ $(document).ready(function(){
 	}
 	preserve_game_space(!(getCookie("preserve_game_space") == "false"));
 	options_on_right(!(getCookie("options_on_right") == "false"));
-});
+
+
+	// Tweak registering
+	let enabledTweaks = JSON.parse(getCookie("enabledTweaks", "[]"));
+
+	function saveTweaks() {
+		let out = [];
+
+		// TODO: Better saving
+		for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
+			let toggle = tweakContainer.querySelector("input");
+			let path = tweakContainer.getAttribute("tweak-path");
+			if (toggle.checked) out.push(path);
+		}
+
+		setCookie("enabledTweaks", JSON.stringify(out));
+	}
+
+
+	for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
+		let toggle = tweakContainer.querySelector("input");
+		let path = tweakContainer.getAttribute("tweak-path");
+
+		$(toggle).change(function(e) {
+			let path = $(this).closest(".tweak-container")[0].getAttribute("tweak-path");
+			let id = `tweak-${path}`;
+
+			if (this.checked) {
+				let style = document.createElement("link");
+				style.rel = "stylesheet";
+				style.href = `/themes/tweaks/${path}.css`;
+				style.id = id;
+				document.head.appendChild(style);
+			} else {
+				document.getElementById(id).remove();
+			}
+
+			saveTweaks();
+		});
+
+		if (enabledTweaks.includes(path)) toggle.click();
+	}
+});

templates/index_new.html

@@ -70,8 +70,9 @@
 		<!------------ Input Area--------------------->
 		<div class="inputrow" id="inputrow_container">
 			<div id="random_game_prompt" class="hidden">
-				<input type="text" autocomplete="off" style="width: 100%;" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
+				<input type="text" autocomplete="off" id="themetext" placeholder="Theme for Random Story" oninput='if (this.value != "") {
 																													document.getElementById("input_text").value = "";'/>
+				<span class="help_text" style="margin:0px;margin-top:5px;">The AI can create a prompt for you! Optionally type in one or more themes above, or let the AI do it's thing.</span>
 			</div>
 			<textarea autocomplete="off" row=5 id="input_text" placeholder="Enter Prompt Here" oninput='if (this.value != "") {
 																											document.getElementById("themetext").value = "";

templates/settings flyout.html

@@ -296,8 +296,18 @@
 				<span>Advanced Theme</h4>
 			</div>
 		</div>
+
+		<div class="collapsable_header" onclick="toggle_setting_category(this);">
+			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Tweaks</h4>
+		</div>
+		<div class="setting_tile_area" id="Tweaks">
+			<span class="help_text">Small UI changes that can be mixed and matched.</span>
+			<div class="tweak-container" tweak-path="hide-timing">
+				<span>Hide timing information</span>
+				<input type=checkbox class="setting_item_input" data-size="mini" data-onstyle="success" data-toggle="toggle">
+			</div>
+		</div>
 	</div>
-	<span class=>
 	<span class="material-icons-outlined cursor show_footer_icon" onclick='if (document.getElementById("settings_footer").classList.contains("hidden")){
 																		       document.getElementById("settings_footer").classList.remove("hidden");
 																		   } else {
@@ -307,4 +317,4 @@
 		<span>Execution Time: <span id="Execution Time"></span></span> | 
 		<span>Remaining Time: <span class="var_sync_model_tqdm_rem_time"></span></span> | <span id="var_time"></span>
 	</div>
-</div>
+</div>

themes/Darkness.css

@@ -98,11 +98,11 @@
     --wi_card_tag_bg_color: #242424;
 	--wi_card_tag_text_color: #e0e0e0;
 	
-    --wi_tag_color: #004397;
+    --wi_tag_color: #1d434a;
 	--wi_tag_text_color: #e0e0e0;
 	
 	/*Popup*/
-	--popup_background_color: #151717;
+	--popup_background_color: #121414;
     --popup_title_bar_color: #1a625f;
 	--popup_title_bar_color_text: #e0e0e0;
 
@@ -152,4 +152,4 @@
 	--story_pinned_area_widths_right: 30px auto var(--story_options_size) 30px;
 	--story_pinned_areas: var(--story_pinned_areas_left);
 	--story_pinned_area_widths: var(--story_pinned_area_widths_left);
-}
+}

themes/Monochrome.css

@@ -98,11 +98,11 @@
     --wi_card_tag_bg_color: #273141;
 	--wi_card_tag_text_color: #e0e0e0;
 	
-    --wi_tag_color: #004397;
+    --wi_tag_color: #244c65;
 	--wi_tag_text_color: #e0e0e0;
 	
 	/*Popup*/
-	--popup_background_color: #18222a;
+	--popup_background_color: #141c23;
     --popup_title_bar_color: #2b5471;
 	--popup_title_bar_color_text: #e0e0e0;
 
@@ -152,4 +152,4 @@
 	--story_pinned_area_widths_right: 30px auto var(--story_options_size) 30px;
 	--story_pinned_areas: var(--story_pinned_areas_left);
 	--story_pinned_area_widths: var(--story_pinned_area_widths_left);
-}
+}

themes/tweaks/hide-timing.css

@@ -0,0 +1,2 @@
+.show_footer_icon { display: none; }
+#settings_footer { display: none; }