faster model

Author: juanjaho

components/ObjectDetectionCamera.tsx

@@ -11,7 +11,7 @@ const WebcamComponent = (props: any) => {
   const liveDetection = useRef<boolean>(false);
   const [session, setSession] = useState<any>(null);
   const [facingMode, setFacingMode] = useState<string>("environment");
-
+  const [modelResolution, setModelResolution] = useState<string>("320x320");
   const originalSize = useRef<number[]>([0, 0]);
 
   useEffect(() => {
@@ -53,7 +53,6 @@ const WebcamComponent = (props: any) => {
     [outputTensor, inferenceTime] = await runModelUtils.runModel(session, data);
 
     props.postprocess(outputTensor, props.inferenceTime, ctx);
-    const totalEndTime = performance.now();
     setInferenceTime(inferenceTime);
   };
 
@@ -64,13 +63,13 @@ const WebcamComponent = (props: any) => {
     }
     liveDetection.current = true;
     while (liveDetection.current) {
-      const startTime = performance.now();
+      const startTime = Date.now()
       const ctx = capture();
       if (!ctx) return;
       await runModel(ctx);
-      setTotalTime(performance.now() - startTime);
+      setTotalTime(Date.now() - startTime);
       await new Promise<void>((resolve) =>
-        requestAnimationFrame(() => resolve())
+      requestAnimationFrame(() => resolve())
       );
     }
   };
@@ -169,9 +168,9 @@ const WebcamComponent = (props: any) => {
           <div className="flex gap-1 justify-center items-center items-stretch">
             <button
               onClick={async () => {
-                const startTime = performance.now();
+                const startTime = Date.now();
                 await processImage();
-                setTotalTime(performance.now() - startTime);
+                setTotalTime(Date.now() - startTime);
               }}
               className="p-2 border-dashed border-2 rounded-xl hover:translate-y-1 "
             >
@@ -183,7 +182,6 @@ const WebcamComponent = (props: any) => {
                   liveDetection.current = false;
                 } else {
                   runLiveDetection();
-                  console.log("asdf");
                 }
               }}
               //on hover, shift the button up
@@ -205,6 +203,21 @@ const WebcamComponent = (props: any) => {
             >
               Switch Camera
             </button>
+            <button
+              onClick={() => {
+                reset();
+                if (modelResolution == "320x320"){
+                  setModelResolution("640x640")
+                  props.changeModelResolution("640x640")
+                }else{
+                  setModelResolution('320x320')
+                  props.changeModelResolution("320x320")
+                }
+              }}
+              className="p-2  border-dashed border-2 rounded-xl hover:translate-y-1 "
+            >
+              Change Speed
+            </button>
             <button
               onClick={reset}
               className="p-2  border-dashed border-2 rounded-xl hover:translate-y-1 "
@@ -215,7 +228,7 @@ const WebcamComponent = (props: any) => {
         </div>
         <div className="flex gap-3 flex-row flex-wrap justify-between items-center px-5 w-full">
           <div>
-            {"Model Inference Time: " + inferenceTime + "ms"}
+            {"Model Inference Time: " + inferenceTime.toFixed() + "ms"}
             <br />
             {"Total Time: " + totalTime.toFixed() + "ms"}
             <br />

components/models/Yolo.tsx

@@ -4,11 +4,23 @@ import ops from "ndarray-ops";
 import ObjectDetectionCamera from "../ObjectDetectionCamera";
 import { round } from "lodash";
 import { yoloClasses } from "../../data/yolo_classes";
+import { useState } from "react";
+const mapResolution = new Map();
+mapResolution.set("320x320", [320, 320])
+mapResolution.set("640x640", [640, 640])
 
-const INPUT_DIM_WIDTH = 640;
-const INPUT_DIM_HEIGHT = 640;
 
 const Yolo = (props: any) => {
+  const [modelInputDimensions, setModelInputDimensions] = useState<number[]>([
+    320, 320,
+  ]);
+
+  const changeModelResolution = (model: string) => {
+    if (mapResolution.get(model)) {
+      setModelInputDimensions(mapResolution.get(model));
+    }
+  }
+
   const resizeCanvasCtx = (
     ctx: CanvasRenderingContext2D,
     targetWidth: number,
@@ -49,13 +61,17 @@ const Yolo = (props: any) => {
   };
 
   const preprocess = (ctx: CanvasRenderingContext2D) => {
-    const resizedCtx = resizeCanvasCtx(ctx, INPUT_DIM_WIDTH, INPUT_DIM_HEIGHT);
+    const resizedCtx = resizeCanvasCtx(
+      ctx,
+      modelInputDimensions[0],
+      modelInputDimensions[1]
+    );
 
     const imageData = resizedCtx.getImageData(
       0,
       0,
-      INPUT_DIM_HEIGHT,
-      INPUT_DIM_WIDTH
+      modelInputDimensions[0],
+      modelInputDimensions[1]
     );
     const { data, width, height } = imageData;
     // data processing
@@ -104,8 +120,8 @@ const Yolo = (props: any) => {
     inferenceTime: number,
     ctx: CanvasRenderingContext2D
   ) => {
-    const dx = ctx.canvas.width / INPUT_DIM_WIDTH;
-    const dy = ctx.canvas.height / INPUT_DIM_HEIGHT;
+    const dx = ctx.canvas.width / modelInputDimensions[0];
+    const dy = ctx.canvas.height / modelInputDimensions[1];
 
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
     for (let i = 0; i < tensor.dims[0]; i++) {
@@ -156,7 +172,8 @@ const Yolo = (props: any) => {
       preprocess={preprocess}
       postprocess={postprocess}
       resizeCanvasCtx={resizeCanvasCtx}
-      modelUri={"./_next/static/chunks/pages/yolov7-tiny.onnx"}
+      modelUri={`./_next/static/chunks/pages/yolov7-tiny_${modelInputDimensions[0]}x${modelInputDimensions[1]}.onnx`}
+      changeModelResolution={changeModelResolution}
     />
   );
 };