fix websocket

app/dashboard/etle/page.tsx

@@ -30,6 +30,13 @@ const dummy = [
   { url: "/sample-1.jpg" },
 ]
 
+const stream_dummy = [
+  "/app/static/uploads/ds1.mp4",
+  "/app/static/uploads/ds2.mp4",
+  "/app/static/uploads/ds3.mp4",
+  "/app/static/uploads/ds4.mp4",
+]
+
 export default function Etle() {
   const router = useRouter()
   const [sessionId, setSessionId] = useState<string | null>(null)
@@ -38,27 +45,34 @@ export default function Etle() {
   const [confidence, setConfidence] = useState<number | null>(null)
   const [history, setHistory] = useState<string[]>([])
 
+  const startDetection = (index: number) => {
+    const stream = stream_dummy[index]
+
+    socket.emit("stop_detection")
+    socket.emit("start_detection", {
+      stream_url: stream,
+    })
+  }
+
   useEffect(() => {
     if (!socket.connected) {
       socket.connect()
     }
 
     socket.on("connected", (data) => {
-      console.log("session", data.session_id)
       setSessionId(data.session_id)
-    })
-
       socket.emit("start_detection", {
-      stream_url: "/app/static/uploads/ds1",
+        stream_url: "/app/static/uploads/ds1.mp4",
+      })
     })
 
     socket.on("video_frame", (data) => {
-      console.log("frame", data.frame)
-      setImageSrc(`data:image/jpeg;base64,${data.frame}`)
+      const thumb = `data:image/jpeg;base64,${data.frame}`
+      setImageSrc(thumb)
+      setHistory((prev) => [thumb, ...prev].slice(0, 20))
     })
 
     socket.on("plate_detected", (data) => {
-      console.log("plate", data.plate_text)
       setPlate(data.plate_text)
       setConfidence(data.confidence ?? null)
 
@@ -66,9 +80,9 @@ export default function Etle() {
       setHistory((prev) => [thumb, ...prev].slice(0, 20))
     })
 
-    socket.on("detection_stopped", (data) => {
-      console.log("Total:", data.total)
-    })
+    // socket.on("detection_stopped", (data) => {
+    //   console.log("Total:", data.total)
+    // })
 
     socket.on("error", (data) => {
       console.error(data.message)
@@ -97,6 +111,13 @@ export default function Etle() {
       <div className="flex h-[92vh] flex-col items-start gap-5 bg-gray-200 p-8 text-black">
         <p className="text-2xl font-semibold">TRAFFIC VIOLATIONS</p>
         {/* <Button onClick={startDetection}>START DETECTION</Button> */}
+        <div className="flex gap-2">
+          {stream_dummy.map((stream, index) => (
+            <Button key={index} onClick={() => startDetection(index)}>
+              DS{index + 1}
+            </Button>
+          ))}
+        </div>
         {imageSrc && (
           <img
             src={imageSrc}
@@ -126,12 +147,12 @@ export default function Etle() {
         <DrawerContent>
           <div className="no-scrollbar space-y-3 overflow-y-auto bg-[#CBCBCBCC] px-4 py-4 text-black">
             <div className="rounded-lg bg-white p-3 text-lg">
-              Total Image: 10
+              Total Image: {history.length}
             </div>{" "}
-            {dummy.map((item, index) => (
+            {history.map((item, index) => (
               <div key={index} className="rounded-lg bg-white p-3 text-lg">
                 <Image
-                  src={item.url}
+                  src={item}
                   width={1280}
                   height={960}
                   alt={"image" + index}

components/socket.tsx

@@ -1,6 +1,6 @@
 import { io, Socket } from "socket.io-client"
 
-const URL = "http://plate.koronyo.online/"
+const URL = "http://plate.koronyo.online"
 // const URL = "http://kubik.koroniyo.online:7272/"
 
 export const socket: Socket = io(URL, {