Masonry gallery, add timestamp

ui/easydiffusion/bucket_manager.py

@@ -91,24 +91,18 @@ def init():
 
     @server_api.get("/image/{image_path:path}")
     def get_image(image_path: str, db: Session = Depends(get_db)):
-        from easydiffusion.easydb.mappings import Image
+        from easydiffusion.easydb.mappings import GalleryImage
         image_path = str(abspath(image_path))
         try:
-            image = db.query(Image).filter(Image.path == image_path).first()
+            image = db.query(GalleryImage).filter(GalleryImage.path == image_path).first()
             return FileResponse(image.path)
         except Exception as e:
             raise HTTPException(status_code=404, detail="Image not found")
     
     @server_api.get("/all_images")
     def get_all_images(db: Session = Depends(get_db)):
-        from easydiffusion.easydb.mappings import Image
-        images = db.query(Image).all()
-        # 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")
+        from easydiffusion.easydb.mappings import GalleryImage
+        images = db.query(GalleryImage).all()
         return images
 
 

ui/easydiffusion/easydb/mappings.py

@@ -1,9 +1,10 @@
-from sqlalchemy import Column, Integer, String, Float, Boolean
+from sqlalchemy import Column, Integer, String, Float, Boolean, DateTime
 from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.sql import func
 
 Base = declarative_base()
 
-class Image(Base):
+class GalleryImage(Base):
     __tablename__ = 'images'
 
     path = Column(String, primary_key=True)
@@ -23,10 +24,11 @@ class Image(Base):
     use_upscale = Column(String)
     prompt = Column(String)
     negative_prompt = Column(String)
+    time_created = Column(DateTime(timezone=True), server_default=func.now())
 
     def __repr__(self):
-        return "<Image(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')>" % (
+        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)
 
 from easydiffusion.easydb.database import engine
-Image.metadata.create_all(engine)
+GalleryImage.metadata.create_all(engine)

ui/easydiffusion/utils/save_utils.py

@@ -157,11 +157,11 @@ def save_images_to_disk(
                 else:
                     return metadata_entries[i]["use_lora_model"] + ":" + str(metadata_entries[i]["lora_alpha"])
 
-            from easydiffusion.easydb.mappings import Image
+            from easydiffusion.easydb.mappings import GalleryImage
             from easydiffusion.easydb.database import SessionLocal
 
             session = SessionLocal()
-            session.add(Image(
+            session.add(GalleryImage(
                 path = path_i,
                 seed = metadata_entries[i]["seed"],
                 use_stable_diffusion_model = metadata_entries[i]["use_stable_diffusion_model"],

ui/index.html

@@ -518,7 +518,9 @@
         </div>
         <div id="tab-content-gallery" class="tab-content">
             <button class="primaryButton" onclick="refreshGallery()">Refresh</button>
-            <div id="imagecontainer"></div>
+            <div class="gallery">
+                <div class="gallery-container" id="imagecontainer"></div>
+            </div>
         </div>
     </div>
     

ui/media/css/main.css

@@ -1889,21 +1889,40 @@ div#enlarge-buttons {
 }
 
 /* Gallery CSS */
-#imagecontainer {
-    display: flex;
-    justify-content: space-around;
-    flex-flow: row wrap;
-    align-items: center;
+.gallery {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-family: sans-serif;
 }
 
-#imagecontainer>img {
-    width: 30vw;
-    min-width: 256px;
-    max-width: 1024px;
-    height: auto;
-    margin-block: 1vh;
-    border: 4px white solid;
+.gallery-container {
+  columns: 5 ;
+  column-gap: 1.5rem;
+  width: 95%;
+  margin: 0 0 ;
 }
+.gallery-container  div {
+    margin: 0 1.5rem 1.5rem 0;
+    display: inline-block;
+    width: 100%;
+    padding: 5px;
+    
+    transition: all .75s ease-in-out;
+}
+
+.gallery-container div img {
+    width: 100%;
+    border-radius: 5px;
+    transition: all .25s ease-in-out;
+    box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
+}
+
+.gallery-container div img:hover {
+    box-shadow: 1px 1px 15px rgba(32,0,128,0.8);
+}
+
 
 #tab-content-gallery>button {
     margin: 8px;

ui/media/js/main.js

@@ -3085,13 +3085,25 @@ let recentResolutionsValues = []
 })()
 
 /* Gallery JS */
+function galleryImage(item) {
+    let div = document.createElement("div")
+    let img = document.createElement("img")
+
+    img.src = "/image/" + item.path
+    img.dataset["request"] = JSON.stringify(item)
+    div.appendChild(img)
+    return div
+}
 
 function refreshGallery() {
     let container = document.getElementById("imagecontainer")
-    container.remove()
+    container.innerHTML=""
     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 => document.getElementById("tab-content-gallery").appendChild(div))
-}
+        .then(response => response.json())
+        .then(json => {
+            console.log(json)
+            json.forEach( item => {
+                container.appendChild(galleryImage(item))
+            })
+         })
+}