From 66462c8f80ef7296671b94a32f0c7495cfe5697f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= Date: Sat, 30 May 2026 19:02:18 +0200 Subject: [PATCH] removed time restraint from server --- api/src/server.py | 8 +- website/src/Object_Detection.jsx | 123 ++++++++++++++++++------ website/src/Object_Detection.module.css | 14 ++- website/src/index.css | 1 + 4 files changed, 110 insertions(+), 36 deletions(-) diff --git a/api/src/server.py b/api/src/server.py index 396b617..72d2843 100644 --- a/api/src/server.py +++ b/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: - continue + #if time.time() - last < 1: + #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: diff --git a/website/src/Object_Detection.jsx b/website/src/Object_Detection.jsx index 883509e..97cea23 100644 --- a/website/src/Object_Detection.jsx +++ b/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 socketRef = useRef(null); - const ctxRef = useRef(null); + const bboxes = useRef(null) + const socketRef = useRef(null); const captureIntervalRef = useRef(null); const drawIntervalRef = useRef(null); - const [drawing, setDrawing] = useState(null); - const [sending, setSending] = useState(null); + const drawingRef = useRef(null); + const sendingRef = useRef(null); + const [running, setRunning] = useState(false); useEffect(() => { - if (canvasRef.current) { - ctxRef.current = canvasRef.current.getContext("2d"); + if (canvasRefBBox.current) { + 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 height = video.videoHeight; - - const canvasW = canvas.width; - const canvasH = canvas.height; - - const ctx = ctxRef.current; + const ctx = ctxRefBBox.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) { - bboxes.forEach(edge => { + if (bboxes.current) { + 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)); - setSending(setInterval(sendImage, 100)); + sendingRef.current = 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 (

Face Detection

+
+
- - + + +
-
) } diff --git a/website/src/Object_Detection.module.css b/website/src/Object_Detection.module.css index 4234446..f33ccd0 100644 --- a/website/src/Object_Detection.module.css +++ b/website/src/Object_Detection.module.css @@ -1,6 +1,14 @@ #container { - margin: 0px auto; - width: fit-content; - height: fit-content; + margin: 0px; + width: 500px; + height: 500px; border: 10px #333 solid; + align-self: center; + position: relative; +} + +.button-div{ + width: 200px; + align-self: center; + margin: 50px; } \ No newline at end of file diff --git a/website/src/index.css b/website/src/index.css index 8b1e966..3c20a81 100644 --- a/website/src/index.css +++ b/website/src/index.css @@ -74,6 +74,7 @@ h4 { user-select: none; display: flex; align-items: center; + justify-content: center; } .custom-button:hover {