Merge pull request #39 from GuiAworld/UI2

New Theming System & Placeholder Theme

.gitignore

@@ -37,3 +37,7 @@ accelerate-disk-cache
 
 # Don't ignore defaults
 !defaults/*
+flask_session/1074228e7055acfb7de9d07a471d0b92
+.gitignore
+flask_session/2029240f6d1128be89ddc32729463129
+flask_session

static/koboldai.js

@@ -594,7 +594,7 @@ function popup_items(data) {
 	document.getElementById('popup_upload_input').value = "";
 	
 	//create the column widths
-	var style = 'width: 80vw; display: grid; grid-template-areas: "icons';
+	var style = /*width: 50vw;*/'display: grid; grid-template-areas: "icons';
 	for (i=0; i < data.column_widths.length; i++) {
 		style = style + " p"+i;
 	}

templates/index_new.html

@@ -71,7 +71,7 @@
 			<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, 'theme': document.getElementById('themetext').value});document.getElementById('input_text').value = '';document.getElementById('themetext').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" onclick="socket.emit('abort','');"></button>
+			<button type="button" class="btn action_button submited var_sync_alt_system_aibusy"  system_aibusy=False id="btnsend"><img id="thinking" 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/popups.html

@@ -11,7 +11,7 @@
 	</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 class="popup_load_cancel" id="popup_load_cancel">
-		<button class="btn popup_load_cancel_button" id="popup_accept">Load</button>
+		<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>
 	</div>
 </div>
@@ -44,7 +44,7 @@
 			<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="use_gpu" checked>
 			<div class="box-label">Use GPU</div>
 		</div>
-		<button type="button" class="btn popup_load_cancel_button disabled" onclick="load_model()" id="btn_loadmodelaccept">Load</button>
+		<button type="button" class="btn popup_load_cancel_button action_button disabled" onclick="load_model()" id="btn_loadmodelaccept">Load</button>
 		<button type="button" class="btn popup_load_cancel_button" onclick='document.getElementById("loadmodelcontainer").classList.add("hidden");' id="btn_loadmodelclose">Cancel</button>
 	</div>
 </div>
@@ -78,6 +78,22 @@
 		<button type="button" class="btn btn-primary" onclick="this.parentElement.parentElement.classList.add('hidden');">Cancel</button>
 	</div>
 </div>
+<!---------------- Import aidg.club Prompt ---------------------->
+<div class="popup hidden" id="import_aidg_club_popup">
+	<div class="title">
+		<div class="popuptitletext">Enter the Prompt Number</div>
+	</div>
+	<div class="popup_list_area">
+		<br/>
+		<div style="text-align: center;"><a href="https://aetherroom.club/" target="_blank" rel="noopener noreferrer">https://aetherroom.club/</a></div>
+		<br/>
+		<input autocomplete="off" class="form-control" type="text" placeholder="Prompt Number (4-digit number at the end of aetherroom.club URL)" id="aidgpromptnum">
+	</div>
+	<div class="popup_load_cancel">
+		<button type="button" class="btn btn-primary" onclick="socket.emit('load_aidg_club', document.getElementById('aidgpromptnum').value); this.parentElement.parentElement.classList.add('hidden');">Accept</button>
+		<button type="button" class="btn btn-primary" onclick="this.parentElement.parentElement.classList.add('hidden');">Cancel</button>
+	</div>
+</div>
 
 <!---------------- error screen ---------------------->
 <div class="popup hidden" id="error_message">
@@ -88,6 +104,6 @@
 		
 	</div>
 	<div class="popup_load_cancel">
-		<button type="button" class="btn btn-primary" onclick="document.getElementById('error_message').classList.add('hidden');">ok</button>
+		<button type="button" class="btn btn-primary" onclick="document.getElementById('error_message').classList.add('hidden');">Ok</button>
 	</div>
 </div>

templates/settings flyout.html

@@ -35,9 +35,14 @@
 <div class="flyout_menu_contents">
 
 	<div id="setting_menu_home" class="settings_category_area">
-		<div id="Model_Info">
+		<div class="Model_Info">
-			<div>
+			<div id="model_title">
-				Running Model: <span class="var_sync_model_model">ReadOnly</span>
+				<span>
+					<span class="var_sync_model_model">ReadOnly</span>
+				</span>
+			</div>
+			<div id="text_runningmodel">
+					<b>Running Model: </b>
 			</div>
 			<div>
 				<button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button>
@@ -47,10 +52,14 @@
 		<div id="Story_Info">
 			<hr/>
 			<div class="story_title_area">
-				<span class="story_title">
+				<div class="story_title">
+					<span>
+						<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
+					</span>
+				</div>
+				<div id="text_storyname">
 					<b>Story Name: </b>
-					<span class="var_sync_story_story_name fullwidth" contenteditable=true onblur="sync_to_server(this);"></span>
+				</div>
-				</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>
@@ -73,7 +82,9 @@
 		</div>
 	</div>
 	<div id="setting_menu_settings" class="hidden settings_category_area">
-		<div><select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select></div>
+		<div class="force_center">
+			<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);">
 				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Generation</h4>

templates/story flyout.html

@@ -35,11 +35,11 @@
 	</div>
 	<div id="story_menu_author" class="story_category_area hidden">
 		<div id="author_notes">
-			Author's Notes:<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 autocomplete="off" type=text class="var_sync_story_authornotetemplate fullwidth" onchange='sync_to_server(this);'><br/>
-			andepth<br/>
+			Author's Notes:<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/>
+			Depth<br/>
 			<input type="range" min="0" max="5" step="1" 
 						   value="3" class="setting_item_input var_sync_story_andepth"
 						   onchange='sync_to_server(this);'>