From f4492f4c8688446ce644c727cf1ccc18ee927bcd Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Sun, 17 Sep 2023 10:47:25 -0400
Subject: [PATCH] optimize en search

---
 javascript/extraNetworks.js  | 36 ++++++++++++++++++++++++++++--------
 modules/ui_extra_networks.py |  6 +++---
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index e48919ef6..43ef498a8 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -136,6 +136,31 @@ function saveCardDescription(event) {
   event.preventDefault();
 }
 
+async function filterExtraNetworksForTab(tabname, searchTerm) {
+  let found = 0;
+  let items = 0;
+  const t0 = performance.now();
+  const cards = Array.from(gradioApp().querySelectorAll(`#${tabname}_extra_tabs div.card`));
+  cards.forEach((elem) => {
+    items += 1;
+    if (searchTerm === '') {
+      elem.style.display = '';
+    } else {
+      let text = `${elem.querySelector('.name').textContent.toLowerCase()} ${elem.querySelector('.search_term').textContent}`;
+      text = text.toLowerCase().replace('models--', 'Diffusers').replace('\\', '/');
+      if (text.indexOf(searchTerm) === -1) {
+        elem.style.display = 'none';
+      } else {
+        elem.style.display = '';
+        found += 1;
+      }
+    }
+  });
+  const t1 = performance.now();
+  if (found > 0) log(`filterExtraNetworks: text=${searchTerm} items=${items} match=${found} time=${Math.round(1000 * (t1 - t0)) / 1000000}`);
+  else log(`filterExtraNetworks: text=all items=${items} time=${Math.round(1000 * (t1 - t0)) / 1000000}`);
+}
+
 function setupExtraNetworksForTab(tabname) {
   gradioApp().querySelector(`#${tabname}_extra_tabs`).classList.add('extra-networks');
   const tabs = gradioApp().querySelector(`#${tabname}_extra_tabs > div`);
@@ -157,15 +182,9 @@ function setupExtraNetworksForTab(tabname) {
   search.addEventListener('input', (evt) => {
     if (searchTimer) clearTimeout(searchTimer);
     searchTimer = setTimeout(() => {
-      const searchTerm = search.value.toLowerCase();
-      gradioApp().querySelectorAll(`#${tabname}_extra_tabs div.card`).forEach((elem) => {
-        let text = `${elem.querySelector('.name').textContent.toLowerCase()} ${elem.querySelector('.search_term').textContent.toLowerCase()}`;
-        text = text.replace('models--', 'Diffusers').replace('\\', '/');
-        elem.style.display = text.indexOf(searchTerm) === -1 ? 'none' : '';
-        console.log({ search: searchTerm, text, display: elem.style.display });
-      });
+      filterExtraNetworksForTab(tabname, search.value.toLowerCase());
       searchTimer = null;
-    }, 100);
+    }, 150);
   });
 
   let hoverTimer = null;
@@ -273,6 +292,7 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
 }
 
 function refreshExtraNetworks(tabname) {
+  console.log('refreshExtraNetworks', tabname, gradioApp().querySelector(`#${tabname}_extra_networks textarea`)?.value);
   gradioApp().querySelector(`#${tabname}_extra_networks textarea`)?.dispatchEvent(new Event('input'));
 }
 
diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py
index bc33ba7a4..62662b9fb 100644
--- a/modules/ui_extra_networks.py
+++ b/modules/ui_extra_networks.py
@@ -387,9 +387,9 @@ def create_ui(container, button, tabname, skip_indexing = False):
         for page in extra_pages:
             page.create_page(ui.tabname, skip_indexing)
             with gr.Tab(page.title, id=page.title.lower().replace(" ", "_"), elem_classes="extra-networks-tab"):
-                page_elem = gr.HTML(page.html, elem_id=f'{tabname}{page.name}_extra_page', elem_classes="extra-networks-page")
-                page_elem.change(fn=lambda: None, _js=f'() => refreshExtraNetworks("{tabname}")', inputs=[], outputs=[])
-                ui.pages.append(page_elem)
+                hmtl = gr.HTML(page.html, elem_id=f'{tabname}{page.name}_extra_page', elem_classes="extra-networks-page")
+                # hmtl.change(fn=lambda: None, _js=f'() => refreshExtraNetworks("{tabname}")', inputs=[], outputs=[])
+                ui.pages.append(hmtl)
 
     def toggle_visibility(is_visible):
         is_visible = not is_visible