Appearance
F2: Real-Time Optical Frame Loop & Debounce Heuristics
1. Description & Debounce Logic
Inside ChefVideoPlayer.jsx, an active requestAnimationFrame loop continuously checks if a new video frame is ready (readyState === 4). Detected gestures are filtered through two safety gates:
- Confidence Threshold: $Score > 0.75$ (rejects ambiguous hand poses).
- Time-Decay Debounce: $Date.now() - lastActionTime > 1500ms$ (prevents rapid-fire toggling).
2. Heuristic Filter Flow
mermaid
flowchart TD
Frame[New Optical Video Frame] --> Ready{readyState == 4?}
Ready -->|No| NextTick[Skip to Next RAF]
Ready -->|Yes| Recognize[recognizeVideo Frame]
Recognize --> ConfCheck{Confidence > 0.75?}
ConfCheck -->|No| Discard[Discard Ambiguous Pose]
ConfCheck -->|Yes| TimeCheck{Elapsed Time > 1500ms?}
TimeCheck -->|No| Throttle[Suppress: Debounce Active]
TimeCheck -->|Yes| FireAction[Execute Video Action & Reset Timer]3. Say It Out Loud
"One of the biggest challenges in optical gesture control is preventing accidental double-triggers, known as gesture flapping. I solved this by implementing two distinct heuristic gates. First, any gesture classification with less than 75% confidence is discarded immediately. Second, I introduced a 1500ms time-decay debounce window stored in a React ref. Once a command like Pause fires, the system temporarily suppresses subsequent gesture executions for 1.5 seconds, giving the user ample time to lower their hand naturally without accidentally un-pausing the video."