comfyanonymous · ThisModernDay · Oct 21, 2023 · Oct 21, 2023 · Oct 21, 2023 · Oct 21, 2023
@@ -1,7 +1,18 @@
 ComfyUI
 =======
 The most powerful and modular stable diffusion GUI and backend.
+
+In This Branch
 -----------
+- Added the ability to reboot the server with the click of a button
+- Added an option in the settings menu to select the reboot server button location currently 3 locations are available. Menu Bar Top Icon, Small Button, Main Menu
+- Added an option to toggle whether or not you have to confirm that you'd like to reboot the server
+
+![Reboot Button Screenshot](rebootcomfyui.png)
+
+
+Original
+---
 ![ComfyUI Screenshot](comfyui_screenshot.png)
 
 This ui will let you design and execute advanced stable diffusion pipelines using a graph/nodes/flowchart based interface. For some workflow examples and see what ComfyUI can do you can check out:

@@ -120,6 +120,10 @@ async def websocket_handler(request):
                 self.sockets.pop(sid, None)
             return ws
 
+        @routes.get("/reboot")
+        def restart(self):
+            return os.execv(sys.executable, ['python'] + sys.argv)
+
         @routes.get("/")
         async def get_root(request):
             return web.FileResponse(os.path.join(self.web_root, "index.html"))

@@ -46,6 +46,7 @@ export function $el(tag, propsOrChildren, children) {
 	return element;
 }
 
+
 function dragElement(dragEl, settings) {
 	var posDiffX = 0,
 		posDiffY = 0,
@@ -165,6 +166,7 @@ function dragElement(dragEl, settings) {
 		document.onmouseup = null;
 		document.onmousemove = null;
 	}
+
 }
 
 export class ComfyDialog {
@@ -618,6 +620,11 @@ export class ComfyUI {
 			}, [
 				$el("span.drag-handle"),
 				$el("span", {$: (q) => (this.queueSize = q)}),
+				$el("button.comfy-reboot-server-button-icon", {id: "comfy-reboot-server-icon", textContent: "⚡", onclick: () => {
+					if (!confirmReboot.value || confirm("Are you sure you'd like to reboot the server?")) {
+						api.fetchApi("/reboot")
+					}
+				}}),
 				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
 			]),
 			$el("button.comfy-queue-btn", {
@@ -704,6 +711,13 @@ export class ComfyUI {
 						this.history.toggle();
 					},
 				}),
+				$el("button", {
+					id: "comfy-reboot-server-button-small", textContent: "Reboot Server", onclick: () => {
+						if (!confirmReboot.value || confirm("Are you sure you'd like to reboot the server?")) {
+							api.fetchApi("/reboot")
+						}
+					}
+				})
 			]),
 			this.queue.element,
 			this.history.element,
@@ -788,8 +802,17 @@ export class ComfyUI {
 					}
 				}
 			}),
+			$el("button", {
+				id: "comfy-reboot-server-button-large", textContent: "Reboot Server", onclick: () => {
+					if (!confirmReboot.value || confirm("Are you sure you'd like to reboot the server?")) {
+						api.fetchApi("/reboot")
+					}
+				}
+			})
+
 		]);
 
+
 		const devMode = this.settings.addSetting({
 			id: "Comfy.DevMode",
 			name: "Enable Dev mode Options",
@@ -798,6 +821,38 @@ export class ComfyUI {
 			onChange: function(value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "block" : "none"},
 		});
 
+		const changeRebootLocation = this.settings.addSetting({
+			id: "Comfy.RebootLocation",
+			name: "Change Reboot Server Button Location",
+			type: "combo",
+			options: ['Menu Bar Top Icon', 'Small Button', 'Main Menu'],
+			defaultValue: 'Menu Bar Top Icon',
+			onChange: (value) => {
+				if( value == 'Menu Bar Top Icon') {
+					document.querySelector('#comfy-reboot-server-icon').style.display = ""
+				} else {
+					document.querySelector('#comfy-reboot-server-icon').style.display = "none"
+				}
+				if(value == 'Small Button') {
+					document.querySelector('#comfy-reboot-server-button-small').style.display = ""
+				} else {
+					document.querySelector('#comfy-reboot-server-button-small').style.display = "none"
+				}
+				if(value == 'Main Menu') {
+					document.querySelector('#comfy-reboot-server-button-large').style.display = ""
+				} else {
+					document.querySelector('#comfy-reboot-server-button-large').style.display = "none"
+				}
+			}
+		});
+
+		const confirmReboot = this.settings.addSetting({
+			id: "Comfy.ConfirmReboot",
+			name: "Require confirmation when rebooting server",
+			type: "boolean",
+			defaultValue: true,
+		});
+
 		dragElement(this.menuContainer, this.settings);
 
 		this.setStatus({exec_info: {queue_remaining: "X"}});

@@ -142,6 +142,15 @@ body {
 	cursor: pointer;
 }
 
+.comfy-menu > button:hover,
+.comfy-menu-btns button:hover,
+.comfy-menu .comfy-list button:hover,
+.comfy-modal button:hover,
+.comfy-reboot-server-button-icon:hover {
+	filter: brightness(1.2);
+	cursor: pointer;
+}
+
 .comfy-menu span.drag-handle {
 	width: 10px;
 	height: 20px;
@@ -218,6 +227,15 @@ button.comfy-settings-btn {
 	border: none;
 }
 
+button.comfy-reboot-server-button-icon {
+	background-color: rgba(0, 0, 0, 0);
+	font-size: 12px;
+	padding: 0;
+	position: absolute;
+	right: 15px;
+	border: none;
+}
+
 button.comfy-queue-btn {
 	margin: 6px 0 !important;
 }