Update Frontend/scripts.js

Frontend/scripts.js

@@ -1,76 +1,76 @@
-const video = document.querySelector("#videoElement");
-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());
-  }
-
-  navigator.mediaDevices.getUserMedia({ video: { facingMode } })
-    .then((newStream) => {
-      stream = newStream;
-      video.srcObject = stream;
-    })
-    .catch((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" },
-    body: JSON.stringify({ image: dataUrl })
-  })
-  .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 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. Is your backend running?");
-  });
-}
-// Start camera automatically on page load
+const video = document.querySelector("#videoElement");
+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());
+  }
+
+  navigator.mediaDevices.getUserMedia({ video: { facingMode } })
+    .then((newStream) => {
+      stream = newStream;
+      video.srcObject = stream;
+    })
+    .catch((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" },
+    body: JSON.stringify({ image: dataUrl })
+  })
+  .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 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. Is your backend running?");
+  });
+}
+// Start camera automatically on page load
 startCamera();