pre alpha

website/src/Object_Detection.jsx

@@ -7,6 +7,16 @@ function Object_Detection() {
     const [error, setError] = useState(false);
     const [loading, setLoading] = useState(false);
     const [bboxes, setBboxes] = useState(null)
+    const socketRef = useRef(null);
+    const ctxRef = useRef(null);
+    const captureIntervalRef = useRef(null);
+    const drawIntervalRef = useRef(null);
+
+    useEffect(() => {
+        if (canvasRef.current) {
+            ctxRef.current = canvasRef.current.getContext("2d");
+        }
+    }, []);
 
     useEffect(() => {
         async function startWebcam() {
@@ -34,28 +44,33 @@ function Object_Detection() {
         };
     }, []);
 
-    const captureImage = () => {
+    const drawImage = () => {
         const video = videoRef.current;
         const canvas = canvasRef.current;
 
         const width = video.videoWidth;
         const height = video.videoHeight;
 
-        canvas.width = width;
+        const canvasW = canvas.width;
-        canvas.height = height;
+        const canvasH = canvas.height;
 
-        const ctx = canvas.getContext("2d");
+        const ctx = ctxRef.current;
+        if (!ctx) return;
 
-        ctx.drawImage(video, 0, 0, width, height);
+        ctx.drawImage(video, 0, 0, canvasW, canvasH);
 
         ctx.strokeStyle = "red";
         ctx.lineWidth = 4;
 
         if (bboxes) {
-            bboxes.forEach(element => {
+            bboxes.forEach(edge => {
-                ctx.strokeRect(element[0], element[0], element[0], element[0]);
+                ctx.strokeRect(edge[0], edge[1], edge[2] - edge[0], edge[3] - edge[1]);
             });
         }
+    };
+
+    const sendImage = () => {
+        const canvas = canvasRef.current;
 
         canvas.toBlob(async (blob) => {
             if (!blob) return;
@@ -63,7 +78,7 @@ function Object_Detection() {
             setLoading(true)
 
             try {
-                socket.send(file);
+                socketRef.current?.send(blob)
             } catch (e) {
                 setError(true);
             }
@@ -75,42 +90,36 @@ function Object_Detection() {
 
     useEffect(() => {
         const socket = new WebSocket("wss://api.marvinkrausser.com/predict_face");
+        socketRef.current = socket;
 
-        socket.onopen = async () => {
+        socket.onopen = () => console.log("Connected");
-            console.log("Connected");
-            const response = await fetch("/cherry_bird.jpeg");
-            const blob = await response.blob();
-
-            socket.send(blob);
-        };
-
         socket.onmessage = (event) => {
-            console.log("message")
+            setBboxes(JSON.parse(event.data).bboxes);
-            console.log(event.data);
+        }
-        };
+        socket.onerror = console.error;
-
+        socket.onclose = () => console.log("Disconnected");
-        socket.onerror = (err) => {
-            console.error("WebSocket error:", err);
-        };
-
-        socket.onclose = () => {
-            console.log("Disconnected");
-        };
-
-        // cleanup when component unmounts
         return () => {
-            socket.close();
+            socket.close(); // important cleanup
         };
     }, []);
 
+    useEffect(() => {
+        const captureInterval = setInterval(sendImage, 100);
+        const drawInterval = setInterval(drawImage, 1000 / 60);
+
+        return () => {
+            clearInterval(captureInterval);
+            clearInterval(drawInterval);
+        };
+    }, [bboxes]);
+
     return (
         <div className='site-box'>
             <h1 className='site-headline'>Face Detection</h1>
             <div id={styles.container}>
                 <video autoPlay={true} ref={videoRef} style={{ display: "none" }}></video>
-                <canvas ref={canvasRef} width={640} height={480} />
+                <canvas ref={canvasRef} width={1000} height={800} />
             </div>
-            <button onClick={captureImage}>Click</button>
         </div>
     )
 }

website/src/Object_Detection.module.css

@@ -1,11 +1,6 @@
 #container {
 	margin: 0px auto;
-	width: 520px;
+	width: fit-content;
-	height: 395px;
+	height: fit-content;
 	border: 10px #333 solid;
-}
-#videoElement {
-	width: 500px;
-	height: 375px;
-	background-color: #666;
 }