npm - scrypted-detection-trainer - Versions diffs - 0.1.6 → 0.1.7 - Mend

scrypted-detection-trainer 0.1.6 → 0.1.7

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 (8) hide show

package/dist/plugin.zip CHANGED Viewed

Binary file

package/out/main.nodejs.js CHANGED Viewed

@@ -1620,7 +1620,14 @@ class DetectionTrainer extends sdk_1.ScryptedDeviceBase {
             .filter(d => d &&
             (d.type === sdk_1.ScryptedDeviceType.Camera || d.type === sdk_1.ScryptedDeviceType.Doorbell) &&
             d.interfaces?.includes(sdk_1.ScryptedInterface.ObjectDetector));
-        const uiUrl = await sdk_1.default.endpointManager.getLocalEndpoint(undefined, { public: true }).catch(() => '/endpoint/scrypted-detection-trainer/public/');
+        let uiUrl;
+        try {
+            const authPath = await sdk_1.default.endpointManager.getAuthenticatedPath();
+            uiUrl = `${authPath}endpoint/scrypted-detection-trainer/public/`;
+        }
+        catch {
+            uiUrl = '/endpoint/scrypted-detection-trainer/public/';
+        }
         const settings = [
             {
                 key: 'info',
@@ -1745,6 +1752,11 @@ class DetectionTrainer extends sdk_1.ScryptedDeviceBase {
     }
     // ── HTTP Handler ──────────────────────────────────────────────────────────
     async onRequest(request, response) {
+        // Require authentication — reject unauthenticated requests
+        if (!request.username) {
+            response.send('Unauthorized', { code: 401, headers: { 'WWW-Authenticate': 'Basic realm="Detection Trainer"' } });
+            return;
+        }
         const url = new URL(request.url, 'http://localhost');
         const path = url.pathname.replace(request.rootPath, '');
         // Serve image
@@ -1873,11 +1885,13 @@ class DetectionTrainer extends sdk_1.ScryptedDeviceBase {
   .badge.green { background: #0d2d0d; color: #4c4; }
   /* Detection card */
-  .detection { display: grid; grid-template-columns: 200px 1fr; gap: 0; border-bottom: 1px solid #222; }
+  .detection { display: grid; grid-template-columns: 420px 1fr; gap: 0; border-bottom: 1px solid #222; }
   .detection:last-child { border-bottom: none; }
-  .detection-img { position: relative; background: #111; display: flex; align-items: center; justify-content: center; min-height: 150px; }
-  .detection-img img { width: 100%; height: 150px; object-fit: cover; display: block; }
-  .detection-class { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.7); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
+  .detection-imgs { display: flex; gap: 8px; padding: 10px; background: #111; align-items: center; }
+  .img-panel { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+  .img-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: .5px; }
+  .det-canvas { border-radius: 6px; display: block; }
+  .det-class-badge { display: inline-block; background: #3d2a00; color: #f90; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
   .detection-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
   .detection-meta { font-size: 12px; color: #888; display: flex; flex-wrap: wrap; gap: 10px; }
   .detection-meta strong { color: #ccc; }
@@ -1925,6 +1939,15 @@ class DetectionTrainer extends sdk_1.ScryptedDeviceBase {
   .breakdown-item { background: #222; border-radius: 8px; padding: 12px; }
   .breakdown-item .label { font-size: 12px; color: #888; margin-bottom: 4px; }
   .breakdown-item .value { font-size: 20px; font-weight: 600; color: #fff; }
+  /* Lightbox */
+  .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1000; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
+  .lightbox.open { display: flex; }
+  .lightbox canvas { max-width: 92vw; max-height: 82vh; border-radius: 8px; cursor: zoom-out; }
+  .lightbox-meta { color: #aaa; font-size: 13px; text-align: center; }
+  .lightbox-close { position: absolute; top: 16px; right: 20px; font-size: 28px; color: #888; cursor: pointer; line-height: 1; }
+  .lightbox-close:hover { color: #fff; }
+  .det-canvas { cursor: zoom-in; }
 </style>
 </head>
 <body>
@@ -1980,6 +2003,12 @@ class DetectionTrainer extends sdk_1.ScryptedDeviceBase {
   </div>
 </div>
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+  <div class="lightbox-close" onclick="closeLightbox()">✕</div>
+  <canvas id="lightbox-canvas"></canvas>
+  <div class="lightbox-meta" id="lightbox-meta"></div>
+</div>
 <div class="toast" id="toast"></div>
 <script>
@@ -1991,6 +2020,115 @@ function imgError(img) {
   img.parentElement.innerHTML = '<div style="padding:20px;color:#555;font-size:12px;text-align:center">No image</div>';
 }
+function drawDetection(img, r) {
+  const [bx, by, bw, bh] = r.boundingBox;
+  const [iw, ih] = r.inputDimensions;
+  // --- Full frame canvas with box overlay ---
+  const fullCanvas = document.getElementById('canvas-full-' + r.id);
+  if (fullCanvas) {
+    const cw = fullCanvas.width, ch = fullCanvas.height;
+    const scale = Math.min(cw / iw, ch / ih);
+    const dw = iw * scale, dh = ih * scale;
+    const ox = (cw - dw) / 2, oy = (ch - dh) / 2;
+    const ctx = fullCanvas.getContext('2d');
+    ctx.fillStyle = '#111';
+    ctx.fillRect(0, 0, cw, ch);
+    ctx.drawImage(img, ox, oy, dw, dh);
+    // Draw bounding box
+    const rx = ox + bx * scale, ry = oy + by * scale;
+    const rw = bw * scale, rh = bh * scale;
+    ctx.strokeStyle = '#f90';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(rx, ry, rw, rh);
+    // Label badge
+    ctx.fillStyle = 'rgba(255,153,0,0.85)';
+    ctx.fillRect(rx, ry - 18, rw, 18);
+    ctx.fillStyle = '#000';
+    ctx.font = 'bold 11px sans-serif';
+    ctx.fillText(r.detectedClass + ' ' + Math.round(r.score * 100) + '%', rx + 3, ry - 4);
+  }
+  // --- Crop canvas ---
+  const cropCanvas = document.getElementById('canvas-crop-' + r.id);
+  if (cropCanvas) {
+    const cc = cropCanvas.width, ch2 = cropCanvas.height;
+    const ctx2 = cropCanvas.getContext('2d');
+    ctx2.fillStyle = '#111';
+    ctx2.fillRect(0, 0, cc, ch2);
+    // Add padding around the crop
+    const pad = Math.min(bw, bh) * 0.15;
+    const sx = Math.max(0, bx - pad), sy = Math.max(0, by - pad);
+    const sw = Math.min(iw - sx, bw + pad * 2), sh = Math.min(ih - sy, bh + pad * 2);
+    const scale2 = Math.min(cc / sw, ch2 / sh);
+    const dw2 = sw * scale2, dh2 = sh * scale2;
+    const ox2 = (cc - dw2) / 2, oy2 = (ch2 - dh2) / 2;
+    ctx2.drawImage(img, sx, sy, sw, sh, ox2, oy2, dw2, dh2);
+    // Thin box outline on crop
+    ctx2.strokeStyle = '#f90';
+    ctx2.lineWidth = 1.5;
+    const rx2 = ox2 + pad * scale2, ry2 = oy2 + pad * scale2;
+    ctx2.strokeRect(rx2, ry2, bw * scale2, bh * scale2);
+  }
+}
+// Cache loaded images so lightbox reuses them
+const imgCache = new Map();
+function openLightbox(r) {
+  const img = imgCache.get(r.id);
+  if (!img) return;
+  const lb = document.getElementById('lightbox');
+  const lbCanvas = document.getElementById('lightbox-canvas');
+  // Size canvas to image, capped at viewport
+  const maxW = window.innerWidth * 0.9;
+  const maxH = window.innerHeight * 0.8;
+  const [iw, ih] = r.inputDimensions;
+  const scale = Math.min(maxW / iw, maxH / ih, 1);
+  lbCanvas.width = Math.round(iw * scale);
+  lbCanvas.height = Math.round(ih * scale);
+  const ctx = lbCanvas.getContext('2d');
+  ctx.drawImage(img, 0, 0, lbCanvas.width, lbCanvas.height);
+  // Draw all bounding boxes for this detection (primary + others in same event if available)
+  const boxes = r.allDetections || [{ boundingBox: r.boundingBox, detectedClass: r.detectedClass, score: r.score }];
+  const colors = ['#f90', '#4af', '#f44', '#4f4', '#f4f', '#ff4'];
+  boxes.forEach((d, i) => {
+    const [bx, by, bw, bh] = d.boundingBox;
+    const color = colors[i % colors.length];
+    const rx = bx * scale, ry = by * scale, rw = bw * scale, rh = bh * scale;
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.strokeRect(rx, ry, rw, rh);
+    const label = d.detectedClass + ' ' + Math.round((d.score || 0) * 100) + '%';
+    const textW = ctx.measureText(label).width + 8;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = 0.85;
+    ctx.fillRect(rx, Math.max(0, ry - 20), textW, 20);
+    ctx.globalAlpha = 1;
+    ctx.fillStyle = '#000';
+    ctx.font = 'bold 12px sans-serif';
+    ctx.fillText(label, rx + 4, Math.max(14, ry - 4));
+  });
+  document.getElementById('lightbox-meta').textContent =
+    r.cameraName + ' · ' + new Date(r.timestamp).toLocaleString() + ' · ' + iw + '×' + ih;
+  lb.classList.add('open');
+  document.addEventListener('keydown', lbKeyHandler);
+}
+function closeLightbox() {
+  document.getElementById('lightbox').classList.remove('open');
+  document.removeEventListener('keydown', lbKeyHandler);
+}
+function lbKeyHandler(e) {
+  if (e.key === 'Escape') closeLightbox();
+}
 function showTab(name) {
   document.querySelectorAll('.tab').forEach((t, i) => {
     const names = ['review', 'stats', 'export'];
@@ -2030,17 +2168,25 @@ async function loadPending() {
   list.innerHTML = pending.map(r => {
     const date = new Date(r.timestamp).toLocaleString();
     const score = Math.round(r.score * 100);
+    const bb = r.boundingBox;
+    const dim = r.inputDimensions;
     return \`
     <div class="detection" id="det-\${r.id}">
-      <div class="detection-img">
-        <img src="\${BASE}/img/\${r.id}" alt="\${r.detectedClass}" loading="lazy" onerror="imgError(this)">
-        <div class="detection-class">\${r.detectedClass} \${score}%</div>
+      <div class="detection-imgs">
+        <div class="img-panel">
+          <div class="img-label">Full frame</div>
+          <canvas id="canvas-full-\${r.id}" class="det-canvas" width="240" height="160"></canvas>
+        </div>
+        <div class="img-panel">
+          <div class="img-label">Crop</div>
+          <canvas id="canvas-crop-\${r.id}" class="det-canvas" width="160" height="160"></canvas>
+        </div>
       </div>
       <div class="detection-info">
         <div class="detection-meta">
           <div><strong>\${r.cameraName}</strong></div>
           <div>\${date}</div>
-          <div>Box: \${r.boundingBox.map(v => Math.round(v)).join(', ')}</div>
+          <div class="det-class-badge">\${r.detectedClass} \${score}%</div>
         </div>
         <div style="font-size:12px;color:#888;">What is this actually?</div>
         <div class="label-buttons">
@@ -2055,7 +2201,25 @@ async function loadPending() {
       </div>
     </div>\`;
   }).join('');
-  } catch(e) {
+  // Draw bounding boxes and crops onto canvases after DOM is ready
+  for (const r of pending) {
+    const img = new Image();
+    img.onload = () => {
+      imgCache.set(r.id, img);
+      drawDetection(img, r);
+      // Wire up click to open lightbox
+      const fullCanvas = document.getElementById('canvas-full-' + r.id);
+      const cropCanvas = document.getElementById('canvas-crop-' + r.id);
+      if (fullCanvas) fullCanvas.onclick = () => openLightbox(r);
+      if (cropCanvas) cropCanvas.onclick = () => openLightbox(r);
+    };
+    img.onerror = () => {
+      const c = document.getElementById('canvas-full-' + r.id);
+      if (c) c.parentElement.innerHTML = '<div style="padding:10px;color:#555;font-size:11px">No image</div>';
+    };
+    img.src = BASE + '/img/' + r.id;
+  }  } catch(e) {
     console.error('loadPending error', e);
     const list = document.getElementById('detections-list');
     if (list) list.innerHTML = '<div class="empty"><div style="color:#a44">Error loading captures: ' + e.message + '</div></div>';