Merge branch 'UI2' of https://github.com/ebolam/KoboldAI into UI2

aiserver.py

@@ -6296,6 +6296,8 @@ def UI_2_var_change(data):
         value = bool(data['value'])
     elif type(getattr(koboldai_vars, name)) == str:
         value = str(data['value'])
+    elif type(getattr(koboldai_vars, name)) == list:
+        value = list(data['value'])
     else:
         print("Unknown Type {} = {}".format(name, type(getattr(koboldai_vars, name))))
     
@@ -6375,6 +6377,14 @@ def UI_2_submit(data):
     koboldai_vars.recentrng = koboldai_vars.recentrngm = None
     actionsubmit(data['data'], actionmode=koboldai_vars.actionmode)
  
+ #==================================================================#
+# Event triggered when user clicks the submit button
+#==================================================================#
+@socketio.on('abort')
+def UI_2_abort(data):
+    koboldai_vars.abort = True
+
+ 
 #==================================================================#
 # Event triggered when user clicks the pin button
 #==================================================================#
@@ -6399,7 +6409,7 @@ def UI_2_redo(data):
         koboldai_vars.actions.use_option(0)
 
 #==================================================================#
-# Event triggered when user clicks the redo button
+# Event triggered when user clicks the retry button
 #==================================================================#
 @socketio.on('retry')
 def UI_2_retry(data):

gensettings.py

@@ -9,7 +9,7 @@ gensettingstf = [
 	"step": 2,
 	"default": 80,
     "tooltip": "Number of tokens the AI should generate. Higher numbers will take longer to generate.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Generation",
     "classname": "model",
     "name": "genamt"
@@ -24,7 +24,7 @@ gensettingstf = [
 	"step": 0.05,
 	"default": 0.5,
     "tooltip": "Randomness of sampling. High values can increase creativity but may make text less sensible. Lower values will make text more predictable but can become repetitious.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Generation",
     "classname": "model",
     "name": "temp"
@@ -39,7 +39,7 @@ gensettingstf = [
 	"step": 0.05,
 	"default": 0.9,
     "tooltip": "Used to discard unlikely text in the sampling process. Lower values will make text more predictable but can become repetitious. (Put this value on 1 to disable its effect)",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Sampling",
     "classname": "model",
     "name": "top_p"
@@ -55,7 +55,7 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
     "tooltip": "Alternative sampling method, can be combined with top_p. (Put this value on 0 to disable its effect)",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Sampling",
     "classname": "model",
     "name": "top_k"
@@ -70,7 +70,7 @@ gensettingstf = [
 	"step": 0.05,
 	"default": 1.0,
     "tooltip": "Alternative sampling method; it is recommended to disable top_p and top_k (set top_p to 1 and top_k to 0) if using this. 0.95 is thought to be a good value. (Put this value on 1 to disable its effect)",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Sampling",
     "classname": "model",
     "name": "tfs"
@@ -85,7 +85,7 @@ gensettingstf = [
 	"step": 0.05,
 	"default": 1.0,
     "tooltip": "Alternative sampling method described in the paper \"Typical Decoding for Natural Language Generation\" (10.48550/ARXIV.2202.00666). The paper suggests 0.2 as a good value for this setting. Set this setting to 1 to disable its effect.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Sampling",
     "classname": "model",
     "name": "typical"
@@ -100,7 +100,7 @@ gensettingstf = [
 	"step": 0.01,
 	"default": 0.0,
     "tooltip": "Alternative sampling method that reduces the randomness of the AI whenever the probability of one token is much higher than all the others. Higher values have a stronger effect. Set this setting to 0 to disable its effect.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Sampling",
     "classname": "model",
     "name": "top_a"
@@ -115,7 +115,7 @@ gensettingstf = [
 	"step": 0.01,
 	"default": 1.1,
     "tooltip": "Used to penalize words that were already generated or belong to the context (Going over 1.2 breaks 6B models).",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Repetition",
     "classname": "model",
     "name": "rep_pen"
@@ -130,7 +130,7 @@ gensettingstf = [
 	"step": 4,
 	"default": 0,
     "tooltip": "Repetition penalty range. If set higher than 0, only applies repetition penalty to the last few tokens of your story rather than applying it to the entire story. This slider controls the amount of tokens at the end of your story to apply it to.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Repetition",
     "classname": "model",
     "name": "rep_pen_range"
@@ -145,7 +145,7 @@ gensettingstf = [
 	"step": 0.1,
 	"default": 0.0,
     "tooltip": "Repetition penalty slope. If BOTH this setting and Rep Penalty Range are set higher than 0, will use sigmoid interpolation to apply repetition penalty more strongly on tokens that are closer to the end of your story. This setting controls the tension of the sigmoid curve; higher settings will result in the repetition penalty difference between the start and end of your story being more apparent. Setting this to 1 uses linear interpolation; setting this to 0 disables interpolation.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Repetition",
     "classname": "model",
     "name": "rep_pen_slope"
@@ -160,7 +160,7 @@ gensettingstf = [
 	"step": 8,
 	"default": 1024,
     "tooltip": "Max number of tokens of context to submit to the AI for sampling. Make sure this is higher than Amount to Generate. Higher values increase VRAM/RAM usage.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Generation",
     "classname": "model",
     "name": "max_length"
@@ -175,7 +175,7 @@ gensettingstf = [
 	"step": 1,
 	"default": 1,
     "tooltip": "Number of results to generate per submission. Increases VRAM/RAM usage.",
-    "menu_path": "Model",
+    "menu_path": "Settings",
     "sub_path":  "Generation",
     "classname": "model",
     "name": "numseqs"
@@ -190,7 +190,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 3,
     "tooltip": "Number of historic actions to scan for W Info keys.",
-    "menu_path": "User",
+    "menu_path": "World Info",
+    "sub_path": "",
     "classname": "user",
     "name": "widepth"
 	},
@@ -204,7 +205,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
     "tooltip": "Whether the game is saved after each action.",
-    "menu_path": "Story",
+    "menu_path": "Home",
+    "sub_path": "",
     "classname": "story",
     "name": "autosave"
 	},
@@ -218,7 +220,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 1,
     "tooltip": "Whether the prompt should be sent in the context of every action.",
-    "menu_path": "Story",
+    "menu_path": "Settings",
+    "sub_path": "Other",
     "classname": "story",
     "name": "useprompt"
 	},
@@ -233,6 +236,7 @@ gensettingstf = [
 	"default": 0,
     "tooltip": "Turn this on if you are playing a Choose your Adventure model.",
     #"menu_path": "Story",
+    #"sub_path": "",
     #"classname": "story",
     #"name": "adventure"
 	},
@@ -247,6 +251,7 @@ gensettingstf = [
 	"default": 0,
     "tooltip": "This mode optimizes KoboldAI for chatting.",
     #"menu_path": "Story",
+    #"sub_path": "",
     #"classname": "story",
     #"name": "chatmode"
 	},
@@ -260,7 +265,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
     "tooltip": "Scan the AI's output for world info keys as it's generating the output.",
-    "menu_path": "Story",
+    "menu_path": "World Info",
+    "sub_path": "",
     "classname": "story",
     "name": "dynamicscan"
 	},
@@ -274,7 +280,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
     "tooltip": "When enabled the AI does not generate when you enter the prompt, instead you need to do an action first.",
-    "menu_path": "User",
+    "menu_path": "Settings",
+    "sub_path": "Other",
     "classname": "user",
     "name": "nopromptgen"
 	},
@@ -288,7 +295,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
     "tooltip": "When enabled, the Memory text box in the Random Story dialog will be prefilled by default with your current story's memory instead of being empty.",
-    "menu_path": "User",
+    "menu_path": "Settings",
+    "sub_path": "Other",
     "classname": "user",
     "name": "rngpersist"
 	},
@@ -302,7 +310,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
   "tooltip": "Disables userscript generation modifiers.",
-    "menu_path": "User",
+    "menu_path": "Settings",
+    "sub_path": "Modifiers",
     "classname": "user",
     "name": "nogenmod"
 	},
@@ -316,7 +325,8 @@ gensettingstf = [
 	"step": 1,
 	"default": 0,
   "tooltip": "Show debug info",
-    "menu_path": "user",
+    "menu_path": "",
+    "sub_path": "",
     "classname": "user",
     "name": "debug"
 	},
@@ -327,7 +337,8 @@ gensettingstf = [
 	"id": "actionmode",
 	"default": 0,
     "tooltip": "Choose the mode of KoboldAI",
-    "menu_path": "Story",
+    "menu_path": "Home",
+    "sub_path": "",
     "classname": "story",
     "name": "actionmode",
     'children': [{'text': 'Story', 'value': 0}, {'text':'Adventure','value':1}, {'text':'Chat', 'value':2}]
@@ -342,7 +353,8 @@ gensettingstf = [
  	"step": 1,
  	"default": 0,
 	"tooltip": "Shows outputs to you as they are made.",
-    "menu_path": "User",
+    "menu_path": "Interface",
+    "sub_path": "UI",
     "classname": "user",
     "name": "output_streaming"
  	}

koboldai_settings.py

@@ -38,7 +38,7 @@ def process_variable_changes(socketio, classname, name, value, old_value, debug_
                     if threading.get_ident() in rely_clients:
                         sio = rely_clients[threading.get_ident()]
                     else:
-                        sio = socketio_client.Client(logger=True, engineio_logger=True)
+                        sio = socketio_client.Client()
                         @sio.event
                         def connect():
                             pass
@@ -93,6 +93,7 @@ class koboldai_vars(object):
             self._story_settings[story_name] = story_settings(self.socketio)
         if json_data is not None:
             self._story_settings[story_name].from_json(json_data)
+        self._story_settings['default'].send_to_ui()
     
     def story_list(self):
         return [x for x in self._story_settings]
@@ -795,7 +796,7 @@ class KoboldStoryRegister(object):
                         if 'stream_id' in self.actions[self.action_count+1]['Options'][j]:
                             if self.actions[self.action_count+1]['Options'][j]['stream_id'] == i:
                                 found = True
-                                self.actions[self.action_count+1]['Options'][j]['text'] = "{}{}".format(self.actions[self.action_count+1]['Options'][i]['text'], text_list[i])
+                                self.actions[self.action_count+1]['Options'][j]['text'] = "{}{}".format(self.actions[self.action_count+1]['Options'][j]['text'], text_list[i])
                     if not found:
                         self.actions[self.action_count+1]['Options'].append({"text": text_list[i], "Pinned": False, "Previous Selection": False, "Edited": False, "stream_id": i})
             else:

static/koboldai.css

@@ -79,6 +79,7 @@
     --wi_card_bg_color: #262626;
     --wi_card_tag_bg_color: #404040;
     --wi_tag_color: #337ab7;
+	--sample_order_select_color: blue;
 	--story_options_size: 30%;
 	--story_pinned_areas: "menuicon options gamescreen lefticon"
 						 "menuicon inputrow inputrow lefticon";
@@ -214,6 +215,19 @@
 	margin: 2px;
 }
 
+.setting_container_single {
+	display: grid;
+	grid-template-areas: "label"
+						 "item";
+	grid-template-rows: 20px 120px;
+	grid-template-columns: var(--flyout_menu_width);
+	row-gap: 0.2em;
+	background-color: var(--setting_background);
+	color: var(--text);
+	margin: 2px;
+}
+
+
 .setting_minlabel {
 	padding-top: 6px;
 	grid-area: minlabel;
@@ -352,6 +366,13 @@ input[type="range"]::-ms-fill-upper {
 	cursor: pointer;
 }
 
+@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
+.menu_icon.hidden {
+	display: inline-block !important;
+}
+}
+
 @media only screen and (max-aspect-ratio: 7/5) {
 .menu_pin {
 	display: none;
@@ -435,6 +456,10 @@ input[type="range"]::-ms-fill-upper {
 	margin-right: 25px;
 }
 
+.sample_order.selected {
+	background-color: var(--sample_order_select_color);
+}
+
 .presets option {
 	color: var(--dropdown-select);
 	background: var(--preset-item-background);
@@ -475,6 +500,10 @@ input[type="range"]::-ms-fill-upper {
 }
 
 /* -----------------------------------------Bias-------------------------------------- */
+#biases_label {
+	cursor: pointer;
+}
+
 .bias {
 	display: grid;
 	grid-template-areas: "phrase percent max";
@@ -564,6 +593,13 @@ input[type="range"]::-ms-fill-upper {
 	grid-area: lefticon;
 }
 
+@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
+.right_menu_icon.hidden {
+	display: inline-block !important;
+}
+}
+
 .rightSideMenu {
 	z-index: 3;
 	height: 100%;
@@ -588,9 +624,12 @@ input[type="range"]::-ms-fill-upper {
   z-index: 3;
 }
 
+@media only screen and (min-aspect-ratio: 7/5) {
+/*  Desktop Mode  */
 .rightSideMenu.pinned {
   width: var(--flyout_menu_width);
 }
+}
 
 .rightSideMenu .flyout_menu_contents {
 	overflow-x: hidden;
@@ -598,6 +637,46 @@ input[type="range"]::-ms-fill-upper {
 	height: calc(100vh - 150px);
 }
 
+.story_title_area {
+}
+
+.story_title_area .var_sync_story_story_name {
+	border-bottom: 1px solid;
+	padding-bottom: 5px;
+}
+
+.story_title_area .var_sync_story_story_name[contenteditable="true"]:active,
+.story_title_area .var_sync_story_story_name[contenteditable="true"]:focus{
+	border:none;
+	outline:none;
+	color: var(--text_edit);
+	border-bottom: 1px solid var(--text);
+	padding-bottom: 5px;
+}
+
+.story_title {
+	font-size: x-large;
+}
+
+.story_title_icons {
+	font-size: 18px;
+}
+
+.material-icons-outlined[story_gamesaved="true"] {
+	filter: brightness(40%);
+}
+
+@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
+.story_menu_pin {
+	display: none;
+}
+}
+
+.story_menu_pin {
+	color: #999;
+	cursor: pointer;
+}
 
 
 table.server_vars {
@@ -630,6 +709,10 @@ td.server_vars {
 	margin: 5px;
 }
 
+.wi_folder_collapser, .wi_add_button {
+	cursor: pointer;
+}
+
 .world_info_card {
 	width: 95%;
 	border: 2px outset var(--wi_card_border_color);
@@ -730,7 +813,7 @@ body {
 	grid-template-areas: "menuicon gamescreen lefticon"
 					     "menuicon options lefticon"
 						 "menuicon inputrow lefticon";
-	grid-template-columns: 30px auto 20px;
+	grid-template-columns: 30px auto 30px;
 	grid-template-rows: auto min-content 100px;
 }
 }
@@ -993,7 +1076,6 @@ body {
 }
 
 .popup .popup_list_area {
-	height: 70vh;
 	overflow-x: hidden;
 	flex-grow: 1;
 	flex-shrink: 0;
@@ -1029,6 +1111,7 @@ body {
 .popup .item .file {
 	grid-area: file;
 	display: grid;
+	cursor: pointer;
 }
 
 .popup .item .file:hover {
@@ -1073,6 +1156,7 @@ body {
 	display: grid;
 	grid-template-areas: "item gpu_size";
 	grid-template-columns: auto 40px;
+	cursor: pointer;
 }
 
 .popup .item .model:hover {
@@ -1247,3 +1331,34 @@ body.NotConnected {
 .cursor {
 	cursor: pointer;
 }
+
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  src: url(/static/MaterialSymbolsOutlined.ttf) format('truetype');
+}
+
+.material-icons-outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

static/koboldai.js

@@ -35,6 +35,20 @@ var shift_down = false;
 var world_info_data = {};
 var world_info_folder_data = {};
 var saved_settings = {};
+const map1 = new Map()
+map1.set('Top-k Sampling', 0)
+map1.set('Top-a Sampling', 1)
+map1.set('Top-p Sampling', 2)
+map1.set('Tail-free Sampling', 3)
+map1.set('Typical Sampling', 4)
+map1.set('Temperature', 5)
+const map2 = new Map()
+map2.set(0, 'Top-k Sampling')
+map2.set(1, 'Top-a Sampling')
+map2.set(2, 'Top-p Sampling')
+map2.set(3, 'Tail-free Sampling')
+map2.set(4, 'Typical Sampling')
+map2.set(5, 'Temperature')
 //-----------------------------------Server to UI  Functions-----------------------------------------------
 function connect() {
 	console.log("connected");
@@ -289,38 +303,39 @@ function do_story_text_length_updates(data) {
 }
 
 function do_presets(data) {
-	var select = document.getElementById('presets');
+	for (select of document.getElementsByClassName('presets')) {
-	//clear out the preset list
+		//clear out the preset list
-	while (select.firstChild) {
+		while (select.firstChild) {
-		select.removeChild(select.firstChild);
+			select.removeChild(select.firstChild);
-	}
+		}
-	//add our blank option
+		//add our blank option
-	var option = document.createElement("option");
+		var option = document.createElement("option");
-	option.value="";
+		option.value="";
-	option.text="presets";
+		option.text="presets";
-	select.append(option);
+		select.append(option);
-	presets = data.value;
+		presets = data.value;
-	
+		
-	
+		
-	for (const [key, value] of Object.entries(data.value)) {
+		for (const [key, value] of Object.entries(data.value)) {
-		var option_group = document.createElement("optgroup");
+			var option_group = document.createElement("optgroup");
-		option_group.label = key;
+			option_group.label = key;
-		option_group.classList.add("preset_group");
+			option_group.classList.add("preset_group");
-		for (const [group, group_value] of Object.entries(value)) {
+			for (const [group, group_value] of Object.entries(value)) {
-			var option = document.createElement("option");
+				var option = document.createElement("option");
-			option.text=group;
+				option.text=group;
-			option.disabled = true;
+				option.disabled = true;
-			option.classList.add("preset_group");
+				option.classList.add("preset_group");
-			option_group.append(option);
+				option_group.append(option);
-			for (const [preset, preset_value] of Object.entries(group_value)) {
+				for (const [preset, preset_value] of Object.entries(group_value)) {
-				var option = document.createElement("option");
+					var option = document.createElement("option");
-				option.value=preset;
+					option.value=preset;
-				option.text=preset_value.preset;
+					option.text=preset_value.preset;
-				option.title = preset_value.description;
+					option.title = preset_value.description;
-				option_group.append(option);
+					option_group.append(option);
-			}
+				}
+			}
+			select.append(option_group);
 		}
-		select.append(option_group);
 	}
 }
 
@@ -372,11 +387,17 @@ function var_changed(data) {
 	//Special Case for Presets
 	} else if ((data.classname == 'model') && (data.name == 'presets')) {
 		do_presets(data);
+	//Special Case for prompt
 	} 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);
+	//Special Case for sample_order
+	} else if ((data.classname == 'model') && (data.name == 'sampler_order')) {
+		for (const [index, item] of data.value.entries()) {
+			Array.from(document.getElementsByClassName("sample_order"))[index].textContent = map2.get(item);
+		}
 	//Basic Data Syncing
 	} else {
 		var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname.replace(" ", "_")+"_"+data.name.replace(" ", "_"));
@@ -1061,7 +1082,7 @@ function world_info_entry(data) {
 	content.setAttribute("uid", data.uid);
 	content.value = data.content;
 	content.onchange = function () {
-							world_info_data[this.getAttribute('uid')]['content'] = this.textContent;
+							world_info_data[this.getAttribute('uid')]['content'] = this.value;
 							send_world_info(this.getAttribute('uid'));
 							this.classList.add("pulse");
 						}
@@ -1151,6 +1172,7 @@ function world_info_folder(data) {
 			collapse_icon = document.createElement("span");
 			collapse_icon.id = "world_info_folder_collapse_"+folder_name;
 			collapse_icon.classList.add("oi");
+			collapse_icon.classList.add("wi_folder_collapser");
 			collapse_icon.setAttribute("data-glyph", "chevron-bottom");
 			collapse_icon.setAttribute("folder", folder_name);
 			collapse_icon.onclick = function () {
@@ -1162,6 +1184,7 @@ function world_info_folder(data) {
 			expand_icon = document.createElement("span");
 			expand_icon.id = "world_info_folder_expand_"+folder_name;
 			expand_icon.classList.add("oi");
+			expand_icon.classList.add("wi_folder_collapser");
 			expand_icon.setAttribute("data-glyph", "chevron-right");
 			expand_icon.setAttribute("folder", folder_name);
 			expand_icon.onclick = function () {
@@ -1190,6 +1213,7 @@ function world_info_folder(data) {
 			//create add button
 			add_icon = document.createElement("span");
 			add_icon.classList.add("oi");
+			add_icon.classList.add("wi_add_button");
 			add_icon.setAttribute("data-glyph", "plus");
 			add_icon.textContent = "Add World Info Entry";
 			add_icon.setAttribute("folder", folder_name);
@@ -1267,7 +1291,30 @@ function show_error_message(data) {
 	error_message_box.classList.remove("hidden");
 	error_message_box.querySelector("#popup_list_area").textContent = data;
 }
+
 //--------------------------------------------UI to Server Functions----------------------------------
+function move_sample(direction) {
+	var previous = null;
+	console.log(direction);
+	for (const [index, temp] of Array.from(document.getElementsByClassName("sample_order")).entries()) {
+		if (temp.classList.contains("selected")) {
+			if ((direction == 'up') && (index > 0)) {
+				temp.parentElement.insertBefore(temp, previous);
+				break;
+			} else if ((direction == 'down') && (index+1 < Array.from(document.getElementsByClassName("sample_order")).length)) {
+				temp.parentElement.insertBefore(temp, Array.from(document.getElementsByClassName("sample_order"))[index+2]);
+				break;
+			}
+		}
+		previous = temp;
+	}
+	var sample_order = []
+	for (item of document.getElementsByClassName("sample_order")) {
+		sample_order.push(map1.get(item.textContent));
+	}
+	socket.emit("var_change", {"ID": 'model_sampler_order', "value": sample_order});
+}
+
 function new_story() {
 	//check if the story is saved
 	if (document.getElementById('save_story').getAttribute('story_gamesaved') == "false") {
@@ -1365,6 +1412,24 @@ function send_world_info(uid) {
 }
 
 //--------------------------------------------General UI Functions------------------------------------
+function select_sample(item) {
+	for (temp of document.getElementsByClassName("sample_order")) {
+		temp.classList.remove("selected");
+	}
+	item.classList.add("selected");
+}
+
+function toggle_setting_category(element) {
+	item = element.nextSibling.nextSibling;
+	if (item.classList.contains('hidden')) {
+		item.classList.remove("hidden");
+		element.firstChild.nextSibling.firstChild.textContent = "expand_more";
+	} else {
+		item.classList.add("hidden");
+		element.firstChild.nextSibling.firstChild.textContent = "navigate_next";
+	}
+}
+
 function preserve_game_space(preserve) {
 	var r = document.querySelector(':root');
 	console.log("Setting cookie to: "+preserve);
@@ -1859,6 +1924,11 @@ function update_token_lengths() {
 		prompt_length = parseInt(document.getElementById("story_prompt").getAttribute("story_prompt_length"));
 	}
 	
+	//prompt is truncated at 512 tokens
+	if (prompt_length > 512) {
+		prompt_length = 512;
+	}
+	
 	//used token length
 	token_length = memory_length + authors_notes;
 	
@@ -1892,13 +1962,14 @@ function update_token_lengths() {
 	}
 	
 	//go backwards through the text chunks and tag them if we still have space
+	passed_token_limit = false;
 	for (var chunk=max_chunk;chunk >= 0;chunk--) {
 		if (document.getElementById("Selected Text Chunk "+chunk).getAttribute("token_length") == null) {
 			current_chunk_length = 999999999999;
 		} else {
 			current_chunk_length = parseInt(document.getElementById("Selected Text Chunk "+chunk).getAttribute("token_length"));
 		}
-		if ((current_chunk_length != 0) && (token_length+current_chunk_length < max_token_length)) {
+		if ((current_chunk_length != 0) && (token_length+current_chunk_length < max_token_length)&& (!(passed_token_limit))) {
 			token_length += current_chunk_length;
 			document.getElementById("Selected Text Chunk "+chunk).classList.add("within_max_length");
 			uids = document.getElementById("Selected Text Chunk "+chunk).getAttribute("world_info_uids")
@@ -1909,6 +1980,9 @@ function update_token_lengths() {
 					document.getElementById("world_info_"+uid).classList.add("world_info_included");
 				}
 			}
+		} else if (!(passed_token_limit) && (current_chunk_length != 0)) {
+			passed_token_limit = true;
+			document.getElementById("Selected Text Chunk "+chunk).classList.remove("within_max_length");
 		} else {
 			document.getElementById("Selected Text Chunk "+chunk).classList.remove("within_max_length");
 		}
@@ -1948,46 +2022,53 @@ String.prototype.toHHMMSS = function () {
 }
 
 function close_menus() {
+	//close settings menu
 	document.getElementById("setting_menu_icon").classList.remove("change");
 	document.getElementById("SideMenu").classList.remove("open");
 	document.getElementById("main-grid").classList.remove("menu-open");
 	
+	//close story menu
 	document.getElementById("story_menu_icon").classList.remove("change");
 	document.getElementById("rightSideMenu").classList.remove("open");
 	document.getElementById("main-grid").classList.remove("story_menu-open");
+	
+	//close popup menus
+	document.getElementById('popup').classList.add("hidden");
+	document.getElementById('loadmodelcontainer').classList.add("hidden");
+	document.getElementById('loadcontainer').classList.add("hidden");
+	document.getElementById('save-confirm').classList.add("hidden");
+	document.getElementById('error_message').classList.add("hidden");
+	
+	
+	//unselect sampler items
+	for (temp of document.getElementsByClassName("sample_order")) {
+		temp.classList.remove("selected");
+	}
 }
 
 function toggle_flyout(x) {
-	if (document.getElementById("SideMenu").classList.contains("pinned")) {
+	if (document.getElementById("SideMenu").classList.contains("open")) {
-		//do nothing
+		x.classList.remove("change");
+		document.getElementById("SideMenu").classList.remove("open");
+		document.getElementById("main-grid").classList.remove("menu-open");
 	} else {
-		if (document.getElementById("SideMenu").classList.contains("open")) {
+		x.classList.add("change");
-			x.classList.remove("change");
+		document.getElementById("SideMenu").classList.add("open");
-			document.getElementById("SideMenu").classList.remove("open");
+		document.getElementById("main-grid").classList.add("menu-open");
-			document.getElementById("main-grid").classList.remove("menu-open");
+		document.getElementById("menu_pin").classList.remove("hidden");
-		} else {
+	}
-			x.classList.add("change");
-			document.getElementById("SideMenu").classList.add("open");
-			document.getElementById("main-grid").classList.add("menu-open");
-			document.getElementById("menu_pin").classList.remove("hidden");
-		}
-}
 }
 
 function toggle_flyout_right(x) {
-	if (document.getElementById("rightSideMenu").classList.contains("pinned")) {
+	if (document.getElementById("rightSideMenu").classList.contains("open")) {
-		//do nothing
+		x.classList.remove("change");
+		document.getElementById("rightSideMenu").classList.remove("open");
+		document.getElementById("main-grid").classList.remove("story_menu-open");
 	} else {
-		if (document.getElementById("rightSideMenu").classList.contains("open")) {
+		x.classList.add("change");
-			x.classList.remove("change");
+		document.getElementById("rightSideMenu").classList.add("open");
-			document.getElementById("rightSideMenu").classList.remove("open");
+		document.getElementById("main-grid").classList.add("story_menu-open");
-			document.getElementById("main-grid").classList.remove("story_menu-open");
+		document.getElementById("story_menu_pin").classList.remove("hidden");
-		} else {
-			x.classList.add("change");
-			document.getElementById("rightSideMenu").classList.add("open");
-			document.getElementById("main-grid").classList.add("story_menu-open");
-			document.getElementById("story_menu_pin").classList.remove("hidden");
-		}
 	}
 }
 
@@ -2045,7 +2126,7 @@ function setCookie(cname, cvalue, exdays=60) {
   const d = new Date();
   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
   let expires = "expires="+d.toUTCString();
-  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;samesite=none;domain=koboldai.org";
 }
 
 function getCookie(cname) {
@@ -2092,21 +2173,23 @@ function detect_enter_text(e) {
 	}
 }
 
-function detect_shift_down(e) {
+function detect_key_down(e) {
 	if ((e.code == "ShiftLeft") || (e.code == "ShiftRight")) {
 		shift_down = true;
+	} else if (e.code == "Escape") {
+		close_menus();
 	}
 }
 
-function detect_shift_up(e) {
+function detect_key_up(e) {
 	if ((e.code == "ShiftLeft") || (e.code == "ShiftRight")) {
 		shift_down = false;
 	}
 }
 
 $(document).ready(function(){
-	document.onkeydown = detect_shift_down;
+	document.onkeydown = detect_key_down;
-	document.onkeyup = detect_shift_up;
+	document.onkeyup = detect_key_up;
 	document.getElementById("input_text").onkeydown = detect_enter_submit;
 	if (getCookie("Settings_Pin") == "false") {
 		settings_unpin();
@@ -2118,7 +2201,6 @@ $(document).ready(function(){
 	} else {
 		story_unpin();
 	}
-	console.log("cookie: "+getCookie("preserve_game_space"));
+	preserve_game_space(!(getCookie("preserve_game_space") == "false"));
-	preserve_game_space((getCookie("preserve_game_space") == "true"));
+	options_on_right(!(getCookie("options_on_right") == "false"));
-	options_on_right((getCookie("options_on_right") == "true"));
 });

templates/index.html

@@ -100,6 +100,7 @@
 				<div id="connectstatusdiv" class="flex-row-container">
 					<span id="connectstatus" class="color_orange flex-row">Waiting for connection...</span>
 					<div class="layer-container status-container flex-push-left" style="color: #FFFFFF;" id="runtime"></div>
+					<span><button class="btn btn-primary" onclick="window.location='/new_ui'">Try New UI</button></span>
 					<div class="layer-container status-container flex-push-right">
 						<span class="oi oi-puzzle-piece statusicon layer-bottom" aria-hidden="true">
 							<div class="statustext statustext-wide">

templates/index_new.html

@@ -45,14 +45,14 @@
 		<div id="Select Options" class="sequence_area"></div>
 		<!------------ Input Area--------------------->
 		<div class="inputrow" id="inputrow_container">
-			<textarea row=5 id="input_text" placeholder="Enter text here"></textarea>
+			<textarea autocomplete="off" row=5 id="input_text" placeholder="Enter text here"></textarea>
 			<div class="statusbar_outer hidden">
 				<div class="statusbar_inner" style="width:0%">0%</div>
 			</div><br>
 			<button type="button" class="btn action_button submit var_sync_alt_system_aibusy" system_aibusy=False id="btnsend" 
 				onclick="socket.emit('submit', {'data': document.getElementById('input_text').value});document.getElementById('input_text').value = '';"
 				>Submit</button>
-			<button type="button" class="btn action_button submited var_sync_alt_system_aibusy"  system_aibusy=False id="btnsend"><img src="static/thinking.gif" class="force_center"></button>
+			<button type="button" class="btn action_button submited var_sync_alt_system_aibusy"  system_aibusy=False id="btnsend"><img src="static/thinking.gif" class="force_center" onclick="socket.emit('abort','');"></button>
 			<button type="button" class="btn action_button back" onclick="socket.emit('back', {});"><span class="oi" data-glyph="action-undo"></span></button>
 			<button type="button" class="btn action_button redo" onclick="socket.emit('redo', {});"><span class="oi" data-glyph="action-redo"></span></button>
 			<button type="button" class="btn action_button retry" onclick="socket.emit('retry', {});"><span class="oi" data-glyph="loop-circular"></span></button>

templates/settings flyout.html

@@ -27,52 +27,132 @@
 <!-- top menu bar-->
 <div class="menu_pin_area"></div>
 <div class="tabrow">
-	<span class="setting_menu_button selected" onclick="show_setting_menu(this);">Model</span>
+	<span class="setting_menu_button selected" onclick="show_setting_menu(this);">Home</span>
-	<span class="setting_menu_button" onclick="show_setting_menu(this);">Story</span>
+	<span class="setting_menu_button" onclick="show_setting_menu(this);">Settings</span>
-	<span class="setting_menu_button" onclick="show_setting_menu(this);">User</span>
+	<span class="setting_menu_button" onclick="show_setting_menu(this);">Interface</span>
-	<span class="setting_menu_button" onclick="show_setting_menu(this);">UI</span>
 	<span style="float: right;margin-right: 30px;" onclick="window.open('https://github.com/KoboldAI/KoboldAI-Client/wiki');">Help</span>
 </div>
 <div class="flyout_menu_contents">
 
-	<div id="setting_menu_model" class="settings_category_area">
+	<div id="setting_menu_home" class="settings_category_area">
 		<div id="Model_Info">
 			<div>
 				Running Model: <span class="var_sync_model_model">ReadOnly</span>
-				<select id=presets class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
 			</div>
-			<div><button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button></div>
+			<div>
+				<button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button>
+				<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
+			</div>
+		</div>
+		<div id="Story_Info">
+			<hr/>
+			<div class="story_title_area">
+				<span class="story_title">
+					<b>Story Name: </b>
+					<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
+				</span>
+				<div class="story_title_icons">
+					<span class="material-icons-outlined cursor" title="New Story" onclick="socket.emit('new_story', '');">description</span>
+					<span class="material-icons-outlined cursor" title="Load Story" onclick="socket.emit('load_story_list', '');">folder_open</span>
+					<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span>
+					<span class="material-icons-outlined cursor" title="Import Story">cloud_download</span>
+					<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+				</div>
+			</div>
+			<hr/>
 		</div>
 		<div class="setting_tile_area">
-		{% with menu='Model' %}
+		{% with menu='Home' %}
-			{% include 'settings item.html' %}
+			{% with sub_path='' %}
+				{% include 'settings item.html' %}
+			{% endwith %}
 		{% endwith %}
 		</div>
 	</div>
-	<div id="setting_menu_story" class="hidden settings_category_area">
+	<div id="setting_menu_settings" class="hidden settings_category_area">
-		<div id="Story_Info">
+		<div><select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select></div>
-			<div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div>
+		{% with menu='Settings' %}
-			<div>
+			<div onclick="toggle_setting_category(this);">
-				<button id="new_story" class="btn action_button" onclick="new_story();">New Story</button>
+				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Generation</h4>
-				<button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button>
+			</div>
-				<button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button>
+			<div class="setting_tile_area">
-				<button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button>
+				{% with sub_path='Generation' %}
-				<!---<a class='cursor' onclick="document.getElementById('download_iframe').src = 'json';">Download Story</a>--->
+					{% include 'settings item.html' %}
+				{% endwith %}
+			</div>
+			
+			<div onclick="toggle_setting_category(this);">
+				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Sampling</h4>
+			</div>
+			<div class="setting_tile_area">
+				<div class="setting_container_single">
+					<!---Top Row---->
+					<span class="setting_label">
+						Sample Order: 
+						<span class="helpicon">
+							?
+							<span class="helptext">
+								Sample Order Tooltip
+							</span>
+						</span>
+					</span>
+					<!---Bottom Row---->
+					<span class="setting_item">
+						<div style="display:flex;flex-direction:row;">
+							<ul id="sample_order_list" style="width:calc(var(--flyout_menu_width) - 60px);">
+								<li class="sample_order cursor" onclick="select_sample(this);">Top-k Sampling</li>
+								<li class="sample_order cursor" onclick="select_sample(this);">Top-a Sampling</li>
+								<li class="sample_order cursor" onclick="select_sample(this);">Top-p Sampling</li>
+								<li class="sample_order cursor" onclick="select_sample(this);">Tail-free Sampling</li>
+								<li class="sample_order cursor" onclick="select_sample(this);">Typical Sampling</li>
+								<li class="sample_order cursor" onclick="select_sample(this);">Temperature</li>
+							</ul>
+							<div style="display:flex;flex-direction:column;justify-content:center;align-items:center;">
+								<div class="material-icons-outlined cursor" onclick="move_sample('up');">arrow_upward</div>
+								<div class="material-icons-outlined cursor" onclick="move_sample('down');">arrow_downward</div>
+								
+							</div>
+						</div>
+					</span>
+					<!---Slider Labels--->
+					<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
+					<span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span>
+				</div>
+				{% with sub_path='Sampling' %}
+					{% include 'settings item.html' %}
+				{% endwith %}
+			</div>
+			
+			<div onclick="toggle_setting_category(this);">
+				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Repetition</h4>
+			</div>
+			<div class="setting_tile_area">
+				{% with sub_path='Repetition' %}
+					{% include 'settings item.html' %}
+				{% endwith %}
+			</div>
+			
+			<div onclick="toggle_setting_category(this);">
+				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Other</h4>
+			</div>
+			<div class="setting_tile_area">
+				{% with sub_path='Other' %}
+					{% include 'settings item.html' %}
+				{% endwith %}
+			</div>
+			
+			<div onclick="toggle_setting_category(this);">
+				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Modifiers</h4>
+			</div>
+			<div class="setting_tile_area">
+				{% with sub_path='Modifiers' %}
+					{% include 'settings item.html' %}
+				{% endwith %}
 			</div>
-		</div>
-		<div class="setting_tile_area">
-		{% with menu='Story' %}
-			{% include 'settings item.html' %}
 		{% endwith %}
+		<div onclick="toggle_setting_category(this);">
+			<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Biasing</h4>
 		</div>
-		<h4>
-			<span id="bias_open" class="oi" data-glyph="chevron-bottom" onclick='this.classList.add("hidden"); 
-																				 document.getElementById("bias_close").classList.remove("hidden"); 
-																				 document.getElementById("biasing").classList.add("hidden");'> Biasing:</span>
-			<span id="bias_close" class="oi hidden" data-glyph="chevron-right" onclick='this.classList.add("hidden"); 
-																				 document.getElementById("bias_open").classList.remove("hidden"); 
-																				 document.getElementById("biasing").classList.remove("hidden");'> Biasing:</span>
-		</h4>
 		<div id="biasing">
 			<div class="bias_header">
 				<div class="bias_header_phrase">Phrase</div>
@@ -81,16 +161,14 @@
 			</div>
 		</div>
 	</div>
-	<div id="setting_menu_user" class="hidden settings_category_area">
+	<div id="setting_menu_interface" class="hidden settings_category_area">
 		<div class="setting_tile_area">
-		{% with menu='User' %}
+		{% with menu='Interface' %}
-			{% include 'settings item.html' %}
+			{% with sub_path='UI' %}
+				{% include 'settings item.html' %}
+			{% endwith %}
 		{% endwith %}
-		</div>
+		<div class="setting_container">
-	</div>
-	<div id="setting_menu_ui" class="hidden settings_category_area">
-		<div class="setting_tile_area">
-			<div class="setting_container">
 				<span class="setting_label">
 					Maximize Game Text Space: 
 					<span class="helpicon">
@@ -126,4 +204,9 @@
 			</div>
 		</div>
 	</div>
+	<div id="setting_menu_ui" class="hidden settings_category_area">
+		<div class="setting_tile_area">
+			
+		</div>
+	</div>
 </div>

templates/settings item.html

@@ -1,5 +1,5 @@
 {% for item in settings %}
-{% if item["menu_path"] == menu %}
+{% if item["menu_path"] == menu and item['sub_path'] == sub_path %}
 <div class="setting_container">
 	<!---Top Row---->
 	<span class="setting_label">
@@ -12,7 +12,7 @@
 		</span>
 	</span>
 	{% if (item['unit'] != 'bool') and (item['unit'] != 'text') %}
-		<input class="setting_value var_sync_{{ item['classname'] }}_{{ item['name'] }}" id="{{ item['classname'] }}_{{ item['name'] }}_cur"
+		<input autocomplete="off" class="setting_value var_sync_{{ item['classname'] }}_{{ item['name'] }}" id="{{ item['classname'] }}_{{ item['name'] }}_cur"
 			   value="{{ item['default'] }}" item_id="{{ item['classname'] }}_{{ item['name'] }}" 
 			   {% if item['unit'] == 'float' %} inputmode="decimal"{% elif item['unit'] == 'float' %} inputmode="numeric"{% endif %}
 			   onchange="document.getElementById(this.getAttribute('item_id')).value = this.value; socket.emit('var_change', {'ID': this.id.replace('_cur', ''), 'value': this.value});">

templates/story flyout.html

@@ -30,15 +30,15 @@
 	<div id="story_menu_memory" class="story_category_area">
 		<div id="Memory">
 			Memory:<br/>
-			<textarea rows=20 id="memory" class="var_sync_story_memory var_sync_alt_story_memory_length fullwidth" onchange='sync_to_server(this);'></textarea>
+			<textarea rows=20 id="memory" class="var_sync_story_memory var_sync_alt_story_memory_length fullwidth" onchange='sync_to_server(this);' autocomplete="off"></textarea>
 		</div>
 	</div>
 	<div id="story_menu_author" class="story_category_area hidden">
 		<div id="author_notes">
 			Author's Notes:<br/>
-			<textarea rows=5 id="authors_notes" class="var_sync_story_authornote var_sync_alt_story_authornote_length fullwidth" onchange='sync_to_server(this);'></textarea><br/>
+			<textarea autocomplete="off" rows=5 id="authors_notes" class="var_sync_story_authornote var_sync_alt_story_authornote_length fullwidth" onchange='sync_to_server(this);'></textarea><br/>
 			Template:<br/>
-			<input type=text class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/>
+			<input autocomplete="off" type=text class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/>
 			andepth<br/>
 			<input type="range" min="0" max="5" step="1" 
 						   value="3" class="setting_item_input var_sync_story_andepth"
@@ -52,7 +52,7 @@
 	<div id="story_menu_notes" class="story_category_area hidden">
 		<div id="Notes">
 			Notes (ignored by AI):<br/>
-			<textarea rows=20 class="var_sync_story_notes fullwidth" onchange='sync_to_server(this);'></textarea>
+			<textarea autocomplete="off" rows=20 class="var_sync_story_notes fullwidth" onchange='sync_to_server(this);'></textarea>
 		</div>
 	</div>
 	<div id="story_menu_wi" class="story_category_area hidden">