Face Recognition Web Application

A complete face detection and recognition web application built with Flask backend and HTML/JavaScript/Tailwind CSS frontend. The application supports face registration, real-time recognition, and webcam integration.

Features

🎯 Core Functionality

• Face Detection: Detect faces in uploaded images or webcam feed using OpenCV
• Face Registration: Register new faces with names for future recognition
• Face Recognition: Recognize registered faces with confidence scores
• Real-time Processing: Live webcam feed with continuous face recognition
• Image Upload: Support for uploading images for registration and recognition

🎨 User Interface

• Modern Design: Clean, responsive UI built with Tailwind CSS
• Dual Panels: Separate sections for registration and recognition
• Live Video Feed: Real-time webcam integration
• Visual Feedback: Face bounding boxes with name labels
• Status Messages: Real-time feedback for all operations
• Registered Faces Gallery: Visual display of all registered faces

🔧 Technical Features

• RESTful API: Well-structured Flask backend with clear endpoints
• CORS Support: Cross-origin requests enabled for frontend-backend communication
• Data Persistence: Face encodings stored in pickle format
• Error Handling: Comprehensive error handling and user feedback
• Responsive Design: Works on desktop and mobile devices

Project Structure

face-recognition-app/
├── src/
│   ├── data/                    # Face encodings storage
│   ├── database/               # SQLite database (optional)
│   ├── models/                 # Database models
│   ├── routes/                 # Flask route blueprints
│   │   ├── face_recognition.py # Face recognition API endpoints
│   │   └── user.py            # User management routes
│   ├── static/                # Frontend files
│   │   ├── index.html         # Main HTML file
│   │   ├── app.js            # JavaScript functionality
│   │   └── test_*.jpg        # Test images
│   └── main.py               # Flask application entry point
├── venv/                     # Python virtual environment
├── requirements.txt          # Python dependencies
└── README.md                # This file

Installation & Setup

Prerequisites

• Python 3.8 or higher
• pip (Python package installer)
• A modern web browser with webcam support

Installation Steps

1. Extract the project files

   unzip face-recognition-app.zip
   cd face-recognition-app

2. Create and activate virtual environment

   python3 -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install Python dependencies

   pip install -r requirements.txt

4. Run the application

   cd src
   python main.py

5. Access the application Open your web browser and navigate to: http://localhost:5000

Usage Guide

1. Face Registration

1. Enter Person Name: Type the name of the person you want to register
2. Choose Input Method:
   • Start Camera: Use webcam to capture a live photo
   • Upload Image: Select an image file from your device
3. Capture & Register: Click the button to register the face
4. Verification: Check the "Registered Faces" section to confirm registration

2. Face Recognition

1. Choose Recognition Method:
   • Live Recognition: Start webcam for real-time face recognition
   • Upload & Recognize: Upload an image for recognition
2. View Results:
   • Face bounding boxes appear around detected faces
   • Names and confidence scores are displayed
   • Recognition results are listed below the image

3. Management

• View Registered Faces: Scroll down to see all registered faces
• Clear All: Use the "Clear All" button to remove all registered faces
• Status Messages: Monitor the status bar for operation feedback

API Endpoints

Face Detection

• POST /api/face/detect
• Body: {"image": "base64_encoded_image"}
• Response: {"success": true, "faces": [...], "count": 1}

Face Registration

• POST /api/face/register
• Body: {"name": "Person Name", "image": "base64_encoded_image"}
• Response: {"success": true, "message": "Face registered successfully"}

Face Recognition

• POST /api/face/recognize
• Body: {"image": "base64_encoded_image"}
• Response: {"success": true, "faces": [...], "count": 1}

Get Registered Faces

• GET /api/face/registered
• Response: {"success": true, "registered_names": [...], "count": 2}

Clear All Faces

• POST /api/face/clear
• Response: {"success": true, "message": "All registered faces cleared"}

Technical Implementation

Backend (Flask)

• Face Detection: OpenCV Haar Cascade Classifier
• Face Recognition: Custom feature extraction and comparison
• Data Storage: Pickle files for face encodings
• API Design: RESTful endpoints with JSON responses
• Error Handling: Comprehensive error catching and user feedback

Frontend (HTML/JS/CSS)

• Framework: Vanilla JavaScript with Tailwind CSS
• Webcam Access: getUserMedia API for camera integration
• Image Processing: Canvas API for image manipulation
• Real-time Updates: Continuous recognition with visual feedback
• Responsive Design: Mobile-friendly interface

Face Recognition Algorithm

1. Detection: Haar Cascade detects face regions
2. Feature Extraction: Resize and normalize face regions
3. Encoding: Convert to grayscale and flatten as feature vector
4. Comparison: Normalized correlation coefficient for matching
5. Threshold: Configurable similarity threshold for recognition

Browser Compatibility

• Chrome: Full support (recommended)
• Firefox: Full support
• Safari: Full support
• Edge: Full support

Note: Webcam functionality requires HTTPS in production environments.

Troubleshooting

Common Issues

1. Camera not working

   • Ensure browser has camera permissions
   • Check if camera is being used by another application
   • Try refreshing the page

2. Face not detected

   • Ensure good lighting conditions
   • Face should be clearly visible and front-facing
   • Try different angles or distances

3. Recognition accuracy issues

   • Register faces with clear, well-lit images
   • Use consistent lighting conditions
   • Register multiple angles of the same person

4. Installation issues

   • Ensure all system dependencies are installed
   • Check Python version compatibility
   • Verify virtual environment activation

Performance Tips

• Use well-lit environments for better detection
• Register faces with clear, front-facing photos
• Avoid extreme angles or poor lighting
• Clear browser cache if experiencing issues

Development

Adding New Features

1. Backend: Add new routes in src/routes/face_recognition.py
2. Frontend: Extend functionality in src/static/app.js
3. Styling: Modify Tailwind classes in src/static/index.html

Security Considerations

• Face encodings are stored locally in pickle files
• No face images are permanently stored (only encodings)
• CORS is enabled for development (configure for production)
• Consider HTTPS for production deployment

License

This project is provided as-is for educational and development purposes.

Support

For issues or questions:

1. Check the troubleshooting section
2. Verify all dependencies are installed correctly
3. Ensure proper browser permissions for camera access

---

Enjoy using your Face Recognition Web Application! 🎉 Give me a star and follow me 🎉