From 611150e90663947928c6432aa72dc12dffc412bd Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Fri, 19 Aug 2022 12:00:04 -0400
Subject: [PATCH] Fix for SocketIO in Colab

---
 aiserver.py                                |  9 +++++++--
 static/koboldai.js                         | 15 +++++++--------
 templates/index_new.html                   |  2 +-
 templates/settings flyout.html             |  3 ++-
 themes/{GuiAworld.css => Material You.css} |  0
 5 files changed, 17 insertions(+), 12 deletions(-)
 rename themes/{GuiAworld.css => Material You.css} (100%)

diff --git a/aiserver.py b/aiserver.py
index f4d0a1dc..19e7096e 100644
--- a/aiserver.py
+++ b/aiserver.py
@@ -252,7 +252,7 @@ app.secret_key = secrets.token_hex()
 app.config['SESSION_TYPE'] = 'filesystem'
 app.config['TEMPLATES_AUTO_RELOAD'] = True
 Session(app)
-socketio = SocketIO(app, async_method="eventlet", manage_session=False)
+socketio = SocketIO(app, async_method="eventlet", manage_session=False, cors_allowed_origins='*')
 #socketio = SocketIO(app, async_method="eventlet", logger=True, engineio_logger=True, manage_session=False)
 koboldai_vars = koboldai_settings.koboldai_vars(session, socketio)
 
@@ -7347,7 +7347,12 @@ def UI_2_load_aidg_club(data):
 #==================================================================#
 @socketio.on('theme_change')
 def UI_2_theme_change(data):
-    print("Theme Changed: {}".format(data))
+    with open("themes/user.css", "w") as f:
+        f.write(":root {")
+        for var in data:
+            f.write("\t{}: {};\n".format(var[0], var[1].replace(";", "")))
+        f.write("}")
+    print("Theme Saved")
     
 
 #==================================================================#
diff --git a/static/koboldai.js b/static/koboldai.js
index 9893e02b..4d9d907e 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -1539,14 +1539,11 @@ function send_world_info(uid) {
 function Change_Theme(theme) {
 	console.log(theme);
 	var css = document.getElementById("CSSTheme");
-
     css.setAttribute("href", "/themes/"+theme+".css");
+	create_theming_elements();
 }
 
 function palette_color(item) {
-	console.log(item);
-	console.log(item.id);
-	console.log(item.value);
 	var r = document.querySelector(':root');
 	r.style.setProperty("--"+item.id, item.value);
 	socket.emit("theme_change", getAllCSSVariableNames());
@@ -1554,9 +1551,11 @@ function palette_color(item) {
 
 function getAllCSSVariableNames(styleSheets = document.styleSheets){
    var cssVars = [];
-   var r = document.querySelector(':root');
    // loop each stylesheet
+   console.log(styleSheets);
    for(var i = 0; i < styleSheets.length; i++){
+	   console.log(styleSheets[i]);
+	   console.log(styleSheets[i].ownerNode.attributes.id);
       // loop stylesheet's cssRules
       try{ // try/catch used because 'hasOwnProperty' doesn't work
          for( var j = 0; j < styleSheets[i].cssRules.length; j++){
@@ -1565,7 +1564,7 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
                for(var k = 0; k < styleSheets[i].cssRules[j].style.length; k++){
                   let name = styleSheets[i].cssRules[j].style[k];
                   // test name for css variable signiture and uniqueness
-                  if(name.startsWith('--') && cssVars.indexOf(name) == -1){
+                  if(name.startsWith('--') && (styleSheets[i].ownerNode.id == "CSSTheme")){
 					let value = styleSheets[i].cssRules[j].style.getPropertyValue(name);
 					value.replace(/(\r\n|\r|\n){2,}/g, '$1\n');
 					value = value.replaceAll("\t", "");
@@ -1580,11 +1579,13 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
 }
 
 function create_theming_elements() {
+	console.log("Running theme editor");
 	var cssVars = getAllCSSVariableNames();
 	palette_table = document.createElement("table");
 	advanced_table = document.createElement("table");
 	theme_area = document.getElementById("Palette");
 	theme_area.append(palette_table);
+	console.log(cssVars);
 	//theme_area.append(advanced_table);
 	for (css_item of cssVars) {
 		if (css_item[0].includes("_palette")) {
@@ -2427,13 +2428,11 @@ $(document).ready(function(){
 	document.onkeydown = detect_key_down;
 	document.onkeyup = detect_key_up;
 	document.getElementById("input_text").onkeydown = detect_enter_submit;
-	console.log(getCookie("Settings_Pin"));
 	if (getCookie("Settings_Pin") == "false") {
 		settings_unpin();
 	} else {
 		settings_pin();
 	}
-	console.log(getCookie("Story_Pin"));
 	if (getCookie("Story_Pin") == "true") {
 		story_pin();
 	} else {
diff --git a/templates/index_new.html b/templates/index_new.html
index 8ebb9424..cb070376 100644
--- a/templates/index_new.html
+++ b/templates/index_new.html
@@ -11,7 +11,7 @@
 	<script src="static/socket.io.min.js"></script>
 	<title>KoboldAI Client</title>
 	<meta charset="utf-8">
-	<link href="themes/monochrome.css" rel="stylesheet" id="CSSTheme">
+	<link href="themes/Monochrome.css" rel="stylesheet" id="CSSTheme">
 	<link href="static/koboldai.css" rel="stylesheet">
 	<script src="static/koboldai.js"></script>
 	<script src="static/favicon.js"></script>
diff --git a/templates/settings flyout.html b/templates/settings flyout.html
index b11cf717..81ac6c07 100644
--- a/templates/settings flyout.html	
+++ b/templates/settings flyout.html	
@@ -227,7 +227,8 @@
 		<div class="setting_tile_area" id="Theme">
 			<select style="color: black;" onchange="Change_Theme(this.value);">
 				<option selected>Monochrome</option>
-				<option>GuiAworld</option>
+				<option>Material You</option>
+				<option>user</option>
 			</select>
 			<div onclick="toggle_setting_category(this);">
 				<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Palette</h4>
diff --git a/themes/GuiAworld.css b/themes/Material You.css
similarity index 100%
rename from themes/GuiAworld.css
rename to themes/Material You.css