Hugging Face's logo

Spaces:
devarajns
/
eyetrack
Running

App Files Community
eyetrack / index.html
devarajns's picture
devarajns
Update index.html
281469b verified
raw
history blame contribute delete
22.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Webcam Eye Tracker</title>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 :root {
 --primary-color: #5d69b2;
 --secondary-color: #3a416f;
 --accent-color: #ff7e5f;
 --bg-color: #f5f7fa;
 --text-color: #333;
 }
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 body {
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 background-color: var(--bg-color);
 color: var(--text-color);
 display: flex;
 flex-direction: column;
 align-items: center;
 min-height: 100vh;
 padding: 2rem;
 position: relative;
 overflow-x: hidden;
 }
 header {
 text-align: center;
 margin-bottom: 2rem;
 width: 100%;
 }
 h1 {
 color: var(--primary-color);
 margin-bottom: 0.5rem;
 font-size: 2.2rem;
 }
 .subtitle {
 color: var(--secondary-color);
 opacity: 0.8;
 margin-bottom: 1.5rem;
 }
 .tracker-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
 max-width: 800px;
 gap: 2rem;
 }
 .camera-container {
 position: relative;
 width: 100%;
 max-width: 640px;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 #video {
 width: 100%;
 display: block;
 background-color: #000;
 }
 #canvas {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 }
 .metrics-container {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
 justify-content: center;
 width: 100%;
 }
 .metric-card {
 background-color: white;
 border-radius: 12px;
 padding: 1.5rem;
 min-width: 200px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 flex-grow: 1;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .metric-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 .metric-title {
 color: var(--primary-color);
 font-size: 0.9rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 0.5rem;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 .metric-value {
 font-size: 1.8rem;
 font-weight: bold;
 color: var(--secondary-color);
 }
 .metric-unit {
 font-size: 0.9rem;
 color: #888;
 margin-left: 0.3rem;
 }
 .chart-container {
 width: 100%;
 height: 200px;
 background-color: white;
 border-radius: 12px;
 padding: 1rem;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 position: relative;
 overflow: hidden;
 }
 canvas#gaze-chart {
 width: 100%;
 height: 100%;
 }
 .controls {
 display: flex;
 gap: 1rem;
 margin-top: 1rem;
 flex-wrap: wrap;
 justify-content: center;
 }
 button {
 padding: 0.8rem 1.5rem;
 background-color: var(--primary-color);
 color: white;
 border: none;
 border-radius: 8px;
 cursor: pointer;
 font-weight: 600;
 transition: all 0.3s ease;
 display: flex;
 align-items: center;
 gap: 0.5rem;
 }
 button:hover {
 background-color: var(--secondary-color);
 transform: translateY(-2px);
 }
 button.secondary {
 background-color: white;
 color: var(--primary-color);
 border: 1px solid #ddd;
 }
 button.secondary:hover {
 background-color: #f0f0f0;
 }
 .loading {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 1rem;
 padding: 2rem;
 background-color: white;
 border-radius: 12px;
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 width: 100%;
 }
 .spinner {
 border: 4px solid rgba(0, 0, 0, 0.1);
 border-radius: 50%;
 border-top: 4px solid var(--primary-color);
 width: 40px;
 height: 40px;
 animation: spin 1s linear infinite;
 }
 @keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
 }
 .error-message {
 color: #e74c3c;
 background-color: #fceae9;
 padding: 1rem;
 border-radius: 8px;
 max-width: 100%;
 text-align: center;
 }
 footer {
 margin-top: 3rem;
 text-align: center;
 color: #888;
 font-size: 0.9rem;
 }
 @media (max-width: 600px) {
 .tracker-container {
 gap: 1rem;
 }
.metric-card {
 min-width: 150px;
 padding: 1rem;
 }
.metric-value {
 font-size: 1.5rem;
 }
 }
 </style>
</head>
<body>
 <header>
 <h1><i class="fas fa-eye"></i> Webcam Eye Tracker</h1>
 <p class="subtitle">Real-time eye tracking using your webcam and face detection</p>
 </header>
<div class="tracker-container">
 <div class="loading" id="loading">
 <div class="spinner"></div>
 <p>Loading face detection models...</p>
 </div>
<div class="camera-container" id="camera-container" style="display: none;">
 <video id="video" width="640" height="480" autoplay muted playsinline></video>
 <canvas id="canvas" width="640" height="480"></canvas>
 </div>
<div class="metrics-container">
 <div class="metric-card">
 <div class="metric-title">
 <i class="fas fa-crosshairs"></i> Eye Position
 </div>
 <div class="metric-value" id="eye-position">
 <span id="eye-x">0</span>, <span id="eye-y">0</span>
 </div>
 </div>
<div class="metric-card">
 <div class="metric-title">
 <i class="fas fa-running"></i> Movement Speed
 </div>
 <div class="metric-value" id="movement-speed">0<span class="metric-unit">px/s</span></div>
 </div>
<div class="metric-card">
 <div class="metric-title">
 <i class="fas fa-history"></i> Time Tracked
 </div>
 <div class="metric-value" id="time-tracked">0<span class="metric-unit">s</span></div>
 </div>
<div class="metric-card">
 <div class="metric-title">
 <i class="fas fa-bullseye"></i> Fixations
 </div>
 <div class="metric-value" id="fixation-count">0</div>
 </div>
 </div>
<div class="chart-container">
 <canvas id="gaze-chart"></canvas>
 </div>
<div class="controls">
 <button id="start-btn"><i class="fas fa-play"></i> Start Tracking</button>
 <button id="reset-btn" class="secondary"><i class="fas fa-redo"></i> Reset</button>
 <button id="debug-btn" class="secondary"><i class="fas fa-bug"></i> Toggle Debug</button>
 </div>
<div class="error-message" id="error-message" style="display: none;"></div>
 </div>
<footer>
 <p>Webcam Eye Tracker &copy; 2024 | Uses face-api.js for face and eye detection</p>
 </footer>
<!-- Load face-api.js from CDN -->
 <script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
 <!-- Load Chart.js from CDN -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
 document.addEventListener('DOMContentLoaded', async function() {
 // DOM Elements
 const video = document.getElementById('video');
 const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
 const startBtn = document.getElementById('start-btn');
 const resetBtn = document.getElementById('reset-btn');
 const debugBtn = document.getElementById('debug-btn');
 const eyeX = document.getElementById('eye-x');
 const eyeY = document.getElementById('eye-y');
 const movementSpeed = document.getElementById('movement-speed');
 const timeTracked = document.getElementById('time-tracked');
 const fixationCount = document.getElementById('fixation-count');
 const loadingElement = document.getElementById('loading');
 const cameraContainer = document.getElementById('camera-container');
 const errorMessage = document.getElementById('error-message');
// Variables
 let trackingActive = false;
 let startTime = 0;
 let lastPosition = { x: 0, y: 0 };
 let lastTime = 0;
 let currentSpeed = 0;
 let fixations = 0;
 let fixationStartTime = 0;
 let isFixated = false;
 let gazeHistory = [];
 let showDebug = false;
 let modelsLoaded = false;
 let stream = null;
// Chart setup
 const chartCtx = document.getElementById('gaze-chart').getContext('2d');
 const gazeChart = new Chart(chartCtx, {
 type: 'line',
 data: {
 labels: [],
 datasets: [{
 label: 'Eye Movement Speed (px/s)',
 data: [],
 borderColor: '#5d69b2',
 backgroundColor: 'rgba(93, 105, 178, 0.1)',
 tension: 0.4,
 fill: true
 }]
 },
 options: {
 responsive: true,
 maintainAspectRatio: false,
 scales: {
 y: {
 beginAtZero: true
 }
 },
 animation: {
 duration: 0
 }
 }
 });
// Load face-api.js models
 async function loadModels() {
 try {
 await faceapi.nets.tinyFaceDetector.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
 await faceapi.nets.faceLandmark68Net.loadFromUri('https://justadudewhohacks.github.io/face-api.js/models');
 modelsLoaded = true;
// Hide loading and show camera UI
 loadingElement.style.display = 'none';
 cameraContainer.style.display = 'block';
// Prompt for camera access
 initCamera();
 } catch (error) {
 console.error('Error loading models:', error);
 showError("Failed to load face detection models. Please check your internet connection and try again.");
 }
 }
// Initialize camera
 async function initCamera() {
 try {
 stream = await navigator.mediaDevices.getUserMedia({
 video: {
 width: { ideal: 640 },
 height: { ideal: 480 },
 facingMode: 'user'
 },
 audio: false
 });
 video.srcObject = stream;
 video.play();
 } catch (error) {
 console.error('Camera error:', error);
 if (error.name === 'NotAllowedError') {
 showError("Camera access was denied. Please allow camera access to use this feature.");
 } else if (error.name === 'NotFoundError') {
 showError("No camera found. Please connect a webcam to use this feature.");
 } else {
 showError("Failed to access camera. Please try again.");
 }
 }
 }
// Show error message
 function showError(message) {
 errorMessage.textContent = message;
 errorMessage.style.display = 'block';
 loadingElement.style.display = 'none';
 }
// Calculate eye position based on landmarks
 function getEyePosition(landmarks) {
 if (!landmarks || !landmarks.getLeftEye || !landmarks.getRightEye) {
 return { x: 0, y: 0 };
 }
const leftEye = landmarks.getLeftEye();
 const rightEye = landmarks.getRightEye();
// Calculate center of each eye
 const leftEyeCenter = leftEye.reduce((sum, point) => {
 return { x: sum.x + point.x, y: sum.y + point.y };
 }, { x: 0, y: 0 });
const rightEyeCenter = rightEye.reduce((sum, point) => {
 return { x: sum.x + point.x, y: sum.y + point.y };
 }, { x: 0, y: 0 });
leftEyeCenter.x /= leftEye.length;
 leftEyeCenter.y /= leftEye.length;
 rightEyeCenter.x /= rightEye.length;
 rightEyeCenter.y /= rightEye.length;
// Calculate midpoint between eyes
 return {
 x: (leftEyeCenter.x + rightEyeCenter.x) / 2,
 y: (leftEyeCenter.y + rightEyeCenter.y) / 2
 };
 }
// Update metrics based on eye position
 function updateMetrics(position) {
 const now = Date.now();
 const timeElapsed = (now - lastTime) / 1000;
if (timeElapsed > 0) {
 const dx = position.x - lastPosition.x;
 const dy = position.y - lastPosition.y;
 const distance = Math.sqrt(dx * dx + dy * dy);
 currentSpeed = distance / timeElapsed;
// Check for fixation (hovering in the same area)
 if (distance < 15) { // 15px threshold for fixation
 if (!isFixated) {
 isFixated = true;
 fixationStartTime = now;
 }
// If fixation lasts more than 200ms, count it
 if (isFixated && now - fixationStartTime > 200) {
 fixations++;
 fixationCount.textContent = fixations;
 isFixated = false; // Reset to count new fixations
 }
 } else {
 isFixated = false;
 }
 }
// Update metrics display
 movementSpeed.textContent = Math.round(currentSpeed);
 timeTracked.textContent = Math.round((now - startTime) / 1000);
 eyeX.textContent = Math.round(position.x);
 eyeY.textContent = Math.round(position.y);
// Update chart data
 if (gazeHistory.length > 50) {
 gazeHistory.shift();
 gazeChart.data.labels.shift();
 gazeChart.data.datasets[0].data.shift();
 }
gazeHistory.push(currentSpeed);
 gazeChart.data.labels.push('');
 gazeChart.data.datasets[0].data.push(currentSpeed);
 gazeChart.update();
// Update last position and time
 lastPosition = position;
 lastTime = now;
 }
// Process video frame for face detection
 async function processVideo() {
 if (!trackingActive || !modelsLoaded) {
 requestAnimationFrame(processVideo);
 return;
 }
try {
 // Detect faces with landmarks
 const options = new faceapi.TinyFaceDetectorOptions({
 inputSize: 128,
 scoreThreshold: 0.5
 });
const result = await faceapi.detectSingleFace(video, options)
 .withFaceLandmarks();
// Clear canvas before drawing
 ctx.clearRect(0, 0, canvas.width, canvas.height);
if (result) {
 const { landmarks, detection } = result;
// Calculate eye position
 const eyePosition = getEyePosition(landmarks);
// Update metrics with eye position
 updateMetrics(eyePosition);
// Draw debug information if enabled
 if (showDebug) {
 // Draw face detection box
 const box = detection.box;
 ctx.strokeStyle = '#00FF00';
 ctx.lineWidth = 2;
 ctx.strokeRect(box.x, box.y, box.width, box.height);
// Draw landmarks
 faceapi.draw.drawFaceLandmarks(canvas, landmarks);
// Draw eye position
 ctx.fillStyle = '#FF0000';
 ctx.beginPath();
 ctx.arc(eyePosition.x, eyePosition.y, 5, 0, 2 * Math.PI);
 ctx.fill();
 }
 }
 } catch (error) {
 console.error('Detection error:', error);
 }
requestAnimationFrame(processVideo);
 }
// Start tracking
 function startTracking() {
 if (!modelsLoaded) {
 showError("Face detection models not loaded yet. Please wait.");
 return;
 }
trackingActive = true;
 startTime = Date.now();
 lastTime = Date.now();
 startBtn.innerHTML = '<i class="fas fa-pause"></i> Pause Tracking';
 startBtn.style.backgroundColor = '#ff7e5f';
// Start processing video
 processVideo();
 }
// Pause tracking
 function pauseTracking() {
 trackingActive = false;
 startBtn.innerHTML = '<i class="fas fa-play"></i> Resume Tracking';
 startBtn.style.backgroundColor = '#5d69b2';
 }
// Reset tracking
 function resetTracking() {
 pauseTracking();
 startTime = 0;
 currentSpeed = 0;
 fixations = 0;
 gazeHistory = [];
// Reset metrics display
 eyeX.textContent = '0';
 eyeY.textContent = '0';
 movementSpeed.textContent = '0';
 timeTracked.textContent = '0';
 fixationCount.textContent = '0';
// Reset chart
 gazeChart.data.labels = [];
 gazeChart.data.datasets[0].data = [];
 gazeChart.update();
// Clear canvas
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 }
// Event listeners
 startBtn.addEventListener('click', function() {
 if (trackingActive) {
 pauseTracking();
 } else {
 startTracking();
 }
 });
resetBtn.addEventListener('click', resetTracking);
debugBtn.addEventListener('click', function() {
 showDebug = !showDebug;
 debugBtn.innerHTML = showDebug ?
'<i class="fas fa-eye-slash"></i> Hide Debug' :
'<i class="fas fa-eye"></i> Show Debug';
 });
// Initialize
 loadModels();
 });
 </script>
</body>
</html>