only load details when loading image in lightbox

ai_frame_image_server.py

@@ -36,24 +36,44 @@ def index() -> str:
         prompt=prompt,
         reload_interval=user_config["frame"]["reload_interval"],
     )
-    
+
-    
 @app.route("/images", methods=["GET"])
 def gallery() -> str:
-    """
-    Renders the gallery HTML template.
-    Returns:
-        str: The rendered HTML template.
-    """
     images = []
     for f in os.listdir(image_folder):
         if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif')):
-            path = os.path.join(image_folder, f)  # Full path to the image
+            images.append({'filename': f})
-            details = get_details_from_png(path)  # Your method to extract the prompt
+    images = sorted(images, key=lambda x: os.path.getmtime(os.path.join(image_folder, x['filename'])), reverse=True)
-            images.append({'filename': f, 'prompt': details["p"], 'model':details["m"], 'path': path})  # Add 'path' to the dictionary
-
-    images = sorted(images, key=lambda x: os.path.getmtime(x['path']), reverse=True)
     return render_template("gallery.html", images=images)
+    
+
+@app.route("/image-details/<filename>", methods=["GET"])
+def image_details(filename):
+    path = os.path.join(image_folder, filename)
+    if not os.path.exists(path):
+        return {"error": "File not found"}, 404
+    details = get_details_from_png(path)
+    return {
+        "prompt": details["p"],
+        "model": details["m"]
+    }
+    
+# @app.route("/images", methods=["GET"])
+# def gallery() -> str:
+#     """
+#     Renders the gallery HTML template.
+#     Returns:
+#         str: The rendered HTML template.
+#     """
+#     images = []
+#     for f in os.listdir(image_folder):
+#         if f.lower().endswith(('png', 'jpg', 'jpeg', 'gif')):
+#             path = os.path.join(image_folder, f)  # Full path to the image
+#             details = get_details_from_png(path)  # Your method to extract the prompt
+#             images.append({'filename': f, 'prompt': details["p"], 'model':details["m"], 'path': path})  # Add 'path' to the dictionary
+
+#     images = sorted(images, key=lambda x: os.path.getmtime(x['path']), reverse=True)
+#     return render_template("gallery.html", images=images)
 
 
 @app.route('/images/thumbnails/<path:filename>')

templates/gallery.html

@@ -132,7 +132,8 @@
     <div class="gallery">
         {% for image in images %}
         <img src="{{ url_for('images', filename='thumbnails/' + image.filename) }}"
-            data-fullsrc="{{ url_for('images', filename=image.filename) }}" onclick="openLightbox({{ loop.index0 }})">
+            data-fullsrc="{{ url_for('images', filename=image.filename) }}" data-filename="{{ image.filename }}"
+            loading="lazy" onclick="openLightbox(this)">
 
         {% endfor %}
     </div>
@@ -151,40 +152,31 @@
     </div>
 
     <script>
-        let images = [
+        function openLightbox(imgEl) {
-            {% for image in images %}
+            const filename = imgEl.dataset.filename;
-        {
+            const fullsrc = imgEl.dataset.fullsrc;
-            src: "{{ url_for('images', filename=image.filename) }}",
+            const lightbox = document.getElementById("lightbox");
-                prompt: `{{ image.prompt | escape }}`,
-                    model: `{{ image.model | escape }}`
 
-        },
+            // show the image immediately
-        {% endfor %}
+            document.getElementById("lightbox-img").src = fullsrc;
-        ];
+            document.getElementById("lightbox-prompt").textContent = "Loading…";
-        let currentIndex = 0;
+            lightbox.style.display = "flex";
 
-        function openLightbox(index) {
+            // fetch details on‑demand
-            currentIndex = index;
+            fetch(`/image-details/${encodeURIComponent(filename)}`)
-            <!-- document.getElementById("lightbox-img").src = images[currentIndex].src; -->
+                .then(r => r.ok ? r.json() : Promise.reject())
-            document.getElementById("lightbox-img").src = document.querySelectorAll('.gallery img')[currentIndex].dataset.fullsrc;
+                .then(data => {
-            document.getElementById("lightbox-prompt").textContent = "Model:" + images[currentIndex].model + "\n\n" + images[currentIndex].prompt;
+                    document.getElementById("lightbox-prompt").textContent =
-            document.getElementById("lightbox").style.display = "flex";
+                        `Model: ${data.model}\n\n${data.prompt}`;
-        }
+                })
-
+                .catch(() => {
-        function closeLightbox() {
+                    document.getElementById("lightbox-prompt").textContent =
-            document.getElementById("lightbox").style.display = "none";
+                        "Couldn’t load details.";
-        }
+                });
-
-        function nextImage() {
-            currentIndex = (currentIndex + 1) % images.length;
-            openLightbox(currentIndex);
-        }
-
-        function prevImage() {
-            currentIndex = (currentIndex - 1 + images.length) % images.length;
-            openLightbox(currentIndex);
         }
+        function closeLightbox() { document.getElementById("lightbox").style.display = "none"; }
     </script>
+
 </body>
 
 </html>