Added Gallery search for prompt & model

ui/easydiffusion/bucket_manager.py

@@ -100,11 +100,14 @@ def init():
             raise HTTPException(status_code=404, detail="Image not found")
     
     @server_api.get("/all_images")
-    def get_all_images(db: Session = Depends(get_db)):
+    def get_all_images(prompt: str = "", model: str = "", db: Session = Depends(get_db)):
         from easydiffusion.easydb.mappings import GalleryImage
-        images = db.query(GalleryImage).all()
-        return images
-
+        images = db.query(GalleryImage)
+        if prompt != "":
+            images = images.filter(GalleryImage.path.like("%"+prompt+"%"))
+        if model != "":
+            images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%"))
+        return images.all()
 
 def get_filename_from_url(url):
     path = urlparse(url).path

ui/index.html

@@ -517,7 +517,11 @@
             </div>
         </div>
         <div id="tab-content-gallery" class="tab-content">
-            <button class="primaryButton" onclick="refreshGallery()">Refresh</button>
+            <div id="gallery-search">
+                <textarea id="gallery-prompt-search" onkeydown="gallery_keyDown_handler(event)" placeholder="Search for a prompt..."></textarea>
+                <textarea id="gallery-model-search" onkeydown="gallery_keyDown_handler(event)" placeholder="Search for a model..."></textarea>
+                <button class="primaryButton" onclick="refreshGallery()">Refresh</button>
+            </div>
             <div class="gallery">
                 <div class="gallery-container" id="imagecontainer"></div>
             </div>

ui/media/css/main.css

@@ -1897,6 +1897,17 @@ div#enlarge-buttons {
   font-family: sans-serif;
 }
 
+#gallery-search {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+}
+
+#gallery-search>* {
+    margin: 0.5em;
+}
+
 .gallery-container {
   columns: 5 ;
   column-gap: 1.5rem;
@@ -1924,6 +1935,6 @@ div#enlarge-buttons {
 }
 
 
-#tab-content-gallery>button {
+#tab-content-gallery>* {
     margin: 8px;
 }

ui/media/js/main.js

@@ -3097,8 +3097,12 @@ function galleryImage(item) {
 
 function refreshGallery() {
     let container = document.getElementById("imagecontainer")
+    let promptsearchfield = document.getElementById("gallery-prompt-search").value
+    let promptsearch = promptsearchfield.length > 0 ? "prompt=" + promptsearchfield  + "&" : ""
+    let modelsearchfield = document.getElementById("gallery-model-search").value
+    let modelsearch = modelsearchfield.length > 0 ? "model=" + modelsearchfield  + "&" : ""
     container.innerHTML=""
-    fetch('/all_images')
+    fetch('/all_images?' + promptsearch + modelsearch)
         .then(response => response.json())
         .then(json => {
             console.log(json)
@@ -3107,3 +3111,10 @@ function refreshGallery() {
             })
          })
 }
+
+function gallery_keyDown_handler(event) {
+    if (event.key === 'Enter') {
+        event.preventDefault()
+        refreshGallery()
+    }
+}