From 83e85ad0e96ca65b7ae667feb24c20f424ef9080 Mon Sep 17 00:00:00 2001 From: Sj-Si Date: Wed, 13 Mar 2024 17:11:44 -0400 Subject: [PATCH] add clusterize lists. need to debug. --- .../Lora/ui_extra_networks_lora.py | 4 +- html/extra-networks-card.html | 2 +- html/extra-networks-copy-path-button.html | 2 +- html/extra-networks-dirs-view-button.html | 5 + html/extra-networks-pane-tree.html | 11 +- html/extra-networks-pane.html | 39 +- html/extra-networks-tree-button.html | 23 - html/extra-networks-tree-row.html | 20 + javascript/extraNetworks.js | 563 +++++++++++------- javascript/extraNetworksClusterizeList.js | 479 +++++++++++++++ javascript/resizeHandle.js | 7 + modules/ui_extra_networks.py | 403 ++++++++----- modules/ui_gradio_extensions.py | 6 + style.css | 295 +++++---- 14 files changed, 1263 insertions(+), 596 deletions(-) create mode 100644 html/extra-networks-dirs-view-button.html delete mode 100644 html/extra-networks-tree-button.html create mode 100644 html/extra-networks-tree-row.html create mode 100644 javascript/extraNetworksClusterizeList.js diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py index 66d15dd05..3cb84170f 100644 --- a/extensions-builtin/Lora/ui_extra_networks_lora.py +++ b/extensions-builtin/Lora/ui_extra_networks_lora.py @@ -43,8 +43,8 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage): self.read_user_metadata(item) activation_text = item["user_metadata"].get("activation text") preferred_weight = item["user_metadata"].get("preferred weight", 0.0) - item["prompt"] = quote_js(f"") - + item["prompt"] = quote_js(f"") + if activation_text: item["prompt"] += " + " + quote_js(" " + activation_text) diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html index f1d959a67..f50a69501 100644 --- a/html/extra-networks-card.html +++ b/html/extra-networks-card.html @@ -1,4 +1,4 @@ -
+
{background_image}
{copy_path_button}{metadata_button}{edit_button}
diff --git a/html/extra-networks-copy-path-button.html b/html/extra-networks-copy-path-button.html index 8083bb033..c0c44f1e3 100644 --- a/html/extra-networks-copy-path-button.html +++ b/html/extra-networks-copy-path-button.html @@ -1,5 +1,5 @@
\ No newline at end of file diff --git a/html/extra-networks-dirs-view-button.html b/html/extra-networks-dirs-view-button.html new file mode 100644 index 000000000..bce066de4 --- /dev/null +++ b/html/extra-networks-dirs-view-button.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html index 88561fcdc..1722a90b4 100644 --- a/html/extra-networks-pane-tree.html +++ b/html/extra-networks-pane-tree.html @@ -1,8 +1,11 @@
-
- {tree_html} +
+
-
- {items_html} +
+
\ No newline at end of file diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index 9a67baea9..d486c117d 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -1,48 +1,57 @@
- diff --git a/html/extra-networks-tree-button.html b/html/extra-networks-tree-button.html deleted file mode 100644 index 9dc2e2a40..000000000 --- a/html/extra-networks-tree-button.html +++ /dev/null @@ -1,23 +0,0 @@ - -
- - {action_list_item_action_leading} - - - {action_list_item_visual_leading} - - - {action_list_item_label} - - - {action_list_item_visual_trailing} - - - {action_list_item_action_trailing} - -
\ No newline at end of file diff --git a/html/extra-networks-tree-row.html b/html/extra-networks-tree-row.html new file mode 100644 index 000000000..dede487ec --- /dev/null +++ b/html/extra-networks-tree-row.html @@ -0,0 +1,20 @@ +
+ +
+ + {action_list_item_action_leading} + + + {action_list_item_visual_leading} + + + {action_list_item_label} + + + {action_list_item_visual_trailing} + + + {action_list_item_action_trailing} + +
+
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index be5f0f304..ba75fba64 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -1,3 +1,72 @@ +const re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/; +const re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g; +const re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/; +const re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g; +const extraNetworksApplyFilter = {}; +const extraNetworksApplySort = {}; +const activePromptTextarea = {}; +const clusterizers = {}; +const extra_networks_json_proxy = {}; +const extra_networks_proxy_listener = setupProxyListener( + extra_networks_json_proxy, + function() {}, + proxyJsonUpdated, +); +var globalPopup = null; +var globalPopupInner = null; +const storedPopupIds = {}; +const extraPageUserMetadataEditors = {}; +const uiAfterScriptsCallbacks = []; +var uiAfterScriptsTimeout = null; +var executedAfterScripts = false; + +function waitForElement(selector) { + /** Promise that waits for an element to exist in DOM. */ + return new Promise(resolve => { + if (document.querySelector(selector)) { + return resolve(document.querySelector(selector)); + } + + const observer = new MutationObserver(mutations => { + if (document.querySelector(selector)) { + observer.disconnect(); + resolve(document.querySelector(selector)); + } + }); + + // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336 + observer.observe(document.documentElement, { + childList: true, + subtree: true + }); + }); +} + +function setupProxyListener(target, pre_handler, post_handler) { + /** Sets up a listener for variable changes. */ + var proxy = new Proxy(target, { + set: function (t, k, v) { + pre_handler.call(t, k, v); + t[k] = v; + post_handler.call(t, k, v); + return true; + } + }); + return proxy +} + +function proxyJsonUpdated(k, v) { + /** Callback triggered when JSON data is updated by the proxy listener. */ + // use `this` for current object + // We don't do error handling here because we want to fail gracefully if data is + // not yet present. + if (!(v.dataset.tabnameFull in clusterizers)) { + // Clusterizers not yet initialized. + return; + } + clusterizers[v.dataset.tabnameFull][v.dataset.proxyName].parseJson(v.dataset.json); +} + function toggleCss(key, css, enable) { var style = document.getElementById(key); if (enable && !style) { @@ -15,9 +84,35 @@ function toggleCss(key, css, enable) { } } +function extraNetworksRefreshTab(tabname_full) { + if (!(tabname_full in clusterizers)) { + return; + } + + for (_tabname_full of Object.keys(clusterizers)) { + + if (_tabname_full === tabname_full) { + // Set the selected tab as active since it is now visible on page. + clusterizers[_tabname_full].tree_list.enable(); + clusterizers[_tabname_full].cards_list.enable(); + } else { + // Deactivate all other tabs since they are no longer visible. + clusterizers[_tabname_full].tree_list.disable(); + clusterizers[_tabname_full].cards_list.disable(); + } + } + + clusterizers[tabname_full].tree_list.rebuild(); + clusterizers[tabname_full].cards_list.rebuild(); + + for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { + extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; + } +} + function setupExtraNetworksForTab(tabname) { function registerPrompt(tabname, id) { - var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); + var textarea = gradioApp().querySelector(`#${id} > label > textarea`); if (!activePromptTextarea[tabname]) { activePromptTextarea[tabname] = textarea; @@ -28,112 +123,124 @@ function setupExtraNetworksForTab(tabname) { }); } - var tabnav = gradioApp().querySelector('#' + tabname + '_extra_tabs > div.tab-nav'); - var controlsDiv = document.createElement('DIV'); - controlsDiv.classList.add('extra-networks-controls-div'); + var tabnav = gradioApp().querySelector(`#${tabname}_extra_tabs > div.tab-nav`); + var controlsDiv = document.createElement("div"); + controlsDiv.classList.add("extra-networks-controls-div"); tabnav.appendChild(controlsDiv); tabnav.insertBefore(controlsDiv, null); - var this_tab = gradioApp().querySelector('#' + tabname + '_extra_tabs'); - this_tab.querySelectorAll(":scope > [id^='" + tabname + "_']").forEach(function(elem) { - // tabname_full = {tabname}_{extra_networks_tabname} - var tabname_full = elem.id; - var search = gradioApp().querySelector("#" + tabname_full + "_extra_search"); - var sort_dir = gradioApp().querySelector("#" + tabname_full + "_extra_sort_dir"); - var refresh = gradioApp().querySelector("#" + tabname_full + "_extra_refresh"); - var currentSort = ''; + var this_tab = gradioApp().querySelector(`#${tabname}_extra_tabs`); + this_tab.querySelectorAll(`:scope > [id^="${tabname}_"]`).forEach(function(elem) { + let tabname_full = elem.id; + let txt_search; + let btn_sort_mode; + let btn_sort_dir; + let btn_refresh; - // If any of the buttons above don't exist, we want to skip this iteration of the loop. - if (!search || !sort_dir || !refresh) { - return; // `return` is equivalent of `continue` but for forEach loops. - } - - var applyFilter = function(force) { - var searchTerm = search.value.toLowerCase(); - gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) { - var searchOnly = elem.querySelector('.search_only'); - var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms, .description'), function(t) { - return t.textContent.toLowerCase(); - }).join(" "); - - var visible = text.indexOf(searchTerm) != -1; - if (searchOnly && searchTerm.length < 4) { - visible = false; - } - if (visible) { - elem.classList.remove("hidden"); - } else { - elem.classList.add("hidden"); - } - }); - - applySort(force); - }; - - var applySort = function(force) { - var cards = gradioApp().querySelectorAll('#' + tabname_full + ' div.card'); - var parent = gradioApp().querySelector('#' + tabname_full + "_cards"); - var reverse = sort_dir.dataset.sortdir == "Descending"; - var activeSearchElem = gradioApp().querySelector('#' + tabname_full + "_controls .extra-network-control--sort.extra-network-control--enabled"); - var sortKey = activeSearchElem ? activeSearchElem.dataset.sortkey : "default"; - var sortKeyDataField = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1); - var sortKeyStore = sortKey + "-" + sort_dir.dataset.sortdir + "-" + cards.length; - - if (sortKeyStore == currentSort && !force) { + var applyFilter = function() { + if (!(tabname_full in clusterizers)) { + console.error(`applyFilter: ${tabname_full} not in clusterizers:`); return; } - currentSort = sortKeyStore; - - var sortedCards = Array.from(cards); - sortedCards.sort(function(cardA, cardB) { - var a = cardA.dataset[sortKeyDataField]; - var b = cardB.dataset[sortKeyDataField]; - if (!isNaN(a) && !isNaN(b)) { - return parseInt(a) - parseInt(b); - } - - return (a < b ? -1 : (a > b ? 1 : 0)); - }); - - if (reverse) { - sortedCards.reverse(); - } - - parent.innerHTML = ''; - - var frag = document.createDocumentFragment(); - sortedCards.forEach(function(card) { - frag.appendChild(card); - }); - parent.appendChild(frag); + // Only touch cards_list. tree_list remains static. + clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode); + clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir); + clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); }; - - search.addEventListener("input", function() { - applyFilter(); - }); - applySort(); - applyFilter(); - extraNetworksApplySort[tabname_full] = applySort; extraNetworksApplyFilter[tabname_full] = applyFilter; - var controls = gradioApp().querySelector("#" + tabname_full + "_controls"); - controlsDiv.insertBefore(controls, null); + var applySort = function() { + if (!(tabname_full in clusterizers)) { + console.error(`applySort: ${tabname_full} not in clusterizers:`); + return; + } + // Only touch cards_list. tree_list remains static. + clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode); + clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir); + clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts + }; + extraNetworksApplySort[tabname_full] = applySort; + /** #TODO + * Figure out if we can use the following in the clusterize setup: + * var frag = document.createDocumentFragment(); + * sortedCards.forEach(function(card) { + * frag.appendChild(card); + * }); + * parent.appendChild(frag); + */ - if (elem.style.display != "none") { - extraNetworksShowControlsForPage(tabname, tabname_full); - } + // Wait for all required elements before setting up the tab. + waitForElement(`#${tabname_full}_extra_search`) + .then((el) => { + txt_search = el; + }) + .then(() => { + waitForElement(`#${tabname_full}_extra_sort_mode`) + .then((el) => { btn_sort_mode = el; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_extra_sort_dir`) + .then((el) => { btn_sort_dir = el; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_extra_refresh`) + .then((el) => { btn_refresh = el; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`) + .then(() => { return; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_cards_list_scroll_area > #${tabname_full}_cards_list_content_area`) + .then(() => { return; }); + }) + .then(() => { + console.log("LOADING TAB:", tabname_full, clusterizers[tabname_full]); + // Now that we have our elements in DOM, we create the clusterize lists. + clusterizers[tabname_full] = { + tree_list: new ExtraNetworksClusterizeTreeList({ + scroll_id: `${tabname_full}_tree_list_scroll_area`, + content_id: `${tabname_full}_tree_list_content_area`, + }), + cards_list: new ExtraNetworksClusterizeCardsList({ + scroll_id: `${tabname_full}_cards_list_scroll_area`, + content_id: `${tabname_full}_cards_list_content_area`, + }), + }; + + applyFilter(); + + // Debounce search text input. This way we only search after user is done typing. + let typing_timer; + let done_typing_interval_ms = 250; + txt_search.addEventListener("keyup", () => { + clearTimeout(typing_timer); + if (txt_search.value) { + typing_timer = setTimeout(applyFilter, done_typing_interval_ms); + } + }); + // Triggered on "enter" key or when "x" is clicked to clear search. + txt_search.addEventListener("extra-network-control--search-clear", applyFilter); + + // Insert the controls into the page. + var controls = gradioApp().querySelector(`#${tabname_full}_controls`); + controlsDiv.insertBefore(controls, null); + if (elem.style.display != "none") { + extraNetworksShowControlsForPage(tabname, tabname_full); + } + }); }); - registerPrompt(tabname, tabname + "_prompt"); - registerPrompt(tabname, tabname + "_neg_prompt"); + registerPrompt(tabname, `${tabname}_prompt`); + registerPrompt(tabname, `${tabname}_neg_prompt`); } function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) { if (!gradioApp().querySelector('.toprow-compact-tools')) return; // only applicable for compact prompt layout - var promptContainer = gradioApp().getElementById(tabname + '_prompt_container'); - var prompt = gradioApp().getElementById(tabname + '_prompt_row'); - var negPrompt = gradioApp().getElementById(tabname + '_neg_prompt_row'); + var promptContainer = gradioApp().getElementById(`${tabname}_prompt_container`); + var prompt = gradioApp().getElementById(`${tabname}_prompt_row`); + var negPrompt = gradioApp().getElementById(`${tabname}_neg_prompt_row`); var elem = id ? gradioApp().getElementById(id) : null; if (showNegativePrompt && elem) { @@ -155,8 +262,8 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp function extraNetworksShowControlsForPage(tabname, tabname_full) { - gradioApp().querySelectorAll('#' + tabname + '_extra_tabs .extra-networks-controls-div > div').forEach(function(elem) { - var targetId = tabname_full + "_controls"; + gradioApp().querySelectorAll(`#${tabname}_extra_tabs .extra-networks-controls-div > div`).forEach(function(elem) { + var targetId = `${tabname_full}_controls`; elem.style.display = elem.id == targetId ? "" : "none"; }); } @@ -172,40 +279,70 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt); extraNetworksShowControlsForPage(tabname, tabname_full); + + for (_tabname_full of Object.keys(clusterizers)) { + if (_tabname_full === tabname_full) { + // Set the selected tab as active since it is now visible on page. + clusterizers[_tabname_full].tree_list.enable(); + clusterizers[_tabname_full].cards_list.enable(); + } else { + // Deactivate all other tabs since they are no longer visible. + clusterizers[_tabname_full].tree_list.disable(); + clusterizers[_tabname_full].cards_list.disable(); + } + } + + if (!document.body.contains(clusterizers[tabname_full].tree_list.scroll_elem)) { + clusterizers[tabname_full].tree_list.rebuild(); + } + if (!document.body.contains(clusterizers[tabname_full].cards_list.scroll_elem)) { + clusterizers[tabname_full].cards_list.rebuild(); + } } function applyExtraNetworkFilter(tabname_full) { - var doFilter = function() { - var applyFunction = extraNetworksApplyFilter[tabname_full]; - - if (applyFunction) { - applyFunction(true); - } - }; - setTimeout(doFilter, 1); + setTimeout(extraNetworksApplyFilter[tabname_full], 1); } function applyExtraNetworkSort(tabname_full) { - var doSort = function() { - extraNetworksApplySort[tabname_full](true); - }; - setTimeout(doSort, 1); + setTimeout(extraNetworksApplySort[tabname_full], 1); } -var extraNetworksApplyFilter = {}; -var extraNetworksApplySort = {}; -var activePromptTextarea = {}; +function setupExtraNetworksData() { + // Manually force read the json data. + for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { + extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; + } +} function setupExtraNetworks() { setupExtraNetworksForTab('txt2img'); setupExtraNetworksForTab('img2img'); + + // Handle window resizes. Delay of 500ms after resize before firing an event + // as a way of "debouncing" resizes. + var resize_timer; + window.addEventListener("resize", () => { + clearTimeout(resize_timer); + resize_timer = setTimeout(function() { + // Update rows for each list. + for (_tabname_full of Object.keys(clusterizers)) { + clusterizers[_tabname_full].tree_list.updateRows(); + clusterizers[_tabname_full].cards_list.updateRows(); + } + }, 500); // ms + }); + + // Handle resizeHandle resizes. Only fires on mouseup after resizing. + window.addEventListener("resizeHandleResized", (e) => { + for (_tabname_full of Object.keys(clusterizers)) { + // Update rows for each list. + clusterizers[_tabname_full].tree_list.updateRows(); + clusterizers[_tabname_full].cards_list.updateRows(); + } + }); } -var re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/; -var re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g; - -var re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/; -var re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g; function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) { var m = text.match(isNeg ? re_extranet_neg : re_extranet); var replaced = false; @@ -255,17 +392,17 @@ function updatePromptArea(text, textArea, isNeg) { function cardClicked(tabname, textToAdd, textToAddNegative, allowNegativePrompt) { if (textToAddNegative.length > 0) { - updatePromptArea(textToAdd, gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")); - updatePromptArea(textToAddNegative, gradioApp().querySelector("#" + tabname + "_neg_prompt > label > textarea"), true); + updatePromptArea(textToAdd, gradioApp().querySelector(`#${tabname}_prompt > label > textarea`)); + updatePromptArea(textToAddNegative, gradioApp().querySelector(`#${tabname}_neg_prompt > label > textarea`), true); } else { - var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea"); + var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector(`#${tabname}_prompt > label > textarea`); updatePromptArea(textToAdd, textarea); } } function saveCardPreview(event, tabname, filename) { - var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea'); - var button = gradioApp().getElementById(tabname + '_save_preview'); + var textarea = gradioApp().querySelector(`#${tabname}_preview_filename > label > textarea`); + var button = gradioApp().getElementById(`${tabname}_save_preview`); textarea.value = filename; updateInput(textarea); @@ -276,8 +413,8 @@ function saveCardPreview(event, tabname, filename) { event.preventDefault(); } -function extraNetworksSearchButton(tabname, extra_networks_tabname, event) { - var searchTextarea = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search"); +function extraNetworksSearchButton(event, tabname_full) { + var searchTextarea = gradioApp().querySelector("#" + tabname_full + "_extra_search"); var button = event.target; var text = button.classList.contains("search-all") ? "" : button.textContent.trim(); @@ -285,20 +422,20 @@ function extraNetworksSearchButton(tabname, extra_networks_tabname, event) { updateInput(searchTextarea); } -function extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname) { +function extraNetworksTreeProcessFileClick(event, btn, tabname_full) { /** * Processes `onclick` events when user clicks on files in tree. * - * @param event The generated event. - * @param btn The clicked `tree-list-item` button. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param btn The clicked `tree-list-item` button. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ // NOTE: Currently unused. return; } -function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname) { +function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) { /** * Processes `onclick` events when user clicks on directories in tree. * @@ -308,94 +445,100 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_netwo * selected opened directory: Directory is collapsed and deselected. * chevron is clicked: Directory is expanded or collapsed. Selected state unchanged. * - * @param event The generated event. - * @param btn The clicked `tree-list-item` button. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param btn The clicked `tree-list-item` button. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - var ul = btn.nextElementSibling; // This is the actual target that the user clicked on within the target button. // We use this to detect if the chevron was clicked. var true_targ = event.target; + const div_id = btn.dataset.divId; - function _expand_or_collapse(_ul, _btn) { - // Expands
    if it is collapsed, collapses otherwise. Updates button attributes. - if (_ul.hasAttribute("hidden")) { - _ul.removeAttribute("hidden"); - _btn.dataset.expanded = ""; - } else { - _ul.setAttribute("hidden", ""); + function _expandOrCollapse(_btn) { + // Expands/Collapses all children of the button. + if ("expanded" in _btn.dataset) { delete _btn.dataset.expanded; + clusterizers[tabname_full].tree_list.removeChildRows(div_id); + } else { + _btn.dataset.expanded = ""; + clusterizers[tabname_full].tree_list.addChildRows(div_id); } + // update html after changing attr. + clusterizers[tabname_full].tree_list.updateDivContent(div_id, _btn.outerHTML); + clusterizers[tabname_full].tree_list.updateRows(); } - function _remove_selected_from_all() { + function _removeSelectedFromAll() { // Removes the `selected` attribute from all buttons. - var sels = document.querySelectorAll("div.tree-list-content"); + var sels = document.querySelectorAll(".tree-list-item"); [...sels].forEach(el => { delete el.dataset.selected; }); } - function _select_button(_btn) { + function _selectButton(_btn) { // Removes `data-selected` attribute from all buttons then adds to passed button. - _remove_selected_from_all(); + _removeSelectedFromAll(); _btn.dataset.selected = ""; } - function _update_search(_tabname, _extra_networks_tabname, _search_text) { + function _updateSearch(_search_text) { // Update search input with select button's path. - var search_input_elem = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search"); + var search_input_elem = gradioApp().querySelector("#" + tabname_full + "_extra_search"); search_input_elem.value = _search_text; updateInput(search_input_elem); + applyExtraNetworksFilter(tabname_full); } // If user clicks on the chevron, then we do not select the folder. if (true_targ.matches(".tree-list-item-action--leading, .tree-list-item-action-chevron")) { - _expand_or_collapse(ul, btn); + _expandOrCollapse(btn); } else { // User clicked anywhere else on the button. - if ("selected" in btn.dataset && !(ul.hasAttribute("hidden"))) { - // If folder is select and open, collapse and deselect button. - _expand_or_collapse(ul, btn); + if ("selected" in btn.dataset) { + // If folder is selected, deselect button. delete btn.dataset.selected; - _update_search(tabname, extra_networks_tabname, ""); - } else if (!(!("selected" in btn.dataset) && !(ul.hasAttribute("hidden")))) { - // If folder is open and not selected, then we don't collapse; just select. - // NOTE: Double inversion sucks but it is the clearest way to show the branching here. - _expand_or_collapse(ul, btn); - _select_button(btn, tabname, extra_networks_tabname); - _update_search(tabname, extra_networks_tabname, btn.dataset.path); + _expandOrCollapse(ul, btn); + _updateSearch(""); } else { - // All other cases, just select the button. - _select_button(btn, tabname, extra_networks_tabname); - _update_search(tabname, extra_networks_tabname, btn.dataset.path); + // If folder is not selected, select it. + _selectButton(btn); + _updateSearch(btn.dataset.path); } } } -function extraNetworksTreeOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksTreeOnClick(event, tabname_full) { /** * Handles `onclick` events for buttons within an `extra-network-tree .tree-list--tree`. * * Determines whether the clicked button in the tree is for a file entry or a directory * then calls the appropriate function. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - var btn = event.currentTarget; - var par = btn.parentElement; - if (par.dataset.treeEntryType === "file") { - extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname); - } else { - extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname); - } + let btn = event.target.closest(".tree-list-item"); + if (btn.dataset.treeEntryType === "file") { + extraNetworksTreeProcessFileClick(event, btn, tabname_full); + } else { + extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full); + } + event.stopPropagation(); } -function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlSearchClearOnClick(event, tabname_full) { + /** Clears the search text. */ + let clear_btn = event.target.closest(".extra-network-control--search-clear"); + let txt_search = clear_btn.previousElementSibling; + txt_search.value = ""; + txt_search.dispatchEvent(new CustomEvent("extra-network-control--search-clear", {})); +} + +function extraNetworksControlSortModeOnClick(event, tabname_full) { /** Handles `onclick` events for Sort Mode buttons. */ var self = event.currentTarget; @@ -407,49 +550,49 @@ function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname) self.classList.add('extra-network-control--enabled'); - applyExtraNetworkSort(tabname + "_" + extra_networks_tabname); + applyExtraNetworkSort(tabname_full); } -function extraNetworksControlSortDirOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlSortDirOnClick(event, tabname_full) { /** * Handles `onclick` events for the Sort Direction button. * * Modifies the data attributes of the Sort Direction button to cycle between * ascending and descending sort directions. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - if (event.currentTarget.dataset.sortdir == "Ascending") { - event.currentTarget.dataset.sortdir = "Descending"; + if (event.currentTarget.dataset.sortDir.toLowerCase() == "ascending") { + event.currentTarget.dataset.sortDir = "descending"; event.currentTarget.setAttribute("title", "Sort descending"); } else { - event.currentTarget.dataset.sortdir = "Ascending"; + event.currentTarget.dataset.sortDir = "ascending"; event.currentTarget.setAttribute("title", "Sort ascending"); } - applyExtraNetworkSort(tabname + "_" + extra_networks_tabname); + applyExtraNetworkSort(tabname_full); } -function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlTreeViewOnClick(event, tabname_full) { /** * Handles `onclick` events for the Tree View button. * * Toggles the tree view in the extra networks pane. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ var button = event.currentTarget; button.classList.toggle("extra-network-control--enabled"); var show = !button.classList.contains("extra-network-control--enabled"); - var pane = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_pane"); + var pane = gradioApp().getElementById(`${tabname_full}_pane`); pane.classList.toggle("extra-network-dirs-hidden", show); } -function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlRefreshOnClick(event, tabname_full) { /** * Handles `onclick` events for the Refresh Page button. * @@ -458,17 +601,14 @@ function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabna * event handler that refreshes the page. So what this function here does * is it manually raises a `click` event on that button. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - var btn_refresh_internal = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_extra_refresh_internal"); + var btn_refresh_internal = gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`); btn_refresh_internal.dispatchEvent(new Event("click")); } -var globalPopup = null; -var globalPopupInner = null; - function closePopup() { if (!globalPopup) return; globalPopup.style.display = "none"; @@ -498,7 +638,6 @@ function popup(contents) { globalPopup.style.display = "flex"; } -var storedPopupIds = {}; function popupId(id) { if (!storedPopupIds[id]) { storedPopupIds[id] = gradioApp().getElementById(id); @@ -605,7 +744,7 @@ function requestGet(url, data, handler, errorHandler) { xhr.send(js); } -function extraNetworksCopyCardPath(event, path) { +function extraNetworksCopyCardPathToClipboard(event, path) { navigator.clipboard.writeText(path); event.stopPropagation(); } @@ -626,8 +765,6 @@ function extraNetworksRequestMetadata(event, extraPage, cardName) { event.stopPropagation(); } -var extraPageUserMetadataEditors = {}; - function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) { var id = tabname + '_' + extraPage + '_edit_user_metadata'; @@ -672,38 +809,4 @@ window.addEventListener("keydown", function(event) { } }); -/** - * Setup custom loading for this script. - * We need to wait for all of our HTML to be generated in the extra networks tabs - * before we can actually run the `setupExtraNetworks` function. - * The `onUiLoaded` function actually runs before all of our extra network tabs are - * finished generating. Thus we needed this new method. - * - */ - -var uiAfterScriptsCallbacks = []; -var uiAfterScriptsTimeout = null; -var executedAfterScripts = false; - -function scheduleAfterScriptsCallbacks() { - clearTimeout(uiAfterScriptsTimeout); - uiAfterScriptsTimeout = setTimeout(function() { - executeCallbacks(uiAfterScriptsCallbacks); - }, 200); -} - -onUiLoaded(function() { - var mutationObserver = new MutationObserver(function(m) { - let existingSearchfields = gradioApp().querySelectorAll("[id$='_extra_search']").length; - let neededSearchfields = gradioApp().querySelectorAll("[id$='_extra_tabs'] > .tab-nav > button").length - 2; - - if (!executedAfterScripts && existingSearchfields >= neededSearchfields) { - mutationObserver.disconnect(); - executedAfterScripts = true; - scheduleAfterScriptsCallbacks(); - } - }); - mutationObserver.observe(gradioApp(), {childList: true, subtree: true}); -}); - -uiAfterScriptsCallbacks.push(setupExtraNetworks); +onUiLoaded(setupExtraNetworks); diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js new file mode 100644 index 000000000..fe6cbbb3b --- /dev/null +++ b/javascript/extraNetworksClusterizeList.js @@ -0,0 +1,479 @@ +// Collators used for sorting. +const INT_COLLATOR = new Intl.Collator([], {numeric: true}); +const STR_COLLATOR = new Intl.Collator("en", {numeric: true, sensitivity: "base"}); + +function compress(string) { + /** Compresses a string into a base64 encoded GZipped string. */ + const cs = new CompressionStream('gzip'); + const writer = cs.writable.getWriter(); + + const blobToBase64 = blob => new Promise((resolve, _) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result.split(',')[1]); + reader.readAsDataURL(blob); + }); + const byteArray = new TextEncoder().encode(string); + writer.write(byteArray); + writer.close(); + return new Response(cs.readable).blob().then(blobToBase64); +}; + +function decompress(base64string) { + /** Decompresses a base64 encoded GZipped string. */ + const ds = new DecompressionStream('gzip'); + const writer = ds.writable.getWriter(); + const bytes = Uint8Array.from(atob(base64string), c => c.charCodeAt(0)); + writer.write(bytes); + writer.close(); + return new Response(ds.readable).arrayBuffer().then(function (arrayBuffer) { + return new TextDecoder().decode(arrayBuffer); + }); +} + +const parseHtml = function(str) { + const tmp = document.implementation.createHTMLDocument(''); + tmp.body.innerHTML = str; + return [...tmp.body.childNodes]; +} + +const getComputedValue = function(container, css_property) { + return parseInt( + window.getComputedStyle(container, null) + .getPropertyValue(css_property) + .split("px")[0] + ); +}; + +const calcColsPerRow = function(parent) { + // Returns the number of columns in a row of a flexbox. + //const parent = document.querySelector(selector); + const parent_width = getComputedValue(parent, "width"); + const parent_padding_left = getComputedValue(parent,"padding-left"); + const parent_padding_right = getComputedValue(parent,"padding-right"); + + const child = parent.firstElementChild; + const child_width = getComputedValue(child,"width"); + const child_margin_left = getComputedValue(child,"margin-left"); + const child_margin_right = getComputedValue(child,"margin-right"); + + var parent_width_no_padding = parent_width - parent_padding_left - parent_padding_right; + const child_width_with_margin = child_width + child_margin_left + child_margin_right; + parent_width_no_padding += child_margin_left + child_margin_right; + + return parseInt(parent_width_no_padding / child_width_with_margin); +} + +const calcRowsPerCol = function(container, parent) { + // Returns the number of columns in a row of a flexbox. + //const parent = document.querySelector(selector); + const parent_height = getComputedValue(container, "height"); + const parent_padding_top = getComputedValue(container,"padding-top"); + const parent_padding_bottom = getComputedValue(container,"padding-bottom"); + + const child = parent.firstElementChild; + const child_height = getComputedValue(child,"height"); + const child_margin_top = getComputedValue(child,"margin-top"); + const child_margin_bottom = getComputedValue(child,"margin-bottom"); + + var parent_height_no_padding = parent_height - parent_padding_top - parent_padding_bottom; + const child_height_with_margin = child_height + child_margin_top + child_margin_bottom; + parent_height_no_padding += child_margin_top + child_margin_bottom; + + return parseInt(parent_height_no_padding / child_height_with_margin); +} + +class ExtraNetworksClusterize { + constructor( + { + scroll_id, + content_id, + rows_in_block = 10, + blocks_in_cluster = 4, + show_no_data_row = true, + callbacks = {}, + } = { + rows_in_block: 10, + blocks_in_cluster: 4, + show_no_data_row: true, + callbacks: {}, + } + ) { + if (scroll_id === undefined) { + console.error("scroll_id is undefined!"); + } + if (content_id === undefined) { + console.error("content_id is undefined!"); + } + + this.scroll_id = scroll_id; + this.content_id = content_id; + this.rows_in_block = rows_in_block; + this.blocks_in_cluster = blocks_in_cluster; + this.show_no_data_row = show_no_data_row; + this.callbacks = callbacks; + + this.enabled = false; + + this.encoded_str = ""; + + this.no_data_text = "Directory is empty."; + this.no_data_class = "nocards"; + + this.scroll_elem = document.getElementById(this.scroll_id); + this.content_elem = document.getElementById(this.content_id); + + this.n_rows = 1; + this.n_cols = 1; + + this.sort_fn = this.sortByDivId; + this.sort_reverse = false; + + this.data_obj = {}; + this.data_obj_keys_sorted = []; + + this.clusterize = new Clusterize( + { + rows: [], + scrollId: this.scroll_id, + contentId: this.content_id, + rows_in_block: this.rows_in_block, + blocks_in_cluster: this.blocks_in_cluster, + show_no_data_row: this.show_no_data_row, + callbacks: this.callbacks, + } + ); + } + + enable() { + this.enabled = true; + } + + disable() { + this.enabled = false; + } + + parseJson(encoded_str) { + if (this.encoded_str === encoded_str) { + return; + } + + Promise.resolve(encoded_str) + .then(v => decompress(v)) + .then(v => JSON.parse(v)) + .then(v => this.updateJson(v)) + .then(() => this.encoded_str = encoded_str); + } + + sortByDivId() { + // Sort data_obj keys (div_id) as numbers. + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => INT_COLLATOR.compare(a, b)); + } + + applySort() { + this.sort_fn() + if (this.sort_reverse) { + this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse(); + } + this.updateRows(); + } + + applyFilter() { + // the base class filter just sorts the values and updates the rows. + this.applySort(); + this.updateRows(); + } + + filterRows(obj) { + var results = []; + for (const div_id of this.data_obj_keys_sorted) { + if (obj[div_id].active) { + results.push(obj[div_id].element.outerHTML); + } + } + return results; + } + + updateDivContent(div_id, content) { + /** Updates an element in the dataset. Does not call update_rows(). */ + if (!(div_id in this.data_obj)) { + console.error("div_id not in data_obj:", div_id); + } else if (typeof content === "object") { + this.data_obj[div_id].element = parseHtml(content.outerHTML)[0]; + return true; + } else if (typeof content === "string") { + this.data_obj[div_id].element = parseHtml(content)[0]; + return true; + } else { + console.error("Invalid content:", div_id, content); + } + + return false; + } + + updateRows() { + this.clusterize.update(this.filterRows(this.data_obj)); + this.clusterize.refresh(); + } + + nrows() { + return this.clusterize.getRowsAmount(); + } + + updateItemDims() { + if (!this.enabled) { + // Inactive list is not displayed on screen. Would error if trying to resize. + return; + } + if (this.nrows() <= 0) { + // If there is no data then just skip. + return; + } + // Calculate the visible rows and colums for the clusterize-content area. + let n_cols = calcColsPerRow(this.content_elem); + let n_rows = calcRowsPerCol(this.content_elem.parentElement, this.content_elem); + + n_cols = isNaN(n_cols) || n_cols <= 0 ? 1 : n_cols; + n_rows = isNaN(n_rows) || n_rows <= 0 ? 1 : n_rows; + + if (n_cols != this.n_cols || n_rows != this.n_rows) { + // Sizes have changed. Update the instance values. + this.n_cols = n_cols; + this.n_rows = n_rows; + this.rows_in_block = this.n_rows; + } + } + + rebuild() { + this.clusterize.destroy(); + + // Get new references to elements since they may have changed. + this.scroll_elem = document.getElementById(this.scroll_id); + this.content_elem = document.getElementById(this.content_id); + this.clusterize = new Clusterize( + { + rows: this.filterRows(this.data_obj), + scrollId: this.scroll_id, + contentId: this.content_id, + rows_in_block: this.rows_in_block, + blocks_in_cluster: this.blocks_in_cluster, + show_no_data_row: this.show_no_data_row, + no_data_text: this.no_data_text, + no_data_class: this.no_data_class, + callbacks: this.callbacks, + } + ); + + // Apply existing sort mode. + this.applyFilter(); + + this.updateItemDims(); + this.updateRows(); + } +} + +class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize { + constructor(...args) { + super(...args); + } + + getBoxShadow(depth) { + // Generates style for a multi-level box shadow for vertical indentation lines. + let res = ""; + var style = getComputedStyle(document.body); + let bg = style.getPropertyValue("--body-background-fill"); + let fg = style.getPropertyValue("--neutral-800"); + for (let i = 1; i <= depth; i++) { + res += `${i - 0.6}rem 0 0 ${bg} inset,`; + res += `${i - 0.4}rem 0 0 ${fg} inset`; + res += (i+1 > depth) ? "" : ", "; + } + return res; + } + + updateJson(json) { + for (const [k, v] of Object.entries(json)) { + let div_id = k; + let parsed_html = parseHtml(v)[0]; + // parent_id = -1 if item is at root level + let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1; + let expanded = "expanded" in parsed_html.dataset; + let depth = Number(parsed_html.dataset.depth); + parsed_html.style.paddingLeft = `${depth}em`; + parsed_html.style.boxShadow = this.getBoxShadow(depth); + // Add the updated html to the data object. + this.data_obj[div_id] = { + element: parsed_html, + active: parent_id === -1, // always show root + expanded: expanded || (parent_id === -1), // always expand root + parent: parent_id, + children: [], // populated later + }; + } + + // Build list of children for each element in dataset. + for (const [k, v] of Object.entries(this.data_obj)) { + if (v.parent === -1) { + continue; + } else if (!(v.parent in this.data_obj)) { + console.error("parent not in data:", v.parent); + } else { + this.data_obj[v.parent].children.push(k); + } + } + + // Handle expanding of rows on initial load + for (const [k, v] of Object.entries(this.data_obj)) { + if (v.parent === -1) { + // Always show root level. + this.data_obj[k].active = true; + } else if (this.data_obj[v.parent].expanded && this.data_obj[v.parent].active) { + // Parent is both active and expanded. show child + this.data_obj[k].active = true; + } else { + this.data_obj[k].active = false; + } + } + + this.applyFilter(); + } + + removeChildRows(div_id) { + for (const child_id of this.data_obj[div_id].children) { + this.data_obj[child_id].active = false; + this.data_obj[child_id].expanded = false; + delete this.data_obj[child_id].element.dataset.expanded; + this.removeChildRows(child_id); + } + } + + addChildRows(div_id) { + for (const child_id of this.data_obj[div_id].children) { + this.data_obj[child_id].active = true; + if (this.data_obj[child_id].expanded) { + this.addChildRows(child_id); + } + } + } +} + +class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize { + constructor(...args) { + super(...args); + + this.sort_mode_str = "default"; + this.sort_dir_str = "ascending"; + this.filter_str = ""; + } + + updateJson(json) { + for (const [k, v] of Object.entries(json)) { + let div_id = k; + let parsed_html = parseHtml(v)[0]; + // Add the updated html to the data object. + this.data_obj[div_id] = { + element: parsed_html, + active: true, + }; + } + + this.applyFilter(); + } + + filterRows(obj) { + let filtered_rows = super.filterRows(obj); + let res = []; + for (let i = 0; i < filtered_rows.length; i += this.n_cols) { + res.push(filtered_rows.slice(i, i + this.n_cols).join("")); + } + return res; + } + + sortByName() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return STR_COLLATOR.compare( + this.data_obj[a].element.dataset.sortName, + this.data_obj[b].element.dataset.sortName, + ); + }); + } + + sortByPath() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return STR_COLLATOR.compare( + this.data_obj[a].element.dataset.sortPath, + this.data_obj[b].element.dataset.sortPath, + ); + }); + } + + sortByCreated() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return INT_COLLATOR.compare( + this.data_obj[a].element.dataset.sortCreated, + this.data_obj[b].element.dataset.sortCreated, + ); + }); + } + + sortByModified() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return INT_COLLATOR.compare( + this.data_obj[a].element.dataset.sortModified, + this.data_obj[b].element.dataset.sortModified, + ); + }); + } + + setSortMode(btn_sort_mode) { + this.sort_mode_str = btn_sort_mode.dataset.sortMode.toLowerCase(); + } + + setSortDir(btn_sort_dir) { + this.sort_dir_str = btn_sort_dir.dataset.sortDir.toLowerCase(); + } + + applySort() { + this.sort_reverse = this.sort_dir_str === "descending"; + + switch(this.sort_mode_str) { + case "name": + this.sort_fn = this.sortByName; + break; + case "path": + this.sort_fn = this.sortByPath; + break; + case "created": + this.sort_fn = this.sortByCreated; + break; + case "modified": + this.sort_fn = this.sortByModified; + break; + default: + this.sort_fn = this.sortByDivId; + break; + } + super.applySort(); + } + + applyFilter(filter_str) { + if (filter_str !== undefined) { + this.filter_str = filter_str.toLowerCase(); + } + + for (const [k, v] of Object.entries(this.data_obj)) { + let search_only = v.element.querySelector(".search_only"); + let text = Array.prototype.map.call(v.element.querySelectorAll(".search_terms"), function(t) { + return t.textContent.toLowerCase(); + }).join(" "); + + let visible = text.indexOf(this.filter_str) != -1; + if (search_only && this.filter_str.length < 4) { + visible = false; + } + this.data_obj[k].active = visible; + } + + this.applySort(); + this.updateRows(); + } +} \ No newline at end of file diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 4aeb14b41..8a233e710 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -173,6 +173,13 @@ R.tracking = false; document.body.classList.remove('resizing'); + + // Fire a custom event at end of resizing. + R.parent.dispatchEvent( + new CustomEvent("resizeHandleResized", { + bubbles: true, + }), + ); } }); }); diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index f4627ce8d..31ab4357f 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -4,6 +4,9 @@ import urllib.parse from pathlib import Path from typing import Optional, Union from dataclasses import dataclass +import gzip +import base64 +import re from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks, util from modules.images import read_info_from_image, save_image_with_geninfo @@ -32,6 +35,182 @@ class ExtraNetworksItem: """Wrapper for dictionaries representing ExtraNetworks items.""" item: dict +def build_row( + div_id: int, + tabname: str, + extra_networks_tabname: str, + label: str, + btn_type: str, + btn_copy_path_tpl: str, + btn_edit_item_tpl: str, + btn_metadata_tpl: str, + tree_row_tpl: str, + parent_id: Optional[int] = None, + data_depth: Optional[int] = None, + data_path: Optional[str] = None, + data_hash: Optional[str] = None, + data_prompt: Optional[str] = None, + data_neg_prompt: Optional[str] = None, + data_allow_neg: Optional[str] = None, + onclick_extra: Optional[str] = None, +) -> str: + if btn_type not in ["file", "dir"]: + raise ValueError("Invalid button type:", btn_type) + + subitem = "has-subitem" + action_list_item_action_leading = "" + action_list_item_visual_leading = "🗀" + action_list_item_action_trailing = "" + action_list_item_visual_trailing = "" + + if btn_type == "file": + subitem = "subitem" + action_list_item_visual_leading = "🗎" + # Action buttons + action_list_item_visual_trailing += '
    ' + action_list_item_visual_trailing += btn_copy_path_tpl.format( + **{"filename": data_path} + ) + action_list_item_visual_trailing += btn_edit_item_tpl.format( + **{ + "tabname": tabname, + "extra_networks_tabname": extra_networks_tabname, + "name": label, + } + ) + action_list_item_visual_trailing += btn_metadata_tpl.format( + **{"extra_networks_tabname": extra_networks_tabname, "name": label} + ) + action_list_item_visual_trailing += "
    " + + data_attributes = "" + data_attributes += f"data-path={data_path} " if data_path is not None else "" + data_attributes += f"data-hash={data_hash} " if data_hash is not None else "" + data_attributes += f"data-prompt={data_prompt} " if data_prompt else "" + data_attributes += f"data-neg-prompt={data_neg_prompt} " if data_neg_prompt else "" + data_attributes += f"data-allow-neg={data_allow_neg} " if data_allow_neg else "" + data_attributes += ( + f"data-tree-entry-type={btn_type} " if btn_type is not None else "" + ) + data_attributes += f"data-div-id={div_id} " if div_id is not None else "" + data_attributes += f"data-parent-id={parent_id} " if parent_id is not None else "" + data_attributes += f"data-depth={data_depth} " if data_depth is not None else "" + data_attributes += ( + "data-expanded " if parent_id is None else "" + ) # inverted to expand root + + res = tree_row_tpl.format( + **{ + "data_attributes": data_attributes, + "subitem": subitem, + "search_terms": "", + "btn_type": btn_type, + "tabname": tabname, + "onclick_extra": onclick_extra if onclick_extra else "", + "extra_networks_tabname": extra_networks_tabname, + "action_list_item_action_leading": action_list_item_action_leading, + "action_list_item_visual_leading": action_list_item_visual_leading, + "action_list_item_label": label, + "action_list_item_visual_trailing": action_list_item_visual_trailing, + "action_list_item_action_trailing": action_list_item_action_trailing, + } + ) + res = res.strip() + res = re.sub(" +", " ", res.replace("\n", "")) + return res + + +def build_tree( + tree: dict, + res: dict, + tabname: str, + extra_networks_tabname: str, + div_id: int, + depth: int, + btn_copy_path_tpl: str, + btn_edit_item_tpl: str, + btn_metadata_tpl: str, + tree_row_tpl: str, + allow_negative_prompt: Optional[bool] = None, + parent_id: Optional[int] = None, +) -> int: + for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])): + if not isinstance(v, (ExtraNetworksItem,)): + # dir + if div_id in res: + raise KeyError("div_id already in res:", div_id) + + res[div_id] = build_row( + div_id=div_id, + parent_id=parent_id, + tabname=tabname, + extra_networks_tabname=extra_networks_tabname, + label=k, + data_depth=depth, + data_path=k, + btn_type="dir", + btn_copy_path_tpl=btn_copy_path_tpl, + btn_edit_item_tpl=btn_edit_item_tpl, + btn_metadata_tpl=btn_metadata_tpl, + tree_row_tpl=tree_row_tpl, + ) + last_div_id = build_tree( + tree=v, + res=res, + depth=depth + 1, + div_id=div_id + 1, + parent_id=div_id, + tabname=tabname, + extra_networks_tabname=extra_networks_tabname, + allow_negative_prompt=allow_negative_prompt, + btn_copy_path_tpl=btn_copy_path_tpl, + btn_edit_item_tpl=btn_edit_item_tpl, + btn_metadata_tpl=btn_metadata_tpl, + tree_row_tpl=tree_row_tpl, + ) + div_id = last_div_id + else: + # file + if div_id in res: + raise KeyError("div_id already in res:", div_id) + + onclick = v.item.get("onclick", None) + if onclick is None: + # Don't quote prompt/neg_prompt since they are stored as js strings already. + onclick_js_tpl = ( + "cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});" + ) + onclick = onclick_js_tpl.format( + **{ + "tabname": tabname, + "prompt": v.item["prompt"], + "neg_prompt": v.item.get("negative_prompt", "''"), + "allow_neg": str(allow_negative_prompt).lower(), + } + ) + onclick = html.escape(onclick) + + res[div_id] = build_row( + div_id=div_id, + parent_id=parent_id, + tabname=tabname, + extra_networks_tabname=extra_networks_tabname, + label=v.item["name"], + data_depth=depth, + data_path=v.item["filename"], + data_hash=v.item["shorthash"], + data_prompt=html.escape(v.item.get("prompt", "''")), + data_neg_prompt=html.escape(v.item.get("negative_prompt", "''")), + data_allow_neg=str(allow_negative_prompt).lower(), + onclick_extra=onclick, + btn_type="file", + btn_copy_path_tpl=btn_copy_path_tpl, + btn_edit_item_tpl=btn_edit_item_tpl, + btn_metadata_tpl=btn_metadata_tpl, + tree_row_tpl=tree_row_tpl, + ) + div_id += 1 + return div_id def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem]) -> dict: """Recursively builds a directory tree. @@ -167,10 +346,11 @@ class ExtraNetworksPage: self.pane_content_tree_tpl = shared.html("extra-networks-pane-tree.html") self.pane_content_dirs_tpl = shared.html("extra-networks-pane-dirs.html") self.card_tpl = shared.html("extra-networks-card.html") - self.btn_tree_tpl = shared.html("extra-networks-tree-button.html") + self.tree_row_tpl = shared.html("extra-networks-tree-row.html") self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html") self.btn_metadata_tpl = shared.html("extra-networks-metadata-button.html") self.btn_edit_item_tpl = shared.html("extra-networks-edit-item-button.html") + self.btn_dirs_view_tpl = shared.html("extra-networks-dirs-view-button.html") def refresh(self): pass @@ -204,6 +384,7 @@ class ExtraNetworksPage: tabname: str, item: dict, template: Optional[str] = None, + div_id: Optional[int] = None, ) -> Union[str, dict]: """Generates HTML for a single ExtraNetworks Item. @@ -297,6 +478,7 @@ class ExtraNetworksPage: # Some items here might not be used depending on HTML template used. args = { + "div_id": "" if div_id is None else div_id, "background_image": background_image, "card_clicked": onclick, "copy_path_button": btn_copy_path, @@ -305,7 +487,6 @@ class ExtraNetworksPage: "local_preview": quote_js(item["local_preview"]), "metadata_button": btn_metadata, "name": html.escape(item["name"]), - "prompt": item.get("prompt", None), "save_card_preview": html.escape(f"return saveCardPreview(event, '{tabname}', '{item['local_preview']}');"), "search_only": " search_only" if search_only else "", "search_terms": search_terms_html, @@ -313,6 +494,9 @@ class ExtraNetworksPage: "style": card_style, "tabname": tabname, "extra_networks_tabname": self.extra_networks_tabname, + "data_prompt": item.get("prompt", "''"), + "data_neg_prompt": item.get("negative_prompt", "''"), + "data_allow_neg": str(self.allow_negative_prompt).lower(), } if template: @@ -320,108 +504,6 @@ class ExtraNetworksPage: else: return args - def create_tree_dir_item_html( - self, - tabname: str, - dir_path: str, - content: Optional[str] = None, - ) -> Optional[str]: - """Generates HTML for a directory item in the tree. - - The generated HTML is of the format: - ```html -
  • -
    -
      - {content} -
    -
    • - ``` - - Args: - tabname: The name of the active tab. - dir_path: Path to the directory for this item. - content: Optional HTML string that will be wrapped by this
      . - - Returns: - HTML formatted string. - """ - if not content: - return None - - btn = self.btn_tree_tpl.format( - **{ - "search_terms": "", - "subclass": "tree-list-content-dir", - "tabname": tabname, - "extra_networks_tabname": self.extra_networks_tabname, - "onclick_extra": "", - "data_path": dir_path, - "data_hash": "", - "action_list_item_action_leading": "", - "action_list_item_visual_leading": "🗀", - "action_list_item_label": os.path.basename(dir_path), - "action_list_item_visual_trailing": "", - "action_list_item_action_trailing": "", - } - ) - ul = f"" - return ( - "
    • " - f"{btn}{ul}" - "
      • " - ) - - def create_tree_file_item_html(self, tabname: str, file_path: str, item: dict) -> str: - """Generates HTML for a file item in the tree. - - The generated HTML is of the format: - ```html -
    • - -
      -
      • - ``` - - Args: - tabname: The name of the active tab. - file_path: The path to the file for this item. - item: Dictionary containing the item information. - - Returns: - HTML formatted string. - """ - item_html_args = self.create_item_html(tabname, item) - action_buttons = "".join( - [ - item_html_args["copy_path_button"], - item_html_args["metadata_button"], - item_html_args["edit_button"], - ] - ) - action_buttons = f"
      {action_buttons}
      " - btn = self.btn_tree_tpl.format( - **{ - "search_terms": "", - "subclass": "tree-list-content-file", - "tabname": tabname, - "extra_networks_tabname": self.extra_networks_tabname, - "onclick_extra": item_html_args["card_clicked"], - "data_path": file_path, - "data_hash": item["shorthash"], - "action_list_item_action_leading": "", - "action_list_item_visual_leading": "🗎", - "action_list_item_label": item["name"], - "action_list_item_visual_trailing": "", - "action_list_item_action_trailing": action_buttons, - } - ) - return ( - "
    • " - f"{btn}" - "
      • " - ) - def create_tree_view_html(self, tabname: str) -> str: """Generates HTML for displaying folders in a tree view. @@ -431,7 +513,7 @@ class ExtraNetworksPage: Returns: HTML string generated for this tree view. """ - res = "" + res = {} # Setup the tree dictionary. roots = self.allowed_directories_for_previews() @@ -441,43 +523,24 @@ class ExtraNetworksPage: if not tree: return res - def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]: - """Recursively builds HTML for a tree. - - Args: - data: Dictionary representing a directory tree. Can be NoneType. - Data keys should be absolute paths from the root and values - should be subdirectory trees or an ExtraNetworksItem. - - Returns: - If data is not None: HTML string - Else: None - """ - if not data: - return None - - # Lists for storing
    • items html for directories and files separately. - _dir_li = [] - _file_li = [] - - for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])): - if isinstance(v, (ExtraNetworksItem,)): - _file_li.append(self.create_tree_file_item_html(tabname, k, v.item)) - else: - _dir_li.append(self.create_tree_dir_item_html(tabname, k, _build_tree(v))) - - # Directories should always be displayed before files so we order them here. - return "".join(_dir_li) + "".join(_file_li) - - # Add each root directory to the tree. - for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])): - item_html = self.create_tree_dir_item_html(tabname, k, _build_tree(v)) - # Only add non-empty entries to the tree. - if item_html is not None: - res += item_html - - return f"
        {res}
      " + build_tree( + tree=tree, + res=res, + depth=0, + div_id=0, + parent_id=None, + tabname=tabname, + extra_networks_tabname=self.extra_networks_tabname, + allow_negative_prompt=self.allow_negative_prompt, + btn_copy_path_tpl=self.btn_copy_path_tpl, + btn_edit_item_tpl=self.btn_edit_item_tpl, + btn_metadata_tpl=self.btn_metadata_tpl, + tree_row_tpl=self.tree_row_tpl, + ) + res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") + return f'' + # FIXME def create_dirs_view_html(self, tabname: str) -> str: """Generates HTML for displaying folders.""" @@ -511,12 +574,12 @@ class ExtraNetworksPage: if subdirs: subdirs = {"": 1, **subdirs} - subdirs_html = "".join([f""" - - """ for subdir in subdirs]) - + subdirs_html = "".join([ + self.btn_dirs_view_tpl.format(**{ + "extra_class": "search-all" if subdir == "" else "", + "tabname_full": f"{tabname}_{self.extra_networks_tabname}", + }) for subdir in subdirs + ]) return subdirs_html def create_card_view_html(self, tabname: str, *, none_message) -> str: @@ -532,15 +595,12 @@ class ExtraNetworksPage: Returns: HTML formatted string. """ - res = [] - for item in self.items.values(): - res.append(self.create_item_html(tabname, item, self.card_tpl)) + res = {} + for i, item in self.items.values(): + res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i) - if not res: - dirs = "".join([f"
    • {x}
      • " for x in self.allowed_directories_for_previews()]) - res = [none_message or shared.html("extra-networks-no-cards.html").format(dirs=dirs)] - - return "".join(res) + res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") + return f'' def create_html(self, tabname, *, empty=False): """Generates an HTML string for the current pane. @@ -574,13 +634,14 @@ class ExtraNetworksPage: page_params = { "tabname": tabname, "extra_networks_tabname": self.extra_networks_tabname, - "data_sortdir": shared.opts.extra_networks_card_order, + "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(), + "data_sort_mode": shared.opts.extra_networks_card_order_field.lower().strip(), "sort_path_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '', "sort_name_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '', "sort_date_created_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '', "sort_date_modified_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '', "tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "", - "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), + "cards_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width, "tree_view_div_default_display_class": "" if show_tree else "extra-network-dirs-hidden", } @@ -722,10 +783,10 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): for page, tab in zip(ui.stored_extra_pages, related_tabs): jscode = ( - "function(){{" + "function(){" f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()}, '{tabname}_{page.extra_networks_tabname}');" f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" - "}}" + "}" ) tab.select(fn=None, _js=jscode, inputs=[], outputs=[], show_progress=False) @@ -736,7 +797,17 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): return ui.pages_contents button_refresh = gr.Button("Refresh", elem_id=f"{tabname}_{page.extra_networks_tabname}_extra_refresh_internal", visible=False) - button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js="function(){ " + f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" + " }").then(fn=lambda: None, _js='setupAllResizeHandles') + button_refresh.click( + fn=refresh, + inputs=[], + outputs=ui.pages, + ).then( + fn=lambda: None, + _js='setupAllResizeHandles' + ).then( + fn=lambda: None, + _js=f"function(){{ extraNetworksRefreshTab('{tabname}_{page.extra_networks_tabname}'); }}", + ) def create_html(): ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages] @@ -746,7 +817,17 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): create_html() return ui.pages_contents - interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupAllResizeHandles') + interface.load( + fn=pages_html, + inputs=[], + outputs=ui.pages, + ).then( + fn=lambda: None, + _js="setupAllResizeHandles", + ).then( + fn=lambda: None, + _js="setupExtraNetworksData", + ) return ui diff --git a/modules/ui_gradio_extensions.py b/modules/ui_gradio_extensions.py index f5278d22f..9b83c76a9 100644 --- a/modules/ui_gradio_extensions.py +++ b/modules/ui_gradio_extensions.py @@ -25,6 +25,9 @@ def javascript_html(): if shared.cmd_opts.theme: head += f'\n' + # Allows for very large scrollable regions without bloating DOM. + head += '\n' + return head @@ -37,6 +40,9 @@ def css_html(): for cssfile in scripts.list_files_with_name("style.css"): head += stylesheet(cssfile) + # Used by clusterize.js + head += '' + user_css = os.path.join(data_path, "user.css") if os.path.exists(user_css): head += stylesheet(user_css) diff --git a/style.css b/style.css index 29eae4127..a30355bd6 100644 --- a/style.css +++ b/style.css @@ -949,9 +949,6 @@ footer { display: inline-flex; visibility: hidden; color: white; -} - -.extra-network-pane .card .button-row { position: absolute; right: 0; z-index: 1; @@ -963,6 +960,11 @@ footer { .extra-network-pane .card-button{ color: white; + width: 1.5em; + text-shadow: 2px 2px 3px black; + color: white; + padding: 0.25em 0.1em; + font-size: 2rem; } .extra-network-pane .copy-path-button::before { @@ -977,25 +979,10 @@ footer { content: "🛠"; } -.extra-network-pane .card-button { - width: 1.5em; - text-shadow: 2px 2px 3px black; - color: white; - padding: 0.25em 0.1em; -} - .extra-network-pane .card-button:hover{ color: red; } -.extra-network-pane .card .card-button { - font-size: 2rem; -} - -.extra-network-pane .card-minimal .card-button { - font-size: 1rem; -} - .standalone-card-preview.card .preview{ position: absolute; object-fit: cover; @@ -1196,6 +1183,26 @@ body.resizing .resize-handle { } /* ========================= */ +.clusterize-scroll::-webkit-scrollbar { + background-color: transparent; + width: 16px; +} + +.clusterize-scroll::-webkit-scrollbar-track { + background-color: transparent; + background-clip: content-box; +} + +.clusterize-scroll::-webkit-scrollbar-thumb { + background-color: var(--border-color-primary); + border-radius: 16px; + border: 4px solid var(--background-fill-primary); +} + +.clusterize-scroll::-webkit-scrollbar-button { + display: none; +} + .extra-network-pane { display: flex; height: calc(100vh - 24rem); @@ -1295,53 +1302,6 @@ body.resizing .resize-handle { margin: 0 0.5rem 0 0.75rem; } -.extra-network-tree .tree-list--tree {} - -/* Remove auto indentation from tree. Will be overridden later. */ -.extra-network-tree .tree-list--subgroup { - margin: 0 !important; - padding: 0 !important; - box-shadow: 0.5rem 0 0 var(--body-background-fill) inset, - 0.7rem 0 0 var(--neutral-800) inset; -} - -/* Set indentation for each depth of tree. */ -.extra-network-tree .tree-list--subgroup > .tree-list-item { - margin-left: 0.4rem !important; - padding-left: 0.4rem !important; -} - -/* Styles for tree
    • elements. */ -.extra-network-tree .tree-list-item { - list-style: none; - position: relative; - background-color: transparent; -} - -/* Directory
        visibility based on data-expanded attribute. */ -.extra-network-tree .tree-list-content+.tree-list--subgroup { - height: 0; - visibility: hidden; - opacity: 0; -} - -.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup { - height: auto; - visibility: visible; - opacity: 1; -} - -/* File
      • */ -.extra-network-tree .tree-list-item--subitem { - padding-top: 0 !important; - padding-bottom: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -/*
      • containing
          */ -.extra-network-tree .tree-list-item--has-subitem {} - /* BUTTON ELEMENTS */ /*