From fe67e6981ab26f5b63535e0701006a1b0ba1ddf3 Mon Sep 17 00:00:00 2001 From: Christian Bastian Date: Tue, 27 Feb 2024 04:27:10 -0500 Subject: [PATCH] Add names to html elements. - Updated README. --- README.md | 21 ++++++++------------- __init__.py | 2 -- web/model-manager.js | 42 +++++++++++++++++++++++++++++++----------- 3 files changed, 39 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 8fe4679..5785ffc 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,7 @@ Download, browse and delete models in ComfyUI. Model Manager Demo Screenshot -## About this fork - -I made this fork because the original repo was inactive and missing many things I needed to make ComfyUI more usable. Also, many other custom nodes bundle unrelated features together or search the internet in the background. - -## Fork Improvements +## Features ### Download Tab @@ -53,8 +49,14 @@ I made this fork because the original repo was inactive and missing many things - Show/Hide add embedding extension. - Colors follow ComfyUI's current theme. +
+ + + ## TODO + + ### Download Model - Checkbox to optionally save description in `.txt` file for Civitai. (what about "About Model"?) @@ -101,11 +103,4 @@ I made this fork because the original repo was inactive and missing many things - Favorites - Swap between `and` and `or` keyword search? (currently `and`) -### Code - -- Javascript cleanup. - - Stop abusing popup/modal. - - Better abstraction and objectification. (After codebase settles down) - - Separate into classes per tab? - - HTML generation all inside main class? - - More server driven, HTMX-like HTML generation? (Avoid x2 states) +
diff --git a/__init__.py b/__init__.py index bbca1d9..a4804c2 100644 --- a/__init__.py +++ b/__init__.py @@ -105,8 +105,6 @@ def search_path_to_system_path(model_path): ) return (system_path, model_path_type) - -print() def get_safetensor_header(path): diff --git a/web/model-manager.js b/web/model-manager.js index 753a589..a5b2535 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -212,6 +212,7 @@ function $checkbox(x = { $: (el) => {}, textContent: "", checked: false }) { const text = x.textContent; const input = $el("input", { type: "checkbox", + name: text ?? "checkbox", checked: x.checked ?? false, }); const label = $el("label", [ @@ -234,7 +235,7 @@ function $radioGroup(attr) { /** @type {HTMLDivElement[]} */ const radioGroup = options.map((item, index) => { const inputRef = { value: null }; - + return $el( "div.comfy-radio", { onclick: () => inputRef.value.click() }, @@ -251,7 +252,10 @@ function $radioGroup(attr) { ); }); - const element = $el("input", { value: options[0]?.value }); + const element = $el("input", { + name: name + "-group", + value: options[0]?.value, + }); $?.(element); radioGroup.forEach((radio) => { @@ -457,6 +461,7 @@ class ImageSelect { const el_uploadFile = $el("input", { $: (el) => (this.elements.uploadFile = el), type: "file", + name: "upload preview image", accept: IMAGE_EXTENSIONS.join(", "), onchange: (e) => { const file = e.target.files[0]; @@ -486,6 +491,7 @@ class ImageSelect { const el_customUrl = $el("input.search-text-area", { $: (el) => (this.elements.customUrl = el), type: "text", + name: "custom preview image url", placeholder: "https://custom-image-preview.png", }); const el_custom = $el("div.row.tab-header-flex-block", { @@ -566,14 +572,14 @@ class ImageSelect { break; } }, - options: (() => { - const radios = []; - radios.push({ value: this.#PREVIEW_DEFAULT }); - radios.push({ value: this.#PREVIEW_UPLOAD }) - radios.push({ value: this.#PREVIEW_URL }); - radios.push({ value: this.#PREVIEW_NONE }); - return radios; - })(), + options: [ + this.#PREVIEW_DEFAULT, + this.#PREVIEW_URL, + this.#PREVIEW_UPLOAD, + this.#PREVIEW_NONE, + ].map((value) => { + return { value: value, }; + }), }); this.elements.radioButtons = el_radioButtons; @@ -1378,6 +1384,7 @@ class ModelInfoView { */ constructor(modelDirectories, updateModels, searchSeparator) { const moveDestinationInput = $el("input.search-text-area", { + name: "move directory", placeholder: searchSeparator, }); @@ -1710,6 +1717,7 @@ class ModelInfoView { if (key === "Notes") { elements.push($el("h2", [key + ":"])); const noteArea = $el("textarea.comfy-multiline-input", { + name: "model notes", value: value, rows: 10, }); @@ -2084,7 +2092,9 @@ class DownloadTab { info["images"], ); - const el_modelTypeSelect = $el("select.model-select-dropdown", (() => { + const el_modelTypeSelect = $el("select.model-select-dropdown", { + name: "model select dropdown", + }, (() => { const options = [$el("option", { value: "" }, ["-- Model Type --"])]; modelTypes.forEach((modelType) => { options.push($el("option", { value: modelType }, [modelType])); @@ -2094,6 +2104,7 @@ class DownloadTab { const el_saveDirectoryPath = $el("input.search-text-area", { type: "text", + name: "save directory", placeholder: searchSeparator + "0", value: searchSeparator + "0", }); @@ -2117,6 +2128,7 @@ class DownloadTab { const el_filename = $el("input.plain-text-area", { type: "text", + name: "model save file name", placeholder: (() => { const filename = info["fileName"]; // TODO: only remove valid model file extensions @@ -2347,6 +2359,7 @@ class DownloadTab { $el("input.search-text-area", { $: (el) => (this.elements.url = el), type: "text", + name: "model download url", placeholder: "example: https://civitai.com/models/207992/stable-video-diffusion-svd", onkeydown: (e) => { if (e.key === "Enter") { @@ -2397,6 +2410,8 @@ class ModelTab { const searchInput = $el("input.search-text-area", { $: (el) => (this.elements.modelContentFilter = el), + type: "text", + name: "model search", placeholder: "example: /0/1.5/styles/clothing -.pt", }); @@ -2426,6 +2441,7 @@ class ModelTab { $el("select.model-select-dropdown", { $: (el) => (this.elements.modelSortSelect = el), + name: "model select dropdown", onchange: () => updateModelGrid(), }, [ @@ -2580,6 +2596,7 @@ class SettingsTab { $el("input", { $: (el) => (settings["sidebar-default-width"] = el), type: "number", + name: "default sidebar width", value: 0.5, min: 0.0, max: 1.0, @@ -2591,6 +2608,7 @@ class SettingsTab { $el("input", { $: (el) => (settings["sidebar-default-height"] = el), type: "number", + name: "default sidebar height", textContent: "Default sidebar height", value: 0.5, min: 0.0, @@ -2605,6 +2623,7 @@ class SettingsTab { $el("p", ["Always include in model search:"]), $el("textarea.comfy-multiline-input", { $: (el) => (settings["model-search-always-append"] = el), + name: "always include in model search", placeholder: "example: -nsfw", }), ]), @@ -2638,6 +2657,7 @@ class SettingsTab { $el("input", { $: (el) => (settings["model-add-offset"] = el), type: "number", + name: "model add offset", step: 5, }), $el("p", ["Add model offset"]),