Biasing ui update

static/koboldai.css

@@ -235,11 +235,6 @@ border-top-right-radius: var(--tabs_rounding);
 	margin: 2px;
 }
 
-#biasing {
-	margin-left: 5px;
-	margin-right: 5px;
-}
-
 .setting_container.var_sync_alt_system_alt_gen[system_alt_gen="true"] {
 	display: none;
 }
@@ -664,40 +659,40 @@ border-top-right-radius: var(--tabs_rounding);
 }
 
 /* Bias */
-#biases_label {
+#biasing {
-	cursor: pointer;
+	padding: 0px 10px;
 }
 
-.bias {
+.bias_card {
-	display: grid;
+	background-color: var(--setting_background);
-	grid-template-areas: "phrase percent max";
+	padding: 8px;
-	grid-template-columns: auto 100px 100px;
+}
+
+.bias_top {
+	display: flex;
+	justify-content: space-between;
+}
+
+.bias_top > .close_button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	margin-left: 7px;
+}
+
+.bias_card input {
+	width: 100%;
+	border: none;
 }
 
 .bias_phrase {
-	grid-area: phrase;
+	height: 36px;
-	margin-right: 5px;
 }
 
-.bias_phrase input {
+.bias_slider_labels {
-	width: 100%;
+	display: flex;
-}
+	justify-content: space-between;
-
-.bias_score {
-	grid-area: percent;
-	margin-right: 5px;
-}
-
-.bias_comp_threshold {
-	grid-area: max;
-	margin-right: 5px;
-}
-
-.bias_slider {
-	display: grid;
-	grid-template-areas: "bar bar bar"
-						 "min cur max";
-	grid-template-columns: 33px 34px 33px;
 }
 
 .bias_slider_bar {

static/koboldai.js

@@ -3633,42 +3633,49 @@ function options_on_right(data) {
 	}
 }
 
+function makeBiasCard(phrase, score, compThreshold) {
+	function updateLabel(input) {
+		input.closest(".bias_slider").querySelector(".bias_slider_cur").innerText = input.value;
+	}
+
+	const biasContainer = $el("#biasing");
+	const biasCard = $el(".bias_card.template").cloneNode(true);
+	biasCard.classList.remove("template");
+
+	const phraseInput = biasCard.querySelector(".bias_phrase");
+	const scoreInput = biasCard.querySelector(".bias_score input");
+	const compThresholdInput = biasCard.querySelector(".bias_comp_threshold input");
+
+	phraseInput.value = phrase;
+
+	scoreInput.value = score;
+	scoreInput.addEventListener("input", function() { updateLabel(this) });
+	updateLabel(scoreInput);
+
+	compThresholdInput.value = compThreshold;
+	compThresholdInput.addEventListener("input", function() { updateLabel(this) });
+	updateLabel(compThresholdInput);
+
+	biasContainer.appendChild(biasCard);
+}
+
 function do_biases(data) {
-	//console.log(data);
 	//clear out our old bias lines
-	let bias_list = Object.assign([], document.getElementsByClassName("bias"));
+	for (item of document.getElementsByClassName("bias_card")) {
-	for (item of bias_list) {
+		if (item.classList.contains("template")) continue;
-		//console.log(item);
 		item.parentNode.removeChild(item);
 	}
 	
 	//add our bias lines
 	for (const [key, value] of Object.entries(data.value)) {
-		bias_line = document.getElementById("empty_bias").cloneNode(true);
+		makeBiasCard(key, value[0], value[1]);
-		bias_line.id = "";
-		bias_line.classList.add("bias");
-		bias_line.querySelector(".bias_phrase").querySelector("input").value = key;
-		bias_line.querySelector(".bias_score").querySelector("input").value = value[0];
-		update_bias_slider_value(bias_line.querySelector(".bias_score").querySelector("input"));
-		bias_line.querySelector(".bias_comp_threshold").querySelector("input").value = value[1];
-		update_bias_slider_value(bias_line.querySelector(".bias_comp_threshold").querySelector("input"));
-		document.getElementById('biasing').append(bias_line);
 	}
 	
 	//add another bias line if this is the phrase and it's not blank
-	bias_line = document.getElementById("empty_bias").cloneNode(true);
+	const templateBiasCard = makeBiasCard("", 1, 50);
-	bias_line.id = "";
+	// bias_line.querySelector(".bias_phrase").querySelector("input").id = "empty_bias_phrase";
-	bias_line.classList.add("bias");
-	bias_line.querySelector(".bias_phrase").querySelector("input").value = "";
-	bias_line.querySelector(".bias_phrase").querySelector("input").id = "empty_bias_phrase";
-	bias_line.querySelector(".bias_score").querySelector("input").value = 1;
-	bias_line.querySelector(".bias_comp_threshold").querySelector("input").value = 50;
-	document.getElementById('biasing').append(bias_line);
 }
 
-function update_bias_slider_value(slider) {
-	slider.parentElement.parentElement.querySelector(".bias_slider_cur").textContent = slider.value;
-}
 
 function distortColor(rgb) {
 	// rgb are 0..255, NOT NORMALIZED!!!!!!

templates/settings flyout.html

@@ -242,14 +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>
-			<div class="bias_header">
+			<!-- HACK: .hidden keeps being applied if this isn't here. ?????? -->
-				<div class="bias_header_phrase">Phrase</div>
+			<div></div>
-				<div class="bias_header_score">Score</div>
-				<div class="bias_header_comp_threshold">
-					Completion Threshold
-					<span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
-				</div>
-			</div>
 		</div>
 
 		<!-- Story Review Bot -->

templates/templates.html

@@ -112,29 +112,35 @@
 	</div>
 </div>
 <!---------------- Phrase Bias ---------------------->
-<div id="empty_bias">
+<div class="bias_card template">
-	<div class="bias_phrase">
+	<div class="bias_top">
-		<input type=text placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
+		<input class="bias_phrase" placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
+		<span class="close_button material-icons-outlined">close</span>
 	</div>
-	<div class="bias_score">
+
-		<div class="bias_slider">
+	<span>Score</span>
+	<div class="bias_score bias_slider">
 		<div class="bias_slider_bar">
 			<input type="range" min="-50" max="50" step="0.01" value="0" class="setting_item_input" 
-					oninput="update_bias_slider_value(this);"
 				onchange="save_bias(this);"/>
 		</div>
+		<div class="bias_slider_labels">
 			<div class="bias_slider_min">-50</div>
 			<div class="bias_slider_cur">0</div>
 			<div class="bias_slider_max">50</div>
 		</div>
 	</div>
-	<div class="bias_comp_threshold">
+
-		<div class="bias_slider">
+	<span class="bias_header_comp_threshold">
+		Completion Threshold
+		<span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
+	</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"
-					oninput="update_bias_slider_value(this);" 
 				onchange="save_bias(this);"/>
 		</div>
+		<div class="bias_slider_labels">
 			<div class="bias_slider_min">0</div>
 			<div class="bias_slider_cur">10</div>
 			<div class="bias_slider_max">10</div>