Download CV

Face Recognition Web Application – Project by Group Rakada

Introduction

As part of our third-year studies in applied informatics (ISB3), our team, Rui Daniel Gomes Vieira, Kato Schuerewegen, and Raf Vermeylen, developed a real-time face recognition web application. The goal was to recognize specific predefined individuals and display personalized information such as name, age, and gender. This project emphasizes a user-friendly experience while ensuring privacy and security through technologies like JavaScript, Flask, and Firebase.

Project Overview

The application identifies team members via webcam using face recognition in the browser and retrieves their profile data in real-time from a Firebase database. Initially, we experimented with Python’s OpenCV and dlib but switched to face-api.js for better browser compatibility and smoother deployment in cloud environments. The app’s architecture separates responsibilities between a Flask backend, a responsive Bootstrap frontend, and a cloud-native deployment setup using Docker and Kubernetes on Google Cloud.

We used domain registration, HTTPS security, and autoscaling on Kubernetes to ensure performance and availability. The project also features Snapchat-style filters and a few playful surprises like Rick-Roll integration for user engagement.

Project Objectives

  • Build a web-based face recognition system with real-time user data retrieval.
  • Deploy the system using Kubernetes, Docker, and Google Cloud infrastructure.
  • Ensure scalability and availability via autoscaling and Ingress controllers.
  • Implement interactive features like emoji-based expression detection and fun filters.
  • Design a secure and user-friendly interface for adding and managing profiles.

Technology Stack

We used a variety of technologies to build and deploy our project efficiently:

  • face-api.js: JavaScript library for browser-based facial recognition and expression detection.
  • Flask: Backend micro-framework used to handle routing and API logic.
  • Firebase: Real-time NoSQL database and storage bucket for managing profiles and image data securely.
  • Bootstrap & CSS: Used for building a clean, responsive UI.
  • Docker & Kubernetes: Containerization and orchestration for scalable, cloud-ready deployments.
  • NGINX Ingress & Let’s Encrypt: Secure HTTPS access and traffic routing via domain "rakada.nl".

Challenges and Learnings

One of the initial challenges was rendering dynamic data. Flask's default HTML rendering only worked on page load, so we implemented a JSON API for real-time updates. This allowed us to reflect user data changes instantly when a face was recognized.

We also faced performance issues: the original OpenCV setup was too slow for real-time use and incompatible with browser-based deployment. Switching to JavaScript resolved these issues but introduced new ones like frame flickering, which we resolved by throttling detection intervals.

Deployment introduced complexities, especially regarding webcam access on cloud servers. We overcame this by fully shifting detection to the frontend. Setting up HTTPS using Let’s Encrypt and configuring autoscaling in Kubernetes also provided valuable experience in modern DevOps practices.

Conclusion

This project provided in-depth experience in both AI-based frontend development and scalable backend infrastructure. We successfully built a real-time, cloud-deployed face recognition system with a playful interface and serious technological underpinnings.

We are proud of what we achieved, especially in integrating advanced recognition with cloud deployment, UI design, and interactive features. This project laid a strong foundation for future endeavors in machine learning, DevOps, and full-stack development within professional contexts.