Merge pull request #1272 from J-B-Mugundh/ml-model-security-framework

Added ML Model Protection Framework for Face Authentication

Author: sanjay-kv

OpenCV Projects/ML-Model-Protection-Framework-For-Facial-Recognition/README.md

@@ -0,0 +1,91 @@
+## Project Overview
+
+This project addresses the security challenges of deploying ML models for face authentication in a browser context. Our goal is to safeguard the ML model from reverse engineering and tampering while ensuring that security measures do not significantly impact the model’s size or degrade the user experience.
+
+## Description
+
+The application provides a proof of concept for face authentication using TensorFlow.js and FaceMesh in a browser environment. It integrates a Trusted Execution Environment (TEE) for secure handling of the ML model, employing AES-256 encryption for data protection and obfuscation techniques to optimize model size and security.
+
+## How It Works
+
+1. **Face Detection**:
+   - The frontend uses TensorFlow.js and the FaceMesh model to detect faces via the webcam.
+   - An encrypted message containing the face data is sent to the web server.
+
+2. **Data Handling**:
+   - The web server forwards the encrypted data to the TEE server for decryption and authentication.
+
+3. **Model Security**:
+   - The TEE server decrypts the data using AES-256 encryption.
+   - The model is obfuscated and snapshotting is used to minimize its size and improve load times.
+
+4. **Authentication**:
+   - Based on the decrypted data, the TEE server checks if the face authentication is successful.
+   - The result is sent back to the web server and then displayed to the client.
+
+## Technologies, Frameworks, and Tools
+
+- **Frontend**:
+  - HTML
+  - JavaScript
+  - TensorFlow.js
+  - FaceMesh
+
+- **Backend**:
+  - Flask
+  - MongoDB (for potential data storage)
+
+- **Security**:
+  - AES-256 Encryption
+  - Trusted Execution Environment (TEE)
+  - Obfuscation
+  - Snapshotting
+
+## Unique Selling Points
+
+- **Secure Model Handling**: Utilizes Trusted Execution Environment (TEE) to protect against tampering and reverse engineering.
+- **Efficient Encryption**: Employs AES-256 encryption for secure data transmission.
+- **Optimized Model Size**: Integrates obfuscation and snapshotting techniques to minimize model size impact.
+- **Real-Time Authentication**: Leverages TensorFlow.js and FaceMesh for accurate face detection directly in the browser.
+- **Seamless Integration**: Maintains user experience with minimal performance overhead while ensuring robust security.
+
+## Installation
+
+1. **Clone the repository**:
+    ```bash
+    git clone <repository-url>
+    cd <repository-name>
+    ```
+
+2. **Install Python dependencies**:
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+## Running the Application
+
+1. **Start the TEE server**:
+    ```bash
+    python tee_server.py
+    ```
+
+2. **Start the Web server**:
+    ```bash
+    python web_server.py
+    ```
+
+3. **Access the application**:
+    Open a web browser and navigate to `http://localhost:5000`. You will see the registration and login pages.
+
+4. **Test the application**:
+    - **Register**: Enter a username and click "Register" to save the face image.
+    - **Login**: Enter the username and click "Login" to authenticate with the captured face image. Successful login will redirect to the home page.
+
+## Troubleshooting
+
+- **Video not appearing**: Ensure that the webcam is properly connected and permissions are granted for the browser to access it.
+- **Issues with image capture**: Check the browser console for errors related to the webcam or canvas.
+
+## Acknowledgments
+
+- Thanks to TensorFlow.js and FaceMesh for their face detection capabilities.

OpenCV Projects/ML-Model-Protection-Framework-For-Facial-Recognition/faces/Mysterio.png

@@ -0,0 +1,17 @@
+from cryptography.hazmat.primitives.ciphers import algorithms
+from cryptography.hazmat.primitives import hashes
+from cryptography.hazmat.backends import default_backend
+import base64
+import os
+
+# Generate a 256-bit (32-byte) AES key
+key = os.urandom(32)  # AES-256 requires a 32-byte key
+iv = os.urandom(16)   # AES block size is 16 bytes
+
+# Encode key and IV in Base64 for easy storage in .env
+key_b64 = base64.b64encode(key).decode('utf-8')
+iv_b64 = base64.b64encode(iv).decode('utf-8')
+
+# Print the results
+print(f'AES_KEY={key_b64}')
+print(f'AES_IV={iv_b64}')

OpenCV Projects/ML-Model-Protection-Framework-For-Facial-Recognition/generate_keys.py

@@ -0,0 +1,6 @@
+Flask
+cryptography
+python-dotenv
+requests
+face_recognition
+pillow

OpenCV Projects/ML-Model-Protection-Framework-For-Facial-Recognition/requirements.txt

@@ -0,0 +1,80 @@
+let model;
+
+// Initialize the camera for video feed
+async function initializeCamera() {
+    const video = document.getElementById('video');
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    video.srcObject = stream;
+}
+
+// Load the FaceMesh model (for client-side basic processing if needed)
+async function initializeModel() {
+    model = await facemesh.load();
+    document.getElementById('status').textContent = 'Model loaded, ready for authentication...';
+}
+
+// Capture an image from the video feed
+function captureImage() {
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('canvas');
+    const context = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/png');
+}
+
+// Register a new user with the captured image
+async function register() {
+    const username = document.getElementById('register-username').value;
+    const image = captureImage();
+
+    const response = await fetch('/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username, data: image })
+    });
+
+    const result = await response.json();
+    document.getElementById('status').textContent = result.result || result.error;
+}
+
+// Login a user and authenticate their face
+async function login() {
+    const username = document.getElementById('login-username').value;
+    const image = captureImage();
+
+    const response = await fetch('/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ username: username, data: image })
+    });
+
+    const result = await response.json();
+    document.getElementById('status').textContent = result.result || result.error;
+
+    if (result.result) {
+        // Redirect to a dummy home page after successful login
+        setTimeout(() => {
+            window.location.href = "/static/home.html";
+        }, 2000);
+    }
+}
+
+// Toggle between register and login forms
+function toggleAuth() {
+    const registerContainer = document.getElementById('register-container');
+    const loginContainer = document.getElementById('login-container');
+
+    if (registerContainer.classList.contains('auth-hidden')) {
+        registerContainer.classList.remove('auth-hidden');
+        loginContainer.classList.add('auth-hidden');
+    } else {
+        registerContainer.classList.add('auth-hidden');
+        loginContainer.classList.remove('auth-hidden');
+    }
+}
+
+// Initialize everything on page load
+initializeCamera();
+initializeModel();

OpenCV Projects/ML-Model-Protection-Framework-For-Facial-Recognition/static/app.js

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome Home</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #f06, #ff9a9e);
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #fff;
+            overflow: hidden;
+        }
+
+        .container {
+            text-align: center;
+            max-width: 600px;
+            padding: 20px;
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+
+        h1 {
+            font-size: 3rem;
+            margin: 0;
+            opacity: 0;
+            animation: fadeIn 2s forwards;
+            animation-delay: 1s;
+        }
+
+        p {
+            font-size: 1.2rem;
+            margin: 20px 0;
+            opacity: 0;
+            animation: fadeIn 2s forwards;
+            animation-delay: 2s;
+        }
+
+        button {
+            padding: 10px 20px;
+            font-size: 1rem;
+            color: #fff;
+            background-color: #007bff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            opacity: 0;
+            animation: fadeIn 2s forwards;
+            animation-delay: 3s;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome Home!</h1>
+        <p>You have successfully logged in.</p>
+        <button onclick="window.location.href='/'">Back to Login</button>
+    </div>
+</body>
+</html>