Overview

TrueFace is a full-stack, real-time artificial intelligence face recognition application developed by Javed Hussain. The system allows users to detect, recognize, and register faces live through their web browser webcam.

Built with a modular hybrid architecture, TrueFace splits responsibilities between client-side perception and server-side deep learning:

Client-Side Perception: Runs TinyFaceDetector via WebAssembly in the browser at 15–30 FPS for instantaneous visual tracking and bounding-box overlay.
Server-Side Deep Recognition: Uses MTCNN for face landmark alignment and InceptionResnetV1 (pretrained on VGGFace2) on a Python FastAPI backend to generate 512-dimensional face embeddings and perform cosine similarity matching against an SQLite database.
Dynamic Enrollment: Enables registering new individuals in seconds with a 3–5 image capture workflow.

Project Metadata

Category: Artificial Intelligence / Computer Vision / Full-Stack
Status: v1.0.0 (Open Source)
License: MIT License
Author / Developer: Javed Hussain (@iamjaved026)
Repository: https://github.com/iamjaved026/trueface

The Three Core Pillars: Detect, Recognize, Register

Detect (Browser): Locates faces in the live video stream, draws smoothed bounding boxes, and provides instant visual feedback without network lag.
Recognize (Backend): Crops the detected face, generates a 512-dimensional numerical embedding vector, and compares it against enrolled vectors using cosine similarity. Scores $\ge 0.45$ identify known individuals; lower scores label the face as unknown.
Register (Interactive UI): Captures 3–5 photos to account for variations in head angle, lighting, and facial expressions, storing representative embeddings with the person's name and role.

Technical Architecture & Flow

  [ Webcam Video Stream ]
            │
            ▼
  [ Next.js 15 Client Browser ]
  ┌────────────────────────────────────────┐
  │ TinyFaceDetector (WASM / face-api)     │ ──► Instant Bounding Boxes (15-30 FPS)
  │ Smoothing & Frame-Skip Engine          │
  └────────────────────────────────────────┘
            │
            │  Crop Payload (Base64 JPEG)
            ▼
  [ FastAPI Backend (Python 3.9+) ]
  ┌────────────────────────────────────────┐
  │ POST /recognize                        │
  │ MTCNN (Face Alignment & Normalization) │
  │ InceptionResnetV1 (VGGFace2 Weights)   │ ──► Generates 512-D Embedding Vector
  └────────────────────────────────────────┘
            │
            ▼
  [ Vector Similarity Engine ]
  ┌────────────────────────────────────────┐
  │ Cosine Similarity vs. Registered DB    │
  │ Match Threshold Evaluation (0.45)      │
  └────────────────────────────────────────┘
            │
      ┌─────┴────────────────┐
      ▼                      ▼
  [ Match >= 0.45 ]     [ Match < 0.45 ]
  Status: Known         Status: Unknown
  (Name, Role, Conf%)   (Prompt Registration)
            │                      │
            └──────────┬───────────┘
                       ▼
  [ SQLite Persistence & Audit Logging ]
  ┌────────────────────────────────────────┐
  │ Stores: Name, Role, Embedding Vectors, │
  │ Timestamps, Confidence Scores          │
  └────────────────────────────────────────┘

Technology Stack

Frontend

Framework: Next.js 15 (App Router, Server-Side Rendering)
Styling: Tailwind CSS (Futuristic Dark Cyber Glassmorphism)
Client AI: @vladmandic/face-api (TinyFaceDetector, FaceLandmark68Net)
Language: TypeScript

Backend

Framework: FastAPI (Python 3.9+)
Deep Learning: PyTorch, facenet-pytorch (MTCNN + InceptionResnetV1)
Pretrained Weights: VGGFace2 dataset
Image Processing: OpenCV, Pillow
Data Persistence: SQLite

Key Capabilities & Engineering Features

High-Throughput Inference: Decoupled architecture prevents network requests from blocking the webcam display.
Configurable Thresholding: Default cosine similarity threshold of 0.45 tuned for balance between false acceptance and false rejection.
Request Throttling & Caching: 1500ms recognition TTL and 2-frame skip rate prevent browser CPU exhaustion.
Audit Logging: Logs every recognition event with timestamps, confidence scores, and assigned roles.
Single-Command Launch: node server.js executes both the FastAPI Python server and Next.js frontend concurrently.

Related Technical Story & Source Code

In-Depth Technical Article: How I Built TrueFace: A Real-Time AI Face Recognition System
GitHub Repository: View TrueFace on GitHub (iamjaved026/trueface)
Developer Profile: About Javed Hussain

TrueFace — Real-Time AI Face Recognition System