65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 face-api 和 Tensorflow.js 在浏览器中进行年龄估计

MehreenTahir
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2020年8月24日

CPOL

2分钟阅读

viewsIcon

17841

downloadIcon

539

在本文中，我们将预测一个人的性别和年龄在浏览器中。

在上一篇文章中，我们学习了如何使用 face-api.js 和 Tensorflow.js 在浏览器中对一个人的情绪进行分类。

如果您还没有阅读那篇文章，我建议您先阅读一下，因为我们将假设您对 face-api.js 有一定的了解，并且我们将基于我们为情绪检测创建的代码进行构建。

性别和年龄检测

我们已经看到使用 face-api.js 预测人类面部表情是多么容易。但是我们还能用它做什么呢？让我们学习如何预测一个人的性别和年龄。

我们将对我们之前的代码进行一些更改。在 HTML 文件中，我们更改了视频标签的尺寸，因为我们需要一些额外的空间来显示绘制的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="application/x-javascript" src="face-api.js"></script>    
  </head>
  <body>
    <h1>Emotions, Age & gender Detection using face-api.js</h1>
    <video autoplay muted id="video" width="400" height="400" style=" margin: auto;"></video>
    <div id="prediction">Loading</div>
  <script type="text/javascript" defer src="index.js"></script>
  </body>
</html>

我们还需要在我们的 index.js 文件中导入另一个模型

faceapi.nets.ageGenderNet.loadFromUri('/models')

将年龄和性别添加到预测结果中

const detections = await faceapi
      .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions()
      .withAgeAndGender();

Face-api.js 也有一些绘图功能。让我们在我们的画布上添加绘图

const resizedDetections = faceapi.resizeResults(detections, displaySize);
 
faceapi.draw.drawDetections(canvas, resizedDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
faceapi.draw.drawFaceExpressions(canvas, resizedDetections);

现在我们已经可以获得我们的预测结果了

resizedDetections.forEach(result => {
      const { age, gender, genderProbability } = result;
      new faceapi.draw.DrawTextField(
        [
          `${faceapi.round(age, 0)} years`,
          `${gender} (${faceapi.round(genderProbability)})`
        ],
        result.detection.box.bottomRight
      ).draw(canvas);
    });

这是 index.js 文件的最终版本

const video = document.getElementById('video');
 
Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models'),
  faceapi.nets.ageGenderNet.loadFromUri('/models')
]).then(startVideo);
 
function startVideo() {
  
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  
  if (navigator.getUserMedia) {
   navigator.getUserMedia({  video: true },
      function(stream) {
         var video = document.querySelector('video');
         video.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log(err.name);
      }
   );
} else {
   document.body.innerText ="getUserMedia not supported";
   console.log("getUserMedia not supported");
  }
}
 
video.addEventListener('play', () => {
  const canvas = faceapi.createCanvasFromMedia(video);
  document.body.append(canvas);
  const displaySize = { width: video.width, height: video.height };
  faceapi.matchDimensions(canvas, displaySize);
  setInterval(async () => {
    const predictions = await faceapi
      .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions()
      .withAgeAndGender();
 
    const resizedDetections = faceapi.resizeResults(predictions, displaySize);
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    faceapi.draw.drawDetections(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
    resizedDetections.forEach(result => {
      const { age, gender, genderProbability } = result;
      new faceapi.draw.DrawTextField(
        [
          `${faceapi.round(age, 0)} years`,
          `${gender} (${faceapi.round(genderProbability)})`
        ],
        result.detection.box.bottomRight
      ).draw(canvas);
    });
  }, 100);
});

下一步是什么？

本系列文章向您介绍了 TensorFlow.js，并帮助您开始在浏览器中进行机器学习。我们构建了一个项目，向您展示了如何开始在浏览器中训练您自己的人工视觉 AI，并使其识别狗的品种、人类面部表情、年龄和性别。虽然这些本身已经令人印象深刻，但本系列仅仅是一个起点。在浏览器中，AI 和 ML 有着无限的可能性。例如，我们在本系列中没有做的一件事就是离线训练 ML 模型并将其导入到浏览器中。请随意在任何示例的基础上进行构建，或创建您自己有趣的东西。不要忘记分享您的想法！

© . All rights reserved.