add test mod

Author: salim laimeche

Makefile

@@ -1,17 +1,16 @@
 import { UserView } from "../../lib/identity/definition"
-import { verifySession } from "../../lib/identity/session-local"
 import VideoInference from "@/components/VideoInference"
 
 export default async function VideoInferencePage() {
-  const session = await verifySession()
+  //const session = await verifySession()
 
-  const user: UserView = {
-    id: session?.userId as string,
-    name: session?.name as string,
-    surname: session?.surname as string,
-    chatid: session?.chatid as string,
-    container: session?.container as string,
-  }
+  // const user: UserView = {
+  //   id: session?.userId as string,
+  //   name: session?.name as string,
+  //   surname: session?.surname as string,
+  //   chatid: session?.chatid as string,
+  //   container: session?.container as string,
+  // }
 
-  return <VideoInference user={user} />
+  return <VideoInference />
 }

app/video-inference/page.tsx

@@ -75,6 +75,18 @@ export default function Login() {
             balise="h3"
             className={`text-sm font-bold bg-gradient-to-r from-gray-500 via-gray-200 to-gray-500 inline-block text-transparent bg-clip-text`}
           />
+          <button
+            onClick={() => router.push("/video-inference")}
+            className="relative inline-flex h-8 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 z-10">
+            <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
+            <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full  px-2 py-1 text-sm font-medium text-white backdrop-blur-3xl">
+              <BlurIn
+                text="Tester sans connexion"
+                balise="h1"
+                className={` font-bold  bg-gradient-to-r from-gray-500 via-gray-200 to-gray-500 inline-block text-transparent bg-clip-text z-10`}
+              />{" "}
+            </span>
+          </button>
         </div>
         <Form {...form}>
           <form

components/Login.tsx

@@ -14,11 +14,7 @@ import drawBoundingBoxes from "@/lib/model-detection/coco-ssd/utils"
 import useYolodisTfjs from "@/hooks/use-yolo-tfjs"
 import { detectVideo } from "@/lib/yolov8n/detect"
 
-interface IProps {
-  user: UserView
-}
-
-export default function VideoInference({ user }: IProps) {
+export default function VideoInference() {
   const { modelName } = useModelStore()
   const ready = useTfjsBackendWeb({ backend: "webgl" })
   const { cocoSsd, loadCoco } = useCocoSsd({ ready })

components/VideoInference.tsx

@@ -14,13 +14,15 @@ import MultipleSelector, { Option } from "./ui/multiple-select"
 import useModelDetectionStorage from "@/hooks/use-model-detection-storage"
 import { useEffect, useState } from "react"
 import { Label } from "./ui/label"
+import { usePathname } from "next/navigation"
 
 export default function ModelSelection() {
   const { modelName, setModel, disposeModel } = useModelStore()
   const [options, setOptions] = useState<Option[]>([])
   const { labelsToDetect, setLabelsToDetect } = useModelDetectionStorage({
     modelName,
   })
+  const pathname = usePathname()
 
   useEffect(() => {
     if (modelName === ModelComputerVision.EMPTY) {
@@ -83,32 +85,34 @@ export default function ModelSelection() {
           Réinitialiser
         </Button>
       </CardContent>
-      <CardContent className="p-6">
-        <Label>Labels à détecter</Label>
-        <MultipleSelector
-          disabled={!modelName}
-          options={options && options}
-          value={getDefaultValue()}
-          className=" bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm "
-          emptyIndicator={
-            <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
-              Aucun label à détecter
-            </p>
-          }
-          onChange={(selectedOptions: Option[]) => {
-            const labels = labelsToDetect.map(label => {
-              return {
-                label: label.label,
-                toDetect: selectedOptions.some(
-                  selectedOption => selectedOption.value === label.label
-                ),
-              }
-            })
-            console.log("labels", labels)
-            setLabelsToDetect(labels)
-          }}
-        />
-      </CardContent>
+      {!pathname.includes("video-inference") && (
+        <CardContent className="p-6">
+          <Label>Labels à détecter</Label>
+          <MultipleSelector
+            disabled={!modelName}
+            options={options && options}
+            value={getDefaultValue()}
+            className=" bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm "
+            emptyIndicator={
+              <p className="text-center text-lg leading-10 text-gray-600 dark:text-gray-400">
+                Aucun label à détecter
+              </p>
+            }
+            onChange={(selectedOptions: Option[]) => {
+              const labels = labelsToDetect.map(label => {
+                return {
+                  label: label.label,
+                  toDetect: selectedOptions.some(
+                    selectedOption => selectedOption.value === label.label
+                  ),
+                }
+              })
+              console.log("labels", labels)
+              setLabelsToDetect(labels)
+            }}
+          />
+        </CardContent>
+      )}
     </Card>
   )
 }

components/model-selection.tsx

@@ -8,21 +8,24 @@ interface IProps {
 
 export default function VideoReader({ videoRef, canvasRef, videoSrc }: IProps) {
   return (
-    <div className="relative w-full overflow-hidden rounded-lg aspect-video">
-      <video
-        ref={videoRef}
-        className="w-full object-cover"
-        width={640}
-        height={640}
-        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"
-        width={640}
-        height={640}
-      />
-    </div>
+    <>
+      <div className="relative w-full overflow-hidden rounded-lg aspect-video">
+        <video
+          ref={videoRef}
+          className="w-full object-cover"
+          width={640}
+          height={640}
+          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"
+          width={640}
+          height={640}
+        />
+      </div>
+      <div></div>
+    </>
   )
 }

components/video-reader.tsx

@@ -1,71 +1,71 @@
-import { useModelStore } from "@/lib/store/model-store"
-import { ModelComputerVision, modelList } from "@/models/model-list"
-import { useEffect, useState } from "react"
-import * as tf from "@tensorflow/tfjs"
+import { useModelStore } from "@/lib/store/model-store" // Importation du store de modèle
+import { ModelComputerVision, modelList } from "@/models/model-list" // Importation des modèles de vision par ordinateur
+import { useEffect, useState } from "react" // Importation des hooks React
+import * as tf from "@tensorflow/tfjs" // Importation de TensorFlow.js
 
 interface IProps {
-  ready: boolean
+  ready: boolean // Propriété indiquant si le modèle est prêt
 }
 
 export type YoloModel = {
-  net: tf.GraphModel<string | tf.io.IOHandler | null>
-  inputShape: number[]
+  net: tf.GraphModel<string | tf.io.IOHandler | null> // Le modèle de réseau de neurones
+  inputShape: number[] // La forme de l'entrée du modèle
 }
 
 export default function useYolodisTfjs({ ready }: IProps) {
-  const { modelName } = useModelStore()
+  const { modelName } = useModelStore() // Récupération du nom du modèle depuis le store
   const [model, setModel] = useState<YoloModel>({
     net: null,
     inputShape: [1, 0, 0, 3],
-  }) // init model & input shape
-  const [loadModel, setLoadModel] = useState<boolean>(false)
-  const [disposeDetect, setDisposeDetect] = useState<boolean>(false)
-  const [percentLoaded, setPercentLoaded] = useState<number>(0)
+  }) // Initialisation du modèle et de la forme de l'entrée
+  const [loadModel, setLoadModel] = useState<boolean>(false) // État pour indiquer si le modèle est en cours de chargement
+  const [disposeDetect, setDisposeDetect] = useState<boolean>(false) // État pour indiquer si le modèle doit être supprimé
+  const [percentLoaded, setPercentLoaded] = useState<number>(0) // État pour indiquer le pourcentage de chargement du modèle
 
-  const modelDef = modelList.find(model => model.title === modelName)
+  const modelDef = modelList.find(model => model.title === modelName) // Recherche de la définition du modèle dans la liste des modèles
 
   async function fetchModel() {
     if (modelName === ModelComputerVision.DETECTION) {
-      setLoadModel(true)
+      setLoadModel(true) // Début du chargement du modèle
       const yolov8 = await tf.loadGraphModel(modelDef.url, {
         onProgress: fractions => {
-          setPercentLoaded(fractions * 100)
+          setPercentLoaded(fractions * 100) // Mise à jour du pourcentage de chargement
         },
-      }) // load model
-      // warming up model
-      const dummyInput = tf.ones(yolov8.inputs[0].shape)
-      const warmupResults = yolov8.execute(dummyInput)
+      }) // Chargement du modèle
+      // Préparation du modèle
+      const dummyInput = tf.ones(yolov8.inputs[0].shape) // Création d'une entrée factice
+      const warmupResults = yolov8.execute(dummyInput) // Exécution du modèle avec l'entrée factice
       setModel({
         net: yolov8,
         inputShape: yolov8.inputs[0].shape,
-      }) // set model & input shape
-      tf.dispose([warmupResults, dummyInput]) // cleanup memory
-      setLoadModel(false)
+      }) // Mise à jour du modèle et de la forme de l'entrée
+      tf.dispose([warmupResults, dummyInput]) // Nettoyage de la mémoire
+      setLoadModel(false) // Fin du chargement du modèle
     }
   }
 
   useEffect(() => {
     if (ready) {
-      fetchModel()
+      fetchModel() // Chargement du modèle si prêt
     }
 
     if (modelName === ModelComputerVision.EMPTY) {
       setModel({
         net: null,
         inputShape: [1, 0, 0, 3],
-      })
-      model.net?.dispose()
+      }) // Réinitialisation du modèle
+      model.net?.dispose() // Suppression du modèle existant
     }
-  }, [ready, modelName])
+  }, [ready, modelName]) // Dépendances du hook useEffect
 
   function disposeModel() {
-    disposeDetect && tf.disposeVariables()
-    tf.dispose()
+    disposeDetect && tf.disposeVariables() // Suppression des variables TensorFlow si nécessaire
+    tf.dispose() // Suppression de TensorFlow
   }
 
   useEffect(() => {
-    disposeModel()
-  }, [disposeDetect])
+    disposeModel() // Suppression du modèle si disposeDetect change
+  }, [disposeDetect]) // Dépendance du hook useEffect
 
-  return { model, loadModel, percentLoaded, setDisposeDetect }
+  return { model, loadModel, percentLoaded, setDisposeDetect } // Retourne les états et fonctions nécessaires
 }