Spaces:

jerrycans
/

thefiles

Sleeping

App Files Files Community

jerrycans commited on Dec 20, 2025

Commit

cf44a9b

verified ·

1 Parent(s): cc00440

Update app.py

Browse files

Files changed (1) hide show

app.py +195 -164

app.py CHANGED Viewed

@@ -46,10 +46,8 @@ HTML_PAGE = '''<!DOCTYPE html>
             font-size: 24px;
             font-weight: 800;
             letter-spacing: 10px;
-            position: fixed;
             top: 0;
-            left: 0;
-            right: 0;
             z-index: 100;
             border-bottom: 3px solid #fff;
         }
@@ -62,22 +60,14 @@ HTML_PAGE = '''<!DOCTYPE html>
             font-size: 10px;
             font-weight: 700;
             letter-spacing: 3px;
-            position: fixed;
-            top: 63px;
-            left: 0;
-            right: 0;
-            z-index: 100;
         }
         #loading {
-            position: fixed;
-            inset: 0;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            background: #0a0a0a;
-            z-index: 200;
         }
         .spinner {
@@ -102,56 +92,89 @@ HTML_PAGE = '''<!DOCTYPE html>
         #gallery {
             display: none;
-            padding-top: 110px;
         }
-        .gallery-info {
             text-align: center;
-            padding: 15px;
             border-bottom: 1px solid #333;
-            margin-bottom: 10px;
         }
-        .gallery-info h2 {
-            font-size: 24px;
             letter-spacing: 3px;
         }
-        .gallery-info span {
             color: #666;
             font-size: 12px;
         }
-        #grid-container {
-            position: relative;
-            margin: 0 10px;
         }
-        .grid-item {
-            position: absolute;
             background: #111;
             border: 2px solid #333;
-            overflow: hidden;
             cursor: pointer;
         }
-        .grid-item img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
         }
-        .grid-item .num {
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
-            background: rgba(0,0,0,0.8);
             color: #fff;
             font-size: 9px;
-            padding: 3px;
             text-align: center;
         }
         #scroll-top {
@@ -184,7 +207,7 @@ HTML_PAGE = '''<!DOCTYPE html>
         #lightbox.open { display: flex; }
-        .lb-top {
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -192,13 +215,13 @@ HTML_PAGE = '''<!DOCTYPE html>
             border-bottom: 2px solid #fff;
         }
-        .lb-count {
             font-size: 14px;
             font-weight: 700;
             letter-spacing: 2px;
         }
-        .lb-btns { display: flex; gap: 8px; }
         .lb-btn {
             background: none;
@@ -210,7 +233,7 @@ HTML_PAGE = '''<!DOCTYPE html>
             font-family: inherit;
         }
-        .lb-mid {
             flex: 1;
             display: flex;
             align-items: center;
@@ -234,11 +257,16 @@ HTML_PAGE = '''<!DOCTYPE html>
         @media (max-width: 600px) {
             #header { font-size: 16px; letter-spacing: 5px; padding: 15px; }
-            .banner { top: 53px; font-size: 8px; padding: 4px; }
-            #gallery { padding-top: 85px; }
-            .gallery-info h2 { font-size: 18px; }
             .lb-btn { padding: 5px 10px; font-size: 12px; }
         }
     </style>
 </head>
 <body>
@@ -251,143 +279,134 @@ HTML_PAGE = '''<!DOCTYPE html>
     </div>
     <div id="gallery">
-        <div class="gallery-info">
-            <h2 id="count">0</h2>
             <span>IMAGES</span>
         </div>
-        <div id="grid-container"></div>
     </div>
     <button id="scroll-top">▲</button>
     <div id="lightbox">
-        <div class="lb-top">
-            <div class="lb-count" id="lb-count">1 / 1</div>
-            <div class="lb-btns">
                 <button class="lb-btn" id="lb-prev">◄</button>
                 <button class="lb-btn" id="lb-next">►</button>
                 <button class="lb-btn" id="lb-close">✕</button>
             </div>
         </div>
-        <div class="lb-mid" id="lb-mid">
             <div id="lb-loader">Loading...</div>
             <img id="lb-img" src="" alt="" referrerpolicy="no-referrer">
         </div>
     </div>
     <script>
-        let images = [];
         let currentIdx = 0;
-        let cols, itemSize, renderedItems = {};
-        const container = document.getElementById('grid-container');
         const lightbox = document.getElementById('lightbox');
         const lbImg = document.getElementById('lb-img');
         const lbLoader = document.getElementById('lb-loader');
         const scrollBtn = document.getElementById('scroll-top');
-        // Calculate grid dimensions
-        function calcGrid() {
-            const w = container.clientWidth;
-            cols = Math.floor(w / 150) || 1;
-            if (cols > 6) cols = 6;
-            itemSize = Math.floor(w / cols);
-        }
-        // Get which items should be visible
-        function getVisibleRange() {
-            const scrollY = window.scrollY;
-            const viewH = window.innerHeight;
-            const gridTop = container.getBoundingClientRect().top + scrollY;
-            const startY = Math.max(0, scrollY - gridTop - 500);
-            const endY = scrollY - gridTop + viewH + 500;
-            const startRow = Math.floor(startY / itemSize);
-            const endRow = Math.ceil(endY / itemSize);
-            const start = Math.max(0, startRow * cols);
-            const end = Math.min(images.length, (endRow + 1) * cols);
-            return { start, end };
         }
-        // Render only visible items
-        function render() {
-            const { start, end } = getVisibleRange();
-            // Remove items outside range
-            for (const idx in renderedItems) {
-                const i = parseInt(idx);
-                if (i < start || i >= end) {
-                    renderedItems[idx].remove();
-                    delete renderedItems[idx];
-                }
-            }
-            // Add items in range
-            for (let i = start; i < end; i++) {
-                if (!renderedItems[i]) {
-                    const row = Math.floor(i / cols);
-                    const col = i % cols;
-                    const div = document.createElement('div');
-                    div.className = 'grid-item';
-                    div.style.cssText = `left:${col * itemSize}px;top:${row * itemSize}px;width:${itemSize - 4}px;height:${itemSize - 4}px;`;
-                    div.dataset.idx = i;
                     const img = document.createElement('img');
                     img.referrerPolicy = 'no-referrer';
-                    img.loading = 'lazy';
-                    img.src = images[i];
-                    const num = document.createElement('div');
-                    num.className = 'num';
-                    num.textContent = '#' + (i + 1);
-                    div.appendChild(img);
-                    div.appendChild(num);
-                    container.appendChild(div);
-                    renderedItems[i] = div;
                 }
-            }
-        }
-        // Set container height
-        function setHeight() {
-            const rows = Math.ceil(images.length / cols);
-            container.style.height = (rows * itemSize) + 'px';
         }
-        // Scroll handler with RAF
         let ticking = false;
         function onScroll() {
-            if (!ticking) {
-                requestAnimationFrame(() => {
-                    render();
-                    scrollBtn.classList.toggle('show', window.scrollY > 400);
-                    ticking = false;
-                });
-                ticking = true;
-            }
         }
-        // Resize handler
-        function onResize() {
-            calcGrid();
-            setHeight();
-            // Clear and re-render
-            for (const idx in renderedItems) {
-                renderedItems[idx].remove();
-            }
-            renderedItems = {};
-            render();
-        }
-        // Click handler
-        container.addEventListener('click', e => {
-            const item = e.target.closest('.grid-item');
             if (item) {
                 currentIdx = parseInt(item.dataset.idx);
                 openLightbox();
@@ -395,12 +414,12 @@ HTML_PAGE = '''<!DOCTYPE html>
         });
         // Lightbox
-        const cache = new Set();
         function openLightbox() {
             lightbox.classList.add('open');
             document.body.style.overflow = 'hidden';
-            showImg();
         }
         function closeLightbox() {
@@ -408,40 +427,56 @@ HTML_PAGE = '''<!DOCTYPE html>
             document.body.style.overflow = '';
         }
-        function showImg() {
-            const url = images[currentIdx];
-            document.getElementById('lb-count').textContent = (currentIdx + 1) + ' / ' + images.length;
-            lbLoader.style.display = cache.has(url) ? 'none' : 'block';
-            lbImg.style.display = 'none';
-            lbImg.onload = () => {
-                cache.add(url);
                 lbLoader.style.display = 'none';
-                lbImg.style.display = 'block';
-                preload();
-            };
-            lbImg.src = url;
         }
-        function preload() {
-            [-1, 1, -2, 2].forEach(d => {
                 const i = currentIdx + d;
-                if (i >= 0 && i < images.length && !cache.has(images[i])) {
-                    new Image().src = images[i];
                 }
-            });
         }
         function nav(d) {
-            currentIdx = (currentIdx + d + images.length) % images.length;
-            showImg();
         }
         document.getElementById('lb-close').onclick = closeLightbox;
         document.getElementById('lb-prev').onclick = () => nav(-1);
         document.getElementById('lb-next').onclick = () => nav(1);
-        document.getElementById('lb-mid').onclick = e => { if (e.target.id === 'lb-mid') closeLightbox(); };
         document.addEventListener('keydown', e => {
             if (!lightbox.classList.contains('open')) return;
@@ -452,29 +487,25 @@ HTML_PAGE = '''<!DOCTYPE html>
         // Touch swipe
         let touchX = 0;
-        document.getElementById('lb-mid').addEventListener('touchstart', e => touchX = e.touches[0].clientX, { passive: true });
-        document.getElementById('lb-mid').addEventListener('touchend', e => {
             const diff = touchX - e.changedTouches[0].clientX;
             if (Math.abs(diff) > 50) nav(diff > 0 ? 1 : -1);
         }, { passive: true });
-        scrollBtn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
-        window.addEventListener('scroll', onScroll, { passive: true });
-        window.addEventListener('resize', onResize);
         // Init
         fetch('/status')
             .then(r => r.json())
             .then(data => {
                 if (data.status === 'complete' && data.images.length) {
-                    images = data.images;
-                    document.getElementById('count').textContent = images.length;
                     document.getElementById('loading').style.display = 'none';
                     document.getElementById('gallery').style.display = 'block';
-                    calcGrid();
-                    setHeight();
-                    render();
                 } else {
                     document.getElementById('loading-text').textContent = 'NO IMAGES';
                     document.getElementById('loading-text').classList.add('error');

             font-size: 24px;
             font-weight: 800;
             letter-spacing: 10px;
+            position: sticky;
             top: 0;
             z-index: 100;
             border-bottom: 3px solid #fff;
         }
             font-size: 10px;
             font-weight: 700;
             letter-spacing: 3px;
         }
         #loading {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            min-height: calc(100vh - 120px);
         }
         .spinner {
         #gallery {
             display: none;
+            padding: 15px;
         }
+        .gallery-header {
             text-align: center;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
             border-bottom: 1px solid #333;
         }
+        .gallery-header h2 {
+            font-size: 28px;
             letter-spacing: 3px;
         }
+        .gallery-header span {
             color: #666;
             font-size: 12px;
         }
+        .gallery-header p {
+            color: #555;
+            font-size: 10px;
+            margin-top: 8px;
+            letter-spacing: 1px;
         }
+        #grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 10px;
+        }
+        .item {
+            aspect-ratio: 1;
             background: #111;
             border: 2px solid #333;
+            position: relative;
             cursor: pointer;
+            overflow: hidden;
         }
+        .item img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
         }
+        .item .num {
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
+            background: rgba(0,0,0,0.85);
             color: #fff;
             font-size: 9px;
+            padding: 4px;
             text-align: center;
+            font-weight: 700;
+        }
+        .item .placeholder {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #333;
+            font-size: 10px;
+        }
+        #load-trigger {
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        #load-text {
+            color: #555;
+            font-size: 10px;
+            letter-spacing: 2px;
         }
         #scroll-top {
         #lightbox.open { display: flex; }
+        .lb-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
             border-bottom: 2px solid #fff;
         }
+        .lb-counter {
             font-size: 14px;
             font-weight: 700;
             letter-spacing: 2px;
         }
+        .lb-nav { display: flex; gap: 8px; }
         .lb-btn {
             background: none;
             font-family: inherit;
         }
+        .lb-body {
             flex: 1;
             display: flex;
             align-items: center;
         @media (max-width: 600px) {
             #header { font-size: 16px; letter-spacing: 5px; padding: 15px; }
+            .banner { font-size: 8px; padding: 4px; }
+            #grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
+            .gallery-header h2 { font-size: 22px; }
+            .item .num { font-size: 8px; padding: 3px; }
             .lb-btn { padding: 5px 10px; font-size: 12px; }
         }
+        @media (max-width: 380px) {
+            #grid { grid-template-columns: repeat(2, 1fr); }
+        }
     </style>
 </head>
 <body>
     </div>
     <div id="gallery">
+        <div class="gallery-header">
+            <h2 id="total-count">0</h2>
             <span>IMAGES</span>
+            <p>Click to enlarge</p>
+        </div>
+        <div id="grid"></div>
+        <div id="load-trigger">
+            <div id="load-text">SCROLL FOR MORE</div>
         </div>
     </div>
     <button id="scroll-top">▲</button>
     <div id="lightbox">
+        <div class="lb-header">
+            <div class="lb-counter" id="lb-counter">1 / 1</div>
+            <div class="lb-nav">
                 <button class="lb-btn" id="lb-prev">◄</button>
                 <button class="lb-btn" id="lb-next">►</button>
                 <button class="lb-btn" id="lb-close">✕</button>
             </div>
         </div>
+        <div class="lb-body" id="lb-body">
             <div id="lb-loader">Loading...</div>
             <img id="lb-img" src="" alt="" referrerpolicy="no-referrer">
         </div>
     </div>
     <script>
+        let allImages = [];
+        let loadedCount = 0;
         let currentIdx = 0;
+        let isLoading = false;
+        const BATCH = 60;
+        const BUFFER = 800; // pixels above/below viewport to keep loaded
+        const grid = document.getElementById('grid');
         const lightbox = document.getElementById('lightbox');
         const lbImg = document.getElementById('lb-img');
         const lbLoader = document.getElementById('lb-loader');
         const scrollBtn = document.getElementById('scroll-top');
+        const loadText = document.getElementById('load-text');
+        // Load a batch of items
+        function loadBatch() {
+            if (isLoading || loadedCount >= allImages.length) return;
+            isLoading = true;
+            const end = Math.min(loadedCount + BATCH, allImages.length);
+            const frag = document.createDocumentFragment();
+            for (let i = loadedCount; i < end; i++) {
+                const div = document.createElement('div');
+                div.className = 'item';
+                div.dataset.idx = i;
+                div.dataset.src = allImages[i];
+                div.innerHTML = '<div class="placeholder">#' + (i + 1) + '</div><div class="num">#' + (i + 1) + '</div>';
+                frag.appendChild(div);
+            }
+            grid.appendChild(frag);
+            loadedCount = end;
+            isLoading = false;
+            loadText.textContent = loadedCount >= allImages.length ?
+                'ALL ' + allImages.length + ' LOADED' :
+                loadedCount + ' / ' + allImages.length;
+            manageImages();
         }
+        // Load/unload images based on viewport
+        function manageImages() {
+            const viewTop = window.scrollY - BUFFER;
+            const viewBottom = window.scrollY + window.innerHeight + BUFFER;
+            const items = grid.querySelectorAll('.item');
+            items.forEach(item => {
+                const rect = item.getBoundingClientRect();
+                const itemTop = rect.top + window.scrollY;
+                const itemBottom = itemTop + rect.height;
+                const inView = itemBottom > viewTop && itemTop < viewBottom;
+                const hasImg = item.querySelector('img');
+                if (inView && !hasImg) {
+                    // Load image
                     const img = document.createElement('img');
                     img.referrerPolicy = 'no-referrer';
+                    img.src = item.dataset.src;
+                    item.insertBefore(img, item.querySelector('.num'));
+                } else if (!inView && hasImg) {
+                    // Unload image to free memory
+                    hasImg.remove();
                 }
+            });
         }
+        // Scroll handler
         let ticking = false;
         function onScroll() {
+            if (ticking) return;
+            ticking = true;
+            requestAnimationFrame(() => {
+                ticking = false;
+                // Show/hide scroll button
+                scrollBtn.classList.toggle('show', window.scrollY > 400);
+                // Load more if near bottom
+                const trigger = document.getElementById('load-trigger');
+                if (trigger.getBoundingClientRect().top < window.innerHeight + 500) {
+                    loadBatch();
+                }
+                // Manage which images are loaded
+                manageImages();
+            });
         }
+        window.addEventListener('scroll', onScroll, { passive: true });
+        scrollBtn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
+        // Grid click
+        grid.addEventListener('click', e => {
+            const item = e.target.closest('.item');
             if (item) {
                 currentIdx = parseInt(item.dataset.idx);
                 openLightbox();
         });
         // Lightbox
+        const imgCache = new Set();
         function openLightbox() {
             lightbox.classList.add('open');
             document.body.style.overflow = 'hidden';
+            showImage();
         }
         function closeLightbox() {
             document.body.style.overflow = '';
         }
+        function showImage() {
+            const url = allImages[currentIdx];
+            document.getElementById('lb-counter').textContent = (currentIdx + 1) + ' / ' + allImages.length;
+            if (imgCache.has(url)) {
                 lbLoader.style.display = 'none';
+                lbImg.src = url;
+            } else {
+                lbLoader.style.display = 'block';
+                lbImg.style.opacity = '0';
+                const tmp = new Image();
+                tmp.onload = () => {
+                    imgCache.add(url);
+                    lbImg.src = url;
+                    lbImg.style.opacity = '1';
+                    lbLoader.style.display = 'none';
+                    preloadNearby();
+                };
+                tmp.src = url;
+            }
         }
+        function preloadNearby() {
+            for (let d = -2; d <= 2; d++) {
+                if (d === 0) continue;
                 const i = currentIdx + d;
+                if (i >= 0 && i < allImages.length) {
+                    const url = allImages[i];
+                    if (!imgCache.has(url)) {
+                        const img = new Image();
+                        img.onload = () => imgCache.add(url);
+                        img.src = url;
+                    }
                 }
+            }
         }
         function nav(d) {
+            currentIdx = (currentIdx + d + allImages.length) % allImages.length;
+            showImage();
         }
         document.getElementById('lb-close').onclick = closeLightbox;
         document.getElementById('lb-prev').onclick = () => nav(-1);
         document.getElementById('lb-next').onclick = () => nav(1);
+        document.getElementById('lb-body').onclick = e => {
+            if (e.target.id === 'lb-body') closeLightbox();
+        };
         document.addEventListener('keydown', e => {
             if (!lightbox.classList.contains('open')) return;
         // Touch swipe
         let touchX = 0;
+        document.getElementById('lb-body').addEventListener('touchstart', e => {
+            touchX = e.touches[0].clientX;
+        }, { passive: true });
+        document.getElementById('lb-body').addEventListener('touchend', e => {
             const diff = touchX - e.changedTouches[0].clientX;
             if (Math.abs(diff) > 50) nav(diff > 0 ? 1 : -1);
         }, { passive: true });
         // Init
         fetch('/status')
             .then(r => r.json())
             .then(data => {
                 if (data.status === 'complete' && data.images.length) {
+                    allImages = data.images;
+                    document.getElementById('total-count').textContent = allImages.length;
                     document.getElementById('loading').style.display = 'none';
                     document.getElementById('gallery').style.display = 'block';
+                    loadBatch();
                 } else {
                     document.getElementById('loading-text').textContent = 'NO IMAGES';
                     document.getElementById('loading-text').classList.add('error');