VisionAttend

VisionAttend is a modern, frictionless facial recognition attendance system. Built with performance and elegance in mind, it replaces traditional roll calls and ID badges with a touchless, highly accurate camera-based authentication flow.

Overview

The system is split into two primary environments:

• Kiosk Interface: A public-facing, always-on camera terminal where students simply stand in front of the lens to be marked present.
• Admin Dashboard: A secure portal for administrators to register new students, monitor daily attendance logs, manually override records, and perform database cleanup.

By leveraging advanced deep learning models for face extraction, the application handles recognition locally and securely verifies identities against a high-performance vector database.

Architecture & Tech Stack

VisionAttend is designed as a decoupled full-stack application.

Frontend (Client)

• Next.js 16 (App Router): Fast, server-rendered React framework.
• React-Webcam: For direct, in-browser video streaming and image capture.
• Tailwind CSS 4: For rapid, utility-first styling and creating the refined, editorial UI aesthetic.

Backend (API Server)

• FastAPI: A high-performance, asynchronous Python web framework for handling incoming requests and image processing.
• DeepFace (Facenet Model): Open-source face recognition library. We utilize the Facenet model coupled with the opencv detector backend for rapid point-blank alignment and embedding extraction.
• PostgreSQL w/ pgvector: The core database. Rather than storing massive image files, the system stores 128-dimensional mathematical representations (embeddings) of faces. pgvector allows for lightning-fast cosine distance closest-neighbor searches to match live camera feeds against registered students.

Project Structure

visionattend/
├── backend/       # Python FastAPI server and DeepFace integration
├── frontend/      # Next.js web application (Kiosk & Admin views)
└── README.md      # You are here

Getting Started

Because this is a decoupled application, you will need to run both the backend API server and the frontend web dev server simultaneously.

1. Start the Backend API

Navigate to the backend/ directory, set up your Python environment, and start the FastAPI server.

Note: You will need a PostgreSQL instance with the pgvector extension enabled (e.g., Neon.tech) configured in a .env file.

cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
uvicorn main:app --reload --port 8000

2. Start the Frontend Application

In a new terminal split, navigate to the frontend/ directory, install Node dependencies, and start Next.js.

cd frontend
npm install
npm run dev

The Kiosk will be available at http://localhost:3000 and the Admin dashboard at http://localhost:3000/admin.

Workflow

1. Registration: An administrator opens the Admin portal, types in a student's name and roll number, and uses the webcam to capture a clear baseline photo.
2. Processing: The backend receives this photo, extracts the unique facial embedding using DeepFace, and stores it in the Postgres database alongside the student's details.
3. Recognition (Kiosk): When a student walks up to the Kiosk, the camera captures a frame and sends it to the API.
4. Matching: The backend extracts the live embedding and runs a cosine distance query against the database using pgvector. If a match is found within the confidence threshold, attendance is marked for the day.

License

MIT License. Feel free to fork, modify, and deploy for your own institutional needs.