Upload 2 files

Frontend/scripts.js

@@ -0,0 +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
+startCamera();

Frontend/style.css

@@ -0,0 +1,116 @@
+body {
+  margin: 0;
+  font-family: 'Segoe UI', sans-serif;
+  background: linear-gradient(to bottom right, #141e30, #243b55);
+  color: #f3f3f3;
+  text-align: center;
+}
+
+header {
+  padding: 2rem 1rem;
+  background: linear-gradient(to right, #ff9a9e, #fad0c4);
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+
+header h1 {
+  font-size: 3rem;
+  margin: 0;
+}
+
+header p {
+  font-size: 1.2rem;
+  margin-top: 0.5rem;
+}
+
+.camera-section {
+  padding: 1rem;
+}
+
+#videoElement {
+  width: 100%;
+  max-width: 460px;
+  border-radius: 20px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
+  object-fit: cover;
+  margin-bottom: 1rem;
+}
+
+.btn-group {
+  margin-top: 1rem;
+}
+
+.btn {
+  background: linear-gradient(to right, #6a11cb, #2575fc);
+  color: white;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 40px;
+  font-size: 1rem;
+  font-weight: bold;
+  margin: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
+}
+
+.btn:hover {
+  background: linear-gradient(to right, #43e97b, #38f9d7);
+  transform: scale(1.05);
+}
+
+.result-section {
+  padding: 1rem;
+}
+
+#capturedImagePreview img {
+  width: 100%;
+  max-width: 360px;
+  margin-top: 1rem;
+  border-radius: 16px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+#emojiDisplay img {
+  margin-top: 1rem;
+  width: 100px;
+  animation: bounce 1.2s ease-in-out infinite;
+}
+
+#emotionText {
+  margin-top: 1rem;
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: #c7ffec;
+}
+
+#downloadEmoji {
+  display: inline-block;
+  margin-top: 1rem;
+  background: linear-gradient(to right, #ee0979, #ff6a00);
+  padding: 12px 24px;
+  border-radius: 30px;
+  color: white;
+  text-decoration: none;
+  font-weight: bold;
+  transition: 0.3s;
+}
+
+#downloadEmoji:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 16px rgba(238, 9, 121, 0.3);
+}
+
+footer {
+  margin-top: 2rem;
+  padding: 1rem;
+  font-size: 0.9rem;
+  color: #aaa;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translate(-10px); } 
+}