fix bugs

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;
+        // tabname_full = {tabname}_{extra_networks_tabname}
-        var search = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_search");
+        var tabname_full = elem.id;
-        var sort_mode = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_sort");
+        var search = gradioApp().querySelector("#" + tabname_full + "_extra_search");
-        var sort_dir = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_sort_dir");
+        var sort_mode = gradioApp().querySelector("#" + tabname_full + "_extra_sort");
-        var refresh = gradioApp().querySelector("#" + extra_networks_tabname + "_extra_refresh");
+        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[tabname_full] = applySort;
-        extraNetworksApplySort[extra_networks_tabname] = applySort;
+        extraNetworksApplyFilter[tabname_full] = applyFilter;
-        extraNetworksApplyFilter[extra_networks_tabname] = applyFilter;
     });
 
     registerPrompt(tabname, tabname + "_prompt");
@@ -147,12 +143,12 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt) {
     extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt);
 }
 
-function applyExtraNetworkFilter(tabname) {
+function applyExtraNetworkFilter(tabname_full) {
-    setTimeout(extraNetworksApplyFilter[tabname], 1);
+    setTimeout(extraNetworksApplyFilter[tabname_full], 1);
 }
 
-function applyExtraNetworkSort(tabname) {
+function applyExtraNetworkSort(tabname_full) {
-    setTimeout(extraNetworksApplySort[tabname], 1);
+    setTimeout(extraNetworksApplySort[tabname_full], 1);
 }
 
 var extraNetworksApplyFilter = {};

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"<ul class='tree-list tree-list--subgroup' hidden>{content}</ul>"
         return (
             "<li class='tree-list-item tree-list-item--has-subitem' data-tree-entry-type='dir'>"
-            f"{btn + ul}"
+            f"{btn}{ul}"
             "</li>"
         )
 
@@ -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.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=tabname+"_preview_filename", 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]

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)},