From 315e92989c3c271a3395b401a547bde44beaee94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= <koro.no.omo@gmail.com>
Date: Fri, 29 May 2026 17:55:09 +0200
Subject: [PATCH] added requirement

---
 api/requirements.txt             |  3 ++-
 website/src/Object_Detection.jsx | 25 ++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/api/requirements.txt b/api/requirements.txt
index 26061fe..e64237f 100644
--- a/api/requirements.txt
+++ b/api/requirements.txt
@@ -10,4 +10,5 @@ pycocotools==2.0.11
 
 pydantic==2.13.3
 pydantic_core==2.46.3
-python-dotenv==1.2.2
\ No newline at end of file
+python-dotenv==1.2.2
+websockets==16.0
\ No newline at end of file
diff --git a/website/src/Object_Detection.jsx b/website/src/Object_Detection.jsx
index 80fe29b..a49eb08 100644
--- a/website/src/Object_Detection.jsx
+++ b/website/src/Object_Detection.jsx
@@ -93,8 +93,31 @@ function Object_Detection() {
         }, "image/jpeg", 0.9);
     };
 
+    useEffect(() => {
+    const socket = new WebSocket("wss://api.marvinkrausser.com/predict_face");
 
-    setInterval(captureImage, 100);
+    socket.onopen = () => {
+      console.log("Connected");
+      socket.send("Hello server!");
+    };
+
+    socket.onmessage = (event) => {
+      setMessages((prev) => [...prev, event.data]);
+    };
+
+    socket.onerror = (err) => {
+      console.error("WebSocket error:", err);
+    };
+
+    socket.onclose = () => {
+      console.log("Disconnected");
+    };
+
+    // cleanup when component unmounts
+    return () => {
+      socket.close();
+    };
+  }, []);
 
     return (
         <div className='site-box'>