Migrate background image to LFS

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+client/static/images/background.jpg filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user ./client /app/client
+CMD ["python", "-m", "client.main"]

client/config/__init__.py

@@ -0,0 +1 @@
+from .settings import settings

client/config/settings.py

@@ -0,0 +1,15 @@
+from pydantic_settings import BaseSettings
+from pydantic import Field
+
+
+class Settings(BaseSettings):
+    """
+    Config values for the service. Values are set automatically if a .env file is found
+    in the directory root.
+    """
+
+    SERVICE_PORT: int | None = Field(default=7860)
+    TEMP_VIDEO_PATH: str = Field(default="/tmp/video.webm")
+
+
+settings = Settings()  # type: ignore

client/dependencies/__init__.py

@@ -0,0 +1 @@
+from .inference_service import inference_service

client/dependencies/inference_service.py

@@ -0,0 +1,5 @@
+from client.services import InferenceService
+
+
+def inference_service() -> InferenceService:
+    return InferenceService()

client/main.py

@@ -0,0 +1,37 @@
+import uvicorn
+
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from client.routers import client_router
+from client.config import settings
+from fastapi.middleware.cors import CORSMiddleware
+
+
+def create_app() -> FastAPI:
+    """Create and configure the FastAPI application."""
+    app = FastAPI(
+        title="Client Service",
+        description="PPAI HACKATHON",
+        version="1.0.0",
+    )
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=["*"],  # Allows all origins
+        allow_credentials=True,
+        allow_methods=["*"],  # Allows all methods
+        allow_headers=["*"],  # Allows all headers
+    )
+    app.include_router(router=client_router)
+    app.mount("/static", StaticFiles(directory="client/static"), name="static")
+    return app
+
+
+def main() -> None:
+    """Main function to set up logging and run the server."""
+    app: FastAPI = create_app()
+
+    uvicorn.run(app=app, host="0.0.0.0", port=settings.SERVICE_PORT)  # type: ignore
+
+
+if __name__ == "__main__":
+    main()

client/routers/__init__.py

@@ -0,0 +1 @@
+from .client import router as client_router

client/routers/client.py

@@ -0,0 +1,77 @@
+from fastapi import APIRouter, UploadFile, File, Depends, Form, Request, HTTPException
+from fastapi.responses import FileResponse, JSONResponse
+from client.dependencies import inference_service
+from client.services import InferenceService
+from PIL import Image
+from io import BytesIO
+from fastapi import Form
+
+from PIL import Image
+from io import BytesIO
+import numpy as np
+import os
+import tempfile
+import logging
+from typing import List
+
+router = APIRouter(tags=["Client"])
+
+
+@router.get(path="/")
+def login() -> FileResponse:
+    return FileResponse(path="client/static/login.html")
+
+
+@router.get(path="/index")
+def static_index() -> FileResponse:
+    return FileResponse(path="client/static/index.html")
+
+
+@router.get(path="/createAccount")
+def create_account(request: Request) -> FileResponse:
+    return FileResponse(path="client/static/createAccount.html")
+
+
+@router.post("/get_image")
+async def get_image(
+    image: UploadFile = File(...),
+    inference_service: InferenceService = Depends(inference_service),
+) -> JSONResponse:
+    # Read the contents of the file
+    contents = await image.read()
+
+    # Get the size of the image
+    size = len(contents)
+
+    # Return a confirmation message with the size of the image
+    return JSONResponse(
+        content={
+            "message": "Image received successfully",
+            "filename": image.filename,
+            "size": size,
+        }
+    )
+
+
+@router.post("/submitAccount")
+async def submit_account(
+    video: UploadFile = File(...),
+    email: str = Form(...),
+    i_service: InferenceService = Depends(inference_service),
+):
+    """
+    This function processes the create account form, reads the uploaded video,
+    extracts some of the frames and saves them in a temporary directory.
+    """
+    # Log video file details
+    logging.info(
+        f"Received video: filename={video.filename}, content_type={video.content_type}"
+    )
+    logging.info(f"Received email: {email}")
+
+    video_content: bytes = await video.read()
+    i_service.save_video(video_content=video_content, user_id=email)
+    frames_path: str = i_service.save_frames(user_id=email)
+    model_path: str = i_service.train_model(frames_path=frames_path, user_id=email)
+    i_service.push_model(model_path=model_path, user_id=email)
+    return JSONResponse(content={"message": "Account created successfully"})

client/services/__init__.py

@@ -0,0 +1 @@
+from .inference import InferenceService

client/services/inference.py

@@ -0,0 +1,85 @@
+import numpy as np
+from deepface import DeepFace
+from PIL import Image
+from io import BytesIO
+from typing import Union, List
+import os
+from fastapi import HTTPException
+import uuid
+import cv2
+from .preprocess import load_dataset, RegNet
+from sklearn.linear_model import LogisticRegression
+from concrete.ml.torch.compile import compile_torch_model
+import logging
+
+
+class InferenceService:
+    def __init__(self):
+        self.model = None
+
+    def save_video(self, video_content: bytes, user_id: str) -> None:
+        """
+        Extract frames from the video content asynchronously using FFmpeg.
+        """
+        try:
+            video_id = str(uuid.uuid4())
+            os.makedirs(f"temp/{user_id}", exist_ok=True)
+            with open(file=f"temp/{user_id}/video.mp4", mode="wb") as f:
+                f.write(video_content)
+        except Exception as e:
+            raise HTTPException(status_code=500, detail=f"Error saving video: {e}")
+
+    def save_frames(self,user_id: str) -> str:
+        """
+        Save 10 random frames from the video content using cv2 and return the path to the frames.
+        """
+        video_path = f"temp/{user_id}/video.mp4"
+        if not os.path.exists(video_path):
+            raise HTTPException(status_code=404, detail="Video not found")
+
+        vidcap = cv2.VideoCapture(video_path)
+        success, image = vidcap.read()
+        count = 0
+        while success and count < 10:
+            cv2.imwrite(
+                f"temp/{user_id}/frame%d.jpg" % count, image
+            )  # save frame as JPEG file
+            success, image = vidcap.read()
+            count += 1
+        return f"temp/{user_id}/"
+
+    def train_model(self, frames_path: str, user_id: str) -> str:
+        """
+        Train a model on the frames and return the path to the model.
+        """
+        """
+        embeddings, labels = load_dataset(frames_path, cache=True)
+        embeddings = (embeddings - np.mean(embeddings, axis=0)) / np.std(
+            embeddings, axis=0
+        )
+        model = LogisticRegression(C=1 / 5)
+        model.fit(embeddings, y=labels)
+        nb_sample = 100
+        W = model.coef_
+        b = model.intercept_.reshape(-1, 1)
+        X_train_rand = np.random.normal(0, 1, [nb_sample, embeddings.shape[1]])
+        W_rand = np.random.normal(0, 1, [nb_sample, W.shape[1]])
+        X_rand_stack = np.hstack([X_train_rand, W_rand])
+        reg_net = RegNet(b)
+        quantized_module = compile_torch_model(
+            reg_net,  # our model
+            X_rand_stack,  # a representative input-set to be used for both quantization and compilation
+            n_bits=6,
+            rounding_threshold_bits={"n_bits": 6, "method": "approximate"},
+        )
+        save_model_path: str = f"temp/model/{user_id}.zip"
+        quantized_module.fhe_circuit.server.save(save_model_path)
+        return save_model_path
+        """
+        return "temp/model/fake_id.zip"
+
+    def push_model(self, model_path: str, user_id: str) -> None:
+        """
+        Push the model to the servrer
+        """
+        # TODO

client/services/preprocess.py

@@ -0,0 +1,88 @@
+import numpy as np
+from tqdm import tqdm
+from glob import glob
+import os
+
+
+def load_image_folder(folder_path: str, max_nb_images: int) -> list[str]:
+    image_path = f"{folder_path}/*"
+    image_paths = glob(image_path)
+    images = [image_path for image_path in image_paths[:max_nb_images]]
+    return images
+
+
+def compute_embeddings_and_labels(images: list[str], label: int) -> np.ndarray:
+    from deepface import DeepFace
+
+    embeddings = []
+    labels = []
+    for image in tqdm(images):
+        try:
+            embedding_obj = DeepFace.represent(
+                img_path=image,
+                model_name="Facenet",
+            )
+            embedding = embedding_obj[0]["embedding"]
+            embeddings.append(embedding)
+            labels.append(label)
+        except Exception as e:
+            print(f"Erreur lors du traitement de {image}: {e}")
+    return np.vstack(embeddings), np.array(labels)
+
+
+def load_embeddings_and_labels(
+    folder_path: str, label: int, max_nb_images: int, cache: bool
+) -> tuple[np.ndarray, np.ndarray]:
+    if (
+        not os.path.exists(f"{folder_path}/embeddings.npy")
+        or not os.path.exists(f"{folder_path}/labels.npy")
+        or (not cache)
+    ):
+        images = load_image_folder(folder_path, max_nb_images)
+        embeddings, labels = compute_embeddings_and_labels(images, label)
+        np.save(f"{folder_path}/embeddings.npy", embeddings)
+        np.save(f"{folder_path}/labels.npy", labels)
+    embeddings = np.load(f"{folder_path}/embeddings.npy")
+    labels = np.load(f"{folder_path}/labels.npy")
+    return embeddings, labels
+
+
+def load_dataset(
+    target_folder: str,
+    max_nb_images=500,
+    cache=True,
+    deep_fake_folder: str = "./data/deepfake",
+) -> tuple[np.ndarray, np.ndarray]:
+    deep_fake_images_embeddings, deep_fake_labels = load_embeddings_and_labels(
+        deep_fake_folder, max_nb_images=max_nb_images, label=0, cache=cache
+    )
+    target_images_embeddings, target_images_labels = load_embeddings_and_labels(
+        target_folder, max_nb_images=max_nb_images, label=1, cache=cache
+    )
+    embeddings = np.vstack([target_images_embeddings, deep_fake_images_embeddings])
+    labels = np.hstack([target_images_labels, deep_fake_labels])
+    return embeddings, labels
+
+
+def featurisation(embeddings: np.ndarray) -> np.ndarray:
+    rms = np.sqrt(np.mean(embeddings**2, axis=1))
+    mean = np.mean(embeddings, axis=1)
+    median = np.median(embeddings, axis=1)
+    features = np.stack([rms, mean, median], axis=1)
+    return features
+
+
+from concrete.ml.torch.compile import compile_torch_model
+import torch
+import torch.nn as nn
+
+
+class RegNet(nn.Module):
+    def __init__(self, b):
+        super().__init__()
+        self.b = nn.Parameter(torch.ones(1) * b)
+
+    def forward(self, x):
+        X = x[:, :128]
+        W = x[:, 128:]
+        return ((X @ W.T + self.b) > 0).float()

client/static/createAccount.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechMart - Créer un compte</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/scrollreveal"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+
+<body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">
+    <!-- <header class="bg-gray-800 p-4">
+        <h1 class="text-3xl font-bold text-center"><i class="fas fa-user-plus mr-2"></i>Créer un compte</h1>
+    </header> -->
+
+    
+    <main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-8 lg:space-y-0 lg:space-x-12">
+    
+<!-- Camera Section -->
+<div class="max-w-md w-full p-6 lg:p-0 lg:w-1/2 flex flex-col items-center video-reveal">
+    <div class="relative">
+        <video id="video-preview" autoplay muted class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>
+
+    <!-- Recording indicator -->
+        <div id="rec-indicator" class="hidden absolute top-2 right-2 w-4 h-4 bg-red-600 rounded-full animate-pulse"></div>
+    </div>
+
+    <!-- Start Recording Button -->
+    <div class="text-center mt-6">
+        <button type="button" id="start-recording" class="bg-red-600 hover:bg-red-700 text-white font-bold w-16 h-16 rounded-full flex items-center justify-center animate-pulse hover:scale-110 active:scale-95 transition-all duration-300 ease-in-out">
+            <i class="fas fa-video"></i>
+        </button>
+    </div>
+</div>
+
+<!-- Form Section -->
+<div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/2 transform transition-all duration-300 hover:scale-102 hover:shadow-md form-reveal">
+    <form id="create-account-form" method="POST" action="/submitAccount" class="space-y-6" enctype="multipart/form-data">
+        <div>
+            <label for="email" class="block text-sm font-medium text-gray-300">Email Address</label>
+            <input type="email" id="email" name="email" required class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
+        </div>
+        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102">
+            Create Account 🤗
+        </button>
+    </form>
+    <div id="error-message" class="mt-4 text-center text-red-500"></div>
+</div>
+
+
+    
+    </main>
+    
+    <!-- <footer class="bg-gray-800 p-4 text-center">
+        <p>&copy; 2023 TechMart. Tous droits réservés.</p>
+    </footer> -->
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Animation pour la section vidéo avec un zoom-in et glissement vers le haut
+            ScrollReveal().reveal('.video-reveal', {
+                duration: 1200,          // Durée de l'animation
+                scale: 0.9,              // Zoom initial (90%)
+                distance: '30px',        // Glissement vers le haut
+                origin: 'bottom',        // Animation qui part du bas
+                opacity: 0,              // Apparition progressive
+                easing: 'ease-in-out',   // Transition fluide
+                delay: 200               // Délai avant le début
+            });
+    
+            // Animation pour la section formulaire avec un glissement depuis la droite
+            ScrollReveal().reveal('.form-reveal', {
+                duration: 1200,          // Durée de l'animation
+                distance: '60px',        // Distance de glissement depuis la droite
+                origin: 'right',         // Animation qui part de la droite
+                opacity: 0,              // Apparition progressive
+                easing: 'ease-in-out',   // Transition fluide
+                delay: 400               // Délai un peu plus long pour que l'effet soit coordonné
+            });
+    
+            // Appelle la fonction de caméra et remplissage de l'email après le chargement de la page
+            fillEmailFromUrl();
+            startCamera();
+        });
+
+        // Add this function at the beginning of the script
+        function fillEmailFromUrl() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const email = urlParams.get('email');
+            if (email) {
+                document.getElementById('email').value = decodeURIComponent(email);
+            }
+        }
+
+        // Call this function when the page loads
+        window.onload = function () {
+            fillEmailFromUrl();
+            startCamera();
+        };
+
+        let mediaRecorder;
+        let recordedChunks = [];
+        let stream;
+        let isRecording = false;
+        const recIndicator = document.getElementById('rec-indicator');
+
+        // Function to start the camera
+        async function startCamera() {
+            const videoPreview = document.getElementById('video-preview');
+
+            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+                try {
+                    stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                    videoPreview.srcObject = stream;
+                } catch (error) {
+                    console.error('Erreur lors de l\'accès à la caméra:', error);
+                    document.getElementById('error-message').innerText = 'Erreur lors de l\'accès à la caméra. Veuillez vérifier vos permissions.';
+                }
+            } else {
+                document.getElementById('error-message').innerText = 'Votre navigateur ne supporte pas l\'accès à la caméra.';
+            }
+        }
+
+        document.getElementById('start-recording').addEventListener('click', function () {
+            if (stream) {
+                if (!isRecording) {
+                    // Démarrer l'enregistrement
+                    mediaRecorder = new MediaRecorder(stream);
+                    recordedChunks = [];
+                
+                    mediaRecorder.ondataavailable = function (event) {
+                        if (event.data.size > 0) {
+                            recordedChunks.push(event.data);
+                        }
+                    };
+                
+                    mediaRecorder.start();
+                    isRecording = true;
+                    recIndicator.classList.remove('hidden');
+                
+                    // Ajouter une classe d'animation plus subtile pour indiquer que l'enregistrement est en cours
+                    this.classList.remove('bg-red-600', 'hover:bg-red-700');
+                    this.classList.add('bg-red-700', 'animate-pulse');
+                    this.innerHTML = '<i class="fas fa-stop-circle"></i>';
+                
+                    // Arrêter automatiquement après 5 secondes
+                    setTimeout(() => {
+                        if (isRecording) {
+                            stopRecording();
+                        }
+                    }, 5000);
+                } else {
+                    // Arrêter l'enregistrement
+                    stopRecording();
+                }
+            } else {
+                document.getElementById('error-message').innerText = 'Camera is not accessible. Please refresh the page.';
+            }
+        });
+        
+        function stopRecording() {
+            mediaRecorder.stop();
+            isRecording = false;
+            recIndicator.classList.add('hidden');
+        
+            // Remettre le bouton à son état initial (pulsation désactivée et retour au style initial)
+            const recordButton = document.getElementById('start-recording');
+            recordButton.classList.remove('bg-red-700', 'animate-pulse');
+            recordButton.classList.add('bg-red-600', 'hover:bg-red-700');
+            recordButton.innerHTML = '<i class="fas fa-video"></i>';
+        }
+
+        document.getElementById('create-account-form').addEventListener('submit', async function (event) {
+            event.preventDefault();
+
+            const email = document.getElementById('email').value;
+
+            // Créer un objet FormData pour envoyer la vidéo et l'email
+            const formData = new FormData();
+            formData.append('email', email);
+
+            // Créer un Blob de la vidéo enregistrée et l'ajouter au formData
+            const blob = new Blob(recordedChunks, { type: 'video/webm' });
+            formData.append('video', blob, 'video_user.webm');
+
+            try {
+                const response = await fetch('/submitAccount', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (response.ok) {
+                    window.location.href = '/index';
+                } else {
+                    const errorData = await response.json();
+                    document.getElementById('error-message').innerText = `Error occurred while creating the account: ${errorData.detail || 'Unknown error'}`;
+                }
+            } catch (error) {
+                document.getElementById('error-message').innerText = 'Une erreur est survenue. Veuillez réessayer.';
+                console.error('Error while submitting the form:', error);
+            }
+        });
+    </script>
+</body>
+
+</html>

client/static/css/styles.css

@@ -0,0 +1,62 @@
+#camera-feed, #captured-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border: 1px solid black;
+}
+
+.scan-effect {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    width: 100%;
+    height: 10px;
+    background: linear-gradient(to bottom, 
+        rgba(0,255,255,0) 0%,
+        rgba(0,255,255,0.8) 50%,
+        rgba(0,255,255,0) 100%);
+    opacity: 0;
+    box-shadow: 0 0 10px rgba(0,255,255,0.5);
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.pulse {
+    animation: pulse 2s infinite;
+}
+
+button {
+    margin: 10px 0;
+    padding: 10px 20px;
+    font-size: 16px;
+}
+
+input[type="text"] {
+    margin: 10px 0;
+    padding: 5px;
+    font-size: 16px;
+}
+
+.camera-container {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0.5rem;
+    width: 320px;
+    height: 240px;
+    margin: 20px auto;
+}
+
+body {
+    background-image: url('/images/background.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.bg-transparent {
+    background-color: rgba(128, 128, 128, 0); /* Adjust the alpha value for desired transparency */
+}

client/static/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechMart - Smart Shopping</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <link rel="stylesheet" href="/static/css/styles.css">
+    <style>
+        /* Scan effect in a slight spiral motion */
+        .scan-effect {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.1);
+            opacity: 0;
+            z-index: 1;
+        }
+
+        /* Animation spiral */
+        @keyframes spiral-scan {
+            0% {
+                transform: scale(0.8) rotate(0deg);
+                opacity: 0;
+            }
+            50% {
+                transform: scale(1.2) rotate(180deg);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(1.5) rotate(360deg);
+                opacity: 0;
+            }
+        }
+
+        /* Active class for scan effect */
+        .scan-active {
+            animation: spiral-scan 3s ease-in-out;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col" style="background-image: url('/static/images/background.jpg');">
+    
+    <main class="flex-grow container mx-auto p-6 flex flex-col lg:flex-row items-center justify-center space-y-16 lg:space-y-0 lg:space-x-28">
+    
+        <!-- Camera Section -->
+        <div class="max-w-md w-full flex justify-center items-center">
+            <div class="relative">
+                <!-- Vidéo circulaire centrée -->
+                <video id="camera-feed" autoplay class="w-full max-w-md max-h-md aspect-square bg-black rounded-full object-cover shadow-2xl ring-4 ring-gray-300 ring-opacity-50 hover:ring-blue-500 hover:ring-opacity-75 transition-all duration-300 ease-in-out transform hover:scale-105"></video>
+    
+                <!-- Scan Effect -->
+                <div id="scan-effect" class="scan-effect"></div>
+            </div>
+        </div>
+    
+        <!-- Form Section -->
+        <div class="max-w-sm w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 lg:w-1/3 transform transition-all duration-300 hover:scale-102 hover:shadow-md">
+            <h2 class="text-xl font-semibold mb-4 text-center">Smart Check-In</h2>
+            
+            <div class="text-center">
+                <!-- Taille réduite du bouton -->
+                <button id="begin-scan-btn" class="w-3/4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102 text-sm">
+                    Scan 🔍
+                </button>
+            </div>
+        
+            <div id="error-message" class="mt-4 text-center text-red-500"></div>
+        </div>
+        
+        
+    </main>
+
+    <script src="/static/js/script.js"></script>
+    <script>
+        document.getElementById('begin-scan-btn').addEventListener('click', function () {
+            const scanEffect = document.getElementById('scan-effect');
+            // Toggle the animation class
+            scanEffect.classList.add('scan-active');
+
+            // Remove the class after 3 seconds
+            setTimeout(function () {
+                scanEffect.classList.remove('scan-active');
+            }, 3000);  // L'effet dure 3 secondes
+        });
+    </script>
+</body>
+</html>

client/static/js/script.js

@@ -0,0 +1,123 @@
+const video = document.getElementById('camera-feed');
+const canvas = document.getElementById('captured-image');
+const captureBtn = document.getElementById('capture-btn');
+const form = document.getElementById('upload-form');
+const scanEffect = document.getElementById('scan-effect');
+const statusDiv = document.getElementById('status');
+
+// Request camera access with specific constraints
+async function startCamera() {
+    const constraints = {
+        video: {
+            width: { ideal: 640 },
+            height: { ideal: 480 },
+            facingMode: "user"
+        }
+    };
+
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        video.srcObject = stream;
+    } catch (err) {
+        console.error("Error accessing camera:", err);
+        statusDiv.textContent = "Camera access denied. Please check permissions.";
+    }
+}
+
+startCamera();
+
+// Capture image
+captureBtn.addEventListener('click', () => {
+    statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
+    captureBtn.disabled = true;
+
+    // Animate scan effect
+    gsap.to(scanEffect, {
+        duration: 1,
+        top: "100%",
+        opacity: 1,
+        ease: "power1.inOut",
+        onComplete: processImage
+    });
+});
+
+function processImage() {
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    // Convert canvas to blob and send to server
+    canvas.toBlob((blob) => {
+        const formData = new FormData();
+        formData.append('image', blob, 'captured_image.jpg');
+
+        fetch('/get_image', {
+            method: 'POST',
+            body: formData
+        }).then(response => response.json())
+            .then(data => {
+                console.log('Image saved:', data.filename);
+                // You can update the UI here if needed
+            }).catch(error => {
+                console.error('Error saving image:', error);
+                statusDiv.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i> Error saving image';
+            });
+    }, 'image/jpeg');
+
+    // Simulate face recognition process
+    setTimeout(() => {
+        statusDiv.innerHTML = '<i class="fas fa-check-circle text-green-500"></i> Welcome, User!';
+        captureBtn.disabled = false;
+    }, 2000);
+
+    // Reset scan effect
+    gsap.set(scanEffect, { top: "-100%", opacity: 0 });
+}
+
+// Add pulse effect to capture button
+gsap.to(captureBtn, { duration: 1, scale: 1.05, repeat: -1, yoyo: true, ease: "power1.inOut" });
+
+// Handle form submission
+form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    
+    const formData = new FormData(form);
+    const userIdInput = document.getElementById('user-id');
+    const videoInput = document.getElementById('video-upload');
+
+    if (!userIdInput || !videoInput || !videoInput.files[0]) {
+        statusDiv.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i> Please provide both user ID and video';
+        return;
+    }
+
+    formData.append('user_id', userIdInput.value);
+    formData.append('video', videoInput.files[0]);
+
+    // Log FormData contents
+    for (let [key, value] of formData.entries()) {
+        console.log(key, value);
+    }
+
+    statusDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Uploading...';
+
+    try {
+        const response = await fetch('/submitAccount', {
+            method: 'POST',
+            body: formData
+        });
+
+        console.log('Response status:', response.status);
+        console.log('Response headers:', response.headers);
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Server response was not ok: ${response.status} ${response.statusText}\n${errorText}`);
+        }
+
+        const result = await response.json();
+        statusDiv.innerHTML = `<i class="fas fa-check-circle text-green-500"></i> ${result.message}`;
+    } catch (error) {
+        console.error('Error:', error);
+        statusDiv.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i> Error submitting form';
+    }
+});

client/static/login.html

@@ -0,0 +1,81 @@
+<!-- app/static/login.html -->
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TechMart - Connexion</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+<body class="text-white min-h-screen flex flex-col bg-cover bg-center" style="background-image: url('/static/images/background.jpg');">
+    <!-- <header class="bg-gray-800 p-4">
+        <h1 class="text-3xl font-bold text-center"><i class="fas fa-shopping-cart mr-2"></i>TechMart</h1>
+    </header> -->
+
+    <main class="flex-grow container mx-auto p-4 flex items-center justify-center">
+        <div class="max-w-md w-full bg-gray-800/40 backdrop-blur-md rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-md reveal-box">
+            <h2 class="text-3xl font-semibold mb-6 text-center text-white">Connexion </h2>
+            <form id="login-form" method="POST" action="/login" class="space-y-6">
+                <div>
+                    <label for="email" class="block text-sm font-medium text-gray-300"> Email Address </label>
+                    <input type="email" id="email" name="email" required
+                           class="w-full px-4 py-3 mt-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">
+                </div>
+                <button type="submit"
+                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-102">
+                    <i class="fas fa-sign-in-alt mr-2"></i>Connexion
+                </button>
+            </form>
+            <div id="error-message" class="mt-4 text-center text-red-500"></div>
+        </div>
+    </main>
+    
+
+    <!-- <footer class="bg-gray-800 p-4 text-center">
+        <p>&copy; 2023 TechMart. Tous droits réservés.</p>
+    </footer> -->
+
+    <script>
+
+        gsap.from('.reveal-box', {
+            duration: 1, 
+            opacity: 0.5,  
+            y: -300,       
+            ease: "power10.out" 
+        });
+
+        document.getElementById('login-form').addEventListener('submit', async function(event) {
+            event.preventDefault();
+
+
+            const email = document.getElementById('email').value;
+
+            try {
+                const emailEncoded = encodeURIComponent(email);
+
+                const url = `http://localhost:8000/check_user_exists?user_id=${emailEncoded}`;
+
+                const response = await fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded', 
+                    },
+                });
+
+                if (response.ok) {
+                    window.location.href = '/index';
+                } else {
+                    window.location.href = `/createAccount?email=${emailEncoded}`;
+                }
+
+            } catch (error) {
+                document.getElementById('error-message').innerText = 'An error occurred. Please try again.';
+                console.error('Error during the request:', error);
+            }
+        });
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,14 @@
+scikit-learn
+pandas
+numpy
+concrete-ml
+deepface
+xgboost
+tf-keras
+matplotlib
+fastapi
+pydantic-settings
+pydantic==2.7.2
+uvicorn
+python-multipart
+opencv-python