Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Posture Detector</title> | |
| </head> | |
| <body> | |
| <h1>Live Posture Detector</h1> | |
| <video id="video" width="224" height="224" autoplay></video> | |
| <p id="result">Loading...</p> | |
| <script> | |
| const video = document.getElementById('video'); | |
| const resultP = document.getElementById('result'); | |
| // Get webcam stream | |
| navigator.mediaDevices.getUserMedia({ video: { width: 224, height: 224 } }) | |
| .then(stream => { | |
| video.srcObject = stream; | |
| }) | |
| .catch(err => { | |
| alert('Error accessing webcam: ' + err); | |
| }); | |
| // Create canvas to capture video frame | |
| const canvas = document.createElement('canvas'); | |
| canvas.width = 224; | |
| canvas.height = 224; | |
| const ctx = canvas.getContext('2d'); | |
| async function sendFrame() { | |
| // Draw current frame to canvas | |
| ctx.drawImage(video, 0, 0, 224, 224); | |
| // Convert to blob | |
| const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg')); | |
| // Prepare form data | |
| const formData = new FormData(); | |
| formData.append('file', blob, 'frame.jpg'); | |
| try { | |
| const response = await fetch('/predict', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| resultP.textContent = `${data.label} (${(data.confidence * 100).toFixed(2)}%)`; | |
| } catch (error) { | |
| resultP.textContent = 'Error: ' + error; | |
| } | |
| } | |
| // Send frame every 1.5 seconds (adjust as needed) | |
| setInterval(sendFrame, 1500); | |
| </script> | |
| </body> | |
| </html> | |