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

Removed SourceList for old Install tab and fix for narrow screens.

Browse Source
This commit is contained in:
Christian Bastian
2024-02-13 01:06:17 -05:00
parent d6b197d9c7
commit 1fcda7bc17
2 changed files with 6 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/model-manager.css
View File

@@ -298,6 +298,7 @@
.model-manager .comfy-tabs-body > div {
position: relative;
height: 100%;
width: 90%;
padding: 0 16px;
overflow-x: auto;
}
@@ -456,8 +457,3 @@
.model-manager [data-name="Download"] summary {
padding: 16px;
}
.model-manager .download-details {
border-radius: 16px;
padding: 0px 16px 0px 16px;
}

278
web/model-manager.js
View File

@@ -857,136 +857,6 @@ function $tab(name, el) {
return $el("div", { dataset: { name } }, el);
}
class SourceList {
/**
* @typedef Column
* @prop {string} title
* @prop {string} dataIndex
* @prop {number} width
* @prop {string} align
* @prop {Function} render
*/
/** @type {Column[]} */
#columns = [];
/** @type {Record<string, any>[]} */
#dataSource = [];
/** @type {HTMLDivElement} */
#tbody = null;
/**
* @param {Column[]} columns
*/
constructor(columns) {
this.#columns = columns;
const colgroup = $el(
"colgroup",
columns.map((item) => {
return $el("col", {
style: { width: `${item.width}px` },
});
})
);
const listTitle = $el(
"tr",
columns.map((item) => {
return $el("th", [item.title ?? ""]);
})
);
this.element = $el("table.comfy-table", [
colgroup.cloneNode(true),
$el("thead.table-head", [listTitle]),
$el("tbody.table-body", { $: (el) => (this.#tbody = el) }),
]);
}
/**
* @param {Array} dataSource
*/
setData(dataSource) {
this.#dataSource = dataSource;
this.#updateList();
}
/**
* @returns {Array}
*/
getData() {
return this.#dataSource;
}
#updateList() {
this.#tbody.innerHTML = null;
this.#tbody.append.apply(
this.#tbody,
this.#dataSource.map((row, index) => {
const cells = this.#columns.map((item) => {
const dataIndex = item.dataIndex;
const cellValue = row[dataIndex] ?? "";
const content = item.render
? item.render(cellValue, row, index)
: cellValue ?? "-";
const style = { textAlign: item.align };
return $el("td", { style }, [content]);
});
return $el("tr", cells);
})
);
}
/**
* @param {Array} list
* @param {string} searchString
* @param {string} installedType
*/
filterList(list, searchString, installedType) {
/** @type {string[]} */
const keywords = searchString
.replace("*", " ")
.split(/(-?".*?"|[^\s"]+)+/g)
.map((item) => item
.trim()
.replace(/(?:'|")+/g, "")
.toLowerCase())
.filter(Boolean);
// TODO: handle /directory keywords seperately/differently
let fields = ["type", "name", "base", "description"];
const regexSHA256 = /^[a-f0-9]{64}$/gi;
const newList = list.filter((element) => {
if (installedType !== "Filter: All") {
if ((installedType === "Downloaded" && !element["installed"]) ||
(installedType === "Not Downloaded" && element["installed"])) {
return false;
}
}
const text = fields
.reduce((memo, field) => memo + " " + element[field], "")
.toLowerCase();
return keywords.reduce((memo, target) => {
const excludeTarget = target[0] === "-";
if (excludeTarget && target.length === 1) { return memo; }
const filteredTarget = excludeTarget ? target.slice(1) : target;
if (element["SHA256"] !== undefined && regexSHA256.test(filteredTarget)) {
return memo && excludeTarget !== (filteredTarget === element["SHA256"]);
}
else {
return memo && excludeTarget !== text.includes(filteredTarget);
}
}, true);
});
this.setData(newList);
}
}
class ModelGrid {
/**
* @param {Array} list
@@ -1352,11 +1222,6 @@ function $radioGroup(attr) {
class ModelManager extends ComfyDialog {
#el = {
/** @type {HTMLButtonElement} */ loadSourceBtn: null,
/** @type {HTMLInputElement} */ loadSourceFromInput: null,
/** @type {HTMLSelectElement} */ sourceInstalledFilter: null,
/** @type {HTMLInputElement} */ sourceContentFilter: null,
/** @type {HTMLDivElement} */ modelInfoUrl: null,
/** @type {HTMLDivElement} */ modelInfos: null,
@@ -1386,7 +1251,6 @@ class ModelManager extends ComfyDialog {
};
#data = {
/** @type {Array} */ sources: [],
/** @type {Object} */ models: {},
/** @type {DirectoryItem[]} */ modelDirectories: [],
/** @type {Array} */ previousModelFilters: [],
@@ -1396,9 +1260,6 @@ class ModelManager extends ComfyDialog {
/** @type {string} */
#sep = "/";
/** @type {SourceList} */
#sourceList = null;
constructor() {
super();
this.element = $el(
@@ -1440,7 +1301,6 @@ class ModelManager extends ComfyDialog {
),
$tabs([
$tab("Download", [this.#downloadTab_new()]),
//$tab("Install", this.#createSourceInstall()),
$tab("Models", this.#modelTab_new()),
$tab("Settings", [this.#settingsTab_new()]),
]),
@@ -1453,140 +1313,9 @@ class ModelManager extends ComfyDialog {
#init() {
this.#settingsTab_reload(false);
//this.#refreshSourceList();
this.#modelTab_updateModels();
}
/**
* @returns {HTMLDivElement[]}
*/
#createSourceInstall() {
this.#createSourceList();
return [
$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.plain-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",
onkeydown: (e) => e.key === "Enter" && this.#filterSourceList(),
}),
$el("select",
{
$: (el) => (this.#el.sourceInstalledFilter = el),
style: { width: 0 },
onchange: () => 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,
];
}
/**
* @returns {HTMLElement}
*/
#createSourceList() {
const sourceList = new SourceList([
{
title: "Type",
dataIndex: "type",
width: "120",
align: "center",
},
{
title: "Base",
dataIndex: "base",
width: "120",
align: "center",
},
{
title: "Name",
dataIndex: "name",
width: "280",
render: (value, record) => {
const href = record.page;
return $el("a", { target: "_blank", href }, [value]);
},
},
{
title: "Description",
dataIndex: "description",
},
{
title: "Download",
width: "150",
render: (_, record) => {
const installed = record.installed;
return $el("button.block", {
type: "button",
disabled: installed,
textContent: installed ? "✓︎" : "📥︎",
onclick: async (e) => {
e.disabled = true;
const response = await request(
"/model-manager/download",
{
method: "POST",
body: JSON.stringify(record),
}
);
e.disabled = false;
},
});
},
},
]);
this.#sourceList = sourceList;
return sourceList.element;
}
async #refreshSourceList() {
this.#el.loadSourceBtn.disabled = true;
const source = this.#el.loadSourceFromInput.value;
const uri = (source === "https://ComfyUI-Model-Manager/index.json") || (source === "") ? "local" : source;
const dataSource = await request(
`/model-manager/source?uri=${uri}`
).catch(() => []);
this.#data.sources = dataSource;
this.#sourceList.setData(dataSource);
this.#el.sourceInstalledFilter.value = "Filter: All";
this.#el.sourceContentFilter.value = "";
this.#el.loadSourceBtn.disabled = false;
}
#filterSourceList() {
this.#sourceList.filterList(
this.#data.sources,
this.#el.sourceContentFilter.value,
this.#el.sourceInstalledFilter.value
);
}
/** @type {DirectoryDropdown} */
#modelContentFilterDirectoryDropdown = null;
@@ -1718,7 +1447,6 @@ class ModelManager extends ComfyDialog {
if (reloadData) {
// Is this slow?
//this.#refreshSourceList();
this.#modelTab_updateModels();
}
}
@@ -2034,7 +1762,7 @@ class ModelManager extends ComfyDialog {
const modelInfo = $el("details.download-details", [
$el("summary", [filepath + info["fileName"]]),
$el("div", {
style: { display: "flex", gap: "16px" },
style: { display: "flex", "flex-wrap": "wrap", gap: "16px" },
}, [
$el("div.item", {
$: (el) => (els.modelPreviewContainer = el),
@@ -2042,6 +1770,10 @@ class ModelManager extends ComfyDialog {
}, [
$el("div", {
$: (el) => (els.previewImgs = el),
style: {
width: "100%",
height: "100%",
},
}, (() => {
const imgs = info["images"].map((url) => {
return $el("img", {