Upload 2 files

static/script.js

@@ -0,0 +1,58 @@
+const webcam = document.getElementById("webcam");
+const startBtn = document.getElementById("startBtn");
+const stopBtn = document.getElementById("stopBtn");
+const statusText = document.getElementById("status");
+
+let stream;
+let interval;
+
+async function startWebcam() {
+  try {
+    stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    webcam.srcObject = stream;
+    startBtn.disabled = true;
+    stopBtn.disabled = false;
+    statusText.textContent = "🎥 Webcam started";
+
+    interval = setInterval(captureAndSend, 2000); // every 2 seconds
+  } catch (err) {
+    console.error("Error accessing webcam:", err);
+    statusText.textContent = "❌ Webcam access denied";
+  }
+}
+
+function stopWebcam() {
+  if (stream) {
+    stream.getTracks().forEach(track => track.stop());
+  }
+  clearInterval(interval);
+  webcam.srcObject = null;
+  startBtn.disabled = false;
+  stopBtn.disabled = true;
+  statusText.textContent = "⏹️ Webcam stopped";
+}
+
+async function captureAndSend() {
+  const canvas = document.createElement("canvas");
+  canvas.width = 224;
+  canvas.height = 224;
+  const ctx = canvas.getContext("2d");
+  ctx.drawImage(webcam, 0, 0, 224, 224);
+  const dataUrl = canvas.toDataURL("image/jpeg");
+
+  try {
+    const response = await fetch("/predict", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ image: dataUrl }),
+    });
+    const result = await response.json();
+    statusText.textContent = `Prediction: ${result.label || "Error"}`;
+  } catch (err) {
+    console.error(err);
+    statusText.textContent = "⚠️ Prediction error";
+  }
+}
+
+startBtn.addEventListener("click", startWebcam);
+stopBtn.addEventListener("click", stopWebcam);

static/style.css

@@ -0,0 +1,87 @@
+/* Reset some basics */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  background: #111219;
+  color: #e6e6e6;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+.container {
+  width: 100%;
+  max-width: 480px;
+  padding: 20px;
+}
+header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+header h1 {
+  font-size: 2.2rem;
+  color: #00ff9d;
+}
+header p {
+  font-size: 1rem;
+  color: #9a9a9a;
+}
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  border: 3px solid #00ff9d;
+  border-radius: 12px;
+  overflow: hidden;
+}
+video#webcam {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.video-wrapper .overlay {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 12px;
+  text-align: center;
+}
+.overlay span {
+  font-size: 1.2rem;
+  color: #e6e6e6;
+}
+.controls {
+  display: flex;
+  justify-content: space-between;
+
+  gap: 10px;
+  margin: 15px 0;
+}
+.controls button {
+  flex: 1;
+  padding: 12px;
+  font-size: 1rem;
+  border: none;
+  cursor: pointer;
+  color: #111219;
+  background: #00ff9d;
+  border-radius: 8px;
+  transition: background 0.3s ease;
+}
+.controls button:hover {
+  background: #00e88c;
+}
+.controls button:disabled {
+  background: #444;
+  cursor: not-allowed;
+}
+footer {
+  text-align: center;
+  font-size: 0.8rem;
+  color: #555;
+  margin-top: 20px;
+}