fix: scan

Author: Leoglme

web/app/composables/useCardAutoScan.ts

@@ -45,9 +45,18 @@ const BURST_COUNT = 2
 /** Gap between burst shots so focus / exposure has a chance to settle. */
 const BURST_INTERVAL_MS = 130
 /** Lerp weight (new vs previous) when tracking the displayed quad. */
-const SMOOTH_LERP = 0.55
+const SMOOTH_LERP = 0.5
 /** Drift above this fraction of the long edge ⇒ new scene, snap instead of lerp. */
 const SCENE_CHANGE_FRAC = 0.22
+/** Two consecutive detections within this drift = confirmed (kills flicker). */
+const VOTE_DRIFT_FRAC = 0.12
+/** Empty detections we wait through before the overlay disappears (≈ 400 ms). */
+const MISS_LINGER_TICKS = 4
+/**
+ * Pokémon card ratio — we force the *displayed* rect to this so the overlay
+ * always reads as a card even when the underlying detection has slight noise.
+ */
+const CARD_AR = 1.397
 
 interface BurstShot {
   buf: ArrayBuffer
@@ -85,6 +94,8 @@ export function useCardAutoScan(opts: UseCardAutoScanOptions) {
   let capturing = false
   let lastCorners: Pt[] | null = null
   let displayedCorners: Pt[] | null = null
+  let pendingCorners: Pt[] | null = null
+  let missTicks = 0
   let steadyTicks = 0
   let lostTicks = 0
   let lastCaptureAt = 0
@@ -163,6 +174,60 @@ export function useCardAutoScan(opts: UseCardAutoScanOptions) {
     })) as Pt[]
   }
 
+  /**
+   * Force the displayed rectangle to the Pokémon card aspect ratio (88/63),
+   * keeping the detected center + rotation. Detections under perspective are
+   * always trapezoids with small noise; rendering a forced-ratio rotated
+   * rectangle reads as "the card" instead of "some quad" — same trick the
+   * competitor uses for that locked-on look.
+   *
+   * @param q - Smoothed corners (any quadrilateral) in video-intrinsic px.
+   * @returns Card-AR rectangle corners at the same center, rotation and scale.
+   */
+  function forceCardShape(q: Pt[]): Pt[] {
+    const cx = (q[0]!.x + q[1]!.x + q[2]!.x + q[3]!.x) / 4
+    const cy = (q[0]!.y + q[1]!.y + q[2]!.y + q[3]!.y) / 4
+    const topDx = q[1]!.x - q[0]!.x
+    const topDy = q[1]!.y - q[0]!.y
+    const botDx = q[2]!.x - q[3]!.x
+    const botDy = q[2]!.y - q[3]!.y
+    const avgW = (Math.hypot(topDx, topDy) + Math.hypot(botDx, botDy)) / 2
+    const avgH =
+      (Math.hypot(q[3]!.x - q[0]!.x, q[3]!.y - q[0]!.y) + Math.hypot(q[2]!.x - q[1]!.x, q[2]!.y - q[1]!.y)) / 2
+    let w: number
+    let h: number
+    if (avgH >= avgW) {
+      w = avgW
+      h = avgW * CARD_AR
+    } else {
+      h = avgH
+      w = avgH * CARD_AR
+    }
+    const angle = Math.atan2((topDy + botDy) / 2, (topDx + botDx) / 2)
+    const cos = Math.cos(angle)
+    const sin = Math.sin(angle)
+    const dx = w / 2
+    const dy = h / 2
+    const rot = (px: number, py: number): Pt => ({
+      x: cx + px * cos - py * sin,
+      y: cy + px * sin + py * cos,
+    })
+    return [rot(-dx, -dy), rot(dx, -dy), rot(dx, dy), rot(-dx, dy)]
+  }
+
+  /**
+   * Average two equal-length quads corner-by-corner.
+   * @param a - First quad.
+   * @param b - Second quad.
+   * @returns A quad whose corners are the midpoints of `a` and `b`.
+   */
+  function averageQuad(a: Pt[], b: Pt[]): Pt[] {
+    return [0, 1, 2, 3].map((i) => ({
+      x: (a[i]!.x + b[i]!.x) / 2,
+      y: (a[i]!.y + b[i]!.y) / 2,
+    })) as Pt[]
+  }
+
   /** Start a burst: send the first warp request; subsequent ones are scheduled. */
   function beginBurst(corners: Pt[]): void {
     burstCorners = corners
@@ -245,33 +310,62 @@ export function useCardAutoScan(opts: UseCardAutoScanOptions) {
   }
 
   /**
-   * Apply the steady-then-capture state machine to a fresh detection.
+   * Apply voting + miss-linger + the steady-then-capture state machine to a
+   * fresh detection. Voting (two consecutive consistent detections) and a
+   * short linger on empty frames stop the overlay from flickering / morphing
+   * on every spurious frame — only confirmed cards reach the display.
+   *
    * @param corners - Ordered card corners in video-intrinsic px, or `null`.
    */
   function onDetection(corners: Pt[] | null): void {
     const el = video.value
-    if (!corners || !el) {
-      lastCorners = null
-      displayedCorners = null
-      quad.value = null
-      steadyTicks = 0
-      if (phase.value === 'cooldown') {
-        lostTicks += 1
-        if (lostTicks >= LOST_TICKS_REARM) {
+    if (!el) {
+      return
+    }
+    const longEdge = Math.max(el.videoWidth, el.videoHeight) || 1080
+
+    // No card this tick — linger before clearing so a single bad frame doesn't
+    // hide the overlay we are tracking.
+    if (!corners) {
+      pendingCorners = null
+      missTicks += 1
+      if (missTicks >= MISS_LINGER_TICKS) {
+        lastCorners = null
+        displayedCorners = null
+        quad.value = null
+        steadyTicks = 0
+        if (phase.value === 'cooldown') {
+          lostTicks += 1
+          if (lostTicks >= LOST_TICKS_REARM) {
+            phase.value = 'watching'
+          }
+        } else if (phase.value !== 'idle' && !capturing) {
           phase.value = 'watching'
         }
-      } else if (phase.value !== 'idle' && !capturing) {
-        phase.value = 'watching'
       }
       return
     }
+    missTicks = 0
 
-    const longEdge = Math.max(el.videoWidth, el.videoHeight) || 1080
+    // Voting: wait for two consecutive detections within VOTE_DRIFT_FRAC of
+    // each other before trusting the result. Hand-shake / texture flicker
+    // produces wildly varying quads and gets filtered here.
+    if (!pendingCorners) {
+      pendingCorners = corners
+      return
+    }
+    if (cornerDrift(corners, pendingCorners) > longEdge * VOTE_DRIFT_FRAC) {
+      pendingCorners = corners
+      return
+    }
+    const confirmed = averageQuad(pendingCorners, corners)
+    pendingCorners = corners
 
-    // Temporal smoothing for the overlay rectangle (UI only — the steady check
-    // below still uses raw detections so a hand-held card converges quickly).
-    displayedCorners = smoothCorners(displayedCorners, corners, longEdge)
-    quad.value = [displayedCorners[0]!, displayedCorners[1]!, displayedCorners[2]!, displayedCorners[3]!]
+    // Smooth toward the confirmed quad, then force a card-AR rectangle on top
+    // — the displayed rectangle reads as "the card" instead of "some shape".
+    displayedCorners = smoothCorners(displayedCorners, confirmed, longEdge)
+    const shaped = forceCardShape(displayedCorners)
+    quad.value = [shaped[0]!, shaped[1]!, shaped[2]!, shaped[3]!]
     lostTicks = 0
 
     if (phase.value === 'cooldown' || capturing) {
@@ -395,6 +489,8 @@ export function useCardAutoScan(opts: UseCardAutoScanOptions) {
     capturing = false
     lastCorners = null
     displayedCorners = null
+    pendingCorners = null
+    missTicks = 0
     burstCorners = null
     burstShots = []
     burstAwaiting = 0

web/app/pages/collection/scan.vue

@@ -313,15 +313,21 @@
                   :style="webcamPreviewStyle"
                 />
                 <svg
-                  v-if="cardQuadPoints && videoIntrinsicW && videoIntrinsicH"
+                  v-if="cardOverlay && videoIntrinsicW && videoIntrinsicH"
                   class="pointer-events-none absolute inset-0 h-full w-full transition-transform duration-150 ease-out"
                   :style="webcamPreviewStyle"
                   :viewBox="`0 0 ${videoIntrinsicW} ${videoIntrinsicH}`"
                   preserveAspectRatio="xMidYMid slice"
                 >
-                  <polygon
-                    :points="cardQuadPoints"
-                    fill="rgba(249,115,22,0.12)"
+                  <rect
+                    :x="cardOverlay.cx - cardOverlay.w / 2"
+                    :y="cardOverlay.cy - cardOverlay.h / 2"
+                    :width="cardOverlay.w"
+                    :height="cardOverlay.h"
+                    :rx="Math.min(cardOverlay.w, cardOverlay.h) * 0.045"
+                    :ry="Math.min(cardOverlay.w, cardOverlay.h) * 0.045"
+                    :transform="`rotate(${cardOverlay.angleDeg} ${cardOverlay.cx} ${cardOverlay.cy})`"
+                    fill="rgba(249,115,22,0.10)"
                     stroke="#f97316"
                     stroke-width="6"
                     stroke-linejoin="round"
@@ -1408,12 +1414,21 @@ function playBeep(): void {
   }
 }
 
-/** Upload the deskewed card the detector produced, then chime on success. */
+/**
+ * Upload the deskewed card the detector produced. The success chime is
+ * triggered later, when the `added` event arrives and the info pop-up appears
+ * — that's the moment the user actually wants to hear confirmation.
+ */
 async function onDetectorCapture(file: File): Promise<void> {
   uploading.value = true
+  // A new card is being processed — drop the previous overlay right away so
+  // the user sees we've moved on. The new card's overlay will appear when the
+  // `added` event lands and the `latestAdded` watcher plays the chime.
+  if (latestAdded.value) {
+    dismissedAddedId.value = latestAdded.value.event_id
+  }
   try {
     await uploadPhoto(file, SCAN_LANGUAGE, undefined, WEBCAM_UPLOAD_COMPRESS)
-    playBeep()
   } catch (err) {
     toast.add({ title: 'Envoi impossible', description: apiErrorMessage(err), color: 'error' })
   } finally {
@@ -1436,13 +1451,32 @@ const {
   onCapture: onDetectorCapture,
 })
 
-/** `quad` (video-intrinsic px) → SVG points string; the SVG viewBox matches. */
-const cardQuadPoints = computed<string | null>(() => {
+/**
+ * The detector forces the quad to the card aspect ratio, so the 4 points form
+ * a true rotated rectangle. Decompose them into {center, w, h, angle} so we
+ * can draw a rounded `<rect>` — matches the competitor's clean look.
+ */
+const cardOverlay = computed<{
+  cx: number
+  cy: number
+  w: number
+  h: number
+  angleDeg: number
+} | null>(() => {
   const q = cardQuad.value
   if (!q) {
     return null
   }
-  return q.map((p) => `${p.x},${p.y}`).join(' ')
+  const cx = (q[0].x + q[1].x + q[2].x + q[3].x) / 4
+  const cy = (q[0].y + q[1].y + q[2].y + q[3].y) / 4
+  const topDx = q[1].x - q[0].x
+  const topDy = q[1].y - q[0].y
+  const botDx = q[2].x - q[3].x
+  const botDy = q[2].y - q[3].y
+  const w = (Math.hypot(topDx, topDy) + Math.hypot(botDx, botDy)) / 2
+  const h = (Math.hypot(q[3].x - q[0].x, q[3].y - q[0].y) + Math.hypot(q[2].x - q[1].x, q[2].y - q[1].y)) / 2
+  const angleDeg = (Math.atan2((topDy + botDy) / 2, (topDx + botDx) / 2) * 180) / Math.PI
+  return { cx, cy, w, h, angleDeg }
 })
 
 /** Most recent successfully-added card, for the bottom info overlay. */
@@ -1455,6 +1489,16 @@ const latestAdded = computed(() => {
   return ev
 })
 
+// Chime when the card is *identified* (info pop-up appears) — not on capture
+// — so the user gets a clear audible "ça y est, on l'a" matching the visual.
+let lastBeepedAddedId: string | null = null
+watch(latestAdded, (v) => {
+  if (v && v.event_id !== lastBeepedAddedId) {
+    lastBeepedAddedId = v.event_id
+    playBeep()
+  }
+})
+
 const autoScanStatus = computed<{ label: string; color: 'primary' | 'success' | 'neutral' }>(() => {
   if (detectorError.value) {
     return { label: 'Moteur de scan indisponible', color: 'neutral' }