npm - rtmlib-ts - Versions diffs - 0.0.2 - Mend

rtmlib-ts 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

package/.gitattributes +1 -0
package/README.md +202 -0
package/dist/core/base.d.ts +20 -0
package/dist/core/base.d.ts.map +1 -0
package/dist/core/base.js +40 -0
package/dist/core/file.d.ts +11 -0
package/dist/core/file.d.ts.map +1 -0
package/dist/core/file.js +111 -0
package/dist/core/modelCache.d.ts +35 -0
package/dist/core/modelCache.d.ts.map +1 -0
package/dist/core/modelCache.js +161 -0
package/dist/core/posePostprocessing.d.ts +12 -0
package/dist/core/posePostprocessing.d.ts.map +1 -0
package/dist/core/posePostprocessing.js +76 -0
package/dist/core/postprocessing.d.ts +10 -0
package/dist/core/postprocessing.d.ts.map +1 -0
package/dist/core/postprocessing.js +70 -0
package/dist/core/preprocessing.d.ts +14 -0
package/dist/core/preprocessing.d.ts.map +1 -0
package/dist/core/preprocessing.js +79 -0
package/dist/index.d.ts +27 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +31 -0
package/dist/models/rtmpose.d.ts +25 -0
package/dist/models/rtmpose.d.ts.map +1 -0
package/dist/models/rtmpose.js +185 -0
package/dist/models/rtmpose3d.d.ts +28 -0
package/dist/models/rtmpose3d.d.ts.map +1 -0
package/dist/models/rtmpose3d.js +184 -0
package/dist/models/yolo12.d.ts +23 -0
package/dist/models/yolo12.d.ts.map +1 -0
package/dist/models/yolo12.js +165 -0
package/dist/models/yolox.d.ts +18 -0
package/dist/models/yolox.d.ts.map +1 -0
package/dist/models/yolox.js +167 -0
package/dist/solution/animalDetector.d.ts +229 -0
package/dist/solution/animalDetector.d.ts.map +1 -0
package/dist/solution/animalDetector.js +663 -0
package/dist/solution/body.d.ts +16 -0
package/dist/solution/body.d.ts.map +1 -0
package/dist/solution/body.js +52 -0
package/dist/solution/bodyWithFeet.d.ts +16 -0
package/dist/solution/bodyWithFeet.d.ts.map +1 -0
package/dist/solution/bodyWithFeet.js +52 -0
package/dist/solution/customDetector.d.ts +137 -0
package/dist/solution/customDetector.d.ts.map +1 -0
package/dist/solution/customDetector.js +342 -0
package/dist/solution/hand.d.ts +14 -0
package/dist/solution/hand.d.ts.map +1 -0
package/dist/solution/hand.js +20 -0
package/dist/solution/index.d.ts +10 -0
package/dist/solution/index.d.ts.map +1 -0
package/dist/solution/index.js +9 -0
package/dist/solution/objectDetector.d.ts +172 -0
package/dist/solution/objectDetector.d.ts.map +1 -0
package/dist/solution/objectDetector.js +606 -0
package/dist/solution/pose3dDetector.d.ts +145 -0
package/dist/solution/pose3dDetector.d.ts.map +1 -0
package/dist/solution/pose3dDetector.js +611 -0
package/dist/solution/poseDetector.d.ts +198 -0
package/dist/solution/poseDetector.d.ts.map +1 -0
package/dist/solution/poseDetector.js +622 -0
package/dist/solution/poseTracker.d.ts +22 -0
package/dist/solution/poseTracker.d.ts.map +1 -0
package/dist/solution/poseTracker.js +106 -0
package/dist/solution/wholebody.d.ts +19 -0
package/dist/solution/wholebody.d.ts.map +1 -0
package/dist/solution/wholebody.js +82 -0
package/dist/solution/wholebody3d.d.ts +22 -0
package/dist/solution/wholebody3d.d.ts.map +1 -0
package/dist/solution/wholebody3d.js +75 -0
package/dist/types/index.d.ts +52 -0
package/dist/types/index.d.ts.map +1 -0
package/dist/types/index.js +5 -0
package/dist/visualization/draw.d.ts +57 -0
package/dist/visualization/draw.d.ts.map +1 -0
package/dist/visualization/draw.js +400 -0
package/dist/visualization/skeleton/coco133.d.ts +350 -0
package/dist/visualization/skeleton/coco133.d.ts.map +1 -0
package/dist/visualization/skeleton/coco133.js +120 -0
package/dist/visualization/skeleton/coco17.d.ts +180 -0
package/dist/visualization/skeleton/coco17.d.ts.map +1 -0
package/dist/visualization/skeleton/coco17.js +48 -0
package/dist/visualization/skeleton/halpe26.d.ts +278 -0
package/dist/visualization/skeleton/halpe26.d.ts.map +1 -0
package/dist/visualization/skeleton/halpe26.js +70 -0
package/dist/visualization/skeleton/hand21.d.ts +196 -0
package/dist/visualization/skeleton/hand21.d.ts.map +1 -0
package/dist/visualization/skeleton/hand21.js +51 -0
package/dist/visualization/skeleton/index.d.ts +10 -0
package/dist/visualization/skeleton/index.d.ts.map +1 -0
package/dist/visualization/skeleton/index.js +9 -0
package/dist/visualization/skeleton/openpose134.d.ts +357 -0
package/dist/visualization/skeleton/openpose134.d.ts.map +1 -0
package/dist/visualization/skeleton/openpose134.js +116 -0
package/dist/visualization/skeleton/openpose18.d.ts +177 -0
package/dist/visualization/skeleton/openpose18.d.ts.map +1 -0
package/dist/visualization/skeleton/openpose18.js +47 -0
package/docs/ANIMAL_DETECTOR.md +450 -0
package/docs/CUSTOM_DETECTOR.md +568 -0
package/docs/OBJECT_DETECTOR.md +373 -0
package/docs/POSE3D_DETECTOR.md +458 -0
package/docs/POSE_DETECTOR.md +442 -0
package/examples/README.md +119 -0
package/examples/index.html +746 -0
package/package.json +51 -0
package/playground/README.md +114 -0
package/playground/app/favicon.ico +0 -0
package/playground/app/globals.css +17 -0
package/playground/app/layout.tsx +19 -0
package/playground/app/page.tsx +1338 -0
package/playground/eslint.config.mjs +18 -0
package/playground/next.config.ts +34 -0
package/playground/package-lock.json +6723 -0
package/playground/package.json +27 -0
package/playground/postcss.config.mjs +7 -0
package/playground/tsconfig.json +34 -0
package/src/core/base.ts +66 -0
package/src/core/file.ts +141 -0
package/src/core/modelCache.ts +189 -0
package/src/core/posePostprocessing.ts +91 -0
package/src/core/postprocessing.ts +93 -0
package/src/core/preprocessing.ts +127 -0
package/src/index.ts +69 -0
package/src/models/rtmpose.ts +265 -0
package/src/models/rtmpose3d.ts +289 -0
package/src/models/yolo12.ts +220 -0
package/src/models/yolox.ts +214 -0
package/src/solution/animalDetector.ts +955 -0
package/src/solution/body.ts +89 -0
package/src/solution/bodyWithFeet.ts +89 -0
package/src/solution/customDetector.ts +474 -0
package/src/solution/hand.ts +52 -0
package/src/solution/index.ts +10 -0
package/src/solution/objectDetector.ts +816 -0
package/src/solution/pose3dDetector.ts +890 -0
package/src/solution/poseDetector.ts +892 -0
package/src/solution/poseTracker.ts +172 -0
package/src/solution/wholebody.ts +130 -0
package/src/solution/wholebody3d.ts +125 -0
package/src/types/index.ts +62 -0
package/src/visualization/draw.ts +543 -0
package/src/visualization/skeleton/coco133.ts +131 -0
package/src/visualization/skeleton/coco17.ts +49 -0
package/src/visualization/skeleton/halpe26.ts +71 -0
package/src/visualization/skeleton/hand21.ts +52 -0
package/src/visualization/skeleton/index.ts +10 -0
package/src/visualization/skeleton/openpose134.ts +125 -0
package/src/visualization/skeleton/openpose18.ts +48 -0
package/tsconfig.json +32 -0

package/examples/index.html ADDED Viewed

@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>YOLO12 Person Detection</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      color: #fff;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+    header {
+      text-align: center;
+      margin-bottom: 30px;
+    }
+    header h1 {
+      font-size: 2.5rem;
+      margin-bottom: 10px;
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    header p {
+      color: #8892b0;
+      font-size: 1.1rem;
+    }
+    .main-content {
+      display: grid;
+      grid-template-columns: 1fr 300px;
+      gap: 20px;
+    }
+    @media (max-width: 768px) {
+      .main-content {
+        grid-template-columns: 1fr;
+      }
+    }
+    .canvas-container {
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 16px;
+      padding: 20px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .canvas-wrapper {
+      position: relative;
+      width: 100%;
+      min-height: 400px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    canvas {
+      max-width: 100%;
+      max-height: 600px;
+      display: block;
+    }
+    .placeholder {
+      position: absolute;
+      text-align: center;
+      color: #8892b0;
+    }
+    .placeholder svg {
+      width: 64px;
+      height: 64px;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .panel {
+      background: rgba(255, 255, 255, 0.05);
+      border-radius: 16px;
+      padding: 20px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .panel h2 {
+      font-size: 1.2rem;
+      margin-bottom: 15px;
+      color: #00d9ff;
+    }
+    .upload-area {
+      border: 2px dashed rgba(0, 217, 255, 0.3);
+      border-radius: 12px;
+      padding: 30px 20px;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      margin-bottom: 15px;
+    }
+    .upload-area:hover,
+    .upload-area.dragover {
+      border-color: #00d9ff;
+      background: rgba(0, 217, 255, 0.1);
+    }
+    .upload-area svg {
+      width: 48px;
+      height: 48px;
+      margin-bottom: 12px;
+      color: #00d9ff;
+    }
+    .upload-area p {
+      color: #8892b0;
+      font-size: 0.9rem;
+    }
+    #fileInput {
+      display: none;
+    }
+    .btn {
+      width: 100%;
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      margin-bottom: 10px;
+    }
+    .btn-primary {
+      background: linear-gradient(90deg, #00d9ff, #00ff88);
+      color: #1a1a2e;
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3);
+    }
+    .btn-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+    .btn-secondary {
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+    .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .stats {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+    .stat-item {
+      background: rgba(0, 0, 0, 0.3);
+      padding: 15px;
+      border-radius: 8px;
+      text-align: center;
+    }
+    .stat-value {
+      font-size: 1.8rem;
+      font-weight: 700;
+      color: #00ff88;
+    }
+    .stat-label {
+      font-size: 0.8rem;
+      color: #8892b0;
+      margin-top: 5px;
+    }
+    .detections-list {
+      max-height: 300px;
+      overflow-y: auto;
+    }
+    .detection-item {
+      background: rgba(0, 0, 0, 0.3);
+      padding: 12px;
+      border-radius: 8px;
+      margin-bottom: 10px;
+      border-left: 3px solid #00ff88;
+    }
+    .detection-item .class-name {
+      font-weight: 600;
+      color: #00d9ff;
+    }
+    .detection-item .confidence {
+      font-size: 0.85rem;
+      color: #8892b0;
+    }
+    .detection-item .bbox {
+      font-size: 0.75rem;
+      color: #666;
+      margin-top: 5px;
+      font-family: monospace;
+    }
+    .status {
+      padding: 10px;
+      border-radius: 8px;
+      margin-bottom: 15px;
+      font-size: 0.9rem;
+    }
+    .status.loading {
+      background: rgba(0, 217, 255, 0.1);
+      color: #00d9ff;
+    }
+    .status.ready {
+      background: rgba(0, 255, 136, 0.1);
+      color: #00ff88;
+    }
+    .status.error {
+      background: rgba(255, 0, 0, 0.1);
+      color: #ff4444;
+    }
+    .spinner {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border: 2px solid rgba(0, 217, 255, 0.3);
+      border-top-color: #00d9ff;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+      margin-right: 8px;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    .settings {
+      margin-top: 15px;
+    }
+    .setting-item {
+      margin-bottom: 15px;
+    }
+    .setting-item label {
+      display: block;
+      margin-bottom: 5px;
+      color: #8892b0;
+      font-size: 0.9rem;
+    }
+    .setting-item input[type="range"] {
+      width: 100%;
+      height: 6px;
+      border-radius: 3px;
+      background: rgba(255, 255, 255, 0.1);
+      outline: none;
+      -webkit-appearance: none;
+    }
+    .setting-item input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: #00d9ff;
+      cursor: pointer;
+    }
+    .setting-value {
+      text-align: right;
+      font-size: 0.85rem;
+      color: #00d9ff;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🎯 YOLO12 Person Detection</h1>
+      <p>Real-time person detection powered by ONNX Runtime Web</p>
+    </header>
+    <div class="main-content">
+      <div class="canvas-container">
+        <div class="canvas-wrapper">
+          <canvas id="canvas"></canvas>
+          <div class="placeholder" id="placeholder">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+            </svg>
+            <p>Upload an image to detect people</p>
+          </div>
+        </div>
+      </div>
+      <div class="sidebar">
+        <div class="panel">
+          <h2>📁 Upload Image</h2>
+          <div class="upload-area" id="uploadArea">
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
+            </svg>
+            <p>Drag & drop or click to upload</p>
+          </div>
+          <input type="file" id="fileInput" accept="image/*">
+          <div id="status" class="status loading">
+            <span class="spinner"></span>
+            Loading model...
+          </div>
+          <button class="btn btn-primary" id="detectBtn" disabled>Detect People</button>
+          <button class="btn btn-secondary" id="clearBtn">Clear</button>
+        </div>
+        <div class="panel">
+          <h2>📊 Statistics</h2>
+          <div class="stats">
+            <div class="stat-item">
+              <div class="stat-value" id="personCount">0</div>
+              <div class="stat-label">People Detected</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-value" id="inferenceTime">0</div>
+              <div class="stat-label">Time (ms)</div>
+            </div>
+          </div>
+          <div class="settings">
+            <div class="setting-item">
+              <label>Confidence Threshold</label>
+              <input type="range" id="confidenceSlider" min="0.1" max="0.9" step="0.05" value="0.5">
+              <div class="setting-value" id="confidenceValue">0.50</div>
+            </div>
+          </div>
+        </div>
+        <div class="panel">
+          <h2>🎯 Detections</h2>
+          <div class="detections-list" id="detectionsList">
+            <p style="color: #8892b0; font-size: 0.9rem;">No detections yet</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="module">
+    import * as ort from 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.min.js';
+    // Configure ONNX Runtime
+    ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/';
+    ort.env.wasm.simd = true;
+    // DOM Elements
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    const placeholder = document.getElementById('placeholder');
+    const uploadArea = document.getElementById('uploadArea');
+    const fileInput = document.getElementById('fileInput');
+    const detectBtn = document.getElementById('detectBtn');
+    const clearBtn = document.getElementById('clearBtn');
+    const statusEl = document.getElementById('status');
+    const personCountEl = document.getElementById('personCount');
+    const inferenceTimeEl = document.getElementById('inferenceTime');
+    const detectionsListEl = document.getElementById('detectionsList');
+    const confidenceSlider = document.getElementById('confidenceSlider');
+    const confidenceValue = document.getElementById('confidenceValue');
+    // State
+    let session = null;
+    let currentImage = null;
+    let currentImageData = null;
+    let confidenceThreshold = 0.5;
+    // Load model
+    async function loadModel() {
+      try {
+        const response = await fetch('https://huggingface.co/demon2233/rtmlib-ts/resolve/main/yolo/yolov12n.onnx');
+        const modelBuffer = await response.arrayBuffer();
+        session = await ort.InferenceSession.create(modelBuffer, {
+          executionProviders: ['wasm'],
+          graphOptimizationLevel: 'all',
+        });
+        statusEl.className = 'status ready';
+        statusEl.innerHTML = '✓ Model ready';
+        detectBtn.disabled = false;
+        console.log('Model loaded successfully');
+      } catch (error) {
+        statusEl.className = 'status error';
+        statusEl.innerHTML = `✗ Error: ${error.message}`;
+        console.error('Failed to load model:', error);
+      }
+    }
+    // Initialize
+    loadModel();
+    // Image upload handlers
+    uploadArea.addEventListener('click', () => fileInput.click());
+    uploadArea.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      uploadArea.classList.add('dragover');
+    });
+    uploadArea.addEventListener('dragleave', () => {
+      uploadArea.classList.remove('dragover');
+    });
+    uploadArea.addEventListener('drop', (e) => {
+      e.preventDefault();
+      uploadArea.classList.remove('dragover');
+      const file = e.dataTransfer.files[0];
+      if (file && file.type.startsWith('image/')) {
+        loadImage(file);
+      }
+    });
+    fileInput.addEventListener('change', (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        loadImage(file);
+      }
+    });
+    // Load image
+    function loadImage(file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = () => {
+          currentImage = img;
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+          placeholder.style.display = 'none';
+          currentImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        };
+        img.src = e.target.result;
+      };
+      reader.readAsDataURL(file);
+    }
+    // Preprocess image (letterbox with black padding)
+    function preprocessImage(imageData, inputSize = [640, 640]) {
+      const [inputW, inputH] = inputSize;
+      const imgWidth = imageData.width;
+      const imgHeight = imageData.height;
+      // Create padded canvas
+      const paddedCanvas = document.createElement('canvas');
+      const paddedCtx = paddedCanvas.getContext('2d');
+      paddedCanvas.width = inputW;
+      paddedCanvas.height = inputH;
+      // Fill with black
+      paddedCtx.fillStyle = '#000000';
+      paddedCtx.fillRect(0, 0, inputW, inputH);
+      // Calculate aspect ratio
+      const aspectRatio = imgWidth / imgHeight;
+      const targetAspectRatio = inputW / inputH;
+      let drawWidth, drawHeight, offsetX, offsetY;
+      if (aspectRatio > targetAspectRatio) {
+        drawWidth = inputW;
+        drawHeight = Math.floor(inputW / aspectRatio);
+        offsetX = 0;
+        offsetY = Math.floor((inputH - drawHeight) / 2);
+      } else {
+        drawHeight = inputH;
+        drawWidth = Math.floor(inputH * aspectRatio);
+        offsetX = Math.floor((inputW - drawWidth) / 2);
+        offsetY = 0;
+      }
+      // Draw image
+      const tempCanvas = document.createElement('canvas');
+      const tempCtx = tempCanvas.getContext('2d');
+      tempCanvas.width = imgWidth;
+      tempCanvas.height = imgHeight;
+      tempCtx.putImageData(imageData, 0, 0);
+      paddedCtx.drawImage(tempCanvas, 0, 0, imgWidth, imgHeight,
+                         offsetX, offsetY, drawWidth, drawHeight);
+      const paddedImageData = paddedCtx.getImageData(0, 0, inputW, inputH);
+      // Convert to tensor (RGB, CHW format)
+      const data = new Float32Array(inputW * inputH * 3);
+      for (let i = 0; i < paddedImageData.data.length; i += 4) {
+        const pixelIndex = i / 4;
+        data[pixelIndex] = paddedImageData.data[i] / 255;         // R
+        data[pixelIndex + inputW * inputH] = paddedImageData.data[i + 1] / 255;  // G
+        data[pixelIndex + 2 * inputW * inputH] = paddedImageData.data[i + 2] / 255; // B
+      }
+      return {
+        tensor: new ort.Tensor('float32', data, [1, 3, inputH, inputW]),
+        paddingX: offsetX,
+        paddingY: offsetY,
+        scaleX: imgWidth / drawWidth,
+        scaleY: imgHeight / drawHeight
+      };
+    }
+    // Postprocess results
+    function postprocessResults(output, originalWidth, originalHeight, paddingX, paddingY, scaleX, scaleY) {
+      const outputData = output.data;
+      const numDetections = output.dims[1];
+      const detections = [];
+      for (let i = 0; i < numDetections; i++) {
+        const startIdx = i * 6;
+        const x1 = outputData[startIdx];
+        const y1 = outputData[startIdx + 1];
+        const x2 = outputData[startIdx + 2];
+        const y2 = outputData[startIdx + 3];
+        const confidence = outputData[startIdx + 4];
+        const classId = Math.round(outputData[startIdx + 5]);
+        // Filter by confidence and class (0 = person)
+        if (confidence < confidenceThreshold || classId !== 0) continue;
+        // Transform coordinates
+        const transformedX1 = (x1 - paddingX) * scaleX;
+        const transformedY1 = (y1 - paddingY) * scaleY;
+        const transformedX2 = (x2 - paddingX) * scaleX;
+        const transformedY2 = (y2 - paddingY) * scaleY;
+        detections.push({
+          x: Math.max(0, transformedX1),
+          y: Math.max(0, transformedY1),
+          width: Math.max(0, transformedX2 - transformedX1),
+          height: Math.max(0, transformedY2 - transformedY1),
+          confidence,
+          class: 'person'
+        });
+      }
+      // Apply NMS
+      return applyNMS(detections, 0.45);
+    }
+    // Non-Maximum Suppression
+    function applyNMS(detections, iouThreshold) {
+      if (detections.length === 0) return [];
+      detections.sort((a, b) => b.confidence - a.confidence);
+      const selected = [];
+      const used = new Set();
+      for (let i = 0; i < detections.length; i++) {
+        if (used.has(i)) continue;
+        selected.push(detections[i]);
+        used.add(i);
+        for (let j = i + 1; j < detections.length; j++) {
+          if (used.has(j)) continue;
+          const iou = calculateIoU(detections[i], detections[j]);
+          if (iou > iouThreshold) {
+            used.add(j);
+          }
+        }
+      }
+      return selected;
+    }
+    // Calculate IoU
+    function calculateIoU(det1, det2) {
+      const x1 = Math.max(det1.x, det2.x);
+      const y1 = Math.max(det1.y, det2.y);
+      const x2 = Math.min(det1.x + det1.width, det2.x + det2.width);
+      const y2 = Math.min(det1.y + det1.height, det2.y + det2.height);
+      if (x2 <= x1 || y2 <= y1) return 0;
+      const intersection = (x2 - x1) * (y2 - y1);
+      const area1 = det1.width * det1.height;
+      const area2 = det2.width * det2.height;
+      const union = area1 + area2 - intersection;
+      return intersection / union;
+    }
+    // Draw detections
+    function drawDetections(detections) {
+      if (!currentImage) return;
+      // Redraw original image
+      ctx.drawImage(currentImage, 0, 0);
+      // Draw boxes
+      detections.forEach((det, index) => {
+        const color = `hsl(${160 + index * 20}, 100%, 50%)`;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 3;
+        ctx.strokeRect(det.x, det.y, det.width, det.height);
+        // Draw label background
+        const label = `${det.class} ${(det.confidence * 100).toFixed(0)}%`;
+        ctx.font = '14px -apple-system, sans-serif';
+        const textWidth = ctx.measureText(label).width;
+        ctx.fillStyle = color;
+        ctx.fillRect(det.x, det.y - 24, textWidth + 12, 24);
+        ctx.fillStyle = '#000';
+        ctx.fillText(label, det.x + 6, det.y - 7);
+      });
+    }
+    // Update detections list
+    function updateDetectionsList(detections) {
+      if (detections.length === 0) {
+        detectionsListEl.innerHTML = '<p style="color: #8892b0; font-size: 0.9rem;">No detections</p>';
+        return;
+      }
+      detectionsListEl.innerHTML = detections.map((det, i) => `
+        <div class="detection-item">
+          <div class="class-name">Person ${i + 1}</div>
+          <div class="confidence">Confidence: ${(det.confidence * 100).toFixed(1)}%</div>
+          <div class="bbox">[${det.x.toFixed(0)}, ${det.y.toFixed(0)}, ${det.width.toFixed(0)}x${det.height.toFixed(0)}]</div>
+        </div>
+      `).join('');
+    }
+    // Detect
+    detectBtn.addEventListener('click', async () => {
+      if (!session || !currentImageData) return;
+      detectBtn.disabled = true;
+      detectBtn.textContent = 'Detecting...';
+      try {
+        const startTime = performance.now();
+        // Preprocess
+        const { tensor, paddingX, paddingY, scaleX, scaleY } = preprocessImage(currentImageData);
+        // Inference
+        const results = await session.run({ images: tensor });
+        const output = results.output0;
+        // Postprocess
+        const detections = postprocessResults(
+          output,
+          currentImageData.width,
+          currentImageData.height,
+          paddingX,
+          paddingY,
+          scaleX,
+          scaleY
+        );
+        const endTime = performance.now();
+        const inferenceTime = Math.round(endTime - startTime);
+        // Update UI
+        drawDetections(detections);
+        personCountEl.textContent = detections.length;
+        inferenceTimeEl.textContent = inferenceTime;
+        updateDetectionsList(detections);
+        console.log(`Detected ${detections.length} people in ${inferenceTime}ms`);
+      } catch (error) {
+        console.error('Detection failed:', error);
+        alert('Detection failed: ' + error.message);
+      } finally {
+        detectBtn.disabled = false;
+        detectBtn.textContent = 'Detect People';
+      }
+    });
+    // Clear
+    clearBtn.addEventListener('click', () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      placeholder.style.display = 'block';
+      currentImage = null;
+      currentImageData = null;
+      personCountEl.textContent = '0';
+      inferenceTimeEl.textContent = '0';
+      detectionsListEl.innerHTML = '<p style="color: #8892b0; font-size: 0.9rem;">No detections yet</p>';
+      fileInput.value = '';
+    });
+    // Confidence slider
+    confidenceSlider.addEventListener('input', (e) => {
+      confidenceThreshold = parseFloat(e.target.value);
+      confidenceValue.textContent = confidenceThreshold.toFixed(2);
+    });
+  </script>
+</body>
+</html>