Spaces:

CHang
/

ROVI-Dataset-Example-Viewer

Running

App Files Files Community

CHang commited on Aug 1, 2025

Commit

40b2909

verified ·

1 Parent(s): 936a876

Update index.html

Browse files

Files changed (1) hide show

index.html +1042 -19

index.html CHANGED Viewed

@@ -1,19 +1,1042 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dataset Image Viewer</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 10px;
+        }
+        .viewer-container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+            padding: 20px;
+            width: calc(100vw - 20px);
+            max-height: calc(100vh - 20px);
+            overflow-y: auto;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .header h1 {
+            color: #333;
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin-bottom: 8px;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .loading-screen {
+            text-align: center;
+            padding: 60px 20px;
+            color: #333;
+        }
+        .loading-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #555;
+        }
+        .loading-progress {
+            background: rgba(102, 126, 234, 0.1);
+            border-radius: 25px;
+            padding: 20px;
+            margin: 20px auto;
+            max-width: 500px;
+            border: 2px solid rgba(102, 126, 234, 0.2);
+        }
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #e9ecef;
+            border-radius: 10px;
+            overflow: hidden;
+            margin: 15px 0;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            border-radius: 10px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+        .progress-text {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+        .progress-details {
+            font-size: 0.9rem;
+            color: #666;
+            line-height: 1.5;
+        }
+        .spinner-large {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        .max-demo-notice {
+            background: rgba(255, 193, 7, 0.1);
+            border: 2px solid #ffc107;
+            border-radius: 15px;
+            padding: 15px;
+            margin: 15px 0;
+            text-align: center;
+            color: #856404;
+        }
+        .navigation {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+        .nav-btn, .toggle-btn {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        }
+        .nav-btn:hover, .toggle-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
+        }
+        .nav-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .toggle-btn.active {
+            background: linear-gradient(45deg, #28a745, #20c997);
+        }
+        .toggle-btn.inactive {
+            background: linear-gradient(45deg, #dc3545, #fd7e14);
+        }
+        .image-counter {
+            background: rgba(102, 126, 234, 0.1);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            color: #333;
+        }
+        .loading-indicator {
+            background: rgba(255, 193, 7, 0.1);
+            padding: 5px 12px;
+            border-radius: 15px;
+            font-size: 12px;
+            color: #856404;
+            font-weight: 500;
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .image-section {
+            background: #f8f9fa;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            position: relative;
+        }
+        .image-container {
+            position: relative;
+            width: 100%;
+            height: 70vh;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #f0f0f0;
+        }
+        .main-image {
+            max-width: 100%;
+            max-height: 100%;
+            width: auto;
+            height: auto;
+            display: block;
+            object-fit: contain;
+        }
+        .image-overlay {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            z-index: 10;
+        }
+        .bounding-box {
+            position: absolute;
+            border: 3px solid;
+            background: transparent;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            z-index: 5;
+        }
+        .bounding-box.active {
+            opacity: 1;
+        }
+        .bounding-box.inactive {
+            opacity: 0;
+        }
+        .box-label {
+            position: absolute;
+            color: white;
+            padding: 4px 8px;
+            font-size: 12px;
+            font-weight: 700;
+            border-radius: 4px;
+            max-width: 200px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            line-height: 1.4;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+            min-height: 20px;
+            display: flex;
+            align-items: center;
+            z-index: 15;
+        }
+        .box-label.active {
+            opacity: 1;
+        }
+        .box-label.inactive {
+            opacity: 0;
+        }
+        .metadata-panel {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 15px;
+            overflow-y: auto;
+            max-height: 70vh;
+        }
+        .metadata-section {
+            margin-bottom: 15px;
+        }
+        .metadata-title {
+            font-weight: 700;
+            color: #333;
+            margin-bottom: 8px;
+            font-size: 1rem;
+            border-bottom: 2px solid #667eea;
+            padding-bottom: 3px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .metadata-content {
+            color: #666;
+            line-height: 1.4;
+            font-size: 13px;
+        }
+        .labels-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+            gap: 6px;
+            max-height: 300px;
+            overflow-y: auto;
+            align-items: stretch;
+        }
+        .label-tag {
+            padding: 10px 14px;
+            border-radius: 15px;
+            font-size: 15px;
+            text-align: center;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 40px;
+            word-wrap: break-word;
+            hyphens: auto;
+            line-height: 1.2;
+        }
+        .label-tag.active {
+            background: linear-gradient(45deg, #198754, #20c997);
+            color: white;
+            border-color: #198754;
+            box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
+        }
+        .label-tag.inactive {
+            background: #e9ecef;
+            color: #6c757d;
+            border-color: #dee2e6;
+        }
+        .label-tag:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        .source-meta-section {
+            margin-top: 10px;
+            padding-top: 10px;
+            border-top: 1px solid #dee2e6;
+        }
+        .source-meta-content {
+            max-height: 200px;
+            overflow-y: auto;
+            font-size: 13px;
+            line-height: 1.4;
+            color: #666;
+        }
+        .captions-section {
+            background: white;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            grid-column: 1 / -1;
+        }
+        .caption-item {
+            margin-bottom: 15px;
+            padding: 15px;
+            background: rgba(102, 126, 234, 0.05);
+            border-left: 4px solid #667eea;
+            border-radius: 0 10px 10px 0;
+        }
+        .caption-label {
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 5px;
+        }
+        .caption-text {
+            color: #555;
+            line-height: 1.6;
+            font-size: 14px;
+        }
+        .error-message {
+            background: #ff4757;
+            color: white;
+            padding: 15px;
+            border-radius: 10px;
+            text-align: center;
+            margin: 20px 0;
+        }
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+            font-size: 16px;
+        }
+        .image-loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(255, 255, 255, 0.9);
+            padding: 20px;
+            border-radius: 10px;
+            text-align: center;
+            z-index: 20;
+        }
+        .spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @media (max-width: 1024px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+            .metadata-panel {
+                max-height: none;
+            }
+            .image-container {
+                height: 50vh;
+            }
+        }
+        @media (max-width: 768px) {
+            .navigation {
+                flex-direction: column;
+                gap: 10px;
+            }
+            .header h1 {
+                font-size: 1.5rem;
+            }
+            .viewer-container {
+                padding: 15px;
+            }
+            .loading-progress {
+                margin: 20px 10px;
+                padding: 15px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="viewer-container">
+        <div class="header">
+            <h1>📊 ROVI Example Viewer</h1>
+        </div>
+        <div id="loadingScreen" class="loading-screen">
+            <div class="spinner-large"></div>
+            <div class="loading-title">Loading Examples</div>
+            <div class="loading-progress">
+                <div class="progress-text" id="progressText">Loading json annotation file...</div>
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressFill"></div>
+                </div>
+                <div class="progress-details" id="progressDetails">
+                    Please wait while we load and validate images
+                </div>
+            </div>
+        </div>
+        <div id="errorMessage" class="error-message" style="display: none;">
+            ❌ Failed to load annotation file. Please ensure the JSON path is accessible.
+        </div>
+        <div id="mainViewer" style="display: none;">
+            <div id="maxDemoNotice" class="max-demo-notice" style="display: none;">
+                🎯 <strong>Demo Limit Reached:</strong> Displaying maximum of 100 images for optimal performance
+            </div>
+            <div class="navigation">
+                <button class="nav-btn" id="prevBtn" onclick="navigatePrevious()">← Previous</button>
+                <div class="image-counter">
+                    <span id="currentIndex">1</span> / <span id="totalImages">0</span>
+                </div>
+                <button class="nav-btn" id="nextBtn" onclick="navigateNext()">Next →</button>
+                <button class="toggle-btn active" id="globalToggle" onclick="toggleAllBoxes()">
+                    Hide All Boxes
+                </button>
+                <div id="cacheStatus" class="loading-indicator" style="display: none;">
+                    📥 Caching images...
+                </div>
+            </div>
+            <div class="main-content">
+                <div class="image-section">
+                    <div class="image-container" id="imageContainer">
+                        <div id="imageLoading" class="image-loading" style="display: none;">
+                            <div class="spinner"></div>
+                            <div>Loading image...</div>
+                        </div>
+                        <img id="mainImage" class="main-image" alt="Dataset image" />
+                        <div class="image-overlay">
+                            <span id="imageId"></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="metadata-panel">
+                    <div class="metadata-section">
+                        <div class="metadata-title">📏 Dimensions</div>
+                        <div class="metadata-content" id="dimensions"></div>
+                    </div>
+                    <div class="metadata-section">
+                        <div class="metadata-title">
+                            🏷️ Labels
+                            <small style="font-size: 10px; color: #999;">Click to toggle boxes</small>
+                        </div>
+                        <div class="labels-grid" id="labelsContainer"></div>
+                    </div>
+                    <div class="metadata-section">
+                        <div class="metadata-title">📊 Details</div>
+                        <div class="metadata-content" id="sourceInfo"></div>
+                    </div>
+                    <div class="metadata-section source-meta-section">
+                        <div class="metadata-title">🔍 Source Meta</div>
+                        <div class="source-meta-content" id="sourceMeta"></div>
+                    </div>
+                </div>
+                <div class="captions-section">
+                    <div class="metadata-title">💬 Captions</div>
+                    <div class="caption-item">
+                        <div class="caption-label">VLM Description</div>
+                        <div class="caption-text" id="vlmCaption"></div>
+                    </div>
+                    <div class="caption-item">
+                        <div class="caption-label">Web Caption</div>
+                        <div class="caption-text" id="webCaption"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        class DatasetViewer {
+            constructor() {
+                this.dataset = {};
+                this.validImages = [];
+                this.imageCache = new Map();
+                this.allImageIds = [];
+                this.currentIndex = 0;
+                this.currentImageData = null;
+                this.boxStates = {};
+                this.MAX_IMAGES = 100;
+                this.INITIAL_CACHE_SIZE = 5;
+                this.LOOKAHEAD_CACHE_SIZE = 10;
+                this.boxColors = [
+                    '#FF0066', '#00FF66', '#6600FF', '#FF6600', '#00FFFF',
+                    '#FF0099', '#99FF00', '#0099FF', '#FF9900', '#9900FF',
+                    '#00FF99', '#FF3300', '#3300FF', '#FFFF00', '#FF00FF',
+                    '#00CCFF', '#FF6699', '#66FF99', '#9966FF', '#FFCC00'
+                ];
+                this.isBackgroundLoading = false;
+                this.nextImageIndex = 0;
+                this.maxReached = false;
+            }
+            shuffleArray(array) {
+                const shuffled = [...array];
+                for (let i = shuffled.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+                }
+                return shuffled;
+            }
+            updateProgress(current, total, message, details) {
+                const progressText = document.getElementById('progressText');
+                const progressFill = document.getElementById('progressFill');
+                const progressDetails = document.getElementById('progressDetails');
+                const percentage = total > 0 ? (current / total) * 100 : 0;
+                progressText.textContent = message;
+                progressFill.style.width = `${percentage}%`;
+                progressDetails.textContent = details;
+            }
+            async loadDataset() {
+                try {
+                    this.updateProgress(0, 100, 'Loading dataset file...', 'Fetching JSON data from server');
+                    const response = await fetch('https://huggingface.co/datasets/CHang/ROVI/raw/main/sampled_ROVI_val_1000.json');
+                    if (!response.ok) {
+                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    }
+                    this.updateProgress(30, 100, 'Parsing dataset...', 'Processing JSON data');
+                    this.dataset = await response.json();
+                    this.allImageIds = this.shuffleArray(Object.keys(this.dataset));
+                    if (this.allImageIds.length === 0) {
+                        throw new Error('Dataset is empty');
+                    }
+                    this.updateProgress(60, 100, 'Caching initial images...', 'Loading first batch for display');
+                    await this.loadInitialImages();
+                    if (this.validImages.length === 0) {
+                        throw new Error('No valid images found');
+                    }
+                    this.updateProgress(100, 100, 'Ready!', `Loaded ${this.validImages.length} images`);
+                    setTimeout(() => this.initializeViewer(), 800);
+                } catch (error) {
+                    console.error('Error loading dataset:', error);
+                    this.showError(`Failed to load dataset: ${error.message}`);
+                }
+            }
+            async loadInitialImages() {
+                this.validImages = [];
+                this.nextImageIndex = 0;
+                let attempts = 0;
+                const maxAttempts = Math.min(50, this.allImageIds.length);
+                while (this.validImages.length < this.INITIAL_CACHE_SIZE && attempts < maxAttempts) {
+                    const imageId = this.allImageIds[this.nextImageIndex];
+                    const imageData = this.dataset[imageId];
+                    this.updateProgress(
+                        this.validImages.length,
+                        this.INITIAL_CACHE_SIZE,
+                        `Validating images... (${this.validImages.length}/${this.INITIAL_CACHE_SIZE})`,
+                        `Testing: ${imageId.substring(0, 30)}... | Valid: ${this.validImages.length} | Failed: ${attempts - this.validImages.length}`
+                    );
+                    try {
+                        await this.preloadImage(imageData.url);
+                        this.validImages.push(imageId);
+                    } catch (error) {
+                        console.warn(`Image validation failed for ${imageId}:`, error.message);
+                    }
+                    this.nextImageIndex++;
+                    attempts++;
+                    if (this.nextImageIndex >= this.allImageIds.length) {
+                        console.warn('Reached end of dataset during initial load');
+                        break;
+                    }
+                }
+                if (this.validImages.length === 0) {
+                    throw new Error('No valid images found in dataset');
+                }
+            }
+            async startBackgroundCaching() {
+                if (this.isBackgroundLoading || this.validImages.length >= this.MAX_IMAGES) return;
+                this.isBackgroundLoading = true;
+                const cacheStatus = document.getElementById('cacheStatus');
+                while (this.validImages.length < this.MAX_IMAGES && this.nextImageIndex < this.allImageIds.length) {
+                    const currentCacheAhead = Math.min(this.LOOKAHEAD_CACHE_SIZE, this.MAX_IMAGES - this.validImages.length);
+                    const targetSize = this.validImages.length + currentCacheAhead;
+                    cacheStatus.style.display = 'block';
+                    let loaded = 0;
+                    let attempts = 0;
+                    const maxBackgroundAttempts = Math.min(30, this.allImageIds.length - this.nextImageIndex);
+                    while (this.validImages.length < targetSize && attempts < maxBackgroundAttempts && this.nextImageIndex < this.allImageIds.length) {
+                        const imageId = this.allImageIds[this.nextImageIndex];
+                        const imageData = this.dataset[imageId];
+                        try {
+                            await this.preloadImage(imageData.url);
+                            this.validImages.push(imageId);
+                            loaded++;
+                            cacheStatus.textContent = `📥 Cached ${loaded} images (${this.validImages.length} total)`;
+                            this.updateNavigationButtons();
+                        } catch (error) {
+                            console.warn(`Background validation failed for ${imageId}:`, error.message);
+                        }
+                        this.nextImageIndex++;
+                        attempts++;
+                        if (loaded % 2 === 0) {
+                            await new Promise(resolve => setTimeout(resolve, 10));
+                        }
+                    }
+                    if (this.validImages.length >= this.MAX_IMAGES && !this.maxReached) {
+                        this.maxReached = true;
+                        document.getElementById('maxDemoNotice').style.display = 'block';
+                        cacheStatus.textContent = '🎯 Maximum demo images reached';
+                        setTimeout(() => cacheStatus.style.display = 'none', 3000);
+                        break;
+                    }
+                    if (this.nextImageIndex >= this.allImageIds.length) {
+                        cacheStatus.textContent = '✅ All available images processed';
+                        setTimeout(() => cacheStatus.style.display = 'none', 2000);
+                        break;
+                    }
+                    cacheStatus.style.display = 'none';
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                }
+                this.isBackgroundLoading = false;
+            }
+            async preloadImage(url) {
+                if (this.imageCache.has(url)) {
+                    return this.imageCache.get(url);
+                }
+                return new Promise((resolve, reject) => {
+                    const img = new Image();
+                    let isResolved = false;
+                    img.onload = () => {
+                        if (isResolved) return;
+                        isResolved = true;
+                        if (img.naturalWidth === 0 || img.naturalHeight === 0) {
+                            reject(new Error(`Invalid image dimensions: ${url}`));
+                            return;
+                        }
+                        this.imageCache.set(url, img);
+                        resolve(img);
+                    };
+                    img.onerror = () => {
+                        if (isResolved) return;
+                        isResolved = true;
+                        reject(new Error(`Failed to load: ${url}`));
+                    };
+                    img.onabort = () => {
+                        if (isResolved) return;
+                        isResolved = true;
+                        reject(new Error(`Load aborted: ${url}`));
+                    };
+                    const timeoutId = setTimeout(() => {
+                        if (isResolved) return;
+                        isResolved = true;
+                        img.src = '';
+                        reject(new Error(`Timeout: ${url}`));
+                    }, 3000);
+                    img.src = url;
+                    img.onload = () => {
+                        clearTimeout(timeoutId);
+                        if (isResolved) return;
+                        isResolved = true;
+                        if (img.naturalWidth === 0 || img.naturalHeight === 0) {
+                            reject(new Error(`Invalid dimensions: ${url}`));
+                            return;
+                        }
+                        this.imageCache.set(url, img);
+                        resolve(img);
+                    };
+                });
+            }
+            initializeViewer() {
+                document.getElementById('loadingScreen').style.display = 'none';
+                document.getElementById('mainViewer').style.display = 'block';
+                document.getElementById('totalImages').textContent = this.validImages.length;
+                this.currentIndex = 0;
+                this.displayImage(this.currentIndex);
+                setTimeout(() => this.startBackgroundCaching(), 1000);
+            }
+            displayImage(index) {
+                if (index < 0 || index >= this.validImages.length) {
+                    console.error(`Invalid index ${index}, valid range: 0-${this.validImages.length - 1}`);
+                    return;
+                }
+                const imageId = this.validImages[index];
+                this.currentImageData = this.dataset[imageId];
+                this.currentIndex = index;
+                this.boxStates = {};
+                this.currentImageData.labels.forEach((_, i) => {
+                    this.boxStates[i] = true;
+                });
+                this.updateNavigationButtons();
+                const img = document.getElementById('mainImage');
+                const cachedImage = this.imageCache.get(this.currentImageData.url);
+                img.src = cachedImage.src;
+                this.updateMetadata(imageId);
+                this.updateLabels();
+                this.drawBoundingBoxes();
+                this.updateGlobalToggleButton();
+                if (index >= this.validImages.length - 5 && !this.isBackgroundLoading && this.validImages.length < this.MAX_IMAGES) {
+                    this.startBackgroundCaching();
+                }
+            }
+            updateNavigationButtons() {
+                document.getElementById('currentIndex').textContent = this.currentIndex + 1;
+                document.getElementById('totalImages').textContent = this.validImages.length;
+                document.getElementById('prevBtn').disabled = this.currentIndex === 0;
+                document.getElementById('nextBtn').disabled = this.currentIndex >= this.validImages.length - 1;
+            }
+            updateMetadata(imageId) {
+                document.getElementById('imageId').textContent = imageId;
+                document.getElementById('dimensions').textContent =
+                    `${this.currentImageData.width} × ${this.currentImageData.height}px`;
+                const sourceInfo = document.getElementById('sourceInfo');
+                sourceInfo.innerHTML = `
+                    <strong>Source:</strong> ${this.currentImageData.source}<br>
+                    <strong>PHash:</strong> ${this.currentImageData.phash}<br>
+                    <strong>Bounding Boxes:</strong> ${this.currentImageData.box_num}<br>
+                    <strong>Categories:</strong> ${this.currentImageData.category_num}<br>
+                    <strong>VLM caption tokens (CLIP):</strong> ${this.currentImageData.vlm_clip_tok_num}<br>
+                    <strong>Web caption tokens (CLIP):</strong> ${this.currentImageData.web_clip_tok_num}
+                `;
+                const sourceMeta = document.getElementById('sourceMeta');
+                if (this.currentImageData.source_meta && typeof this.currentImageData.source_meta === 'object') {
+                    let metaHTML = '';
+                    Object.entries(this.currentImageData.source_meta).forEach(([key, value]) => {
+                        let displayValue = value;
+                        if (typeof value === 'number') {
+                            displayValue = Number.isInteger(value) ? value : value.toFixed(3);
+                        } else if (typeof value === 'object') {
+                            displayValue = JSON.stringify(value, null, 2);
+                        }
+                        metaHTML += `<strong>${key}:</strong> ${displayValue}<br>`;
+                    });
+                    sourceMeta.innerHTML = metaHTML;
+                } else {
+                    sourceMeta.innerHTML = '<em>No source meta available</em>';
+                }
+                document.getElementById('vlmCaption').textContent = this.currentImageData.vlm_description;
+                document.getElementById('webCaption').textContent = this.currentImageData.web_caption;
+            }
+            updateLabels() {
+                const labelsContainer = document.getElementById('labelsContainer');
+                labelsContainer.innerHTML = '';
+                this.currentImageData.labels.forEach((label, index) => {
+                    const labelTag = document.createElement('div');
+                    labelTag.className = `label-tag ${this.boxStates[index] ? 'active' : 'inactive'}`;
+                    labelTag.textContent = label;
+                    labelTag.onclick = () => this.toggleBox(index);
+                    labelTag.style.borderColor = this.boxColors[index % this.boxColors.length];
+                    labelsContainer.appendChild(labelTag);
+                });
+            }
+            drawBoundingBoxes() {
+                const existingBoxes = document.querySelectorAll('.bounding-box, .box-label');
+                existingBoxes.forEach(element => element.remove());
+                const container = document.getElementById('imageContainer');
+                const img = document.getElementById('mainImage');
+                setTimeout(() => {
+                    const containerRect = container.getBoundingClientRect();
+                    const imgRect = img.getBoundingClientRect();
+                    const displayedWidth = imgRect.width;
+                    const displayedHeight = imgRect.height;
+                    const scaleX = displayedWidth / this.currentImageData.width;
+                    const scaleY = displayedHeight / this.currentImageData.height;
+                    const offsetX = imgRect.left - containerRect.left;
+                    const offsetY = imgRect.top - containerRect.top;
+                    this.currentImageData.bboxes.forEach((bbox, index) => {
+                        const [x1, y1, x2, y2] = bbox;
+                        const color = this.boxColors[index % this.boxColors.length];
+                        const boxDiv = document.createElement('div');
+                        boxDiv.className = `bounding-box ${this.boxStates[index] ? 'active' : 'inactive'}`;
+                        boxDiv.style.left = `${offsetX + (x1 * scaleX)}px`;
+                        boxDiv.style.top = `${offsetY + (y1 * scaleY)}px`;
+                        boxDiv.style.width = `${(x2 - x1) * scaleX}px`;
+                        boxDiv.style.height = `${(y2 - y1) * scaleY}px`;
+                        boxDiv.style.borderColor = color;
+                        container.appendChild(boxDiv);
+                        const labelDiv = document.createElement('div');
+                        labelDiv.className = `box-label ${this.boxStates[index] ? 'active' : 'inactive'}`;
+                        labelDiv.textContent = this.currentImageData.labels[index];
+                        labelDiv.style.backgroundColor = color;
+                        labelDiv.style.left = `${offsetX + (x1 * scaleX) + 4}px`;
+                        labelDiv.style.top = `${offsetY + (y1 * scaleY) + 4}px`;
+                        container.appendChild(labelDiv);
+                    });
+                }, 50);
+            }
+            toggleBox(index) {
+                this.boxStates[index] = !this.boxStates[index];
+                this.updateLabels();
+                this.drawBoundingBoxes();
+                this.updateGlobalToggleButton();
+            }
+            updateGlobalToggleButton() {
+                const toggleBtn = document.getElementById('globalToggle');
+                const visibleBoxes = Object.values(this.boxStates).filter(state => state).length;
+                if (visibleBoxes === 0) {
+                    toggleBtn.className = 'toggle-btn inactive';
+                    toggleBtn.textContent = 'Show All Boxes';
+                } else {
+                    toggleBtn.className = 'toggle-btn active';
+                    toggleBtn.textContent = 'Hide All Boxes';
+                }
+            }
+            toggleAllBoxes() {
+                const visibleBoxes = Object.values(this.boxStates).filter(state => state).length;
+                const shouldShowAll = visibleBoxes === 0;
+                Object.keys(this.boxStates).forEach(key => {
+                    this.boxStates[key] = shouldShowAll;
+                });
+                this.updateLabels();
+                this.drawBoundingBoxes();
+                this.updateGlobalToggleButton();
+            }
+            navigatePrevious() {
+                if (this.currentIndex > 0) {
+                    this.displayImage(this.currentIndex - 1);
+                }
+            }
+            navigateNext() {
+                if (this.currentIndex < this.validImages.length - 1) {
+                    this.displayImage(this.currentIndex + 1);
+                }
+            }
+            showError(message) {
+                document.getElementById('loadingScreen').style.display = 'none';
+                document.getElementById('errorMessage').style.display = 'block';
+                document.getElementById('errorMessage').innerHTML = `
+                    ❌ ${message}<br>
+                    <small>Please check the console for more details</small>
+                `;
+            }
+        }
+        let viewer = null;
+        function navigatePrevious() {
+            if (viewer) viewer.navigatePrevious();
+        }
+        function navigateNext() {
+            if (viewer) viewer.navigateNext();
+        }
+        function toggleAllBoxes() {
+            if (viewer) viewer.toggleAllBoxes();
+        }
+        document.addEventListener('keydown', function(e) {
+            if (!viewer) return;
+            if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
+                e.preventDefault();
+                viewer.navigatePrevious();
+            } else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
+                e.preventDefault();
+                viewer.navigateNext();
+            } else if (e.key === ' ') {
+                e.preventDefault();
+                viewer.toggleAllBoxes();
+            }
+        });
+        window.addEventListener('resize', () => {
+            if (viewer && viewer.currentImageData) {
+                setTimeout(() => viewer.drawBoundingBoxes(), 100);
+            }
+        });
+        document.addEventListener('DOMContentLoaded', () => {
+            viewer = new DatasetViewer();
+            viewer.loadDataset();
+        });
+    </script>
+</body>
+</html>