new url websocket

app/dashboard/etle/page.tsx

@@ -18,18 +18,10 @@ import Image from "next/image"
 import { useEffect, useState } from "react"
 import { socket } from "@/components/socket"
 
-const dummy = [
+interface historyType {
-  { url: "/sample-1.jpg" },
+  img: string
-  { url: "/sample-2.jpg" },
+  plate: string
-  { url: "/sample-3.jpg" },
+}
-  { url: "/sample-4.jpg" },
-  { url: "/sample-1.jpg" },
-  { url: "/sample-2.jpg" },
-  { url: "/sample-3.jpg" },
-  { url: "/sample-4.jpg" },
-  { url: "/sample-1.jpg" },
-]
-
 const stream_dummy = [
   "/app/static/uploads/ds1.mp4",
   "/app/static/uploads/ds2.mp4",
@@ -43,7 +35,7 @@ export default function Etle() {
   const [imageSrc, setImageSrc] = useState<string>("")
   const [plate, setPlate] = useState<string>("")
   const [confidence, setConfidence] = useState<number | null>(null)
-  const [history, setHistory] = useState<string[]>([])
+  const [history, setHistory] = useState<historyType[]>([])
 
   const startDetection = (index: number) => {
     const stream = stream_dummy[index]
@@ -69,7 +61,7 @@ export default function Etle() {
     socket.on("video_frame", (data) => {
       const thumb = `data:image/jpeg;base64,${data.frame}`
       setImageSrc(thumb)
-      setHistory((prev) => [thumb, ...prev].slice(0, 20))
+      // setHistory((prev) => [thumb, ...prev].slice(0, 20))
     })
 
     socket.on("plate_detected", (data) => {
@@ -77,7 +69,14 @@ export default function Etle() {
       setConfidence(data.confidence ?? null)
 
       const thumb = `data:image/jpeg;base64,${data.frame_thumb}`
-      setHistory((prev) => [thumb, ...prev].slice(0, 20))
+      setHistory((prev) => {
+        // cek apakah plate sudah pernah ada
+        const exists = prev.some((item) => item.plate === data.plate_text)
+
+        if (exists) return prev // skip kalau duplicate
+
+        return [{ img: thumb, plate: data.plate_text }, ...prev]
+      })
     })
 
     // socket.on("detection_stopped", (data) => {
@@ -139,7 +138,7 @@ export default function Etle() {
         </p>
       </div>
       <Drawer direction="right">
-        <DrawerTrigger asChild>
+        <DrawerTrigger asChild title="">
           <Button className="fixed top-1/2 right-0 h-20 w-6 -translate-y-1/2 cursor-pointer rounded-none rounded-l-md bg-white">
             <ChevronLeft />
           </Button>
@@ -152,19 +151,20 @@ export default function Etle() {
             {history.map((item, index) => (
               <div key={index} className="rounded-lg bg-white p-3 text-lg">
                 <Image
-                  src={item}
+                  src={item.img}
                   width={1280}
                   height={960}
                   alt={"image" + index}
                   className="rounded-lg"
                 />
+                <p>{item.plate}</p>
               </div>
             ))}
-            {history.map((img, index) => (
+            {/* {history.map((img, index) => (
               <div key={index} className="rounded-lg bg-white p-3">
-                <img src={img} className="rounded-lg" />
+                <img src={img.img} className="rounded-lg" />
               </div>
-            ))}
+            ))} */}
           </div>
         </DrawerContent>
       </Drawer>

components/socket.tsx

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