Build complete SAM3 Object Detection Browser

- Built interactive static HTML app for browsing SAM3 detection results
- Progressive loading: displays first batch in 1-2 seconds, continues loading in background
- Tufte-inspired minimal design: clean typography, subtle borders, high data-ink ratio
- Real-time filtering: confidence threshold slider and detection toggle
- Statistics dashboard showing filtered images, detections, and averages
- Canvas-based bounding box visualization with color-coded confidence scores
- Example dataset links for quick navigation (photographs/illustrations)
- Handles multiple detections per image with proper canvas clearing
- Fixed filtering logic to use filtered dataset for consistent stats
- Added debugging logs for bbox rendering troubleshooting
- Link to SAM3 detection script for users to create their own datasets

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

README.md

@@ -1,10 +1,93 @@
 ---
-title: Sam3 Detection Browser
-emoji: 🐨
-colorFrom: green
-colorTo: indigo
+title: SAM3 Detection Browser
+emoji: 🔍
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🔍 SAM3 Object Detection Browser
+
+A simple, interactive web application for browsing and exploring object detection results from Meta's [SAM3 (Segment Anything Model 3)](https://huggingface.co/facebook/sam3).
+
+## Features
+
+- **Visual Detection Display**: View images with bounding boxes overlaid on detected objects
+- **Confidence Filtering**: Adjust confidence threshold with a slider to filter detections
+- **Statistics Dashboard**: See overall detection statistics including:
+  - Total filtered images
+  - Images with detections
+  - Total detections
+  - Average detections per image
+- **Flexible Navigation**: Browse through datasets with pagination
+- **Real-time Updates**: Filters update visualization instantly
+- **Color-coded Confidence**: Bounding boxes and scores are color-coded:
+  - 🟢 Green: High confidence (≥70%)
+  - 🟠 Orange: Medium confidence (40-70%)
+  - 🔴 Red: Low confidence (<40%)
+
+## How to Use
+
+1. **Enter a Dataset ID**: Input any HuggingFace dataset that contains object detection results from SAM3
+   - Default: `davanstrien/newspapers-image-predictions`
+   - Format: `username/dataset-name`
+
+2. **Select Split**: Choose which dataset split to view (train/validation/test)
+
+3. **Adjust Filters**:
+   - Move the confidence slider to filter detections by minimum confidence score
+   - Check "Show only images with detections" to hide images without any detected objects
+
+4. **Browse**: Navigate through pages using Previous/Next buttons
+
+## Dataset Requirements
+
+This browser works with any HuggingFace dataset that has:
+- An `image` column containing images
+- An `objects` column with the structure:
+  ```python
+  {
+      "bbox": [[x, y, width, height], ...],    # Bounding box coordinates
+      "category": [0, 0, ...],                  # Category indices
+      "score": [0.8, 0.6, ...]                  # Confidence scores
+  }
+  ```
+
+This matches the output format from the [detect-objects.py](https://huggingface.co/datasets/uv-scripts/sam3/blob/main/detect-objects.py) script.
+
+## Example Datasets
+
+- [davanstrien/newspapers-image-predictions](https://huggingface.co/datasets/davanstrien/newspapers-image-predictions) - Photograph detections in historical newspapers
+
+## Creating Your Own Detection Dataset
+
+Use the SAM3 detection script to create your own datasets:
+
+```bash
+# Detect objects in your images
+uv run https://huggingface.co/datasets/uv-scripts/sam3/raw/main/detect-objects.py \
+    your-dataset \
+    your-output-dataset \
+    --class-name "photograph" \
+    --confidence-threshold 0.5
+```
+
+Then view the results by entering `your-output-dataset` in this browser!
+
+## Technical Details
+
+- **Technology**: Pure HTML/CSS/JavaScript (no backend required)
+- **Data Source**: HuggingFace Datasets API (parquet endpoint)
+- **Rendering**: HTML5 Canvas for bounding box overlays
+- **Performance**: Loads 12 images per page for optimal performance
+
+## Related Projects
+
+- [SAM3 Detection Script](https://huggingface.co/datasets/uv-scripts/sam3) - Create detection datasets
+- [SAM3 Model](https://huggingface.co/facebook/sam3) - The base model
+- [UV Scripts Organization](https://huggingface.co/uv-scripts) - More ready-to-run ML scripts
+
+## License
+
+MIT License - Feel free to use and modify for your own projects!

index.html

@@ -1,19 +1,779 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SAM3 Object Detection Browser</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+            line-height: 1.5;
+            color: #222;
+            background: #fff;
+            font-size: 15px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 40px 20px;
+        }
+
+        header {
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 20px;
+            margin-bottom: 40px;
+        }
+
+        h1 {
+            color: #222;
+            font-weight: 400;
+            font-size: 28px;
+            margin-bottom: 8px;
+        }
+
+        .subtitle {
+            color: #666;
+            font-size: 15px;
+            font-weight: 300;
+            margin-bottom: 12px;
+        }
+
+        .header-links {
+            font-size: 13px;
+            color: #666;
+        }
+
+        .header-links a {
+            color: #222;
+            text-decoration: none;
+            border-bottom: 1px solid #222;
+        }
+
+        .header-links a:hover {
+            border-bottom-color: #666;
+        }
+
+        .example-datasets {
+            margin-top: 8px;
+            font-size: 12px;
+            color: #666;
+        }
+
+        .example-datasets a {
+            color: #666;
+            text-decoration: none;
+            border-bottom: 1px dotted #999;
+            cursor: pointer;
+            margin-right: 12px;
+        }
+
+        .example-datasets a:hover {
+            color: #222;
+            border-bottom-color: #222;
+        }
+
+        .controls {
+            border: 1px solid #ddd;
+            padding: 20px;
+            margin-bottom: 40px;
+            background: #fafafa;
+        }
+
+        .control-group {
+            margin-bottom: 18px;
+        }
+
+        .control-group:last-child {
+            margin-bottom: 0;
+        }
+
+        label {
+            display: block;
+            font-weight: 400;
+            margin-bottom: 6px;
+            color: #444;
+            font-size: 14px;
+        }
+
+        input[type="text"],
+        select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ccc;
+            border-radius: 2px;
+            font-size: 14px;
+            background: white;
+        }
+
+        input[type="text"]:focus,
+        select:focus {
+            outline: none;
+            border-color: #888;
+        }
+
+        input[type="range"] {
+            width: 100%;
+            margin-right: 10px;
+        }
+
+        .slider-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .slider-value {
+            min-width: 50px;
+            font-weight: 400;
+            color: #222;
+        }
+
+        .checkbox-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+        }
+
+        .stats {
+            border-top: 1px solid #ddd;
+            border-bottom: 1px solid #ddd;
+            padding: 25px 0;
+            margin-bottom: 40px;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 30px;
+        }
+
+        .stat-item {
+            text-align: center;
+            padding: 0;
+        }
+
+        .stat-value {
+            font-size: 36px;
+            font-weight: 300;
+            color: #222;
+            margin-bottom: 4px;
+            letter-spacing: -0.5px;
+        }
+
+        .stat-label {
+            font-size: 13px;
+            color: #666;
+            font-weight: 400;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 40px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .error {
+            background: #fff;
+            border: 1px solid #d00;
+            padding: 15px;
+            margin: 20px 0;
+            color: #d00;
+            font-size: 14px;
+        }
+
+        .image-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+            gap: 40px;
+            margin-bottom: 40px;
+        }
+
+        .image-card {
+            background: white;
+            border: 1px solid #ddd;
+            overflow: hidden;
+        }
+
+        .image-card:hover {
+            border-color: #999;
+        }
+
+        .image-container {
+            position: relative;
+            width: 100%;
+            background: #000;
+        }
+
+        .image-container img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+
+        .image-container canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 10;
+        }
+
+        .image-info {
+            padding: 12px;
+            border-top: 1px solid #eee;
+        }
+
+        .image-index {
+            font-size: 11px;
+            color: #999;
+            margin-bottom: 6px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .detections-count {
+            font-weight: 400;
+            color: #222;
+            margin-bottom: 8px;
+            font-size: 14px;
+        }
+
+        .detections-list {
+            font-size: 13px;
+            color: #666;
+        }
+
+        .detection-item {
+            padding: 3px 0;
+        }
+
+        .confidence-high {
+            color: #27ae60;
+            font-weight: 600;
+        }
+
+        .confidence-medium {
+            color: #f39c12;
+            font-weight: 600;
+        }
+
+        .confidence-low {
+            color: #e74c3c;
+            font-weight: 600;
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin: 40px 0;
+            padding-top: 20px;
+            border-top: 1px solid #ddd;
+        }
+
+        .pagination button {
+            padding: 8px 16px;
+            border: 1px solid #666;
+            background: white;
+            color: #222;
+            cursor: pointer;
+            font-size: 13px;
+            transition: all 0.2s;
+        }
+
+        .pagination button:hover:not(:disabled) {
+            background: #222;
+            color: white;
+        }
+
+        .pagination button:disabled {
+            border-color: #ddd;
+            color: #ccc;
+            cursor: not-allowed;
+        }
+
+        .pagination span {
+            color: #666;
+            font-size: 13px;
+        }
+
+        .load-button {
+            padding: 10px 20px;
+            border: 1px solid #666;
+            background: white;
+            color: #222;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 400;
+            transition: all 0.2s;
+            width: 100%;
+            margin-top: 12px;
+        }
+
+        .load-button:hover {
+            background: #222;
+            color: white;
+        }
+
+        .load-button:disabled {
+            border-color: #ddd;
+            color: #ccc;
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>SAM3 Object Detection Browser</h1>
+            <p class="subtitle">Browse and explore object detection results from Meta's SAM3 model</p>
+            <p class="header-links">Create your own detection dataset with the <a href="https://huggingface.co/datasets/uv-scripts/sam3" target="_blank">SAM3 detection script</a></p>
+        </header>
+
+        <div class="controls">
+            <div class="control-group">
+                <label for="dataset-id">Dataset ID:</label>
+                <input type="text" id="dataset-id" value="davanstrien/newspapers-image-predictions" placeholder="username/dataset-name">
+                <div class="example-datasets">
+                    Examples:
+                    <a href="#" data-dataset="davanstrien/newspapers-image-predictions">photographs</a>
+                    <a href="#" data-dataset="davanstrien/newspapers-illustration-predictions">illustrations</a>
+                </div>
+            </div>
+
+            <div class="control-group">
+                <label for="split">Split:</label>
+                <select id="split">
+                    <option value="train">train</option>
+                    <option value="validation">validation</option>
+                    <option value="test">test</option>
+                </select>
+            </div>
+
+            <div class="control-group">
+                <label for="confidence-threshold">Confidence Threshold: <span id="confidence-value" class="slider-value">0.50</span></label>
+                <div class="slider-container">
+                    <input type="range" id="confidence-threshold" min="0" max="1" step="0.05" value="0.5">
+                </div>
+            </div>
+
+            <div class="control-group">
+                <div class="checkbox-container">
+                    <input type="checkbox" id="only-detections">
+                    <label for="only-detections" style="margin-bottom: 0;">Show only images with detections</label>
+                </div>
+            </div>
+
+            <button class="load-button" id="load-dataset">Load Dataset</button>
+        </div>
+
+        <div id="stats-container"></div>
+        <div id="loading" class="loading" style="display: none;">Loading dataset...</div>
+        <div id="error" class="error" style="display: none;"></div>
+        <div id="image-grid" class="image-grid"></div>
+        <div id="pagination" class="pagination" style="display: none;"></div>
+    </div>
+
+    <script>
+        // Global state
+        let dataset = [];
+        let filteredDataset = [];
+        let currentPage = 0;
+        const itemsPerPage = 12;
+        let confidenceThreshold = 0.5;
+        let showOnlyDetections = false;
+
+        // DOM elements
+        const datasetIdInput = document.getElementById('dataset-id');
+        const splitSelect = document.getElementById('split');
+        const confidenceSlider = document.getElementById('confidence-threshold');
+        const confidenceValue = document.getElementById('confidence-value');
+        const onlyDetectionsCheckbox = document.getElementById('only-detections');
+        const loadButton = document.getElementById('load-dataset');
+        const statsContainer = document.getElementById('stats-container');
+        const loadingDiv = document.getElementById('loading');
+        const errorDiv = document.getElementById('error');
+        const imageGrid = document.getElementById('image-grid');
+        const paginationDiv = document.getElementById('pagination');
+
+        // Initialize state from DOM (in case browser persists checkbox state)
+        showOnlyDetections = onlyDetectionsCheckbox.checked;
+
+        // Event listeners
+        confidenceSlider.addEventListener('input', (e) => {
+            confidenceThreshold = parseFloat(e.target.value);
+            confidenceValue.textContent = confidenceThreshold.toFixed(2);
+            if (dataset.length > 0) {
+                filterAndRender();
+            }
+        });
+
+        onlyDetectionsCheckbox.addEventListener('change', (e) => {
+            showOnlyDetections = e.target.checked;
+            if (dataset.length > 0) {
+                filterAndRender();
+            }
+        });
+
+        loadButton.addEventListener('click', loadDataset);
+
+        // Handle example dataset links
+        document.querySelectorAll('.example-datasets a').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                const datasetId = e.target.getAttribute('data-dataset');
+                datasetIdInput.value = datasetId;
+                loadDataset();
+            });
+        });
+
+        // Load dataset from HuggingFace with progressive rendering
+        async function loadDataset() {
+            const datasetId = datasetIdInput.value.trim();
+            const split = splitSelect.value;
+
+            if (!datasetId) {
+                showError('Please enter a dataset ID');
+                return;
+            }
+
+            loadingDiv.style.display = 'block';
+            errorDiv.style.display = 'none';
+            statsContainer.innerHTML = '';
+            imageGrid.innerHTML = '';
+            paginationDiv.style.display = 'none';
+            loadButton.disabled = true;
+
+            dataset = [];
+            let isLoadingComplete = false;
+
+            try {
+                // Fetch rows progressively and render after each batch
+                let offset = 0;
+                const batchSize = 50; // Smaller batches for faster initial display
+                let hasMore = true;
+                let isFirstBatch = true;
+
+                while (hasMore) {
+                    const url = `https://datasets-server.huggingface.co/rows?dataset=${encodeURIComponent(datasetId)}&config=default&split=${split}&offset=${offset}&length=${batchSize}`;
+                    const response = await fetch(url);
+
+                    if (!response.ok) {
+                        if (offset === 0) {
+                            throw new Error(`Failed to load dataset. Check dataset ID and split name.`);
+                        }
+                        break;
+                    }
+
+                    const data = await response.json();
+
+                    if (!data.rows || data.rows.length === 0) {
+                        hasMore = false;
+                        break;
+                    }
+
+                    // Convert rows to dataset format
+                    const newRows = data.rows.map(item => ({
+                        index: offset + item.row_idx,
+                        image: item.row.image, // Keep as object or string
+                        objects: item.row.objects || { bbox: [], category: [], score: [] },
+                        ...item.row
+                    }));
+
+                    dataset = dataset.concat(newRows);
+                    offset += data.rows.length;
+
+                    // Render immediately after first batch
+                    if (isFirstBatch) {
+                        filterAndRender();
+                        loadingDiv.textContent = `Loading more... (${dataset.length} rows loaded)`;
+                        isFirstBatch = false;
+                    } else {
+                        // Update view and stats as we load more
+                        filterDataset();
+                        renderStats();
+                        // Only re-render current page if we're on page 1 (to avoid disrupting user)
+                        if (currentPage === 0) {
+                            renderPage();
+                            renderPagination();
+                        }
+                        loadingDiv.textContent = `Loading more... (${dataset.length} rows loaded)`;
+                    }
+
+                    // Stop if we got fewer rows than requested (end of dataset)
+                    if (data.rows.length < batchSize) {
+                        hasMore = false;
+                    }
+
+                    // Limit to prevent overwhelming the browser
+                    if (dataset.length >= 10000) {
+                        console.log('Loaded 10,000 rows, stopping to prevent performance issues');
+                        hasMore = false;
+                    }
+                }
+
+                if (dataset.length === 0) {
+                    throw new Error('No data found in dataset');
+                }
+
+                // Final update
+                isLoadingComplete = true;
+                loadingDiv.style.display = 'none';
+                filterAndRender();
+
+            } catch (error) {
+                loadingDiv.style.display = 'none';
+                showError(`Failed to load dataset: ${error.message}`);
+            } finally {
+                loadButton.disabled = false;
+                if (isLoadingComplete) {
+                    loadingDiv.textContent = 'Loading dataset...';
+                }
+            }
+        }
+
+        // Filter dataset based on current filters
+        function filterDataset() {
+            filteredDataset = dataset.filter(item => {
+                const objects = item.objects || { bbox: [], category: [], score: [] };
+
+                // Filter by confidence threshold
+                const validDetections = objects.score.filter(score => score >= confidenceThreshold);
+
+                // If "only detections" is checked, filter out images without detections
+                if (showOnlyDetections && validDetections.length === 0) {
+                    return false;
+                }
+
+                return true;
+            });
+        }
+
+        // Filter and render
+        function filterAndRender() {
+            filterDataset();
+            currentPage = 0;
+            renderStats();
+            renderPage();
+            renderPagination();
+        }
+
+        // Render statistics
+        function renderStats() {
+            // Calculate stats from FILTERED dataset for consistency
+            const totalImages = filteredDataset.length;
+            const totalDetections = filteredDataset.reduce((sum, item) => {
+                const objects = item.objects || { bbox: [], category: [], score: [] };
+                return sum + objects.score.filter(score => score >= confidenceThreshold).length;
+            }, 0);
+
+            const imagesWithDetections = filteredDataset.filter(item => {
+                const objects = item.objects || { bbox: [], category: [], score: [] };
+                return objects.score.some(score => score >= confidenceThreshold);
+            }).length;
+
+            const avgDetections = totalImages > 0 ? (totalDetections / totalImages).toFixed(2) : 0;
+
+            statsContainer.innerHTML = `
+                <div class="stats">
+                    <div class="stats-grid">
+                        <div class="stat-item">
+                            <div class="stat-value">${filteredDataset.length}</div>
+                            <div class="stat-label">Filtered Images</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value">${imagesWithDetections}</div>
+                            <div class="stat-label">Images with Detections</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value">${totalDetections}</div>
+                            <div class="stat-label">Total Detections</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value">${avgDetections}</div>
+                            <div class="stat-label">Avg per Image</div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        }
+
+        // Render current page
+        function renderPage() {
+            const start = currentPage * itemsPerPage;
+            const end = start + itemsPerPage;
+            const pageItems = filteredDataset.slice(start, end);
+
+            imageGrid.innerHTML = pageItems.map(item => {
+                const objects = item.objects || { bbox: [], category: [], score: [] };
+                const validDetections = objects.score
+                    .map((score, idx) => ({ score, idx }))
+                    .filter(({ score }) => score >= confidenceThreshold);
+
+                // Extract image URL properly (handle both object with src and direct string)
+                const imageUrl = typeof item.image === 'object' ? item.image?.src : item.image;
+
+                return `
+                    <div class="image-card">
+                        <div class="image-container" id="container-${item.index}">
+                            <img src="${imageUrl}" alt="Image ${item.index}" crossorigin="anonymous" onload="drawBoundingBoxes(${item.index})">
+                            <canvas id="canvas-${item.index}"></canvas>
+                        </div>
+                        <div class="image-info">
+                            <div class="image-index">Image #${item.index}</div>
+                            <div class="detections-count">${validDetections.length} detection(s)</div>
+                            <div class="detections-list">
+                                ${validDetections.map(({ score, idx }) => {
+                                    const confidenceClass = score >= 0.7 ? 'confidence-high' : score >= 0.4 ? 'confidence-medium' : 'confidence-low';
+                                    const category = objects.category && objects.category[idx] !== undefined ? objects.category[idx] : 0;
+                                    return `
+                                        <div class="detection-item">
+                                            <span class="${confidenceClass}">${(score * 100).toFixed(1)}%</span>
+                                            confidence
+                                        </div>
+                                    `;
+                                }).join('')}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+        }
+
+        // Draw bounding boxes on canvas
+        window.drawBoundingBoxes = function(itemIndex) {
+            const item = dataset.find(d => d.index === itemIndex);
+            if (!item) return;
+
+            const container = document.getElementById(`container-${itemIndex}`);
+            const canvas = document.getElementById(`canvas-${itemIndex}`);
+            const img = container.querySelector('img');
+
+            if (!canvas || !img) return;
+
+            // Set canvas size to match image
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+
+            const ctx = canvas.getContext('2d');
+
+            // Clear canvas before drawing
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            const objects = item.objects || { bbox: [], category: [], score: [] };
+
+            // Debug: log drawing info
+            const validBoxes = objects.bbox.filter((_, idx) => objects.score[idx] >= confidenceThreshold);
+            if (validBoxes.length > 0) {
+                console.log(`Drawing ${validBoxes.length} boxes for image #${itemIndex}`);
+            }
+
+            // Draw each bounding box
+            objects.bbox.forEach((bbox, idx) => {
+                const score = objects.score[idx];
+                if (score < confidenceThreshold) return;
+
+                const [x, y, width, height] = bbox;
+
+                // Debug: log bbox coordinates
+                console.log(`  Box ${idx}: [${x}, ${y}, ${width}, ${height}] score: ${score}`);
+
+                // Choose color based on confidence
+                let color;
+                if (score >= 0.7) {
+                    color = '#27ae60'; // Green
+                } else if (score >= 0.4) {
+                    color = '#f39c12'; // Orange
+                } else {
+                    color = '#e74c3c'; // Red
+                }
+
+                // Draw rectangle
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 3;
+                ctx.strokeRect(x, y, width, height);
+
+                console.log(`  Drew box at [${x}, ${y}] size [${width}, ${height}] in ${color}`);
+
+                // Draw label background
+                const label = `${(score * 100).toFixed(1)}%`;
+                ctx.font = 'bold 16px Arial';
+                const textWidth = ctx.measureText(label).width;
+                const textHeight = 20;
+
+                ctx.fillStyle = color;
+                ctx.fillRect(x, y - textHeight - 4, textWidth + 10, textHeight + 4);
+
+                // Draw label text
+                ctx.fillStyle = 'white';
+                ctx.fillText(label, x + 5, y - 8);
+            });
+        };
+
+        // Render pagination
+        function renderPagination() {
+            const totalPages = Math.ceil(filteredDataset.length / itemsPerPage);
+
+            if (totalPages <= 1) {
+                paginationDiv.style.display = 'none';
+                return;
+            }
+
+            paginationDiv.style.display = 'flex';
+            paginationDiv.innerHTML = `
+                <button id="prev-btn" ${currentPage === 0 ? 'disabled' : ''}>Previous</button>
+                <span>Page ${currentPage + 1} of ${totalPages}</span>
+                <button id="next-btn" ${currentPage >= totalPages - 1 ? 'disabled' : ''}>Next</button>
+            `;
+
+            document.getElementById('prev-btn').addEventListener('click', () => {
+                if (currentPage > 0) {
+                    currentPage--;
+                    renderPage();
+                    renderPagination();
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            });
+
+            document.getElementById('next-btn').addEventListener('click', () => {
+                if (currentPage < totalPages - 1) {
+                    currentPage++;
+                    renderPage();
+                    renderPagination();
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            });
+        }
+
+        // Show error message
+        function showError(message) {
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+        }
+
+        // Auto-load default dataset on page load
+        window.addEventListener('load', () => {
+            loadDataset();
+        });
+    </script>
+</body>
 </html>

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}