From c565978fff40d4f41b1ba90dceddb7588397af6e Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Wed, 8 Jun 2022 19:39:04 -0400
Subject: [PATCH] Fix for multi-gpu not showing appropriately Slight visual
 improvement for custom model load breadcrumbs

---
 aiserver.py           |  5 +++--
 static/application.js |  5 ++++-
 static/custom.css     | 24 +++++++++++++++++++++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/aiserver.py b/aiserver.py
index cb274537..110c8224 100644
--- a/aiserver.py
+++ b/aiserver.py
@@ -1031,6 +1031,7 @@ def get_model_info(model, directory=""):
     key_value = ""
     break_values = []
     url = False
+    gpu_count = torch.cuda.device_count()
     if model in [x[1] for x in model_menu['apilist']]:
         if path.exists("settings/{}.settings".format(model)):
             with open("settings/{}.settings".format(model), "r") as file:
@@ -1059,10 +1060,10 @@ def get_model_info(model, directory=""):
                     break_values = file.read().split(",")
             else:
                 break_values = [layer_count]
-                break_values += [0] * (gpu+1 - len(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, 
-                         'break_values': break_values, 'gpu_count': torch.cuda.device_count(),
+                         'break_values': break_values, 'gpu_count': gpu_count,
                          'url': url}, broadcast=True)
     if key_value != "":
         get_oai_models(key_value)
diff --git a/static/application.js b/static/application.js
index 035cdddf..e2fdfb4e 100644
--- a/static/application.js
+++ b/static/application.js
@@ -997,7 +997,7 @@ function buildLoadModelList(ar, menu, breadcrumbs) {
 	$("#loadmodellistbreadcrumbs").html("");
 	var i;
 	for(i=0; i<breadcrumbs.length; i++) {
-		$("#loadmodellistbreadcrumbs").append("<button id='model_breadcrumbs"+i+"' name='"+ar[0][1]+"' value='"+breadcrumbs[i][0]+"'>"+breadcrumbs[i][1]+"</button>");
+		$("#loadmodellistbreadcrumbs").append("<button class=\"breadcrumbitem\" id='model_breadcrumbs"+i+"' name='"+ar[0][1]+"' value='"+breadcrumbs[i][0]+"'>"+breadcrumbs[i][1]+"</button><font color=white>\\</font>");
 		$("#model_breadcrumbs"+i).off("click").on("click", (function () {
 				return function () {
 					socket.send({'cmd': 'selectmodel', 'data': $(this).attr("name"), 'folder': $(this).attr("value")});
@@ -1005,6 +1005,9 @@ function buildLoadModelList(ar, menu, breadcrumbs) {
 				}
 			})(i));
 	}
+	if (breadcrumbs.length > 0) {
+		$("#loadmodellistbreadcrumbs").append("<hr size='1'>")  
+	}
 	for(i=0; i<ar.length; i++) {
 		var html
 		html = "<div class=\"flex\">\
diff --git a/static/custom.css b/static/custom.css
index d70fd34e..c552ace2 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -1035,7 +1035,7 @@ body.connected .statusiconlabel, .statusiconlabel.always-available {
 }
 
 .loadlistitem {
-	padding: 5px 10px 5px 10px;
+	padding: 0px 0px 0px 0px;
 	display: flex;
 	flex-grow: 1;
 	color: #ffffff;
@@ -1051,6 +1051,28 @@ body.connected .statusiconlabel, .statusiconlabel.always-available {
 	background-color: #688f1f;
 }
 
+.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;
+}
+
+hr {
+    padding: 0px;
+    margin: 0px;    
+}
+
 .loadlistpadding {
 	padding-right: 10px;
 }