Option to overwrite downloads.

- Added overwrite to GUI.
- Factored out wrapper for creation $checkbox.

web/model-manager.css

@@ -420,11 +420,13 @@
 }
 
 /* model manager settings */
-.model-manager .model-manager-settings > div {
+.model-manager .model-manager-settings > div,
+.model-manager .model-manager-settings > label {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 8px;
+    margin: 16px 0;
 }
 
 .model-manager .model-manager-settings button {

web/model-manager.js

@@ -869,6 +869,25 @@ function $tab(name, el) {
     return $el("div", { dataset: { name } }, el);
 }
 
+/**
+ * @returns {HTMLLabelElement}
+ */
+function $checkbox(x = { $: (el) => {}, textContent: "", checked: false }) {
+    const text = x.textContent;
+    const input = $el("input", {
+        type: "checkbox", 
+        checked: x.checked ?? false, 
+    });
+    const label = $el("label", [
+        input, 
+        text === "" || text === undefined || text === null ? "" : " " + text,
+    ]);
+    if (x.$ !== undefined){
+        x.$(input);
+    }
+    return label;
+}
+
 class ModelGrid {
     /**
      * @param {Array} list
@@ -1279,6 +1298,7 @@ class ModelManager extends ComfyDialog {
         /** @type {HTMLDivElement} */ modelInfoView: null,
         /** @type {HTMLDivElement} */ modelInfoContainer: null,
         /** @type {HTMLDivElement} */ modelInfoUrl: null,
+        /** @type {HTMLDivElement} */ modelInfoOverwrite: null,
         /** @type {HTMLDivElement} */ modelInfos: null,
 
         /** @type {HTMLDivElement} */ modelGrid: null,
@@ -1666,15 +1686,16 @@ class ModelManager extends ComfyDialog {
         const el = this.#el.settings;
         for (const [key, value] of Object.entries(settings)) {
             const setting = el[key];
-            if (setting) {
+            if (setting === undefined || setting === null) {
-                const type = setting.type;
+                continue;
-                switch (type) {
+            }
-                    case "checkbox": setting.checked = Boolean(value); break;
+            const type = setting.type;
-                    case "range": setting.value = parseFloat(value); break;
+            switch (type) {
-                    case "textarea": setting.value = value; break;
+                case "checkbox": setting.checked = Boolean(value); break;
-                    case "number": setting.value = parseInt(value); break;
+                case "range": setting.value = parseFloat(value); break;
-                    default: console.warn("Unknown settings input type!");
+                case "textarea": setting.value = value; break;
-                }
+                case "number": setting.value = parseInt(value); break;
+                default: console.warn("Unknown settings input type!");
             }
         }
 
@@ -1783,49 +1804,31 @@ class ModelManager extends ComfyDialog {
                     }),
                 ]),
             ]),
-            $el("div", [
+            $checkbox({
-                $el("input", {
+                $: (el) => (this.#el.settings["model-persistent-search"] = el),
-                    $: (el) => (this.#el.settings["model-persistent-search"] = el),
+                textContent: "Persistent search text across model types",
-                    type: "checkbox",
+            }),
-                }),
+            $checkbox({
-                $el("p", ["Persistent search text across model types"]),
+                $: (el) => (this.#el.settings["model-show-label-extensions"] = el),
-            ]),
+                textContent: "Show model file extension in labels",
-            $el("div", [
+            }),
-                $el("input", {
+            $checkbox({
-                    $: (el) => (this.#el.settings["model-show-label-extensions"] = el),
+                $: (el) => (this.#el.settings["model-show-add-button"] = el),
-                    type: "checkbox",
+                textContent: "Show add button",
-                }),
+            }),
-                $el("p", ["Show model file extension in labels"]),
+            $checkbox({
-            ]),
+                $: (el) => (this.#el.settings["model-show-copy-button"] = el),
-            $el("div", [
+                textContent: "Show copy button",
-                $el("input", {
+            }),
-                    $: (el) => (this.#el.settings["model-show-add-button"] = el),
-                    type: "checkbox",
-                }),
-                $el("p", ["Show add button"]),
-            ]),
-            $el("div", [
-                $el("input", {
-                    $: (el) => (this.#el.settings["model-show-copy-button"] = el),
-                    type: "checkbox",
-                }),
-                $el("p", ["Show copy button"]),
-            ]),
             $el("h2", ["Model Add"]),
-            $el("div", [
+            $checkbox({
-                $el("input", {
+                $: (el) => (this.#el.settings["model-add-embedding-extension"] = el),
-                    $: (el) => (this.#el.settings["model-add-embedding-extension"] = el),
+                textContent: "Add extension to embedding",
-                    type: "checkbox",
+            }),
-                }),
+            $checkbox({
-                $el("p", ["Add extension to embedding"]),
+                $: (el) => (this.#el.settings["model-add-drag-strict-on-field"] = el),
-            ]),
+                textContent: "Strict dragging model onto a node's model field to add",
-            $el("div", [
+            }),
-                $el("input", {
-                    $: (el) => (this.#el.settings["model-add-drag-strict-on-field"] = el),
-                    type: "checkbox",
-                }),
-                $el("p", ["Strict dragging model onto a node's model field to add"]),
-            ]),
             $el("div", [
                 $el("input", {
                     $: (el) => (this.#el.settings["model-add-offset"] = el),
@@ -2101,7 +2104,7 @@ class ModelManager extends ComfyDialog {
                                         }
                                         return "";
                                     })();
-                                    record["overwrite"] = false; // TODO: add to UI
+                                    record["overwrite"] = this.#el.modelInfoOverwrite.checked;
                                     e.target.disabled = true;
                                     let success = true;
                                     let resultText = "✔";
@@ -2283,8 +2286,15 @@ class ModelManager extends ComfyDialog {
         if (modelInfos.length === 0) {
             modelInfosHtml.push($el("div", ["No results found."]));
         }
-        else if (modelInfos.length === 1) {
+        else {
-            modelInfosHtml[0].open = true;
+            if (modelInfos.length === 1) {
+                modelInfosHtml[0].open = true;
+            }
+            const label = $checkbox({
+                $: (el) => { this.#el.modelInfoOverwrite = el; },
+                textContent: "Overwrite Existing Files",
+            });
+            modelInfosHtml.unshift(label);
         }
         infosHtml.append.apply(infosHtml, modelInfosHtml);
     }