From 64fc777a2be8ee456c9119d34e1eae75b3bbb175 Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Wed, 9 Aug 2023 22:21:36 +0200
Subject: [PATCH 01/10] Added nsfw flag, that way there won't be issues later
 on if it was to be implemented

---
 ui/easydiffusion/easydb/mappings.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py
index 31549709..035f2ee8 100644
--- a/ui/easydiffusion/easydb/mappings.py
+++ b/ui/easydiffusion/easydb/mappings.py
@@ -25,6 +25,7 @@ class GalleryImage(Base):
     prompt = Column(String)
     negative_prompt = Column(String)
     time_created = Column(DateTime(timezone=True), server_default=func.now())
+    nsfw = Column(String, server_default='unknown')
 
     def __repr__(self):
         return "<GalleryImage(path='%s', seed='%s', use_stable_diffusion_model='%s', clip_skip='%s', use_vae_model='%s', sampler_name='%s', width='%s', height='%s', num_inference_steps='%s', guidance_scale='%s', lora='%s', use_hypernetwork_model='%s', tiling='%s', use_face_correction='%s', use_upscale='%s', prompt='%s', negative_prompt='%s')>" % (

From 2bf7116f011868ab8675aa6fa94e215f1b813d77 Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Wed, 9 Aug 2023 22:50:03 +0200
Subject: [PATCH 02/10] Added Gallery search for prompt & model

---
 ui/easydiffusion/bucket_manager.py | 11 +++++++----
 ui/index.html                      |  6 +++++-
 ui/media/css/main.css              | 13 ++++++++++++-
 ui/media/js/main.js                | 13 ++++++++++++-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index 0d72ed06..43b5f147 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/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
diff --git a/ui/index.html b/ui/index.html
index d5803fcc..9aeb7ab2 100644
--- a/ui/index.html
+++ b/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>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index e0d1d02d..d41d6f17 100644
--- a/ui/media/css/main.css
+++ b/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;
 }
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index a4476252..5beb094d 100644
--- a/ui/media/js/main.js
+++ b/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()
+    }
+}
\ No newline at end of file

From 8014ed2055eac792a8ec738ceaa2e07f8cafe9ee Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Wed, 9 Aug 2023 23:56:06 +0200
Subject: [PATCH 03/10] Added single-image-site

---
 ui/easydiffusion/bucket_manager.py  | 13 +++++++++++++
 ui/easydiffusion/easydb/mappings.py | 21 +++++++++++++++++++++
 ui/media/css/single-gallery.css     |  9 +++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 ui/media/css/single-gallery.css

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index 43b5f147..9b7aeae1 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -108,6 +108,19 @@ def init():
         if model != "":
             images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%"))
         return images.all()
+    
+    @server_api.get("/single_image")
+    def get_single_image(image_path: str, db: Session = Depends(get_db)):
+        from easydiffusion.easydb.mappings import GalleryImage
+        image_path = str(abspath(image_path))
+        try:
+            image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first()
+            head = "<head><link rel='stylesheet' href='/media/css/single-gallery.css'></head>"
+            body = "<body><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
+            return Response(content="<html>" + head + body + "</head>", media_type="text/html")
+        except Exception as e:
+            print(e)
+            raise HTTPException(status_code=404, detail="Image not found")
 
 def get_filename_from_url(url):
     path = urlparse(url).path
diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py
index 035f2ee8..653539ad 100644
--- a/ui/easydiffusion/easydb/mappings.py
+++ b/ui/easydiffusion/easydb/mappings.py
@@ -31,5 +31,26 @@ class GalleryImage(Base):
         return "<GalleryImage(path='%s', seed='%s', use_stable_diffusion_model='%s', clip_skip='%s', use_vae_model='%s', sampler_name='%s', width='%s', height='%s', num_inference_steps='%s', guidance_scale='%s', lora='%s', use_hypernetwork_model='%s', tiling='%s', use_face_correction='%s', use_upscale='%s', prompt='%s', negative_prompt='%s')>" % (
             self.path, self.seed, self.use_stable_diffusion_model, self.clip_skip, self.use_vae_model, self.sampler_name, self.width, self.height, self.num_inference_steps, self.guidance_scale, self.lora, self.use_hypernetwork_model, self.tiling, self.use_face_correction, self.use_upscale, self.prompt, self.negative_prompt)
 
+    def htmlForm(self) -> str:
+        return "<div><p>Path: " + str(self.path) + "</p>" + \
+                "Seed: " + str(self.seed) + "</p>" + \
+                "Stable Diffusion Model: " + str(self.use_stable_diffusion_model) + "</p>" + \
+                "Prompt: " + str(self.prompt) + "</p>" + \
+                "Negative Prompt: " + str(self.negative_prompt) + "</p>" + \
+                "Clip Skip: " + str(self.clip_skip) + "</p>" + \
+                "VAE Model: " + str(self.use_vae_model) + "</p>" + \
+                "Sampler: " + str(self.sampler_name) + "</p>" + \
+                "Size: " + str(self.height) + "x" + str(self.width) + "</p>" + \
+                "Inference Steps: " + str(self.num_inference_steps) + "</p>" + \
+                "Guidance Scale: " + str(self.guidance_scale) + "</p>" + \
+                "LoRA: " + str(self.lora) + "</p>" + \
+                "Hypernetwork: " + str(self.use_hypernetwork_model) + "</p>" + \
+                "Tiling: " + str(self.tiling) + "</p>" + \
+                "Face Correction: " + str(self.use_face_correction) + "</p>" + \
+                "Upscale: " + str(self.use_upscale) + "</p>" + \
+                "Time Created: " + str(self.time_created) + "</p>" + \
+                "NSFW: " + str(self.nsfw) + "</p></div>"
+
+
 from easydiffusion.easydb.database import engine
 GalleryImage.metadata.create_all(engine)
diff --git a/ui/media/css/single-gallery.css b/ui/media/css/single-gallery.css
new file mode 100644
index 00000000..dbaedfa1
--- /dev/null
+++ b/ui/media/css/single-gallery.css
@@ -0,0 +1,9 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+p {
+    margin: 0px;
+}
\ No newline at end of file

From 39459f14c5ad4f052b53bba78fc2c1e24c22f0bc Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Thu, 10 Aug 2023 00:05:07 +0200
Subject: [PATCH 04/10] Mockup Page communication

---
 ui/easydiffusion/bucket_manager.py | 2 +-
 ui/media/js/main.js                | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index 9b7aeae1..e17a1c2a 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -116,7 +116,7 @@ def init():
         try:
             image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first()
             head = "<head><link rel='stylesheet' href='/media/css/single-gallery.css'></head>"
-            body = "<body><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
+            body = "<body><div><button id='button'></button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
             return Response(content="<html>" + head + body + "</head>", media_type="text/html")
         except Exception as e:
             print(e)
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 5beb094d..72cd72e8 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -3088,6 +3088,15 @@ let recentResolutionsValues = []
 function galleryImage(item) {
     let div = document.createElement("div")
     let img = document.createElement("img")
+    img.addEventListener("click", (event) => {
+        let w;
+        w = window.open("/single_image?image_path=" + item.path, "_blank")
+        w.addEventListener("DOMContentLoaded", () => {
+            w.document.getElementById("button").addEventListener("click", () => {
+                document.title = "hi"
+            })
+        })
+    })
 
     img.src = "/image/" + item.path
     img.dataset["request"] = JSON.stringify(item)

From 4faa334bf601dbbb11b0cfc39431dc89af9289f9 Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Thu, 10 Aug 2023 23:27:35 +0200
Subject: [PATCH 05/10] Styled up the opened tab

---
 ui/easydiffusion/bucket_manager.py  |  2 +-
 ui/easydiffusion/easydb/mappings.py | 38 ++++++++++++++---------------
 ui/media/css/single-gallery.css     | 33 +++++++++++++++++++++++--
 ui/media/js/main.js                 |  8 ++++--
 4 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index e17a1c2a..34b8bd2f 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -116,7 +116,7 @@ def init():
         try:
             image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first()
             head = "<head><link rel='stylesheet' href='/media/css/single-gallery.css'></head>"
-            body = "<body><div><button id='button'></button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
+            body = "<body><div><button id='use_these_settings' class='primaryButton'>Use these settings</button><button id='use_as_input' class='primaryButton'>Use as Input</button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
             return Response(content="<html>" + head + body + "</head>", media_type="text/html")
         except Exception as e:
             print(e)
diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py
index 653539ad..a01b50de 100644
--- a/ui/easydiffusion/easydb/mappings.py
+++ b/ui/easydiffusion/easydb/mappings.py
@@ -25,31 +25,31 @@ class GalleryImage(Base):
     prompt = Column(String)
     negative_prompt = Column(String)
     time_created = Column(DateTime(timezone=True), server_default=func.now())
-    nsfw = Column(String, server_default='unknown')
+    nsfw = Column(Boolean, server_default=None)
 
     def __repr__(self):
         return "<GalleryImage(path='%s', seed='%s', use_stable_diffusion_model='%s', clip_skip='%s', use_vae_model='%s', sampler_name='%s', width='%s', height='%s', num_inference_steps='%s', guidance_scale='%s', lora='%s', use_hypernetwork_model='%s', tiling='%s', use_face_correction='%s', use_upscale='%s', prompt='%s', negative_prompt='%s')>" % (
             self.path, self.seed, self.use_stable_diffusion_model, self.clip_skip, self.use_vae_model, self.sampler_name, self.width, self.height, self.num_inference_steps, self.guidance_scale, self.lora, self.use_hypernetwork_model, self.tiling, self.use_face_correction, self.use_upscale, self.prompt, self.negative_prompt)
 
     def htmlForm(self) -> str:
-        return "<div><p>Path: " + str(self.path) + "</p>" + \
-                "Seed: " + str(self.seed) + "</p>" + \
-                "Stable Diffusion Model: " + str(self.use_stable_diffusion_model) + "</p>" + \
-                "Prompt: " + str(self.prompt) + "</p>" + \
-                "Negative Prompt: " + str(self.negative_prompt) + "</p>" + \
-                "Clip Skip: " + str(self.clip_skip) + "</p>" + \
-                "VAE Model: " + str(self.use_vae_model) + "</p>" + \
-                "Sampler: " + str(self.sampler_name) + "</p>" + \
-                "Size: " + str(self.height) + "x" + str(self.width) + "</p>" + \
-                "Inference Steps: " + str(self.num_inference_steps) + "</p>" + \
-                "Guidance Scale: " + str(self.guidance_scale) + "</p>" + \
-                "LoRA: " + str(self.lora) + "</p>" + \
-                "Hypernetwork: " + str(self.use_hypernetwork_model) + "</p>" + \
-                "Tiling: " + str(self.tiling) + "</p>" + \
-                "Face Correction: " + str(self.use_face_correction) + "</p>" + \
-                "Upscale: " + str(self.use_upscale) + "</p>" + \
-                "Time Created: " + str(self.time_created) + "</p>" + \
-                "NSFW: " + str(self.nsfw) + "</p></div>"
+        return "<div class='panel-box'><p>Path: " + str(self.path) + "</p>" + \
+                "<p>Seed: " + str(self.seed) + "</p>" + \
+                "<p>Stable Diffusion Model: " + str(self.use_stable_diffusion_model) + "</p>" + \
+                "<p>Prompt: " + str(self.prompt) + "</p>" + \
+                "<p>Negative Prompt: " + str(self.negative_prompt) + "</p>" + \
+                "<p>Clip Skip: " + str(self.clip_skip) + "</p>" + \
+                "<p>VAE Model: " + str(self.use_vae_model) + "</p>" + \
+                "<p>Sampler: " + str(self.sampler_name) + "</p>" + \
+                "<p>Size: " + str(self.height) + "x" + str(self.width) + "</p>" + \
+                "<p>Inference Steps: " + str(self.num_inference_steps) + "</p>" + \
+                "<p>Guidance Scale: " + str(self.guidance_scale) + "</p>" + \
+                "<p>LoRA: " + str(self.lora) + "</p>" + \
+                "<p>Hypernetwork: " + str(self.use_hypernetwork_model) + "</p>" + \
+                "<p>Tiling: " + str(self.tiling) + "</p>" + \
+                "<p>Face Correction: " + str(self.use_face_correction) + "</p>" + \
+                "<p>Upscale: " + str(self.use_upscale) + "</p>" + \
+                "<p>Time Created: " + str(self.time_created) + "</p>" + \
+                "<p>NSFW: " + str(self.nsfw) + "</p></div>"
 
 
 from easydiffusion.easydb.database import engine
diff --git a/ui/media/css/single-gallery.css b/ui/media/css/single-gallery.css
index dbaedfa1..24f22e47 100644
--- a/ui/media/css/single-gallery.css
+++ b/ui/media/css/single-gallery.css
@@ -1,9 +1,38 @@
+@import url("/media/css/themes.css");
+@import url("/media/css/main.css");
+
 body {
     display: flex;
     flex-direction: column;
     align-items: center;
+    background-color: var(--background-color1);
 }
 
-p {
-    margin: 0px;
+img {
+    border-radius: 5px;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+    color: var(--text-color);
+    cursor: default;
+    margin: 6px;
+}
+
+::-moz-selection {
+    /* Code for Firefox */
+    color: none;
+    background: none;
+}
+
+::selection {
+    color: none;
+    background: none;
+}
+
+button {
+    margin: 8px;
+}
+
+div {
+    margin: 16px;
 }
\ No newline at end of file
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 72cd72e8..11011a20 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -3092,8 +3092,12 @@ function galleryImage(item) {
         let w;
         w = window.open("/single_image?image_path=" + item.path, "_blank")
         w.addEventListener("DOMContentLoaded", () => {
-            w.document.getElementById("button").addEventListener("click", () => {
-                document.title = "hi"
+            w.document.getElementsByTagName("body")[0].classList.add(themeField.value)
+            w.document.getElementById("use_these_settings").addEventListener("click", () => {
+                alert("use these settings")
+            })
+            w.document.getElementById("use_as_input").addEventListener("click", () => {
+                alert("use as input")
             })
         })
     })

From 20792837130f693566971e0eae6d93e4cca03872 Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Fri, 11 Aug 2023 21:32:20 +0200
Subject: [PATCH 06/10] Added cross page use these settings

---
 ui/easydiffusion/bucket_manager.py  |  2 +-
 ui/easydiffusion/easydb/mappings.py | 25 +++++++++++++++++++++++++
 ui/media/js/main.js                 |  2 +-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index 34b8bd2f..925ced27 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -116,7 +116,7 @@ def init():
         try:
             image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first()
             head = "<head><link rel='stylesheet' href='/media/css/single-gallery.css'></head>"
-            body = "<body><div><button id='use_these_settings' class='primaryButton'>Use these settings</button><button id='use_as_input' class='primaryButton'>Use as Input</button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
+            body = f"<body><div><button id='use_these_settings' class='primaryButton' json='{image.settingsJSON()}'>Use these settings</button><button id='use_as_input' class='primaryButton'>Use as Input</button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
             return Response(content="<html>" + head + body + "</head>", media_type="text/html")
         except Exception as e:
             print(e)
diff --git a/ui/easydiffusion/easydb/mappings.py b/ui/easydiffusion/easydb/mappings.py
index a01b50de..214a4c68 100644
--- a/ui/easydiffusion/easydb/mappings.py
+++ b/ui/easydiffusion/easydb/mappings.py
@@ -50,6 +50,31 @@ class GalleryImage(Base):
                 "<p>Upscale: " + str(self.use_upscale) + "</p>" + \
                 "<p>Time Created: " + str(self.time_created) + "</p>" + \
                 "<p>NSFW: " + str(self.nsfw) + "</p></div>"
+    
+    def settingsJSON(self) -> str:
+        # some are still missing: prompt strength, lora
+        json = {
+            "numOutputsTotal": 1,
+            "seed": self.seed,
+            "reqBody": {
+                "prompt": self.prompt,
+                "negative_prompt": self.negative_prompt,
+                "width": self.width,
+                "height": self.height,
+                "seed": self.seed,
+                "num_inference_steps": self.num_inference_steps,
+                "guidance_scale": self.guidance_scale,
+                "use_face_correction": self.use_face_correction,
+                "use_upscale": self.use_upscale,
+                "sampler_name": self.sampler_name,
+                "use_stable_diffusion_model": self.use_stable_diffusion_model,
+                "clip_skip": self.clip_skip,
+                "tiling": self.tiling,
+                "use_vae_model": self.use_vae_model,
+                "use_hypernetwork_model": self.use_hypernetwork_model
+            }}
+        from json import dumps
+        return dumps(json)
 
 
 from easydiffusion.easydb.database import engine
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 11011a20..d54913fa 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -3094,7 +3094,7 @@ function galleryImage(item) {
         w.addEventListener("DOMContentLoaded", () => {
             w.document.getElementsByTagName("body")[0].classList.add(themeField.value)
             w.document.getElementById("use_these_settings").addEventListener("click", () => {
-                alert("use these settings")
+                restoreTaskToUI(JSON.parse(w.document.getElementById("use_these_settings").getAttribute("json")))
             })
             w.document.getElementById("use_as_input").addEventListener("click", () => {
                 alert("use as input")

From 216ecce506994c76c100d4e27fe57e5121c6e8ec Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Fri, 11 Aug 2023 21:40:49 +0200
Subject: [PATCH 07/10] The use as Input button confuses me, that's why it is
 now disabled

---
 ui/easydiffusion/bucket_manager.py | 2 +-
 ui/media/css/single-gallery.css    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index 925ced27..f14c7bc0 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -116,7 +116,7 @@ def init():
         try:
             image: GalleryImage = db.query(GalleryImage).filter(GalleryImage.path == image_path).first()
             head = "<head><link rel='stylesheet' href='/media/css/single-gallery.css'></head>"
-            body = f"<body><div><button id='use_these_settings' class='primaryButton' json='{image.settingsJSON()}'>Use these settings</button><button id='use_as_input' class='primaryButton'>Use as Input</button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
+            body = f"<body><div><button id='use_these_settings' class='primaryButton' json='{image.settingsJSON()}'>Use these settings</button><button id='use_as_input' class='primaryButton' disabled>Use as Input</button></div><img src='/image/" + image.path + "'>" + image.htmlForm() + "</body>"
             return Response(content="<html>" + head + body + "</head>", media_type="text/html")
         except Exception as e:
             print(e)
diff --git a/ui/media/css/single-gallery.css b/ui/media/css/single-gallery.css
index 24f22e47..2427bf0b 100644
--- a/ui/media/css/single-gallery.css
+++ b/ui/media/css/single-gallery.css
@@ -35,4 +35,8 @@ button {
 
 div {
     margin: 16px;
+}
+
+:disabled {
+    color: gray;
 }
\ No newline at end of file

From f3367a67732a57c9a91fc24f411fe2ac0afb4d3d Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Sat, 12 Aug 2023 16:23:36 +0200
Subject: [PATCH 08/10] Implemented JeLuF's suggestion

---
 ui/media/js/main.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 5beb094d..0628b015 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -3097,12 +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  + "&" : ""
+    params = new URLSearchParams({
+        prompt: promptsearchfield,
+        model: modelsearchfield
+    })
     container.innerHTML=""
-    fetch('/all_images?' + promptsearch + modelsearch)
+    fetch('/all_images?' + params)
         .then(response => response.json())
         .then(json => {
             console.log(json)

From ff75adab7f3f5e36fd3775a58eadaef2421a1c55 Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Sat, 12 Aug 2023 16:23:36 +0200
Subject: [PATCH 09/10] Implemented JeLuF's suggestion & added pagination
 basics

---
 ui/easydiffusion/bucket_manager.py |  3 ++-
 ui/index.html                      |  1 +
 ui/media/js/main.js                | 11 ++++++-----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index f14c7bc0..e8d65a48 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -100,13 +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 = "", db: Session = Depends(get_db)):
+    def get_all_images(prompt: str = "", model: str = "", page = 0, db: Session = Depends(get_db)):
         from easydiffusion.easydb.mappings import GalleryImage
         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+"%"))
+        images = images.offset(page*50).limit(50)
         return images.all()
     
     @server_api.get("/single_image")
diff --git a/ui/index.html b/ui/index.html
index 9aeb7ab2..5676ab5c 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -520,6 +520,7 @@
             <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>
+                <input type="hidden" id="gallery-page" name="page" value="0">
                 <button class="primaryButton" onclick="refreshGallery()">Refresh</button>
             </div>
             <div class="gallery">
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index d54913fa..34f84399 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -3110,12 +3110,13 @@ 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  + "&" : ""
+    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=""
-    fetch('/all_images?' + promptsearch + modelsearch)
+    fetch('/all_images?' + params)
         .then(response => response.json())
         .then(json => {
             console.log(json)

From 680b290ae7011eb559fd34cceceb6e5707af8b4b Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Sat, 12 Aug 2023 17:08:33 +0200
Subject: [PATCH 10/10] Improved pagination

---
 ui/easydiffusion/bucket_manager.py |  6 +++---
 ui/index.html                      |  7 +++++--
 ui/media/js/main.js                | 26 +++++++++++++++++++++-----
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index e8d65a48..41bf09b6 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/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")
diff --git a/ui/index.html b/ui/index.html
index 5676ab5c..40beed92 100644
--- a/ui/index.html
+++ b/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>
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 34f84399..edacd977 100644
--- a/ui/media/js/main.js
+++ b/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) {