bounding-box-demo

Running

App Files Files Community

arnodjiang commited on 20 days ago

Commit

ded2238

verified ·

1 Parent(s): 55cae17

Upload 3 files

Browse files

Files changed (3) hide show

app.py +48 -0
index.html +1121 -499
requirements.txt +1 -0

app.py ADDED Viewed

	@@ -0,0 +1,48 @@

+from html import escape
+from pathlib import Path
+import gradio as gr
+ROOT = Path(__file__).resolve().parent
+APP_HTML = (ROOT / "index.html").read_text(encoding="utf-8")
+def render_app() -> str:
+    srcdoc = escape(APP_HTML, quote=True)
+    return (
+        '<iframe id="bbox-app-frame" '
+        f'srcdoc="{srcdoc}" '
+        'sandbox="allow-scripts allow-same-origin allow-downloads" '
+        'allow="clipboard-read; clipboard-write"></iframe>'
+    )
+with gr.Blocks(
+    title="Bounding Box Demo",
+    css="""
+    .gradio-container {
+        max-width: none !important;
+        padding: 0 !important;
+        background: #f3f6fb !important;
+    }
+    #bbox-app-frame {
+        display: block;
+        width: 100%;
+        min-height: 900px;
+        height: calc(100vh - 18px);
+        border: 0;
+        background: #f3f6fb;
+    }
+    footer {
+        display: none !important;
+    }
+    """,
+) as demo:
+    gr.HTML(render_app())
+if __name__ == "__main__":
+    demo.launch()

index.html CHANGED Viewed

@@ -1,573 +1,1195 @@
-<!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;
-        }
-        .page-title {
-            text-align: center;
-            padding: 0.5rem 0;
-            color: #333;
-            margin-bottom: 1.5rem;
-            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;
-            margin-bottom: 30px;
-        }
-        /* Image Section */
-        .image-section {
-            flex: 0 0 640px;
-            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;
-            padding: 10px;
-            background: #f9f9f9;
-            border-radius: 4px;
-            border: 1px solid #ddd;
-        }
-        .radio-option {
-            margin-bottom: 8px;
-        }
-        .radio-option label {
-            margin-left: 5px;
-            color: #555;
-        }
-        .format-controls h2:last-of-type {
-            margin-top: 20px;
-        }
-        .format {
-            margin-bottom: 15px;
         }
-        .format-title {
-            font-weight: bold;
-            margin-bottom: 5px;
-            color: #333;
         }
-        .coords {
-            font-family: monospace;
-            background: #f9f9f9;
-            padding: 8px;
-            border-radius: 4px;
-            border: 1px solid #ddd;
-            min-height: 20px;
         }
-        .clear-button-container {
-            display: flex;
-            justify-content: center;
-            padding-top: 10px;
         }
-        .clear-button {
-            background-color: #f44336;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            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;
-            border-radius: 3px;
-            font-size: 11px;
-            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;
         }
-        .model-explanation th,
-        .model-explanation td {
-            border: 1px solid #ddd;
-            padding: 8px;
-            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,
-            .controls-section {
-                flex: none;
-            }
         }
-        @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>
-                <p>Try drawing a box on the image by left clicking and dragging.</p>
-                <p id="image-dimensions"></p>
-            </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 (x1, y1, x2, y2) → top left: (x1, y1), bottom right: (x2, y2)
-                            </div>
-                            <div id="xyxy" class="coords">No box drawn</div>
-                        </div>
-                        <div class="format">
-                            <div class="format-title">XYWH (x, y, width, height) → top left: (x, y), width and height of
-                                box</div>
-                            <div id="xywh" class="coords">No box drawn</div>
-                        </div>
-                        <div class="format">
-                            <div class="format-title">Normalized XYWH (pixel values in range of 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) → (center x, center y, width, height)
-                            </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> (x1, y1, x2, y2) 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> (x1, y1, x2, y2) 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';
-            document.getElementById('image-dimensions').textContent = 'Image dimensions: ' + image.width + ' x ' + image.height;
-        }
-        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 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 drawDot(x, y) {
-            ctx.beginPath();
-            ctx.arc(x, y, 4, 0, 2 * Math.PI);
-            ctx.fillStyle = 'black';
-            ctx.fill();
         }
-        // Draw dots at the positions corresponding to the selected format.
-        function drawDots(x1, y1, x2, y2) {
-            const format = document.querySelector('input[name="format"]:checked').value;
-            if (format === 'center') {
-                const centerX = x1 + (x2 - x1) / 2;
-                const centerY = y1 + (y2 - y1) / 2;
-                drawDot(centerX, centerY);
-                drawDot(x1, y1);
-            } else {
-                drawDot(x1, y1);
-                drawDot(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 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);
-            drawDots(x1, y1, x2, y2);
-            createLabels(x1, y1, x2, y2);
-            lastCoords = { x1, y1, x2, y2 };
         }
-        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;
-        });
-        document.getElementById('clear-button').addEventListener('click', () => {
-            clearCanvas();
-            lastCoords = null;
-            updateCoordinates(null, null, null, null);
-        });
-    </script>
-</body>
-</html>

+<!doctype html>
+<html lang="zh-CN">
 <head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Bounding Box Demo</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f3f6fb;
+      --surface: #ffffff;
+      --surface-strong: #f8fafc;
+      --ink: #172033;
+      --muted: #667085;
+      --line: #d8e0ea;
+      --accent: #2563eb;
+      --accent-strong: #1d4ed8;
+      --accent-soft: #eaf1ff;
+      --teal: #0f9f8f;
+      --danger: #dc2626;
+      --danger-soft: #fee2e2;
+      --shadow: 0 20px 60px rgba(15, 23, 42, 0.10);
+      --radius: 8px;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      width: 100%;
+      min-height: 100%;
+      margin: 0;
+      overflow-x: hidden;
+      background: var(--bg);
+      color: var(--ink);
+      font-family:
+        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+        sans-serif;
+      letter-spacing: 0;
+    }
+    button,
+    input,
+    textarea {
+      font: inherit;
+    }
+    button {
+      border: 0;
+    }
+    .app {
+      min-height: 100vh;
+      padding: 18px;
+    }
+    .topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      width: min(1480px, 100%);
+      margin: 0 auto 14px;
+    }
+    .brand {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      min-width: 0;
+    }
+    .brand-kicker {
+      color: var(--teal);
+      font-size: 12px;
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+    h1 {
+      margin: 0;
+      color: var(--ink);
+      font-size: 28px;
+      line-height: 1.1;
+      font-weight: 850;
+      letter-spacing: 0;
+    }
+    .top-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+    .button,
+    .upload-button {
+      min-height: 38px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 0 14px;
+      border-radius: var(--radius);
+      background: var(--surface);
+      color: var(--ink);
+      border: 1px solid var(--line);
+      cursor: pointer;
+      font-weight: 750;
+      white-space: nowrap;
+      transition:
+        transform 0.16s ease,
+        border-color 0.16s ease,
+        background 0.16s ease,
+        color 0.16s ease;
+    }
+    .button:hover,
+    .upload-button:hover {
+      transform: translateY(-1px);
+      border-color: #b8c7da;
+      background: var(--surface-strong);
+    }
+    .button:disabled {
+      opacity: 0.45;
+      cursor: not-allowed;
+      transform: none;
+    }
+    .button.primary,
+    .upload-button.primary {
+      color: #fff;
+      border-color: var(--accent);
+      background: var(--accent);
+    }
+    .button.primary:hover,
+    .upload-button.primary:hover {
+      background: var(--accent-strong);
+    }
+    .button.danger {
+      color: var(--danger);
+      background: var(--danger-soft);
+      border-color: #fecaca;
+    }
+    .upload-button input {
+      display: none;
+    }
+    .workspace {
+      width: min(1480px, 100%);
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 360px;
+      gap: 14px;
+      align-items: stretch;
+    }
+    .stage-panel,
+    .panel {
+      border: 1px solid var(--line);
+      background: var(--surface);
+      box-shadow: var(--shadow);
+    }
+    .stage-panel {
+      min-width: 0;
+      border-radius: var(--radius);
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    .stage-toolbar {
+      min-height: 58px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 12px;
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--line);
+      background: var(--surface-strong);
+    }
+    .stage-meta {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 8px;
+      min-width: 0;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .pill {
+      max-width: 260px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 5px 9px;
+      border-radius: 999px;
+      border: 1px solid var(--line);
+      background: var(--surface);
+    }
+    .canvas-wrap {
+      position: relative;
+      min-height: 560px;
+      height: calc(100vh - 170px);
+      background:
+        linear-gradient(45deg, #eef2f7 25%, transparent 25%) 0 0 / 22px 22px,
+        linear-gradient(45deg, transparent 75%, #eef2f7 75%) 0 0 / 22px 22px,
+        linear-gradient(45deg, transparent 75%, #eef2f7 75%) 11px 11px / 22px 22px,
+        linear-gradient(45deg, #eef2f7 25%, #f8fafc 25%) 11px 11px / 22px 22px;
+      overflow: hidden;
+    }
+    .canvas-wrap.is-dragover {
+      outline: 3px solid rgba(37, 99, 235, 0.34);
+      outline-offset: -6px;
+    }
+    canvas {
+      display: block;
+      width: 100%;
+      height: 100%;
+      touch-action: none;
+    }
+    .empty-state {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%);
+      width: min(390px, calc(100% - 48px));
+      padding: 22px;
+      border-radius: var(--radius);
+      background: rgba(255, 255, 255, 0.92);
+      border: 1px dashed #b8c7da;
+      text-align: center;
+      color: var(--muted);
+      pointer-events: none;
+    }
+    .empty-title {
+      margin: 0 0 5px;
+      color: var(--ink);
+      font-size: 18px;
+      font-weight: 850;
+    }
+    .empty-subtitle {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 650;
+    }
+    .sidebar {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .panel {
+      border-radius: var(--radius);
+      padding: 14px;
+    }
+    .panel-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+      margin: 0 0 12px;
+      color: var(--ink);
+      font-size: 15px;
+      font-weight: 850;
+    }
+    .field {
+      display: flex;
+      min-width: 0;
+      flex-direction: column;
+      gap: 6px;
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+    .field input,
+    .field textarea {
+      width: 100%;
+      min-width: 0;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--surface-strong);
+      color: var(--ink);
+      outline: none;
+      transition:
+        border-color 0.16s ease,
+        box-shadow 0.16s ease,
+        background 0.16s ease;
+    }
+    .field input {
+      height: 38px;
+      padding: 0 10px;
+      font-weight: 750;
+    }
+    .field textarea {
+      min-height: 176px;
+      padding: 10px;
+      resize: vertical;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      line-height: 1.45;
+    }
+    .field input:focus,
+    .field textarea:focus {
+      border-color: rgba(37, 99, 235, 0.78);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
+      background: #fff;
+    }
+    .field input:disabled {
+      color: #98a2b3;
+      background: #f2f4f7;
+    }
+    .coord-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+      margin-bottom: 10px;
+    }
+    .field.full {
+      margin-bottom: 12px;
+    }
+    .action-row {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+    }
+    .result-stack {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .result-card {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 10px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--surface-strong);
+    }
+    .result-label {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 850;
+      text-transform: uppercase;
+    }
+    .result-code {
+      min-height: 24px;
+      overflow-wrap: anywhere;
+      color: var(--ink);
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      font-size: 12px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+    }
+    .status {
+      min-height: 22px;
+      margin: 10px auto 0;
+      width: min(1480px, 100%);
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+    }
+    @media (max-width: 980px) {
+      .app {
+        padding: 12px;
+      }
+      .topbar,
+      .workspace {
+        width: 100%;
+      }
+      .topbar {
+        align-items: flex-start;
+        flex-direction: column;
+      }
+      .top-actions {
+        width: 100%;
+        justify-content: flex-start;
+      }
+      .workspace {
+        grid-template-columns: 1fr;
+      }
+      .canvas-wrap {
+        min-height: 420px;
+        height: 58vh;
+      }
+      .stage-meta {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      }
+      .sidebar {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+    }
+    @media (max-width: 520px) {
+      h1 {
+        font-size: 23px;
+      }
+      .button,
+      .upload-button {
+        width: 100%;
+      }
+      .top-actions,
+      .action-row {
+        grid-template-columns: 1fr;
+      }
+      .top-actions {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+      .coord-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header class="topbar">
+      <div class="brand">
+        <span class="brand-kicker">Hugging Face Space</span>
+        <h1>Bounding Box Annotator</h1>
+      </div>
+      <div class="top-actions">
+        <label class="upload-button primary" for="fileInput">
+          上传图片
+          <input id="fileInput" type="file" accept="image/*">
+        </label>
+        <button class="button" id="fitButton" type="button" disabled>适配视图</button>
+        <button class="button danger" id="clearButton" type="button" disabled>清空标注</button>
+      </div>
+    </header>
+    <main class="workspace">
+      <section class="stage-panel" aria-label="image annotation canvas">
+        <div class="stage-toolbar">
+          <div class="stage-meta">
+            <span class="pill" id="imageMeta">未上传图片</span>
+            <span class="pill" id="boxMeta">0 个标注</span>
+          </div>
+        </div>
+        <div class="canvas-wrap" id="canvasWrap">
+          <canvas id="canvas"></canvas>
+          <div class="empty-state" id="emptyState">
+            <p class="empty-title">上传图片开始标注</p>
+            <p class="empty-subtitle">坐标以原始图片像素为准</p>
+          </div>
+        </div>
+      </section>
+      <aside class="sidebar">
+        <section class="panel">
+          <h2 class="panel-title">坐标编辑</h2>
+          <div class="coord-grid">
+            <label class="field">X
+              <input id="xInput" type="number" min="0" step="1" disabled>
+            </label>
+            <label class="field">Y
+              <input id="yInput" type="number" min="0" step="1" disabled>
+            </label>
+            <label class="field">W
+              <input id="wInput" type="number" min="1" step="1" disabled>
+            </label>
+            <label class="field">H
+              <input id="hInput" type="number" min="1" step="1" disabled>
+            </label>
+          </div>
+          <div class="action-row">
+            <button class="button" id="addButton" type="button" disabled>新增标注</button>
+            <button class="button danger" id="deleteButton" type="button" disabled>删除选中</button>
+          </div>
+        </section>
+        <section class="panel">
+          <h2 class="panel-title">坐标结果</h2>
+          <div class="result-stack">
+            <div class="result-card">
+              <div class="result-label">绝对坐标 x1 y1 x2 y2</div>
+              <div class="result-code" id="absoluteOutput">未选择</div>
+            </div>
+            <div class="result-card">
+              <div class="result-label">绝对坐标 x y w h</div>
+              <div class="result-code" id="sizeOutput">未选择</div>
+            </div>
+            <div class="result-card">
+              <div class="result-label">相对坐标 x1 y1 x2 y2</div>
+              <div class="result-code" id="relativeOutput">未选择</div>
+            </div>
+            <div class="result-card">
+              <div class="result-label">YOLO 格式 cx cy w h</div>
+              <div class="result-code" id="yoloOutput">未选择</div>
+            </div>
+          </div>
+        </section>
+      </aside>
+    </main>
+    <div class="status" id="statusLine"></div>
+  </div>
+  <script>
+    (() => {
+      "use strict";
+      const $ = (id) => document.getElementById(id);
+      const canvas = $("canvas");
+      const ctx = canvas.getContext("2d");
+      const canvasWrap = $("canvasWrap");
+      const emptyState = $("emptyState");
+      const controls = {
+        fileInput: $("fileInput"),
+        fitButton: $("fitButton"),
+        clearButton: $("clearButton"),
+        addButton: $("addButton"),
+        deleteButton: $("deleteButton"),
+        xInput: $("xInput"),
+        yInput: $("yInput"),
+        wInput: $("wInput"),
+        hInput: $("hInput"),
+        imageMeta: $("imageMeta"),
+        boxMeta: $("boxMeta"),
+        absoluteOutput: $("absoluteOutput"),
+        sizeOutput: $("sizeOutput"),
+        relativeOutput: $("relativeOutput"),
+        yoloOutput: $("yoloOutput"),
+        statusLine: $("statusLine")
+      };
+      const palette = [
+        "#2563eb",
+        "#0f9f8f",
+        "#f59e0b",
+        "#dc2626",
+        "#7c3aed",
+        "#0891b2",
+        "#16a34a",
+        "#e11d48"
+      ];
+      const state = {
+        image: null,
+        imageName: "",
+        boxes: [],
+        selectedId: null,
+        nextId: 1,
+        drag: null,
+        scale: 1,
+        offsetX: 0,
+        offsetY: 0,
+        canvasWidth: 1,
+        canvasHeight: 1,
+        dpr: 1
+      };
+      function clamp(value, min, max) {
+        if (!Number.isFinite(value)) {
+          return min;
+        }
+        if (max < min) {
+          return min;
         }
+        return Math.min(max, Math.max(min, value));
+      }
+      function imageWidth() {
+        return state.image ? state.image.naturalWidth : 0;
+      }
+      function imageHeight() {
+        return state.image ? state.image.naturalHeight : 0;
+      }
+      function selectedBox() {
+        return state.boxes.find((box) => box.id === state.selectedId) || null;
+      }
+      function makeBox(x, y, width, height) {
+        const id = state.nextId;
+        state.nextId += 1;
+        return {
+          id,
+          x,
+          y,
+          width,
+          height,
+          color: palette[(id - 1) % palette.length]
+        };
+      }
+      function constrainBox(box) {
+        const maxW = imageWidth();
+        const maxH = imageHeight();
+        if (!maxW || !maxH) {
+          return;
         }
+        box.x = clamp(Math.round(box.x), 0, Math.max(0, maxW - 1));
+        box.y = clamp(Math.round(box.y), 0, Math.max(0, maxH - 1));
+        box.width = clamp(Math.round(box.width), 1, maxW - box.x);
+        box.height = clamp(Math.round(box.height), 1, maxH - box.y);
+      }
+      function constrainAllBoxes() {
+        state.boxes.forEach(constrainBox);
+      }
+      function imageToCanvas(point) {
+        return {
+          x: state.offsetX + point.x * state.scale,
+          y: state.offsetY + point.y * state.scale
+        };
+      }
+      function eventToImagePoint(event) {
+        const rect = canvas.getBoundingClientRect();
+        const x = (event.clientX - rect.left - state.offsetX) / state.scale;
+        const y = (event.clientY - rect.top - state.offsetY) / state.scale;
+        return {
+          x: clamp(x, 0, imageWidth()),
+          y: clamp(y, 0, imageHeight())
+        };
+      }
+      function handlePoints(box) {
+        const x1 = box.x;
+        const y1 = box.y;
+        const x2 = box.x + box.width;
+        const y2 = box.y + box.height;
+        const cx = box.x + box.width / 2;
+        const cy = box.y + box.height / 2;
+        return [
+          { name: "nw", x: x1, y: y1 },
+          { name: "n", x: cx, y: y1 },
+          { name: "ne", x: x2, y: y1 },
+          { name: "e", x: x2, y: cy },
+          { name: "se", x: x2, y: y2 },
+          { name: "s", x: cx, y: y2 },
+          { name: "sw", x: x1, y: y2 },
+          { name: "w", x: x1, y: cy }
+        ];
+      }
+      function hitTest(point) {
+        const tolerance = Math.max(6 / state.scale, 4);
+        for (let index = state.boxes.length - 1; index >= 0; index -= 1) {
+          const box = state.boxes[index];
+          for (const handle of handlePoints(box)) {
+            if (
+              Math.abs(point.x - handle.x) <= tolerance &&
+              Math.abs(point.y - handle.y) <= tolerance
+            ) {
+              return { box, action: "resize", handle: handle.name };
+            }
+          }
+          if (
+            point.x >= box.x &&
+            point.x <= box.x + box.width &&
+            point.y >= box.y &&
+            point.y <= box.y + box.height
+          ) {
+            return { box, action: "move", handle: null };
+          }
         }
+        return null;
+      }
+      function cursorForHit(hit) {
+        if (!hit) {
+          return state.image ? "crosshair" : "default";
         }
+        if (hit.action === "move") {
+          return "move";
+        }
+        const map = {
+          n: "ns-resize",
+          s: "ns-resize",
+          e: "ew-resize",
+          w: "ew-resize",
+          nw: "nwse-resize",
+          se: "nwse-resize",
+          ne: "nesw-resize",
+          sw: "nesw-resize"
+        };
+        return map[hit.handle] || "default";
+      }
+      function resizeCanvas() {
+        const rect = canvasWrap.getBoundingClientRect();
+        const width = Math.max(1, Math.round(rect.width));
+        const height = Math.max(1, Math.round(rect.height));
+        const dpr = window.devicePixelRatio || 1;
+        state.canvasWidth = width;
+        state.canvasHeight = height;
+        state.dpr = dpr;
+        canvas.width = Math.round(width * dpr);
+        canvas.height = Math.round(height * dpr);
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+        draw();
+      }
+      function drawImageSurface() {
+        if (!state.image) {
+          emptyState.style.display = "block";
+          return;
         }
+        emptyState.style.display = "none";
+        const padding = state.canvasWidth < 700 ? 16 : 28;
+        const availableWidth = Math.max(1, state.canvasWidth - padding * 2);
+        const availableHeight = Math.max(1, state.canvasHeight - padding * 2);
+        state.scale = Math.min(
+          availableWidth / imageWidth(),
+          availableHeight / imageHeight()
+        );
+        state.scale = Math.max(0.01, state.scale);
+        const drawWidth = imageWidth() * state.scale;
+        const drawHeight = imageHeight() * state.scale;
+        state.offsetX = (state.canvasWidth - drawWidth) / 2;
+        state.offsetY = (state.canvasHeight - drawHeight) / 2;
+        ctx.save();
+        ctx.fillStyle = "#ffffff";
+        ctx.shadowColor = "rgba(15, 23, 42, 0.22)";
+        ctx.shadowBlur = 22;
+        ctx.shadowOffsetY = 12;
+        ctx.fillRect(state.offsetX, state.offsetY, drawWidth, drawHeight);
+        ctx.restore();
+        ctx.drawImage(state.image, state.offsetX, state.offsetY, drawWidth, drawHeight);
+      }
+      function drawBoxes() {
+        if (!state.image) {
+          return;
         }
+        state.boxes.forEach((box) => {
+          const isActive = box.id === state.selectedId;
+          const topLeft = imageToCanvas({ x: box.x, y: box.y });
+          const width = box.width * state.scale;
+          const height = box.height * state.scale;
+          ctx.save();
+          ctx.lineWidth = isActive ? 3 : 2;
+          ctx.strokeStyle = box.color;
+          ctx.fillStyle = `${box.color}1f`;
+          ctx.fillRect(topLeft.x, topLeft.y, width, height);
+          ctx.strokeRect(topLeft.x, topLeft.y, width, height);
+          const labelText = `#${box.id}`;
+          ctx.font = "700 12px Inter, system-ui, sans-serif";
+          const labelWidth = Math.min(
+            Math.max(ctx.measureText(labelText).width + 14, 42),
+            Math.max(42, width)
+          );
+          const labelHeight = 22;
+          const labelY = Math.max(state.offsetY, topLeft.y - labelHeight);
+          ctx.fillStyle = box.color;
+          ctx.fillRect(topLeft.x, labelY, labelWidth, labelHeight);
+          ctx.fillStyle = "#ffffff";
+          ctx.textBaseline = "middle";
+          ctx.fillText(labelText, topLeft.x + 7, labelY + labelHeight / 2);
+          if (isActive) {
+            const size = 8;
+            ctx.fillStyle = "#ffffff";
+            ctx.strokeStyle = box.color;
+            ctx.lineWidth = 2;
+            for (const handle of handlePoints(box)) {
+              const point = imageToCanvas(handle);
+              ctx.beginPath();
+              ctx.rect(point.x - size / 2, point.y - size / 2, size, size);
+              ctx.fill();
+              ctx.stroke();
+            }
+          }
+          ctx.restore();
+        });
+      }
+      function draw() {
+        ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0);
+        ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
+        ctx.fillStyle = "#f8fafc";
+        ctx.fillRect(0, 0, state.canvasWidth, state.canvasHeight);
+        drawImageSurface();
+        drawBoxes();
+      }
+      function formatRatio(value) {
+        return Number.isFinite(value) ? value.toFixed(6) : "0.000000";
+      }
+      function resultLines(box) {
+        if (!box || !state.image) {
+          return null;
         }
+        const x1 = box.x;
+        const y1 = box.y;
+        const x2 = box.x + box.width;
+        const y2 = box.y + box.height;
+        const cx = box.x + box.width / 2;
+        const cy = box.y + box.height / 2;
+        const iw = imageWidth();
+        const ih = imageHeight();
+        return {
+          absolute: `x1=${x1}, y1=${y1}, x2=${x2}, y2=${y2}`,
+          size: `x=${box.x}, y=${box.y}, w=${box.width}, h=${box.height}`,
+          relative: [
+            `x1=${formatRatio(x1 / iw)}, y1=${formatRatio(y1 / ih)}`,
+            `x2=${formatRatio(x2 / iw)}, y2=${formatRatio(y2 / ih)}`
+          ].join("\n"),
+          yolo: [
+            `cx=${formatRatio(cx / iw)}, cy=${formatRatio(cy / ih)}`,
+            `w=${formatRatio(box.width / iw)}, h=${formatRatio(box.height / ih)}`
+          ].join("\n")
+        };
+      }
+      function updateResults(selected) {
+        const values = resultLines(selected);
+        if (!values) {
+          controls.absoluteOutput.textContent = "未选择";
+          controls.sizeOutput.textContent = "未选择";
+          controls.relativeOutput.textContent = "未选择";
+          controls.yoloOutput.textContent = "未选择";
+          return;
         }
+        controls.absoluteOutput.textContent = values.absolute;
+        controls.sizeOutput.textContent = values.size;
+        controls.relativeOutput.textContent = values.relative;
+        controls.yoloOutput.textContent = values.yolo;
+      }
+      function updateControls() {
+        const hasImage = Boolean(state.image);
+        const selected = selectedBox();
+        const hasSelected = Boolean(selected);
+        const disabled = !hasSelected;
+        controls.fitButton.disabled = !hasImage;
+        controls.clearButton.disabled = !state.boxes.length;
+        controls.addButton.disabled = !hasImage;
+        controls.deleteButton.disabled = disabled;
+        for (const input of [
+          controls.xInput,
+          controls.yInput,
+          controls.wInput,
+          controls.hInput
+        ]) {
+          input.disabled = disabled;
         }
+        if (selected) {
+          controls.xInput.value = selected.x;
+          controls.yInput.value = selected.y;
+          controls.wInput.value = selected.width;
+          controls.hInput.value = selected.height;
+        } else {
+          controls.xInput.value = "";
+          controls.yInput.value = "";
+          controls.wInput.value = "";
+          controls.hInput.value = "";
         }
+        controls.imageMeta.textContent = hasImage
+          ? `${state.imageName} · ${imageWidth()} × ${imageHeight()}`
+          : "未上传图片";
+        controls.boxMeta.textContent = `${state.boxes.length} 个标注`;
+        updateResults(selected);
+      }
+      function setStatus(message) {
+        controls.statusLine.textContent = message;
+      }
+      function sync() {
+        constrainAllBoxes();
+        draw();
+        updateControls();
+      }
+      function loadImageFile(file) {
+        if (!file || !file.type.startsWith("image/")) {
+          setStatus("请选择图片文件");
+          return;
         }
+        const reader = new FileReader();
+        reader.onload = () => {
+          const image = new Image();
+          image.onload = () => {
+            state.image = image;
+            state.imageName = file.name || "uploaded-image";
+            state.boxes = [];
+            state.selectedId = null;
+            state.nextId = 1;
+            setStatus(`已载入 ${state.imageName}`);
+            sync();
+          };
+          image.onerror = () => setStatus("图片读取失败");
+          image.src = reader.result;
+        };
+        reader.onerror = () => setStatus("图片读取失败");
+        reader.readAsDataURL(file);
+      }
+      function addCenteredBox() {
+        if (!state.image) {
+          return;
+        }
+        const width = Math.max(24, Math.round(imageWidth() * 0.28));
+        const height = Math.max(24, Math.round(imageHeight() * 0.22));
+        const x = Math.round((imageWidth() - width) / 2);
+        const y = Math.round((imageHeight() - height) / 2);
+        const box = makeBox(x, y, width, height);
+        state.boxes.push(box);
+        state.selectedId = box.id;
+        sync();
+      }
+      function deleteSelectedBox() {
+        if (!state.selectedId) {
+          return;
         }
+        state.boxes = state.boxes.filter((box) => box.id !== state.selectedId);
+        state.selectedId = state.boxes.length
+          ? state.boxes[state.boxes.length - 1].id
+          : null;
+        sync();
+      }
+      function updateSelectedFromInputs() {
+        const box = selectedBox();
+        if (!box || !state.image) {
+          return;
         }
+        const x = Number.parseInt(controls.xInput.value, 10);
+        const y = Number.parseInt(controls.yInput.value, 10);
+        const width = Number.parseInt(controls.wInput.value, 10);
+        const height = Number.parseInt(controls.hInput.value, 10);
+        box.x = clamp(x, 0, Math.max(0, imageWidth() - 1));
+        box.y = clamp(y, 0, Math.max(0, imageHeight() - 1));
+        box.width = clamp(width, 1, imageWidth() - box.x);
+        box.height = clamp(height, 1, imageHeight() - box.y);
+        sync();
+      }
+      function moveBox(box, startBox, deltaX, deltaY) {
+        box.x = clamp(startBox.x + deltaX, 0, imageWidth() - startBox.width);
+        box.y = clamp(startBox.y + deltaY, 0, imageHeight() - startBox.height);
+        box.width = startBox.width;
+        box.height = startBox.height;
+      }
+      function resizeBox(box, startBox, deltaX, deltaY, handle) {
+        const minSize = 2;
+        let x1 = startBox.x;
+        let y1 = startBox.y;
+        let x2 = startBox.x + startBox.width;
+        let y2 = startBox.y + startBox.height;
+        if (handle.includes("w")) {
+          x1 = clamp(startBox.x + deltaX, 0, x2 - minSize);
+        }
+        if (handle.includes("e")) {
+          x2 = clamp(startBox.x + startBox.width + deltaX, x1 + minSize, imageWidth());
+        }
+        if (handle.includes("n")) {
+          y1 = clamp(startBox.y + deltaY, 0, y2 - minSize);
         }
+        if (handle.includes("s")) {
+          y2 = clamp(startBox.y + startBox.height + deltaY, y1 + minSize, imageHeight());
+        }
+        box.x = x1;
+        box.y = y1;
+        box.width = x2 - x1;
+        box.height = y2 - y1;
+      }
+      function onPointerDown(event) {
+        if (!state.image) {
+          return;
         }
+        const point = eventToImagePoint(event);
+        const hit = hitTest(point);
+        if (hit) {
+          state.selectedId = hit.box.id;
+          state.drag = {
+            action: hit.action,
+            handle: hit.handle,
+            start: point,
+            boxId: hit.box.id,
+            startBox: { ...hit.box }
+          };
+          canvas.setPointerCapture(event.pointerId);
+          sync();
+          return;
         }
+        const box = makeBox(point.x, point.y, 1, 1);
+        state.boxes.push(box);
+        state.selectedId = box.id;
+        state.drag = {
+          action: "create",
+          handle: null,
+          start: point,
+          boxId: box.id,
+          startBox: { ...box }
+        };
+        canvas.setPointerCapture(event.pointerId);
+        sync();
+      }
+      function onPointerMove(event) {
+        if (!state.image) {
+          canvas.style.cursor = "default";
+          return;
         }
+        const point = eventToImagePoint(event);
+        if (!state.drag) {
+          canvas.style.cursor = cursorForHit(hitTest(point));
+          return;
         }
+        const box = state.boxes.find((item) => item.id === state.drag.boxId);
+        if (!box) {
+          return;
         }
+        const deltaX = point.x - state.drag.start.x;
+        const deltaY = point.y - state.drag.start.y;
+        if (state.drag.action === "create") {
+          const x1 = clamp(Math.min(state.drag.start.x, point.x), 0, imageWidth());
+          const y1 = clamp(Math.min(state.drag.start.y, point.y), 0, imageHeight());
+          const x2 = clamp(Math.max(state.drag.start.x, point.x), 0, imageWidth());
+          const y2 = clamp(Math.max(state.drag.start.y, point.y), 0, imageHeight());
+          box.x = x1;
+          box.y = y1;
+          box.width = Math.max(1, x2 - x1);
+          box.height = Math.max(1, y2 - y1);
+        } else if (state.drag.action === "move") {
+          moveBox(box, state.drag.startBox, deltaX, deltaY);
+        } else if (state.drag.action === "resize") {
+          resizeBox(box, state.drag.startBox, deltaX, deltaY, state.drag.handle);
         }
+        sync();
+      }
+      function onPointerUp(event) {
+        if (!state.drag) {
+          return;
         }
+        const createdBox = state.drag.action === "create" ? selectedBox() : null;
+        if (createdBox && (createdBox.width < 3 || createdBox.height < 3)) {
+          state.boxes = state.boxes.filter((box) => box.id !== createdBox.id);
+          state.selectedId = null;
+        }
+        state.drag = null;
+        if (canvas.hasPointerCapture(event.pointerId)) {
+          canvas.releasePointerCapture(event.pointerId);
         }
+        sync();
+      }
+      controls.fileInput.addEventListener("change", (event) => {
+        loadImageFile(event.target.files[0]);
+        event.target.value = "";
+      });
+      controls.fitButton.addEventListener("click", () => {
+        resizeCanvas();
+        setStatus("视图已适配");
+      });
+      controls.clearButton.addEventListener("click", () => {
+        state.boxes = [];
+        state.selectedId = null;
+        sync();
+      });
+      controls.addButton.addEventListener("click", addCenteredBox);
+      controls.deleteButton.addEventListener("click", deleteSelectedBox);
+      for (const input of [
+        controls.xInput,
+        controls.yInput,
+        controls.wInput,
+        controls.hInput
+      ]) {
+        input.addEventListener("input", updateSelectedFromInputs);
+      }
+      canvas.addEventListener("pointerdown", onPointerDown);
+      canvas.addEventListener("pointermove", onPointerMove);
+      canvas.addEventListener("pointerup", onPointerUp);
+      canvas.addEventListener("pointercancel", onPointerUp);
+      canvasWrap.addEventListener("dragover", (event) => {
+        event.preventDefault();
+        canvasWrap.classList.add("is-dragover");
+      });
+      canvasWrap.addEventListener("dragleave", () => {
+        canvasWrap.classList.remove("is-dragover");
+      });
+      canvasWrap.addEventListener("drop", (event) => {
+        event.preventDefault();
+        canvasWrap.classList.remove("is-dragover");
+        loadImageFile(event.dataTransfer.files[0]);
+      });
+      document.addEventListener("keydown", (event) => {
+        const activeTag = document.activeElement ? document.activeElement.tagName : "";
+        const isTyping = ["INPUT", "TEXTAREA"].includes(activeTag);
+        if (isTyping) {
+          return;
+        }
+        if (event.key === "Delete" || event.key === "Backspace") {
+          deleteSelectedBox();
+        }
+      });
+      new ResizeObserver(resizeCanvas).observe(canvasWrap);
+      sync();
+    })();
+  </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ gradio>=5.0,<6