Liao,Ya-Lin
Providence University Department of Applied Artificial Intelligence Student
E-mail：cxghk581@gmail.com
Wang, Dai-Yi
Providence University Department of Applied Artificial Intelligence Associate Professor
E-mail：ophelia.wang@gmail.com
Abstract
As asynchronous online learning becomes increasingly prevalent, teachers face significant challenges in monitoring students’ real-time attention states. This study designs and develops a web-based learning attention monitoring system that combines a standard webcam with MediaPipe Face Mesh and TensorFlow.js to construct a personalized gaze prediction model entirely within the browser, without requiring any specialized hardware. The system adopts a dual-module architecture: the teacher module provides a dynamic content annotation tool allowing instructors to designate Areas of Interest (AOIs) for specific time segments within instructional videos; the student module performs real-time gaze coordinate detection and comparison against AOIs, triggering visual guidance interventions upon deviation and synchronizing full behavioral logs to a Firebase cloud database. This paper focuses on describing the system’s overall architecture, core technical modules, and operational workflow, offering a low-cost, highly deployable solution for attention monitoring in online learning environments.
Keywords：gaze tracking, online learning, attention monitoring, MediaPipe