Spaces:

uv-scripts
/

sam3-detection-browser

Running

davanstrien HF Staff Claude Opus 4.6 (1M context) commited on 20 days ago

Commit

867ce05

1 Parent(s): a3f75c5

Support segmentation mask overlays alongside detection boxes

Auto-detects dataset format (objects column vs segmentation_map column)
and renders accordingly. Segmentation masks are colorized per-instance
and overlaid with transparency. All existing detection functionality
preserved.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Files changed (1) hide show

index.html +235 -61

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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;
@@ -79,6 +79,28 @@
             border-bottom-color: #222;
         }
         .controls {
             border: 1px solid #ddd;
             padding: 20px;
@@ -220,12 +242,23 @@
             background: #000;
         }
-        .image-container img {
             width: 100%;
             height: auto;
             display: block;
         }
         .image-container canvas {
             position: absolute;
             top: 0;
@@ -344,9 +377,9 @@
 <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">
@@ -354,9 +387,11 @@
                 <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>
@@ -401,6 +436,20 @@
         const itemsPerPage = 12;
         let confidenceThreshold = 0.5;
         let showOnlyDetections = false;
         // DOM elements
         const datasetIdInput = document.getElementById('dataset-id');
@@ -414,8 +463,9 @@
         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
@@ -446,6 +496,28 @@
             });
         });
         // Load dataset from HuggingFace with progressive rendering
         async function loadDataset() {
             const datasetId = datasetIdInput.value.trim();
@@ -462,14 +534,14 @@
             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;
@@ -491,10 +563,17 @@
                         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
                     }));
@@ -502,16 +581,13 @@
                     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();
@@ -519,14 +595,11 @@
                         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;
                     }
                 }
@@ -535,7 +608,6 @@
                     throw new Error('No data found in dataset');
                 }
-                // Final update
                 isLoadingComplete = true;
                 loadingDiv.style.display = 'none';
                 filterAndRender();
@@ -554,16 +626,11 @@
         // 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;
             });
         }
@@ -579,20 +646,19 @@
         // 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">
@@ -602,11 +668,11 @@
                         </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>
@@ -624,27 +690,37 @@
             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>
@@ -659,62 +735,161 @@
             }).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;
@@ -723,7 +898,6 @@
                 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);
             });

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SAM3 Results Browser</title>
     <style>
         * {
             margin: 0;
             border-bottom-color: #222;
         }
+        .mode-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-left: 8px;
+            vertical-align: middle;
+        }
+        .mode-badge.detection {
+            background: #e8f5e9;
+            color: #2e7d32;
+        }
+        .mode-badge.segmentation {
+            background: #e3f2fd;
+            color: #1565c0;
+        }
         .controls {
             border: 1px solid #ddd;
             padding: 20px;
             background: #000;
         }
+        .image-container img.source-image {
             width: 100%;
             height: auto;
             display: block;
         }
+        .image-container .mask-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 5;
+            mix-blend-mode: normal;
+        }
         .image-container canvas {
             position: absolute;
             top: 0;
 <body>
     <div class="container">
         <header>
+            <h1>SAM3 Results Browser <span id="mode-badge" class="mode-badge" style="display:none;"></span></h1>
+            <p class="subtitle">Browse object detection and segmentation results from Meta's SAM3 model</p>
+            <p class="header-links">Create your own results with the <a href="https://huggingface.co/datasets/uv-scripts/sam3" target="_blank">SAM3 scripts</a></p>
         </header>
         <div class="controls">
                 <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">
+                    Detection:
                     <a href="#" data-dataset="davanstrien/newspapers-image-predictions">photographs</a>
                     <a href="#" data-dataset="davanstrien/newspapers-illustration-predictions">illustrations</a>
+                    &nbsp;&nbsp;Segmentation:
+                    <a href="#" data-dataset="davanstrien/sam3-segment-deer-test">deer masks</a>
                 </div>
             </div>
         const itemsPerPage = 12;
         let confidenceThreshold = 0.5;
         let showOnlyDetections = false;
+        // 'detection' = objects column with bbox/score, 'segmentation' = segmentation_map column
+        let datasetMode = 'detection';
+        // Mask overlay colors (RGBA)
+        const MASK_COLORS = [
+            [231, 76, 60],    // red
+            [46, 204, 113],   // green
+            [52, 152, 219],   // blue
+            [241, 196, 15],   // yellow
+            [155, 89, 182],   // purple
+            [230, 126, 34],   // orange
+            [26, 188, 156],   // teal
+            [236, 112, 99],   // salmon
+        ];
         // DOM elements
         const datasetIdInput = document.getElementById('dataset-id');
         const errorDiv = document.getElementById('error');
         const imageGrid = document.getElementById('image-grid');
         const paginationDiv = document.getElementById('pagination');
+        const modeBadge = document.getElementById('mode-badge');
+        // Initialize state from DOM
         showOnlyDetections = onlyDetectionsCheckbox.checked;
         // Event listeners
             });
         });
+        // Get scores for an item regardless of dataset mode
+        function getScores(item) {
+            if (datasetMode === 'segmentation') {
+                return item.scores || [];
+            }
+            const objects = item.objects || { bbox: [], category: [], score: [] };
+            return objects.score || [];
+        }
+        // Get number of detections above threshold
+        function getDetectionCount(item) {
+            return getScores(item).filter(s => s >= confidenceThreshold).length;
+        }
+        // Detect dataset mode from first row
+        function detectMode(row) {
+            if (row.segmentation_map !== undefined) {
+                return 'segmentation';
+            }
+            return 'detection';
+        }
         // Load dataset from HuggingFace with progressive rendering
         async function loadDataset() {
             const datasetId = datasetIdInput.value.trim();
             imageGrid.innerHTML = '';
             paginationDiv.style.display = 'none';
             loadButton.disabled = true;
+            modeBadge.style.display = 'none';
             dataset = [];
             let isLoadingComplete = false;
             try {
                 let offset = 0;
+                const batchSize = 50;
                 let hasMore = true;
                 let isFirstBatch = true;
                         break;
                     }
+                    // Detect mode from first row
+                    if (isFirstBatch) {
+                        datasetMode = detectMode(data.rows[0].row);
+                        modeBadge.textContent = datasetMode;
+                        modeBadge.className = `mode-badge ${datasetMode}`;
+                        modeBadge.style.display = 'inline-block';
+                    }
                     const newRows = data.rows.map(item => ({
                         index: offset + item.row_idx,
+                        image: item.row.image,
                         objects: item.row.objects || { bbox: [], category: [], score: [] },
                         ...item.row
                     }));
                     dataset = dataset.concat(newRows);
                     offset += data.rows.length;
                     if (isFirstBatch) {
                         filterAndRender();
                         loadingDiv.textContent = `Loading more... (${dataset.length} rows loaded)`;
                         isFirstBatch = false;
                     } else {
                         filterDataset();
                         renderStats();
                         if (currentPage === 0) {
                             renderPage();
                             renderPagination();
                         loadingDiv.textContent = `Loading more... (${dataset.length} rows loaded)`;
                     }
                     if (data.rows.length < batchSize) {
                         hasMore = false;
                     }
                     if (dataset.length >= 10000) {
                         hasMore = false;
                     }
                 }
                     throw new Error('No data found in dataset');
                 }
                 isLoadingComplete = true;
                 loadingDiv.style.display = 'none';
                 filterAndRender();
         // Filter dataset based on current filters
         function filterDataset() {
             filteredDataset = dataset.filter(item => {
+                const scores = getScores(item);
+                const validDetections = scores.filter(score => score >= confidenceThreshold);
                 if (showOnlyDetections && validDetections.length === 0) {
                     return false;
                 }
                 return true;
             });
         }
         // Render statistics
         function renderStats() {
             const totalImages = filteredDataset.length;
             const totalDetections = filteredDataset.reduce((sum, item) => {
+                return sum + getDetectionCount(item);
             }, 0);
             const imagesWithDetections = filteredDataset.filter(item => {
+                return getDetectionCount(item) > 0;
             }).length;
             const avgDetections = totalImages > 0 ? (totalDetections / totalImages).toFixed(2) : 0;
+            const modeLabel = datasetMode === 'segmentation' ? 'Instances' : 'Detections';
             statsContainer.innerHTML = `
                 <div class="stats">
                     <div class="stats-grid">
                         </div>
                         <div class="stat-item">
                             <div class="stat-value">${imagesWithDetections}</div>
+                            <div class="stat-label">Images with ${modeLabel}</div>
                         </div>
                         <div class="stat-item">
                             <div class="stat-value">${totalDetections}</div>
+                            <div class="stat-label">Total ${modeLabel}</div>
                         </div>
                         <div class="stat-item">
                             <div class="stat-value">${avgDetections}</div>
             const pageItems = filteredDataset.slice(start, end);
             imageGrid.innerHTML = pageItems.map(item => {
+                const scores = getScores(item);
+                const validDetections = scores
                     .map((score, idx) => ({ score, idx }))
                     .filter(({ score }) => score >= confidenceThreshold);
                 const imageUrl = typeof item.image === 'object' ? item.image?.src : item.image;
+                // For segmentation, get mask image URL
+                let maskUrl = '';
+                if (datasetMode === 'segmentation' && item.segmentation_map) {
+                    maskUrl = typeof item.segmentation_map === 'object' ? item.segmentation_map?.src : item.segmentation_map;
+                }
+                const countLabel = datasetMode === 'segmentation' ? 'instance(s)' : 'detection(s)';
                 return `
                     <div class="image-card">
                         <div class="image-container" id="container-${item.index}">
+                            <img class="source-image" src="${imageUrl}" alt="Image ${item.index}" crossorigin="anonymous"
+                                 onload="onImageLoaded(${item.index})">
+                            ${maskUrl ? `<img class="mask-overlay" src="${maskUrl}" crossorigin="anonymous"
+                                 data-mask-url="${maskUrl}" style="display:none;"
+                                 onload="onMaskLoaded(${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} ${countLabel}</div>
                             <div class="detections-list">
                                 ${validDetections.map(({ score, idx }) => {
                                     const confidenceClass = score >= 0.7 ? 'confidence-high' : score >= 0.4 ? 'confidence-medium' : 'confidence-low';
                                     return `
                                         <div class="detection-item">
                                             <span class="${confidenceClass}">${(score * 100).toFixed(1)}%</span>
             }).join('');
         }
+        // Called when the source image loads
+        window.onImageLoaded = function(itemIndex) {
+            if (datasetMode === 'detection') {
+                drawBoundingBoxes(itemIndex);
+            } else {
+                // For segmentation, draw boxes if present; mask overlay handled separately
+                drawSegmentationBoxes(itemIndex);
+            }
+        };
+        // Called when the mask image loads - colorize and overlay it
+        window.onMaskLoaded = function(itemIndex) {
+            const container = document.getElementById(`container-${itemIndex}`);
+            const canvas = document.getElementById(`canvas-${itemIndex}`);
+            const sourceImg = container.querySelector('img.source-image');
+            const maskImg = container.querySelector('img.mask-overlay');
+            if (!canvas || !sourceImg || !maskImg) return;
+            canvas.width = sourceImg.naturalWidth;
+            canvas.height = sourceImg.naturalHeight;
+            const ctx = canvas.getContext('2d');
+            // Draw the mask onto a temporary canvas to read pixel data
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = maskImg.naturalWidth;
+            tempCanvas.height = maskImg.naturalHeight;
+            const tempCtx = tempCanvas.getContext('2d');
+            tempCtx.drawImage(maskImg, 0, 0);
+            let maskData;
+            try {
+                maskData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
+            } catch (e) {
+                console.warn('Cannot read mask pixels (CORS):', e);
+                return;
+            }
+            // Create colored overlay - each unique non-zero pixel value gets a color
+            const overlay = ctx.createImageData(canvas.width, canvas.height);
+            // Scale factors if mask and source image differ in size
+            const scaleX = tempCanvas.width / canvas.width;
+            const scaleY = tempCanvas.height / canvas.height;
+            for (let y = 0; y < canvas.height; y++) {
+                for (let x = 0; x < canvas.width; x++) {
+                    const mx = Math.floor(x * scaleX);
+                    const my = Math.floor(y * scaleY);
+                    const mi = (my * tempCanvas.width + mx) * 4;
+                    // Segmentation maps are grayscale: R channel has the instance ID
+                    const instanceId = maskData.data[mi];
+                    const oi = (y * canvas.width + x) * 4;
+                    if (instanceId > 0) {
+                        const color = MASK_COLORS[(instanceId - 1) % MASK_COLORS.length];
+                        overlay.data[oi] = color[0];
+                        overlay.data[oi + 1] = color[1];
+                        overlay.data[oi + 2] = color[2];
+                        overlay.data[oi + 3] = 100; // semi-transparent
+                    }
+                }
+            }
+            ctx.putImageData(overlay, 0, 0);
+            // Now draw bounding boxes on top if present
+            drawSegmentationBoxes(itemIndex);
+        };
+        // Draw bounding boxes for detection datasets (objects column)
         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.source-image');
             if (!canvas || !img) return;
             canvas.width = img.naturalWidth;
             canvas.height = img.naturalHeight;
             const ctx = canvas.getContext('2d');
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             const objects = item.objects || { bbox: [], category: [], score: [] };
             objects.bbox.forEach((bbox, idx) => {
                 const score = objects.score[idx];
                 if (score < confidenceThreshold) return;
                 const [x, y, width, height] = bbox;
                 let color;
                 if (score >= 0.7) {
+                    color = '#27ae60';
                 } else if (score >= 0.4) {
+                    color = '#f39c12';
                 } else {
+                    color = '#e74c3c';
                 }
                 ctx.strokeStyle = color;
                 ctx.lineWidth = 3;
                 ctx.strokeRect(x, y, width, height);
+                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);
+                ctx.fillStyle = 'white';
+                ctx.fillText(label, x + 5, y - 8);
+            });
+        };
+        // Draw bounding boxes for segmentation datasets (boxes column at top level)
+        window.drawSegmentationBoxes = function(itemIndex) {
+            const item = dataset.find(d => d.index === itemIndex);
+            if (!item || !item.boxes) return;
+            const container = document.getElementById(`container-${itemIndex}`);
+            const canvas = document.getElementById(`canvas-${itemIndex}`);
+            const img = container.querySelector('img.source-image');
+            if (!canvas || !img) return;
+            // Don't clear - mask overlay may already be drawn
+            const ctx = canvas.getContext('2d');
+            const scores = item.scores || [];
+            item.boxes.forEach((bbox, idx) => {
+                const score = scores[idx] !== undefined ? scores[idx] : 1.0;
+                if (score < confidenceThreshold) return;
+                const [x, y, width, height] = bbox;
+                let color;
+                if (score >= 0.7) {
+                    color = '#27ae60';
+                } else if (score >= 0.4) {
+                    color = '#f39c12';
+                } else {
+                    color = '#e74c3c';
+                }
+                ctx.strokeStyle = color;
+                ctx.lineWidth = 3;
+                ctx.strokeRect(x, y, width, height);
                 const label = `${(score * 100).toFixed(1)}%`;
                 ctx.font = 'bold 16px Arial';
                 const textWidth = ctx.measureText(label).width;
                 ctx.fillStyle = color;
                 ctx.fillRect(x, y - textHeight - 4, textWidth + 10, textHeight + 4);
                 ctx.fillStyle = 'white';
                 ctx.fillText(label, x + 5, y - 8);
             });