學習JavaScript中的人臉辨識與情緒分析

學習JavaScript中的人臉辨識與情緒分析

引言：
隨著電腦科技的快速發展，人工智慧技術也越來越成熟。其中，人臉辨識和情緒分析技術在各個領域中廣泛應用。本文將介紹如何使用JavaScript進行人臉辨識和情緒分析，並提供具體的程式碼範例。

一、人臉辨識
人臉辨識是從影像或影片中偵測和辨識人臉的技術。在JavaScript中，可以使用第三方函式庫Face-api.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')
]).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)
});

在上述程式碼中，首先載入了Face-api.js的模型，然後透過呼叫getUserMedia()方法取得視訊串流並將其賦值給視訊元素。在視訊播放事件監聽器中，使用detectAllFaces()方法偵測視訊串流中的所有人臉，並透過drawDetections()和drawFaceLandmarks()方法繪製出人臉偵測框和人臉關鍵點。最後，透過drawFaceExpressions()方法繪製人臉表情。

二、情緒分析
情緒分析是透過對人臉表情進行分析和識別，判斷人的情緒狀態。在JavaScript中，同樣可以使用Face-api.js函式庫來實作情緒分析功能。以下是一段範例程式碼，實作了從圖片中辨識人臉表情並輸出情緒結果：

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));
}

在上述程式碼中，首先載入了Face-api.js的模型，然後透過detectAllFaces()方法對圖中的人臉進行檢測，再透過withFaceLandmarks()方法取得人臉關鍵點定位，最後透過withFaceExpressions()方法取得表情結果。透過reduce()方法找出表情結果中機率最高的情緒，並輸出。

結論：
本文介紹如何使用JavaScript實現人臉辨識和情緒分析功能，並提供了具體的程式碼範例。透過學習和掌握這些技術，可以在各個領域中應用人工智慧技術，為使用者帶來更好的體驗和服務。希望讀者透過本文的介紹和程式碼範例，能夠進一步了解和應用這些技術，推動更多人工智慧應用的發展。

以上是學習JavaScript中的人臉辨識與情緒分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！