Refactor code: Remove unused code and dependencies

Author: salim laimeche

components/History.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Card, CardContent, CardHeader } from "./ui/card"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef } from "react"
 import { deletePictures } from "@/lib/send-detection/action"
 
 import { UserView } from "@/lib/identity/definition"
@@ -12,34 +12,16 @@ import useHistory from "@/hooks/use-history"
 import HistorySelect from "./history-select"
 import ModelSelection from "./model-selection"
 import ModelLoader from "./model-loader"
-import { ModelComputerVision, ModelList, modelList } from "@/models/model-list"
+import { modelList } from "@/models/model-list"
 import { detect } from "@/lib/yolov8n/detect"
 import Image from "next/image"
-import { Popover, PopoverContent } from "@radix-ui/react-popover"
-import { PopoverTrigger } from "./ui/popover"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "./ui/dialog"
-import { Badge } from "./ui/badge"
-import { BotIcon, PictureInPicture2Icon } from "lucide-react"
-import { Button } from "./ui/button"
 
 interface IProps {
   user: UserView
 }
 
 export default function History({ user }: IProps) {
-  const ready = useTfjsBackendWeb({ backend: "webgl" })
-  const { modelName } = useModelStore()
-  const { model, loadModel, percentLoaded } = useModel({ ready })
   const { pictures, setPictures, date, setDate } = useHistory({ user })
-  const [picture, setPicture] = useState<string>("")
-  const canvasRef = useRef<HTMLCanvasElement>(null)
 
   async function handleDeleteAllSelection() {
     const confirmation = window.confirm(
@@ -53,51 +35,14 @@ export default function History({ user }: IProps) {
     }
   }
 
-  function handleCreateCanvas() {
-    const img = new window.Image()
-    img.crossOrigin = "anonymous"
-    img.src = picture
-    img.onload = async () => {
-      const canvas = canvasRef.current
-      const context = canvas?.getContext("2d")
-      if (context) {
-        context.drawImage(img, 0, 0, canvas.width, canvas.height)
-      }
-    }
-  }
-
-  async function handleRunDetection() {
-    const img = new window.Image()
-    img.crossOrigin = "anonymous"
-    img.src = picture
-    img.onload = async () => {
-      const canvas = canvasRef.current
-      const context = canvas?.getContext("2d")
-      if (context) {
-        detect(img, model, canvas)
-      }
-    }
-  }
-
   return (
-    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
+    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8 mt-16">
       <HistorySelect
         date={date}
         setDate={setDate}
         pictures={pictures}
         handleDeleteAllSelection={handleDeleteAllSelection}
-        loadModel={loadModel}
       />
-      {loadModel ? (
-        <ModelLoader
-          percent={percentLoaded}
-          model={
-            modelList.find(model => model.title === modelName) as ModelList
-          }
-        />
-      ) : (
-        <ModelSelection />
-      )}
 
       <Card className="m-3 w-full lg:col-span-2 flex-grow bg-transparent border-none">
         <CardHeader className="flex flex-row items-start bg-muted/50">
@@ -134,50 +79,13 @@ export default function History({ user }: IProps) {
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
             {pictures.map((picture, index) => (
               <div key={index} className="relative">
-                <Dialog>
-                  <DialogTrigger>
-                    <Image
-                      src={picture}
-                      alt={"Image de la detection"}
-                      width={200}
-                      height={200}
-                      className="rounded-lg w-full cursor-pointer"
-                      onClick={() => {
-                        setPicture(picture)
-                        handleCreateCanvas()
-                      }}
-                    />
-                  </DialogTrigger>
-                  <DialogContent className="max-w-full max-h-full">
-                    <DialogHeader className="flex-row">
-                      <DialogTitle className="m-2">
-                        <Badge variant="default">
-                          <PictureInPicture2Icon className="mr-2 h-4 w-4" />
-                          <span className="text-white">{index + 1}</span>
-                        </Badge>
-                      </DialogTitle>
-                      <DialogDescription>
-                        <Button
-                          variant="outline"
-                          className="bg-blue-500 text-white hover:bg-blue-600 focus:bg-blue-700 active:bg-blue-800 hover:text-white focus:text-white active:text-white"
-                          onClick={() => {
-                            handleRunDetection()
-                          }}>
-                          <BotIcon className="mr-2 h-4 w-4" />
-                          Lancer la reconnaissance
-                        </Button>
-                      </DialogDescription>
-                    </DialogHeader>
-                    <div className="flex justify-center">
-                      <canvas
-                        ref={canvasRef}
-                        width={640}
-                        height={480}
-                        className="max-w-full max-h-full rounded-lg"
-                      />
-                    </div>
-                  </DialogContent>
-                </Dialog>
+                <Image
+                  src={picture}
+                  alt={"Image de la détection"}
+                  width={300}
+                  height={300}
+                  className="rounded-lg w-full cursor-pointer text-center transition duration-500"
+                />
               </div>
             ))}
           </div>

components/history-select.tsx

@@ -15,15 +15,13 @@ interface IProps {
   setDate: Dispatch<SetStateAction<DateRange>>
   pictures?: string[]
   handleDeleteAllSelection: () => void
-  loadModel: boolean
 }
 
 export default function HistorySelect({
   date,
   setDate,
   pictures,
   handleDeleteAllSelection,
-  loadModel,
 }: IProps) {
   return (
     <Card className="bg-background">
@@ -37,7 +35,6 @@ export default function HistorySelect({
           <Popover>
             <PopoverTrigger asChild>
               <Button
-                disabled={loadModel}
                 id="date"
                 variant={"outline"}
                 className={cn(

components/model-selection.tsx

@@ -42,6 +42,15 @@ export default function ModelSelection() {
           </DropdownMenu>
         </div>
       </CardContent>
+      <CardContent className="p-16">
+        <Button
+          disabled={!modelName}
+          variant="outline"
+          className="w-full"
+          onClick={() => setModel("")}>
+          Réinitialiser
+        </Button>
+      </CardContent>
     </Card>
   )
 }

hooks/use-yolo-tfjs.tsx

@@ -0,0 +1,45 @@
+import { useModelStore } from "@/lib/store/model-store"
+import { yoloLabels } from "@/lib/yolov8n/label"
+import { modelList } from "@/models/model-list"
+import { useEffect, useState } from "react"
+import YOLOTf from "yolo-tfjs"
+
+interface IProps {
+  ready: boolean
+}
+
+export default function useYoloTfjs({ ready }: IProps) {
+  const { modelName } = useModelStore()
+  const [model, setModel] = useState<YOLOTf>(null)
+  const [loadModel, setLoadModel] = useState<boolean>(false)
+  const [percentLoaded, setPercentLoaded] = useState<number>(0)
+
+  const modelDef = modelList.find(model => model.title === modelName)
+
+  async function fetchModel() {
+    modelName &&
+      (setLoadModel(true),
+      await YOLOTf.loadYoloModel(modelDef?.url, yoloLabels, {
+        yoloVersion: "v8",
+        onProgress(fraction: number) {
+          setPercentLoaded(fraction * 100)
+        },
+      })
+        .then(model => {
+          setModel(model)
+        })
+        .catch(error => {
+          console.error(error)
+        }))
+
+    setLoadModel(false)
+  }
+
+  useEffect(() => {
+    if (ready) {
+      fetchModel()
+    }
+  }, [ready, modelName])
+
+  return { model, loadModel, percentLoaded }
+}

package-lock.json

@@ -58,6 +58,7 @@
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1",
+    "yolo-tfjs": "^0.0.0",
     "zod": "^3.23.8",
     "zustand": "^4.5.4"
   },

package.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "es2016",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,