From 6cc30bd2d05fa74f8329aec511236df305a4652d Mon Sep 17 00:00:00 2001
From: Karl Hudgell <karl.hudgell@bjss.com>
Date: Tue, 1 Apr 2025 12:12:15 +0100
Subject: [PATCH] add /gallery to show all generated images

---
 ai_frame_image_server.py |  6 ++++
 templates/gallery.html   | 71 ++++++++++++++++++++++++++++++++++++++++
 templates/index.html     |  2 +-
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 templates/gallery.html
diff --git a/ai_frame_image_server.py b/ai_frame_image_server.py
index 25c1fcc..7caea33 100644
--- a/ai_frame_image_server.py
+++ b/ai_frame_image_server.py
@@ -25,6 +25,12 @@ def index():
         image="./image.png",
         reload_interval=user_config["frame"]["reload_interval"],
     )
+    
+
+@app.route("/gallery")
+def gallery():
+    images = [f for f in os.listdir(image_folder) if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif'))]
+    return render_template("gallery.html", images=images)
 
 
 @app.route("/images/<filename>")
diff --git a/templates/gallery.html b/templates/gallery.html
new file mode 100644
index 0000000..8c86efa
--- /dev/null
+++ b/templates/gallery.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Archive</title>
+    <style>
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            gap: 10px;
+        }
+        .gallery img {
+            width: 100%;
+            height: auto;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        /* Lightbox styles */
+        .lightbox {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            justify-content: center;
+            align-items: center;
+        }
+        .lightbox img {
+            max-width: 90%;
+            max-height: 90%;
+            border-radius: 5px;
+        }
+        .lightbox .close {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            font-size: 30px;
+            color: white;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <h1>Image Archive</h1>
+    <div class="gallery">
+        {% for image in images %}
+            <img src="{{ url_for('images', filename=image) }}" alt="Image" onclick="openLightbox(this.src)">
+        {% endfor %}
+    </div>
+
+    <!-- Lightbox -->
+    <div class="lightbox" id="lightbox">
+        <span class="close" onclick="closeLightbox()">&times;</span>
+        <img id="lightbox-img" src="">
+    </div>
+
+    <script>
+        function openLightbox(src) {
+            document.getElementById("lightbox-img").src = src;
+            document.getElementById("lightbox").style.display = "flex";
+        }
+
+        function closeLightbox() {
+            document.getElementById("lightbox").style.display = "none";
+        }
+    </script>
+</body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index d1279ac..478ae6d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Latest Image</title>
+    <title>AI Image of the day</title>
     <style>
         * {
             margin: 0;
