Face and Age Detection with MediaPipe and TensorFlow.js

Facial detection and age prediction have become popular applications of computer vision and machine learning. In this article, we will explore how to use the MediaPipe library to extract faces from a webcam feed and then utilize a custom TensorFlow.js model to predict the age of the detected faces.

GitHub - aruno14/htmlTfJs

GitHub - aruno14/ageRecognition: A simple TensorFlow age recognition model.

Setting Up the HTML Page

The provided HTML code serves as the foundation for our face and age detection application. Let’s break down the key components:

Dependencies

<script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_detection"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-detection"></script>

Initializing the Webcam

The Start Webcam button is linked to an event listener that activates the user’s webcam using the navigator.mediaDevices.getUserMedia API. The webcam feed is displayed in the webcamVideo element.

document.getElementById('startButton').addEventListener('click', async () => {
  const videoElement = document.getElementById('webcamVideo');
  try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      videoElement.srcObject = stream;
      videoElement.style.display = 'block';
  } catch (error) {
      console.error('Error accessing webcam:', error);
  }
});

Face Detection with MediaPipe

The Analyze Webcam Image button triggers the face detection process using the MediaPipe library. The detected faces are then displayed in the faceImageContainer. The face images are also passed to a custom TensorFlow.js model for age prediction.

const detector = await faceDetection.createDetector(faceDetectionModel, faceDetectionConfig);
const videoElement = document.getElementById('webcamVideo');
const estimationConfig = { flipHorizontal: false };
context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
const faces = await detector.estimateFaces(videoElement, estimationConfig);
console.log(faces);

Age Prediction with TensorFlow.js

The predictAge function loads a custom TensorFlow.js model (agePredictionModel) and uses it to predict the age of a given face image. The predicted age is then displayed along with the corresponding face.

agePredictionModel = await tf.loadGraphModel(agePredictionModelUrl);
const inputTensor = tf.browser.fromPixels(faceImageData).resizeNearestNeighbor([128, 128]).toFloat();
const input = inputTensor.div(tf.scalar(255)).expandDims();
const predictions = agePredictionModel.predict(input);
const predictedAge = predictions.dataSync();
const predAge = tf.sum(tf.mul(predictedAge, ageArray))

Screenshot

Conclusion

In this tutorial, we’ve explored how to leverage the MediaPipe library for face detection and TensorFlow.js for age prediction in a webcam application. This integration opens up possibilities for various applications, from age estimation to personalized user experiences based on facial analysis.