Bias UI changes and UI Color Scheme updates

koboldai_settings.py

@@ -249,7 +249,6 @@ class model_settings(settings):
         self.selected_preset = ""
         self.uid_presets = []
         self.default_preset = {}
-        self.biases      = {} # should look like {"phrase": [percent, max_occurances]}
         
     #dummy class to eat the tqdm output
     class ignore_tqdm(object):
@@ -361,6 +360,7 @@ class story_settings(settings):
         self.dynamicscan = False
         self.recentedit  = False
         self.notes       = ""    #Notes for the story. Does nothing but save
+        self.biases      = {} # should look like {"phrase": [percent, max_occurances]}
         
     def save_story(self):
         print("Saving")

static/koboldai.css

@@ -10,7 +10,7 @@
 	}
 }
 
-:root {
+/* :root {
 	--flyout_menu_closed_width: 0px;
 	--background: #474B4F;
 	--text: white;
@@ -40,6 +40,37 @@
 	--wi_card_tag_bg_color: #404040;
 	--wi_tag_color: #337ab7;
 	
+} */
+
+:root {
+    --flyout_menu_closed_width: 0px;
+    --background: #222f39;
+    --text: white;
+    --text_to_ai_color: #CCECFF;
+    --text_edit: #cdf;
+    --flyout_background: #18222a;
+    --setting_background: #2c3a51;
+    --setting_text: white;
+    --tooltip_text: white;
+    --tooltip_background: #212734;
+    --gamescreen_background: #121a1e;
+    --textarea_background: #1a242b;
+    --options_background: #404040;
+    --enabled_button_text: #fff;
+    --enabled_button_background_color: #4259a0;
+    --enabled_button_border_color: #91acd4;
+    --popup_title_bar_color: #337ab7;
+    --popup_item_color: #262626;
+    --disabled_button_text: #303030;
+    --disabled_button_background_color: #495762;
+    --disabled_button_border_color: #686c68;
+    --menu_button_level_1_bg_color: #2b5471;
+    --menu_button_level_2_bg_color: #285070;
+    --wi_card_border_color: white;
+    --wi_card_border_color_to_ai: green;
+    --wi_card_bg_color: #262626;
+    --wi_card_tag_bg_color: #404040;
+    --wi_tag_color: #337ab7;
 }
 
 /*----------------Folder Tabs--------------------*/
@@ -1022,6 +1053,11 @@ button.disabled {
 	font-weight: bold;
 }
 
+textarea {
+	background-color: var(--textarea_background);
+	color: var(--text);
+}
+
 .pulse {
 	box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
 	animation: pulse-white 2s infinite;

static/koboldai.js

@@ -372,6 +372,9 @@ function var_changed(data) {
 		do_presets(data);
 	} else if ((data.classname == 'story') && (data.name == 'prompt')) {
 		do_prompt(data);
+	//Special Case for phrase biasing
+	} else if ((data.classname == 'story') && (data.name == 'biases')) {
+		do_biases(data);
 	//Basic Data Syncing
 	} else {
 		var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname.replace(" ", "_")+"_"+data.name.replace(" ", "_"));
@@ -1274,7 +1277,9 @@ function save_bias(item) {
 	//add another bias line if this is the phrase and it's not blank
 	if ((item.tagName == "INPUT") & !(have_blank)) {
 		console.log("Create new bias line");
-		bias_line = document.getElementsByClassName("bias")[0].cloneNode(true);
+		bias_line = document.getElementById("empty_bias").cloneNode(true);
+		bias_line.id = "";
+		bias_line.classList.add("bias");
 		bias_line.querySelector(".bias_phrase").querySelector("input").value = "";
 		bias_line.querySelector(".bias_percent").querySelector("input").value = 1;
 		bias_line.querySelector(".bias_max").querySelector("input").value = 50;
@@ -1337,6 +1342,34 @@ function send_world_info(uid) {
 }
 
 //--------------------------------------------General UI Functions------------------------------------
+function do_biases(data) {
+	console.log(data);
+	//clear out our old bias lines
+	while (document.getElementsByClassName("bias").firstChild) {
+		document.getElementsByClassName("bias").removeChild(document.getElementsByClassName("bias").firstChild);
+	}
+	
+	//add our bias lines
+	for (const [key, value] of Object.entries(data.value)) {
+		bias_line = document.getElementById("empty_bias").cloneNode(true);
+		bias_line.id = "";
+		bias_line.classList.add("bias");
+		bias_line.querySelector(".bias_phrase").querySelector("input").value = key;
+		bias_line.querySelector(".bias_percent").querySelector("input").value = value[0];
+		bias_line.querySelector(".bias_max").querySelector("input").value = value[1];
+		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);
+	bias_line.id = "";
+	bias_line.classList.add("bias");
+	bias_line.querySelector(".bias_phrase").querySelector("input").value = "";
+	bias_line.querySelector(".bias_percent").querySelector("input").value = 1;
+	bias_line.querySelector(".bias_max").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;
 }

templates/index_new.html

@@ -14,6 +14,7 @@
 	<link href="static/koboldai.css" rel="stylesheet">
 	<script src="static/koboldai.js"></script>
 	<script src="static/favicon.js"></script>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 	<!------------ Left Flyout Menu--------------------->
@@ -98,6 +99,35 @@
 				<textarea rows=1 id="world_info_comment_" class="world_info_text fullwidth"></textarea>
 			</div>
 		</div>
+		<div id="empty_bias">
+			<div class="bias_phrase">
+				<input type=text placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
+			</div>
+			<div class="bias_percent">
+				<div class="bias_slider">
+					<div class="bias_slider_bar">
+						<input type="range" min="0" max="1" step="0.01" value="1" class="setting_item_input" 
+							oninput="update_bias_slider_value(this);"
+							onchange="save_bias(this);"/>
+					</div>
+					<div class="bias_slider_min">0</div>
+					<div class="bias_slider_cur">1</div>
+					<div class="bias_slider_max">1</div>
+				</div>
+			</div>
+			<div class="bias_max">
+				<div class="bias_slider">
+					<div class="bias_slider_bar">
+						<input type="range" min="0" max="50" step="1" value="50" class="setting_item_input"
+							oninput="update_bias_slider_value(this);" 
+							onchange="save_bias(this);"/>
+					</div>
+					<div class="bias_slider_min">0</div>
+					<div class="bias_slider_cur">50</div>
+					<div class="bias_slider_max">50</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </body>
 </html>

templates/settings flyout.html

@@ -60,35 +60,7 @@
 			<div class="bias_header_percent">Percent Chance</div>
 			<div class="bias_header_max">Max Occurance</div>
 		</div>
-		<div class="bias">
+		
-			<div class="bias_phrase">
-				<input type=text placeholder="Word or Phrase to Bias" onchange="save_bias(this);"/>
-			</div>
-			<div class="bias_percent">
-				<div class="bias_slider">
-					<div class="bias_slider_bar">
-						<input type="range" min="0" max="1" step="0.01" value="1" class="setting_item_input" 
-							oninput="update_bias_slider_value(this);"
-							onchange="save_bias(this);"/>
-					</div>
-					<div class="bias_slider_min">0</div>
-					<div class="bias_slider_cur">1</div>
-					<div class="bias_slider_max">1</div>
-				</div>
-			</div>
-			<div class="bias_max">
-				<div class="bias_slider">
-					<div class="bias_slider_bar">
-						<input type="range" min="0" max="50" step="1" value="50" class="setting_item_input"
-							oninput="update_bias_slider_value(this);" 
-							onchange="save_bias(this);"/>
-					</div>
-					<div class="bias_slider_min">0</div>
-					<div class="bias_slider_cur">50</div>
-					<div class="bias_slider_max">50</div>
-				</div>
-			</div>
-		</div>
 		
 	</div>
 </div>