Détection d’Émotions en Temps Réel avec Face-API.js

let video = document.getElementById('video');
let canvas = document.getElementById('overlay');
// Chemin d'accès relatif essentiel pour les serveurs locaux (Live Server)
const MODEL_URL = './face-api/'; 

/**
 * Solution Avancée : Patch du service 'fetch'
 * Cette fonction surcharge l'appel réseau de Face-API.js. Elle contourne
 * l'erreur HTTP 304 (Not Modified) en forçant le navigateur à toujours
 * re-télécharger les modèles, garantissant un statut 200 OK.
 */
faceapi.fetch = (uri, options) => {
    const newOptions = { 
        ...options, 
        cache: 'no-store' // Ignore le cache local
    };
    return fetch(uri, newOptions); 
};


document.addEventListener("DOMContentLoaded", (event) => {
    
    // Chargement des trois modèles asynchrones requis :
    // 1. Détection du visage (ssdMobilenetv1)
    // 2. Landmarks faciaux (faceLandmark68Net)
    // 3. Détection des expressions (faceExpressionNet)
    Promise.all([
        faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL),
        faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
        faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
    ]).then(startLiveDetection)
      .catch(err => {
          console.error("Erreur critique: Échec du chargement des modèles.", err);
      });

    function startLiveDetection() {
        
        // Nous utilisons les options par défaut du détecteur SSD MobileNet V1 pour une précision maximale.
        const detectionOptions = new faceapi.SsdMobilenetv1Options(); 

        // 2. Initialisation et connexion au flux de la webcam
        navigator.mediaDevices.getUserMedia({ video: {} })
            .then(stream => {
                video.srcObject = stream;
                
                // 3. Démarrage de la boucle de détection
                video.addEventListener('play', () => {
                    const displaySize = { width: video.width, height: video.height }; 
                    faceapi.matchDimensions(canvas, displaySize);

                    // Boucle de détection en temps réel, exécutée toutes les 100 ms
                    setInterval(async () => {
                        
                        // Enchaînement des étapes : Détection du visage -> Landmarks -> Expressions
                        const detections = await faceapi.detectAllFaces(video, detectionOptions) 
                            .withFaceLandmarks()
                            .withFaceExpressions();

                        // Mise à l'échelle des résultats pour correspondre au redimensionnement de la vidéo
                        const resizedDetections = faceapi.resizeResults(detections, displaySize);
                        
                        // Affichage
                        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
                        faceapi.draw.drawFaceExpressions(canvas, resizedDetections, 0.05);

                    }, 100); 
                });
            })
            .catch(err => console.error("Erreur d'accès à la caméra : Veuillez vérifier les permissions.", err));
    }
});