refactoring some code for re use purpose, gonna refactor with hooks all usage of models

Author: salim laimeche

components/History.tsx

@@ -36,10 +36,17 @@ export default function History({ user }: IProps) {
     from: new Date(actualYear, actualMonth, 1),
     to: addDays(new Date(actualYear, actualMonth, 1), 6),
   })
-  const [model, setModel] = useState<ObjectDetection | null>(null)
+  const [coco, setCoco] = useState<ObjectDetection | null>(null)
+  const [yolo, setYolo] = useState({
+    net: null,
+    inputShape: [1, 0, 0, 3],
+  }) // init model & input shape of YOLO DETECTION
+  const [yoloSeg, setYoloSeg] = useState({
+    net: null,
+    inputShape: [1, 0, 0, 3],
+  }) // init model & input shape of YOLO SEGMENTATION
   const [pictures, setPictures] = useState<string[]>([])
   const [isDeleting, setIsDeleting] = useState<boolean>(false)
-  const [isDownloading, setIsDownloading] = useState<boolean>(false)
   const [modelLoading, setModelLoading] = useState<boolean>(false)
   const canvasRefs = useRef<HTMLCanvasElement[]>([])
 
@@ -48,7 +55,7 @@ export default function History({ user }: IProps) {
     setModelLoading(true)
     try {
       const loadedModel = await load()
-      setModel(loadedModel)
+      setCoco(loadedModel)
       toast({
         title: "Modèle de reconnaissance chargé",
         description:
@@ -84,7 +91,7 @@ export default function History({ user }: IProps) {
   }, [date])
 
   useEffect(() => {
-    if (model && pictures.length > 0) {
+    if (coco && pictures.length > 0) {
       pictures.forEach((picture, index) => {
         const img = new window.Image()
         img.crossOrigin = "anonymous"
@@ -95,7 +102,7 @@ export default function History({ user }: IProps) {
           if (context) {
             context.clearRect(0, 0, canvas.width, canvas.height)
             context.drawImage(img, 0, 0, canvas.width, canvas.height)
-            model.detect(canvas).then(predictions => {
+            coco.detect(canvas).then(predictions => {
               predictions.forEach(prediction => {
                 const [x, y, width, height] = prediction.bbox
                 const text = `${prediction.class} (${Math.round(
@@ -118,7 +125,7 @@ export default function History({ user }: IProps) {
         }
       })
     }
-  }, [model, pictures])
+  }, [coco, pictures])
 
   async function handleDeleteAllSelection() {
     const confirmation = window.confirm(
@@ -159,7 +166,6 @@ export default function History({ user }: IProps) {
               <strong className="ml-4">
                 {modelLoading && "Chargement du modèle de reconnaissance"}
                 {isDeleting && "Suppression des detections en cours"}
-                {isDownloading && "Téléchargement des detections en cours"}
               </strong>
             </Badge>
           </div>

components/VideoInference.tsx

@@ -3,22 +3,18 @@
 import "@tensorflow/tfjs-backend-webgl"
 import * as tf from "@tensorflow/tfjs"
 import { ObjectDetection, load } from "@tensorflow-models/coco-ssd"
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu"
 import { UserView } from "@/lib/identity/definition"
-import { useEffect, useState, useRef } from "react"
+import { useEffect, useState } from "react"
 import { ModelComputerVision, ModelList, modelList } from "@/models/model-list"
 import { cocossdVideoInference } from "@/lib/cocossd/detect"
 import { detectVideo } from "@/lib/yolov8n/detect"
 import ModelLoader from "./model-loader"
 import { segmentVideo } from "@/lib/yolov8n-seg/detect"
+import ModelSelection from "./model-selection"
+import { useModelStore } from "@/lib/store/model-store"
+import VideoReader from "./video-reader"
+import VideoSelect from "./video-select"
+import { useVideoStore } from "@/hooks/use-video-store"
 
 interface IProps {
   user: UserView
@@ -34,12 +30,10 @@ export default function VideoInference({ user }: IProps) {
     net: null,
     inputShape: [1, 0, 0, 3],
   }) // init model & input shape of YOLO SEGMENTATION
-  const [modelName, setModelName] = useState<string>("")
   const [loadModel, setLoadModel] = useState<boolean>(false)
-  const [videoSrc, setVideoSrc] = useState<string | null>(null)
-  const videoRef = useRef<HTMLVideoElement | null>(null)
-  const canvasRef = useRef<HTMLCanvasElement | null>(null)
   const [percentLoaded, setPercentLoaded] = useState<number>(0)
+  const { modelName } = useModelStore()
+  const { canvasRef, videoRef, videoSrc, setVideoSrc } = useVideoStore()
 
   useEffect(() => {
     tf.setBackend("webgl")
@@ -152,80 +146,21 @@ export default function VideoInference({ user }: IProps) {
   return (
     <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3 m-10">
       <div className="lg:col-span-2">
-        <Card className="overflow-hidden bg-background">
-          <CardHeader className="flex flex-row items-start bg-muted/50 ">
-            <div className="grid gap-0.5">
-              <CardTitle className="text-lg">Lecteur Vidéo</CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="p-6">
-            <div className="relative w-full max-w-2xl overflow-hidden rounded-lg aspect-video">
-              <video ref={videoRef} className="w-full" autoPlay controls>
-                {videoSrc && <source src={videoSrc} type="video/mp4" />}
-              </video>
-              <canvas
-                ref={canvasRef}
-                className="absolute top-0 left-0 w-full h-full pointer-events-none"
-              />
-            </div>
-          </CardContent>
-        </Card>
+        <VideoReader
+          videoRef={videoRef}
+          canvasRef={canvasRef}
+          videoSrc={videoSrc}
+        />
       </div>
       <div className="grid gap-4">
-        <Card className="bg-background">
-          <CardHeader className="flex flex-row items-start bg-muted/50">
-            <div className="grid gap-0.5">
-              <CardTitle className="text-lg">Vidéo Sélection</CardTitle>
-            </div>
-          </CardHeader>
-          <CardContent className="p-6">
-            <div className="grid gap-4">
-              <Input
-                type="file"
-                id="inputFile"
-                accept="video/*"
-                placeholder="Choose a video file"
-                onChange={handleFileChange}
-                className="cursor-pointer"
-              />
-              <Button
-                variant="outline"
-                onClick={handleCreateVideoWithBoundingBox}
-                disabled={!modelName || !videoSrc}
-                className="w-full">
-                Traiter la vidéo
-              </Button>
-              <Button
-                variant="destructive"
-                className="hover:bg-red-500"
-                onClick={() => {
-                  setVideoSrc(null)
-                  const inputFile = document.getElementById("inputFile")
-                  if (inputFile) {
-                    inputFile.setAttribute("value", "")
-                  }
-                  if (videoRef.current) {
-                    videoRef.current.load()
-                  }
-
-                  if (canvasRef.current) {
-                    const context = canvasRef.current.getContext("2d")
-                    if (context) {
-                      context.clearRect(
-                        0,
-                        0,
-                        canvasRef.current.width,
-                        canvasRef.current.height
-                      )
-                    }
-                  }
-                }}
-                disabled={!videoSrc}>
-                Vider le lecteur vidéo
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
+        <VideoSelect
+          handleFileChange={handleFileChange}
+          handleCreateVideoWithBoundingBox={handleCreateVideoWithBoundingBox}
+          videoRef={videoRef}
+          canvasRef={canvasRef}
+          videoSrc={videoSrc}
+          setVideoSrc={setVideoSrc}
+        />
         {loadModel ? (
           <ModelLoader
             percent={percentLoaded}
@@ -234,95 +169,9 @@ export default function VideoInference({ user }: IProps) {
             }
           />
         ) : (
-          <Card>
-            <CardHeader className="flex flex-row items-start bg-muted/50">
-              <div className="grid gap-0.5">
-                <CardTitle className="text-lg">Modèle Sélection</CardTitle>
-              </div>
-            </CardHeader>
-            <CardContent className="p-6">
-              <div className="grid gap-4">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="outline"
-                      className="w-full justify-between">
-                      <span>
-                        {modelName ? modelName : "Choisissez un modèle"}
-                      </span>
-                      <ChevronDownIcon className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    {Object.keys(ModelComputerVision).map((key, index) => (
-                      <DropdownMenuItem
-                        key={index}
-                        onClick={() => setModelName(ModelComputerVision[key])}>
-                        {ModelComputerVision[key]}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </div>
-            </CardContent>
-          </Card>
+          <ModelSelection />
         )}
       </div>
     </main>
   )
 }
-
-function ChevronDownIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round">
-      <path d="m6 9 6 6 6-6" />
-    </svg>
-  )
-}
-
-function PlayIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round">
-      <polygon points="6 3 20 12 6 21 6 3" />
-    </svg>
-  )
-}
-
-function XIcon(props) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round">
-      <path d="M18 6 6 18" />
-      <path d="m6 6 12 12" />
-    </svg>
-  )
-}

components/model-selection.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { ModelComputerVision } from "@/models/model-list"
+import { Button } from "./ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import { useModelStore } from "@/lib/store/model-store"
+
+export default function ModelSelection() {
+  const { modelName, setModel } = useModelStore()
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-start bg-muted/50">
+        <div className="grid gap-0.5">
+          <CardTitle className="text-lg">Modèle Sélection</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="p-6">
+        <div className="grid gap-4">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" className="w-full justify-between">
+                <span>{modelName ? modelName : "Choisissez un modèle"}</span>
+                <ChevronDownIcon className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {Object.keys(ModelComputerVision).map((key, index) => (
+                <DropdownMenuItem
+                  key={index}
+                  onClick={() => setModel(ModelComputerVision[key])}>
+                  {ModelComputerVision[key]}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function ChevronDownIcon(props) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  )
+}

components/video-reader.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
+
+interface IProps {
+  videoRef: React.RefObject<HTMLVideoElement>
+  canvasRef: React.RefObject<HTMLCanvasElement>
+  videoSrc: string | null
+}
+
+export default function VideoReader({ videoRef, canvasRef, videoSrc }: IProps) {
+  return (
+    <Card className="overflow-hidden bg-background">
+      <CardHeader className="flex flex-row items-start bg-muted/50 ">
+        <div className="grid gap-0.5">
+          <CardTitle className="text-lg">Lecteur Vidéo</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="p-6">
+        <div className="relative w-full max-w-2xl overflow-hidden rounded-lg aspect-video">
+          <video ref={videoRef} className="w-full" autoPlay controls>
+            {videoSrc && <source src={videoSrc} type="video/mp4" />}
+          </video>
+          <canvas
+            ref={canvasRef}
+            className="absolute top-0 left-0 w-full h-full pointer-events-none"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}