Sketch 2026-02-13 08:47

function loadAttendanceRecords() {
  const records = localStorage.getItem('attendanceRecords');
  return records ? JSON.parse(records) : [];
}

function saveAttendanceRecords(records) {
  localStorage.setItem('attendanceRecords', JSON.stringify(records));
}

function markAttendanceLocal(name) {
  const now = new Date();
  const today = now.toISOString().split('T')[0]; // "YYYY-MM-DD"
  const time = now.toTimeString().split(' ')[0]; // "HH:MM:SS"

  // Check cooldown
  if (attendanceCooldown[name] && (now.getTime() - attendanceCooldown[name]) < MARKING_DELAY) {
    statusMessage = `Attendance for ${name} recently marked.`;
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
    return false;
  }

  let records = loadAttendanceRecords();
  const alreadyMarkedToday = records.some(
    (record) => record.name === name && record.date === today
  );

  if (!alreadyMarkedToday) {
    records.push({ name, date: today, time });
    saveAttendanceRecords(records);
    attendanceCooldown[name] = now.getTime(); // Update cooldown
    console.log(`Attendance marked for ${name} on ${today} at ${time}`);
    statusMessage = `ATTENDANCE MARKED for ${name}!`;
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
    return true;
  } else {
    statusMessage = `${name} already marked attendance today.`;
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
    return false;
  }
}

function clearAllLocalData() {
  if (confirm("Are you sure you want to clear all attendance data from your browser's local storage? This action cannot be undone.")) {
    localStorage.removeItem('attendanceRecords');
    knownFaceDescriptors = [];
    knownNames = [];
    attendanceCooldown = {};
    console.log("All local attendance data cleared.");
    statusMessage = "All attendance data cleared.";
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
    // Re-enroll known faces if needed
    enrollKnownFaces();
    // Refresh reports if visible
    if (reportsVisible) {
      displayAttendanceReports();
    }
  }
}

function calculateAttendancePercentageLocal(student_name) {
  const records = loadAttendanceRecords();
  const attended = records.filter(record => record.name === student_name).length;

  // Determine total possible attendance days: count distinct dates in all records
  const allDates = new Set(records.map(record => record.date));
  const total_sessions = allDates.size;

  if (total_sessions === 0) {
    return 0;
  }

  const percentage = (attended / total_sessions) * 100;
  return round(percentage, 2);
}

async function loadModels() {
  statusMessage = "Loading models: tinyFaceDetector...";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  await faceapi.nets.tinyFaceDetector.loadFromUri('https://cdn.jsdelivr.net/npm/face-api.js/models');
  statusMessage = "Loading models: faceLandmark68Net...";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  await faceapi.nets.faceLandmark68Net.loadFromUri('https://cdn.jsdelivr.net/npm/face-api.js/models');
  statusMessage = "Loading models: faceRecognitionNet...";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  await faceapi.nets.faceRecognitionNet.loadFromUri('https://cdn.jsdelivr.net/npm/face-api.js/models');
  console.log("All face-api.js models loaded.");
}

async function enrollKnownFaces() {
  statusMessage = "Enrolling known faces...";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  knownFaceDescriptors = [];
  knownNames = [];

  // Replace these with actual image URLs of your known students
  // For demonstration, I'm using placeholder images.
  const knownFacesData = [
    { name: "Alice", img: "https://p5js.ai/assets/alice.jpg" },
    { name: "Bob", img: "https://p5js.ai/assets/bob.jpg" },
    { name: "Charlie", img: "https://p5js.ai/assets/charlie.jpg" }
    // Add more known faces as needed
  ];

  for (const data of knownFacesData) {
    try {
      const img = await faceapi.fetchImage(data.img);
      const detections = await faceapi.detectSingleFace(img).withFaceLandmarks().withFaceDescriptor();
      if (detections) {
        knownFaceDescriptors.push(detections.descriptor);
        knownNames.push(data.name);
        console.log(`Enrolled: ${data.name}`);
      } else {
        console.warn(`Could not detect face in image for ${data.name}. Make sure the face is clear.`);
      }
    } catch (error) {
      console.error(`Error enrolling ${data.name}:`, error);
    }
  }
  faceMatcher = new faceapi.FaceMatcher(knownFaceDescriptors, 0.6); // 0.6 is a common threshold
  statusMessage = "Known faces enrolled. Ready to start.";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  console.log("FaceMatcher initialized.");
}

function calculateEAR(eyeLandmarks) {
  // Eye landmarks for face-api.js 68-point model (indices 36-41 for right eye, 42-47 for left eye)
  // For left eye (indices 42-47): p1=42, p2=43, p3=44, p4=45, p5=46, p6=47
  // Vertical distances: ||p3 - p5|| (44-46), ||p2 - p6|| (43-47)
  // Horizontal distance: ||p1 - p4|| (42-45)

  // Using left eye indices as they were in the Python example, assuming 68-point model:
  // p1=eyeLandmarks[0], p2=eyeLandmarks[1], p3=eyeLandmarks[2],
  // p4=eyeLandmarks[3], p5=eyeLandmarks[4], p6=eyeLandmarks[5]

  const p1 = eyeLandmarks[0];
  const p2 = eyeLandmarks[1];
  const p3 = eyeLandmarks[2];
  const p4 = eyeLandmarks[3];
  const p5 = eyeLandmarks[4];
  const p6 = eyeLandmarks[5];

  // Compute the Euclidean distances between the two sets of vertical eye landmarks (p2, p6) and (p3, p5)
  const vertical1 = dist(p2.x, p2.y, p6.x, p6.y);
  const vertical2 = dist(p3.x, p3.y, p5.x, p5.y);

  // Compute the Euclidean distance between the horizontal eye landmark (p1, p4)
  const horizontal = dist(p1.x, p1.y, p4.x, p4.y);

  // Compute the Eye Aspect Ratio
  const ear = (vertical1 + vertical2) / (2.0 * horizontal);

  // Return the EAR
  return ear;
}

function detectBlink(landmarks) {
  // Indices for face-api.js 68-point landmarks for the left eye
  const leftEyeIndices = [42, 43, 44, 45, 46, 47];
  const leftEyeLandmarks = leftEyeIndices.map(index => landmarks.positions[index]);

  const ear = calculateEAR(leftEyeLandmarks);

  if (ear < EAR_THRESHOLD && !isBlinking) {
    isBlinking = true;
    blinkCounter++;
    lastBlinkTime = millis();
    console.log("Blink detected!", ear);
    return true;
  } else if (ear >= EAR_THRESHOLD && isBlinking) {
    isBlinking = false;
  }

  // Reset blink state if no blink for a while
  if (millis() - lastBlinkTime > BLINK_RESET_TIME) {
    blinkCounter = 0;
  }

  return false;
}

async function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  capture = createCapture(VIDEO);
  capture.size(width, height);
  capture.hide(); // Hide the capture element, draw it on canvas instead

  // Create the status message div and append it to the body
  statusDiv = createDiv(statusMessage);
  statusDiv.id('status-message'); // Assign the ID for CSS styling

  // Load models and enroll known faces before starting detection
  await loadModels();
  await enrollKnownFaces();

  document.getElementById('startRecognition').addEventListener('click', startDetection);
  document.getElementById('showReports').addEventListener('click', displayAttendanceReports);
  document.getElementById('clearData').addEventListener('click', clearAllLocalData);

  // Create reports container (hidden by default)
  const reportsDiv = document.createElement('div');
  reportsDiv.id = 'reports-container';
  reportsDiv.innerHTML = `
    <h2>Attendance Reports</h2>
    <div id="reports-content"></div>
    <button id="closeReports">Close Reports</button>
  `;
  document.body.appendChild(reportsDiv);
  document.getElementById('closeReports').addEventListener('click', () => {
    reportsVisible = false;
    document.getElementById('reports-container').style.display = 'none';
  });
}

function draw() {
  if (reportsVisible) {
    clear(); // Clear canvas if reports are visible
    return;
  }

  background(220); // Clear the canvas

  // Draw the capture feed mirrored
  push();
  translate(width, 0);
  scale(-1, 1);
  image(capture, 0, 0, width, height);
  pop();

  // The status message is now managed by the statusDiv DOM element,
  // so we no longer need to draw it on the canvas with text().
}

async function detectFacesAndLiveness() {
  if (!capture || !capture.elt || capture.elt.readyState !== 4) {
    statusMessage = "Waiting for webcam...";
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
    return;
  }
  if (!faceMatcher) {
    statusMessage = "Initializing face matcher...";
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
    return;
  }

  statusMessage = "Detecting faces...";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  const detections = await faceapi.detectAllFaces(capture.elt, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks()
    .withFaceDescriptors();

  if (detections.length > 0) {
    statusMessage = `Found ${detections.length} face(s).`;
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  } else {
    statusMessage = "No faces detected.";
    if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  }

  push();
  translate(width, 0);
  scale(-1, 1); // Mirror the drawing on the canvas

  for (const detection of detections) {
    // Resize detection results to canvas size
    const resizedDetections = faceapi.resizeResults(detection, { width, height });
    const box = resizedDetections.detection.box;
    const landmarks = resizedDetections.landmarks;

    // Draw bounding box
    noFill();
    stroke(0, 255, 0);
    strokeWeight(2);
    rect(box.x, box.y, box.width, box.height);

    // Draw landmarks (optional, for debugging)
    // faceapi.draw.drawFaceLandmarks(canvas.elt, resizedDetections);

    // Perform face recognition
    const bestMatch = faceMatcher.findBestMatch(resizedDetections.descriptor);
    let name = bestMatch.label === 'unknown' ? 'Unknown' : knownNames[parseInt(bestMatch.label)];
    let livenessStatus = "";

    // Perform liveness detection (blink)
    const isBlinkDetected = detectBlink(landmarks);

    if (isBlinkDetected) {
      livenessStatus = "Liveness OK ✅";
    } else {
      livenessStatus = "Liveness Failed ❌";
    }

    if (name !== "Unknown" && isBlinkDetected) {
      livenessStatus = "Liveness OK ✅";
      // Mark attendance locally if recognized and liveness passes
      markAttendanceLocal(name); // This function already updates statusDiv
    } else if (name === "Unknown") {
      livenessStatus = "Liveness Failed ❌ (Unknown Face)";
    }

    // Display name and liveness status on canvas (these are graphics, so keep on canvas)
    fill(0, 255, 0);
    noStroke();
    textSize(16);
    textAlign(CENTER, BOTTOM);
    text(name, box.x + box.width / 2, box.y - 10);
    textSize(14);
    text(livenessStatus, box.x + box.width / 2, box.y + box.height + 20);
  }
  pop();
}

function startDetection() {
  if (detectionInterval) {
    clearInterval(detectionInterval);
  }
  detectionInterval = setInterval(detectFacesAndLiveness, 500); // Run detection every 500ms
  statusMessage = "Face recognition started.";
  if (statusDiv) statusDiv.html(statusMessage); // Update DOM element
  console.log("Face recognition started.");
}

function displayAttendanceReports() {
  reportsVisible = true;
  document.getElementById('reports-container').style.display = 'block';

  const reportsContent = document.getElementById('reports-content');
  reportsContent.innerHTML = ''; // Clear previous reports

  const records = loadAttendanceRecords();
  if (records.length === 0) {
    reportsContent.innerHTML = '<p>No attendance data available yet.</p>';
    return;
  }

  // Get unique student names
  const uniqueNames = [...new Set(records.map(record => record.name))];

  let tableHTML = `
    <table>
      <thead>
        <tr>
          <th>Student Name</th>
          <th>Attendance %</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody>
  `;

  for (const name of uniqueNames) {
    const percentage = calculateAttendancePercentageLocal(name);
    const details = records.filter(record => record.name === name)
                           .map(record => `${record.date} at ${record.time}`)
                           .join('<br>');
    tableHTML += `
      <tr>
        <td>${name}</td>
        <td>${percentage}%</td>
        <td>${details}</td>
      </tr>
    `;
  }

  tableHTML += `
      </tbody>
    </table>
  `;

  reportsContent.innerHTML = tableHTML;
}

function dist(x1, y1, x2, y2) {
  return sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  capture.size(width, height);
}