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

Improved models dirs, search & ui.

Browse Source
This commit is contained in:
Christian Bastian
2023-12-30 21:03:49 -05:00
parent e7e14764b4
commit c2c46515a2
6 changed files with 610 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/model-manager.css
View File

@@ -1,8 +1,9 @@
/* comfy table */
.comfy-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
}
.comfy-table .table-head tr {
@@ -11,36 +12,36 @@
/* comfy tabs */
.comfy-tabs {
color: #fff;
color: var(--fg-color);
}
.comfy-tabs-head {
display: flex;
gap: 8px;
flex-wrap: wrap;
border-bottom: 1px solid #6a6a6a;
border-bottom: 2px solid var(--border-color);
}
.comfy-tabs-head .head-item {
padding: 8px 12px;
border: 1px solid #6a6a6a;
border: 2px solid var(--border-color);
border-bottom: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
cursor: pointer;
margin-bottom: -1px;
margin-bottom: 0px;
}
.comfy-tabs-head .head-item.active {
background-color: #2e2e2e;
background-color: var(--comfy-input-bg);
cursor: default;
position: relative;
z-index: 1;
}
.comfy-tabs-body {
background-color: #2e2e2e;
border: 1px solid #6a6a6a;
background-color: var(--comfy-input-bg);
border: 2px solid var(--border-color);
border-top: none;
padding: 16px 0px;
}
@@ -58,21 +59,42 @@
height: 345px;
text-align: center;
overflow: hidden;
border-radius: 8px;
}
.comfy-grid .item img {
width: 100%;
height: 100%;
object-fit: contain;
object-fit: cover;
}
.comfy-grid .item p {
position: absolute;
bottom: 0px;
background-color: #000a;
width: 100%;
margin: 0;
padding: 9px 0px;
.comfy-grid .item div {
background-color: #000a;
width: 100%;
height: 2.2rem;
position: absolute;
bottom: 0;
text-align: center;
line-height: 2.2rem;
}
.comfy-grid .item div > p {
width: calc(100% - 2rem);
overflow-x: scroll;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
margin: 0;
}
.comfy-grid .item div {
scrollbar-width: none;
-ms-overflow-style: none;
}
.comfy-grid .item div ::-webkit-scrollbar {
width: 0;
height: 0;
}
/* comfy radio group */
@@ -87,12 +109,26 @@
gap: 4px;
padding: 4px 8px;
color: var(--input-text);
border: 1px solid var(--border-color);
border: 2px solid var(--comfy-input-bg);
border-radius: 8px;
background-color: var(--comfy-input-bg);
font-size: 18px;
}
.comfy-radio:has(> input[type="radio"]:checked) {
border-color: var(--border-color);
background-color: var(--comfy-menu-bg);
}
.comfy-radio input[type="radio"]:checked + label {
color: var(--fg-color);
}
.radio-input {
opacity: 0;
position: absolute;
}
/* model manager */
.model-manager {
box-sizing: border-box;
@@ -101,7 +137,7 @@
max-width: unset;
max-height: unset;
padding: 10px;
color: #fff;
color: var(--bg-color);
z-index: 2000;
}
@@ -116,12 +152,13 @@
.model-manager input {
padding: 4px 8px;
margin: 0;
border: 2px solid var(--border-color);
}
.model-manager button:disabled,
.model-manager select:disabled,
.model-manager input:disabled {
background-color: #6a6a6a;
background-color: var(--comfy-menu-bg);
filter: brightness(1.2);
cursor: not-allowed;
}
@@ -136,7 +173,7 @@
}
.model-manager ::-webkit-scrollbar {
width: 6px;
width: 16px;
}
.model-manager ::-webkit-scrollbar-track {
@@ -150,6 +187,23 @@
border-radius: 3px;
}
.model-manager .search-text-area::-webkit-input-placeholder {
font-style: italic;
}
.model-manager .search-text-area:-moz-placeholder {
font-style: italic;
}
.model-manager .search-text-area::-moz-placeholder {
font-style: italic;
}
.model-manager .search-text-area:-ms-input-placeholder {
font-style: italic;
}
.icon-button {
aspect-ratio: 1;
}
/* model manager row */
.model-manager .row {
display: flex;
@@ -173,7 +227,7 @@
position: relative;
max-height: 100%;
padding: 0 16px;
overflow-x: hidden;
overflow-x: auto;
}
/* model manager special */
@@ -189,18 +243,33 @@
padding-top: 2px;
margin-top: -2px;
padding-bottom: 18px;
margin-bottom: -2px;
top: 0px;
background-color: #2e2e2e;
margin-bottom: 1px;
top: -1px;
background-color: var(--comfy-input-bg);
z-index: 1;
}
.model-manager [data-name="Install"] input {
flex-grow: 1;
overflow-x: clip;
}
.model-manager .table-head {
position: sticky;
top: 52px;
position: sticky;
top: 116px;
z-index: 1;
}
.model-manager div[data-name="Model List"] .row {
align-items: flex-start;
.model-manager .tab-header {
display: block;
}
.model-manager .tab-header-flex-block {
width: 100%;
}
.model-manager .search-text-area,
.model-manager .source-text-area,
.model-manager .model-type-dropdown {
flex: 1;
}

304
web/model-manager.js
View File

@@ -185,10 +185,12 @@ class Grid {
this.element,
this.#dataSource.map((item) => {
const uri = item.post ?? "no-post";
const imgUrl = `/model-manager/imgPreview?uri=${uri}`;
const imgUrl = `/model-manager/image-preview?uri=${uri}`;
return $el("div.item", {}, [
$el("img", { src: imgUrl }),
$el("p", [item.name]),
$el("div", {}, [
$el("p", [item.name])
]),
]);
})
);
@@ -247,16 +249,16 @@ class ModelManager extends ComfyDialog {
#el = {
loadSourceBtn: null,
loadSourceFromSelect: null,
loadSourceFromInput: null,
sourceInstalledFilter: null,
sourceContentFilter: null,
sourceFilterBtn: null,
modelTypeSelect: null,
modelContentFilter: null,
};
#data = {
sourceList: [],
sources: [],
models: {},
};
@@ -270,14 +272,14 @@ class ModelManager extends ComfyDialog {
{ parent: document.body },
[
$el("div.comfy-modal-content", [
$el("button.close", {
textContent: "X",
$el("button.close.icon-button", {
textContent: "✕",
onclick: () => this.close(),
}),
$tabs([
$tab("Source Install", this.#createSourceInstall()),
$tab("Customer Install", []),
$tab("Model List", this.#createModelList()),
$tab("Install", this.#createSourceInstall()),
$tab("Models", this.#createModelList()),
$tab("Settings", []),
]),
]),
]
@@ -295,58 +297,44 @@ class ModelManager extends ComfyDialog {
this.#createSourceList();
return [
$el("div.row", [
$el("button", {
type: "button",
textContent: "Load From",
$: (el) => (this.#el.loadSourceBtn = el),
onclick: () => this.#refreshSourceList(),
}),
$el(
"select",
{
$: (el) => (this.#el.loadSourceFromSelect = el),
onchange: (e) => {
const val = e.target.val;
this.#el.loadSourceFromInput.disabled =
val === "Local Source";
$el("div.row.tab-header", [
$el("div.row.tab-header-flex-block", [
$el("button.icon-button", {
type: "button",
textContent: "⟳",
$: (el) => (this.#el.loadSourceBtn = el),
onclick: () => this.#refreshSourceList(),
}),
$el("input.source-text-area", {
$: (el) => (this.#el.loadSourceFromInput = el),
placeholder: "https://ComfyUI-Model-Manager/index.json",
}),
]),
$el("div.row.tab-header-flex-block", [
$el("input.search-text-area", {
$: (el) => (this.#el.sourceContentFilter = el),
placeholder: "example: \"sd_xl\" -vae",
onkeyup: (e) => e.key === "Enter" && this.#filterSourceList(),
}),
$el(
"select",
{
$: (el) => (this.#el.sourceInstalledFilter = el),
style: { width: 0 },
onchange: () => this.#filterSourceList(),
},
},
[
$el("option", ["Local Source"]),
$el("option", ["Web Source"]),
]
),
$el("input", {
$: (el) => (this.#el.loadSourceFromInput = el),
value: "https://github.com/hayden-fr/ComfyUI-Model-Manager/blob/main/index.json",
style: { flex: 1 },
disabled: true,
}),
$el("div", { style: { width: "50px" } }),
$el(
"select",
{
$: (el) => (this.#el.sourceInstalledFilter = el),
onchange: () => this.#filterSourceList(),
},
[
$el("option", ["Filter: All"]),
$el("option", ["Installed"]),
$el("option", ["Non-Installed"]),
]
),
$el("input", {
$: (el) => (this.#el.sourceContentFilter = el),
placeholder: "Input search keyword",
onkeyup: (e) =>
e.code === "Enter" && this.#filterSourceList(),
}),
$el("button", {
type: "button",
textContent: "Search",
onclick: () => this.#filterSourceList(),
}),
[
$el("option", ["Filter: All"]),
$el("option", ["Downloaded"]),
$el("option", ["Not Downloaded"]),
]
),
$el("button.icon-button", {
type: "button",
textContent: "🔍︎",
onclick: () => this.#filterSourceList(),
}),
]),
]),
this.#sourceList.element,
];
@@ -387,7 +375,7 @@ class ModelManager extends ComfyDialog {
return $el("button.block", {
type: "button",
disabled: installed,
textContent: installed ? "Installed" : "Install",
textContent: installed ? "✓︎" : "📥︎",
onclick: async (e) => {
e.disabled = true;
const response = await this.#request(
@@ -397,7 +385,6 @@ class ModelManager extends ComfyDialog {
body: JSON.stringify(record),
}
);
console.log(response);
e.disabled = false;
},
});
@@ -410,40 +397,58 @@ class ModelManager extends ComfyDialog {
async #refreshSourceList() {
this.#el.loadSourceBtn.disabled = true;
this.#el.loadSourceFromSelect.disabled = true;
const sourceType = this.#el.loadSourceFromSelect.value;
const webSource = this.#el.loadSourceFromInput.value;
const uri = sourceType === "Local Source" ? "local" : webSource;
const source = this.#el.loadSourceFromInput.value;
const uri = (source === "https://ComfyUI-Model-Manager/index.json") || (source === "") ? "local" : source;
const dataSource = await this.#request(
`/model-manager/source?uri=${uri}`
).catch(() => []);
this.#data.sourceList = dataSource;
this.#data.sources = dataSource;
this.#sourceList.setData(dataSource);
this.#el.sourceInstalledFilter.value = "Filter: All";
this.#el.sourceContentFilter.value = "";
this.#el.loadSourceBtn.disabled = false;
this.#el.loadSourceFromSelect.disabled = false;
}
#filterSourceList() {
const installedType = this.#el.sourceInstalledFilter.value;
/** @type {Array<string>} */
const content = this.#el.sourceContentFilter.value
.split(" ")
.map((item) => item.toLowerCase())
.filter(Boolean);
#filterSourceList() {
/** @type {Array<string>} */
const content = this.#el.sourceContentFilter.value
.replace("*", " ")
.split(/(-?".*?"|[^\s"]+)+/g)
.map((item) => item
.trim()
.replace(/(?:'|")+/g, "")
.toLowerCase() // TODO: Quotes should be exact?
)
.filter(Boolean);
const newDataSource = this.#data.sourceList.filter((row) => {
const filterField = ["type", "name", "base", "description"];
const rowContent = filterField
.reduce((memo, field) => memo + " " + row[field], "")
.toLowerCase();
return content.reduce((memo, target) => {
return memo && rowContent.includes(target);
}, true);
});
const installedType = this.#el.sourceInstalledFilter.value;
const newDataSource = this.#data.sources.filter((row) => {
if (installedType !== "Filter: All") {
if ((installedType === "Downloaded" && !row["installed"]) ||
(installedType === "Not Downloaded" && row["installed"])) {
return false;
}
}
let filterField = ["type", "name", "base", "description"];
const rowText = filterField
.reduce((memo, field) => memo + " " + row[field], "")
.toLowerCase();
return content.reduce((memo, target) => {
const excludeTarget = target[0] === "-";
if (excludeTarget && target.length === 1) { return memo; }
const filteredTarget = excludeTarget ? target.slice(1) : target;
const regexSHA256 = /^[a-f0-9]{64}$/gi;
if (row["SHA256"] !== undefined && regexSHA256.test(filteredTarget)) {
return memo && excludeTarget !== (filteredTarget === row["SHA256"]);
}
else {
return memo && excludeTarget !== rowText.includes(filteredTarget);
}
}, true);
});
this.#sourceList.setData(newDataSource);
}
@@ -456,34 +461,51 @@ class ModelManager extends ComfyDialog {
this.#modelList = gridInstance;
return [
$el("div.row", [
$radioGroup({
$: (el) => (this.#el.modelTypeSelect = el),
name: "model-type",
onchange: () => this.#updateModelList(),
options: [
{ value: "checkpoints" },
{ value: "clip" },
{ value: "clip_vision" },
{ value: "controlnet" },
{ value: "diffusers" },
{ value: "embeddings" },
{ value: "gligen" },
{ value: "hypernetworks" },
{ value: "loras" },
{ value: "style_models" },
{ value: "unet" },
{ value: "upscale_models" },
{ value: "vae" },
{ value: "vae_approx" },
],
}),
$el("button", {
type: "button",
textContent: "Refresh",
style: { marginLeft: "auto" },
onclick: () => this.#refreshModelList(),
}),
$el("div.row.tab-header", [
$el("div.row.tab-header-flex-block",
[
$el("button.icon-button", {
type: "button",
textContent: "⟳",
onclick: () => this.#refreshModelList(),
}),
$el("select.model-type-dropdown",
{
$: (el) => (this.#el.modelTypeSelect = el),
name: "model-type",
onchange: () => this.#filterModelList(),
},
[
$el("option", ["checkpoints"]),
$el("option", ["clip"]),
$el("option", ["clip_vision"]),
$el("option", ["controlnet"]),
$el("option", ["diffusers"]),
$el("option", ["embeddings"]),
$el("option", ["gligen"]),
$el("option", ["hypernetworks"]),
$el("option", ["loras"]),
$el("option", ["style_models"]),
$el("option", ["unet"]),
$el("option", ["upscale_models"]),
$el("option", ["vae"]),
$el("option", ["vae_approx"]),
]
),
]
),
$el("div.row.tab-header-flex-block", [
$el("input.search-text-area", {
$: (el) => (this.#el.modelContentFilter = el),
placeholder: "example: 1.5/styles -.pt",
onkeyup: (e) => e.key === "Enter" && this.#filterModelList(),
}),
$el("button.icon-button", {
type: "button",
textContent: "🔍︎",
onclick: () => this.#filterModelList(),
}),
]),
]),
gridInstance.element,
];
@@ -492,13 +514,42 @@ class ModelManager extends ComfyDialog {
async #refreshModelList() {
const dataSource = await this.#request("/model-manager/models");
this.#data.models = dataSource;
this.#updateModelList();
this.#filterModelList();
}
#updateModelList() {
const type = this.#el.modelTypeSelect.value;
const list = this.#data.models[type];
this.#modelList.setData(list);
#filterModelList() {
/** @type {Array<string>} */
const content = this.#el.modelContentFilter.value
.replace("*", " ")
.split(/(-?".*?"|[^\s"]+)+/g)
.map((item) => item
.trim()
.replace(/(?:'|")+/g, "")
.toLowerCase() // TODO: Quotes should be exact?
)
.filter(Boolean);
const modelType = this.#el.modelTypeSelect.value;
const newDataSource = this.#data.models[modelType].filter((modelInfo) => {
const filterField = ["name", "path"];
const modelText = filterField
.reduce((memo, field) => memo + " " + modelInfo[field], "")
.toLowerCase();
return content.reduce((memo, target) => {
const excludeTarget = target[0] === "-";
if (excludeTarget && target.length === 1) { return memo; }
const filteredTarget = excludeTarget ? target.slice(1) : target;
const regexSHA256 = /^[a-f0-9]{64}$/gi;
if (modelInfo["SHA256"] !== undefined && regexSHA256.test(filteredTarget)) {
return memo && excludeTarget !== (filteredTarget === modelInfo["SHA256"]);
}
else {
return memo && excludeTarget !== modelText.includes(filteredTarget);
}
}, true);
});
this.#modelList.setData(newDataSource);
}
}
@@ -516,7 +567,8 @@ function getInstance() {
app.registerExtension({
name: "Comfy.ModelManager",
init() {
},
async setup() {
$el("link", {
parent: document.head,
@@ -524,13 +576,13 @@ app.registerExtension({
href: "./extensions/ComfyUI-Model-Manager/model-manager.css",
});
$el("button", {
parent: document.querySelector(".comfy-menu"),
textContent: "Models",
style: { order: 1 },
onclick: () => {
getInstance().show();
},
});
app.ui.menuContainer.appendChild(
$el("button", {
id: "comfyui-model-manager-button",
parent: document.querySelector(".comfy-menu"),
textContent: "Models",
onclick: () => { getInstance().show(); },
})
);
},
});