<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setup Face Detection Models</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .step {
            background: #f5f5f5;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            border-left: 4px solid #007cba;
        }
        .warning {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        code {
            background: #f4f4f4;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>Setup Face Detection Models</h1>
    
    <div class="warning">
        <strong>Note:</strong> This page provides instructions for setting up face detection models required for proper face alignment validation.
    </div>
    
    <h2>Steps to Download Face Detection Models:</h2>
    
    <div class="step">
        <h3>Step 1: Create Models Directory</h3>
        <p>Make sure the models directory exists:</p>
        <code>c:\MAMP\htdocs\bidda\assets\models</code>
    </div>
    
    <div class="step">
        <h3>Step 2: Download Required Model Files</h3>
        <p>You need to download the following files from the CDN to the models directory:</p>
        <ul>
            <li><code>tiny_face_detector_model-weights_manifest.json</code></li>
            <li><code>tiny_face_detector_model-shard1</code></li>
            <li><code>tiny_face_detector_model-shard2</code></li>
            <li><code>tiny_face_detector_model-shard3</code></li>
        </ul>
        
        <p><strong>Automatic Download (Recommended):</strong> <a href="download_models.php">Click here to automatically download the required models</a></p>
        
        <p>Direct download links:</p>
        <ul>
            <li><a href="https://raw.githubusercontent.com/justadudewhacks/face-api.js/master/weights/tiny_face_detector_model-weights_manifest.json" target="_blank">tiny_face_detector_model-weights_manifest.json</a></li>
            <li><a href="https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-shard1" target="_blank">tiny_face_detector_model-shard1</a></li>
            <li><a href="https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-shard2" target="_blank">tiny_face_detector_model-shard2</a></li>
            <li><a href="https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/tiny_face_detector_model-shard3" target="_blank">tiny_face_detector_model-shard3</a></li>
        </ul>
        
        <p>Or download from: <a href="https://github.com/justadudewhohacks/face-api.js/tree/master/weights" target="_blank">face-api.js weights repository</a></p>
    </div>
    
    <div class="step">
        <h3>Step 3: Alternative CDN Usage</h3>
        <p>If you cannot download the local models, the system will attempt to load them from CDN automatically.</p>
    </div>
    
    <div class="step">
        <h3>Step 4: Test Face Detection</h3>
        <p>After setting up the models, visit the following pages to test face detection:</p>
        <ul>
            <li><a href="attendance_dashboard/register_biometric.php">Biometric Registration</a> - For face recognition registration</li>
            <li><a href="attendance_dashboard/photo_registration.php">Photo Registration</a> - For student photo registration</li>
        </ul>
    </div>
    
    <h2>Features Added:</h2>
    <ul>
        <li>Face detection to ensure only faces are captured</li>
        <li>Alignment validation to check if face is properly centered</li>
        <li>Position correction guidance (left/right adjustment)</li>
        <li>Proximity validation to ensure proper distance from camera</li>
        <li>Real-time feedback during face capture process</li>
    </ul>
    
    <h2>Technical Implementation:</h2>
    <p>The system now uses face-api.js library to:</p>
    <ol>
        <li>Detect faces in real-time video feed</li>
        <li>Validate that the face is centered in the frame</li>
        <li>Ensure the face is properly sized (indicating correct distance)</li>
        <li>Provide feedback to users to adjust their position</li>
        <li>Only capture images when all validation criteria are met</li>
    </ol>
    
    <p><a href="./">&larr; Back to Home</a></p>
</body>
</html>