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

2025-06-05 21:59:24 +02:00 · 2022-08-31 17:19:14 -04:00
parent 87a062099f e31a0466da
commit f0165aab6a
10 changed files with 334 additions and 74 deletions
--- a/aiserver.py
+++ b/aiserver.py
@@ -7237,7 +7237,7 @@ def UI_2_load_story_list(data):
    file_popup("Select Story to Load", "./stories", "load_story", upload=True, jailed=True, folder_only=False, renameable=True, 
                                                                  deleteable=True, show_breadcrumbs=True, item_check=valid_story,
                                                                  valid_only=True, hide_extention=True, extra_parameter_function=get_story_length,
-                                                                  column_names=['Story Name', 'Action Count'],
+                                                                  column_names=['Story Name', 'Action Count'], show_filename=False,
                                                                  column_widths=['auto', '100px'],
                                                                  sort="Modified", desc=True)
                                                                  
@@ -7246,10 +7246,11 @@ def get_story_length(item_full_path, item, valid_selection):
        return [""]
    with open(item_full_path, "r") as f:
        js = json.load(f)
+        title = js['story_name'] if 'story_name' in js else ".".join(item.split(".")[:-1])
        if 'file_version' not in js:
-            return [len(js['actions'])]
+            return [title, len(js['actions'])]
        if js['file_version'] == 1:
-            return [len(js['actions'])]
+            return [title, len(js['actions'])]
        return [0 if js['actions']['action_count'] == -1 else js['actions']['action_count'] ]
    

--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -447,6 +447,8 @@ input[type="range"]::-ms-fill-upper {
 }

 .story_title {
+	display: flex;
+	justify-content: space-between;
 	font-size: calc(1.8em + var(--font_size_adjustment));
 	text-align: center;
 	border-bottom: 1px;
@@ -463,9 +465,9 @@ input[type="range"]::-ms-fill-upper {
 }

 .story_title_icons {
-	font-size: calc(18px + var(--font_size_adjustment));
-	padding: 10px 0 0 0;
-	margin-left: 125px;
+	width: 100%;
+	padding: 10px;
+	text-align: center;
 }

 .settings_menu {
@@ -473,6 +475,20 @@ input[type="range"]::-ms-fill-upper {
 	padding-top: 7px;
 }

+.settings_button {
+	color: var(--button_text);
+	background: var(--button_background);
+	border-color: white;
+	border-width: 1px;
+	border-radius: var(--radius_settings_button);
+	border-style:solid;
+	height: 35px;
+}
+
+.settings_button[story_gamesaved="true"] {
+	filter: brightness(40%);
+}
+
 .settings_select {
 	color: var(--dropdown_text);
 	background: var(--dropdown_background);
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -579,6 +579,11 @@ function load_popup(data) {
 	var popup = document.getElementById("popup");
 	var popup_title = document.getElementById("popup_title");
 	popup_title.textContent = data.popup_title;
+	if (data.popup_title == "Select Story to Load") {
+		document.getElementById("import_story_button").classList.remove("hidden");
+	} else {
+		document.getElementById("import_story_button").classList.add("hidden");
+	}
 	var popup_list = document.getElementById("popup_list");
 	//first, let's clear out our existing data
 	while (popup_list.firstChild) {
@@ -634,7 +639,7 @@ function load_popup(data) {
 }

 function popup_items(data) {
-	//console.log(data);
+	console.log(data);
 	var popup_list = document.getElementById('popup_list');
 	//first, let's clear out our existing data
 	while (popup_list.firstChild) {
@@ -647,6 +652,9 @@ function popup_items(data) {
 	for (i=0; i < data.column_widths.length; i++) {
 		style = style + " p"+i;
 	}
+	if (data.show_filename) {
+		style = style + " p"+i;
+	}
 	style = style + '"; grid-template-columns: 50px';
 	for (column_width of data.column_widths) {
 		style = style + " "+column_width;
--- a/templates/popups.html
+++ b/templates/popups.html
@@ -9,7 +9,14 @@
 	<div class="popup_load_cancel hidden" id="popup_upload">
 		<input type=file id="popup_upload_file">
 	</div>
-	<div>Drag file(s) above or click here to Upload File<input id="popup_upload_input" type=file onchange="upload_file(this)"></div>
+	<div style="display:flex;justify-content: space-between;">
+		<span>Drag file(s) above or click here to Upload File<input id="popup_upload_input" type=file onchange="upload_file(this)"></span>
+		<button id="import_story_button" class="settings_button hidden" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">
+			<span class="material-icons-outlined cursor" title="Import Story">cloud_download</span>
+			<span> Import Story</span>
+		</button>
+		
+	</div>
 	<div class="popup_load_cancel" id="popup_load_cancel">
 		<button class="btn popup_load_cancel_button action_button" id="popup_accept">Load</button>
 		<button class="btn popup_load_cancel_button" id="popup_cancel" onclick='document.getElementById("popup").classList.add("hidden");'>Cancel</button>
--- a/templates/settings
+++ b/templates/settings
@@ -45,12 +45,13 @@
 				</span>
 			</div>
 			<div id="text_runningmodel">
-					<b>Running Model: </b>
-			</div>
-			<div class="Model_Icon">
-				<span class="material-icons-outlined cursor" title="Load Model" onclick="socket.emit('load_model_button', {});">folder_open</span>
+					<b>1) Model: </b>
 			</div>
 			<div style="text-align: center;">
+				<button class="settings_button" onclick="socket.emit('load_model_button', {});">
+					<span class="material-icons-outlined cursor" title="Load Model" style="font-size: 1.4em;">folder_open</span>
+					<span> Load Model</span>
+				</button>
 				<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
 			</div>
 		</div>
@@ -61,16 +62,28 @@
 					<span>
 						<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
 					</span>
+					<span>
+						<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+					</span>
 				</div>
 				<div id="text_storyname">
-					<b>Story Name: </b>
+					<b>2) Story: </b>
 				</div>
 				<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" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>save</span>
-					<span class="material-icons-outlined cursor" title="Import Story" onclick="document.getElementById('import_aidg_club_popup').classList.remove('hidden');">cloud_download</span>
-					<span class="material-icons-outlined cursor" title="Download Story" onclick="document.getElementById('download_iframe').src = 'json';">file_download</span>
+					<button class="settings_button" onclick="socket.emit('new_story', '');">
+						<span class="material-icons-outlined cursor" title="New Story">description</span>
+						<span> New Story</span>
+					</button>
+					<button class="settings_button" onclick="socket.emit('load_story_list', '');">
+						<span class="material-icons-outlined cursor" title="Load Story">folder_open</span>
+						<span> Load Story</span>
+					</button>
+					<button class="settings_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>
+						<span class="material-icons-outlined cursor var_sync_alt_story_gamesaved" title="Save Story">save</span>
+						<span> Save Story</span>
+					</button>
+					
+					
 				</div>
 			</div>
 			<hr/>
--- a/themes/Darkness.css
+++ b/themes/Darkness.css
@@ -1,37 +1,44 @@
+/*
+	Name: Darkness
+	Author: LightSaveUs
+	Version: 0.1.5
+	Description: A theme inspired by the AI Dungeon interface.
+*/
+
 :root {
 /*----------------Palette Theme--------------------*/
-	--primary_palette: #afc6ff;
-	--on_primary_palette: #002d6c;
-	--primary_container_palette: #004397;
-	--on_primary_container_palette: #d9e2ff;
+	--primary_palette: #000000;
+	--on_primary_palette: #000000;
+	--primary_container_palette: #000000;
+	--on_primary_container_palette: #000000;

-	--secondary_palette: #f7c5ee;
-	--on_secondary_palette: #5c0059;
-	--secondary_container_palette: #d663bd;
-	--on_secondary_container_palette: #4e0039;
+	--secondary_palette: #000000;
+	--on_secondary_palette: #000000;
+	--secondary_container_palette: #000000;
+	--on_secondary_container_palette: #000000;

-	--tertiary_palette: #a8d473;
-	--on_tertiary_palette: #1f3700;
-	--tertiary_container_palette: #2f4f00;
-	--on_tertiary_container_palette: #c3f18c; 
+	--tertiary_palette: #000000;
+	--on_tertiary_palette: #000000;
+	--tertiary_container_palette: #000000;
+	--on_tertiary_container_palette: #000000;

 	--error_palette: #ffb4ab;
 	--on_error_palette: #690005;
 	--error_container_palette: #93000a;
 	--on_error_container_palette: #ffdad6;

-	--background_palette: #1b1b1f;
-	--on_background_palette:#e3e2e6;
+	--background_palette: #000000;
+	--on_background_palette:#000000;
 	--layer1_palette: #181818;
-	--layer2_palette: #28282D;
-	--layer3_palette: #2F2F35;
-	--layer4_palette: #35353D;
-	--outline_palette: #8e9099;
+	--layer2_palette: #000000;
+	--layer3_palette: #000000;
+	--layer4_palette: #000000;
+	--outline_palette: #000000;

-	--middle_palette: #232328;
-	--on_middle_palette: #86868e;
-	--surface_palette: #2f2f36;
-	--on_surface_palette: #e3e2e6;
+	--middle_palette: #000000;
+	--on_middle_palette: #000000;
+	--surface_palette: #000000;
+	--on_surface_palette: #000000;

 /*----------------Advanced Theme--------------------*/
 	/*General*/
@@ -68,6 +75,9 @@

 	--setting_background: #242424;
    --setting_text: #e0e0e0;
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);

 	--sample_order_select_color: #1d434a;
 	--sample_order_select_color_text: #e0e0e0;
@@ -80,8 +90,8 @@
 	--rangeslider_circle_color: #385262;

 	--help_icon: #c07ec5;
-    --tooltip_text:var(--on_secondary_palette);
-    --tooltip_background:var(--secondary_palette);
+    --tooltip_text: #000000;
+    --tooltip_background: #000000;
 	--setting_category_help_text_color: #E0E0E0;
 	
 	--setting_footer_border_color: grey;
@@ -89,10 +99,10 @@
 	--setting_footer_background_color: var(--layer1_palette);

 	/*World Info*/
-	--wi_card_border_color: #002d6c00;
+	--wi_card_border_color: #1a625f;
    --wi_card_border_color_to_ai: #002d6c00;

-    --wi_card_bg_color: #1c1c1c;
+    --wi_card_bg_color: #1b1b1b;
 	--wi_card_text_color: #e0e0e0;

    --wi_card_tag_bg_color: #242424;
@@ -137,12 +147,13 @@
 	--right_menu_light_shadow: 0;
 	--right_menu_strong_shadow: 0;
 	--radius_inputbox: 10px;
-	--radius_unpinned_menu: 20px;
+	--radius_unpinned_menu: 15px;
 	--radius_sequence: 10px;
 	--radius_settings_background: 10px;
 	--radius_buttons: 5px;
 	--radius_item_popup: 5px;
 	--radius_wi_card: 10px;
+	--radius_settings_button: 5px;



--- a/themes/Gruvbox
+++ b/themes/Gruvbox
@@ -115,6 +115,9 @@

 	--setting_background: var(--gruvbox-dark0-soft);
    --setting_text: var(--gruvbox-light0);
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);

 	--sample_order_select_color: var(--gruvbox-dark2);
 	--sample_order_select_color_text: var(--gruvbox-light2);
@@ -177,6 +180,7 @@
 	--radius_buttons: 0px;
 	--radius_item_popup: 0px;
 	--radius_wi_card: 0px;
+	--radius_settings_button: 5px;

 	/* Variables */
 	--flyout_menu_closed_width: 0px;
--- a/themes/Material
+++ b/themes/Material
@@ -80,6 +80,9 @@

 	--setting_background: var(--surface_palette);
    --setting_text: var(--on_surface_palette);
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);

 	--sample_order_select_color: var(--primary_palette);
 	--sample_order_select_color_text: var(--on_primary_palette);
@@ -156,6 +159,7 @@
 	--radius_buttons: 5px;
 	--radius_item_popup: 2px;
 	--radius_wi_card: 5px;
+	--radius_settings_button: 5px;



--- a/themes/Monochrome.css
+++ b/themes/Monochrome.css
@@ -1,37 +1,44 @@
+/*
+	Name: Monochrome
+	Author: LightSaveUs
+	Version: 0.4.5
+	Description: A theme inspired by the NovelAI interface.
+*/
+
 :root {
 /*----------------Palette Theme--------------------*/
-	--primary_palette: #afc6ff;
-	--on_primary_palette: #002d6c;
-	--primary_container_palette: #004397;
-	--on_primary_container_palette: #d9e2ff;
+	--primary_palette: #000000;
+	--on_primary_palette: #000000;
+	--primary_container_palette: #000000;
+	--on_primary_container_palette: #000000;

-	--secondary_palette: #f7c5ee;
-	--on_secondary_palette: #5c0059;
-	--secondary_container_palette: #d663bd;
-	--on_secondary_container_palette: #4e0039;
+	--secondary_palette: #000000;
+	--on_secondary_palette: #000000;
+	--secondary_container_palette: #000000;
+	--on_secondary_container_palette: #000000;

-	--tertiary_palette: #a8d473;
-	--on_tertiary_palette: #1f3700;
-	--tertiary_container_palette: #2f4f00;
-	--on_tertiary_container_palette: #c3f18c; 
+	--tertiary_palette: #000000;
+	--on_tertiary_palette: #000000;
+	--tertiary_container_palette: #000000;
+	--on_tertiary_container_palette: #000000;

 	--error_palette: #ffb4ab;
 	--on_error_palette: #690005;
 	--error_container_palette: #93000a;
 	--on_error_container_palette: #ffdad6;

-	--background_palette: #1b1b1f;
-	--on_background_palette:#e3e2e6;
+	--background_palette: #000000;
+	--on_background_palette:#000000;
 	--layer1_palette: #18222a;
-	--layer2_palette: #28282D;
-	--layer3_palette: #2F2F35;
-	--layer4_palette: #35353D;
-	--outline_palette: #8e9099;
+	--layer2_palette: #000000;
+	--layer3_palette: #000000;
+	--layer4_palette: #000000;
+	--outline_palette: #000000;

-	--middle_palette: #232328;
-	--on_middle_palette: #86868e;
-	--surface_palette: #2f2f36;
-	--on_surface_palette: #e3e2e6;
+	--middle_palette: #000000;
+	--on_middle_palette: #000000;
+	--surface_palette: #000000;
+	--on_surface_palette: #000000;

 /*----------------Advanced Theme--------------------*/
 	/*General*/
@@ -68,6 +75,9 @@

 	--setting_background: #273141;
    --setting_text: #e0e0e0;
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);

 	--sample_order_select_color: #244c65;
 	--sample_order_select_color_text: #e0e0e0;
@@ -80,8 +90,8 @@
 	--rangeslider_circle_color: #1b354d;

 	--help_icon: #cfd7a2;
-    --tooltip_text:var(--on_secondary_palette);
-    --tooltip_background:var(--secondary_palette);
+    --tooltip_text: #000000;
+    --tooltip_background: #000000;
 	--setting_category_help_text_color: #E0E0E0;
 	
 	--setting_footer_border_color: grey;
@@ -135,13 +145,14 @@
 	--left_menu_strong_shadow: 0;
 	--right_menu_light_shadow: 0;
 	--right_menu_strong_shadow: 0;
-	--radius_inputbox: 5px;
-	--radius_unpinned_menu: 10px;
-	--radius_sequence: 10px;
-	--radius_settings_background: 5px;
-	--radius_buttons: 5px;
+	--radius_inputbox: 2px;
+	--radius_unpinned_menu: 0px;
+	--radius_sequence: 5px;
+	--radius_settings_background: 2px;
+	--radius_buttons: 2px;
 	--radius_item_popup: 2px;
 	--radius_wi_card: 5px;
+	--radius_settings_button: 5px;



--- a/themes/Unicorn.css
+++ b/themes/Unicorn.css
@@ -0,0 +1,185 @@
+/*
+	Name: Unicorn
+	Author: LightSaveUs
+	Version: 0.1.1
+	Description: A theme inspired by the DreamilyAI interface.
+*/
+
+:root {
+/*----------------Palette Theme--------------------*/
+	--primary_palette:#000000;
+	--on_primary_palette: #000000;
+	--primary_container_palette: #000000;
+	--on_primary_container_palette: #000000;
+
+	--secondary_palette: #000000;
+	--on_secondary_palette: #000000;
+	--secondary_container_palette: #000000;
+	--on_secondary_container_palette: #000000;
+
+	--tertiary_palette: #000000;
+	--on_tertiary_palette: #000000;
+	--tertiary_container_palette: #000000;
+	--on_tertiary_container_palette: #000000;
+
+	--error_palette: #ffb4ab;
+	--on_error_palette: #690005;
+	--error_container_palette: #93000a;
+	--on_error_container_palette: #ffdad6;
+
+	--background_palette: #000000;
+	--on_background_palette:#000000;
+	--layer1_palette: #e2e2e2;
+	--layer2_palette: #000000;
+	--layer3_palette: #000000;
+	--layer4_palette: #000000;
+	--outline_palette: #000000;
+
+	--middle_palette: #000000;
+	--on_middle_palette: #000000;
+	--surface_palette: #000000;
+	--on_surface_palette: #000000;
+
+/*----------------Advanced Theme--------------------*/
+	/*General*/
+	--background: #e8e7ec;
+
+	--gamescreen_background: #e8e7ec;
+	--gamescreen_text: #222224;
+
+    --input_background: #e1e1e1;
+	--input_text: #222224;
+
+    --text: #f2f1f1;
+    --text_to_ai_color: #464646;
+    --text_edit: #464646;
+
+	--statusbar_color: #f2f2f499;
+	--statusbar_text_color: white;
+	--scrollbar-color: #e267717a;
+
+	/*Buttons*/
+	--enabled_button_text: #f2f1f1;
+    --enabled_button_background_color: #e26771;
+    --enabled_button_border_color: #99454c;
+	--disabled_button_text: #303030;
+    --disabled_button_background_color: #495762;
+    --disabled_button_border_color: #686c68;
+
+	/*Sequence, AKA Gens Per Action*/
+	--sequence_area_background:var(--layer1_palette);
+    --sequence_background: #ececec;
+	--sequence_text: #a8a8a8;
+
+	/*Side Menus*/
+	--tab_color: #b4525a;
+	--tab_text: #f2f1f1;
+
+	--flyout_background: #dcd9d9;
+	--flyout_background_pinned: #dcd9d9;
+	--flyout_text: #464646;
+
+	--setting_background: #e1c5c5;
+    --setting_text: #421d1d;
+	
+	--button_text: var(--setting_text);
+	--button_background: var(--setting_background);
+
+	--sample_order_select_color: #dc6872;
+	--sample_order_select_color_text: #f2f1f1;
+
+	--dropdown_text: #e26771;
+	--dropdown_background: #d9d9dc;
+
+	--rangeslider_background_color: #818181;
+	--rangeslider_color: #dc6872;
+	--rangeslider_circle_color: #f2f1f1;
+
+	--help_icon: #f2f1f1;
+    --tooltip_text: #000000;
+    --tooltip_background: #000000;
+	--setting_category_help_text_color: #464646;
+	
+	--setting_footer_border_color: #4646466b;
+	--setting_footer_text_color: #464646;
+	--setting_footer_background_color: #e1c5c5;
+
+	/*World Info*/
+	--wi_card_border_color: #dc6872;
+    --wi_card_border_color_to_ai: #dc6872;
+
+    --wi_card_bg_color: #e26771;
+	--wi_card_text_color: #f2f1f1;
+
+    --wi_card_tag_bg_color: #f2f1f1;
+	--wi_card_tag_text_color: #5c5c5c;
+	
+    --wi_tag_color: #e2c4c4;
+	--wi_tag_text_color: #5c5c5c;
+	
+	/*Popup*/
+	--popup_background_color: #bb9c9c;
+    --popup_title_bar_color: #cfb6b6;
+	--popup_title_bar_color_text: #421d1d;
+
+    --popup_item_color: #f2f1f1;
+	--popup_item_color_text: #e26771;
+
+	--popup_hover_color: #e26771;
+	--popup_hover_color_text: #f2f1f1;
+	--popup_selected_color: #e26771;
+	--popup_selected_color_text: #f2f1f1;
+
+	--popup_button_color: #cfb6b6;
+	--popup_button_color_text: #421d1d;
+	--popup_cancel_button_color: #cfb6b6;
+	--popup_cancel_button_color_text: #421d1d;
+	
+	/*Context Bar Colors*/
+	--context_colors_memory: #8e4147;
+	--context_colors_authors_notes: #d8656e;
+	--context_colors_world_info: #d28b8b;
+	--context_colors_prompt: #cbb6b6;
+	--context_colors_game_text: #e7c2c2;
+	--context_colors_submit: #ededed;
+	--context_colors_unused: #ffffffad;
+	--context_colors_soft_prompt: #464646;
+
+    /*Parameters*/
+	--scrollbar-size: 6px;
+	--light_shadow_value: 0;
+	--left_menu_light_shadow: 0;
+	--left_menu_strong_shadow: 0;
+	--right_menu_light_shadow: 0;
+	--right_menu_strong_shadow: 0;
+	--popup_shadow: 0;
+	--radius_inputbox: 15px;
+	--radius_unpinned_menu: 20px;
+	--radius_sequence: 15px;
+	--radius_settings_background: 10px;
+	--radius_buttons: 10px;
+	--radius_item_popup: 5px;
+	--radius_wi_card: 10px;
+	--radius_settings_button: 5px;
+
+
+
+
+
+
+/*----------------VARIABLES--------------------*/
+	--flyout_menu_closed_width: 0px;
+	--setting_menu_closed_width_no_pins_width:  0px;
+	--story_options_size: 30%;
+	--story_pinned_areas_left:"menuicon options gamescreen lefticon"
+								 "menuicon theme theme lefticon"
+								 "menuicon inputrow inputrow lefticon";
+	--story_pinned_areas_right:"menuicon gamescreen options lefticon"
+								 "menuicon theme theme lefticon"
+								 "menuicon inputrow inputrow lefticon";
+	--story_pinned_area_widths_left: 30pxvar(--story_options_size) auto 30px;
+	--story_pinned_area_widths_right: 30pxautovar(--story_options_size) 30px;
+	--story_pinned_areas:var(--story_pinned_areas_left);
+	--story_pinned_area_widths:var(--story_pinned_area_widths_left);
+	--font_size_adjustment: 0px;
+	--game_screen_font_size_adjustment: 1;}