|
|
<!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> |
