How to create a face detection app using Vite

Face detection is a computer technology that identifies human faces in digital images. It has many applications, such as authenticating registered employees in offices and verifying passengers' security credentials at airports. Many libraries also use a dedicated machine learning model to perform this task in various languages.

In this Answer, we will use the Google Mediapipe library in Javascript to perform face detection on an image and display the results. Google Mediapipe library offers several customizable machine-learning models in different languages for performing tasks ranging from Gesture recognition to Image generation.

Creating a face detection app

We will use Vite to build a vanilla JavaScript project and then populate the HTML, CSS, and JavaScript files to make the functionality of the face detection app.

Vite is used because of its fast, optimized development environment with hot module replacement, which speeds up development. Simple HTML, CSS, and JS lack these advanced features, leading to slower development, dependency management issues, and performance problems, especially for complex apps like face detection.

Create a Vite project

We use the following command to create a vanilla JavaScript project containing starter code.

Code explanation

Line 11: Here, we add the link tag to import styles from an external CSS file named style.css.
Line 20: We add a button element, so the face detection process can begin after clicking the button.
Line 23: We also add an image tag to display the image of a person that will be used for face detection.
Line 24: Finally, we insert the script tag to import the index.js file containing all the logic of the face-detection app.

Create `index.js` file

We populate the index.js file with the following code to add interactivity to our application.

import {
  FaceDetector,
  FilesetResolver,
} from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0";
let total_times_clicked = 0
const button = document.getElementById("button")
  
button.onclick = loadResult
const initializefaceDetector = async () => {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"
  );
  let faceDetector = await FaceDetector.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_detector/blaze_face_short_range/float16/1/blaze_face_short_range.tflite`,
      delegate: "GPU"
    },
  });
  const image = document.getElementById("image")
  const faceDetectorResult = faceDetector.detect(image).detections;
  return faceDetectorResult
};
export async function loadResult() {
  total_times_clicked = total_times_clicked + 1
  if (total_times_clicked == 1) {
    button.disabled = "true"
  }
  initializefaceDetector().then((res) => {
    const image = document.getElementById("image")
    const canvas = document.createElement("canvas")
    document.body.appendChild(canvas);
    canvas.width = image.width
    canvas.height = image.height
    const ctx = canvas.getContext("2d")
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // Draw new image
    ctx.drawImage(image, 0, 0)
    ctx.strokeStyle = 'red';
    ctx.font = "bold 20px arial";
    ctx.fillStyle = "green";
    // Draw text
    ctx.beginPath();
    ctx.fillText("Confidence Level:", res[0].boundingBox.originX - 90, res[0].boundingBox.originY - 60, 180);
    ctx.fillText("" + Math.round(res[0].categories[0].score * 100) / 100, res[0].boundingBox.originX + 90, res[0].boundingBox.originY - 60, 180);
    // Draw bounding box
    ctx.lineWidth = 2;
    ctx.rect(res[0].boundingBox.originX, res[0].boundingBox.originY, res[0].boundingBox.width, res[0].boundingBox.height)
    ctx.stroke()
  })
}

Code explanation

Lines 1–4: Import the FaceDetector and FilesetResolver functions using the CDN URL from Google Mediapipe. FilesetResolver loads all the files needed for vision tasks. FaceDetector takes a face detection model and an image as input and returns the detection results.
Line 6: Declare a variable to track how often the button for starting the face detection task is clicked.
Line 8: Use the document.getElementById function to get a reference to the HTML button element by its id attribute.
Line 10: Set the onclick attribute of the button to call the loadResult function when clicked.
Lines 12–22: In the initializefaceDetector function, initialize the face detection model by providing the model URL and loading the required vision task files.
Line 26: Pass the image to the faceDetector.detect function, which returns the detections object.
Lines 31–37: In the loadResult function, call initializefaceDetector to get the face detection results and display them on the screen.
Line 39: Since initializefaceDetector uses asynchronous code, use the .then syntax to handle the promise. This ensures the results are displayed only after the function finishes running. Reinitialize a reference to the image for displaying the detections.
Lines 42–67: Create a canvas HTML element to draw the model detections and add it to the HTML body.

Create `style.css` file

In the style.css file, we add CSS styles to our application.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="intro">
        <h1>Face detector app</h1>
    </div>
    
    <div id="main">
        <button id="button" > Click to detect </button>
    </div>
    
    <img id="image" src="fahim.jpeg" alt="person">
    <script type="module" src="./index.js"></script>
</body>
</html>

Working example of the face detection application

Conclusion

In conclusion, face detection technology significantly enhances applications in various domains such as security, authentication, and user interaction.

By leveraging Vite for our project setup, we harness a powerful development environment that streamlines the creation and optimization of our face detection app. The combination of advanced machine learning models and modern development tools ensures our application is efficient and robust, providing a seamless user experience while simplifying the development process.

This approach accelerates development and enables us to build a scalable and maintainable face detection solution.

Free AI Mock Interviews

Coding Interview

Coding PatternsFree Interview

Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.

System Design

YouTubeFree Interview

Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources