A 6.5MB Face Recognition Model Runs an Access Gate Entirely in the Browser
Running biometric recognition entirely in the browser sidesteps the cost and privacy exposure of server-side GPU inference. For building access, kiosks, or any edge deployment where a camera and a screen are already present, a static web page can replace a dedicated appliance.
A complete face-recognition access gate fits in a single static HTML page. The stack uses face-api.js to load three models from a CDN — a 190KB face detector, a 90KB landmark net, and a 6.3MB recognition net — and runs inference entirely on-device. Image data never leaves the browser; a 128-dimension descriptor is extracted and compared against a whitelist stored in localStorage using Euclidean distance with a threshold of 0.6.
The flow is straightforward: upload a photo or capture from a webcam, blur the preview while the models run, detect faces and 68 keypoints, extract the descriptor, and match it against the local whitelist. A Bun server handles static file serving and an optional upload proxy, but the recognition logic is pure client-side JavaScript.
Vendor quotes for a traditional setup ran several thousand yuan per gate plus a GPU server. This approach eliminates both the server cost and the privacy risk of sending biometric data over the network, all within a 6.5MB download that loads in under three seconds.
Using localStorage as a face-embedding database is viable for small deployments — a few hundred residents — but lacks any access control, rotation, or sync mechanism, so it is a single-device solution.
The 0.6 Euclidean distance threshold is a tunable security parameter with no calibration data shown; lowering it reduces false accepts but risks locking out legitimate users under varying lighting or angles.
Blurring the preview image during recognition is a thoughtful privacy touch that most access-control UIs overlook, even though the raw image is already in memory.
face-api.js wraps TensorFlow.js models that were state-of-the-art around 2018; modern alternatives like MediaPipe or ONNX runtime in the browser would likely yield smaller models and faster inference.