Spaces:

aaurelions
/

visualizer

Running

File size: 31,050 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Futuristic Dataset Visualizer v6</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>
    <style>
        @keyframes aurora {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'SF Mono', 'Courier New', Courier, monospace;
            background-color: #0D1117;
            color: #E6EDF3;
            background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
                radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.1) 0px, transparent 50%);
            background-size: 250% 250%;
            animation: aurora 20s ease infinite;
        }

        .glass-card {
            background: rgba(17, 25, 40, 0.75);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .btn-glow:hover {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 8px rgba(59, 130, 246, 0.4);
        }

        .card-glow:hover {
            transform: translateY(-4px);
            box-shadow: 0 0 25px rgba(59, 130, 246, 0.3), 0 0 10px rgba(59, 130, 246, 0.2);
        }

        .modal {
            background: rgba(13, 17, 23, 0.85);
            backdrop-filter: blur(16px);
        }

        #modal-canvas {
            cursor: grab;
            touch-action: none;
        }

        #modal-canvas:active {
            cursor: grabbing;
        }

        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;
        }

        .badge {
            position: absolute;
            top: 0.5rem;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 0.15rem 0.5rem;
            border-radius: 0.375rem;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        }
    </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 v6</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>
                <label for="zip-file"
                    class="btn-glow bg-blue-600 text-white flex items-center justify-center w-full p-4 rounded-lg cursor-pointer text-xl transition-all duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                    </svg>
                    Upload dataset.zip
                </label>
                <input type="file" id="zip-file" accept=".zip" class="hidden">
                <p id="zip-file-name" class="text-center text-gray-500 mt-2 text-sm h-5"></p>
                <div id="status-container" class="h-6 text-center mt-2"></div>
            </div>
            <div id="labels-panel" class="hidden mt-4 pt-4 border-t border-gray-700">
                <h3 class="text-lg font-semibold text-blue-300 mb-2">Class Labels (Optional)</h3>
                <textarea id="yaml-paste" rows="4"
                    class="w-full bg-gray-900 border border-gray-600 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
                    placeholder="Paste COCO .yaml content here..."></textarea>
            </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>
                <p class="text-gray-500">Upload a dataset to begin.</p>
            </div>
            <div id="image-container"
                class="hidden grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-6"></div>
        </div>

        <div id="pagination" class="flex justify-center items-center space-x-2 mt-10"></div>
    </div>

    <!-- 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-info" class="absolute top-4 left-4 glass-card p-3 rounded-lg text-sm z-20 hidden"></div>
            <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>

            <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">
                <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>
    </div>

    <script>
        const dom = {
            zipFileInput: document.getElementById('zip-file'), zipFileNameDisplay: document.getElementById('zip-file-name'),
            yamlPasteArea: document.getElementById('yaml-paste'),
            imageContainer: document.getElementById('image-container'), emptyState: document.getElementById('empty-state'),
            paginationContainer: document.getElementById('pagination'), statusContainer: document.getElementById('status-container'),
            labelsPanel: document.getElementById('labels-panel'),
            modal: {
                backdrop: document.getElementById('modal-backdrop'), canvas: document.getElementById('modal-canvas'),
                closeBtn: document.getElementById('modal-close'), legend: document.getElementById('modal-legend'),
                info: document.getElementById('modal-info'), 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) {
            const file = event.target.files[0];
            if (!file) return;

            showStatus('Processing Zip...', 'loading');
            dom.zipFileNameDisplay.textContent = file.name;
            dom.labelsPanel.classList.remove('hidden');

            try {
                const zip = await JSZip.loadAsync(file);
                const imageFiles = {};
                const labelFiles = {};

                // Separate files into images and labels
                for (const filename in zip.files) {
                    if (zip.files[filename].dir) continue;
                    if (/\.(jpe?g|png|webp)$/i.test(filename)) {
                        imageFiles[filename] = zip.files[filename];
                    } else if (/\.txt$/i.test(filename)) {
                        labelFiles[filename] = zip.files[filename];
                    }
                }

                state.allImageData = [];
                let index = 0;
                // Iterate over all found images
                for (const imagePath in imageFiles) {
                    const imageFile = imageFiles[imagePath];

                    // Construct possible label paths
                    const pathParts = imagePath.split('/');
                    const imageName = pathParts.pop();
                    const baseName = imageName.split('.').slice(0, -1).join('.');
                    const labelName = `${baseName}.txt`;

                    // A common structure is '/images/train/' paired with '/labels/train/'
                    const possibleLabelPath = [...pathParts, labelName].join('/').replace(/images/i, 'labels');

                    const labelFile = labelFiles[possibleLabelPath] || null;

                    // Determine the dataset split (train/val/test) from the path
                    const splitMatch = imagePath.match(/(train|val|validation|test|testing)/i);
                    const split = splitMatch ? splitMatch[0].replace('validation', 'val').replace('testing', 'test') : 'unknown';

                    state.allImageData.push({
                        id: imagePath, // Use the full path as a unique ID
                        image: imageFile,
                        label: labelFile,
                        split: split,
                        originalIndex: index++
                    });
                }

                state.allImageData.sort((a, b) => a.id.localeCompare(b.id));


                if (state.allImageData.length > 0) {
                    dom.imageContainer.classList.remove('hidden');
                    dom.emptyState.classList.add('hidden');
                    renderPage(1);
                    setupPagination();
                    showStatus(`${state.allImageData.length} images loaded.`, 'success');
                } else {
                    showStatus('No images found in the zip file.', 'error');
                }
            } catch (e) { showStatus('Error reading zip file.', 'error'); console.error(e); }
        }


        function handleYamlPaste(event) {
            const yamlString = event.target.value;
            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;
            if (e.key === 'ArrowLeft') navigateImage(-1);
            if (e.key === 'ArrowRight') navigateImage(1);
            if (e.key === 'Escape') closeModal();
        }

        // --- UI & Drawing ---
        async function renderPage(page) {
            state.currentPage = page;
            dom.imageContainer.innerHTML = '';
            const paginatedItems = state.allImageData.slice((page - 1) * state.imagesPerPage, page * state.imagesPerPage);

            for (const item of paginatedItems) {
                const card = document.createElement('div');
                card.className = 'relative card-glow glass-card rounded-xl overflow-hidden transition-all duration-300 cursor-pointer';

                const splitColors = {
                    train: 'bg-blue-600/90',
                    val: 'bg-purple-600/90',
                    test: 'bg-green-600/90',
                };

                const badgeColorClass = splitColors[item.split.toLowerCase()] || 'bg-gray-500/90';

                const splitBadge = item.split !== 'unknown'
                    ? `<div class="badge left-2 ${badgeColorClass} text-white">${item.split.toUpperCase()}</div>`
                    : '';
                const noLabelBadge = !item.label ? `<div class="badge right-2 bg-yellow-600/90 text-white">NO LABEL</div>` : '';

                card.innerHTML = `
                    <div class="relative">
                        <canvas class="w-full h-40 md:h-48 object-cover bg-gray-900/50"></canvas>
                        ${splitBadge}
                        ${noLabelBadge}
                    </div>
                    <h3 class="p-3 font-semibold text-sm text-blue-300 truncate">${item.image.name.split('/').pop()}</h3>`;

                dom.imageContainer.appendChild(card);
                card.addEventListener('click', () => showModal(item));

                const canvas = card.querySelector('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image();
                img.src = URL.createObjectURL(await item.image.async('blob'));
                img.onload = async () => {
                    canvas.width = img.width; canvas.height = img.height;
                    ctx.drawImage(img, 0, 0);
                    if (item.label) {
                        drawAnnotations(ctx, await item.label.async('string'), img.width, img.height);
                    }
                    URL.revokeObjectURL(img.src);
                };
            }
            updateActivePagination();
        }

        function drawAnnotations(ctx, labelText, w, h, isModal = false) {
            if (!labelText) return;
            const lines = labelText.trim().split('\n').filter(line => line.trim() !== '');
            if (lines.length === 0) return;

            const isDetection = lines[0].trim().split(' ').length === 5;
            const uniqueClasses = new Set();

            lines.forEach(line => {
                const parts = line.split(' ').map(parseFloat);
                const classId = parts[0];
                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) { // Bounding Box: [class, x_center, y_center, width, height]
                    const [, xc, yc, width, height] = parts;
                    ctx.rect((xc - width / 2) * w, (yc - height / 2) * h, width * w, height * h);
                } else { // Segmentation: [class, x1, y1, x2, y2, ...]
                    const points = parts.slice(1);
                    ctx.moveTo(points[0] * w, points[1] * h);
                    for (let i = 2; i < points.length; i += 2) ctx.lineTo(points[i] * w, points[i + 1] * h);
                    ctx.closePath();
                }
                ctx.stroke();
            });
            if (isModal) buildLegend(uniqueClasses);
        }

        // --- Modal, Pan/Zoom, Gallery ---
        async function showModal(item) {
            state.modal.currentItem = item;
            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');
            dom.modal.info.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);

            if (state.modal.img && state.modal.img.src.startsWith('blob:')) {
                URL.revokeObjectURL(state.modal.img.src);
            }

            state.modal.img = new Image();
            state.modal.labelText = item.label ? await item.label.async('string') : '';

            state.modal.img.onerror = () => {
                console.error("Modal image failed to load.");
                showStatus('Error: Could not load the full-size image.', 'error');
                closeModal();
            };

            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');
                dom.modal.info.classList.remove('hidden');

                // Populate modal info
                const splitText = item.split !== 'unknown' ? `<span class="block mt-1 text-xs font-bold text-blue-300 bg-blue-900/50 px-2 py-1 rounded-full">${item.split.toUpperCase()}</span>` : '';
                dom.modal.info.innerHTML = `<p class="truncate">${item.image.name.split('/').pop()}</p>${splitText}`;

                redrawModalCanvas();
            };

            state.modal.img.src = URL.createObjectURL(await item.image.async('blob'));
        }

        function redrawModalCanvas() {
            if (!state.modal.img) return;
            const canvas = dom.modal.canvas, ctx = canvas.getContext('2d');
            ctx.save();
            ctx.setTransform(1, 0, 0, 1, 0, 0);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.setTransform(state.modal.transform);
            ctx.drawImage(state.modal.img, 0, 0);
            drawAnnotations(ctx, state.modal.labelText, state.modal.img.width, state.modal.img.height, true);
            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();
            if (!state.modal.isPanning) return;
            state.modal.transform.translateSelf((e.clientX - state.modal.lastPos.x) / state.modal.transform.a, (e.clientY - state.modal.lastPos.y) / state.modal.transform.d);
            redrawModalCanvas();
            state.modal.lastPos = { x: e.clientX, y: e.clientY };
        }
        function panEnd() { state.modal.isPanning = false; }

        function applyZoom(scaleAmount, clientX, clientY) {
            const canvas = dom.modal.canvas;
            const pt = new DOMPoint(clientX ?? canvas.clientWidth / 2, clientY ?? canvas.clientHeight / 2);
            const transformedPt = pt.matrixTransform(state.modal.transform.inverse());
            state.modal.transform.translateSelf(transformedPt.x, transformedPt.y)
                .scaleSelf(scaleAmount, scaleAmount).translateSelf(-transformedPt.x, -transformedPt.y);
            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]); }
            if (e.touches.length === 2) { e.preventDefault(); state.modal.lastPos = { dist: Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY) }; }
        }

        function touchMove(e) {
            e.preventDefault();
            if (e.touches.length === 1) panMove(e.touches[0]);
            if (e.touches.length === 2) {
                const newDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
                applyZoom(newDist / state.modal.lastPos.dist, (e.touches[0].clientX + e.touches[1].clientX) / 2, (e.touches[0].clientY + e.touches[1].clientY) / 2);
                state.modal.lastPos.dist = newDist;
            }
        }

        function closeModal() {
            dom.modal.backdrop.classList.add('hidden');
            if (state.modal.img && state.modal.img.src.startsWith('blob:')) {
                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 trying to enable full-screen mode: ${err.message} (${err.name})`));
            } else { document.exitFullscreen(); }
        }

        // --- Helpers ---
        function generateColor(classId) {
            if (!state.classColors[classId]) {
                const hue = (classId * 137.508) % 360;
                state.classColors[classId] = `hsl(${hue}, 95%, 65%)`;
            }
            return state.classColors[classId];
        }

        function buildLegend(classIds) {
            dom.modal.legend.innerHTML = '';
            if (classIds.size > 0) {
                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);
            } else {
                dom.modal.legend.innerHTML = '<p class="text-gray-400">No annotations</p>';
            }
        }

        function setupPagination() {
            dom.paginationContainer.innerHTML = '';
            const pageCount = Math.ceil(state.allImageData.length / state.imagesPerPage);
            if (pageCount > 1) {
                for (let i = 1; i <= pageCount; i++) {
                    const button = document.createElement('button');
                    button.innerText = i;
                    button.dataset.page = i;
                    button.className = "px-4 py-2 rounded-md bg-gray-800 text-gray-300 hover:bg-blue-600 transition-colors";
                    button.addEventListener('click', (e) => renderPage(parseInt(e.target.dataset.page)));
                    dom.paginationContainer.appendChild(button);
                }
            }
            updateActivePagination();
        }

        function updateActivePagination() {
            dom.paginationContainer.querySelectorAll('button').forEach(btn => {
                const isActive = parseInt(btn.dataset.page) === state.currentPage;
                btn.classList.toggle('bg-blue-600', isActive);
                btn.classList.toggle('text-white', isActive);
            });
        }

        function showStatus(message, type = 'info') {
            const styles = {
                info: 'text-gray-400', success: 'text-green-400',
                warning: 'text-yellow-400', error: 'text-red-500', loading: 'text-blue-400'
            };
            dom.statusContainer.innerHTML = `<p class="${styles[type]}">${message}</p>`;
        }
    </script>
</body>

</html>