Update Frontend/scripts.js

Frontend/scripts.js

@@ -25,45 +25,55 @@ function toggleCamera() {
   startCamera(currentFacingMode);
 }
 
-// Call this on page load
-startCamera();
+// Capture current frame from video, show it, and send to backend
+function captureAndSend() {
+  if (!stream) {
+    alert("Camera is not started yet!");
+    return;
+  }
+
+  // Create a canvas to capture the frame
+  const canvas = document.createElement('canvas');
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
 
-const canvas = document.createElement('canvas');
-canvas.width = video.videoWidth;
-canvas.height = video.videoHeight;
-const context = canvas.getContext('2d');
-context.drawImage(video, 0, 0, canvas.width, canvas.height);
-const dataUrl = canvas.toDataURL("image/jpeg");
+  const context = canvas.getContext('2d');
+  context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-// Show captured image preview in <img>
-document.getElementById("snapshotImage").src = dataUrl;
+  // Convert canvas to data URL (JPEG)
+  const dataUrl = canvas.toDataURL("image/jpeg");
 
-  
-  // Send to backend
+  // Show captured image preview in <img>
+  document.getElementById("snapshotImage").src = dataUrl;
+
+  // Send captured image to backend
   fetch("https://prime810-facefeel.hf.space/process_image", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ image: dataUrl })
   })
-    .then(response => response.json())
-    .then(data => {
-      document.getElementById("emojiDisplay").innerHTML =
-        `<img src="${data.emoji}" style="width:200px; border-radius:10px;">`;
-      document.getElementById("emotionText").textContent =
-        `Emotion: ${data.emotion}`;
-
+  .then(response => response.json())
+  .then(data => {
+    // Display returned emoji and emotion
+    document.getElementById("emojiDisplay").innerHTML =
+      `<img src="${data.emoji}" style="width:200px; border-radius:10px;">`;
+    document.getElementById("emotionText").textContent =
+      `Emotion: ${data.emotion}`;
 
-      // Show download button
-      const link = document.getElementById("downloadEmoji");
-      link.href = data.emoji;
-      link.style.display = "inline-block";
+    // Show download button for emoji image
+    const link = document.getElementById("downloadEmoji");
+    link.href = data.emoji;
+    link.style.display = "inline-block";
 
-      // Play emoji sound
-      const sound = document.getElementById("emojiSound");
-      if (sound) sound.play();
-    })
-    .catch(error => {
-      console.error("Error:", error);
-      alert("Failed to get emoji. Is your backend running?");
-    });
+    // Play emoji sound if available
+    const sound = document.getElementById("emojiSound");
+    if (sound) sound.play();
+  })
+  .catch(error => {
+    console.error("Error:", error);
+    alert("Failed to get emoji. Is your backend running?");
+  });
 }
+
+// Start camera automatically on page load
+startCamera();