Face detection with TensorflowReact TypeScript

$ npx create-react-app face-mask-app --template typescript$ yarn add react-webcam @types/react-webcam

// App.tsximport { useRef } from "react";import "./App.css";import Webcam from "react-webcam";const App = () => {  const webcam = useRef<Webcam>(null);  return (    <div className="App">      <header className="header">        <div className="title">face mask App</div>      </header>      <Webcam        audio={false}        ref={webcam}        style={{          position: "absolute",          margin: "auto",          textAlign: "center",          top: 100,          left: 0,          right: 0,        }}      />    </div>  );}export default App;

$ yarn add @tensorflow-models/face-landmarks-detection @tensorflow/tfjs-core @tensorflow/tfjs-converter @tensorflow/tfjs-backend-webgl

// App.tsximport "@tensorflow/tfjs-core";import "@tensorflow/tfjs-converter";import "@tensorflow/tfjs-backend-webgl";import * as faceLandmarksDetection from "@tensorflow-models/face-landmarks-detection";import { MediaPipeFaceMesh } from "@tensorflow-models/face-landmarks-detection/dist/types";const App = () => {  const webcam = useRef<Webcam>(null);  const useFaceDetect = async () => {    const model = await faceLandmarksDetection.load(      faceLandmarksDetection.SupportedPackages.mediapipeFacemesh    );    detect(model);  };  const detect = async (model: MediaPipeFaceMesh) => {    if (!webcam.current) return;    const webcamCurrent = webcam.current as any;    // if the video is not completely uploaded, just return.    if (webcamCurrent.video.readyState !== 4) {      return;    }    const video = webcamCurrent.video;    const predictions = await model.estimateFaces({      input: video,    });    if (predictions.length) {      console.log(predictions);    }  };  useFaceDetect();

//App.tsxconst App = () => {  const webcam = useRef<Webcam>(null);  const canvas = useRef<HTMLCanvasElement>(null);  return (    <div className="App">      <header className="header">        <div className="title">face mask App</div>      </header>      <Webcam        audio={false}        ref={webcam}      />      <canvas        ref={canvas}      />

    const videoWidth = webcamCurrent.video.videoWidth;    const videoHeight = webcamCurrent.video.videoHeight;    canvas.current.width = videoWidth;    canvas.current.height = videoHeight;

// mask.tsimport { AnnotatedPrediction } from "@tensorflow-models/face-landmarks-detection/dist/mediapipe-facemesh";import {  Coord2D,  Coords3D,} from "@tensorflow-models/face-landmarks-detection/dist/mediapipe-facemesh/util";const drawMask = (  ctx: CanvasRenderingContext2D,  keypoints: Coords3D,  distance: number) => {  const points = [    93,    132,    58,    172,    136,    150,    149,    176,    148,    152,    377,    400,    378,    379,    365,    397,    288,    361,    323,  ];  ctx.moveTo(keypoints[195][0], keypoints[195][1]);  for (let i = 0; i < points.length; i++) {    if (i < points.length / 2) {      ctx.lineTo(        keypoints[points[i]][0] - distance,        keypoints[points[i]][1] + distance      );    } else {      ctx.lineTo(        keypoints[points[i]][0] + distance,        keypoints[points[i]][1] + distance      );    }  }};export const draw = (  predictions: AnnotatedPrediction[],  ctx: CanvasRenderingContext2D,  width: number,  height: number) => {  if (predictions.length > 0) {    predictions.forEach((prediction: AnnotatedPrediction) => {      const keypoints = prediction.scaledMesh;      const boundingBox = prediction.boundingBox;      const bottomRight = boundingBox.bottomRight as Coord2D;      const topLeft = boundingBox.topLeft as Coord2D;      // make the drawing mask larger a bit      const distance =        Math.sqrt(          Math.pow(bottomRight[0] - topLeft[0], 2) +            Math.pow(topLeft[1] - topLeft[1], 2)        ) * 0.02;      ctx.clearRect(0, 0, width, height);      ctx.fillStyle = "black";      ctx.save();      ctx.beginPath();      drawMask(ctx, keypoints as Coords3D, distance);      ctx.closePath();      ctx.fill();      ctx.restore();    });  }};

    const ctx = canvas.current.getContext("2d") as CanvasRenderingContext2D;    requestAnimationFrame(() => {      draw(predictions, ctx, videoWidth, videoHeight);    });