Checkin

aiserver.py

@@ -263,8 +263,10 @@ def sendModelSelection(menu="mainmenu", folder="./models"):
         else:
             showdelete=False
         emit('from_server', {'cmd': 'show_model_menu', 'data': menu_list, 'menu': menu, 'breadcrumbs': breadcrumbs, "showdelete": showdelete}, broadcast=True, room="UI_1")
+        emit('show_model_menu', {'data': menu_list, 'menu': menu, 'breadcrumbs': breadcrumbs, "showdelete": showdelete}, broadcast=False, room="UI_2")
     else:
         emit('from_server', {'cmd': 'show_model_menu', 'data': model_menu[menu], 'menu': menu, 'breadcrumbs': [], "showdelete": False}, broadcast=True, room="UI_1")
+        emit('show_model_menu', {'data': model_menu[menu], 'menu': menu, 'breadcrumbs': [], "showdelete": False}, broadcast=False, room="UI_2")
 
 def get_folder_path_info(base):
     if base == 'This PC':
@@ -333,7 +335,7 @@ def check_if_dir_is_model(path):
     if os.path.exists(path):
         try:
             from transformers import AutoConfig
-            model_config = AutoConfig.from_pretrained(path, revision=koboldai_vars.revision, cache_dir="cache")
+            model_config = AutoConfig.from_pretrained(path)
         except:
             return False
         return True
@@ -1034,12 +1036,18 @@ def get_model_info(model, directory=""):
                     break_values = break_values.split(",")
             else:
                 break_values = [layer_count]
+            break_values = [int(x) for x in break_values]
             break_values += [0] * (gpu_count - len(break_values))
     emit('from_server', {'cmd': 'selected_model_info', 'key_value': key_value, 'key':key, 
                          'gpu':gpu, 'layer_count':layer_count, 'breakmodel':breakmodel, 
                          'disk_break_value': disk_blocks, 'accelerate': utils.HAS_ACCELERATE,
                          'break_values': break_values, 'gpu_count': gpu_count,
                          'url': url, 'gpu_names': gpu_names}, broadcast=True, room="UI_1")
+    emit('selected_model_info', {'key_value': key_value, 'key':key, 
+                         'gpu':gpu, 'layer_count':layer_count, 'breakmodel':breakmodel, 
+                         'disk_break_value': disk_blocks, 'disk_break': not utils.HAS_ACCELERATE,
+                         'break_values': break_values, 'gpu_count': gpu_count,
+                         'url': url, 'gpu_names': gpu_names}, broadcast=False, room="UI_2")
     if key_value != "":
         get_oai_models(key_value)
     
@@ -1047,18 +1055,16 @@ def get_model_info(model, directory=""):
 def get_layer_count(model, directory=""):
     if(model not in ["InferKit", "Colab", "OAI", "GooseAI" , "ReadOnly", "TPUMeshTransformerGPTJ"]):
         if(koboldai_vars.model == "GPT2Custom"):
-            model_config = open(koboldai_vars.custmodpth + "/config.json", "r")
+            model_config = open(directory + "/config.json", "r")
         # Get the model_type from the config or assume a model type if it isn't present
         else:
             from transformers import AutoConfig
             if directory == "":
-                model_config = AutoConfig.from_pretrained(koboldai_vars.model, revision=koboldai_vars.revision, cache_dir="cache")
+                model_config = AutoConfig.from_pretrained(model, cache_dir="cache")
-            elif(os.path.isdir(koboldai_vars.custmodpth.replace('/', '_'))):
+            elif os.path.isdir(directory):
-                model_config = AutoConfig.from_pretrained(koboldai_vars.custmodpth.replace('/', '_'), revision=koboldai_vars.revision, cache_dir="cache")
+                model_config = AutoConfig.from_pretrained(directory, cache_dir="cache")
-            elif(os.path.isdir(directory)):
-                model_config = AutoConfig.from_pretrained(directory, revision=koboldai_vars.revision, cache_dir="cache")
             else:
-                model_config = AutoConfig.from_pretrained(koboldai_vars.custmodpth, revision=koboldai_vars.revision, cache_dir="cache")
+                assert "Selected Model directory doesn't exist"
         
         
         
@@ -5821,8 +5827,177 @@ def new_ui_index():
 def ui2_connect():
     #Send all variables to client
     koboldai_vars.send_to_ui()
+    
     pass
 
+#==================================================================#
+# File Popup options
+#==================================================================#
+@app.route("/popup_test")
+def popup_test():
+    file_popup("Test Popup", "./", "return_event_name", folder_only=False, editable=True, deleteable=True, jailed=False, item_check=check_if_dir_is_model)
+    return "ok"
+
+@socketio.on('popup_change_folder')
+def popup_change_folder(data):
+    print("Doing popup change folder: {}".format(data))
+    if 'popup_jailed_dir' not in session:
+        print("Someone is trying to get at files in your server. Blocked.")
+        return
+    if session['popup_jailed_dir'] is None:
+        get_files_folders(data)
+    elif session['popup_jailed_dir'] in data:
+        get_files_folders(data)
+    else:
+        print("User is trying to get at files in your server outside the jail. Blocked. Jailed Dir: {}  Requested Dir: {}".format(session['popup_jailed_dir'], data))
+
+@socketio.on('popup_delete')
+def popup_delete(data):
+    if 'popup_deletable' not in session:
+        print("Someone is trying to delete a file in your server. Blocked.")
+        return
+    if not session['popup_deletable']:
+        print("Someone is trying to delete a file in your server. Blocked.")
+        return
+    
+    if session['popup_jailed_dir'] is None:
+        import shutil
+        if os.path.isdir(data):
+            shutil.rmtree(data)
+        else:
+            os.remove(data)
+        path = os.path.abspath(data).replace("\\", "/")
+        if path[-1] == "/":
+            path = path[:-1]
+        path = "/".join(path.split("/")[:-1])
+        get_files_folders(path)
+    elif session['popup_jailed_dir'] in data:
+        import shutil
+        if os.path.isdir(data):
+            shutil.rmtree(data)
+        else:
+            os.remove(data)
+        path = os.path.abspath(data).replace("\\", "/")
+        if path[-1] == "/":
+            path = path[:-1]
+        path = "/".join(path.split("/")[:-1])
+        get_files_folders(path)
+    else:
+        print("User is trying to delete files in your server outside the jail. Blocked. Jailed Dir: {}  Requested Dir: {}".format(session['popup_jailed_dir'], data))
+
+@socketio.on('popup_edit')
+def popup_edit(data):
+    if 'popup_editable' not in session:
+        print("Someone is trying to edit a file in your server. Blocked.")
+        return
+    if not session['popup_editable']:
+        print("Someone is trying to edit a file in your server. Blocked.")
+        return
+    
+    if session['popup_jailed_dir'] is None:
+        emit("popup_edit_file", {"file": data, "text": open(data, 'r').read()});
+    elif session['popup_jailed_dir'] in data:
+        emit("popup_edit_file", {"file": data, "text": open(data, 'r').read()});
+    else:
+        print("User is trying to delete files in your server outside the jail. Blocked. Jailed Dir: {}  Requested Dir: {}".format(session['popup_jailed_dir'], data))
+
+@socketio.on('popup_change_file')
+def popup_change_file(data):
+    if 'popup_editable' not in session:
+        print("Someone is trying to edit a file in your server. Blocked.")
+        return
+    if not session['popup_editable']:
+        print("Someone is trying to edit a file in your server. Blocked.")
+        return
+    
+    if session['popup_jailed_dir'] is None:
+        with open(data['file'], 'w') as f:
+            f.write(data['data'])
+    elif session['popup_jailed_dir'] in data['file']:
+        with open(data['file'], 'w') as f:
+            f.write(data['data'])
+    else:
+        print("User is trying to delete files in your server outside the jail. Blocked. Jailed Dir: {}  Requested Dir: {}".format(session['popup_jailed_dir'], data))
+
+def file_popup(popup_title, starting_folder, return_event, jailed=True, folder_only=True, deleteable=False, editable=False, show_breadcrumbs=True, item_check=None, show_hidden=False):
+    #starting_folder = The folder we're going to get folders and/or items from
+    #return_event = the socketio event that will be emitted when the load button is clicked
+    #jailed = if set to true will look for the session variable jailed_folder and prevent navigation outside of that folder
+    #folder_only = will only show folders, no files
+    #deletable = will show the delete icons/methods.
+    #editable = will show the edit icons/methods
+    #show_breadcrumbs = will show the breadcrumbs at the top of the screen
+    #item_check will call this function to check if the item is valid as a selection if not none. Will pass absolute directory as only argument to function
+    #show_hidden = ... really, you have to ask?
+    if jailed:
+        session['popup_jailed_dir'] = os.path.abspath(starting_folder).replace("\\", "/")
+    else:
+        session['popup_jailed_dir'] = None
+    session['popup_deletable'] = deleteable
+    session['popup_editable'] = editable
+    session['popup_show_hidden'] = show_hidden
+    session['popup_item_check'] = item_check
+    session['popup_folder_only'] = folder_only
+    session['popup_show_breadcrumbs'] = show_breadcrumbs
+    
+    socketio.emit("load_popup", {"popup_title": popup_title, "call_back": return_event, "deleteable": deleteable, "editable": editable}, broadcast=True, room="UI_2")
+    socketio.emit("load_popup", {"popup_title": popup_title, "call_back": return_event, "deleteable": deleteable, "editable": editable}, broadcast=True, room="UI_1")
+    
+    get_files_folders(starting_folder)
+    
+    
+def get_files_folders(starting_folder):
+    import stat
+    item_check = session['popup_item_check']
+    show_breadcrumbs = session['popup_show_breadcrumbs']
+    show_hidden = session['popup_show_hidden']
+    folder_only = session['popup_folder_only']
+    
+    if starting_folder == 'This PC':
+        breadcrumbs = [['This PC', 'This PC']]
+        items = [["{}:/".format(chr(i)), "{}:\\".format(chr(i))] for i in range(65, 91) if os.path.exists("{}:".format(chr(i)))]
+    else:
+        path = os.path.abspath(starting_folder).replace("\\", "/")
+        if path[-1] == "/":
+            path = path[:-1]
+        breadcrumbs = []
+        for i in range(len(path.split("/"))):
+            breadcrumbs.append(["/".join(path.split("/")[:i+1]),
+                                 path.split("/")[i]])
+        if len(breadcrumbs) == 1:
+            breadcrumbs = [["{}:/".format(chr(i)), "{}:\\".format(chr(i))] for i in range(65, 91) if os.path.exists("{}:".format(chr(i)))]
+        else:
+            if len([["{}:/".format(chr(i)), "{}:\\".format(chr(i))] for i in range(65, 91) if os.path.exists("{}:".format(chr(i)))]) > 0:
+                breadcrumbs.insert(0, ['This PC', 'This PC'])
+        folders = []
+        files = []
+        base_path = os.path.abspath(starting_folder).replace("\\", "/")
+        for item in os.listdir(base_path):
+            item_full_path = os.path.join(base_path, item).replace("\\", "/")
+            if hasattr(os.stat(item_full_path), "st_file_attributes"):
+                hidden = bool(os.stat(item_full_path).st_file_attributes & stat.FILE_ATTRIBUTE_HIDDEN)
+            else:
+                hidden = item[0] == "."
+            if item_check is None:
+                valid_selection = True
+            else:
+                valid_selection = item_check(item_full_path)
+                
+            if (show_hidden and hidden) or not hidden:
+                if os.path.isdir(os.path.join(base_path, item)):
+                    folders.append([True, item_full_path, item,  valid_selection])
+                else:
+                    files.append([False, item_full_path, item,  valid_selection])
+        items = folders
+        if not folder_only:
+            items += files
+            
+    socketio.emit("popup_items", items, broadcast=True, include_self=True, room="UI_2")
+    socketio.emit("popup_items", items, broadcast=True, include_self=True, room="UI_1")
+    if show_breadcrumbs:
+        socketio.emit("popup_breadcrumbs", breadcrumbs, broadcast=True, room="UI_2")
+        socketio.emit("popup_breadcrumbs", breadcrumbs, broadcast=True, room="UI_1")
+
 #==================================================================#
 # Event triggered when browser SocketIO detects a variable change
 #==================================================================#
@@ -5914,6 +6089,26 @@ def UI_2_retry(data):
     koboldai_vars.recentrng = koboldai_vars.recentrngm = None
     actionsubmit("", actionmode=koboldai_vars.actionmode)
     
+#==================================================================#
+# Event triggered when user clicks the load model button
+#==================================================================#
+@socketio.on('load_model_button')
+def UI_2_load_model_button(data):
+    sendModelSelection()
+    
+#==================================================================#
+# Event triggered when user clicks the a model
+#==================================================================#
+@socketio.on('select_model')
+def UI_2_load_model_button(data):
+    if data['model'] in model_menu:
+        sendModelSelection(menu=data['model'])
+    else:
+        #We now have some model we want to potentially load.
+        #First we need to send the client the model parameters (layers, etc)
+        print("getting model info for {}".format(data['model']))
+        get_model_info(data['model'])
+
 #==================================================================#
 # Event triggered to rely a message
 #==================================================================#

static/koboldai.css

@@ -21,6 +21,8 @@
 	--enabled_button_text: #fff;
 	--enabled_button_background_color: #337ab7;
 	--enabled_button_border_color: #2e6da4;
+	--popup_title_bar_color: #337AB7;
+	--popup_item_color: #262626;
 	--disabled_button_text: #303030;
 	--disabled_button_background_color: #686c68;
 	--disabled_button_border_color: #686c68;
@@ -543,6 +545,161 @@ td.sequence:hover {
 	overflow: hidden;
 }
 
+
+/*---------------------------------- Popup -------------------------------------------------*/
+.popup {
+	position: absolute;
+	top: 10vh;
+	left: 10%;
+	z-index: 999;
+	width: 80%;
+	height: 80vh;
+	background-color: black;
+	display: flex;
+	flex-direction: column;
+	overflow-x: hidden;
+}
+
+.popup .title {
+	width: 100%;
+	background-color: var(--popup_title_bar_color);
+	text-align: center;
+	font-size: 1.3em;
+}
+
+.popup .popup_list_area {
+	height: 70vh;
+	overflow-x: hidden;
+}
+
+.popup .item {
+	width: 100%;
+	background-color: var(--popup_item_color);
+	padding: 2px;
+	display: grid;
+	grid-template-areas: "folder_icon delete_icon edit_icon file";
+	grid-template-columns: 20px 20px 20px auto;
+	
+}
+
+.popup .item .folder_icon {
+	grid-area: folder_icon;
+}
+
+.popup .item .edit_icon {
+	grid-area: edit_icon;
+}
+
+.popup .item .delete_icon {
+	grid-area: delete_icon;
+}
+
+.popup .item .file {
+	grid-area: file;
+	display: grid;
+}
+
+.popup .item .file:hover {
+	background-color: #688f1f;
+}
+
+.popup .popup_load_cancel {
+	text-align: center;
+	background-color: var(--popup_title_bar_color);
+}
+
+.popup_load_cancel_button {
+	vertical-align: bottom;
+	display: inline;
+}
+
+.breadcrumbitem {
+	padding: 5px 10px 5px 10px;
+	color: #ffffff;
+	background-color: transparent;
+	border: none;
+	
+	-moz-transition: background-color 0.25s ease-in;
+	-o-transition: background-color 0.25s ease-in;
+	-webkit-transition: background-color 0.25s ease-in;
+	transition: background-color 0.25s ease-in;
+}
+
+.breadcrumbitem:hover {
+	cursor: pointer;
+	background-color: #688f1f;
+}
+/*----------------------------- Model Load Popup ------------------------------------------*/
+
+.popup .item .model {
+	grid-area: file;
+	display: grid;
+	grid-template-areas: "item gpu_size";
+	grid-template-columns: auto 40px;
+}
+
+.popup .item .model:hover {
+	background-color: #688f1f;
+}
+
+.popup .item .model.selected {
+	background-color: #688f1f;
+}
+
+.model_setting_container {
+	display: grid;
+	grid-template-areas: "label label"
+						 "item item"
+						 "minlabel maxlabel";
+	grid-template-rows: 20px 25px 10px;
+	grid-template-columns: auto 40px;
+	row-gap: 0.2em;
+	border: 1px;
+	margin: 2px;
+}
+
+.model_setting_minlabel {
+	grid-area: minlabel;
+	overflow: hidden;
+	text-align: left;
+	font-size: 0.8em;
+}
+
+.model_setting_maxlabel {
+	grid-area: maxlabel;
+	overflow: hidden;
+	text-align: right;
+	font-size: 0.8em;
+}
+
+.model_setting_label {
+	grid-area: label;
+	overflow: hidden;
+	text-align: left;
+}
+
+.model_setting_value {
+	text-align: left;
+	grid-area: label;
+	background-color: inherit;
+	color: inherit;
+	border: none; 
+	outline: none;
+}
+
+.model_setting_value:focus {
+	color: var(--text_edit);
+}
+
+.model_setting_item {
+	grid-area: item;
+	overflow: hidden;
+}
+
+.model_setting_item_input {
+	width:95%;
+}
+
 /*---------------------------------- Global ------------------------------------------------*/
 .hidden {
 	display: none;
@@ -573,7 +730,7 @@ input {
 }
 
 
-.action_button.disabled {
+button.disabled {
 	color: var(--disabled_button_text);
 	background-color: var(--disabled_button_background_color);
 	border-color: var(--disabled_button_border_color);
@@ -596,3 +753,7 @@ input {
 .rawtext {
 	white-space: pre-wrap;
 }
+
+.text_red {
+	color: red;
+}

static/koboldai.js

@@ -8,11 +8,19 @@ socket.on("disconnect", (reason, details) => {
 });
 socket.on('reset_story', function(){reset_story();});
 socket.on('var_changed', function(data){var_changed(data);});
+socket.on('load_popup', function(data){load_popup(data);});
+socket.on('popup_items', function(data){popup_items(data);});
+socket.on('popup_breadcrumbs', function(data){popup_breadcrumbs(data);});
+socket.on('popup_edit_file', function(data){popup_edit_file(data);});
+socket.on('show_model_menu', function(data){show_model_menu(data);});
+socket.on('selected_model_info', function(data){selected_model_info(data);});
 //socket.onAny(function(event_name, data) {console.log({"event": event_name, "class": data.classname, "data": data});});
 
 var backend_vars = {};
 var presets = {}
 var ai_busy_start = Date.now();
+var popup_deleteable = false;
+var popup_editable = false;
 //-----------------------------------Server to UI  Functions-----------------------------------------------
 function connect() {
 	console.log("connected");
@@ -276,9 +284,465 @@ function var_changed(data) {
 	}
 }
 
+function load_popup(data) {
+	popup_deleteable = data.deleteable;
+	popup_editable = data.editable;
+	var popup = document.getElementById("popup");
+	var popup_title = document.getElementById("popup_title");
+	popup_title.textContent = data.popup_title;
+	var popup_list = document.getElementById("popup_list");
+	//first, let's clear out our existing data
+	while (popup_list.firstChild) {
+		popup_list.removeChild(popup_list.firstChild);
+	}
+	var breadcrumbs = document.getElementById('popup_breadcrumbs');
+	while (breadcrumbs.firstChild) {
+		breadcrumbs.removeChild(breadcrumbs.firstChild);
+	}
+	
+	popup.classList.remove("hidden");
+	
+	//adjust accept button
+	var accept = document.getElementById("popup_accept");
+	accept.classList.add("disabled");
+	accept.setAttribute("emit", data.call_back);
+	accept.setAttribute("selected_value", "");
+	accept.onclick = function () {
+							socket.emit(this.emit, this.getAttribute("selected_value"));
+							document.getElementById("popup").classList.add("hidden");
+					  };
+					  
+}
+
+function popup_items(data) {
+	var popup_list = document.getElementById('popup_list');
+	//first, let's clear out our existing data
+	while (popup_list.firstChild) {
+		popup_list.removeChild(popup_list.firstChild);
+	}
+	
+	for (item of data) {
+		var list_item = document.createElement("span");
+		list_item.classList.add("item");
+		
+		//create the folder icon
+		var folder_icon = document.createElement("span");
+		folder_icon.classList.add("folder_icon");
+		if (item[0]) {
+			folder_icon.classList.add("oi");
+			folder_icon.setAttribute('data-glyph', "folder");
+		}
+		list_item.append(folder_icon);
+		
+		//create the edit icon
+		var edit_icon = document.createElement("span");
+		edit_icon.classList.add("edit_icon");
+		if ((popup_editable) && !(item[0])) {
+			edit_icon.classList.add("oi");
+			edit_icon.setAttribute('data-glyph', "pencil");
+			edit_icon.id = item[1];
+			edit_icon.onclick = function () {
+							socket.emit("popup_edit", this.id);
+					  };
+		}
+		list_item.append(edit_icon);
+		
+		//create the delete icon
+		var delete_icon = document.createElement("span");
+		delete_icon.classList.add("delete_icon");
+		if (popup_deleteable) {
+			delete_icon.classList.add("oi");
+			delete_icon.setAttribute('data-glyph', "x");
+			delete_icon.id = item[1];
+			delete_icon.setAttribute("folder", item[0]);
+			delete_icon.onclick = function () {
+							if (this.getAttribute("folder") == "true") {
+								if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
+									socket.emit("popup_delete", this.id);
+								}
+							} else {
+								if (window.confirm("Do you really want to delete this file?")) {
+									socket.emit("popup_delete", this.id);
+								}
+							}
+					  };
+		}
+		list_item.append(delete_icon);
+		
+		//create the actual item
+		var popup_item = document.createElement("span");
+		popup_item.classList.add("file");
+		popup_item.id = item[1];
+		popup_item.setAttribute("folder", item[0]);
+		popup_item.setAttribute("valid", item[3]);
+		popup_item.textContent = item[2];
+		popup_item.onclick = function () {
+						var accept = document.getElementById("popup_accept");
+						if (this.getAttribute("valid") == "true") {
+							accept.classList.remove("disabled");
+							accept.setAttribute("selected_value", this.id);
+						} else {
+							console.log("not valid");
+							accept.setAttribute("selected_value", "");
+							accept.classList.add("disabled");
+							if (this.getAttribute("folder") == "true") {
+								console.log("folder");
+								socket.emit("popup_change_folder", this.id);
+							}
+						}
+				  };
+		list_item.append(popup_item);
+		
+		
+		popup_list.append(list_item);
+		
+		
+	}
+}
+
+function popup_breadcrumbs(data) {
+	var breadcrumbs = document.getElementById('popup_breadcrumbs')
+	while (breadcrumbs.firstChild) {
+		breadcrumbs.removeChild(breadcrumbs.firstChild);
+	}
+	
+	for (item of data) {
+		var button = document.createElement("button");
+		button.id = item[0];
+		button.textContent = item[1];
+		button.classList.add("breadcrumbitem");
+		button.onclick = function () {
+							socket.emit("popup_change_folder", this.id);
+					  };
+		breadcrumbs.append(button);
+		var span = document.createElement("span");
+		span.textContent = "\\";
+		breadcrumbs.append(span);
+	}
+}
+
+function popup_edit_file(data) {
+	var popup_list = document.getElementById('popup_list');
+	//first, let's clear out our existing data
+	while (popup_list.firstChild) {
+		popup_list.removeChild(popup_list.firstChild);
+	}
+	var accept = document.getElementById("popup_accept");
+	accept.setAttribute("selected_value", "");
+	accept.onclick = function () {
+							var textarea = document.getElementById("filecontents");
+							socket.emit("popup_change_file", {"file": textarea.getAttribute("filename"), "data": textarea.value});
+							document.getElementById("popup").classList.add("hidden");
+					  };
+	
+	var textarea = document.createElement("textarea");
+	textarea.classList.add("fullwidth");
+	textarea.rows = 25;
+	textarea.id = "filecontents"
+	textarea.setAttribute("filename", data.file);
+	textarea.value = data.text;
+	textarea.onblur = function () {
+						var accept = document.getElementById("popup_accept");
+						accept.classList.remove("disabled");
+					};
+	popup_list.append(textarea);
+	
+}
 //--------------------------------------------UI to Server Functions----------------------------------
 
+function show_model_menu(data) {
+	document.getElementById("loadmodelcontainer").classList.remove("hidden");
 	
+	//clear old options
+	document.getElementById("modelkey").classList.add("hidden");
+	document.getElementById("modelkey").value = "";
+	document.getElementById("modelurl").classList.add("hidden");
+	document.getElementById("use_gpu_div").classList.add("hidden");
+	document.getElementById("modellayers").classList.add("hidden");
+	var model_layer_bars = document.getElementById('model_layer_bars');
+	while (model_layer_bars.firstChild) {
+		model_layer_bars.removeChild(model_layer_bars.firstChild);
+	}
+	
+	//clear out the breadcrumbs
+	var breadcrumbs = document.getElementById('loadmodellistbreadcrumbs')
+	while (breadcrumbs.firstChild) {
+		breadcrumbs.removeChild(breadcrumbs.firstChild);
+	}
+	//add breadcrumbs
+	for (item of data.breadcrumbs) {
+		var button = document.createElement("button");
+		button.classList.add("breadcrumbitem");
+		button.id = item[0];
+		button.value = item[1];
+		button.onclick = function () {
+					socket.emit('selectmodel', {'data': this.id, 'folder': this.value});
+				};
+		breadcrumbs.append(button);
+		var span = document.createElement("span");
+		span.textContent = "\\";
+		breadcrumbs.append(span);
+	}
+	
+	//clear out the items
+	var model_list = document.getElementById('loadmodellistcontent')
+	while (model_list.firstChild) {
+		model_list.removeChild(model_list.firstChild);
+	}
+	//add items
+	for (item of data.data) {
+		var list_item = document.createElement("span");
+		list_item.classList.add("item");
+		
+		//create the folder icon
+		var folder_icon = document.createElement("span");
+		folder_icon.classList.add("folder_icon");
+		if (item[3]) {
+			folder_icon.classList.add("oi");
+			folder_icon.setAttribute('data-glyph', "folder");
+		}
+		list_item.append(folder_icon);
+		
+		//create the delete icon
+		//var delete_icon = document.createElement("span");
+		//delete_icon.classList.add("delete_icon");
+		//if (popup_deleteable) {
+		//	delete_icon.classList.add("oi");
+		//	delete_icon.setAttribute('data-glyph', "x");
+		//	delete_icon.id = item[1];
+		//	delete_icon.setAttribute("folder", item[0]);
+		//	delete_icon.onclick = function () {
+		//					if (this.getAttribute("folder") == "true") {
+		//						if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
+		//							socket.emit("popup_delete", this.id);
+		//						}
+		//					} else {
+		//						if (window.confirm("Do you really want to delete this file?")) {
+		//							socket.emit("popup_delete", this.id);
+		//						}
+		//					}
+		//			  };
+		//}
+		//list_item.append(delete_icon);
+		
+		//create the actual item
+		var popup_item = document.createElement("span");
+		popup_item.classList.add("model");
+		popup_item.id = item[1];
+		popup_item.setAttribute("Menu", data.menu)
+		//name text
+		var text = document.createElement("span");
+		text.style="grid-area: item;";
+		text.textContent = item[0];
+		popup_item.append(text);
+		//model size text
+		var text = document.createElement("span");
+		text.textContent = item[2];
+		text.style="grid-area: gpu_size;padding: 2px;";
+		popup_item.append(text);
+		
+		popup_item.onclick = function () {
+						var accept = document.getElementById("popup_accept");
+						accept.classList.add("disabled");
+						socket.emit("select_model", {"model": this.id, "menu": this.getAttribute("Menu")});
+						var model_list = document.getElementById('loadmodellistcontent').getElementsByClassName("selected");
+						for (model of model_list) {
+							model.classList.remove("selected");
+						}
+						this.classList.add("selected");
+					};
+		list_item.append(popup_item);
+		
+		
+		model_list.append(list_item);
+	}
+	
+}
+
+function selected_model_info(data) {
+	var accept = document.getElementById("btn_loadmodelaccept");
+	//hide or unhide key
+	if (data.key) {
+		document.getElementById("modelkey").classList.remove("hidden");
+		document.getElementById("modelkey").value = data.key_value;
+	} else {
+		document.getElementById("modelkey").classList.add("hidden");
+		document.getElementById("modelkey").value = "";
+	}
+	//hide or unhide URL
+	if  (data.url) {
+		document.getElementById("modelurl").classList.remove("hidden");
+	} else {
+		document.getElementById("modelurl").classList.add("hidden");
+	}
+	//hide or unhide the use gpu checkbox
+	if  (data.gpu) {
+		document.getElementById("use_gpu_div").classList.remove("hidden");
+	} else {
+		document.getElementById("use_gpu_div").classList.add("hidden");
+	}
+	//setup breakmodel
+	if (data.breakmodel) {
+		document.getElementById("modellayers").classList.remove("hidden");
+		//setup model layer count
+		console.log(data.break_values.reduce((a, b) => a + b, 0));
+		document.getElementById("gpu_layers_current").textContent = data.break_values.reduce((a, b) => a + b, 0);
+		document.getElementById("gpu_layers_max").textContent = data.layer_count;
+		document.getElementById("gpu_count").value = data.gpu_count;
+		
+		//create the gpu load bars
+		var model_layer_bars = document.getElementById('model_layer_bars');
+		while (model_layer_bars.firstChild) {
+			model_layer_bars.removeChild(model_layer_bars.firstChild);
+		}
+		
+		//Add the bars
+		for (let i = 0; i < data.gpu_names.length; i++) {
+			var div = document.createElement("div");
+			div.classList.add("model_setting_container");
+			//build GPU text
+			var span = document.createElement("span");
+			span.classList.add("model_setting_label");
+			span.textContent = "GPU " + i + " " + data.gpu_names[i] + ": "
+			//build layer count box
+			var input = document.createElement("input");
+			input.classList.add("model_setting_value");
+			input.classList.add("setting_value");
+			input.inputmode = "numeric";
+			input.id = "gpu_layers_box_"+i;
+			input.value = data.break_values[i];
+			input.onblur = function () {
+								document.getElementById(this.id.replace("_box", "")).value = this.value;
+								update_gpu_layers();
+							}
+			span.append(input);
+			div.append(span);
+			//build layer count slider
+			var input = document.createElement("input");
+			input.classList.add("model_setting_item");
+			input.type = "range";
+			input.min = 0;
+			input.max = data.layer_count;
+			input.step = 1;
+			input.value = data.break_values[i];
+			input.id = "gpu_layers_" + i;
+			input.onchange = function () {
+								document.getElementById(this.id.replace("gpu_layers", "gpu_layers_box")).value = this.value;
+								update_gpu_layers();
+							}
+			div.append(input);
+			//build slider bar #s
+			//min
+			var span = document.createElement("span");
+			span.classList.add("model_setting_minlabel");
+			var span2 = document.createElement("span");
+			span2.style="top: -4px; position: relative;";
+			span2.textContent = 0;
+			span.append(span2);
+			div.append(span);
+			//max
+			var span = document.createElement("span");
+			span.classList.add("model_setting_maxlabel");
+			var span2 = document.createElement("span");
+			span2.style="top: -4px; position: relative;";
+			span2.textContent = data.layer_count;
+			span.append(span2);
+			div.append(span);
+			
+			model_layer_bars.append(div);
+		}
+		
+		//add the disk layers
+		var div = document.createElement("div");
+		div.classList.add("model_setting_container");
+		//build GPU text
+		var span = document.createElement("span");
+		span.classList.add("model_setting_label");
+		span.textContent = "Disk cache: "
+		//build layer count box
+		var input = document.createElement("input");
+		input.classList.add("model_setting_value");
+		input.classList.add("setting_value");
+		input.inputmode = "numeric";
+		input.id = "disk_layers_box";
+		input.value = data.disk_break_value;
+		input.onblur = function () {
+							document.getElementById(this.id.replace("_box", "")).value = this.value;
+							update_gpu_layers();
+						}
+		span.append(input);
+		div.append(span);
+		//build layer count slider
+		var input = document.createElement("input");
+		input.classList.add("model_setting_item");
+		input.type = "range";
+		input.min = 0;
+		input.max = data.layer_count;
+		input.step = 1;
+		input.value = data.disk_break_value;
+		input.id = "disk_layers";
+		input.onchange = function () {
+							document.getElementById(this.id+"_box").value = this.value;
+							update_gpu_layers();
+						}
+		div.append(input);
+		//build slider bar #s
+		//min
+		var span = document.createElement("span");
+		span.classList.add("model_setting_minlabel");
+		var span2 = document.createElement("span");
+		span2.style="top: -4px; position: relative;";
+		span2.textContent = 0;
+		span.append(span2);
+		div.append(span);
+		//max
+		var span = document.createElement("span");
+		span.classList.add("model_setting_maxlabel");
+		var span2 = document.createElement("span");
+		span2.style="top: -4px; position: relative;";
+		span2.textContent = data.layer_count;
+		span.append(span2);
+		div.append(span);
+		
+		model_layer_bars.append(div);
+		
+		update_gpu_layers();
+	} else {
+		document.getElementById("modellayers").classList.add("hidden");
+		accept.classList.remove("disabled");
+	}
+	
+	
+}
+
+function update_gpu_layers() {
+	var gpu_layers
+	gpu_layers = 0;
+	for (let i=0; i < document.getElementById("gpu_count").value; i++) {
+		gpu_layers += parseInt(document.getElementById("gpu_layers_"+i).value);
+	}
+	if (document.getElementById("disk_layers")) {
+		gpu_layers += parseInt(document.getElementById("disk_layers").value);
+	}
+	if (gpu_layers > parseInt(document.getElementById("gpu_layers_max").textContent)) {
+		document.getElementById("gpu_layers_current").textContent = gpu_layers;
+		document.getElementById("gpu_layers_current").classList.add("text_red");
+		var accept = document.getElementById("btn_loadmodelaccept");
+		accept.classList.add("disabled");
+	} else {
+		var accept = document.getElementById("btn_loadmodelaccept");
+		accept.classList.remove("disabled");
+		document.getElementById("gpu_layers_current").textContent = gpu_layers;
+		document.getElementById("gpu_layers_current").classList.remove("text_red");
+	}
+}
+
+function load_model() {
+	message = {'cmd': 'load_model', 'use_gpu': $('#use_gpu')[0].checked, 
+			   'key': $('#modelkey')[0].value, 'gpu_layers': gpu_layers.slice(0, -1), 
+			   'disk_layers': disk_layers, 'url': $('#modelurl')[0].value, 
+			   'online_model': $('#oaimodel')[0].value};
+}
 //--------------------------------------------General UI Functions------------------------------------
 String.prototype.toHHMMSS = function () {
     var sec_num = parseInt(this, 10); // don't forget the second param

templates/index_new.html

@@ -61,5 +61,53 @@
 	<div id="rightSideMenu" class="rightSideMenu">
 		{% include 'story flyout.html' %}
 	</div>
+	
+	<!------------- Pop-Up ------------------------------->
+	<div class="popup hidden" id="popup">
+		<div class="title" id="popup_title">
+			Popup Title
+		</div>
+		<div id="popup_breadcrumbs"></div>
+		<div class="popup_list_area" id="popup_list"></div>
+		<div class="popup_load_cancel">
+			<button class="btn popup_load_cancel_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>
+	
+	<!---------------- Model Load Screen ---------------------->
+	<div class="popup hidden" id="loadmodelcontainer">
+		<div class="title">
+			Select A Model To Load
+		</div>
+		<div id="loadmodellistbreadcrumbs">
+			
+		</div>
+		<div id="loadmodellistcontent" class="popup_list_area"></div>
+		<div class="popup_load_cancel">
+			<input class="hidden" type="text" placeholder="key" id="modelkey" onblur="socket.send({'cmd': 'OAI_Key_Update', 'key': $('#modelkey')[0].value});">
+			<input class="hidden" type="text" placeholder="Enter the URL of the server (For example a trycloudflare link)" id="modelurl" onchange="check_enable_model_load()">
+			<input class="hidden" type="text" placeholder="Model Path or Hugging Face Name" id="custommodelname" menu="" onblur="socket.send({'cmd': 'selectmodel', 'data': $(this).attr('menu'), 'path_modelname': $('#custommodelname')[0].value});">
+			<select class="hidden" id="oaimodel"><option value="">Select OAI Model</option></select>
+			<div class="hidden" id=modellayers>
+				<div class="justifyleft">
+					GPU/Disk Layers
+					<span class="helpicon">?
+						<span class="helptext">Number of layers to assign to GPUs and to disk cache. Remaining layers will be put into CPU RAM.</span>
+					</span>
+				</div>
+				<div class="justifyright"><span id="gpu_layers_current">0</span>/<span id="gpu_layers_max">0</span></div>
+				<div id=model_layer_bars style="color: white"></div>
+				<input type=hidden id='gpu_count' value=0/>
+			</div>
+			<div class="box flex-push-right hidden" id=use_gpu_div>
+				<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" onclick='document.getElementById("loadmodelcontainer").classList.add("hidden");' id="btn_loadmodelclose">Cancel</button>
+			
+		</div>
+	</div>
 </body>
 </html>

templates/settings flyout.html

@@ -33,7 +33,7 @@
 <div id="setting_menu_model" class="settings_category_area">
 	<div id="Model_Info">
 		<div>Running Model: <span class="var_sync_model_model">ReadOnly</span></div>
-		<div><button class="btn action_button">Load Model</button></div>
+		<div><button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button></div>
 	</div>
 {% with menu='Model' %}
 	{% include 'settings item.html' %}