AttendAI: Smart Classroom Check-In

About AttendAI

Traditional classroom attendance is time-consuming and can be inaccurate. We built AttendAI to make check-in faster and more reliable using only a standard device camera and browser-based AI.

AttendAI provides an end-to-end classroom attendance workflow. Teachers can enroll students by capturing or uploading a reference photo and entering their name and student ID. During class, the system detects a student’s face through the camera, automatically captures it after several stable frames, compares it with enrolled profiles, and records the attendance time.

The application also:

• Prevents duplicate check-ins
• Identifies unrecognized users
• Supports student search and date filtering
• Exports attendance records as CSV files

AttendAI was built with HTML, CSS, JavaScript, face-api.js, and TensorFlow.js. It uses the MediaDevices API for camera access, Canvas APIs for image capture, and Euclidean distance to compare facial descriptors. Student profiles and attendance records are stored locally in the browser for this prototype.

Challenges, Lessons, and What's Next

The main challenge was maintaining recognition accuracy across different lighting conditions, camera distances, and device performance levels. We introduced a minimum face-size requirement, consecutive-frame detection, configurable matching thresholds, and clear error messages for camera or model-loading failures.

We learned that a usable AI product requires more than an accurate model. Privacy, permissions, user feedback, failure recovery, and browser compatibility are equally important.

Next, we plan to add liveness detection, encrypted storage, teacher access controls, class management, attendance analytics, and configurable data-retention settings. Before real-world deployment, AttendAI would also require further privacy, security, fairness, and accuracy testing.

Built With

• css3
• face-api.js
• html5
• javascript
• tensorflow.js
• webgl