1. vimport React, { useState, useRef, useEffect } from "react";
2. import * as tf from "@tensorflow/tfjs";
3. import { detectVideo } from "../utils/detection/detect";
4. import { Webcam } from "../utils/detection/webcam";
5.  
6. export default function ModelLoader() {
7.   const [isModelLoading, setIsModelLoading] = useState({
8.     loading: true,
9.     progress: 0,
10.   });
11.   const [model, setModel] = useState({
12.     net: null,
13.     inputShape: [1, 0, 0, 3],
14.   });
15.   const [streaming, setStreaming] = useState();
16.   const webcam = new Webcam();
17.  
18.   const cameraRef = useRef(null);
19.   const canvasRef = useRef(null);
20.  
21.   // model config
22.   const modelName = "fire_detector";
23.   const classThreshold = 0.25;
24.  
25.   useEffect(() => {
26.     tf.ready().then(async () => {
27.       const model_url = `${[removed].origin}/${modelName}_yolov5n_web_model/model.json`;
28.       const yolov5 = await tf.loadGraphModel(model_url, {
29.         onProgress: (fraction) => {
30.           setIsModelLoading({
31.             loading: true,
32.             progress: fraction,
33.           });
34.         },
35.       });
36.       const dummyInput = tf.ones(yolov5.inputs[0].shape);
37.       const warmupResult = await yolov5.executeAsync(dummyInput);
38.       tf.dispose(warmupResult);
39.       tf.dispose(dummyInput);
40.  
41.       setIsModelLoading({ loading: false, progress: 1 });
42.       setModel({
43.         net: yolov5,
44.         inputShape: yolov5.inputs[0].shape,
45.       }); // set model & input shape
46.       console.log("Model Loaded");
47.     });
48.   }, []);
49.  
50.   async function handleStartWebcam() {
51.     if (streaming) {
52.       webcam.close(cameraRef.current);
53.       cameraRef.current.style.display = "none";
54.       setStreaming(null);
55.       return;
56.     }
57.     webcam.open(cameraRef.current);
58.     cameraRef.current.style.display = "block";
59.     setStreaming("camera");
60.   }
61.  
62.   return (
63.     <div className="ModelLoader">
64.       {isModelLoading.loading ? (
65.         <div>
66.           <h1>Loading Model</h1>
67.           <p>{Math.round(isModelLoading.progress * 100)}%</p>
68.         </div>
69.       ) : (
70.         <div className="content">
71.           <h1>Webcam</h1>
72.           <video
73.             autoPlay
74.             muted
75.             ref={cameraRef}
76.               =>
77.               detectVideo(
78.                 cameraRef.current,
79.                 model,
80.                 classThreshold,
81.                 canvasRef.current,
82.                 () => alert("Fire Detected")
83.               )
84.             }
85.           />
86.           <canvas
87.             width={model.inputShape[1]}
88.             height={model.inputShape[2]}
89.             ref={canvasRef}
90.           />
91.         </div>
92.       )}
93.       <button >Start Detection</button>
94.     </div>
95.   );
96. }
97.