前端圈

分享与交流前端开发相关知识

使用JavaScript进行人脸识别

人脸检测是人工智能的最常见应用之一。在最近几年中,人脸检测的使用有所增加。

Face-api.js带来了一个JavaScript API,用于在tensorflow.js核心API之上实现的浏览器中进行人脸检测和人脸识别

在本教程中,我们将构建可在浏览器中使用的面部识别应用程序。从面部,我们将预测情绪,性别和年龄。

该应用程序的输出将如下所示。
《使用JavaScript进行人脸识别》

项目步骤

第一步-创建一个名为 face-recognition

face-recognition文件夹下创建以下文件夹结构
《使用JavaScript进行人脸识别》

除型号外,所有文件夹都是不言自明的。我将在以后的内容中进行介绍。

步骤2-下载 face-api.min.js

face-api.min.js从以下URL 下载代码并将其粘贴到js/face-api.min.js文件中。

https://raw.githubusercontent.com/karkranikhil/face-recognition-using-js/master/js/face-api.min.js

第三步-下载模态文件

模型是训练后的数据,我们将使用它们来检测面部特征。
从以下URL下载文件并将其放在models文件夹中。

https://github.com/karkranikhil/face-recognition-using-js/tree/master/models

第4步-构建index.html文件。

index.html文件中,我们导入style.cssfor样式,face-api.min.js以处理模型数据并提取特征和main.js,在此处编写逻辑。
body标签内部,我们正在创建一个视频标签来获取面孔,result-container以显示情感,性别和年龄。

将以下代码放入index.html文件中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Face recognition App</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>Face recognition in the browser using Javascript</header>
    <div class="container">
      <video id="video" height="500" width="500" autoplay muted></video>
    </div>
    <div class="result-container">
      <div id="emotion">Emotion</div>
      <div id="gender">Gender</div>
      <div id="age">Age</div>
    </div>

    <script src="./js/face-api.min.js"></script>
    <script src="./js/main.js"></script>
  </body>
</html>

第5步-构建main.js文件。

main.js文件中,我们promise.all用于将模型加载到Face API。一旦兑现承诺,我们就会调用startVideo启动流式传输的方法。以下是用于此演示的方法

  • faceapi.detectSingleFace方法- detectSingleFace利用SSD Mobilenet V1人脸检测器。您可以通过传递相应的选项对象来指定面部检测器。为了检测多张面孔替换detectSingleFacedetectAllFaces
  • withFaceLandmarks method -用于检测68个人脸地标点
  • withFaceExpressions method -此方法检测图像中的所有面孔+识别每个面孔的面部表情并返回数组
  • withAgeAndGendermethod -此方法可检测图像中的所有面孔+估计年龄并识别每张面孔的性别并返回数组

将以下代码替换为 main.js

const video = document.getElementById("video");
const isScreenSmall = window.matchMedia("(max-width: 700px)");
let predictedAges = [];

/****Loading the model ****/
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(
    { video: {} },
    stream => (video.srcObject = stream),
    err => console.error(err)
  );
}

/****Fixing the video with based on size size  ****/
function screenResize(isScreenSmall) {
  if (isScreenSmall.matches) {
    video.style.width = "320px";
  } else {
    video.style.width = "500px";
  }
}

screenResize(isScreenSmall);
isScreenSmall.addListener(screenResize);

/****Event Listeiner for the video****/
video.addEventListener("playing", () => {
  const canvas = faceapi.createCanvasFromMedia(video);
  let container = document.querySelector(".container");
  container.append(canvas);

  const displaySize = { width: video.width, height: video.height };
  faceapi.matchDimensions(canvas, displaySize);

  setInterval(async () => {
    const detections = await faceapi
      .detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions()
      .withAgeAndGender();

    const resizedDetections = faceapi.resizeResults(detections, displaySize);
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

    /****Drawing the detection box and landmarkes on canvas****/
    faceapi.draw.drawDetections(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);

    /****Setting values to the DOM****/
    if (resizedDetections && Object.keys(resizedDetections).length > 0) {
      const age = resizedDetections.age;
      const interpolatedAge = interpolateAgePredictions(age);
      const gender = resizedDetections.gender;
      const expressions = resizedDetections.expressions;
      const maxValue = Math.max(...Object.values(expressions));
      const emotion = Object.keys(expressions).filter(
        item => expressions[item] === maxValue
      );
      document.getElementById("age").innerText = `Age - ${interpolatedAge}`;
      document.getElementById("gender").innerText = `Gender - ${gender}`;
      document.getElementById("emotion").innerText = `Emotion - ${emotion[0]}`;
    }
  }, 10);
});

function interpolateAgePredictions(age) {
  predictedAges = [age].concat(predictedAges).slice(0, 30);
  const avgPredictedAge =
    predictedAges.reduce((total, a) => total + a) / predictedAges.length;
  return avgPredictedAge;
}

步骤6-让我们将样式添加到应用中。

style.css以下代码替换。

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
  background: #2f2f2f;
  width: calc(100% - 33px);
}

canvas {
  position: absolute;
}
.container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.result-container {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.result-container > div {
  font-size: 1.3rem;
  padding: 0.5rem;
  margin: 5px 0;
  color: white;
  text-transform: capitalize;
}
#age {
  background: #1e94be;
}
#emotion {
  background: #8a1025;
}
#gender {
  background: #62d8a5;
}
video {
  width: 100%;
}
header {
  background: #42a5f5;
  color: white;
  width: 100%;
  font-size: 2rem;
  padding: 1rem;
  font-size: 2rem;
}

第7步-让我们通过实时服务器或 http-server

一旦运行该应用程序,您将看到以下输出。
《使用JavaScript进行人脸识别》

您可以使用以下URL https://face-recognition.karkranikhil.now.sh/运行由我部署的应用

参考

https://github.com/justadudewhohacks/face-api.js/
GITHUB- https : //github.com/karkranikhil/face-recognition-using-js

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注