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

working lazyloading

Browse Source
This commit is contained in:
Karl 2025-05-17 10:32:28 +01:00
parent c3f0a70da0
commit 4ec98ebf8f
1 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
templates/gallery.html
View File

@ -2,8 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Image Archive</title> <title>Image Archive</title>
<style> <style>
* { * {
@ -129,40 +129,85 @@
<body> <body>
<h1>Image Archive</h1> <h1>Image Archive</h1>
<div class="gallery">
{% for image in images %}
<img src="{{ url_for('images', filename='thumbnails/' + image.filename) }}"
data-fullsrc="{{ url_for('images', filename=image.filename) }}" data-filename="{{ image.filename }}"
loading="lazy" onclick="openLightbox(this)">
{% endfor %} <!-- Empty gallery container; images will be loaded incrementally -->
</div> <div class="gallery" id="gallery"></div>
<div class="button-group"> <div class="button-group">
<a href="/" class="button-link">Back</a> <a href="/" class="button-link">Back</a>
</div> </div>
<!-- Lightbox --> <!-- Lightbox -->
<div class="lightbox" id="lightbox"> <div class="lightbox" id="lightbox">
<span class="close" onclick="closeLightbox()">&times;</span> <span class="close" onclick="closeLightbox()">&times;</span>
<span class="arrow left" onclick="prevImage()">&#10094;</span> <span class="arrow left" onclick="prevImage()">&#10094;</span>
<img id="lightbox-img" src=""> <img id="lightbox-img" src="" />
<p id="lightbox-prompt"></p> <p id="lightbox-prompt"></p>
<span class="arrow right" onclick="nextImage()">&#10095;</span> <span class="arrow right" onclick="nextImage()">&#10095;</span>
</div> </div>
<!-- Pass image filenames from Flask to JS -->
<script> <script>
const images = Array.from(document.querySelectorAll('.gallery img')); const allImages = [
{% for image in images %}
{ filename: "{{ image.filename }}" },
{% endfor %}
];
</script>
<script>
const gallery = document.getElementById('gallery');
const batchSize = 6; // images to load per batch
let loadedCount = 0;
let currentIndex = 0; let currentIndex = 0;
const detailsCache = {}; // Cache object const detailsCache = {}; // Cache for image details
function createImageElement(image) {
const img = document.createElement('img');
img.src = `/images/thumbnails/${image.filename}`;
img.dataset.fullsrc = `/images/${image.filename}`;
img.dataset.filename = image.filename;
img.loading = 'lazy';
img.style.cursor = 'pointer';
img.style.borderRadius = '10px';
img.addEventListener('click', () => openLightbox(img));
return img;
}
function loadNextBatch() {
const nextImages = allImages.slice(loadedCount, loadedCount + batchSize);
nextImages.forEach(image => {
const imgEl = createImageElement(image);
gallery.appendChild(imgEl);
});
loadedCount += nextImages.length;
}
// Load initial batch
loadNextBatch();
// Load more images when scrolling near bottom
window.addEventListener('scroll', () => {
if (loadedCount >= allImages.length) return; // all loaded
if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 100)) {
loadNextBatch();
}
});
// Get current images in gallery for lightbox navigation
function getGalleryImages() {
return Array.from(gallery.querySelectorAll('img'));
}
function openLightbox(imgEl) { function openLightbox(imgEl) {
const images = getGalleryImages();
currentIndex = images.indexOf(imgEl); currentIndex = images.indexOf(imgEl);
showImageAndLoadDetails(currentIndex); showImageAndLoadDetails(currentIndex);
document.getElementById("lightbox").style.display = "flex"; document.getElementById("lightbox").style.display = "flex";
} }
function showImageAndLoadDetails(index) { function showImageAndLoadDetails(index) {
const images = getGalleryImages();
const imgEl = images[index]; const imgEl = images[index];
const filename = imgEl.dataset.filename; const filename = imgEl.dataset.filename;
const fullsrc = imgEl.dataset.fullsrc; const fullsrc = imgEl.dataset.fullsrc;
@ -170,11 +215,9 @@
document.getElementById("lightbox-img").src = fullsrc; document.getElementById("lightbox-img").src = fullsrc;
if (detailsCache[filename]) { if (detailsCache[filename]) {
// If cached, use cached data immediately
document.getElementById("lightbox-prompt").textContent = document.getElementById("lightbox-prompt").textContent =
`Model: ${detailsCache[filename].model}\n\n${detailsCache[filename].prompt}`; `Model: ${detailsCache[filename].model}\n\n${detailsCache[filename].prompt}`;
} else { } else {
// Otherwise show loading and fetch
document.getElementById("lightbox-prompt").textContent = "Loading…"; document.getElementById("lightbox-prompt").textContent = "Loading…";
fetch(`/image-details/${encodeURIComponent(filename)}`) fetch(`/image-details/${encodeURIComponent(filename)}`)
@ -194,11 +237,13 @@
} }
function nextImage() { function nextImage() {
const images = getGalleryImages();
currentIndex = (currentIndex + 1) % images.length; currentIndex = (currentIndex + 1) % images.length;
showImageAndLoadDetails(currentIndex); showImageAndLoadDetails(currentIndex);
} }
function prevImage() { function prevImage() {
const images = getGalleryImages();
currentIndex = (currentIndex - 1 + images.length) % images.length; currentIndex = (currentIndex - 1 + images.length) % images.length;
showImageAndLoadDetails(currentIndex); showImageAndLoadDetails(currentIndex);
} }
@ -207,8 +252,6 @@
document.getElementById("lightbox").style.display = "none"; document.getElementById("lightbox").style.display = "none";
} }
</script> </script>
</body> </body>
</html> </html>