From 39d7d0334bd87adaa5bd279cacded88cf7a543d7 Mon Sep 17 00:00:00 2001
From: Pablo Hellmann <phtijger@gmail.com>
Date: Sun, 24 Aug 2025 16:31:45 +0200
Subject: [PATCH] First implementation

---
 javascript/extraNetworks.js  | 22 ++++++++++++++++++++++
 modules/ui_extra_networks.py |  9 ++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 2292b66af..2ff6c77d3 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -290,6 +290,28 @@ function extraNetworksSearchButton(event) {
   }
 }
 
+function extraNetworksFilterVersion(event) {
+  // log('extraNetworksFilterVersion', event);
+  const version = event.target.textContent.trim();
+  const activeTab = gradioApp().querySelector('.extra-networks-tab:not([style*="display: none"])');
+  if (!activeTab) return;
+  const cardContainer = activeTab.querySelector('.extra-network-cards');
+  if (!cardContainer) return;
+  if (cardContainer.dataset.activeVersion === version) {
+    cardContainer.dataset.activeVersion = '';
+    cardContainer.querySelectorAll('.card').forEach(card => card.style.display = '');
+  } else {
+    cardContainer.dataset.activeVersion = version;
+    cardContainer.querySelectorAll('.card').forEach(card => {
+      if (card.dataset.version === version) {
+        card.style.display = '';
+      } else {
+        card.style.display = 'none';
+      }
+    });
+  }
+}
+
 let desiredStyle = '';
 function selectStyle(name) {
   desiredStyle = name;
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index 06b3428fb..0af2f85a9 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -24,7 +24,7 @@ extra_pages = shared.extra_networks
 debug = shared.log.trace if os.environ.get('SD_EN_DEBUG', None) is not None else lambda *args, **kwargs: None
 debug('Trace: EN')
 card_full = '''
-    <div class='card' onclick={card_click} title='{name}' data-page='{page}' data-name='{name}' data-filename='{filename}' data-short='{short}' data-tags='{tags}' data-mtime='{mtime}' data-size='{size}' data-search='{search}' style='--data-color: {color}'>
+    <div class='card' onclick={card_click} title='{name}' data-page='{page}' data-name='{name}' data-filename='{filename}' data-short='{short}' data-tags='{tags}' data-mtime='{mtime}' data-size='{size}' data-search='{search}' data-version='{version}' style='--data-color: {color}'>
         <div class='overlay'>
             <div class='name {reference}'>{title}</div>
         </div>
@@ -277,8 +277,11 @@ class ExtraNetworksPage:
                 continue
             style = 'color: var(--color-accent)' if subdir in ['All', 'Local', 'Diffusers', 'Reference'] else ''
             subdirs_html += f'<button class="lg secondary gradio-button custom-button" onclick="extraNetworksSearchButton(event)" style="{style}">{html.escape(subdir)}</button><br>'
-        self.html = ''
         self.create_items(tabname)
+        versions = sorted({item.get("version", "Unknown") for item in self.items if item.get("version")})
+        versions_html = ''
+        for ver in versions:
+            versions_html += f'<button class="lg secondary gradio-button custom-button" onclick="extraNetworksFilterVersion(event)" style="margin-left:4px">{html.escape(ver)}</button><br>'
         self.create_xyz_grid()
         htmls = []
 
@@ -302,7 +305,7 @@ class ExtraNetworksPage:
             htmls.append(self.create_html(item, tabname))
         self.html += ''.join(htmls)
         self.page_time = time.time()
-        self.html = f"<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs'>{subdirs_html}</div><div id='~tabname_{self_name_id}_cards' class='extra-network-cards'>{self.html}</div>"
+        self.html = f"""<div id='{tabname}_{self_name_id}_subdirs' class='extra-network-subdirs'>{subdirs_html}{versions_html}</div><div id='~tabname_{self_name_id}_cards' class='extra-network-cards'>{self.html}</div>"""
         shared.log.debug(f'Networks: type="{self.name}" items={len(self.items)} subfolders={len(subdirs)} tab={tabname} folders={self.allowed_directories_for_previews()} list={self.list_time:.2f} thumb={self.preview_time:.2f} desc={self.desc_time:.2f} info={self.info_time:.2f} workers={shared.max_workers}')
         if len(self.missing_thumbs) > 0:
             threading.Thread(target=self.create_thumb).start()