aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--extensions-builtin/Lora/ui_extra_networks_lora.py5
-rw-r--r--html/extra-networks-card-minimal.html4
-rw-r--r--html/extra-networks-card.html5
-rw-r--r--html/extra-networks-pane.html8
-rw-r--r--html/extra-networks-tree-directory.html4
-rw-r--r--html/extra-networks-tree-file.html1
-rw-r--r--javascript/extraNetworks.js55
-rw-r--r--modules/ui_extra_networks.py367
-rw-r--r--modules/ui_extra_networks_checkpoints.py5
-rw-r--r--modules/ui_extra_networks_hypernets.py6
-rw-r--r--modules/ui_extra_networks_textual_inversion.py5
-rw-r--r--style.css192
12 files changed, 481 insertions, 176 deletions
diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py
index e714fac4..66d15dd0 100644
--- a/extensions-builtin/Lora/ui_extra_networks_lora.py
+++ b/extensions-builtin/Lora/ui_extra_networks_lora.py
@@ -24,13 +24,16 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
alias = lora_on_disk.get_alias()
+ search_terms = [self.search_terms_from_path(lora_on_disk.filename)]
+ if lora_on_disk.hash:
+ search_terms.append(lora_on_disk.hash)
item = {
"name": name,
"filename": lora_on_disk.filename,
"shorthash": lora_on_disk.shorthash,
"preview": self.find_preview(path),
"description": self.find_description(path),
- "search_term": self.search_terms_from_path(lora_on_disk.filename) + " " + (lora_on_disk.hash or ""),
+ "search_terms": search_terms,
"local_preview": f"{path}.{shared.opts.samples_format}",
"metadata": lora_on_disk.metadata,
"sort_keys": {'default': index, **self.get_sort_keys(lora_on_disk.filename)},
diff --git a/html/extra-networks-card-minimal.html b/html/extra-networks-card-minimal.html
new file mode 100644
index 00000000..d66df7df
--- /dev/null
+++ b/html/extra-networks-card-minimal.html
@@ -0,0 +1,4 @@
+<div class="card-minimal" onclick={card_clicked} data-name="{name}">
+ <span class="name">{name}</span>
+ <span class="button-row">{copy_path_button}{metadata_button}{edit_button}</span>
+</div>
diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html
index 39674666..d163fe37 100644
--- a/html/extra-networks-card.html
+++ b/html/extra-networks-card.html
@@ -1,13 +1,12 @@
<div class='card' style={style} onclick={card_clicked} data-name="{name}" {sort_keys}>
{background_image}
<div class="button-row">
+ {copy_path_button}
{metadata_button}
{edit_button}
</div>
<div class='actions'>
- <div class='additional'>
- <span style="display:none" class='search_term{search_only}'>{search_term}</span>
- </div>
+ <div class='additional'>{search_terms}</div>
<span class='name'>{name}</span>
<span class='description'>{description}</span>
</div>
diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
new file mode 100644
index 00000000..20cf6686
--- /dev/null
+++ b/html/extra-networks-pane.html
@@ -0,0 +1,8 @@
+<div id='{tabname}_{network_type_id}_pane' class='extra-network-pane'>
+ <div id='{tabname}_{network_type_id}_tree' class='extra-network-tree'>
+ {tree_html}
+ </div>
+ <div id='{tabname}_{network_type_id}_cards' class='extra-network-cards'>
+ {items_html}
+ </div>
+</div> \ No newline at end of file
diff --git a/html/extra-networks-tree-directory.html b/html/extra-networks-tree-directory.html
new file mode 100644
index 00000000..cec15588
--- /dev/null
+++ b/html/extra-networks-tree-directory.html
@@ -0,0 +1,4 @@
+<details {attributes} class='folder-item' ontoggle='extraNetworksFolderClick(event, "{tabname}_extra_search");'>
+<summary class='folder-item-summary'>{folder_name}</summary>
+{content}
+</details> \ No newline at end of file
diff --git a/html/extra-networks-tree-file.html b/html/extra-networks-tree-file.html
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/html/extra-networks-tree-file.html
@@ -0,0 +1 @@
+
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index f1ad19a6..3e3b03f3 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -24,8 +24,6 @@ function setupExtraNetworksForTab(tabname) {
var sort = gradioApp().getElementById(tabname + '_extra_sort');
var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
- var showDirsDiv = gradioApp().getElementById(tabname + '_extra_show_dirs');
- var showDirs = gradioApp().querySelector('#' + tabname + '_extra_show_dirs input');
var promptContainer = gradioApp().querySelector('.prompt-container-compact#' + tabname + '_prompt_container');
var negativePrompt = gradioApp().querySelector('#' + tabname + '_neg_prompt');
@@ -33,14 +31,14 @@ function setupExtraNetworksForTab(tabname) {
tabs.appendChild(sort);
tabs.appendChild(sortOrder);
tabs.appendChild(refresh);
- tabs.appendChild(showDirsDiv);
var applyFilter = function() {
var searchTerm = search.value.toLowerCase();
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
var searchOnly = elem.querySelector('.search_only');
- var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
+
+ var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) { return t.textContent.toLowerCase() }).join(" ");
var visible = text.indexOf(searchTerm) != -1;
@@ -100,15 +98,6 @@ function setupExtraNetworksForTab(tabname) {
extraNetworksApplySort[tabname] = applySort;
extraNetworksApplyFilter[tabname] = applyFilter;
-
- var showDirsUpdate = function() {
- var css = '#' + tabname + '_extra_tabs .extra-network-subdirs { display: none; }';
- toggleCss(tabname + '_extra_show_dirs_style', css, !showDirs.checked);
- localSet('extra-networks-show-dirs', showDirs.checked ? 1 : 0);
- };
- showDirs.checked = localGet('extra-networks-show-dirs', 1) == 1;
- showDirs.addEventListener("change", showDirsUpdate);
- showDirsUpdate();
}
function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) {
@@ -136,14 +125,23 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp
}
}
+function clearSearch(tabname) {
+ // Clear search box.
+ var tab_id = tabname + "_extra_search";
+ var searchTextarea = gradioApp().querySelector("#" + tab_id + ' > label > textarea');
+ searchTextarea.value = "";
+ updateInput(searchTextarea);
+}
+
-function extraNetworksUrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate)
+function extraNetworksUnrelatedTabSelected(tabname) { // called from python when user selects an unrelated tab (generate)
extraNetworksMovePromptToTab(tabname, '', false, false);
+ clearSearch(tabname);
}
function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt) { // called from python when user selects an extra networks tab
extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
-
+ clearSearch(tabname);
}
function applyExtraNetworkFilter(tabname) {
@@ -264,6 +262,28 @@ function saveCardPreview(event, tabname, filename) {
event.preventDefault();
}
+function extraNetworksFolderClick(event, tabs_id) {
+ // If folder is open but not selected, we don't want to collapse it. Instead
+ // we override the removal of the "open" attribute so that the folder is
+ // only selected but remains open. Since this is a toggle event, removing
+ // the "open" attribute instead forces the event to add it back which keeps it open.
+ if (event.target.parentElement.open && !event.target.classList.contains("selected")) {
+ // before event handler removes "open"
+ event.target.parentElement.removeAttribute("open");
+ }
+
+ var els = document.querySelectorAll(".folder-item-summary.selected");
+ [...els].forEach(el => {
+ el.classList.remove("selected");
+ });
+ event.target.classList.add("selected");
+
+ var searchTextArea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
+ var text = event.target.classList.contains("search-all") ? "" : event.target.getAttribute("data-path");
+ searchTextArea.value = text;
+ updateInput(searchTextArea);
+}
+
function extraNetworksSearchButton(tabs_id, event) {
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
var button = event.target;
@@ -348,6 +368,11 @@ function requestGet(url, data, handler, errorHandler) {
xhr.send(js);
}
+function extraNetworksCopyCardPath(event, path) {
+ navigator.clipboard.writeText(path);
+ event.stopPropagation();
+}
+
function extraNetworksRequestMetadata(event, extraPage, cardName) {
var showError = function() {
extraNetworksShowMetadata("there was an error getting metadata");
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 62db36f5..093ac7b4 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -2,6 +2,8 @@ import functools
import os.path
import urllib.parse
from pathlib import Path
+from typing import Optional, Union
+from dataclasses import dataclass
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
@@ -15,10 +17,8 @@ from modules.ui_components import ToolButton
extra_pages = []
allowed_dirs = set()
-
default_allowed_preview_extensions = ["png", "jpg", "jpeg", "webp", "gif"]
-
@functools.cache
def allowed_preview_extensions_with_extra(extra_extensions=None):
return set(default_allowed_preview_extensions) | set(extra_extensions or [])
@@ -28,6 +28,62 @@ def allowed_preview_extensions():
return allowed_preview_extensions_with_extra((shared.opts.samples_format, ))
+@dataclass
+class ExtraNetworksItem:
+ """Wrapper for dictionaries representing ExtraNetworks items."""
+ item: dict
+
+
+def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem]) -> dict:
+ """Recursively builds a directory tree.
+
+ Args:
+ paths: Path or list of paths to directories. These paths are treated as roots from which
+ the tree will be built.
+ items: A dictionary associating filepaths to an ExtraNetworksItem instance.
+
+ Returns:
+ The result directory tree.
+ """
+ if isinstance(paths, (str,)):
+ paths = [paths]
+
+ def _get_tree(_paths: list[str], _root: str):
+ _res = {}
+ for path in _paths:
+ relpath = os.path.relpath(path, _root)
+ if os.path.isdir(path):
+ dir_items = os.listdir(path)
+ # Ignore empty directories.
+ if not dir_items:
+ continue
+ dir_tree = _get_tree([os.path.join(path, x) for x in dir_items], _root)
+ # We only want to store non-empty folders in the tree.
+ if dir_tree:
+ _res[relpath] = dir_tree
+ else:
+ if path not in items:
+ continue
+ # Add the ExtraNetworksItem to the result.
+ _res[relpath] = items[path]
+ return _res
+
+ res = {}
+ # Handle each root directory separately.
+ # Each root WILL have a key/value at the root of the result dict though
+ # the value can be an empty dict if the directory is empty. We want these
+ # placeholders for empty dirs so we can inform the user later.
+ for path in paths:
+ root = os.path.dirname(path)
+ relpath = os.path.relpath(path, root)
+ # Wrap the path in a list since that is what the `_get_tree` expects.
+ res[relpath] = _get_tree([path], root)
+ if res[relpath]:
+ # We need to pull the inner path out one for these root dirs.
+ res[relpath] = res[relpath][relpath]
+
+ return res
+
def register_page(page):
"""registers extra networks page for the UI; recommend doing it in on_before_ui() callback for extensions"""
@@ -80,7 +136,7 @@ def get_single_card(page: str = "", tabname: str = "", name: str = ""):
item = page.items.get(name)
page.read_user_metadata(item)
- item_html = page.create_html_for_item(item, tabname)
+ item_html = page.create_item_html(tabname, item)
return JSONResponse({"html": item_html})
@@ -96,13 +152,14 @@ def quote_js(s):
s = s.replace('"', '\\"')
return f'"{s}"'
-
class ExtraNetworksPage:
def __init__(self, title):
self.title = title
self.name = title.lower()
self.id_page = self.name.replace(" ", "_")
- self.card_page = shared.html("extra-networks-card.html")
+ self.extra_networks_pane_template = shared.html("extra-networks-pane.html")
+ self.card_page_template = shared.html("extra-networks-card.html")
+ self.card_page_minimal_template = shared.html("extra-networks-card-minimal.html")
self.allow_prompt = True
self.allow_negative_prompt = False
self.metadata = {}
@@ -129,100 +186,35 @@ class ExtraNetworksPage:
def search_terms_from_path(self, filename, possible_directories=None):
abspath = os.path.abspath(filename)
-
for parentdir in (possible_directories if possible_directories is not None else self.allowed_directories_for_previews()):
- parentdir = os.path.abspath(parentdir)
+ parentdir = os.path.dirname(os.path.abspath(parentdir))
if abspath.startswith(parentdir):
- return abspath[len(parentdir):].replace('\\', '/')
+ return os.path.relpath(abspath, parentdir)
return ""
- def create_html(self, tabname):
- self.lister.reset()
-
- items_html = ''
-
- self.metadata = {}
-
- subdirs = {}
- for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
- for root, dirs, _ in sorted(os.walk(parentdir, followlinks=True), key=lambda x: shared.natural_sort_key(x[0])):
- for dirname in sorted(dirs, key=shared.natural_sort_key):
- x = os.path.join(root, dirname)
-
- if not os.path.isdir(x):
- continue
-
- subdir = os.path.abspath(x)[len(parentdir):].replace("\\", "/")
-
- if shared.opts.extra_networks_dir_button_function:
- if not subdir.startswith("/"):
- subdir = "/" + subdir
- else:
- while subdir.startswith("/"):
- subdir = subdir[1:]
-
- is_empty = len(os.listdir(x)) == 0
- if not is_empty and not subdir.endswith("/"):
- subdir = subdir + "/"
-
- if ("/." in subdir or subdir.startswith(".")) and not shared.opts.extra_networks_show_hidden_directories:
- continue
-
- subdirs[subdir] = 1
-
- if subdirs:
- subdirs = {"": 1, **subdirs}
-
- subdirs_html = "".join([f"""
-<button class='lg secondary gradio-button custom-button{" search-all" if subdir=="" else ""}' onclick='extraNetworksSearchButton("{tabname}_extra_search", event)'>
-{html.escape(subdir if subdir!="" else "all")}
-</button>
-""" for subdir in subdirs])
-
- self.items = {x["name"]: x for x in self.list_items()}
- for item in self.items.values():
- metadata = item.get("metadata")
- if metadata:
- self.metadata[item["name"]] = metadata
-
- if "user_metadata" not in item:
- self.read_user_metadata(item)
-
- items_html += self.create_html_for_item(item, tabname)
+ def create_item_html(self, tabname: str, item: dict, template: Optional[str] = None) -> str:
+ """Generates HTML for a single ExtraNetworks Item
- if items_html == '':
- dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
- items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
-
- self_name_id = self.name.replace(" ", "_")
+ Args:
+ tabname: The name of the active tab.
+ item: Dictionary containing item information.
- res = f"""
-<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs extra-network-subdirs-cards'>
-{subdirs_html}
-</div>
-<div id='{tabname}_{self_name_id}_cards' class='extra-network-cards'>
-{items_html}
-</div>
-"""
-
- return res
-
- def create_item(self, name, index=None):
- raise NotImplementedError()
-
- def list_items(self):
- raise NotImplementedError()
-
- def allowed_directories_for_previews(self):
- return []
-
- def create_html_for_item(self, item, tabname):
- """
- Create HTML for card item in tab tabname; can return empty string if the item is not meant to be shown.
+ Returns:
+ HTML string generated for this item.
+ Can be empty if the item is not meant to be shown.
"""
+ metadata = item.get("metadata")
+ if metadata:
+ self.metadata[item["name"]] = metadata
+
+ if "user_metadata" not in item:
+ self.read_user_metadata(item)
preview = item.get("preview", None)
+ height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
+ width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
+ background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
onclick = item.get("onclick", None)
if onclick is None:
@@ -231,9 +223,8 @@ class ExtraNetworksPage:
else:
onclick = '"' + html.escape(f"""return cardClicked({quote_js(tabname)}, {item["prompt"]}, {'""'}, {"true" if self.allow_negative_prompt else "false"})""") + '"'
- height = f"height: {shared.opts.extra_networks_card_height}px;" if shared.opts.extra_networks_card_height else ''
- width = f"width: {shared.opts.extra_networks_card_width}px;" if shared.opts.extra_networks_card_width else ''
- background_image = f'<img src="{html.escape(preview)}" class="preview" loading="lazy">' if preview else ''
+ copy_path_button = f"<div class='copy-path-button card-button' title='Copy path to clipboard' onclick='extraNetworksCopyCardPath(event, {quote_js(item['filename'])})' data-clipboard-text='{quote_js(item['filename'])}'></div>"
+
metadata_button = ""
metadata = item.get("metadata")
if metadata:
@@ -261,24 +252,148 @@ class ExtraNetworksPage:
sort_keys = " ".join([f'data-sort-{k}="{html.escape(str(v))}"' for k, v in item.get("sort_keys", {}).items()]).strip()
+ search_terms_html = ""
+ search_term_template = "<span style='{style}' class='{class}'>{search_term}</span>"
+ for search_term in item.get("search_terms", []):
+ search_terms_html += search_term_template.format(
+ **{
+ "style": "display: none;",
+ "class": "search_terms" + (" search_only" if search_only else ""),
+ "search_term": search_term,
+ }
+ )
+
+ # Some items here might not be used depending on HTML template used.
args = {
"background_image": background_image,
- "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
- "prompt": item.get("prompt", None),
- "tabname": quote_js(tabname),
+ "card_clicked": onclick,
+ "copy_path_button": copy_path_button,
+ "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),
+ "edit_button": edit_button,
"local_preview": quote_js(item["local_preview"]),
+ "metadata_button": metadata_button,
"name": html.escape(item["name"]),
- "description": (item.get("description") or "" if shared.opts.extra_networks_card_show_desc else ""),
- "card_clicked": onclick,
+ "prompt": item.get("prompt", None),
"save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
- "search_term": item.get("search_term", ""),
- "metadata_button": metadata_button,
- "edit_button": edit_button,
"search_only": " search_only" if search_only else "",
+ "search_terms": search_terms_html,
"sort_keys": sort_keys,
+ "style": f"'display: none; {height}{width}; font-size: {shared.opts.extra_networks_card_text_scale*100}%'",
+ "tabname": quote_js(tabname),
}
- return self.card_page.format(**args)
+ if template:
+ return template.format(**args)
+ else:
+ return self.card_page.format(**args)
+
+ def create_tree_view_html(self, tabname: str) -> str:
+ """Generates HTML for displaying folders in a tree view.
+
+ Args:
+ tabname: The name of the active tab.
+
+ Returns:
+ HTML string generated for this tree view.
+ """
+ res = ""
+
+ # Generate HTML for the tree.
+ roots = self.allowed_directories_for_previews()
+ tree_items = {v["filename"]: ExtraNetworksItem(v) for v in self.items.values()}
+ tree = get_tree([os.path.abspath(x) for x in roots], items=tree_items)
+
+ if not tree:
+ return res
+
+ file_template = "<li class='file-item'>{card}</li>"
+ dir_template = (
+ "<details {attributes} class='folder-item'>"
+ "<summary class='folder-item-summary' data-path='{data_path}' "
+ "onclick='extraNetworksFolderClick(event, \"{tabname}_extra_search\");'>"
+ "{folder_name}"
+ "</summary>"
+ "<ul class='folder-container'>{content}</ul>"
+ "</details>"
+ )
+
+ def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> str:
+ """Recursively builds HTML for a tree."""
+ _res = ""
+ if not data:
+ return "<li style='list-style-type: \"⚠️\";'>DIRECTORY IS EMPTY</li>"
+
+ for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])):
+ if isinstance(v, (ExtraNetworksItem,)):
+ item_html = self.create_item_html(tabname, v.item, self.card_page_minimal_template)
+ _res += file_template.format(**{"card": item_html})
+ else:
+ _res += dir_template.format(
+ **{
+ "attributes": "",
+ "tabname": tabname,
+ "folder_name": os.path.basename(k),
+ "data_path": k,
+ "content": _build_tree(v),
+ }
+ )
+ return _res
+
+ # Add each root directory to the tree.
+ for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])):
+ # If root is empty, append the "disabled" attribute to the template details tag.
+ res += "<ul class='folder-container'>"
+ res += dir_template.format(
+ **{
+ "attributes": "open" if v else "open",
+ "tabname": tabname,
+ "folder_name": os.path.basename(k),
+ "data_path": k,
+ "content": _build_tree(v),
+ }
+ )
+ res += "</ul>"
+ res += "</ul>"
+ return res
+
+ def create_card_view_html(self, tabname):
+ res = ""
+ self.items = {x["name"]: x for x in self.list_items()}
+ for item in self.items.values():
+ res += self.create_item_html(tabname, item, self.card_page_template)
+
+ if res == "":
+ dirs = "".join([f"<li>{x}</li>" for x in self.allowed_directories_for_previews()])
+ res = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
+
+ return res
+
+ def create_html(self, tabname):
+ self.lister.reset()
+ self.metadata = {}
+ self.items = {x["name"]: x for x in self.list_items()}
+
+ tree_view_html = self.create_tree_view_html(tabname)
+ card_view_html = self.create_card_view_html(tabname)
+ network_type_id = self.name.replace(" ", "_")
+
+ return self.extra_networks_pane_template.format(
+ **{
+ "tabname": tabname,
+ "network_type_id": network_type_id,
+ "tree_html": tree_view_html,
+ "items_html": card_view_html,
+ }
+ )
+
+ def create_item(self, name, index=None):
+ raise NotImplementedError()
+
+ def list_items(self):
+ raise NotImplementedError()
+
+ def allowed_directories_for_previews(self):
+ return []
def get_sort_keys(self, path):
"""
@@ -369,7 +484,6 @@ def pages_in_preferred_order(pages):
return sorted(pages, key=lambda x: tab_scores[x.name])
-
def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
from modules.ui import switch_values_symbol
@@ -390,8 +504,12 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
elem_id = f"{tabname}_{page.id_page}_cards_html"
page_elem = gr.HTML('Loading...', elem_id=elem_id)
ui.pages.append(page_elem)
-
- page_elem.change(fn=lambda: None, _js='function(){applyExtraNetworkFilter(' + quote_js(tabname) + '); return []}', inputs=[], outputs=[])
+ page_elem.change(
+ fn=lambda: None,
+ _js=f"function(){{applyExtraNetworkFilter({tabname}_extra_search); return []}}",
+ inputs=[],
+ outputs=[],
+ )
editor = page.create_user_metadata_editor(ui, tabname)
editor.create_ui()
@@ -399,27 +517,50 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
related_tabs.append(tab)
- edit_search = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
+ edit_search = gr.Textbox('', show_label=False, elem_id=f"{tabname}_extra_search", elem_classes="search", placeholder="Search...", visible=False, interactive=True)
dropdown_sort = gr.Dropdown(choices=['Path', 'Name', 'Date Created', 'Date Modified', ], value=shared.opts.extra_networks_card_order_field, elem_id=tabname+"_extra_sort", elem_classes="sort", multiselect=False, visible=False, show_label=False, interactive=True, label=tabname+"_extra_sort_order")
button_sortorder = ToolButton(switch_values_symbol, elem_id=tabname+"_extra_sortorder", elem_classes=["sortorder"] + ([] if shared.opts.extra_networks_card_order == "Ascending" else ["sortReverse"]), visible=False, tooltip="Invert sort order")
button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh", visible=False)
- checkbox_show_dirs = gr.Checkbox(True, label='Show dirs', elem_id=tabname+"_extra_show_dirs", elem_classes="show-dirs", visible=False)
+
+ tab_controls = [
+ edit_search,
+ dropdown_sort,
+ button_sortorder,
+ button_refresh,
+ ]
ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)
ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=tabname+"_preview_filename", visible=False)
- tab_controls = [edit_search, dropdown_sort, button_sortorder, button_refresh, checkbox_show_dirs]
-
for tab in unrelated_tabs:
- tab.select(fn=lambda: [gr.update(visible=False) for _ in tab_controls], _js='function(){ extraNetworksUrelatedTabSelected("' + tabname + '"); }', inputs=[], outputs=tab_controls, show_progress=False)
+ tab.select(
+ fn=lambda: [gr.update(visible=False) for _ in tab_controls],
+ _js=f"function(){{ extraNetworksUnrelatedTabSelected('{tabname}'); }}",
+ inputs=[],
+ outputs=tab_controls,
+ show_progress=False,
+ )
for page, tab in zip(ui.stored_extra_pages, related_tabs):
allow_prompt = "true" if page.allow_prompt else "false"
allow_negative_prompt = "true" if page.allow_negative_prompt else "false"
- jscode = 'extraNetworksTabSelected("' + tabname + '", "' + f"{tabname}_{page.id_page}_prompts" + '", ' + allow_prompt + ', ' + allow_negative_prompt + ');'
-
- tab.select(fn=lambda: [gr.update(visible=True) for _ in tab_controls], _js='function(){ ' + jscode + ' }', inputs=[], outputs=tab_controls, show_progress=False)
+ jscode = (
+ "extraNetworksTabSelected("
+ f"'{tabname}', "
+ f"'{tabname}_{page.id_page}_prompts', "
+ f"'{allow_prompt}', "
+ f"'{allow_negative_prompt}'"
+ ");"
+ )
+
+ tab.select(
+ fn=lambda: [gr.update(visible=True) for _ in tab_controls],
+ _js="function(){ " + jscode + " }",
+ inputs=[],
+ outputs=tab_controls,
+ show_progress=False,
+ )
dropdown_sort.change(fn=lambda: None, _js="function(){ applyExtraNetworkSort('" + tabname + "'); }")
@@ -487,5 +628,3 @@ def setup_ui(ui, gallery):
for editor in ui.user_metadata_editors:
editor.setup_ui(gallery)
-
-
diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py
index 1693e71f..e7976ba1 100644
--- a/modules/ui_extra_networks_checkpoints.py
+++ b/modules/ui_extra_networks_checkpoints.py
@@ -21,13 +21,16 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
return
path, ext = os.path.splitext(checkpoint.filename)
+ search_terms = [self.search_terms_from_path(checkpoint.filename)]
+ if checkpoint.sha256:
+ search_terms.append(checkpoint.sha256)
return {
"name": checkpoint.name_for_extra,
"filename": checkpoint.filename,
"shorthash": checkpoint.shorthash,
"preview": self.find_preview(path),
"description": self.find_description(path),
- "search_term": self.search_terms_from_path(checkpoint.filename) + " " + (checkpoint.sha256 or ""),
+ "search_terms": search_terms,
"onclick": '"' + html.escape(f"""return selectCheckpoint({quote_js(name)})""") + '"',
"local_preview": f"{path}.{shared.opts.samples_format}",
"metadata": checkpoint.metadata,
diff --git a/modules/ui_extra_networks_hypernets.py b/modules/ui_extra_networks_hypernets.py
index c96c4fa3..2fb4bd19 100644
--- a/modules/ui_extra_networks_hypernets.py
+++ b/modules/ui_extra_networks_hypernets.py
@@ -20,14 +20,16 @@ class ExtraNetworksPageHypernetworks(ui_extra_networks.ExtraNetworksPage):
path, ext = os.path.splitext(full_path)
sha256 = sha256_from_cache(full_path, f'hypernet/{name}')
shorthash = sha256[0:10] if sha256 else None
-
+ search_terms = [self.search_terms_from_path(path)]
+ if sha256:
+ search_terms.append(sha256)
return {
"name": name,
"filename": full_path,
"shorthash": shorthash,
"preview": self.find_preview(path),
"description": self.find_description(path),
- "search_term": self.search_terms_from_path(path) + " " + (sha256 or ""),
+ "search_terms": search_terms,
"prompt": quote_js(f"<hypernet:{name}:") + " + opts.extra_networks_default_multiplier + " + quote_js(">"),
"local_preview": f"{path}.preview.{shared.opts.samples_format}",
"sort_keys": {'default': index, **self.get_sort_keys(path + ext)},
diff --git a/modules/ui_extra_networks_textual_inversion.py b/modules/ui_extra_networks_textual_inversion.py
index 1b334fda..deb7cb87 100644
--- a/modules/ui_extra_networks_textual_inversion.py
+++ b/modules/ui_extra_networks_textual_inversion.py
@@ -18,13 +18,16 @@ class ExtraNetworksPageTextualInversion(ui_extra_networks.ExtraNetworksPage):
return
path, ext = os.path.splitext(embedding.filename)
+ search_terms = [self.search_terms_from_path(embedding.filename)]
+ if embedding.hash:
+ search_terms.append(embedding.hash)
return {
"name": name,
"filename": embedding.filename,
"shorthash": embedding.shorthash,
"preview": self.find_preview(path),
"description": self.find_description(path),
- "search_term": self.search_terms_from_path(embedding.filename) + " " + (embedding.hash or ""),
+ "search_terms": search_terms,
"prompt": quote_js(embedding.name),
"local_preview": f"{path}.preview.{shared.opts.samples_format}",
"sort_keys": {'default': index, **self.get_sort_keys(embedding.filename)},
diff --git a/style.css b/style.css
index 4957c523..aaafaa9d 100644
--- a/style.css
+++ b/style.css
@@ -879,7 +879,7 @@ footer {
margin-bottom: 1em;
}
-.extra-network-cards{
+.extra-network-pane{
height: calc(100vh - 24rem);
overflow: clip scroll;
resize: vertical;
@@ -894,16 +894,8 @@ footer {
margin: 0.3em;
}
-.extra-network-subdirs{
- padding: 0.2em 0.35em;
-}
-
-.extra-network-subdirs button{
- margin: 0 0.15em;
-}
.extra-networks .tab-nav .search,
-.extra-networks .tab-nav .sort,
-.extra-networks .tab-nav .show-dirs
+.extra-networks .tab-nav .sort
{
margin: 0.3em;
align-self: center;
@@ -924,53 +916,75 @@ footer {
width: auto;
}
-.extra-network-cards .nocards{
+.extra-network-pane .nocards{
margin: 1.25em 0.5em 0.5em 0.5em;
}
-.extra-network-cards .nocards h1{
+.extra-network-pane .nocards h1{
font-size: 1.5em;
margin-bottom: 1em;
}
-.extra-network-cards .nocards li{
+.extra-network-pane .nocards li{
margin-left: 0.5em;
}
+.extra-network-pane :is(.card, .card-minimal) .button-row{
+ display: inline-flex;
+ visibility: hidden;
+ color: white;
+}
-.extra-network-cards .card .button-row{
- display: none;
+.extra-network-pane .card .button-row {
position: absolute;
- color: white;
right: 0;
- z-index: 1
+ z-index: 1;
}
-.extra-network-cards .card:hover .button-row{
- display: flex;
+
+.extra-network-pane .card-minimal .button-row {
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ align-items: center;
}
-.extra-network-cards .card .card-button{
+.extra-network-pane :is(.card:hover, .card-minimal:hover) .button-row{
+ visibility: visible;
+}
+
+.extra-network-pane .card-button{
color: white;
}
-.extra-network-cards .card .metadata-button:before{
+.extra-network-pane .copy-path-button:before {
+ content: "⎘";
+}
+
+.extra-network-pane .metadata-button:before{
content: "🛈";
}
-.extra-network-cards .card .edit-button:before{
+.extra-network-pane .edit-button:before{
content: "🛠";
}
-.extra-network-cards .card .card-button {
+.extra-network-pane .card-button {
+ width: 1.5em;
text-shadow: 2px 2px 3px black;
+ color: white;
padding: 0.25em 0.1em;
- font-size: 200%;
- width: 1.5em;
}
-.extra-network-cards .card .card-button:hover{
+
+.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;
@@ -979,7 +993,7 @@ footer {
height:100%;
}
-.extra-network-cards .card, .standalone-card-preview.card{
+.extra-network-pane .card, .standalone-card-preview.card{
display: inline-block;
margin: 0.5rem;
width: 16rem;
@@ -996,15 +1010,15 @@ footer {
background-image: url('./file=html/card-no-preview.png')
}
-.extra-network-cards .card:hover{
+.extra-network-pane .card:hover{
box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);
}
-.extra-network-cards .card .actions .additional{
+.extra-network-pane .card .actions .additional{
display: none;
}
-.extra-network-cards .card .actions{
+.extra-network-pane .card .actions{
position: absolute;
bottom: 0;
left: 0;
@@ -1015,45 +1029,45 @@ footer {
text-shadow: 0 0 0.2em black;
}
-.extra-network-cards .card .actions *{
+.extra-network-pane .card .actions *{
color: white;
}
-.extra-network-cards .card .actions .name{
+.extra-network-pane .card .actions .name{
font-size: 1.7em;
font-weight: bold;
line-break: anywhere;
}
-.extra-network-cards .card .actions .description {
+.extra-network-pane .card .actions .description {
display: block;
max-height: 3em;
white-space: pre-wrap;
line-height: 1.1;
}
-.extra-network-cards .card .actions .description:hover {
+.extra-network-pane .card .actions .description:hover {
max-height: none;
}
-.extra-network-cards .card .actions:hover .additional{
+.extra-network-pane .card .actions:hover .additional{
display: block;
}
-.extra-network-cards .card ul{
+.extra-network-pane .card ul{
margin: 0.25em 0 0.75em 0.25em;
cursor: unset;
}
-.extra-network-cards .card ul a{
+.extra-network-pane .card ul a{
cursor: pointer;
}
-.extra-network-cards .card ul a:hover{
+.extra-network-pane .card ul a:hover{
color: red;
}
-.extra-network-cards .card .preview{
+.extra-network-pane .card .preview{
position: absolute;
object-fit: cover;
width: 100%;
@@ -1173,3 +1187,103 @@ body.resizing .resize-handle {
left: 7.5px;
border-left: 1px dashed var(--border-color-primary);
}
+
+.extra-network-pane .card-minimal {
+ display: inline-flex;
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ font-size: 1rem;
+ font-weight: bold;
+ line-break: anywhere;
+}
+
+/* Pushes buttons to right */
+.extra-network-pane .card-minimal .name {
+ flex-grow: 1;
+}
+
+.folder-container {
+ margin-left: 1.5em !important;
+}
+
+.file-item,
+.folder-item,
+.folder-item-summary {
+ padding-left: 0.05rem;
+ cursor: pointer;
+ user-select: none;
+ font-size: 1rem;
+}
+
+.extra-network-pane .extra-network-tree .folder-item-summary:hover,
+.extra-network-pane .extra-network-tree .file-item:hover {
+ -webkit-transition: all 0.1s ease-in-out;
+ transition: all 0.1s ease-in-out;
+ background-color: var(--neutral-200);
+}
+
+.dark .extra-network-pane .extra-network-tree .folder-item-summary:hover,
+.dark .extra-network-pane .extra-network-tree .file-item:hover {
+ -webkit-transition: all 0.05s ease-in-out;
+ transition: all 0.05s ease-in-out;
+ background-color: var(--neutral-800);
+}
+
+/* prevents clicking/collapsing of details tags when disabled attribute is used*/
+.extra-network-pane .extra-network-tree details[disabled] summary {
+ pointer-events: none;
+ user-select: none;
+}
+
+.extra-network-pane .extra-network-tree details.folder-item > summary {
+ list-style-type: '📁';
+ text-overflow: ellipsis;
+}
+
+.extra-network-pane .extra-network-tree details.folder-item[open] > summary {
+ list-style-type: '📂';
+ text-overflow: ellipsis;
+}
+
+.extra-network-pane .extra-network-tree ul.folder-container {
+ list-style: none;
+ font-size: 1rem;
+ text-overflow: ellipsis;
+}
+
+.extra-network-pane .extra-network-tree li.file-item {
+ display: flex;
+ position: relative;
+ align-items: center;
+}
+
+.extra-network-pane .extra-network-tree li.file-item::before {
+ content: '📄';
+ font-size: 0.85rem;
+ vertical-align: middle;
+}
+
+.extra-network-pane {
+ display: flex;
+}
+
+.extra-network-pane .extra-network-tree {
+ font-size: 1rem;
+ min-width: 25%;
+ max-width: 25%;
+ border: 1px solid var(--block-border-color);
+}
+.extra-network-pane .extra-network-cards {
+ flex-grow: 1;
+ border: 1px solid var(--block-border-color);
+}
+
+.dark .extra-network-tree .folder-item-summary.selected{
+ background-color: var(--neutral-800);
+}
+
+.extra-network-tree .folder-item-summary.selected {
+ background-color: var(--neutral-200);
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-28 15:45:06 +0000