removed time restraint from server

api/src/server.py

@@ -102,15 +102,14 @@ async def predict(file: UploadFile = File(...)):
 async def predict_face(websocket: WebSocket):
     await websocket.accept()
 
-    last = time.time()
+    #last = time.time()
 
     try:
         while True:
             jpg_bytes = await websocket.receive_bytes()
-            print("received message")
 
-            if time.time() - last < 1:
+            #if time.time() - last < 1:
-                continue
+                #continue
 
             last = time.time()
             with sem_ai:
@@ -143,7 +142,6 @@ async def predict_face(websocket: WebSocket):
                     ymax = int(bbox[3] * scale_h)
                     boxes_to_send.append([xmin, ymin, xmax, ymax])
 
-                print("sending message")
                 await websocket.send_json({"bboxes": boxes_to_send})
 
     except WebSocketDisconnect:

website/src/Object_Detection.jsx

@@ -3,20 +3,28 @@ import { useRef, useEffect, useState } from 'react'
 
 function Object_Detection() {
     const videoRef = useRef(null);
-    const canvasRef = useRef(null);
+    const canvasRefBBox = useRef(null);
+    const canvasRefSending = useRef(null);
+    const ctxRefBBox = useRef(null);
+    const ctxRefSending = useRef(null);
     const [error, setError] = useState(false);
     const [loading, setLoading] = useState(false);
-    const [bboxes, setBboxes] = useState(null)
+    const bboxes = useRef(null)
     const socketRef = useRef(null); 
-    const ctxRef = useRef(null);
     const captureIntervalRef = useRef(null);
     const drawIntervalRef = useRef(null);
-    const [drawing, setDrawing] = useState(null);
+    const drawingRef = useRef(null);
-    const [sending, setSending] = useState(null);
+    const sendingRef = useRef(null);
+    const [running, setRunning] = useState(false);
 
     useEffect(() => {
-        if (canvasRef.current) {
+        if (canvasRefBBox.current) {
-            ctxRef.current = canvasRef.current.getContext("2d");
+            ctxRefBBox.current = canvasRefBBox.current.getContext("2d");
+            printDefault();
+        }
+
+        if (canvasRefSending.current) {
+            ctxRefSending.current = canvasRefSending.current.getContext("2d");
         }
     }, []);
 
@@ -46,33 +54,36 @@ function Object_Detection() {
         };
     }, []);
 
-    const drawImage = () => {
+    const drawBBox = () => {
         const video = videoRef.current;
-        const canvas = canvasRef.current;
+        const canvas = canvasRefBBox.current;
 
-        const width = video.videoWidth;
+        const ctx = ctxRefBBox.current;
-        const height = video.videoHeight;
-
-        const canvasW = canvas.width;
-        const canvasH = canvas.height;
-
-        const ctx = ctxRef.current;
         if (!ctx) return;
 
-        ctx.drawImage(video, 0, 0, canvasW, canvasH);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
 
         ctx.strokeStyle = "red";
-        ctx.lineWidth = 4;
+        ctx.lineWidth = 1;
 
-        if (bboxes) {
+        if (bboxes.current) {
-            bboxes.forEach(edge => {
+            bboxes.current.forEach(edge => {
                 ctx.strokeRect(edge[0], edge[1], edge[2] - edge[0], edge[3] - edge[1]);
             });
         }
     };
 
     const sendImage = () => {
-        const canvas = canvasRef.current;
+        const video = videoRef.current;
+        const canvas = canvasRefSending.current;
+
+        const canvasW = canvas.width;
+        const canvasH = canvas.height;
+
+        const ctx = ctxRefSending.current;
+        if (!ctx) return;
+
+        ctx.drawImage(video, 0, 0, canvasW, canvasH);
 
         canvas.toBlob(async (blob) => {
             if (!blob) return;
@@ -90,30 +101,86 @@ function Object_Detection() {
         }, "image/jpeg", 0.9);
     };
 
+    const printDefault = () => {
+        const ctx = ctxRefBBox.current;
+        if (!ctx) return;
+
+        const img = new Image();
+        img.src = "/cherry_bird.jpeg";
+
+        const canvas = canvasRefBBox.current;
+
+        const canvasW = canvas.width;
+        const canvasH = canvas.height;
+
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        };
+    }
+
     const startRecording = () => {
+        if (running) {
+            if (socketRef.current) {
+                socketRef.current.close();
+                socketRef.current = null;
+            }
+
+            if (drawingRef.current) {
+                clearInterval(drawingRef.current);
+                drawingRef.current = null;
+            }
+
+            if (sendingRef.current) {
+                clearInterval(sendingRef.current);
+                sendingRef.current = null;
+            }
+
+            bboxes.current = null;
+
+            printDefault();
+            setRunning(false);
+            return;
+        }
+
         const socket = new WebSocket("wss://api.marvinkrausser.com/predict_face");
         socketRef.current = socket;
 
         socket.onopen = () => {
             console.log("Connected");
-            setDrawing(setInterval(drawImage, 1000 / 60));
+            sendingRef.current = setInterval(sendImage, 100);
-            setSending(setInterval(sendImage, 100));
         }
         socket.onmessage = (event) => {
-            setBboxes(JSON.parse(event.data).bboxes);
+            drawBBox();
+            bboxes.current = JSON.parse(event.data).bboxes;
         }
         socket.onerror = console.error;
         socket.onclose = () => console.log("Disconnected");
+
+        setRunning(true);
     }
 
     return (
         <div className='site-box'>
             <h1 className='site-headline'>Face Detection</h1>
+            <div className={styles["button-div"]}>
+                <button
+                    id="button-send"
+                    onClick={startRecording}
+                    style={{ display: "none" }}
+                />
+
+                <label
+                    htmlFor="button-send"
+                    className="custom-button"
+                >
+                    Ask Expert
+                </label>
+            </div>
             <div id={styles.container}>
-                <video autoPlay={true} ref={videoRef} style={{ display: "none" }}></video>
+                <video autoPlay={true} ref={videoRef} style={{ width: "100%", height: "100%", position: "absolute", zIndex: "3" }}></video>
-                <canvas ref={canvasRef} width={1000} height={800} />
+                <canvas ref={canvasRefBBox} style={{width: "100%", height: "100%", position: "absolute", zIndex: "4"}} />
+                <canvas ref={canvasRefSending} style={{width: "100%", height: "100%", display: "none"}} />
             </div>
-            <button onClick={startRecording}>Click</button>
         </div>
     )
 }

website/src/Object_Detection.module.css

@@ -1,6 +1,14 @@
 #container {
-	margin: 0px auto;
+	margin: 0px;
-	width: fit-content;
+	width: 500px;
-	height: fit-content;
+	height: 500px;
 	border: 10px #333 solid;
+	align-self: center;
+	position: relative;
+}
+
+.button-div{
+	width: 200px;
+	align-self: center;
+	margin: 50px;
 }

website/src/index.css

@@ -74,6 +74,7 @@ h4 {
     user-select: none;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .custom-button:hover {