TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed download/save ComfyButton bugs with reenable and icon revert.

Browse Source
This commit is contained in:
Christian Bastian
2024-07-24 02:14:19 -04:00
parent f4b738a2d7
commit 752aac74f7
1 changed files with 88 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
web/model-manager.js
View File

@@ -169,37 +169,42 @@ function debounce(callback, delay) {
/** /**
* *
* @param {HTMLButtonElement} element * @param {HTMLButtonElement} element
* @returns {[HTMLButtonElement | undefined, HTMLElement | undefined]} * @returns {[HTMLButtonElement | undefined, HTMLElement | undefined, HTMLSpanElement | undefined]} [button, icon, span]
*/ */
function comfyButtonDisambiguate(element) { function comfyButtonDisambiguate(element) {
let button = undefined; let button = undefined;
let icon = undefined; let icon = undefined;
let span = undefined;
const nodeName = element.nodeName.toLowerCase(); const nodeName = element.nodeName.toLowerCase();
if (nodeName === "button") { if (nodeName === "button") {
button = element; button = element;
icon = button.getElementsByTagName("i")[0]; icon = button.getElementsByTagName("i")[0];
span = button.getElementsByTagName("span")[0];
} }
else if (nodeName === "i") { else if (nodeName === "i") {
icon = element; icon = element;
button = element.parentElement; button = element.parentElement;
span = button.getElementsByTagName("span")[0];
} }
else if (nodeName === "span") { else if (nodeName === "span") {
button = element.parentElement; button = element.parentElement;
icon = button.getElementsByTagName("i")[0]; icon = button.getElementsByTagName("i")[0];
span = element;
} }
return [button, icon] return [button, icon, span]
} }
/** /**
* @param {HTMLButtonElement} element * @param {HTMLButtonElement} element
* @param {boolean} success * @param {boolean} success
* @param {string} successClassName * @param {string?} successClassName
* @param {string} failureClassName * @param {string?} failureClassName
* @param {boolean?} [disableCallback=false]
*/ */
function comfyButtonAlert(element, success, successClassName = undefined, failureClassName = undefined) { function comfyButtonAlert(element, success, successClassName = undefined, failureClassName = undefined, disableCallback = false) {
if (element === undefined || element === null) { return; } if (element === undefined || element === null) { return; }
const [button, icon] = comfyButtonDisambiguate(element); const [button, icon, span] = comfyButtonDisambiguate(element);
if (button === undefined) { if (button === undefined) {
console.warn("Unable to find button element!"); console.warn("Unable to find button element!");
console.warn(element); console.warn(element);
@@ -216,18 +221,22 @@ function comfyButtonAlert(element, success, successClassName = undefined, failur
icon.classList.add(iconClassName); icon.classList.add(iconClassName);
} }
icon.classList.add(colorClassName); icon.classList.add(colorClassName);
window.setTimeout((element, iconClassName, colorClassName) => { if (!disableCallback) {
if (iconClassName !== "") { window.setTimeout((element, iconClassName, colorClassName) => {
element.classList.remove(iconClassName); if (iconClassName !== "") {
} element.classList.remove(iconClassName);
element.classList.remove(colorClassName); }
}, 1000, icon, iconClassName, colorClassName); element.classList.remove(colorClassName);
}, 1000, icon, iconClassName, colorClassName);
}
} }
button.classList.add(colorClassName); button.classList.add(colorClassName);
window.setTimeout((element, colorClassName) => { if (!disableCallback) {
element.classList.remove(colorClassName); window.setTimeout((element, colorClassName) => {
}, 1000, button, colorClassName); element.classList.remove(colorClassName);
}, 1000, button, colorClassName);
}
} }
/** /**
@@ -749,10 +758,13 @@ class ImageSelect {
tooltip: "Search models", tooltip: "Search models",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: async (e) => { action: async (e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const value = el_customUrl.value; const value = el_customUrl.value;
el_customUrlPreview.src = await getCustomPreviewUrl(value); el_customUrlPreview.src = await getCustomPreviewUrl(value);
e.stopPropagation(); e.stopPropagation();
el_customUrl.blur(); el_customUrl.blur();
button.disabled = false;
}, },
}).element, }).element,
]); ]);
@@ -1979,10 +1991,11 @@ class ModelInfo {
tooltip: "Overwrite currrent preview with selected image", tooltip: "Overwrite currrent preview with selected image",
content: "Set as Preview", content: "Set as Preview",
action: async(e) => { action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const confirmation = window.confirm("Change preview image(s) PERMANENTLY?"); const confirmation = window.confirm("Change preview image(s) PERMANENTLY?");
let updatedPreview = false; let updatedPreview = false;
if (confirmation) { if (confirmation) {
e.target.disabled = true;
const container = this.elements.info; const container = this.elements.info;
const path = container.dataset.path; const path = container.dataset.path;
const imageUrl = await previewSelect.getImage(); const imageUrl = await previewSelect.getImage();
@@ -2036,10 +2049,9 @@ class ModelInfo {
previewSelect.resetModelInfoPreview(); previewSelect.resetModelInfoPreview();
this.element.style.display = "none"; this.element.style.display = "none";
} }
e.target.disabled = false;
} }
comfyButtonAlert(e.target, updatedPreview); comfyButtonAlert(e.target, updatedPreview);
button.disabled = false;
}, },
}).element; }).element;
this.elements.setPreviewButton = setPreviewButton; this.elements.setPreviewButton = setPreviewButton;
@@ -2059,6 +2071,8 @@ class ModelInfo {
tooltip: "Delete model FOREVER", tooltip: "Delete model FOREVER",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: async(e) => { action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const affirmation = "delete"; const affirmation = "delete";
const confirmation = window.prompt("Type \"" + affirmation + "\" to delete the model PERMANENTLY.\n\nThis includes all image or text files."); const confirmation = window.prompt("Type \"" + affirmation + "\" to delete the model PERMANENTLY.\n\nThis includes all image or text files.");
let deleted = false; let deleted = false;
@@ -2092,6 +2106,7 @@ class ModelInfo {
if (!deleted) { if (!deleted) {
comfyButtonAlert(e.target, false); comfyButtonAlert(e.target, false);
} }
button.disabled = false;
}, },
}).element, }).element,
$el("div.search-models", [ $el("div.search-models", [
@@ -2102,6 +2117,8 @@ class ModelInfo {
icon: "file-move-outline", icon: "file-move-outline",
tooltip: "Move file", tooltip: "Move file",
action: async(e) => { action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const confirmation = window.confirm("Move this file?"); const confirmation = window.confirm("Move this file?");
let moved = false; let moved = false;
if (confirmation) { if (confirmation) {
@@ -2143,6 +2160,7 @@ class ModelInfo {
}); });
} }
comfyButtonAlert(e.target, moved); comfyButtonAlert(e.target, moved);
button.disabled = false;
}, },
}).element, }).element,
]), ]),
@@ -2274,6 +2292,8 @@ class ModelInfo {
tooltip: "Change file name", tooltip: "Change file name",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: async(e) => { action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const container = this.elements.info; const container = this.elements.info;
const oldFile = container.dataset.path; const oldFile = container.dataset.path;
const [oldFilePath, oldFileName] = SearchPath.split(oldFile); const [oldFilePath, oldFileName] = SearchPath.split(oldFile);
@@ -2317,6 +2337,7 @@ class ModelInfo {
}); });
} }
comfyButtonAlert(e.target, renamed); comfyButtonAlert(e.target, renamed);
button.disabled = false;
}, },
}).element, }).element,
]), ]),
@@ -2549,8 +2570,11 @@ class ModelInfo {
tooltip: "Save note", tooltip: "Save note",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: async (e) => { action: async (e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const saved = await this.trySave(false); const saved = await this.trySave(false);
comfyButtonAlert(e.target, saved); comfyButtonAlert(e.target, saved);
button.disabled = false;
}, },
}).element, }).element,
]), ]),
@@ -3071,7 +3095,12 @@ class DownloadView {
icon: "magnify", icon: "magnify",
tooltip: "Search url", tooltip: "Search url",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: async() => await update(), action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
await update();
button.disabled = false;
},
}).element, }).element,
]), ]),
$el("div.download-model-infos", { $el("div.download-model-infos", {
@@ -3208,7 +3237,8 @@ class DownloadView {
const image = await downloadPreviewSelect.getImage(); const image = await downloadPreviewSelect.getImage();
formData.append("image", image === PREVIEW_NONE_URI ? "" : image); formData.append("image", image === PREVIEW_NONE_URI ? "" : image);
formData.append("overwrite", this.elements.overwrite.checked); formData.append("overwrite", this.elements.overwrite.checked);
e.target.disabled = true; const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
const [success, resultText] = await request( const [success, resultText] = await request(
"/model-manager/model/download", "/model-manager/model/download",
{ {
@@ -3236,8 +3266,8 @@ class DownloadView {
} }
this.#updateModels(); this.#updateModels();
} }
comfyButtonAlert(e.target, success, "mdi-check-bold", "mdi-close-thick"); comfyButtonAlert(e.target, success, "mdi-check-bold", "mdi-close-thick", true);
e.target.disabled = success; button.disabled = success;
}, },
}).element, }).element,
$el("div.row.tab-header-flex-block", [ $el("div.row.tab-header-flex-block", [
@@ -3407,18 +3437,33 @@ class BrowseView {
icon: "reload", icon: "reload",
tooltip: "Reload model grid", tooltip: "Reload model grid",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: async() => updateModels(), action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
updateModels();
button.disabled = false;
},
}).element, }).element,
$el("select.model-select-dropdown", { $el("select.model-select-dropdown", {
$: (el) => (this.elements.modelTypeSelect = el), $: (el) => (this.elements.modelTypeSelect = el),
name: "model-type", name: "model-type",
onchange: () => updateModelGrid(), onchange: (e) => {
const select = e.target;
select.disabled = true;
updateModelGrid();
select.disabled = false;
},
}), }),
$el("select.model-select-dropdown", $el("select.model-select-dropdown",
{ {
$: (el) => (this.elements.modelSortSelect = el), $: (el) => (this.elements.modelSortSelect = el),
name: "model select dropdown", name: "model select dropdown",
onchange: () => updateModelGrid(), onchange: (e) => {
const select = e.target;
select.disabled = true;
updateModelGrid();
select.disabled = false;
},
}, },
[ [
$el("option", { value: MODEL_SORT_DATE_CREATED }, ["Created (newest first)"]), $el("option", { value: MODEL_SORT_DATE_CREATED }, ["Created (newest first)"]),
@@ -3441,7 +3486,12 @@ class BrowseView {
icon: "magnify", icon: "magnify",
tooltip: "Search models", tooltip: "Search models",
classList: "comfyui-button icon-button", classList: "comfyui-button icon-button",
action: () => updateModelGrid(), action: (e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
updateModelGrid();
button.disabled = false;
},
}).element, }).element,
]), ]),
]), ]),
@@ -3581,14 +3631,24 @@ class SettingsView {
const reloadButton = new ComfyButton({ const reloadButton = new ComfyButton({
content: "Reload", content: "Reload",
tooltip: "Reload settings and model manager files", tooltip: "Reload settings and model manager files",
action: async() => await this.reload(true), action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
await this.reload(true);
button.disabled = false;
},
}).element; }).element;
this.elements.reloadButton = reloadButton; this.elements.reloadButton = reloadButton;
const saveButton = new ComfyButton({ const saveButton = new ComfyButton({
content: "Save", content: "Save",
tooltip: "Save settings and reload model manager", tooltip: "Save settings and reload model manager",
action: async() => await this.save(), action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
await this.save();
button.disabled = false;
},
}).element; }).element;
this.elements.saveButton = saveButton; this.elements.saveButton = saveButton;