Update Frontend/scripts.js

Frontend/scripts.js

@@ -1,7 +1,8 @@
 const video = document.querySelector("#videoElement");
-let currentFacingMode = "user";
+let currentFacingMode = "user"; // "user" = front, "environment" = back
 let stream = null;
 
+// Initialize camera with given facing mode
 function startCamera(facingMode = "user") {
   if (stream) {
     stream.getTracks().forEach(track => track.stop());
@@ -13,31 +14,39 @@ function startCamera(facingMode = "user") {
       video.srcObject = stream;
     })
     .catch((err) => {
-      console.error("Camera error: ", err);
+      console.error("Error accessing camera: ", err);
       alert("Camera access failed. Please allow camera permissions.");
     });
 }
 
+// Flip between front and back camera
 function toggleCamera() {
   currentFacingMode = currentFacingMode === "user" ? "environment" : "user";
   startCamera(currentFacingMode);
 }
 
+// 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 context = canvas.getContext('2d');
   context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+  // Convert canvas to data URL (JPEG)
   const dataUrl = canvas.toDataURL("image/jpeg");
 
+  // 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" },
@@ -45,19 +54,26 @@ function captureAndSend() {
   })
   .then(response => response.json())
   .then(data => {
+    // Display returned emoji and emotion
     document.getElementById("emojiDisplay").innerHTML =
-      `<img src="${data.emoji}" alt="Emoji">`;
-    document.getElementById("emotionText").textContent = `Emotion: ${data.emotion}`;
+      <img src="${data.emoji}" style="width:200px; border-radius:10px;">;
+    document.getElementById("emotionText").textContent =
+      Emotion: ${data.emotion};
 
+    // Show download button for emoji image
     const link = document.getElementById("downloadEmoji");
     link.href = data.emoji;
     link.style.display = "inline-block";
+
+    // 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. Check if backend is running.");
+    alert("Failed to get emoji. Is your backend running?");
   });
 }
 
-// Auto start camera
-startCamera();
+// Start camera automatically on page load
+startCamera();