add buttons for auto-search in subdirectories for extra tabs

javascript/extraNetworks.js

@@ -96,3 +96,12 @@ function saveCardPreview(event, tabname, filename){
     event.stopPropagation()
     event.preventDefault()
 }
+
+function extraNetworksSearchButton(tabs_id, event){
+    searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
+    button = event.target
+    text = button.classList.contains("search-all") ? "" : button.textContent.trim()
+
+    searchTextarea.value = text
+    updateInput(searchTextarea)
+}

modules/ui_extra_networks.py

@@ -1,3 +1,4 @@
+import glob
 import os.path
 import urllib.parse
 from pathlib import Path
@@ -64,6 +65,27 @@ class ExtraNetworksPage:
         view = shared.opts.extra_networks_default_view
         items_html = ''
 
+        subdirs = {}
+        for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
+            for x in glob.glob(os.path.join(parentdir, '**/*'), recursive=True):
+                if not os.path.isdir(x):
+                    continue
+
+                subdir = os.path.abspath(x)[len(parentdir):].replace("\\", "/")
+                while subdir.startswith("/"):
+                    subdir = subdir[1:]
+
+                subdirs[subdir] = 1
+
+        if subdirs:
+            subdirs = {"": 1, **subdirs}
+
+        subdirs_html = "".join([f"""
+<button class='gr-button gr-button-lg gr-button-secondary{" search-all" if subdir=="" else ""}' onclick='extraNetworksSearchButton("{tabname}_extra_tabs", event)'>
+{html.escape(subdir if subdir!="" else "all")}
+</button>
+""" for subdir in subdirs])
+
         for item in self.list_items():
             items_html += self.create_html_for_item(item, tabname)
 
@@ -72,6 +94,9 @@ class ExtraNetworksPage:
             items_html = shared.html("extra-networks-no-cards.html").format(dirs=dirs)
 
         res = f"""
+<div id='{tabname}_{self.name}_subdirs' class='extra-network-subdirs extra-network-subdirs-{view}'>
+{subdirs_html}
+</div>
 <div id='{tabname}_{self.name}_cards' class='extra-network-{view}'>
 {items_html}
 </div>

style.css

@@ -807,7 +807,13 @@ footer {
     margin: 0.3em;
 }
 
+.extra-network-subdirs{
+    padding: 0.2em 0.35em;
+}
 
+.extra-network-subdirs button{
+    margin: 0 0.15em;
+}
 
 #txt2img_extra_networks .search, #img2img_extra_networks .search{
     display: inline-block;