Functional updates (mostly)

static/koboldai.css

@@ -666,6 +666,7 @@ border-top-right-radius: var(--tabs_rounding);
 .bias_card {
 	background-color: var(--setting_background);
 	padding: 8px;
+	margin-bottom: 12px;
 }
 
 .bias_top {
@@ -719,6 +720,20 @@ border-top-right-radius: var(--tabs_rounding);
 	justify-content: center;
 }
 
+#bias-add {
+	width: 100%;
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 4px;
+}
+
+#bias-add:hover {
+	width: 100%;
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
 /* Theme */
 
 .collapsable_header .material-icons-outlined {

static/koboldai.js

@@ -56,6 +56,7 @@ var shift_down = false;
 var world_info_data = {};
 var world_info_folder_data = {};
 var saved_settings = {};
+var biases_data = {};
 var finder_selection_index = -1;
 var colab_cookies = null;
 var wi_finder_data = [];
@@ -2863,28 +2864,35 @@ function save_as_story(response) {
 }
 
 function save_bias() {
-	var have_blank = false;
 	var biases = {};
 	//get all of our biases
-	for (bias of document.getElementsByClassName("bias")) {
+
+	for (const biasCard of document.getElementsByClassName("bias_card")) {
 		//phrase
-		var phrase = bias.querySelector(".bias_phrase").querySelector("input").value;
+		var phrase = biasCard.querySelector(".bias_phrase").value;
+		if (!phrase) continue;
 		
 		//Score
-		var percent = parseFloat(bias.querySelector(".bias_score").querySelector("input").value);
+		var score = parseFloat(biasCard.querySelector(".bias_score input").value);
 		
 		//completion threshold
-		var comp_threshold = parseInt(bias.querySelector(".bias_comp_threshold").querySelector("input").value);
+		var compThreshold = parseInt(biasCard.querySelector(".bias_comp_threshold input").value);
 		
-		if (phrase != "") {
-			biases[phrase] = [percent, comp_threshold];
-		}
-		bias.classList.add("pulse");
+		biases[phrase] = [score, compThreshold];
 	}
 
+	// Because of course JS couldn't just support comparison in a core type
+	// that would be silly and foolish
+	if (JSON.stringify(biases) === JSON.stringify(biases_data)) {
+		// No changes. :(
+		return;
+	}
+
+	biases_data = biases;
+	console.info("saving biases", biases)
+
 	//send the biases to the backend
 	socket.emit("phrase_bias_update", biases);
-	
 }
 
 function sync_to_server(item) {
@@ -3632,7 +3640,7 @@ function options_on_right(data) {
 	}
 }
 
-function makeBiasCard(phrase, score, compThreshold) {
+function makeBiasCard(phrase="", score=0, compThreshold=10) {
 	function updateBias(origin, input, save=true) {
 		const textInput = input.closest(".bias_slider").querySelector(".bias_slider_cur");
 		let value = (origin === "slider") ? input.value : parseFloat(textInput.innerText);
@@ -3641,14 +3649,29 @@ function makeBiasCard(phrase, score, compThreshold) {
 
 		// Only save on "commitful" actions like blur or mouseup to not spam
 		// the poor server
-		if (save) console.warn("saving")
+		if (save) save_bias();
 	}
 
-	const biasContainer = $el("#biasing");
+	const biasContainer = $el("#bias-container");
 	const biasCard = $el(".bias_card.template").cloneNode(true);
 	biasCard.classList.remove("template");
 
+	const closeButton = biasCard.querySelector(".close_button");
+	closeButton.addEventListener("click", function(event) {
+		biasCard.remove();
+
+		// We just deleted the last bias, we probably don't want to keep seeing
+		// them pop up
+		if (!biasContainer.firstChild) biasContainer.setAttribute(
+			"please-stop-adding-biases-whenever-i-delete-them",
+			"i mean it"
+		);
+		save_bias();
+	});
+
 	const phraseInput = biasCard.querySelector(".bias_phrase");
+	phraseInput.addEventListener("change", save_bias);
+
 	const scoreInput = biasCard.querySelector(".bias_score input");
 	const compThresholdInput = biasCard.querySelector(".bias_comp_threshold input");
 
@@ -3663,9 +3686,8 @@ function makeBiasCard(phrase, score, compThreshold) {
 		// Visual update on each value change
 		input.addEventListener("input", function() { updateBias("slider", this, false) });
 
-		// Only when we leave do we sync to server (might come back to bite us)
-		input.addEventListener("mouseup", function() { updateBias("slider", this) });
-		input.addEventListener("blur", function() { updateBias("slider", this) });
+		// Only when we leave do we sync to server
+		input.addEventListener("change", function() { updateBias("slider", this) });
 
 		// Personally I don't want to press a key 100 times to add one
 		const nudge = parseFloat(input.getAttribute("keyboard-step") ?? input.getAttribute("step"));
@@ -3727,23 +3749,37 @@ function makeBiasCard(phrase, score, compThreshold) {
 	}
 
 	biasContainer.appendChild(biasCard);
+	return biasCard;
 }
+$el("#bias-add").addEventListener("click", function(event) {
+	const card = makeBiasCard();
+	card.querySelector(".bias_phrase").focus();
+});
 
 function do_biases(data) {
-	//clear out our old bias lines
-	for (item of document.getElementsByClassName("bias_card")) {
-		if (item.classList.contains("template")) continue;
-		item.parentNode.removeChild(item);
+	console.info("Taking inventory of biases")
+	biases_data = data.value;
+
+	// Clear out our old bias cards, weird recursion because remove sometimes
+	// doesn't work (???)
+	const biasContainer = $el("#bias-container");
+	for (let i=0;i<10000;i++) {
+		if (!biasContainer.firstChild) break;
+		biasContainer.firstChild.remove();
 	}
+	if(biasContainer.firstChild) reportError("We are doomed", "Undead zombie bias, please report this");
 
 	//add our bias lines
 	for (const [key, value] of Object.entries(data.value)) {
 		makeBiasCard(key, value[0], value[1]);
 	}
 
-	//add another bias line if this is the phrase and it's not blank
-	const templateBiasCard = makeBiasCard("", 1, 50);
-	// bias_line.querySelector(".bias_phrase").querySelector("input").id = "empty_bias_phrase";
+	// Add seed card if we have no bias cards and we didn't just delete the
+	// last bias card
+	if (
+		!biasContainer.firstChild &&
+		!biasContainer.getAttribute("please-stop-adding-biases-whenever-i-delete-them")
+	) makeBiasCard();
 }
 
 

templates/settings flyout.html

@@ -242,8 +242,8 @@
 		</div>
 		<div id="biasing" class="biasing" ui_level=1>
 			<div class="help_text">Influence the likelihood for the AI to output certain phrases.</div>
-			<!-- HACK: .hidden keeps being applied if this isn't here. ?????? -->
-			<div></div>
+			<div id="bias-container"></div>
+			<div id="bias-add" tooltip="Add Bias"><span class="material-icons-outlined">add</span></div>
 		</div>
 
 		<!-- Story Review Bot -->

templates/templates.html

@@ -122,8 +122,7 @@
 		<span class="bias_label">Bias Amount</span>
 		<div class="bias_score bias_slider">
 			<div class="bias_slider_bar">
-				<input type="range" min="-50" max="50" keyboard-step="0.1" step="0.01" value="0" class="setting_item_input" 
-					onchange="save_bias(this);"/>
+				<input type="range" min="-50" max="50" keyboard-step="0.1" step="0.01" value="0" class="setting_item_input"/>
 			</div>
 			<div class="bias_slider_labels">
 				<span class="bias_slider_min">-50</span>
@@ -142,8 +141,7 @@
 		</span>
 		<div class="bias_comp_threshold bias_slider">
 			<div class="bias_slider_bar">
-				<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"
-					onchange="save_bias(this);"/>
+				<input type="range" min="0" max="10" step="1" value="10" class="setting_item_input"/>
 			</div>
 			<div class="bias_slider_labels">
 				<div class="bias_slider_min">0</div>