Chandigarh University • Section 407-B • AI Applications Lab

MaskAI: Face Mask Detection System

Computer Vision & Deep Learning with YuNet Face Detection & ResNet34 Classification

Team Member 01

Niharika

UID: 26BCS11206

Team Member 02

Kunj Kant

UID: 26BCS11208

Team Member 03

Shourya Dhuper

UID: 26BCS11224

Team Member 04

Subhreet

UID: 26BCS11230

Core Architecture

YuNet Face Detector + ResNet34 CNN

Transfer learning with PyTorch & Torchvision

Classification Scope

3 Distinct Output Classes

Mask Correct • Mask Incorrect • No Mask

Web Deployment

Flask & Real-Time UI

Dual mode: File upload & live webcam stream

02 • Executive Summary

Project Motivation & Background

The Challenge

Why Automated Mask Monitoring?

Post-pandemic safety, healthcare protocols, and industrial cleanrooms mandate compliant facial coverings. Manual inspections are error-prone, labor-intensive, and non-scalable in crowded public domains.

Critical Nuance:

A binary (Mask / No-Mask) model fails when a mask is worn below the nose or chin. MaskAI enforces strict 3-tier classification.

The MaskAI Solution

Integrated Deep Learning Vision

MaskAI combines lightweight face localization (YuNet) with a deep feature extraction backbone (ResNet34) wrapped in a Flask web application.

Modular Pipeline

Decoupled detection and classification ensures high throughput and adaptability.

Multi-Face Processing

Simultaneous bounding box cropping and batch classification per frame.

03 • Classification Scope

Problem Formulation: 3-Class Categorization

Mask Worn Correctly

Mask completely covers both the nose and the mouth, fitting securely against sides of the face with no gaps.

Diagnostic Rule

Nasal ridge and oral cavity obscured by approved protective fabric.

Mask Worn Incorrectly

Mask present on the subject's face but pulled under the nose, pulled down to the chin, or loosely hanging off one ear.

Diagnostic Rule

Mask detected on facial bbox, but key landmarks (nose/mouth) remain exposed.

No Mask Detected

Face completely exposed with zero protective barrier covering the mouth, nose, or lower facial region.

Diagnostic Rule

Full facial landmarks visible with zero occluding mask contours detected.

04 • Project Goals

Core Objectives & Milestones

OBJECTIVE 01

Real-Time Face Detection

Implement OpenCV with the YuNet detector to localize faces and extract precise bounding coordinates at high FPS.

OBJECTIVE 02

ResNet34 Deep Classification

Leverage a 34-layer residual CNN via PyTorch and Torchvision, replacing the output head to distinguish the 3 mask categories.

OBJECTIVE 03

Transfer Learning Integration

Harness pre-trained feature weights to maximize generalization, combat overfitting, and accelerate gradient convergence.

OBJECTIVE 04

Full-Stack Web Interface

Build an intuitive Flask server supporting image upload, live webcam streaming, and dynamic rendering of confidence scores and analytics.

05 • System Pipeline

End-to-End System Architecture

PHASE 1

Input Acquisition

Webcam video stream or image file uploaded via browser UI.

PHASE 2

YuNet Face Detection

OpenCV DNN scans frame to detect faces and compute bounding boxes.

PHASE 3

Face Cropping & Prep

ROI extraction, PIL conversion, and Torchvision tensor transforms.

PHASE 4

ResNet34 Inference

Feedforward pass through 34 residual layers to generate class logits.

PHASE 5

Flask UI Display

JSON serialization of label, confidence %, and annotated visual display.

Client Layer (Frontend)

HTML5 & CSS3 layout with dynamic result cards
JavaScript Canvas for frame grabbing & webcam API
Asynchronous Fetch requests sending base64/multipart data

Application Layer (Flask Backend)

HTTP endpoints receiving image buffers
OpenCV / NumPy array decoding and preprocessing
Orchestration between detection and deep learning model

AI Inference Engine

YuNet lightweight ONNX/OpenCV detector
Torchvision transforms for standard normalization
ResNet34 forward pass yielding Softmax class probabilities

06 • Technical Stack

Technologies, Frameworks & Libraries

Technology	Primary Purpose in MaskAI	Domain
Python	Primary programming language powering model pipelines & server	Core Language
PyTorch	Deep learning model building, transfer learning weights & tensor computation	Deep Learning
Torchvision	ResNet34 pretrained architecture access & image transformation pipelines	Vision Models
OpenCV & YuNet	Fast facial landmarking, ROI extraction & bounding box coordinate math	Computer Vision
Flask	Lightweight Python WSGI backend web framework routing API requests	Backend Web
NumPy & Pillow	High-speed multi-dimensional array operations & image format conversions	Data Handling
HTML / CSS / JS	Responsive client-side interface, video webcam capture & dynamic results	Frontend UI

07 • Detection Module

Stage 1: Face Detection via OpenCV & YuNet

Why YuNet for Face Detection?

YuNet is an ultra-fast, lightweight CNN face detector optimized natively for the OpenCV DNN module (cv::FaceDetectorYN). It is specifically built for real-time edge processing.

Ultra-Lightweight Footprint

Model size under a few megabytes; runs at high frame rates on standard CPU hardware without GPU requirement.

Multi-Scale & Landmark Extraction

Outputs 5 facial landmarks (eyes, nose tip, mouth corners) along with bounding box [x, y, w, h] and detection score.

YuNet Responsibilities in MaskAI

Stream Ingestion: Ingests frames decoded from image uploads or live webcam.
Face Localization: Detects single or multiple faces simultaneously in each scene.
Coordinate Extraction: Calculates exact facial bounding boxes [x, y, w, h] and confidence scores.
Sub-Image Cropping: Slices the face regions of interest (ROI) from the original high-res frame.
Handoff to Classifier: Passes cropped face patches directly into the ResNet34 pipeline.

VIVA CLARIFICATION NOTE

YuNet performs face detection only; it does NOT classify masks. Mask classification is strictly handled by ResNet34.

08 • Data Preprocessing

Stage 2: Preprocessing & Torchvision Transforms

Data Preparation Pipeline

1. Color Space Conversion (BGR → RGB)

OpenCV reads images in BGR format; converted to RGB via cv2.cvtColor for PyTorch compatibility.

2. Spatial Resizing (transforms.Resize)

Face crops vary in dimension. Standardized to 224×224 pixels, the native input dimension of ResNet34.

3. Tensor Conversion (transforms.ToTensor)

Converts PIL/NumPy arrays [0, 255] to PyTorch float tensors [0.0, 1.0] with shape [C, H, W].

4. Normalization (transforms.Normalize)

Standardized with ImageNet stats: mean=[0.485, 0.456, 0.406] and std=[0.229, 0.224, 0.225].

PyTorch Pipeline Implementation

  # Torchvision Transforms

  transform = transforms.Compose([

    transforms.Resize((224, 224)),

    transforms.ToTensor(),

    transforms.Normalize(

      mean=[0.485, 0.456, 0.406],

      std=[0.229, 0.224, 0.225]

    )

  ])

  input_tensor = transform(cropped_face).unsqueeze(0)

Key Invariant

Consistent normalization between pretrained weights and runtime inputs is mandatory for accurate inference.

09 • Deep Learning Backbone

Stage 3: ResNet34 Model Architecture

Architecture Specifications

Base Network ResNet-34 (Residual Network)

Total Convolutional Layers 34 Weighted Layers

Building Block BasicBlock (2x 3x3 Convs + Shortcut)

Feature Pooling Adaptive Average Pooling (1x1)

Output Features (in_features) 512 Dimensional Vector

Custom Linear Head nn.Linear(512, 3)

The Power of Residual Connections

Mathematical formulation:

F(x) + x

Instead of learning an underlying mapping H(x), residual blocks fit a residual mapping F(x) = H(x) - x.

Solves Vanishing Gradients: Shortcut skip-connections allow backpropagated error gradients to flow unimpeded directly to earlier layers.
Prevents Degradation: Identity shortcuts guarantee that deeper networks perform at least as well as shallower counterparts.
Fine Feature Discrimination: Captures facial texture nuances essential for detecting loose or misplaced masks.

10 • Transfer Learning

Transfer Learning & Classifier Adaptation

Pretrained Feature Transfer

Rather than training 34 convolutional layers from scratch with random initialization (which leads to severe overfitting on small datasets), MaskAI utilizes pretrained weights from ImageNet-1K.

Low-Level Features (Layers 1-16)

Gradients, edges, fabric textures, skin contours, and geometric shapes transferred directly.

High-Level Features (Layers 17-34)

Complex semantic face patterns adapted to discriminate between covered vs. bare mouth and nose areas.

PyTorch Output Head Replacement

  import torchvision.models as models

  import torch.nn as nn

  # Load pre-trained ResNet34 weights

  model = models.resnet34(weights="DEFAULT")

  # Replace default 1000-class fc layer

  num_features = model.fc.in_features  # 512

  model.fc = nn.Linear(num_features, 3)

  # Output: 3 class logits (with/without/incorrect)

Critical Viva Point

MaskAI uses a fine-tuned ResNet34 with transfer learning, NOT an experimental scratch CNN or randomly initialized weights.

11 • Server Architecture

Backend Web Server: Flask Integration

Flask Operational Role

WSGI Microframework

Minimal overhead, synchronous and asynchronous request processing directly coupled to PyTorch runtime.

Buffer Ingestion & Decoding

Decodes multipart/form-data images and webcam base64 streams directly into NumPy arrays via OpenCV.

JSON Response Serialization

Packages detection coordinates, predicted labels, confidence percentages, and timestamps to client.

Flask API Endpoints

GET /

Renders the responsive HTML5 interface with webcam feed controls.

POST /predict_image

Accepts uploaded static image files, runs full detection, returns JSON.

POST /predict_frame

Consumes real-time video snapshots from browser JS client loop.

12 • User Interface

Frontend Features & User Experience

UI Capabilities & Workflow

Image Drag-and-Drop: Intuitive file picker supporting JPEG, PNG, and WebP formats.
Webcam Streaming: Direct browser access using HTML5 MediaDevices API (navigator.mediaDevices.getUserMedia).
Dynamic Bounding Canvas: Client-side HTML5 canvas paints real-time bounding boxes around detected subjects.
Multi-Subject Detection: Automatically handles multiple faces within the same frame with distinct tags.