Spaces:

aaurelions
/

visualizer

Running

App Files Files Community

aaurelions commited on 27 days ago

Commit

b38fb77

verified ·

1 Parent(s): c558623

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -46

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Futuristic Dataset Visualizer v4</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
@@ -39,6 +39,18 @@
         .modal { background: rgba(13, 17, 23, 0.85); backdrop-filter: blur(16px); }
         #modal-canvas { cursor: grab; touch-action: none; }
         #modal-canvas:active { cursor: grabbing; }
     </style>
 </head>
 <body class="overscroll-none">
@@ -46,11 +58,10 @@
     <div class="container mx-auto p-4 lg:p-8">
         <header class="text-center mb-10">
-            <h1 class="text-3xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-300 mb-2">Dataset Visualizer v4</h1>
             <p class="text-gray-400">Inspect, pan, and zoom your vision datasets with precision.</p>
         </header>
-        <!-- Control Panel -->
         <div class="glass-card p-4 sm:p-6 rounded-xl mb-10 max-w-3xl mx-auto">
             <div id="control-panel-content">
                 <h2 class="text-2xl font-semibold text-blue-300 mb-4 text-center">Get Started</h2>
@@ -68,7 +79,6 @@
             </div>
         </div>
-        <!-- Image Grid -->
         <div id="image-container-wrapper">
              <div id="empty-state" class="text-center glass-card p-10 rounded-xl">
                 <h3 class="text-2xl text-gray-400">Your visualizer is ready.</h3>
@@ -83,12 +93,10 @@
     <!-- Modal -->
     <div id="modal-backdrop" class="fixed inset-0 z-50 flex items-center justify-center hidden">
         <div class="modal w-full h-full relative flex items-center justify-center overflow-hidden">
-            <!-- Loading Spinner for Modal -->
             <div id="modal-spinner" class="absolute z-10">
                 <svg class="animate-spin h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
             </div>
-            <!-- THIS IS THE HTML FIX: Added w-full and h-full classes -->
             <canvas id="modal-canvas" class="absolute top-0 left-0 w-full h-full"></canvas>
             <div id="modal-legend" class="absolute bottom-4 left-4 glass-card p-3 rounded-lg max-h-48 overflow-y-auto text-sm z-20 hidden"></div>
@@ -97,14 +105,24 @@
             <div class="absolute top-4 right-4 z-20 flex flex-col gap-2">
                 <button id="modal-close" class="bg-red-600/80 text-white rounded-full w-10 h-10 flex items-center justify-center text-3xl font-bold">×</button>
             </div>
             <div class="absolute bottom-4 right-4 z-20 glass-card rounded-lg flex items-center">
                 <button id="zoom-out-btn" class="p-3 text-2xl">-</button>
                 <button id="reset-view-btn" class="p-3">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /></svg>
                 </button>
                 <button id="zoom-in-btn" class="p-3 text-2xl">+</button>
                 <button id="fullscreen-btn" class="p-3 ml-2 border-l border-gray-600">
-                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 110 2H5v2a1 1 0 11-2 0V4zm12 0a1 1 0 011 1v2a1 1 0 11-2 0V5h-2a1 1 0 110-2h4zM4 17a1 1 0 01-1-1v-2a1 1 0 112 0v2h2a1 1 0 110 2H4zm12 0a1 1 0 01-1 1h-4a1 1 0 110-2h2v-2a1 1 0 112 0v2z" clip-rule="evenodd" /></svg>
                 </button>
             </div>
         </div>
@@ -123,32 +141,44 @@
                 spinner: document.getElementById('modal-spinner'),
                 zoomInBtn: document.getElementById('zoom-in-btn'), zoomOutBtn: document.getElementById('zoom-out-btn'),
                 resetViewBtn: document.getElementById('reset-view-btn'), fullscreenBtn: document.getElementById('fullscreen-btn'),
             }
         };
         let state = {
             allImageData: [], classNames: {}, classColors: {}, currentPage: 1, imagesPerPage: 20,
-            modal: { transform: new DOMMatrix(), initialTransform: new DOMMatrix(), isPanning: false, lastPos: { x: 0, y: 0 }, img: null, labelText: ''}
         };
         // --- Event Listeners ---
-        dom.zipFileInput.addEventListener('change', handleZipUpload);
-        dom.yamlPasteArea.addEventListener('input', handleYamlPaste);
-        dom.modal.backdrop.addEventListener('click', (e) => e.target === dom.modal.backdrop && closeModal());
-        dom.modal.closeBtn.addEventListener('click', closeModal);
-        dom.modal.canvas.addEventListener('mousedown', panStart);
-        dom.modal.canvas.addEventListener('mousemove', panMove);
-        dom.modal.canvas.addEventListener('mouseup', panEnd);
-        dom.modal.canvas.addEventListener('mouseout', panEnd);
-        dom.modal.canvas.addEventListener('wheel', handleZoom);
-        dom.modal.canvas.addEventListener('touchstart', touchStart);
-        dom.modal.canvas.addEventListener('touchmove', touchMove);
-        dom.modal.canvas.addEventListener('touchend', panEnd);
-        dom.modal.zoomInBtn.addEventListener('click', () => applyZoom(1.2));
-        dom.modal.zoomOutBtn.addEventListener('click', () => applyZoom(0.8));
-        dom.modal.resetViewBtn.addEventListener('click', () => { state.modal.transform = state.modal.initialTransform.translate(0,0); redrawModalCanvas(); });
-        dom.modal.fullscreenBtn.addEventListener('click', toggleFullscreen);
-        window.addEventListener('resize', () => { if(state.modal.img) showModal(state.modal.currentItem); });
         // --- Core Logic ---
         async function handleZipUpload(event) {
@@ -165,13 +195,13 @@
                 for (const filename in zip.files) {
                     if (zip.files[filename].dir) continue;
                     const baseName = filename.split('/').pop().split('.')[0];
-                    if (/\.(jpe?g|png)$/i.test(filename)) imageFiles[baseName] = zip.files[filename];
                     if (/\.txt$/i.test(filename)) labelFiles[baseName] = zip.files[filename];
                 }
                 state.allImageData = Object.keys(imageFiles)
                     .filter(baseName => labelFiles[baseName])
-                    .map(baseName => ({ id: baseName, image: imageFiles[baseName], label: labelFiles[baseName] }));
                 if (state.allImageData.length > 0) {
                     dom.imageContainer.classList.remove('hidden');
@@ -190,12 +220,23 @@
             if (!yamlString) { state.classNames = {}; if(state.allImageData.length > 0) renderPage(state.currentPage); return; }
             try {
                 const data = jsyaml.load(yamlString);
-                state.classNames = (data && data.names) ? data.names : {};
                 showStatus('YAML class names updated.', 'success');
                 if(state.allImageData.length > 0) renderPage(state.currentPage);
             } catch (e) { showStatus('Invalid YAML format.', 'warning'); }
         }
         // --- UI & Drawing ---
         async function renderPage(page) {
             state.currentPage = page;
@@ -235,7 +276,9 @@
                 uniqueClasses.add(classId);
                 const color = generateColor(classId);
                 ctx.strokeStyle = color;
-                ctx.lineWidth = (isModal ? 3 : 2) / (isModal ? state.modal.transform.a : 1);
                 ctx.beginPath();
                 if (isDetection) {
                     const [, xc, yc, width, height] = parts;
@@ -251,21 +294,26 @@
             if (isModal) buildLegend(uniqueClasses);
         }
-        // --- Modal & Pan/Zoom (IMPROVED & FIXED) ---
         async function showModal(item) {
             dom.modal.backdrop.classList.remove('hidden');
             dom.modal.spinner.classList.remove('hidden');
             dom.modal.legend.classList.add('hidden');
             const canvas = dom.modal.canvas;
             const ctx = canvas.getContext('2d');
-            // Thanks to the HTML fix, canvas.clientWidth/Height are now correct.
-            // We clear any previous drawing immediately.
-            canvas.width = canvas.clientWidth;
-            canvas.height = canvas.clientHeight;
             ctx.clearRect(0, 0, canvas.width, canvas.height);
-            state.modal.currentItem = item;
             state.modal.img = new Image();
             state.modal.labelText = await item.label.async('string');
@@ -276,27 +324,21 @@
             };
             state.modal.img.onload = () => {
-                if (!state.modal.img) return; // Modal was closed before image loaded.
-                // Set canvas resolution to its displayed size. This is crucial.
-                canvas.width = canvas.clientWidth;
-                canvas.height = canvas.clientHeight;
                 const hRatio = canvas.width / state.modal.img.width;
                 const vRatio = canvas.height / state.modal.img.height;
                 const initialScale = Math.min(hRatio, vRatio) * 0.9;
-                // Calculate the transformation to center and scale the image.
                 state.modal.transform = new DOMMatrix()
                     .translate(canvas.width / 2, canvas.height / 2)
                     .scale(initialScale, initialScale)
                     .translate(-state.modal.img.width / 2, -state.modal.img.height / 2);
                 state.modal.initialTransform = state.modal.transform.translate(0,0);
                 dom.modal.spinner.classList.add('hidden');
                 dom.modal.legend.classList.remove('hidden');
                 redrawModalCanvas();
             };
@@ -315,6 +357,14 @@
             ctx.restore();
         }
         function panStart(e) { e.preventDefault(); state.modal.isPanning = true; state.modal.lastPos = { x: e.clientX, y: e.clientY }; }
         function panMove(e) {
             e.preventDefault();
@@ -334,7 +384,7 @@
             redrawModalCanvas();
         }
-        function handleZoom(e) { e.preventDefault(); applyZoom(e.deltaY > 0 ? 0.9 : 1.1, e.clientX, e.clientY); }
         function touchStart(e) {
             if (e.touches.length === 1) { e.preventDefault(); panStart(e.touches[0]); }
@@ -357,11 +407,13 @@
                 URL.revokeObjectURL(state.modal.img.src);
             }
             state.modal.img = null;
             if (document.fullscreenElement) document.exitFullscreen();
         }
         function toggleFullscreen() {
-            if (!document.fullscreenElement) { dom.modal.backdrop.requestFullscreen().catch(err => alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`));
             } else { document.exitFullscreen(); }
         }
@@ -380,7 +432,7 @@
                 const list = document.createElement('ul');
                 classIds.forEach(id => {
                     const name = state.classNames[id] || `Class ${id}`;
-                    list.innerHTML += `<li class="flex items-center gap-2"><span class="w-4 h-4 rounded-full border border-white/50" style="background-color:${generateColor(id)};"></span>${name}</li>`;
                 });
                 dom.modal.legend.appendChild(list);
             }

 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <title>Futuristic Dataset Visualizer v5</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
         .modal { background: rgba(13, 17, 23, 0.85); backdrop-filter: blur(16px); }
         #modal-canvas { cursor: grab; touch-action: none; }
         #modal-canvas:active { cursor: grabbing; }
+        /* Style for the thickness slider */
+        input[type=range] { -webkit-appearance: none; background: transparent; }
+        input[type=range]:focus { outline: none; }
+        input[type=range]::-webkit-slider-runnable-track {
+            height: 4px; background: rgba(59, 130, 246, 0.5); border-radius: 5px;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none; height: 18px; width: 18px;
+            border-radius: 50%; background: #E6EDF3;
+            border: 2px solid #0D1117; margin-top: -7px;
+            cursor: pointer;
+        }
     </style>
 </head>
 <body class="overscroll-none">
     <div class="container mx-auto p-4 lg:p-8">
         <header class="text-center mb-10">
+            <h1 class="text-3xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-teal-300 mb-2">Dataset Visualizer v5</h1>
             <p class="text-gray-400">Inspect, pan, and zoom your vision datasets with precision.</p>
         </header>
         <div class="glass-card p-4 sm:p-6 rounded-xl mb-10 max-w-3xl mx-auto">
             <div id="control-panel-content">
                 <h2 class="text-2xl font-semibold text-blue-300 mb-4 text-center">Get Started</h2>
             </div>
         </div>
         <div id="image-container-wrapper">
              <div id="empty-state" class="text-center glass-card p-10 rounded-xl">
                 <h3 class="text-2xl text-gray-400">Your visualizer is ready.</h3>
     <!-- Modal -->
     <div id="modal-backdrop" class="fixed inset-0 z-50 flex items-center justify-center hidden">
         <div class="modal w-full h-full relative flex items-center justify-center overflow-hidden">
             <div id="modal-spinner" class="absolute z-10">
                 <svg class="animate-spin h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
             </div>
             <canvas id="modal-canvas" class="absolute top-0 left-0 w-full h-full"></canvas>
             <div id="modal-legend" class="absolute bottom-4 left-4 glass-card p-3 rounded-lg max-h-48 overflow-y-auto text-sm z-20 hidden"></div>
             <div class="absolute top-4 right-4 z-20 flex flex-col gap-2">
                 <button id="modal-close" class="bg-red-600/80 text-white rounded-full w-10 h-10 flex items-center justify-center text-3xl font-bold">×</button>
             </div>
+             <!-- NEW: Gallery Navigation -->
+            <button id="prev-image-btn" class="absolute left-4 top-1/2 -translate-y-1/2 z-20 glass-card rounded-full p-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg></button>
+            <button id="next-image-btn" class="absolute right-4 top-1/2 -translate-y-1/2 z-20 glass-card rounded-full p-3"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg></button>
             <div class="absolute bottom-4 right-4 z-20 glass-card rounded-lg flex items-center">
+                 <!-- NEW: Line Thickness Control -->
+                <div class="p-3 flex items-center gap-3 border-r border-gray-600">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /><path fill-rule="evenodd" d="M.458 10C3.732 4.943 9.522 3 10 3s6.268 1.943 9.542 7c-3.274 5.057-9.064 7-9.542 7S3.732 15.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" /></svg>
+                    <input type="range" id="line-thickness-slider" min="1" max="15" value="3" class="w-24">
+                </div>
                 <button id="zoom-out-btn" class="p-3 text-2xl">-</button>
                 <button id="reset-view-btn" class="p-3">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" /></svg>
                 </button>
                 <button id="zoom-in-btn" class="p-3 text-2xl">+</button>
                 <button id="fullscreen-btn" class="p-3 ml-2 border-l border-gray-600">
+                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 4a1 1 0 011-1h4a1 1 0 110 2H5v2a1 1 0 11-2 0V4zm12 0a1 1 0 011 1v2a1 1 0 11-2 0V5h-2a1 1 0 110-2h4zM4 17a1 1 0 01-1-1v-2a1 1 0 112 0v2h2a1 1 0 110 2H4zm12 0a1 1 0 01-1-1h-4a1 1 0 110-2h2v-2a1 1 0 112 0v2z" clip-rule="evenodd" /></svg>
                 </button>
             </div>
         </div>
                 spinner: document.getElementById('modal-spinner'),
                 zoomInBtn: document.getElementById('zoom-in-btn'), zoomOutBtn: document.getElementById('zoom-out-btn'),
                 resetViewBtn: document.getElementById('reset-view-btn'), fullscreenBtn: document.getElementById('fullscreen-btn'),
+                prevBtn: document.getElementById('prev-image-btn'), nextBtn: document.getElementById('next-image-btn'),
+                thicknessSlider: document.getElementById('line-thickness-slider'),
             }
         };
         let state = {
             allImageData: [], classNames: {}, classColors: {}, currentPage: 1, imagesPerPage: 20,
+            modal: {
+                transform: new DOMMatrix(), initialTransform: new DOMMatrix(), isPanning: false,
+                lastPos: { x: 0, y: 0 }, img: null, labelText: '', currentItem: null,
+                currentIndex: -1, lineWidth: 3
+            }
         };
         // --- Event Listeners ---
+        document.addEventListener('DOMContentLoaded', () => {
+            dom.zipFileInput.addEventListener('change', handleZipUpload);
+            dom.yamlPasteArea.addEventListener('input', handleYamlPaste);
+            dom.modal.backdrop.addEventListener('click', (e) => e.target === dom.modal.backdrop && closeModal());
+            dom.modal.closeBtn.addEventListener('click', closeModal);
+            dom.modal.canvas.addEventListener('mousedown', panStart);
+            dom.modal.canvas.addEventListener('mousemove', panMove);
+            dom.modal.canvas.addEventListener('mouseup', panEnd);
+            dom.modal.canvas.addEventListener('mouseout', panEnd);
+            dom.modal.canvas.addEventListener('wheel', handleZoom);
+            dom.modal.canvas.addEventListener('touchstart', touchStart, { passive: false });
+            dom.modal.canvas.addEventListener('touchmove', touchMove, { passive: false });
+            dom.modal.canvas.addEventListener('touchend', panEnd, { passive: false });
+            dom.modal.zoomInBtn.addEventListener('click', () => applyZoom(1.2));
+            dom.modal.zoomOutBtn.addEventListener('click', () => applyZoom(0.8));
+            dom.modal.resetViewBtn.addEventListener('click', () => { state.modal.transform = state.modal.initialTransform.translate(0,0); redrawModalCanvas(); });
+            dom.modal.fullscreenBtn.addEventListener('click', toggleFullscreen);
+            dom.modal.thicknessSlider.addEventListener('input', handleThicknessChange);
+            dom.modal.prevBtn.addEventListener('click', navigateImage.bind(null, -1));
+            dom.modal.nextBtn.addEventListener('click', navigateImage.bind(null, 1));
+            window.addEventListener('resize', () => { if(state.modal.img) showModal(state.modal.currentItem); });
+            window.addEventListener('keydown', handleKeyPress);
+        });
         // --- Core Logic ---
         async function handleZipUpload(event) {
                 for (const filename in zip.files) {
                     if (zip.files[filename].dir) continue;
                     const baseName = filename.split('/').pop().split('.')[0];
+                    if (/\.(jpe?g|png|webp)$/i.test(filename)) imageFiles[baseName] = zip.files[filename];
                     if (/\.txt$/i.test(filename)) labelFiles[baseName] = zip.files[filename];
                 }
                 state.allImageData = Object.keys(imageFiles)
                     .filter(baseName => labelFiles[baseName])
+                    .map((baseName, index) => ({ id: baseName, image: imageFiles[baseName], label: labelFiles[baseName], originalIndex: index }));
                 if (state.allImageData.length > 0) {
                     dom.imageContainer.classList.remove('hidden');
             if (!yamlString) { state.classNames = {}; if(state.allImageData.length > 0) renderPage(state.currentPage); return; }
             try {
                 const data = jsyaml.load(yamlString);
+                state.classNames = (data && Array.isArray(data.names)) ? data.names : {};
                 showStatus('YAML class names updated.', 'success');
                 if(state.allImageData.length > 0) renderPage(state.currentPage);
             } catch (e) { showStatus('Invalid YAML format.', 'warning'); }
         }
+        function handleThicknessChange(event) {
+            state.modal.lineWidth = event.target.value;
+            redrawModalCanvas();
+        }
+        function handleKeyPress(e) {
+            if (dom.modal.backdrop.classList.contains('hidden')) return; // Modal not open
+            if (e.key === 'ArrowLeft') navigateImage(-1);
+            if (e.key === 'ArrowRight') navigateImage(1);
+        }
         // --- UI & Drawing ---
         async function renderPage(page) {
             state.currentPage = page;
                 uniqueClasses.add(classId);
                 const color = generateColor(classId);
                 ctx.strokeStyle = color;
+                const baseLineWidth = isModal ? state.modal.lineWidth : 2;
+                ctx.lineWidth = baseLineWidth / (isModal ? state.modal.transform.a : 1);
                 ctx.beginPath();
                 if (isDetection) {
                     const [, xc, yc, width, height] = parts;
             if (isModal) buildLegend(uniqueClasses);
         }
+        // --- Modal, Pan/Zoom, Gallery ---
         async function showModal(item) {
+            state.modal.currentItem = item;
+            // Find the index in the *master* list, not the paginated one
+            state.modal.currentIndex = state.allImageData.findIndex(d => d.id === item.id);
             dom.modal.backdrop.classList.remove('hidden');
             dom.modal.spinner.classList.remove('hidden');
             dom.modal.legend.classList.add('hidden');
             const canvas = dom.modal.canvas;
             const ctx = canvas.getContext('2d');
+            canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
             ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Clean up previous image blob URL if it exists
+            if (state.modal.img && state.modal.img.src.startsWith('blob:')) {
+                URL.revokeObjectURL(state.modal.img.src);
+            }
             state.modal.img = new Image();
             state.modal.labelText = await item.label.async('string');
             };
             state.modal.img.onload = () => {
+                if (!state.modal.img || !state.modal.currentItem) return;
+                canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
                 const hRatio = canvas.width / state.modal.img.width;
                 const vRatio = canvas.height / state.modal.img.height;
                 const initialScale = Math.min(hRatio, vRatio) * 0.9;
                 state.modal.transform = new DOMMatrix()
                     .translate(canvas.width / 2, canvas.height / 2)
                     .scale(initialScale, initialScale)
                     .translate(-state.modal.img.width / 2, -state.modal.img.height / 2);
                 state.modal.initialTransform = state.modal.transform.translate(0,0);
                 dom.modal.spinner.classList.add('hidden');
                 dom.modal.legend.classList.remove('hidden');
                 redrawModalCanvas();
             };
             ctx.restore();
         }
+        function navigateImage(direction) {
+            if (state.modal.currentIndex === -1) return;
+            let newIndex = state.modal.currentIndex + direction;
+            if (newIndex < 0) newIndex = state.allImageData.length - 1;
+            if (newIndex >= state.allImageData.length) newIndex = 0;
+            showModal(state.allImageData[newIndex]);
+        }
         function panStart(e) { e.preventDefault(); state.modal.isPanning = true; state.modal.lastPos = { x: e.clientX, y: e.clientY }; }
         function panMove(e) {
             e.preventDefault();
             redrawModalCanvas();
         }
+        function handleZoom(e) { e.preventDefault(); applyZoom(e.deltaY > 0 ? 0.95 : 1.05, e.clientX, e.clientY); }
         function touchStart(e) {
             if (e.touches.length === 1) { e.preventDefault(); panStart(e.touches[0]); }
                 URL.revokeObjectURL(state.modal.img.src);
             }
             state.modal.img = null;
+            state.modal.currentItem = null;
+            state.modal.currentIndex = -1;
             if (document.fullscreenElement) document.exitFullscreen();
         }
         function toggleFullscreen() {
+            if (!document.fullscreenElement) { dom.modal.backdrop.requestFullscreen().catch(err => alert(`Error: ${err.message}`));
             } else { document.exitFullscreen(); }
         }
                 const list = document.createElement('ul');
                 classIds.forEach(id => {
                     const name = state.classNames[id] || `Class ${id}`;
+                    list.innerHTML += `<li class="flex items-center gap-2 mt-1"><span class="w-4 h-4 rounded-full border border-white/50" style="background-color:${generateColor(id)};"></span>${name}</li>`;
                 });
                 dom.modal.legend.appendChild(list);
             }