// // Import dependencies
// import React, { useRef, useEffect } from 'react';
// import * as tf from '@tensorflow/tfjs';
// import Webcam from 'react-webcam';
// import { Box, Container } from '@mui/material';
// // import { nextFrame } from '@tensorflow/tfjs';
// // Import drawing utility
// // import { drawRect } from './utilities';

// type DetectionResult = [tf.Tensor, tf.Tensor<tf.Rank>, tf.Tensor<tf.Rank>, tf.Tensor<tf.Rank>, tf.Tensor<tf.Rank>];

// const App: React.FC = () => {
//     const webcamRef = useRef<Webcam>(null);
//     const canvasRef = useRef<HTMLCanvasElement>(null);

//     // Main function
//     const runCoco = async () => {
//         // Load network
//         const net = await tf.loadGraphModel(
//             'https://hirushasign.s3.eu-north-1.amazonaws.com/model.json'
//         );

//         // Loop and detect hands
//         setInterval(() => {
//             detect(net);
//         }, 16.7);
//     };

//     const detect = async (net: tf.GraphModel) => {
//         // Check data is available
//         if (
//             webcamRef.current &&
//             webcamRef.current.video &&
//             webcamRef.current.video.readyState === 4
//         ) {
//             // Get Video Properties
//             const video = webcamRef.current.video;
//             const videoWidth = webcamRef.current.video.videoWidth;
//             const videoHeight = webcamRef.current.video.videoHeight;

//             // Set video width
//             webcamRef.current.video.width = videoWidth;
//             webcamRef.current.video.height = videoHeight;

//             // Set canvas height and width
//             if (canvasRef.current) {
//                 canvasRef.current.width = videoWidth;
//                 canvasRef.current.height = videoHeight;
//             }

//             // Make Detections
//             const img = tf.browser.fromPixels(video);
//             const resized = tf.image.resizeBilinear(img, [640, 480]);
//             const casted = resized.cast('int32');
//             const expanded = casted.expandDims(0);
//             const obj = (await net.executeAsync(expanded)) as DetectionResult;

//             console.log(obj)

//             const boxes = await obj[1].array() as number[][];
//             const classes = await obj[2].array() as number[];
//             const scores = await obj[4].array() as number[];

//             // Draw mesh
//             if (canvasRef.current) {
//                 const ctx = canvasRef.current.getContext('2d');
//                 if (ctx) {
//                     requestAnimationFrame(() => {
//                         // drawRect(boxes[0], classes[0], scores[0], 0.8, videoWidth, videoHeight, ctx);
//                     });
//                 }
//             }

//             tf.dispose([img, resized, casted, expanded, obj]);
//         }
//     };

//     useEffect(() => {
//         runCoco();
//     }, []);

//     return (
//         <Container maxWidth="sm">
//             <Box
//                 sx={{
//                     position: 'relative',
//                     width: 640,
//                     height: 480,
//                 }}
//             >
//                 <Webcam
//                     ref={webcamRef}
//                     muted={true}
//                     style={{
//                         position: 'absolute',
//                         width: '100%',
//                         height: '100%',
//                     }}
//                 />

//                 <canvas
//                     ref={canvasRef}
//                     style={{
//                         position: 'absolute',
//                         width: '100%',
//                         height: '100%',
//                     }}
//                 />
//             </Box>
//         </Container>
//     );
// };

// export default App;
