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", {
-                    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);
             }
@@ -96,13 +76,16 @@ function Object_Detection() {
     useEffect(() => {
         const socket = new WebSocket("wss://api.marvinkrausser.com/predict_face");
 
-    socket.onopen = () => {
+        socket.onopen = async () => {
             console.log("Connected");
-      socket.send("Hello server!");
+            const response = await fetch("/cherry_bird.jpeg");
+            const blob = await response.blob();
+
+            socket.send(blob);
         };
 
         socket.onmessage = (event) => {
-      setMessages((prev) => [...prev, event.data]);
+            console.log(event.data);
         };
 
         socket.onerror = (err) => {