Learn face recognition and sentiment analysis in JavaScript

Learn face recognition and emotion analysis in JavaScript

Introduction:
With the rapid development of computer technology, artificial intelligence technology is becoming more and more mature. Among them, face recognition and emotion analysis technologies are widely used in various fields. This article will introduce how to use JavaScript for face recognition and emotion analysis, and provide specific code examples.

1. Face recognition
Face recognition is a technology that detects and recognizes faces from images or videos. In JavaScript, you can use the third-party library Face-api.js to implement the face recognition function. The following is a sample code that implements face detection and recognition from camera video streams:

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')
]).then(startVideo);

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => video.srcObject = stream,
    err => console.error(err)
  )
}

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 detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions();
    const resizedDetections = faceapi.resizeResults(detections, 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);
  }, 100)
});

In the above code, the model of Face-api.js is first loaded, and then obtained by calling the getUserMedia() method video stream and assign it to the video element. In the video playback event listener, use the detectAllFaces() method to detect all faces in the video stream, and draw face detection frames and face key points through the drawDetections() and drawFaceLandmarks() methods. Finally, draw facial expressions through the drawFaceExpressions() method.

2. Emotional analysis
Emotional analysis is to determine a person’s emotional state by analyzing and identifying facial expressions. In JavaScript, you can also use the Face-api.js library to implement sentiment analysis functions. The following is a sample code that recognizes facial expressions from pictures and outputs emotional results:

const img = document.getElementById('img');

Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
  faceapi.nets.faceExpressionNet.loadFromUri('/models')
]).then(startAnalysis);

function startAnalysis() {
  faceapi.detectAllFaces(img)
    .withFaceLandmarks()
    .withFaceExpressions()
    .then(result => {
      if (result.length > 0) {
        const expressions = result[0].expressions;
        const emotion = Object.keys(expressions).reduce((a, b) => expressions[a] > expressions[b] ? a : b);
        console.log(`Detected emotion: ${emotion}`);
      } else {
        console.log("No faces detected");
      }
    })
    .catch(err => console.error(err));
}

In the above code, the Face-api.js model is first loaded, and then the detectAllFaces() method is used to The face in the picture is detected, and then the key point positioning of the face is obtained through the withFaceLandmarks() method, and finally the expression results are obtained through the withFaceExpressions() method. Use the reduce() method to find the emotion with the highest probability in the expression results and output it.

Conclusion:
This article introduces how to use JavaScript to implement face recognition and emotion analysis functions, and provides specific code examples. By learning and mastering these technologies, artificial intelligence technology can be applied in various fields to bring better experiences and services to users. We hope that through the introduction and code examples of this article, readers can further understand and apply these technologies and promote the development of more artificial intelligence applications.

The above is the detailed content of Learn face recognition and sentiment analysis in JavaScript. For more information, please follow other related articles on the PHP Chinese website!