Support dynamic sort of extra networks (7dca8e76) · Commits · github_fork / Stable Diffusion Webui

extensions-builtin/Lora/ui_extra_networks_lora.py

+2 −1

Original line number	Diff line number	Diff line
		@@ -13,7 +13,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
		lora.list_available_loras()

		def list_items(self):
		for name, lora_on_disk in lora.available_loras.items():
		for index, (name, lora_on_disk) in enumerate(lora.available_loras.items()):
		path, ext = os.path.splitext(lora_on_disk.filename)

		alias = lora_on_disk.get_alias()
		@@ -27,6 +27,7 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage):
		"prompt": json.dumps(f"<lora:{alias}:") + " + opts.extra_networks_default_multiplier + " + json.dumps(">"),
		"local_preview": f"{path}.{shared.opts.samples_format}",
		"metadata": json.dumps(lora_on_disk.metadata, indent=4) if lora_on_disk.metadata else None,
		"sort_keys": {self.get_sort_keys(lora_on_disk.filename), {'default': index}},
		}

		def allowed_directories_for_previews(self):

html/extra-networks-card.html

+1 −1

Original line number	Diff line number	Diff line
		<div class='card' style={style} onclick={card_clicked}>
		<div class='card' style={style} onclick={card_clicked} {sort_keys}>
		{background_image}
		{metadata_button}
		<div class='actions'>

javascript/extraNetworks.js

+47 −0

Original line number	Diff line number	Diff line
		@@ -3,10 +3,17 @@ function setupExtraNetworksForTab(tabname) {

		var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
		var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
		var sort = gradioApp().getElementById(tabname + '_extra_sort');
		var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
		var refresh = gradioApp().getElementById(tabname + '_extra_refresh');

		search.classList.add('search');
		sort.classList.add('sort');
		sortOrder.classList.add('sortorder');
		sort.dataset.sortkey = 'sortDefault'
		tabs.appendChild(search);
		tabs.appendChild(sort);
		tabs.appendChild(sortOrder);
		tabs.appendChild(refresh);

		var applyFilter = function() {
		@@ -26,8 +33,48 @@ function setupExtraNetworksForTab(tabname) {
		});
		};

		var applySort = function() {
		var reverse = sortOrder.classList.contains("sortReverse");
		var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort","").replaceAll(" ", "_").replace(/_+$/, "").trim();
		sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : ""
		var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : ""
		if (!sortKey \|\| sortKeyStore == sort.dataset.sortkey)
		return;

		sort.dataset.sortkey = sortKeyStore;

		var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card')
		cards.forEach(function(card) {
		card.originalParentElement = card.parentElement;
		})
		var sortedCards = Array.from(cards);
		sortedCards.sort(function(cardA, cardB) {
		var a = cardA.dataset[sortKey];
		var b = cardB.dataset[sortKey];
		if (!isNaN(a) && !isNaN(b))
		return parseInt(a) - parseInt(b);

		return (a < b ? -1 : (a > b ? 1 : 0));
		})
		if (reverse)
		sortedCards.reverse();
		cards.forEach(function(card) {
		card.remove();
		})
		sortedCards.forEach(function(card) {
		card.originalParentElement.appendChild(card);
		})
		}

		search.addEventListener("input", applyFilter);
		applyFilter();
		["change", "blur", "click"].forEach(function(evt) {
		sort.querySelector("input").addEventListener(evt, applySort);
		})
		sortOrder.addEventListener("click", function() {
		sortOrder.classList.toggle("sortReverse");
		applySort();
		});

		extraNetworksApplyFilter[tabname] = applyFilter;
		}

modules/ui.py

+1 −0

Original line number	Diff line number	Diff line
		@@ -79,6 +79,7 @@ extra_networks_symbol = '\U0001F3B4' # 🎴
		switch_values_symbol = '\U000021C5' # ⇅
		restore_progress_symbol = '\U0001F300' # 🌀
		detect_image_size_symbol = '\U0001F4D0' # 📐
		up_down_symbol = '\u2195\ufe0f' # ↕️


		def plaintext_to_html(text):

modules/ui_extra_networks.py

+16 −0

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@ from pathlib import Path

		from modules import shared
		from modules.images import read_info_from_image, save_image_with_geninfo
		from modules.ui import up_down_symbol
		import gradio as gr
		import json
		import html
		@@ -185,6 +186,8 @@ class ExtraNetworksPage:
		if search_only and shared.opts.extra_networks_hidden_models == "Never":
		return ""

		sort_keys = " ".join([html.escape(f'data-sort-{k}={v}') for k, v in item.get("sort_keys", {}).items()]).strip()

		args = {
		"background_image": background_image,
		"style": f"'display: none; {height}{width}'",
		@@ -198,10 +201,21 @@ class ExtraNetworksPage:
		"search_term": item.get("search_term", ""),
		"metadata_button": metadata_button,
		"search_only": " search_only" if search_only else "",
		"sort_keys": sort_keys,
		}

		return self.card_page.format(**args)

		def get_sort_keys(self, path):
		"""
		List of default keys used for sorting in the UI.
		"""
		return {
		"date_created": int(Path(path).stat().st_ctime or 0),
		"date_modified": int(Path(path).stat().st_mtime or 0),
		"name": Path(path).name.lower(),
		}

		def find_preview(self, path):
		"""
		Find a preview PNG for a given path (without extension) and call link_preview on it.
		@@ -296,6 +310,8 @@ def create_ui(container, button, tabname):
		page_elem.change(fn=lambda: None, _js='function(){applyExtraNetworkFilter(' + json.dumps(tabname) + '); return []}', inputs=[], outputs=[])

		gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)
		gr.Dropdown(choices=['Default Sort', 'Date Created', 'Date Modified', 'Name'], value='Default Sort', elem_id=tabname+"_extra_sort", multiselect=False, visible=False, show_label=False, interactive=True)
		gr.Button(up_down_symbol, elem_id=tabname+"_extra_sortorder")
		button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh")

		ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)

Admin message