From 1fcda7bc1766dbe4bbf37f196e87aceaf07154ae Mon Sep 17 00:00:00 2001 From: Christian Bastian Date: Tue, 13 Feb 2024 01:06:17 -0500 Subject: [PATCH] Removed SourceList for old Install tab and fix for narrow screens. --- web/model-manager.css | 6 +- web/model-manager.js | 278 +----------------------------------------- 2 files changed, 6 insertions(+), 278 deletions(-) diff --git a/web/model-manager.css b/web/model-manager.css index f5829b7..0b7007a 100644 --- a/web/model-manager.css +++ b/web/model-manager.css @@ -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; -} \ No newline at end of file diff --git a/web/model-manager.js b/web/model-manager.js index b42261e..9da6734 100644 --- a/web/model-manager.js +++ b/web/model-manager.js @@ -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[]} */ - #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", {