| | <!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; |
| | } |
| | |
| | .header-links { |
| | display: inline-flex; |
| | gap: 12px; |
| | margin-left: 15px; |
| | align-items: center; |
| | } |
| | |
| | .header-link { |
| | display: inline-flex; |
| | align-items: center; |
| | justify-content: center; |
| | width: 32px; |
| | height: 32px; |
| | background: rgba(102, 126, 234, 0.1); |
| | border-radius: 8px; |
| | text-decoration: none; |
| | transition: all 0.3s ease; |
| | font-size: 16px; |
| | } |
| | |
| | .header-link:hover { |
| | background: rgba(102, 126, 234, 0.2); |
| | transform: translateY(-2px); |
| | box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); |
| | } |
| | |
| | .header-link svg { |
| | color: #667eea; |
| | transition: color 0.3s ease; |
| | } |
| | |
| | .header-link:hover svg { |
| | color: #5a6fd8; |
| | } |
| | |
| | @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 |
| | <span class="header-links"> |
| | <a href="https://github.com/CihangPeng/ROVI" target="_blank" class="header-link" title="GitHub Repository"> |
| | <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"> |
| | <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/> |
| | </svg> |
| | </a> |
| | <a href="https://huggingface.co/datasets/CHang/ROVI" target="_blank" class="header-link" title="Hugging Face Dataset"> |
| | <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" width="16" height="16" alt="Hugging Face" style="display: block;"> |
| | </a> |
| | </span> |
| | </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 example meta...', 'Processing JSON data (downloading 3.14MB from CHang/ROVI)'); |
| | |
| | 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 (with short timeout)... (${this.validImages.length}/${this.INITIAL_CACHE_SIZE})`, |
| | `Testing: ${imageId.substring(0, 30)}... | Valid: ${this.validImages.length} | Skipped: ${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> |
