| <!DOCTYPE html>
|
| <html>
|
| <head>
|
| <title>Emotion 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 CNN LSTM Emotion Detector</h2>
|
| <video id="video" width="320" height="240" autoplay></video>
|
| <canvas id="canvas" width="320" height="240" style="display:none;"></canvas>
|
| <p id="emotion">Waiting for detection...</p>
|
| <script>
|
| const video = document.getElementById("video");
|
| const canvas = document.getElementById("canvas");
|
| const context = canvas.getContext("2d");
|
| const emotionText = document.getElementById("emotion");
|
|
|
| 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/cnn_lstm_video_feed", {
|
| method: "POST",
|
| body: formData,
|
| })
|
| .then(response => response.json())
|
| .then(data => {
|
| emotionText.textContent = "Detected Emotion: " + data.emotion;
|
| });
|
| }, "image/jpeg");
|
| }, 300);
|
| </script>
|
| <button onclick="window.location.href='http://127.0.0.1:7860/'">⬅ Back to Model Selection</button>
|
| </body>
|
| </html>
|
|
|
