From a94516cdb29f874f689e6ee1fcd77d719c11b601 Mon Sep 17 00:00:00 2001 From: CenFun Date: Sat, 22 Jun 2024 18:29:22 +0800 Subject: [PATCH] Model mananger UI enhancement (#808) * Model download via url * Model download support multiple selection * update Roadmap --- README.md | 6 +- js/common.js | 3 +- js/custom-nodes-manager.js | 5 +- js/model-manager.js | 185 ++++++++++++++++++++++++++++++------- 4 files changed, 158 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 8bfeebd1..aa9e3a1c 100644 --- a/README.md +++ b/README.md @@ -392,10 +392,10 @@ When you run the `scan.sh` script: - [ ] Auto migration for custom nodes with changed structures. - [ ] Version control feature for nodes. - [ ] List of currently used custom nodes. -- [ ] Download support multiple model download. -- [ ] Model download via url. +- [x] Download support multiple model download. +- [x] Model download via url. - [x] List sorting (custom nodes). -- [ ] List sorting (model). +- [x] List sorting (model). - [ ] Provides description of node. diff --git a/js/common.js b/js/common.js index 6482d00c..7a914953 100644 --- a/js/common.js +++ b/js/common.js @@ -208,5 +208,6 @@ export const icons = { search: '', extensions: '', conflicts: '', - passed: '' + passed: '', + download: '' } \ No newline at end of file diff --git a/js/custom-nodes-manager.js b/js/custom-nodes-manager.js index 2e08a92f..eccdd683 100644 --- a/js/custom-nodes-manager.js +++ b/js/custom-nodes-manager.js @@ -161,6 +161,7 @@ const pageCss = ` border-radius: 5px; padding: 10px; filter: drop-shadow(2px 5px 5px rgb(0 0 0 / 30%)); + white-space: normal; } .cn-manager-grid .cn-extensions-list { @@ -255,7 +256,7 @@ const pageCss = ` left: 0; } 100% { - left: -100px; + left: -105px; } } @@ -280,7 +281,7 @@ const pageCss = ` transparent 10px, transparent 15px ); - animation: cn-btn-loading-bg 3s linear infinite; + animation: cn-btn-loading-bg 2s linear infinite; } .cn-manager-light .cn-node-name a { diff --git a/js/model-manager.js b/js/model-manager.js index d6efd386..e7aabb2b 100644 --- a/js/model-manager.js +++ b/js/model-manager.js @@ -87,6 +87,13 @@ const pageCss = ` overflow: hidden; } +.cmm-manager-selection { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; +} + .cmm-manager-message { } @@ -126,7 +133,6 @@ const pageCss = ` position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); - } .cmm-manager .cmm-btn-enable { @@ -144,12 +150,31 @@ const pageCss = ` color: white; } +.cmm-btn-download { + width: 18px; + height: 18px; + position: absolute; + left: calc(50% - 10px); + top: calc(50% - 10px); + cursor: pointer; + opacity: 0.8; + color: #fff; +} + +.cmm-btn-download:hover { + opacity: 1; +} + +.cmm-manager-light .cmm-btn-download { + color: #000; +} + @keyframes cmm-btn-loading-bg { 0% { left: 0; } 100% { - left: -100px; + left: -105px; } } @@ -174,7 +199,7 @@ const pageCss = ` transparent 10px, transparent 15px ); - animation: cmm-btn-loading-bg 3s linear infinite; + animation: cmm-btn-loading-bg 2s linear infinite; } .cmm-manager-light .cmm-node-name a { @@ -207,6 +232,7 @@ const pageHtml = `
+
@@ -329,6 +355,16 @@ export class ModelManager { focus: (e) => e.target.select() }, + ".cmm-manager-selection": { + click: (e) => { + const target = e.target; + const mode = target.getAttribute("mode"); + if (mode === "install") { + this.installModels(this.selectedModels, target); + } + } + }, + ".cmm-manager-close": { click: (e) => this.close() }, @@ -358,6 +394,10 @@ export class ModelManager { this.showStatus(`${grid.viewRows.length.toLocaleString()} external models`); + }); + + grid.bind('onSelectChanged', (e, changes) => { + this.renderSelected(); }); grid.bind('onClick', (e, d) => { @@ -365,7 +405,7 @@ export class ModelManager { const target = d.e.target; const mode = target.getAttribute("mode"); if (mode === "install") { - this.installModel(rowItem, target); + this.installModels([rowItem], target); } }); @@ -373,6 +413,10 @@ export class ModelManager { grid.setOption({ theme: 'dark', + selectVisible: true, + selectMultiple: true, + selectAllVisible: true, + textSelectable: true, scrollbarRound: true, @@ -450,7 +494,7 @@ export class ModelManager { } }, { id: 'installed', - name: 'Download', + name: 'Install', width: 130, minWidth: 110, maxWidth: 200, @@ -465,6 +509,15 @@ export class ModelManager { } return ``; } + }, { + id: 'url', + name: '', + width: 50, + sortable: false, + align: 'center', + formatter: (url, rowItem, columnItem) => { + return `${icons.download}`; + } }, { id: 'type', name: 'Type', @@ -478,14 +531,14 @@ export class ModelManager { width: 400, maxWidth: 5000, classMap: 'cmm-node-desc' - }, { - id: 'filename', - name: 'Filename', - width: 200 }, { id: "save_path", name: 'Save Path', width: 200 + }, { + id: 'filename', + name: 'Filename', + width: 200 }]; this.grid.setData({ @@ -506,36 +559,88 @@ export class ModelManager { // =========================================================================================== - async installModel(item, btn) { - - this.showLoading(); - this.showError(""); - - this.showStatus(`Install ${item.name} ...`); - btn.classList.add("cmm-btn-loading"); - - const data = item.originalData; - const res = await fetchData('/model/install', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(data) - }); - - - if (res.error) { - const errorMsg = `Install failed: ${item.name} ${res.error.message}`; - this.showError(errorMsg); - this.hideLoading(); + renderSelected() { + const selectedList = this.grid.getSelectedRows(); + if (!selectedList.length) { + this.showSelection(""); + this.selectedModels = []; return; } - item.refresh = true; - this.grid.updateCell(item, "installed"); + this.selectedModels = selectedList; + this.showSelection(`Selected ${selectedList.length} models `); + } + + focusInstall(item) { + const cellNode = this.grid.getCellNode(item, "installed"); + if (cellNode) { + const cellBtn = cellNode.querySelector(`button[mode="install"]`); + if (cellBtn) { + cellBtn.classList.add("cmm-btn-loading"); + return true + } + } + } + + async installModels(list, btn) { + + btn.classList.add("cmm-btn-loading"); + this.showLoading(); + this.showError(""); + + let needRestart = false; + let errorMsg = ""; + + for (const item of list) { + + this.grid.scrollRowIntoView(item); + + if (!this.focusInstall(item)) { + this.grid.onNextUpdated(() => { + this.focusInstall(item); + }); + } + + this.showStatus(`Install ${item.name} ...`); + + const data = item.originalData; + const res = await fetchData('/model/install', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(data) + }); + + + if (res.error) { + errorMsg = `Install failed: ${item.name} ${res.error.message}`; + break;; + } + + needRestart = true; + + this.grid.setRowSelected(item, false); + + item.refresh = true; + item.selectable = false; + this.grid.updateCell(item, "installed"); + this.grid.updateCell(item, "tg-column-select"); + + this.showStatus(`Install ${item.name} successfully`); + + } this.hideLoading(); + btn.classList.remove("cmm-btn-loading"); - this.showStatus(`Install ${item.name} successfully`); - this.showMessage(`To apply the installed model, please click the 'Refresh' button on the main menu.`, "red") + if (errorMsg) { + this.showError(errorMsg); + } else { + this.showStatus(`Install ${list.length} models successfully`); + } + + if (needRestart) { + this.showMessage(`To apply the installed model, please click the 'Refresh' button on the main menu.`, "red") + } } @@ -545,11 +650,15 @@ export class ModelManager { const baseMap = new Map(); models.forEach((item, i) => { - const { type, base, name, reference } = item; + const { type, base, name, reference, installed } = item; item.originalData = JSON.parse(JSON.stringify(item)); item.hash = md5(name + reference); item.id = i + 1; + if (installed === "True") { + item.selectable = false; + } + typeMap.set(type, type); baseMap.set(base, base); @@ -631,6 +740,10 @@ export class ModelManager { // =========================================================================================== + showSelection(msg) { + this.element.querySelector(".cmm-manager-selection").innerHTML = msg; + } + showError(err) { this.showMessage(err, "red"); } @@ -674,7 +787,8 @@ export class ModelManager { const list = [ ".cmm-manager-header input", ".cmm-manager-header select", - ".cmm-manager-footer button" + ".cmm-manager-footer button", + ".cmm-manager-selection button" ].map(s => { return Array.from(this.element.querySelectorAll(s)); }) @@ -705,6 +819,7 @@ export class ModelManager { show() { this.element.style.display = "flex"; this.setKeywords(""); + this.showSelection(""); this.showMessage(""); this.loadData(); }