Merge branch 'master' of github.com:comfyanonymous/ComfyUI

comfy/ldm/modules/diffusionmodules/util.py

@@ -98,7 +98,7 @@ def make_beta_schedule(schedule, n_timestep, linear_start=1e-4, linear_end=2e-2,
         alphas = torch.cos(alphas).pow(2)
         alphas = alphas / alphas[0]
         betas = 1 - alphas[1:] / alphas[:-1]
-        betas = np.clip(betas, a_min=0, a_max=0.999)
+        betas = torch.clamp(betas, min=0, max=0.999)
 
     elif schedule == "squaredcos_cap_v2":  # used for karlo prior
         # return early
@@ -113,7 +113,7 @@ def make_beta_schedule(schedule, n_timestep, linear_start=1e-4, linear_end=2e-2,
         betas = torch.linspace(linear_start, linear_end, n_timestep, dtype=torch.float64) ** 0.5
     else:
         raise ValueError(f"schedule '{schedule}' unknown.")
-    return betas.numpy()
+    return betas
 
 
 def make_ddim_timesteps(ddim_discr_method, num_ddim_timesteps, num_ddpm_timesteps, verbose=True):

comfy/model_sampling.py

@@ -1,5 +1,4 @@
 import torch
-import numpy as np
 from comfy.ldm.modules.diffusionmodules.util import make_beta_schedule
 import math
 
@@ -42,8 +41,7 @@ class ModelSamplingDiscrete(torch.nn.Module):
         else:
             betas = make_beta_schedule(beta_schedule, timesteps, linear_start=linear_start, linear_end=linear_end, cosine_s=cosine_s)
         alphas = 1. - betas
-        alphas_cumprod = torch.tensor(np.cumprod(alphas, axis=0), dtype=torch.float32)
+        alphas_cumprod = torch.cumprod(alphas, dim=0)
-        # alphas_cumprod_prev = np.append(1., alphas_cumprod[:-1])
 
         timesteps, = betas.shape
         self.num_timesteps = int(timesteps)
@@ -58,8 +56,8 @@ class ModelSamplingDiscrete(torch.nn.Module):
         self.set_sigmas(sigmas)
 
     def set_sigmas(self, sigmas):
-        self.register_buffer('sigmas', sigmas)
+        self.register_buffer('sigmas', sigmas.float())
-        self.register_buffer('log_sigmas', sigmas.log())
+        self.register_buffer('log_sigmas', sigmas.log().float())
 
     @property
     def sigma_min(self):

comfy/web/scripts/ui.js

@@ -394,18 +394,42 @@ export class ComfyUI {
 			}
 		});
 
-		this.menuContainer = $el("div.comfy-menu", {parent: document.body}, [
+		this.menuHamburger = $el(
-			$el("div.drag-handle", {
+			"div.comfy-menu-hamburger",
+			{
+				parent: document.body,
+				onclick: () => {
+					this.menuContainer.style.display = "block";
+					this.menuHamburger.style.display = "none";
+				},
+			},
+			[$el("div"), $el("div"), $el("div")]
+		);
+
+		this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
+			$el("div.drag-handle.comfy-menu-header", {
 				style: {
 					overflow: "hidden",
 					position: "relative",
 					width: "100%",
 					cursor: "default"
 				}
-			}, [
+			}, 	[
 				$el("span.drag-handle"),
-				$el("span", {$: (q) => (this.queueSize = q)}),
+				$el("span.comfy-menu-queue-size", { $: (q) => (this.queueSize = q) }),
-				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
+				$el("div.comfy-menu-actions", [
+					$el("button.comfy-settings-btn", {
+						textContent: "⚙️",
+						onclick: () => this.settings.show(),
+					}),
+					$el("button.comfy-close-menu-btn", {
+						textContent: "\u00d7",
+						onclick: () => {
+							this.menuContainer.style.display = "none";
+							this.menuHamburger.style.display = "flex";
+						},
+					}),
+				]),
 			]),
 			$el("button.comfy-queue-btn", {
 				id: "queue-button",

comfy/web/scripts/ui/settings.js

@@ -16,7 +16,17 @@ export class ComfySettingsDialog extends ComfyDialog {
 			},
 			[
 				$el("table.comfy-modal-content.comfy-table", [
-					$el("caption", { textContent: "Settings" }),
+					$el(
+						"caption",
+						{ textContent: "Settings" },
+						$el("button.comfy-btn", {
+							type: "button",
+							textContent: "\u00d7",
+							onclick: () => {
+								this.element.close();
+							},
+						})
+					),
 					$el("tbody", { $: (tbody) => (this.textElement = tbody) }),
 					$el("button", {
 						type: "button",

comfy/web/style.css

@@ -82,6 +82,24 @@ body {
 	margin: 3px 3px 3px 4px;
 }
 
+.comfy-menu-hamburger {
+	position: fixed;
+	top: 10px;
+	z-index: 9999;
+	right: 10px;
+	width: 30px;
+	display: none;
+	gap: 8px;
+	flex-direction: column;
+	cursor: pointer;
+}
+.comfy-menu-hamburger div {
+	height: 3px;
+	width: 100%;
+	border-radius: 20px;
+	background-color: white;
+}
+
 .comfy-menu {
 	font-size: 15px;
 	position: absolute;
@@ -101,6 +119,44 @@ body {
 	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
 }
 
+.comfy-menu-header {
+	display: flex;
+}
+
+.comfy-menu-actions {
+	display: flex;
+	gap: 3px;
+	align-items: center;
+	height: 20px;
+	position: relative;
+	top: -1px;
+	font-size: 22px;
+}
+
+.comfy-menu .comfy-menu-actions button {
+	background-color: rgba(0, 0, 0, 0);
+	padding: 0;
+	border: none;
+	cursor: pointer;
+	font-size: inherit;
+}
+
+.comfy-menu .comfy-menu-actions .comfy-settings-btn {
+	font-size: 0.6em;
+}
+
+button.comfy-close-menu-btn {
+	font-size: 1em;
+	line-height: 12px;
+	color: #ccc;
+	position: relative;
+	top: -1px;
+}
+
+.comfy-menu-queue-size {
+	flex: auto;
+}
+
 .comfy-menu button,
 .comfy-modal button {
 	font-size: 20px;
@@ -121,7 +177,6 @@ body {
 	width: 100%;
 }
 
-.comfy-toggle-switch,
 .comfy-btn,
 .comfy-menu > button,
 .comfy-menu-btns button,
@@ -140,17 +195,11 @@ body {
 .comfy-menu-btns button:hover,
 .comfy-menu .comfy-list button:hover,
 .comfy-modal button:hover,
-.comfy-settings-btn:hover {
+.comfy-menu-actions button:hover {
 	filter: brightness(1.2);
 	cursor: pointer;
 }
 
-.comfy-menu span.drag-handle {
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
 span.drag-handle {
 	width: 10px;
 	height: 20px;
@@ -215,15 +264,6 @@ span.drag-handle::after {
 	font-size: 12px;
 }
 
-button.comfy-settings-btn {
-	background-color: rgba(0, 0, 0, 0);
-	font-size: 12px;
-	padding: 0;
-	position: absolute;
-	right: 0;
-	border: none;
-}
-
 button.comfy-queue-btn {
 	margin: 6px 0 !important;
 }
@@ -269,7 +309,19 @@ button.comfy-queue-btn {
 	}
 
 	.comfy-menu span.drag-handle {
-		visibility: hidden
+		display: none;
+	}
+	
+	.comfy-menu-queue-size {
+		flex: unset;
+	}
+
+	.comfy-menu-header {
+		justify-content: space-between;
+	}
+	.comfy-menu-actions {
+		gap: 10px;
+		font-size: 28px;
 	}
 }
 
@@ -320,7 +372,7 @@ dialog::backdrop {
 	text-align: right;
 }
 
-#comfy-settings-dialog button {
+#comfy-settings-dialog tbody button, #comfy-settings-dialog table > button {
 	background-color: var(--bg-color);
 	border: 1px var(--border-color) solid;
 	border-radius: 0;
@@ -343,12 +395,33 @@ dialog::backdrop {
 }
 
 .comfy-table caption {
+	position: sticky;
+	top: 0;
 	background-color: var(--bg-color);
 	color: var(--input-text);
 	font-size: 1rem;
 	font-weight: bold;
 	padding: 8px;
 	text-align: center;
+	border-bottom: 1px solid var(--border-color);
+}
+
+.comfy-table caption .comfy-btn {
+	position: absolute;
+	top: -2px;
+	right: 0;
+	bottom: 0;
+	cursor: pointer;
+	border: none;
+	height: 100%;
+	border-radius: 0;
+	aspect-ratio: 1/1;
+	user-select: none;
+	font-size: 20px;
+}
+
+.comfy-table caption .comfy-btn:focus {
+	outline: none;
 }
 
 .comfy-table tr:nth-child(even) {
@@ -435,43 +508,6 @@ dialog::backdrop {
 	margin-left: 5px;
 }
 
-.comfy-toggle-switch {
-	border-width: 2px;
-	display: flex;
-	background-color: var(--comfy-input-bg);
-	margin: 2px 0;
-	white-space: nowrap;
-}
-
-.comfy-toggle-switch label {
-	padding: 2px 0px 3px 6px;
-	flex: auto;
-	border-radius: 8px;
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.comfy-toggle-switch label:first-child {
-	border-top-left-radius: 8px;
-	border-bottom-left-radius: 8px;
-}
-.comfy-toggle-switch label:last-child {
-	border-top-right-radius: 8px;
-	border-bottom-right-radius: 8px;
-}
-
-.comfy-toggle-switch .comfy-toggle-selected {
-	background-color: var(--comfy-menu-bg);
-}
-
-#extraOptions {
-	padding: 4px;
-	background-color: var(--bg-color);
-	margin-bottom: 4px;
-	border-radius: 4px;
-}
-
 /* Search box */
 
 .litegraph.litesearchbox {
@@ -498,3 +534,21 @@ dialog::backdrop {
 	color: var(--input-text);
 	filter: brightness(50%);
 }
+
+@media only screen and (max-width: 450px) {
+	#comfy-settings-dialog .comfy-table tbody {
+		display: grid;
+	}
+	#comfy-settings-dialog .comfy-table tr {
+		display: grid;
+	}
+	#comfy-settings-dialog tr > td:first-child {
+		text-align: center;
+		border-bottom: none;
+		padding-bottom: 0;
+	}
+	#comfy-settings-dialog tr > td:not(:first-child) {
+		text-align: center;
+		border-top: none;
+	}
+}