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

Hide search and clear search buttons in settings.

Browse Source
This commit is contained in:
Christian Bastian
2024-07-26 01:04:51 -04:00
parent ff21d10948
commit 01e817fa28
3 changed files with 140 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -32,7 +32,9 @@ Download, browse and delete models in ComfyUI.
<img src="demo-tab-model-info-overview.png" alt="Model Manager Demo Screenshot" width="65%"/>
- View model metadata and file info.
- Read, edit and save notes in a `.txt` file beside the model. (Autosave optional.)
- Read, edit and save notes in a `.txt` file beside the model.
- `Ctrl+S` to save when note textarea is in focus.
- Optionally enable autosave.
- Change or remove a model's preview image (add a different one using a url or local upload).
- Rename, move or **permanently** remove model files.

20
__init__.py
View File

@@ -174,25 +174,33 @@ def model_type_to_dir_name(model_type):
def ui_rules():
Rule = config_loader.Rule
return [
Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
Rule("sidebar-control-always-compact", False, bool),
Rule("model-search-always-append", "", str),
Rule("model-default-browser-model-type", "checkpoints", str),
Rule("model-real-time-search", True, bool),
Rule("model-persistent-search", True, bool),
Rule("model-show-label-extensions", False, bool),
Rule("model-info-autosave-notes", False, bool),
Rule("model-preview-thumbnail-type", "AUTO", str),
Rule("model-preview-fallback-search-safetensors-thumbnail", False, bool),
Rule("model-show-label-extensions", False, bool),
Rule("model-show-add-button", True, bool),
Rule("model-show-copy-button", True, bool),
Rule("model-show-load-workflow-button", True, bool),
Rule("model-info-button-on-left", False, bool),
Rule("model-preview-thumbnail-type", "AUTO", str),
Rule("model-add-embedding-extension", False, bool),
Rule("model-add-drag-strict-on-field", False, bool),
Rule("model-add-offset", 25, int),
Rule("model-info-autosave-notes", False, bool),
Rule("download-save-description-as-text-file", True, bool),
Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
Rule("sidebar-control-always-compact", False, bool),
Rule("text-input-always-hide-search-button", False, bool),
Rule("text-input-always-hide-clear-button", False, bool),
Rule("tag-generator-sampler-method", "Frequency", str),
Rule("tag-generator-count", 10, int),
Rule("tag-generator-threshold", 2, int),

176
web/model-manager.js
View File

@@ -3206,17 +3206,22 @@ class DownloadView {
/** @type {HTMLDivElement} */ infos: null,
/** @type {HTMLInputElement} */ overwrite: null,
/** @type {HTMLInputElement} */ downloadNotes: null,
/** @type {HTMLButtonElement} */ searchButton: null,
/** @type {HTMLButtonElement} */ clearSearchButton: null,
};
/** @type {DOMParser} */
#domParser = null;
/** @type {Object.<string, HTMLElement>} */
#settings = null;
/** @type {() => Promise<void>} */
#updateModels = () => {};
/**
* @param {ModelData} modelData
* @param {any} settings
* @param {Object.<string, HTMLElement>} settings
* @param {() => Promise<void>} updateModels
*/
constructor(modelData, settings, updateModels) {
@@ -3229,6 +3234,49 @@ class DownloadView {
$el("h1", ["Input a URL to select a model to download."])
);
};
const searchButton = new ComfyButton({
icon: "magnify",
tooltip: "Search url",
classList: "comfyui-button icon-button",
action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
if (this.elements.url.value === "") {
reset();
}
else {
await update();
}
button.disabled = false;
},
}).element;
settings["model-real-time-search"].addEventListener("change", () => {
const hideSearchButton = settings["text-input-always-hide-search-button"].checked;
searchButton.style.display = hideSearchButton ? "none" : "";
});
settings["text-input-always-hide-search-button"].addEventListener("change", () => {
const hideSearchButton = settings["text-input-always-hide-search-button"].checked;
searchButton.style.display = hideSearchButton ? "none" : "";
});
this.elements.searchButton = searchButton;
const clearSearchButton = new ComfyButton({
icon: "close",
tooltip: "Clear search",
classList: "comfyui-button icon-button",
action: async(e) => {
e.stopPropagation();
this.elements.url.value = "";
reset();
},
}).element;
settings["text-input-always-hide-clear-button"].addEventListener("change", () => {
const hideClearButton = settings["text-input-always-hide-clear-button"].checked;
clearSearchButton.style.display = hideClearButton ? "none" : "";
});
this.elements.clearSearchButton = clearSearchButton;
$el("div.tab-header", {
$: (el) => (this.element = el),
}, [
@@ -3252,32 +3300,8 @@ class DownloadView {
}
},
}),
new ComfyButton({
icon: "close",
tooltip: "Clear search",
classList: "comfyui-button icon-button",
action: async(e) => {
e.stopPropagation();
this.elements.url.value = "";
reset();
},
}).element,
new ComfyButton({
icon: "magnify",
tooltip: "Search url",
classList: "comfyui-button icon-button",
action: async(e) => {
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
if (this.elements.url.value === "") {
reset();
}
else {
await update();
}
button.disabled = false;
},
}).element,
clearSearchButton,
searchButton,
]),
$el("div.download-model-infos", {
$: (el) => (this.elements.infos = el),
@@ -3540,6 +3564,12 @@ class DownloadView {
const infosHtml = this.elements.infos;
infosHtml.innerHTML = "";
infosHtml.append.apply(infosHtml, modelInfosHtml);
const hideSearchButtons = settings["text-input-always-hide-search-button"].checked;
this.elements.searchButton.style.display = hideSearchButtons ? "none" : "";
const hideClearSearchButtons = settings["text-input-always-hide-clear-button"].checked;
this.elements.clearSearchButton.style.display = hideClearSearchButtons ? "none" : "";
}
}
@@ -3553,6 +3583,7 @@ class BrowseView {
/** @type {HTMLSelectElement} */ modelSortSelect: null,
/** @type {HTMLInputElement} */ modelContentFilter: null,
/** @type {HTMLButtonElement} */ searchButton: null,
/** @type {HTMLButtonElement} */ clearSearchButton: null,
};
/** @type {Array} */
@@ -3624,8 +3655,14 @@ class BrowseView {
);
updateModelGridCallback();
const searchButtonIsVisible = this.#settingsElements["model-real-time-search"].checked ? "none" : "";
this.elements.searchButton.style.display = searchButtonIsVisible;
const hideSearchButtons = (
this.#settingsElements["model-real-time-search"].checked |
this.#settingsElements["text-input-always-hide-search-button"].checked
);
this.elements.searchButton.style.display = hideSearchButtons ? "none" : "";
const hideClearSearchButtons = this.#settingsElements["text-input-always-hide-clear-button"].checked;
this.elements.clearSearchButton.style.display = hideClearSearchButtons ? "none" : "";
}
this.updateModelGrid = updateModelGrid;
@@ -3653,15 +3690,40 @@ class BrowseView {
},
}).element;
settingsElements["model-real-time-search"].addEventListener("change", () => {
if (this.#settingsElements["model-real-time-search"].checked) {
searchButton.style.display = "none";
}
else {
searchButton.style.display = "";
}
const hideSearchButton = (
this.#settingsElements["text-input-always-hide-search-button"].checked ||
this.#settingsElements["model-real-time-search"].checked
);
searchButton.style.display = hideSearchButton ? "none" : "";
});
settingsElements["text-input-always-hide-search-button"].addEventListener("change", () => {
const hideSearchButton = (
this.#settingsElements["text-input-always-hide-search-button"].checked ||
this.#settingsElements["model-real-time-search"].checked
);
searchButton.style.display = hideSearchButton ? "none" : "";
});
this.elements.searchButton = searchButton;
const clearSearchButton = new ComfyButton({
icon: "close",
tooltip: "Clear search",
classList: "comfyui-button icon-button",
action: (e) => {
e.stopPropagation();
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
this.elements.modelContentFilter.value = "";
updateModelGrid();
button.disabled = false;
},
}).element;
settingsElements["text-input-always-hide-clear-button"].addEventListener("change", () => {
const hideClearSearchButton = this.#settingsElements["text-input-always-hide-clear-button"].checked;
clearSearchButton.style.display = hideClearSearchButton ? "none" : "";
});
this.elements.clearSearchButton = clearSearchButton;
this.element = $el("div", [
$el("div.row.tab-header", [
$el("div.row.tab-header-flex-block", [
@@ -3714,19 +3776,7 @@ class BrowseView {
searchInput,
searchDropdown.element,
]),
new ComfyButton({
icon: "close",
tooltip: "Clear search",
classList: "comfyui-button icon-button",
action: (e) => {
e.stopPropagation();
const [button, icon, span] = comfyButtonDisambiguate(e.target);
button.disabled = true;
this.elements.modelContentFilter.value = "";
updateModelGrid();
button.disabled = false;
},
}).element,
clearSearchButton,
searchButton,
]),
]),
@@ -3768,6 +3818,8 @@ class SettingsView {
//"sidebar-default-height": null,
//"sidebar-default-width": null,
/** @type {HTMLInputElement} */ "sidebar-control-always-compact": null,
/** @type {HTMLInputElement} */ "text-input-always-hide-search-button": null,
/** @type {HTMLInputElement} */ "text-input-always-hide-clear-button": null,
/** @type {HTMLInputElement} */ "tag-generator-sampler-method": null,
/** @type {HTMLInputElement} */ "tag-generator-count": null,
@@ -3782,7 +3834,7 @@ class SettingsView {
* @param {Object} settingsData
* @param {boolean} updateModels
*/
#setSettings(settingsData, updateModels) {
async #setSettings(settingsData, updateModels) {
const settings = this.elements.settings;
for (const [key, value] of Object.entries(settingsData)) {
const setting = settings[key];
@@ -3801,7 +3853,7 @@ class SettingsView {
}
if (updateModels) {
this.#updateModels(); // Is this slow?
await this.#updateModels(); // Is this slow?
}
}
@@ -3812,7 +3864,7 @@ class SettingsView {
async reload(updateModels) {
const data = await request("/model-manager/settings/load");
const settingsData = data["settings"];
this.#setSettings(settingsData, updateModels);
await this.#setSettings(settingsData, updateModels);
comfyButtonAlert(this.elements.reloadButton, true);
}
@@ -3846,7 +3898,7 @@ class SettingsView {
const success = data["success"];
if (success) {
const settingsData = data["settings"];
this.#setSettings(settingsData, true);
await this.#setSettings(settingsData, true);
}
comfyButtonAlert(this.elements.saveButton, success);
}
@@ -4016,7 +4068,6 @@ class SettingsView {
textContent: "Save notes by default.",
}),
$el("h2", ["Window"]),
sidebarControl,
/*
$el("input", {
$: (el) => (settings["sidebar-default-width"] = el),
@@ -4039,6 +4090,15 @@ class SettingsView {
step: 0.05,
}),
*/
sidebarControl,
$checkbox({
$: (el) => (settings["text-input-always-hide-search-button"] = el),
textContent: "Always hide \"Search\" buttons.",
}),
$checkbox({
$: (el) => (settings["text-input-always-hide-clear-button"] = el),
textContent: "Always hide \"Clear Search\" buttons.",
}),
$el("h2", ["Model Preview Images"]),
$el("div", [
correctPreviewsButton,
@@ -4413,6 +4473,16 @@ class ModelManager extends ComfyDialog {
async #init() {
await this.#settingsView.reload(false);
await this.#refreshModels();
const settings = this.#settingsView.elements.settings;
console.log(settings);
{
const hideSearchButtons = settings["text-input-always-hide-search-button"].checked;
const hideClearSearchButtons = settings["text-input-always-hide-clear-button"].checked;
this.#downloadView.elements.searchButton.style.display = hideSearchButtons ? "none" : "";
this.#downloadView.elements.clearSearchButton.style.display = hideClearSearchButtons ? "none" : "";
}
}
#resetManagerContentsScroll = () => {