HandGestureRecognition

A simple browser-based hand gesture recognition demo that uses TensorFlow.js and the Handpose model to detect and display hand landmarks from a webcam feed. The project is built with plain HTML, CSS, and JavaScript and is intended as a small demo / starting point for experimenting with hand-tracking and gesture recognition in the browser.

---

Features

• Live webcam capture and display
• Uses TensorFlow.js and the Handpose model for real-time hand landmark detection
• Simple UI to show the latest recognized hand sign (placeholder text present)
• Lightweight, no build step required — served as static files

---

How it works (high level)

1. The page loads TensorFlow.js and the Handpose model from CDN (jsDelivr).
2. The app asks the browser for camera access (getUserMedia) and streams the video to a
3. camera_capture.js captures frames from the video and feeds them to the Handpose model to detect hand landmarks and (optionally) classify gestures.
4. The UI is updated with detection results (for example the "Latest hand sign" area).

Note: The included code is a demo scaffold. The project currently focuses on obtaining landmarks; classification logic (mapping landmarks to named gestures) can be added or extended.

---

Files

• index.html — main page. Loads TFJS, Handpose, and camera_capture.js. Contains the video element and the UI.
• camera_capture.js — application logic that accesses the camera, loads the model, runs detection, and updates the page UI.
• style.css — styles for the page.
• assets (images) — icons used in the UI (e.g. formula_hacks_image.png, longhorn.png).

---

Requirements

• A modern browser (Chrome, Edge, Firefox) with camera support and getUserMedia API.
• Internet connection to load the TensorFlow.js and Handpose CDN scripts (unless you vendor them locally).

---

Running locally (recommended)

Browsers block camera access for pages loaded via the file:// protocol. Serve the files from a local server so the page runs in a secure context (localhost) and the webcam permission prompt will appear.

Options:

• Python 3 (works on macOS, Linux, Windows with Python installed):

  # from the project folder containing index.html
  python3 -m http.server 8000
  # then open http://localhost:8000/index.html in your browser