From 44082b83fca2467a1506f3da6e12fb107e099f69 Mon Sep 17 00:00:00 2001
From: ManInDark <61268856+ManInDark@users.noreply.github.com>
Date: Sun, 6 Aug 2023 18:56:07 +0200
Subject: [PATCH] Added UI components

---
 ui/easydiffusion/bucket_manager.py |  3 ++-
 ui/index.html                      | 37 ++++++++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/ui/easydiffusion/bucket_manager.py b/ui/easydiffusion/bucket_manager.py
index e4013dc5..5c30dc77 100644
--- a/ui/easydiffusion/bucket_manager.py
+++ b/ui/easydiffusion/bucket_manager.py
@@ -104,10 +104,11 @@ def init():
     def get_all_images(db: Session = Depends(get_db)):
         from easydiffusion.easydb.mappings import Image
         images = db.query(Image).all()
-        sum_string = ""
+        sum_string = "<div id='imagecontainer'>"
         for img in images:
             options = f"Path: {img.path}\nPrompt: {img.prompt}\nNegative Prompt: {img.negative_prompt}\nSeed: {img.seed}\nModel: {img.use_stable_diffusion_model}\nSize: {img.height}x{img.width}\nSampler: {img.sampler_name}\nSteps: {img.num_inference_steps}\nGuidance Scale: {img.guidance_scale}\nLoRA: {img.lora}\nUpscaling: {img.use_upscale}\nFace Correction: {img.use_face_correction}\n"
             sum_string += f"<img src='/image/{img.path}' title='{options}'>"
+        sum_string += "</div>"
         return Response(content=sum_string, media_type="text/html")
 
 
diff --git a/ui/index.html b/ui/index.html
index 0fcb807d..9f5547e2 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -49,6 +49,9 @@
             <span id="tab-about" class="tab">
                 <span><i class="fa fa-comments icon"></i> Help & Community</span>
             </span>
+            <span id="tab-gallery" class="tab">
+                <span><i class="fa fa-comments"> Gallery</i></span>
+            </span>
         </div>
     </div>
 
@@ -455,6 +458,40 @@
                 </div>
             </div>
         </div>
+
+        <div id="tab-content-gallery" class="tab-content">
+            <script>
+                tab = document.getElementById("tab-content-gallery")
+                new MutationObserver(function() { // to update all the images, just call this function
+                    console.log("clicked")
+                    container = document.getElementById("imagecontainer")
+                    container.remove()
+                    fetch('/all_images')
+                        .then(response => response.text())
+                        .then(text => new DOMParser().parseFromString(text, 'text/html'))
+                        .then(html_like => html_like.getElementsByTagName('div')[0])
+                        .then(div => tab.appendChild(div))
+                    }).observe(tab, {attributes: true})
+                </script>
+                <style>
+                    #imagecontainer {
+                        display: flex;
+                        justify-content: space-around;
+                        flex-flow: row wrap;
+                        align-items: center;
+                    }
+
+                    #imagecontainer>img {
+                        width: 30vw;
+                        min-width: 256px;
+                        max-width: 1024px;
+                        height: auto;
+                        margin-block: 1vh;
+                        border: 4px white solid;
+                    }
+                </style>
+            <div id="imagecontainer"></div>
+        </div>
     </div>
     
     <div class="popup" id="splash-screen" data-version="1">