fixed websocket image piepline

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

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", {
+                socket.send(file);
-                    method: "POST",
-                    body: formData,
-                });
-
-                if (!response.ok) {
-                    setError(true);
-                    return;
-                }
-                else {
-                    setError(false);
-                }
-
-                const result = await response.json();
-
-                setBboxes(result["bboxes"])
-
-
             } 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 = () => {
+        socket.onopen = async () => {
-      console.log("Connected");
+            console.log("Connected");
-      socket.send("Hello server!");
+            const response = await fetch("/cherry_bird.jpeg");
-    };
+            const blob = await response.blob();
 
-    socket.onmessage = (event) => {
+            socket.send(blob);
-      setMessages((prev) => [...prev, event.data]);
+        };
-    };
 
-    socket.onerror = (err) => {
+        socket.onmessage = (event) => {
-      console.error("WebSocket error:", err);
+            console.log(event.data);
-    };
+        };
 
-    socket.onclose = () => {
+        socket.onerror = (err) => {
-      console.log("Disconnected");
+            console.error("WebSocket error:", err);
-    };
+        };
 
-    // cleanup when component unmounts
+        socket.onclose = () => {
-    return () => {
+            console.log("Disconnected");
-      socket.close();
+        };
-    };
+
-  }, []);
+        // cleanup when component unmounts
+        return () => {
+            socket.close();
+        };
+    }, []);
 
     return (
         <div className='site-box'>