From 786a96ecd97fcac283fa6af705f0d4341e48d011 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 14 Aug 2023 21:27:22 +0200
Subject: [PATCH] type ahead search - use search prompt also for canary request
 - name prev/next button so that they can be directly accessed - search
 prompt, not path

---
 ui/easydiffusion/bucket_manager.py |  2 +-
 ui/index.html                      |  8 +++---
 ui/media/js/main.js                | 43 +++++++++++++++++++++---------
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index c168f91a..93bbbcd6 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -104,7 +104,7 @@ def init():
         from easydiffusion.easydb.mappings import GalleryImage
         images = db.query(GalleryImage).order_by(GalleryImage.time_created.desc())
         if prompt != "":
-            images = images.filter(GalleryImage.path.like("%"+prompt+"%"))
+            images = images.filter(GalleryImage.prompt.like("%"+prompt+"%"))
         if model != "":
             images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%"))
         images = images.offset(page*images_per_page).limit(images_per_page)
diff --git a/ui/index.html b/ui/index.html
index f3f0574d..1819366e 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -519,14 +519,14 @@
         </div>
         <div id="tab-content-gallery" class="tab-content">
             <div id="gallery-search">
-                <button class="primaryButton" onclick="decrementGalleryPage()"><i class="fa-solid fa-arrow-left"></i></button>
-                <input id="gallery-prompt-search" type="text" onkeydown="gallery_keyDown_handler(event)" placeholder="Search for a prompt..."></input>
-                <input id="gallery-model-search" type="text" onkeydown="gallery_keyDown_handler(event)" placeholder="Search for a model..."></input>
+                <button id="gallery-prev" class="primaryButton"><i class="fa-solid fa-arrow-left"></i></button>
+                <input id="gallery-prompt-search" type="search" placeholder="Search for a prompt..."></input>
+                <input id="gallery-model-search" type="search" placeholder="Search for a model..."></input>
                 <label for="gallery-page">Page:</label>
                 <input id="gallery-page" name="Page" value="0" size="1" onkeypress="gallery_keyDown_handler(event)">
                 <input id="gallery-thumbnail-size" name="gallery-thumbnail-size" class="editor-slider" type="range" value="5.5" min="3" max="20" step="0.05">
                 <button class="primaryButton" id="gallery-refresh" onclick="refreshGallery(true)">Load</button>
-                <button class="primaryButton" onclick="incrementGalleryPage()"><i class="fa-solid fa-arrow-right"></i></button>
+                <button id="gallery-next" class="primaryButton"><i class="fa-solid fa-arrow-right"></i></button>
             </div>
             <div class="gallery">
                 <div class="gallery-container" id="imagecontainer"></div>
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 5323f427..24fe92a7 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -145,6 +145,12 @@ let embeddingsCardSizeSelector = document.querySelector("#embedding-card-size-se
 let galleryImginfoDialog = document.querySelector("#gallery-imginfo")
 let galleryThumbnailSize = document.querySelector("#gallery-thumbnail-size")
 let galleryImginfoDialogContent = document.querySelector("#gallery-imginfo-content")
+let galleryPageField = document.querySelector("#gallery-page")
+let galleryPrevBtn = document.querySelector("#gallery-prev")
+let galleryNextBtn = document.querySelector("#gallery-next")
+let galleryPromptSearchField = document.querySelector("#gallery-prompt-search")
+let galleryModelSearchField = document.querySelector("#gallery-model-search")
+
 
 let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
 let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
@@ -3256,23 +3262,25 @@ function layoutGallery() {
     })
 }
 
+galleryModelSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500))
+galleryPromptSearchField.addEventListener("keyup", debounce(e => refreshGallery(true), 500))
+
 function refreshGallery(newsearch = false) {
-    let buttons = document.querySelectorAll("#gallery-search button")
     if (newsearch) {
-        document.getElementById("gallery-page").value = 0
+        galleryPageField.value = 0
     }
     let container = document.getElementById("imagecontainer")
     container.innerHTML = ""
     let params = new URLSearchParams({
         prompt: document.getElementById("gallery-prompt-search").value,
         model: document.getElementById("gallery-model-search").value,
-        page: document.getElementById("gallery-page").value
+        page: galleryPageField.value
     })
 
     fetch('/all_images?' + params)
         .then(response => response.json())
         .then(json => {
-            if (document.getElementById("gallery-page").value > 0 && json.length == 0) {
+            if (galleryPageField.value > 0 && json.length == 0) {
                 decrementGalleryPage()
                 alert("No more images")
                 return
@@ -3295,23 +3303,32 @@ function refreshGallery(newsearch = false) {
                 layoutGallery()
             })
         })
-    fetch('/all_images?images_per_page=1&page=' + (parseInt(document.getElementById("gallery-page").value) + 1) * 50) // 50 has to be replaced if custom images per page is implemented
+
+    params.set("images_per_page", 1)
+    // 50 has to be replaced if custom images per page is implemented
+    params.set("page", (parseInt(galleryPageField.value) + 1) * 50)
+
+    fetch("/all_images?" + params)
         .then(response => response.json())
         .then(json => {
             if (json.length == 0) {
-                buttons[2].disabled = true
+                galleryNextBtn.disabled = true
             } else {
-                buttons[2].disabled = false
+                galleryNextBtn.disabled = false
             }
         })
-    if (document.getElementById("gallery-page").value == 0) {
-        buttons[0].disabled = true
+    if (galleryPageField.value == 0) {
+        galleryPrevBtn.disabled = true
     } else {
-        buttons[0].disabled = false
+        galleryPrevBtn.disabled = false
     }
     document.getElementById("gallery-refresh").innerText = "Refresh"
 }
 
+galleryPrevBtn.addEventListener("click", decrementGalleryPage)
+galleryNextBtn.addEventListener("click", incrementGalleryPage)
+
+
 document.addEventListener("tabClick", (e) => {
     if (e.detail.name == 'gallery') {
         refreshGallery()
@@ -3320,13 +3337,13 @@ document.addEventListener("tabClick", (e) => {
 
 
 function decrementGalleryPage() {
-    let page = Math.max(document.getElementById("gallery-page").value - 1, 0)
-    document.getElementById("gallery-page").value = page
+    let page = Math.max(galleryPageField.value - 1, 0)
+    galleryPageField.value = page
     refreshGallery(false)
 }
 
 function incrementGalleryPage() {
-    document.getElementById("gallery-page").value++
+    galleryPageField.value++
     refreshGallery(false)
 }