Merge pull request #48 from one-some/ui2-infotexts

Infotexts and setting category ui fixes

static/koboldai.css

@@ -1542,3 +1542,29 @@ h2 .material-icons-outlined {
 .flyout_menu_contents {
   scrollbar-width: thin;
 }
+
+.collapsable_header {
+	cursor: pointer;
+}
+
+.collapsable_header, .section_header, .help_text {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.section_header {
+	margin-left: 2px;
+	margin-bottom: 4px;
+}
+
+.help_text {
+	margin-left: 6px;
+	margin-bottom: 0.7em;
+	opacity: 0.7;
+	font-size: 0.9em;
+	display: block;
+}

templates/settings flyout.html

@@ -88,7 +88,7 @@
 			<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
 		</div>
 		{% with menu='Settings' %}
-			<div onclick="toggle_setting_category(this);">
+			<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> Generation</h4>
 			</div>
 			<div class="setting_tile_area">
@@ -97,9 +97,10 @@
 				{% endwith %}
 			</div>
 			
-			<div onclick="toggle_setting_category(this);">
+			<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> Sampling</h4>
 			</div>
+			<span class="help_text">Change how the AI decides what to say.</span>
 			<div class="setting_tile_area">
 				<div class="setting_container_single">
 					<!---Top Row---->
@@ -133,16 +134,17 @@
 				{% endwith %}
 			</div>
 			
-			<div onclick="toggle_setting_category(this);">
+			<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> Repetition</h4>
 			</div>
+			<span class="help_text">Change how the AI combats repetition.</span>
 			<div class="setting_tile_area">
 				{% with sub_path='Repetition' %}
 					{% include 'settings item.html' %}
 				{% endwith %}
 			</div>
 			
-			<div onclick="toggle_setting_category(this);">
+			<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> Other</h4>
 			</div>
 			<div class="setting_tile_area">
@@ -151,7 +153,7 @@
 				{% endwith %}
 			</div>
 			
-			<div onclick="toggle_setting_category(this);">
+			<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> Modifiers</h4>
 			</div>
 			<div class="setting_tile_area">
@@ -176,9 +178,10 @@
 				</div>
 			</div>
 		{% endwith %}
-		<div onclick="toggle_setting_category(this);">
+		<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> Biasing</h4>
 		</div>
+		<span class="help_text">Influence the likelihood for the AI to output certain phrases.</span>
 		<div id="biasing">
 			<div class="bias_header">
 				<div class="bias_header_phrase">Phrase</div>
@@ -188,7 +191,7 @@
 		</div>
 	</div>
 	<div id="setting_menu_interface" class="hidden settings_category_area">
-		<div onclick="toggle_setting_category(this);">
+		<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> UI</h4>
 		</div>
 		<div class="setting_tile_area">
@@ -220,7 +223,7 @@
 				<span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span>
 			</div>
 		</div>
-		<div onclick="toggle_setting_category(this);">
+		<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> Theme</h4>
 		</div>
 		<div class="setting_tile_area" id="Theme">
@@ -230,7 +233,7 @@
 				<option>Darkness</option>
 				<option>user</option>
 			</select>
-			<div onclick="toggle_setting_category(this);">
+			<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> Palette</h4>
 			</div>
 			<div class="setting_tile_area" id="Palette">
@@ -280,7 +283,7 @@
 			</div>
 			
 		</div>
-		<div onclick="toggle_setting_category(this);">
+		<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> Formatting</h4>
 		</div>
 		<div class="setting_tile_area">

templates/story flyout.html

@@ -29,12 +29,20 @@
 <div class="flyout_menu_contents">
 	<div id="story_menu_memory" class="story_category_area">
 		<div id="Memory">
-			Memory:<br/>
+			<h4 class="section_header">Memory</h4>
+			<span class="help_text">
+				Important information the AI should always keep in mind.
+			</span>
 			<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">
+			<h4 class="section_header">Author's Note</h4>
+			<span class="help_text">
+				Heavily influences the direction and style of the AI's writing.
+			</span>
+
 			Template:<br/>
 			<input autocomplete="off" type=text class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/>
 			Author's Notes:<br/>
@@ -51,11 +59,19 @@
 	</div>
 	<div id="story_menu_notes" class="story_category_area hidden">
 		<div id="Notes">
-			Notes (ignored by AI):<br/>
+			<h4 class="section_header">Notes</h4>
+			<span class="help_text">
+				Notes about the story. These notes are not read by the AI!
+			</span>
 			<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">
+		<h4 class="section_header">World Info</h4>
+		<span class="help_text">
+			Stores long-term information that is recalled by the AI when certain words are used.
+			<span class="helpicon material-icons-outlined" title="Use this instead of Memory for information on things like characters, objects, events, places, and anything else with detail.">help_icon</span>
+		</span>
 		<div class="setting_tile_area">
 		{% with menu='World Info' %}
 			{% with sub_path='' %}