working lightbox navifation with js cache for details

ai_frame_image_server.py

@@ -58,23 +58,6 @@ def image_details(filename):
         "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>')
 def serve_thumbnail(filename):
@@ -122,7 +105,6 @@ def create() -> str:
         create_image(prompt)
 
     threading.Thread(target=create_image_in_background).start()
-    # return jsonify({"message": "Image creation started", "prompt": prompt if prompt else "Prompt will be generated"}), 200
     return render_template('image_queued.html', prompt=prompt)
 
 

templates/gallery.html

@@ -152,31 +152,63 @@
     </div>
 
     <script>
+        const images = Array.from(document.querySelectorAll('.gallery img'));
+        let currentIndex = 0;
+        const detailsCache = {};  // Cache object
+
         function openLightbox(imgEl) {
+            currentIndex = images.indexOf(imgEl);
+            showImageAndLoadDetails(currentIndex);
+            document.getElementById("lightbox").style.display = "flex";
+        }
+
+        function showImageAndLoadDetails(index) {
+            const imgEl = images[index];
             const filename = imgEl.dataset.filename;
             const fullsrc = imgEl.dataset.fullsrc;
-            const lightbox = document.getElementById("lightbox");
 
-            // show the image immediately
             document.getElementById("lightbox-img").src = fullsrc;
-            document.getElementById("lightbox-prompt").textContent = "Loading…";
-            lightbox.style.display = "flex";
 
-            // fetch details on‑demand
+            if (detailsCache[filename]) {
-            fetch(`/image-details/${encodeURIComponent(filename)}`)
+                // If cached, use cached data immediately
-                .then(r => r.ok ? r.json() : Promise.reject())
+                document.getElementById("lightbox-prompt").textContent =
-                .then(data => {
+                    `Model: ${detailsCache[filename].model}\n\n${detailsCache[filename].prompt}`;
-                    document.getElementById("lightbox-prompt").textContent =
+            } else {
-                        `Model: ${data.model}\n\n${data.prompt}`;
+                // Otherwise show loading and fetch
-                })
+                document.getElementById("lightbox-prompt").textContent = "Loading…";
-                .catch(() => {
+
-                    document.getElementById("lightbox-prompt").textContent =
+                fetch(`/image-details/${encodeURIComponent(filename)}`)
-                        "Couldn’t load details.";
+                    .then(response => {
-                });
+                        if (!response.ok) throw new Error("Network response was not ok");
+                        return response.json();
+                    })
+                    .then(data => {
+                        detailsCache[filename] = data; // Cache the data
+                        document.getElementById("lightbox-prompt").textContent =
+                            `Model: ${data.model}\n\n${data.prompt}`;
+                    })
+                    .catch(() => {
+                        document.getElementById("lightbox-prompt").textContent = "Couldn’t load details.";
+                    });
+            }
+        }
+
+        function nextImage() {
+            currentIndex = (currentIndex + 1) % images.length;
+            showImageAndLoadDetails(currentIndex);
+        }
+
+        function prevImage() {
+            currentIndex = (currentIndex - 1 + images.length) % images.length;
+            showImageAndLoadDetails(currentIndex);
+        }
+
+        function closeLightbox() {
+            document.getElementById("lightbox").style.display = "none";
         }
-        function closeLightbox() { document.getElementById("lightbox").style.display = "none"; }
     </script>
 
+
 </body>
 
 </html>