Karl/ai-frame-image-server
1
0
Fork 0
mirror of https://github.com/karl0ss/ai_image_frame_server.git synced 2025-06-21 15:59:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

working lightbox navifation with js cache for details

Browse Source
This commit is contained in:
Karl 2025-05-17 10:29:53 +01:00
parent 636148b968
commit c3f0a70da0
2 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ai_frame_image_server.py
View File

@ -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)

50
templates/gallery.html
View File

@ -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]) {
// If cached, use cached data immediately
document.getElementById("lightbox-prompt").textContent =
`Model: ${detailsCache[filename].model}\n\n${detailsCache[filename].prompt}`;
} else {
// Otherwise show loading and fetch
document.getElementById("lightbox-prompt").textContent = "Loading…";
fetch(`/image-details/${encodeURIComponent(filename)}`)
.then(r => r.ok ? r.json() : Promise.reject())
.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.";
document.getElementById("lightbox-prompt").textContent = "Couldn’t load details.";
});
}
function closeLightbox() { document.getElementById("lightbox").style.display = "none"; }
}
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";
}
</script>
</body>
</html>