use this text to know how to improve the recognition system and improve it: The data were obtained from 10 participants. Artificial neural networks (ANN) were adopted as the model. Composite features of facial descriptors (ie, eye aspect ratio (EAR), mouth aspect ratio (MAR), face length (FL), and face width balance (FWB)) extracted from two-second video frames were investigated.
Results
The ANN combined with the EAR and MAR features had the most sensitivity (70.12%) while the ANN combined with the EAR, MAR, and FL features had the most accuracy and specificity (60.76% and 58.71%, respectively). In addition, by applying the discrete Fourier transform (DFT) to the composite features, the ANN combined with the EAR and MAR features again had the highest sensitivity (72.25%), while the ANN combined with the EAR, MAR, and FL features had the highest accuracy and specificity (60.40% and 54.10%, respectively).
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drowsiness Detection</title>
    <style>
        body, html {
            margin: 0;
            overflow: hidden;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #222;
        }
        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
            color: white;
            font-family: Arial, sans-serif;
        }
        #fps, #drowsiness {
            margin-bottom: 10px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh"></script>
</head>
<body>
    <div id="controls">
        <div id="fps">FPS: 0</div>
        <div id="drowsiness">Drowsiness: Not Detected</div>
    </div>
    <canvas id="canvas"></canvas>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let video;
        let lastTimestamp = 0;
        const fpsDisplay = document.getElementById('fps');
        const drowsinessDisplay = document.getElementById('drowsiness');

        async function setupCamera() {
            video = document.createElement('video');
            video.style.display = 'none';
            document.body.appendChild(video);

            const stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: 'user' },
                audio: false
            });
            video.srcObject = stream;
            
            return new Promise((resolve) => {
                video.onloadedmetadata = () => {
                    video.play();
                    resolve(video);
                };
            });
        }

        async function loadFaceMesh() {
            const faceMesh = new FaceMesh({
                locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`
            });
            faceMesh.setOptions({
                maxNumFaces: 1,
                refineLandmarks: true,
                minDetectionConfidence: 0.5,
                minTrackingConfidence: 0.5
            });
            return faceMesh;
        }

        function drawFaceLandmarks(landmarks) {
            ctx.strokeStyle = 'yellow';
            ctx.lineWidth = 1;
            landmarks.forEach(landmark => {
                ctx.beginPath();
                ctx.arc(landmark.x * canvas.width, landmark.y * canvas.height, 1, 0, 2 * Math.PI);
                ctx.stroke();
            });
        }

        function checkDrowsiness(landmarks) {
            // Example logic: Check eye aspect ratio or head tilt
            const leftEye = landmarks.slice(133, 144); // Example indices
            const rightEye = landmarks.slice(362, 373);

            // Calculate simple eye aspect ratio (for demonstration)
            const leftEAR = (leftEye[1].y - leftEye[5].y) / (leftEye[0].x - leftEye[3].x);
            const rightEAR = (rightEye[1].y - rightEye[5].y) / (rightEye[0].x - rightEye[3].x);

            const ear = (leftEAR + rightEAR) / 2;
            const threshold = 0.2; // Example threshold

            if (ear < threshold) {
                drowsinessDisplay.textContent = 'Drowsiness: Detected';
            } else {
                drowsinessDisplay.textContent = 'Drowsiness: Not Detected';
            }
        }

        async function detectFrame(faceMesh, timestamp) {
            if (timestamp - lastTimestamp >= 1000) {
                fpsDisplay.textContent = `FPS: ${(1000 / (timestamp - lastTimestamp)).toFixed(2)}`;
                lastTimestamp = timestamp;
            }

            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

            faceMesh.onResults(results => {
                if (results.multiFaceLandmarks) {
                    results.multiFaceLandmarks.forEach(landmarks => {
                        drawFaceLandmarks(landmarks);
                        checkDrowsiness(landmarks);
                    });
                }
            });

            await faceMesh.send({ image: video });

            requestAnimationFrame(timestamp => detectFrame(faceMesh, timestamp));
        }

        async function main() {
            await setupCamera();
            const faceMesh = await loadFaceMesh();
            requestAnimationFrame(timestamp => detectFrame(faceMesh, timestamp));
        }

        main();
    </script>
</body>
</html>