Improved pagination

ui/easydiffusion/bucket_manager.py

@@ -100,14 +100,14 @@ def init():
             raise HTTPException(status_code=404, detail="Image not found")
     
     @server_api.get("/all_images")
-    def get_all_images(prompt: str = "", model: str = "", page = 0, db: Session = Depends(get_db)):
+    def get_all_images(prompt: str = "", model: str = "", page: int = 0, images_per_page: int = 50, db: Session = Depends(get_db)):
         from easydiffusion.easydb.mappings import GalleryImage
-        images = db.query(GalleryImage)
+        images = db.query(GalleryImage).order_by(GalleryImage.time_created.desc())
         if prompt != "":
             images = images.filter(GalleryImage.path.like("%"+prompt+"%"))
         if model != "":
             images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%"))
-        images = images.offset(page*50).limit(50)
+        images = images.offset(page*images_per_page).limit(images_per_page)
         return images.all()
     
     @server_api.get("/single_image")

ui/index.html

@@ -518,10 +518,13 @@
         </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>
                 <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>
-                <input type="hidden" id="gallery-page" name="page" value="0">
-                <button class="primaryButton" onclick="refreshGallery()">Refresh</button>
+                <label for="gallery-page">Page:</label>
+                <input id="gallery-page" name="Page" value="0" size="1" onkeypress="gallery_keyDown_handler(event)">
+                <button class="primaryButton" id="gallery-refresh" onclick="refreshGallery()">Load</button>
+                <button class="primaryButton" onclick="incrementGalleryPage()"><i class="fa-solid fa-arrow-right"></i></button>
             </div>
             <div class="gallery">
                 <div class="gallery-container" id="imagecontainer"></div>

ui/media/js/main.js

@@ -3110,20 +3110,36 @@ function galleryImage(item) {
 
 function refreshGallery() {
     let container = document.getElementById("imagecontainer")
-    params = new URLSearchParams({
+    let params = new URLSearchParams({
         prompt: document.getElementById("gallery-prompt-search").value,
         model: document.getElementById("gallery-model-search").value,
         page: document.getElementById("gallery-page").value
     })
-    container.innerHTML=""
+    container.innerHTML = ""
     fetch('/all_images?' + params)
         .then(response => response.json())
         .then(json => {
-            console.log(json)
-            json.forEach( item => {
+            if (document.getElementById("gallery-page").value > 0 && json.length == 0) {
+                decrementGalleryPage()
+                alert("No more images")
+                return
+            }
+            json.forEach(item => {
                 container.appendChild(galleryImage(item))
             })
         })
+    document.getElementById("gallery-refresh").innerText = "Refresh"
+}
+
+function decrementGalleryPage() {
+    let page = Math.max(document.getElementById("gallery-page").value - 1, 0)
+    document.getElementById("gallery-page").value = page
+    refreshGallery()
+}
+
+function incrementGalleryPage() {
+    document.getElementById("gallery-page").value++
+    refreshGallery()
 }
 
 function gallery_keyDown_handler(event) {