diff --git a/README.md b/README.md
index 25dd292..28e7c30 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,8 @@ Download, browse and delete models in ComfyUI.
### ComfyUI Node Graph
+
+
- Button to copy a model to the ComfyUI clipboard or embedding to system clipboard. (Embedding copying requires secure http connection.)
- Button to add model to ComfyUI graph or embedding to selected nodes. (For small screens/low resolution.)
- Button to load workflows embedded in previews. (Can alternatively drag full-sized image in model info onto node graph.)
@@ -51,6 +53,8 @@ Download, browse and delete models in ComfyUI.
### Settings Tab
+
+
- Settings tab saved in `ui_settings.yaml`.
- Hide/Show 'add' and 'copy-to-clipboard' buttons.
- Text to always included in search.
diff --git a/demo-tab-download.png b/demo-tab-download.png
index 2512b2c..4e5f7a7 100644
Binary files a/demo-tab-download.png and b/demo-tab-download.png differ
diff --git a/demo-tab-model-info-overview.png b/demo-tab-model-info-overview.png
index 4d588d1..f1b9639 100644
Binary files a/demo-tab-model-info-overview.png and b/demo-tab-model-info-overview.png differ
diff --git a/demo-tab-model-preview-thumbnail-buttons-example.png b/demo-tab-model-preview-thumbnail-buttons-example.png
new file mode 100644
index 0000000..8f96ba6
Binary files /dev/null and b/demo-tab-model-preview-thumbnail-buttons-example.png differ
diff --git a/demo-tab-models.png b/demo-tab-models.png
index 1138d51..672ecea 100644
Binary files a/demo-tab-models.png and b/demo-tab-models.png differ
diff --git a/demo-tab-settings.png b/demo-tab-settings.png
new file mode 100644
index 0000000..13ee3ef
Binary files /dev/null and b/demo-tab-settings.png differ
diff --git a/web/model-manager.css b/web/model-manager.css
index d00b0ec..5fe8f0e 100644
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -99,21 +99,29 @@
.model-manager[data-sidebar-state="left"] {
width: var(--model-manager-sidebar-width-left);
+ max-width: 95vw;
+ min-width: 22vw;
right: auto;
}
.model-manager[data-sidebar-state="top"] {
height: var(--model-manager-sidebar-height-top);
+ max-height: 95vh;
+ min-height: 22vh;
bottom: auto;
}
.model-manager[data-sidebar-state="bottom"] {
height: var(--model-manager-sidebar-height-bottom);
+ max-height: 95vh;
+ min-height: 22vh;
top: auto;
}
.model-manager[data-sidebar-state="right"] {
width: var(--model-manager-sidebar-width-right);
+ max-width: 95vw;
+ min-width: 22vw;
left: auto;
}
diff --git a/web/model-manager.js b/web/model-manager.js
index 3b87f15..7d6cf15 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -3,6 +3,10 @@ import { api } from "../../scripts/api.js";
import { ComfyDialog, $el } from "../../scripts/ui.js";
import { ComfyButton } from "../../scripts/ui/components/button.js";
+function clamp(x, min, max) {
+ return Math.min(Math.max(x, min), max);
+}
+
/**
* @param {string} url
* @param {any} [options=undefined]
@@ -3094,7 +3098,6 @@ async function getModelInfos(urlText) {
const name = civitaiInfo["name"];
const infos = [];
const type = civitaiInfo["type"];
- //console.log(civitaiInfo);
civitaiInfo["versions"].forEach((version) => {
const images = version["images"];
const tags = version["tags"];
@@ -3130,7 +3133,6 @@ async function getModelInfos(urlText) {
.replaceAll("<", "<").replaceAll(">", ">")
.replaceAll("<e;", "<=").replaceAll(">e;", ">=")
.replaceAll("&", "&");
- //console.log(description);
version["files"].forEach((file) => {
infos.push({
"images": images,
@@ -3506,7 +3508,7 @@ class DownloadView {
$el("textarea.comfy-multiline-input", {
name: "model info notes",
value: info["description"]??"",
- rows: 10,
+ rows: 6,
disabled: true,
style: { display: info["description"] === undefined || info["description"] === "" ? "none" : "" },
})
@@ -4080,7 +4082,7 @@ class SettingsView {
value: 0.5,
min: 0.0,
max: 1.0,
- step: 0.01,
+ step: 0.05,
}),
]),
$el("label", [
@@ -4092,7 +4094,7 @@ class SettingsView {
value: 0.5,
min: 0.0,
max: 1.0,
- step: 0.01,
+ step: 0.05,
}),
]),
$checkbox({
@@ -4535,7 +4537,6 @@ class ModelManager extends ComfyDialog {
return;
}
- /** @type {HTMLDivElement} */
const left = modelManager.offsetLeft;
const top = modelManager.offsetTop;
const width = modelManager.offsetWidth;
@@ -4582,19 +4583,19 @@ class ModelManager extends ComfyDialog {
const pageHeight = document.documentElement.scrollHeight;
if (sidebarState === "left") {
- const pixels = this.#clampSidebarWidth(x).toString() + "px";
+ const pixels = clamp(x, 0, pageWidth).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-width-left", pixels);
}
else if (sidebarState === "right") {
- const pixels = this.#clampSidebarWidth(pageWidth - x).toString() + "px";
+ const pixels = clamp(pageWidth - x, 0, pageWidth).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-width-right", pixels);
}
else if (sidebarState === "top") {
- const pixels = this.#clampSidebarHeight(y).toString() + "px";
+ const pixels = clamp(y, 0, pageHeight).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-height-top", pixels);
}
else if (sidebarState === "bottom") {
- const pixels = this.#clampSidebarHeight(pageHeight - y).toString() + "px";
+ const pixels = clamp(pageHeight - y, 0, pageHeight).toString() + "px";
modelManager.style.setProperty("--model-manager-sidebar-height-bottom", pixels);
}
};
@@ -4626,22 +4627,16 @@ class ModelManager extends ComfyDialog {
const x = Math.floor(pageWidth * settings["sidebar-default-width"].value);
const y = Math.floor(pageHeight * settings["sidebar-default-height"].value);
- console.log(settings["sidebar-default-width"].value);
- console.log(settings["sidebar-default-height"].value);
-
- console.log(x);
- console.log(y);
-
- const leftPixels = this.#clampSidebarWidth(x).toString() + "px";
+ const leftPixels = x.toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-width-left", leftPixels);
- const rightPixels = this.#clampSidebarWidth(pageWidth - x).toString() + "px";
+ const rightPixels = x.toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-width-right", rightPixels);
- const topPixels = this.#clampSidebarHeight(y).toString() + "px";
+ const topPixels = y.toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-height-top", topPixels);
- const bottomPixels = this.#clampSidebarHeight(pageHeight - y).toString() + "px";
+ const bottomPixels = y.toString() + "px";
this.element.style.setProperty("--model-manager-sidebar-height-bottom", bottomPixels);
}
}
@@ -4720,28 +4715,6 @@ class ModelManager extends ComfyDialog {
this.#sidebarSelect.style.display = "none";
}
}
-
- /**
- * @param {Number} x
- * @returns {Number}
- */
- #clampSidebarWidth(x) {
- const pageWidth = document.documentElement.scrollWidth;
- const min = Math.floor(pageWidth * 0.15); // TODO: magic numbers
- const max = Math.floor(pageWidth * 0.95); // TODO: magic numbers
- return Math.min(Math.max(x, min), max);
- }
-
- /**
- * @param {Number} y
- * @returns {Number}
- */
- #clampSidebarHeight(y) {
- const pageHeight = document.documentElement.scrollHeight;
- const min = Math.floor(pageHeight * 0.15); // TODO: magic numbers
- const max = Math.floor(pageHeight * 0.95); // TODO: magic numbers
- return Math.min(Math.max(y, min), max);
- }
}
/** @type {ModelManager | undefined} */