add search box to extra networks

3 files changed, 36 insertions, 6 deletions

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 5e0d9714..54ded58c 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -2,8 +2,24 @@
 function setupExtraNetworksForTab(tabname){

     gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks')

 

-    gradioApp().querySelector('#'+tabname+'_extra_tabs > div').appendChild(gradioApp().getElementById(tabname+'_extra_refresh'))

-    gradioApp().querySelector('#'+tabname+'_extra_tabs > div').appendChild(gradioApp().getElementById(tabname+'_extra_close'))

+    var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div')

+    var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')

+    var refresh = gradioApp().getElementById(tabname+'_extra_refresh')

+    var close = gradioApp().getElementById(tabname+'_extra_close')

+

+    search.classList.add('search')

+    tabs.appendChild(search)

+    tabs.appendChild(refresh)

+    tabs.appendChild(close)

+

+    search.addEventListener("input", function(evt){

+        searchTerm = search.value

+

+        gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){

+            text = elem.querySelector('.name').textContent

+            elem.style.display = text.indexOf(searchTerm) == -1 ? "none" : ""

+        })

+    });

 }

 

 var activePromptTextarea = {};

diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 796e879c..e2e060c8 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -18,6 +18,7 @@ def register_page(page):
 class ExtraNetworksPage:

     def __init__(self, title):

         self.title = title

+        self.name = title.lower()

         self.card_page = shared.html("extra-networks-card.html")

         self.allow_negative_prompt = False

 

@@ -34,7 +35,11 @@ class ExtraNetworksPage:
             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)

 

-        res = "<div class='extra-network-cards'>" + items_html + "</div>"

+        res = f"""

+<div id='{tabname}_{self.name}_cards' class='extra-network-cards'>

+{items_html}

+</div>

+"""

 

         return res

 

@@ -81,14 +86,15 @@ def create_ui(container, button, tabname):
     ui.tabname = tabname

 

     with gr.Tabs(elem_id=tabname+"_extra_tabs") as tabs:

-        button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh")

-        button_close = gr.Button('Close', elem_id=tabname+"_extra_close")

-

         for page in ui.stored_extra_pages:

             with gr.Tab(page.title):

                 page_elem = gr.HTML(page.create_html(ui.tabname))

                 ui.pages.append(page_elem)

 

+    filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)

+    button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh")

+    button_close = gr.Button('Close', elem_id=tabname+"_extra_close")

+

     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)

 

diff --git a/style.css b/style.css
index 04bf2982..1e59575f 100644
--- a/style.css
+++ b/style.css
@@ -774,6 +774,14 @@ footer {
     margin: 0.3em;

 }

 

+

+

+#txt2img_extra_networks .search, #img2img_extra_networks .search{

+    display: inline-block;

+    max-width: 16em;

+    margin: 0.3em;

+}

+

 .extra-network-cards .nocards{

     margin: 1.25em 0.5em 0.5em 0.5em;

 }