diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index a3f003bf4..caaa3fae0 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -31,11 +31,12 @@ function setupExtraNetworksForTab(tabname) {
var this_tab = gradioApp().querySelector('#' + tabname + '_extra_tabs');
this_tab.classList.add('extra-networks');
this_tab.querySelectorAll(":scope > [id^='" + tabname + "_']").forEach(function(elem) {
- var extra_networks_tabname = elem.id;
- var search = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_search");
- var sort_mode = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_sort");
- var sort_dir = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_sort_dir");
- var refresh = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_refresh");
+ // tabname_full = {tabname}_{extra_networks_tabname}
+ var tabname_full = elem.id;
+ var search = gradioApp().querySelector("#" + tabname_full + "_extra_search");
+ var sort_mode = gradioApp().querySelector("#" + tabname_full + "_extra_sort");
+ var sort_dir = gradioApp().querySelector("#" + tabname_full + "_extra_sort_dir");
+ var refresh = gradioApp().querySelector("#" + tabname_full + "_extra_refresh");
// If any of the buttons above don't exist, we want to skip this iteration of the loop.
if (!search || !sort_mode || !sort_dir || !refresh) {
@@ -44,16 +45,13 @@ function setupExtraNetworksForTab(tabname) {
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 = Array.prototype.map.call(elem.querySelectorAll('.search_terms'), function(t) {
return t.textContent.toLowerCase();
}).join(" ");
var visible = text.indexOf(searchTerm) != -1;
-
if (searchOnly && searchTerm.length < 4) {
visible = false;
}
@@ -66,7 +64,6 @@ function setupExtraNetworksForTab(tabname) {
var applySort = function() {
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
-
var reverse = sort_dir.dataset.sortdir == "Descending";
var sortKey = sort_mode.dataset.sortmode.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name";
sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
@@ -104,9 +101,8 @@ function setupExtraNetworksForTab(tabname) {
search.addEventListener("input", applyFilter);
applySort();
applyFilter();
-
- extraNetworksApplySort[extra_networks_tabname] = applySort;
- extraNetworksApplyFilter[extra_networks_tabname] = applyFilter;
+ extraNetworksApplySort[tabname_full] = applySort;
+ extraNetworksApplyFilter[tabname_full] = applyFilter;
});
registerPrompt(tabname, tabname + "_prompt");
@@ -147,12 +143,12 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt) {
extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
}
-function applyExtraNetworkFilter(tabname) {
- setTimeout(extraNetworksApplyFilter[tabname], 1);
+function applyExtraNetworkFilter(tabname_full) {
+ setTimeout(extraNetworksApplyFilter[tabname_full], 1);
}
-function applyExtraNetworkSort(tabname) {
- setTimeout(extraNetworksApplySort[tabname], 1);
+function applyExtraNetworkSort(tabname_full) {
+ setTimeout(extraNetworksApplySort[tabname_full], 1);
}
var extraNetworksApplyFilter = {};
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index a03207b2b..55cd1da27 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -237,7 +237,7 @@ class ExtraNetworksPage:
"tabname": tabname,
"prompt": item["prompt"],
"neg_prompt": item.get("negative_prompt", ""),
- "allow_neg": "true" if self.allow_negative_prompt else "false"
+ "allow_neg": str(self.allow_negative_prompt).lower(),
}
)
onclick = html.escape(onclick)
@@ -291,7 +291,7 @@ class ExtraNetworksPage:
search_terms_html += search_term_template.format(
**{
"style": "display: none;",
- "class": "search_terms" + (" search_only" if search_only else ""),
+ "class": f"search_terms{' search_only' if search_only else ''}",
"search_term": search_term,
}
)
@@ -307,7 +307,7 @@ class ExtraNetworksPage:
"metadata_button": btn_metadata,
"name": html.escape(item["name"]),
"prompt": item.get("prompt", None),
- "save_card_preview": '"' + html.escape(f"""return saveCardPreview(event, {quote_js(tabname)}, {quote_js(item["local_preview"])})""") + '"',
+ "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,
"sort_keys": sort_keys,
@@ -369,7 +369,7 @@ class ExtraNetworksPage:
ul = f""
return (
""
- f"{btn + ul}"
+ f"{btn}{ul}"
""
)
@@ -561,7 +561,7 @@ class ExtraNetworksPage:
Find a preview PNG for a given path (without extension) and call link_preview on it.
"""
- potential_files = sum([[path + "." + ext, path + ".preview." + ext] for ext in allowed_preview_extensions()], [])
+ potential_files = sum([[f"{path}.{ext}", f"{path}.preview.{ext}"] for ext in allowed_preview_extensions()], [])
for file in potential_files:
if self.lister.exists(file):
@@ -642,7 +642,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
related_tabs = []
- button_refresh = gr.Button("Refresh", elem_id=tabname+"_extra_refresh_internal", visible=False)
+ button_refresh = gr.Button("Refresh", elem_id=f"{tabname}_extra_refresh_internal", visible=False)
for page in ui.stored_extra_pages:
with gr.Tab(page.title, elem_id=f"{tabname}_{page.extra_networks_tabname}", elem_classes=["extra-page"]) as tab:
@@ -652,24 +652,25 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
elem_id = f"{tabname}_{page.extra_networks_tabname}_cards_html"
page_elem = gr.HTML('Loading...', elem_id=elem_id)
ui.pages.append(page_elem)
- page_elem.change(
- fn=lambda: None,
- _js=f"function(){{applyExtraNetworkFilter({tabname}_{page.extra_networks_tabname}_extra_search); return []}}",
- inputs=[],
- outputs=[],
- )
-
editor = page.create_user_metadata_editor(ui, tabname)
editor.create_ui()
ui.user_metadata_editors.append(editor)
-
related_tabs.append(tab)
- 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)
+ ui.button_save_preview = gr.Button('Save preview', elem_id=f"{tabname}_save_preview", visible=False)
+ ui.preview_target_filename = gr.Textbox('Preview save filename', elem_id=f"{tabname}_preview_filename", visible=False)
for tab in unrelated_tabs:
- tab.select(fn=None, _js='function(){ extraNetworksUrelatedTabSelected("' + tabname + '"); }', inputs=[], outputs=[], show_progress=False)
+ tab.select(fn=None, _js=f"function(){{extraNetworksUnrelatedTabSelected('{tabname}');}}", inputs=[], outputs=[], show_progress=False)
+
+ for page, tab in zip(ui.stored_extra_pages, related_tabs):
+ jscode = (
+ "function(){{"
+ f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()});"
+ f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');"
+ "}}"
+ )
+ tab.select(fn=None, _js=jscode, inputs=[], outputs=[], show_progress=False)
def create_html():
ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages]
diff --git a/modules/ui_extra_networks_checkpoints.py b/modules/ui_extra_networks_checkpoints.py
index e7976ba12..a8c336719 100644
--- a/modules/ui_extra_networks_checkpoints.py
+++ b/modules/ui_extra_networks_checkpoints.py
@@ -2,7 +2,6 @@ import html
import os
from modules import shared, ui_extra_networks, sd_models
-from modules.ui_extra_networks import quote_js
from modules.ui_extra_networks_checkpoints_user_metadata import CheckpointUserMetadataEditor
@@ -31,7 +30,7 @@ class ExtraNetworksPageCheckpoints(ui_extra_networks.ExtraNetworksPage):
"preview": self.find_preview(path),
"description": self.find_description(path),
"search_terms": search_terms,
- "onclick": '"' + html.escape(f"""return selectCheckpoint({quote_js(name)})""") + '"',
+ "onclick": html.escape(f"return selectCheckpoint('{name}');"),
"local_preview": f"{path}.{shared.opts.samples_format}",
"metadata": checkpoint.metadata,
"sort_keys": {'default': index, **self.get_sort_keys(checkpoint.filename)},