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

only load details when loading image in lightbox

Browse Source
This commit is contained in:
Karl 2025-05-17 10:25:46 +01:00
parent cf9f5d0413
commit 636148b968
2 changed files with 55 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ai_frame_image_server.py
View File

@ -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
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)
images.append({'filename': f})
images = sorted(images, key=lambda x: os.path.getmtime(os.path.join(image_folder, x['filename'])), 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>')

54
templates/gallery.html
View File

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