| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Emotion & Age Detection via ViT</title>
|
| <style>
|
| body {
|
| font-family: Arial, sans-serif;
|
| text-align: center;
|
| }
|
| #video, #canvas {
|
| border: 2px solid #444;
|
| border-radius: 8px;
|
| margin: 10px;
|
| }
|
| #result {
|
| font-size: 18px;
|
| font-weight: bold;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <h2>Webcam Emotion & Age Detector</h2>
|
|
|
| <video id="video" width="320" height="240" autoplay></video>
|
| <canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
|
|
|
| <p id="result">Waiting for detection...</p>
|
|
|
| <button onclick="window.location.href='http://127.0.0.1:7860/'">
|
| ⬅ Back to Model Selection
|
| </button>
|
|
|
| <script>
|
| const video = document.getElementById("video");
|
| const canvas = document.getElementById("canvas");
|
| const context = canvas.getContext("2d");
|
| const resultText = document.getElementById("result");
|
|
|
|
|
| navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
|
| video.srcObject = stream;
|
| });
|
|
|
| setInterval(() => {
|
|
|
| context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
|
|
|
|
| canvas.toBlob(blob => {
|
| const formData = new FormData();
|
| formData.append("frame", blob, "frame.jpg");
|
|
|
| fetch("http://127.0.0.1:7860/analyze", {
|
| method: "POST",
|
| body: formData,
|
| })
|
| .then(response => response.json())
|
| .then(data => {
|
| resultText.innerHTML = `
|
| Detected Emotion: <strong>${data.emotion}</strong><br>
|
| Estimated Age Group: <strong>${data.age}</strong>
|
| `;
|
|
|
| })
|
| .catch(err => {
|
| resultText.textContent = "Error: " + err.message;
|
| });
|
| }, "image/jpeg");
|
| }, 300);
|
| </script>
|
| </body>
|
| </html>
|
|
|
