From 90e86d6f486aab09dd8e0250a1809597a00681ca 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 18:11:22 +0200
Subject: [PATCH] fixed websocket image piepline

---
 api/src/server.py                |  4 ++
 website/src/Object_Detection.jsx | 63 ++++++++++++--------------------
 2 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/api/src/server.py b/api/src/server.py
index 18df302..5edf1ef 100644
--- a/api/src/server.py
+++ b/api/src/server.py
@@ -107,6 +107,10 @@ async def predict_face(websocket: WebSocket):
         np_arr = np.frombuffer(jpg_bytes, np.uint8)
         frame = cv2.imdecode(np_arr, cv2.IMREAD_COLOR)
 
+        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+
+        image = Image.fromarray(frame)
+
         H, W, _ = frame.shape
         scale_w = W / IMAGE_SIZE_YOLO
         scale_h = H / IMAGE_SIZE_YOLO
diff --git a/website/src/Object_Detection.jsx b/website/src/Object_Detection.jsx
index a49eb08..7864176 100644
--- a/website/src/Object_Detection.jsx
+++ b/website/src/Object_Detection.jsx
@@ -60,30 +60,10 @@ function Object_Detection() {
         canvas.toBlob(async (blob) => {
             if (!blob) return;
 
-            const formData = new FormData();
-            formData.append("file", blob, "frame.jpg");
-
             setLoading(true)
 
             try {
-                const response = await fetch("https://api.marvinkrausser.com/predict_face", {
-                    method: "POST",
-                    body: formData,
-                });
-
-                if (!response.ok) {
-                    setError(true);
-                    return;
-                }
-                else {
-                    setError(false);
-                }
-
-                const result = await response.json();
-
-                setBboxes(result["bboxes"])
-
-
+                socket.send(file);
             } catch (e) {
                 setError(true);
             }
@@ -94,30 +74,33 @@ function Object_Detection() {
     };
 
     useEffect(() => {
-    const socket = new WebSocket("wss://api.marvinkrausser.com/predict_face");
+        const socket = new WebSocket("wss://api.marvinkrausser.com/predict_face");
 
-    socket.onopen = () => {
-      console.log("Connected");
-      socket.send("Hello server!");
-    };
+        socket.onopen = async () => {
+            console.log("Connected");
+            const response = await fetch("/cherry_bird.jpeg");
+            const blob = await response.blob();
 
-    socket.onmessage = (event) => {
-      setMessages((prev) => [...prev, event.data]);
-    };
+            socket.send(blob);
+        };
 
-    socket.onerror = (err) => {
-      console.error("WebSocket error:", err);
-    };
+        socket.onmessage = (event) => {
+            console.log(event.data);
+        };
 
-    socket.onclose = () => {
-      console.log("Disconnected");
-    };
+        socket.onerror = (err) => {
+            console.error("WebSocket error:", err);
+        };
 
-    // cleanup when component unmounts
-    return () => {
-      socket.close();
-    };
-  }, []);
+        socket.onclose = () => {
+            console.log("Disconnected");
+        };
+
+        // cleanup when component unmounts
+        return () => {
+            socket.close();
+        };
+    }, []);
 
     return (
         <div className='site-box'>