Spaces:

mrdbourke
/

bounding-box-demo

Running

App Files Files Community

mrdbourke commited on Nov 12, 2024

Commit

e9ff155

verified ·

1 Parent(s): 5cf0578

Update index.html

Browse files

Files changed (1) hide show

index.html +556 -17

index.html CHANGED Viewed

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

+<!DOCTYPE html>
 <html>
+<head>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: system-ui;
+            background-color: #f5f5f5;
+            min-height: 100vh;
+            padding: 1rem; /* Reduced padding for a more compact layout */
+        }
+        .page-title {
+            text-align: center;
+            padding: 0.5rem 0;
+            color: #333;
+            margin-bottom: 1.5rem; /* Reduced margin for compactness */
+            font-size: 1.8rem;
+        }
+        .main-container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        /* Top Section: Image and Controls Side by Side */
+        .top-section {
+            display: flex;
+            gap: 20px; /* Slightly increased gap for better separation */
+            margin-bottom: 30px; /* Increased margin to separate from the table */
+        }
+        /* Image Section */
+        .image-section {
+            flex: 0 0 640px; /* Fixed width for image container */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .image-container {
+            position: relative;
+            width: 100%;
+        }
+        #image {
+            display: block;
+            width: 100%;
+            height: auto;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        #canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            cursor: crosshair;
+        }
+        .labels-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            width: 100%;
+            height: 100%;
+        }
+        /* Controls Section */
+        .controls-section {
+            flex: 1;
+            background: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-direction: column;
+        }
+        .coordinates {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+        }
+        .format-controls {
+            margin-bottom: 20px;
+        }
+        .format-controls h2 {
+            margin-bottom: 10px;
+            color: #333;
+            font-size: 1.2rem;
+        }
+        .radio-group {
+            margin-bottom: 15px; /* Reduced margin */
+            padding: 10px; /* Reduced padding */
+            background: #f9f9f9;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+        }
+        .radio-option {
+            margin-bottom: 8px; /* Reduced margin */
+        }
+        .radio-option label {
+            margin-left: 5px;
+            color: #555;
+        }
+        .format-controls h2:last-of-type {
+            margin-top: 20px;
+        }
+        .format {
+            margin-bottom: 15px; /* Reduced margin */
+        }
+        .format-title {
+            font-weight: bold;
+            margin-bottom: 5px; /* Reduced margin */
+            color: #333;
+        }
+        .coords {
+            font-family: monospace;
+            background: #f9f9f9;
+            padding: 8px; /* Reduced padding */
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            min-height: 20px; /* Reduced min-height */
+        }
+        .clear-button-container {
+            display: flex;
+            justify-content: center;
+            padding-top: 10px; /* Reduced padding */
+        }
+        .clear-button {
+            background-color: #f44336;
+            color: white;
+            border: none;
+            padding: 8px 16px; /* Reduced padding */
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.2s;
+        }
+        .clear-button:hover {
+            background-color: #d32f2f;
+        }
+        .label {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.7);
+            color: #fff;
+            padding: 3px 5px; /* Reduced padding */
+            border-radius: 3px;
+            font-size: 11px; /* Reduced font size */
+            pointer-events: none;
+            white-space: nowrap;
+        }
+        /* Bottom Section: Model Explanation Table */
+        .bottom-section {
+            background: #fff;
+            padding: 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            overflow-x: auto;
+        }
+        .model-explanation table {
+            width: 100%;
+            border-collapse: collapse;
+            background: white;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            overflow: hidden;
+            font-size: 0.9rem; /* Slightly smaller font for compactness */
+        }
+        .model-explanation th,
+        .model-explanation td {
+            border: 1px solid #ddd;
+            padding: 8px; /* Further reduced padding */
+            text-align: left;
+        }
+        .model-explanation th {
+            background-color: #f2f2f2;
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .top-section {
+                flex-direction: column;
+            }
+            .image-section,
+            .controls-section,
+            .bottom-section {
+                width: 100%;
+                max-width: 100%;
+                margin: 0 auto;
+            }
+            .image-section {
+                flex: none;
+            }
+            .controls-section {
+                flex: none;
+            }
+        }
+        /* Ensure the entire layout fits within typical laptop screen heights */
+        @media (max-height: 900px) {
+            body {
+                overflow: auto;
+            }
+        }
+    </style>
+</head>
+<body>
+    <h1 class="page-title">Bounding Box Coordinate Tool</h1>
+    <div class="main-container">
+        <!-- Top Section: Image and Controls -->
+        <div class="top-section">
+            <!-- Image Section -->
+            <div class="image-section">
+                <div class="image-container">
+                    <img id="image" src="demo-image.jpg" alt="Image created by Flux Pro with prompt 'an image of a living room with plenty of different furniture objects'" width="640">
+                    <canvas id="canvas"></canvas>
+                    <div id="labels-container" class="labels-container"></div>
+                </div>
+            </div>
+            <!-- Controls Section -->
+            <div class="controls-section">
+                <div class="coordinates">
+                    <div class="format-controls">
+                        <h2>Display Format</h2>
+                        <div class="radio-group">
+                            <div class="radio-option">
+                                <input type="radio" id="xyxy-radio" name="format" value="xyxy" checked>
+                                <label for="xyxy-radio">XYXY (x1, y1, x2, y2)</label>
+                            </div>
+                            <div class="radio-option">
+                                <input type="radio" id="xywh-radio" name="format" value="xywh">
+                                <label for="xywh-radio">XYWH (x, y, width, height)</label>
+                            </div>
+                            <div class="radio-option">
+                                <input type="radio" id="normalized-radio" name="format" value="normalized">
+                                <label for="normalized-radio">Normalized XYWH (0-1)</label>
+                            </div>
+                            <div class="radio-option">
+                                <input type="radio" id="center-radio" name="format" value="center">
+                                <label for="center-radio">Center XYWH (cx, cy, w, h)</label>
+                            </div>
+                        </div>
+                        <h2>Bounding Box Coordinates</h2>
+                        <div class="format">
+                            <div class="format-title">XYXY (x₁, y₁, x₂, y₂)</div>
+                            <div id="xyxy" class="coords">No box drawn</div>
+                        </div>
+                        <div class="format">
+                            <div class="format-title">XYWH (x, y, width, height)</div>
+                            <div id="xywh" class="coords">No box drawn</div>
+                        </div>
+                        <div class="format">
+                            <div class="format-title">Normalized XYWH (0-1)</div>
+                            <div id="normalized" class="coords">No box drawn</div>
+                        </div>
+                        <div class="format">
+                            <div class="format-title">Center XYWH (cx, cy, w, h)</div>
+                            <div id="center" class="coords">No box drawn</div>
+                        </div>
+                    </div>
+                    <div class="clear-button-container">
+                        <button id="clear-button" class="clear-button">Clear Box</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Bottom Section: Model Explanation Table -->
+        <div class="bottom-section">
+            <div class="model-explanation">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>Model</th>
+                            <th>Summary</th>
+                            <th>Bounding Box Format</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><strong>YOLO</strong></td>
+                            <td>Real-time object detection system. Training format uses normalized coordinates for better generalization across different image sizes.</td>
+                            <td><strong>Normalized XYWH</strong> (x, y, w, h) in range [0,1]</td>
+                        </tr>
+                        <tr>
+                            <td><strong>Faster R-CNN</strong></td>
+                            <td>Region proposal network based detection. Typically uses absolute coordinates during inference, but may use normalized coordinates during training.</td>
+                            <td><strong>XYXY</strong> (x₁, y₁, x₂, y₂) or normalized coordinates</td>
+                        </tr>
+                        <tr>
+                            <td><strong>SSD</strong></td>
+                            <td>Single Shot MultiBox Detector uses normalized coordinates for anchor boxes and predictions to handle multiple scales efficiently.</td>
+                            <td><strong>Normalized XYWH</strong> (x, y, w, h) in range [0,1]</td>
+                        </tr>
+                        <tr>
+                            <td><strong>RetinaNet</strong></td>
+                            <td>Dense object detector with focal loss. Uses normalized coordinates for anchor boxes and predictions.</td>
+                            <td><strong>Normalized XYWH</strong> (x, y, w, h) in range [0,1]</td>
+                        </tr>
+                        <tr>
+                            <td><strong>CornerNet</strong></td>
+                            <td>Anchor-free detector that predicts keypoint heatmaps. Uses normalized coordinates for better scale invariance.</td>
+                            <td><strong>Normalized Corners</strong> (x₁, y₁, x₂, y₂) in range [0,1]</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+    <script>
+        const image = document.getElementById('image');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const labelsContainer = document.getElementById('labels-container');
+        let isDrawing = false;
+        let startX = 0;
+        let startY = 0;
+        let lastCoords = null;
+        let labelElements = [];
+        function initCanvas() {
+            canvas.width = image.width;
+            canvas.height = image.height;
+            canvas.style.width = image.width + 'px';
+            canvas.style.height = image.height + 'px';
+            labelsContainer.style.width = image.width + 'px';
+            labelsContainer.style.height = image.height + 'px';
+        }
+        if (image.complete) {
+            initCanvas();
+        } else {
+            image.onload = initCanvas;
+        }
+        function clearCanvas() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            clearLabels();
+        }
+        function clearLabels() {
+            labelElements.forEach(label => labelsContainer.removeChild(label));
+            labelElements = [];
+        }
+        function createLabel(text, x, y, positionClass) {
+            const label = document.createElement('div');
+            label.classList.add('label', positionClass);
+            label.textContent = text;
+            label.style.left = `${x}px`;
+            label.style.top = `${y}px`;
+            const labelRect = label.getBoundingClientRect();
+            const containerRect = labelsContainer.getBoundingClientRect();
+            label.style.visibility = 'hidden';
+            labelsContainer.appendChild(label);
+            const tempRect = label.getBoundingClientRect();
+            label.style.visibility = 'visible';
+            if (x + tempRect.width > containerRect.width) {
+                label.style.left = `${containerRect.width - tempRect.width - 5}px`;
+            }
+            if (y + tempRect.height > containerRect.height) {
+                label.style.top = `${containerRect.height - tempRect.height - 5}px`;
+            }
+            labelsContainer.appendChild(label);
+            labelElements.push(label);
+        }
+        function drawBox(x1, y1, x2, y2) {
+            clearCanvas();
+            ctx.strokeStyle = '#00ff00';
+            ctx.lineWidth = 2;
+            const width = x2 - x1;
+            const height = y2 - y1;
+            ctx.strokeRect(x1, y1, width, height);
+            createLabels(x1, y1, x2, y2);
+            lastCoords = { x1, y1, x2, y2 };
+        }
+        function createLabels(x1, y1, x2, y2) {
+            const width = x2 - x1;
+            const height = y2 - y1;
+            const format = document.querySelector('input[name="format"]:checked').value;
+            let labels = [];
+            switch(format) {
+                case 'xyxy':
+                    labels = [
+                        { text: `(${Math.round(x1)}, ${Math.round(y1)})`, x: x1, y: y1, position: 'top-left' },
+                        { text: `(${Math.round(x2)}, ${Math.round(y2)})`, x: x2, y: y2, position: 'bottom-right' }
+                    ];
+                    break;
+                case 'xywh':
+                    labels = [
+                        { text: `x: ${Math.round(x1)}, y: ${Math.round(y1)}`, x: x1, y: y1, position: 'top-left' },
+                        { text: `w: ${Math.round(width)}, h: ${Math.round(height)}`, x: x1, y: y1 - 15, position: 'top-left' }
+                    ];
+                    break;
+                case 'normalized':
+                    const normalizedX = (x1 / canvas.width).toFixed(3);
+                    const normalizedY = (y1 / canvas.height).toFixed(3);
+                    const normalizedW = (width / canvas.width).toFixed(3);
+                    const normalizedH = (height / canvas.height).toFixed(3);
+                    labels = [
+                        { text: `x: ${normalizedX}, y: ${normalizedY}`, x: x1, y: y1, position: 'top-left' },
+                        { text: `w: ${normalizedW}, h: ${normalizedH}`, x: x1, y: y1 - 15, position: 'top-left' }
+                    ];
+                    break;
+                case 'center':
+                    const centerX = Math.round(x1 + width / 2);
+                    const centerY = Math.round(y1 + height / 2);
+                    labels = [
+                        { text: `cx: ${centerX}, cy: ${centerY}`, x: centerX, y: centerY, position: 'top-left' },
+                        { text: `w: ${Math.round(width)}, h: ${Math.round(height)}`, x: x1, y: y1 - 15, position: 'top-left' }
+                    ];
+                    break;
+            }
+            labels.forEach(label => {
+                createLabel(label.text, label.x, label.y, label.position);
+            });
+        }
+        function updateCoordinates(x1, y1, x2, y2) {
+            if (x1 === null || y1 === null || x2 === null || y2 === null) {
+                document.getElementById('xyxy').textContent = 'No box drawn';
+                document.getElementById('xywh').textContent = 'No box drawn';
+                document.getElementById('normalized').textContent = 'No box drawn';
+                document.getElementById('center').textContent = 'No box drawn';
+                return;
+            }
+            const width = x2 - x1;
+            const height = y2 - y1;
+            document.getElementById('xyxy').textContent =
+                `[${Math.round(x1)}, ${Math.round(y1)}, ${Math.round(x2)}, ${Math.round(y2)}]`;
+            document.getElementById('xywh').textContent =
+                `[${Math.round(x1)}, ${Math.round(y1)}, ${Math.round(width)}, ${Math.round(height)}]`;
+            const normalizedX = (x1 / canvas.width).toFixed(3);
+            const normalizedY = (y1 / canvas.height).toFixed(3);
+            const normalizedW = (width / canvas.width).toFixed(3);
+            const normalizedH = (height / canvas.height).toFixed(3);
+            document.getElementById('normalized').textContent =
+                `[${normalizedX}, ${normalizedY}, ${normalizedW}, ${normalizedH}]`;
+            const centerX = x1 + width / 2;
+            const centerY = y1 + height / 2;
+            document.getElementById('center').textContent =
+                `[${Math.round(centerX)}, ${Math.round(centerY)}, ${Math.round(width)}, ${Math.round(height)}]`;
+        }
+        document.querySelectorAll('input[name="format"]').forEach(radio => {
+            radio.addEventListener('change', () => {
+                if (lastCoords) {
+                    drawBox(lastCoords.x1, lastCoords.y1, lastCoords.x2, lastCoords.y2);
+                    updateCoordinates(lastCoords.x1, lastCoords.y1, lastCoords.x2, lastCoords.y2);
+                }
+            });
+        });
+        canvas.addEventListener('mousedown', (e) => {
+            isDrawing = true;
+            const rect = canvas.getBoundingClientRect();
+            startX = e.clientX - rect.left;
+            startY = e.clientY - rect.top;
+            clearCanvas();
+            updateCoordinates(null, null, null, null);
+        });
+        canvas.addEventListener('mousemove', (e) => {
+            if (!isDrawing) return;
+            const rect = canvas.getBoundingClientRect();
+            const currentX = e.clientX - rect.left;
+            const currentY = e.clientY - rect.top;
+            drawBox(startX, startY, currentX, currentY);
+            updateCoordinates(startX, startY, currentX, currentY);
+        });
+        canvas.addEventListener('mouseup', (e) => {
+            if (!isDrawing) return;
+            const rect = canvas.getBoundingClientRect();
+            const endX = e.clientX - rect.left;
+            const endY = e.clientY - rect.top;
+            drawBox(startX, startY, endX, endY);
+            updateCoordinates(startX, startY, endX, endY);
+            isDrawing = false;
+        });
+        canvas.addEventListener('mouseleave', () => {
+            isDrawing = false;
+        });
+        // Event listener for the clear button
+        document.getElementById('clear-button').addEventListener('click', () => {
+            clearCanvas();
+            lastCoords = null;
+            updateCoordinates(null, null, null, null);
+        });
+    </script>
+</body>
 </html>