add an option to have old-style directory view instead of tree view

html/extra-networks-pane-dirs.html

@@ -0,0 +1,8 @@
+    <div class="extra-network-pane-content-dirs">
+        <div id='{tabname}_{extra_networks_tabname}_dirs' class='extra-network-dirs'>
+            {dirs_html}
+        </div>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
+            {items_html}
+        </div>
+    </div>

html/extra-networks-pane-tree.html

@@ -0,0 +1,8 @@
+    <div class="extra-network-pane-content-tree resize-handle-row">
+        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree' style='flex-basis: {extra_networks_tree_view_default_width}px'>
+            {tree_html}
+        </div>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
+            {items_html}
+        </div>
+    </div>

html/extra-networks-pane.html

@@ -1,4 +1,4 @@
-<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
+<div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane {tree_view_div_default_display_class}'>
     <div class="extra-network-control" id="{tabname}_{extra_networks_tabname}_controls" style="display:none" >
         <div class="extra-network-control--search">
             <input
@@ -44,12 +44,5 @@
             <i class="extra-network-control--refresh-icon"></i>
         </div>
     </div>
-    <div class="extra-network-pane-content resize-handle-row" style="display: {extra_network_pane_content_default_display};">
+    {pane_content}
-        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree {tree_view_div_extra_class}' style='flex-basis: {extra_networks_tree_view_default_width}px; display: {tree_view_div_default_display};'>
+</div>
-            {tree_html}
-        </div>
-        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
-            {items_html}
-        </div>
-    </div>
-</div>

javascript/extraNetworks.js

@@ -272,6 +272,15 @@ function saveCardPreview(event, tabname, filename) {
     event.preventDefault();
 }
 
+function extraNetworksSearchButton(tabname, extra_networks_tabname, event) {
+    var searchTextarea = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search");
+    var button = event.target;
+    var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
+
+    searchTextarea.value = text;
+    updateInput(searchTextarea);
+}
+
 function extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname) {
     /**
      * Processes `onclick` events when user clicks on files in tree.
@@ -447,27 +456,12 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    const tree = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree");
+    var button = event.currentTarget;
-    const parent = tree.parentElement;
+    button.classList.toggle("extra-network-control--enabled");
-    let resizeHandle = parent.querySelector('.resize-handle');
+    var show = ! button.classList.contains("extra-network-control--enabled");
-    tree.classList.toggle("hidden");
 
-    if (tree.classList.contains("hidden")) {
+    var pane = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_pane");
-        tree.style.display = 'none';
+    pane.classList.toggle("extra-network-dirs-hidden", show);
-        parent.style.display = 'flex';
-        if (resizeHandle) {
-            resizeHandle.style.display = 'none';
-        }
-    } else {
-        tree.style.display = 'block';
-        parent.style.display = 'grid';
-        if (!resizeHandle) {
-            setupResizeHandle(parent);
-            resizeHandle = parent.querySelector('.resize-handle');
-        }
-        resizeHandle.style.display = 'block';
-    }
-    event.currentTarget.classList.toggle("extra-network-control--enabled");
 }
 
 function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname) {

modules/shared_options.py

@@ -258,7 +258,8 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_card_description_is_html": OptionInfo(False, "Treat card description as HTML"),
     "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(),
     "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
-    "extra_networks_tree_view_default_enabled": OptionInfo(False, "Enables the Extra Networks directory tree view by default").needs_reload_ui(),
+    "extra_networks_tree_view_style": OptionInfo("Dirs", "Extra Networks directory view style", gr.Radio, {"choices": ["Tree", "Dirs"]}).needs_reload_ui(),
+    "extra_networks_tree_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default").needs_reload_ui(),
     "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
     "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(),

modules/ui_extra_networks.py

@@ -164,6 +164,8 @@ class ExtraNetworksPage:
         self.lister = util.MassFileLister()
         # HTML Templates
         self.pane_tpl = shared.html("extra-networks-pane.html")
+        self.pane_content_tree_tpl = shared.html("extra-networks-pane-tree.html")
+        self.pane_content_dirs_tpl = shared.html("extra-networks-pane-dirs.html")
         self.card_tpl = shared.html("extra-networks-card.html")
         self.btn_tree_tpl = shared.html("extra-networks-tree-button.html")
         self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html")
@@ -476,6 +478,47 @@ class ExtraNetworksPage:
 
         return f"<ul class='tree-list tree-list--tree'>{res}</ul>"
 
+    def create_dirs_view_html(self, tabname: str) -> str:
+        """Generates HTML for displaying folders."""
+
+        subdirs = {}
+        for parentdir in [os.path.abspath(x) for x in self.allowed_directories_for_previews()]:
+            for root, dirs, _ in sorted(os.walk(parentdir, followlinks=True), key=lambda x: shared.natural_sort_key(x[0])):
+                for dirname in sorted(dirs, key=shared.natural_sort_key):
+                    x = os.path.join(root, dirname)
+
+                    if not os.path.isdir(x):
+                        continue
+
+                    subdir = os.path.abspath(x)[len(parentdir):]
+
+                    if shared.opts.extra_networks_dir_button_function:
+                        if not subdir.startswith(os.path.sep):
+                            subdir = os.path.sep + subdir
+                    else:
+                        while subdir.startswith(os.path.sep):
+                            subdir = subdir[1:]
+
+                    is_empty = len(os.listdir(x)) == 0
+                    if not is_empty and not subdir.endswith(os.path.sep):
+                        subdir = subdir + os.path.sep
+
+                    if (os.path.sep + "." in subdir or subdir.startswith(".")) and not shared.opts.extra_networks_show_hidden_directories:
+                        continue
+
+                    subdirs[subdir] = 1
+
+        if subdirs:
+            subdirs = {"": 1, **subdirs}
+
+        subdirs_html = "".join([f"""
+        <button class='lg secondary gradio-button custom-button{" search-all" if subdir == "" else ""}' onclick='extraNetworksSearchButton("{tabname}", "{self.extra_networks_tabname}", event)'>
+        {html.escape(subdir if subdir != "" else "all")}
+        </button>
+        """ for subdir in subdirs])
+
+        return subdirs_html
+
     def create_card_view_html(self, tabname: str, *, none_message) -> str:
         """Generates HTML for the network Card View section for a tab.
 
@@ -529,32 +572,27 @@ class ExtraNetworksPage:
         data_sortdir = shared.opts.extra_networks_card_order
         data_sortmode = shared.opts.extra_networks_card_order_field.lower().replace("sort", "").replace(" ", "_").rstrip("_").strip()
         data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
-        tree_view_btn_extra_class = ""
-        tree_view_div_extra_class = "hidden"
-        tree_view_div_default_display = "none"
-        extra_network_pane_content_default_display = "flex"
-        if shared.opts.extra_networks_tree_view_default_enabled:
-            tree_view_btn_extra_class = "extra-network-control--enabled"
-            tree_view_div_extra_class = ""
-            tree_view_div_default_display = "block"
-            extra_network_pane_content_default_display = "grid"
 
-        return self.pane_tpl.format(
+        show_tree = shared.opts.extra_networks_tree_view_default_enabled
-            **{
+
-                "tabname": tabname,
+        page_params = {
-                "extra_networks_tabname": self.extra_networks_tabname,
+            "tabname": tabname,
-                "data_sortmode": data_sortmode,
+            "extra_networks_tabname": self.extra_networks_tabname,
-                "data_sortkey": data_sortkey,
+            "data_sortmode": data_sortmode,
-                "data_sortdir": data_sortdir,
+            "data_sortkey": data_sortkey,
-                "tree_view_btn_extra_class": tree_view_btn_extra_class,
+            "data_sortdir": data_sortdir,
-                "tree_view_div_extra_class": tree_view_div_extra_class,
+            "tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "",
-                "tree_html": self.create_tree_view_html(tabname),
+            "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None),
-                "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None),
+            "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
-                "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width,
+            "tree_view_div_default_display_class": "" if show_tree else "extra-network-dirs-hidden",
-                "tree_view_div_default_display": tree_view_div_default_display,
+        }
-                "extra_network_pane_content_default_display": extra_network_pane_content_default_display,
+
-            }
+        if shared.opts.extra_networks_tree_view_style == "Tree":
-        )
+            pane_content = self.pane_content_tree_tpl.format(**page_params, tree_html=self.create_tree_view_html(tabname))
+        else:
+            pane_content = self.pane_content_dirs_tpl.format(**page_params, dirs_html=self.create_dirs_view_html(tabname))
+
+        return self.pane_tpl.format(**page_params, pane_content=pane_content)
 
     def create_item(self, name, index=None):
         raise NotImplementedError()

style.css

@@ -1205,12 +1205,24 @@ body.resizing .resize-handle {
     overflow: hidden;
 }
 
-.extra-network-pane .extra-network-pane-content {
+.extra-network-pane .extra-network-pane-content-dirs {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.extra-network-pane .extra-network-pane-content-tree {
     display: flex;
     flex: 1;
     overflow: hidden;
 }
 
+.extra-network-dirs-hidden .extra-network-dirs{ display: none; }
+.extra-network-dirs-hidden .extra-network-tree{ display: none; }
+.extra-network-dirs-hidden .resize-handle { display: none; }
+.extra-network-dirs-hidden .resize-handle-row { display: flex !important; }
+
 .extra-network-pane .extra-network-tree {
     flex: 1;
     font-size: 1rem;