JavaScript로 얼굴 인식 및 감정 분석 알아보기

JavaScript로 얼굴 인식 및 감정 분석 배우기

소개:
컴퓨터 기술의 급속한 발전과 함께 인공지능 기술은 점점 더 성숙해지고 있습니다. 그 중 얼굴인식과 감정분석 기술은 다양한 분야에서 널리 활용되고 있다. 이 기사에서는 얼굴 인식 및 감정 분석에 JavaScript를 사용하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 얼굴 인식
얼굴 인식은 이미지나 동영상에서 얼굴을 감지하고 인식하는 기술입니다. 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()를 호출하여 비디오 스트림을 가져옵니다. 메소드와 그 값은 비디오 요소에 할당됩니다. 비디오 재생 이벤트 리스너에서 discoverAllFaces() 메서드를 사용하여 비디오 스트림의 모든 얼굴을 감지하고 drawDetections() 및 drawFaceLandmarks() 메서드를 통해 얼굴 감지 프레임과 얼굴 키 포인트를 그립니다. 마지막으로 drawFaceExpressions() 메서드를 통해 표정을 그립니다.

2. 감정 분석
감정 분석은 얼굴 표정을 분석하고 식별하여 사람의 감정 상태를 판단하는 것입니다. 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 모델을 먼저 로드한 후, detectorAllFaces()를 통해 사진 속 인물을 감지합니다. 얼굴을 검출한 후 withFaceLandmarks() 메서드를 통해 얼굴의 핵심 포인트 위치를 획득하고, 마지막으로 withFaceExpressions() 메서드를 통해 표현 결과를 획득합니다. 표현 결과에서 확률이 가장 높은 감정을 찾아 출력하기 위해 Reduce() 메소드를 사용한다.

결론:
이 기사에서는 JavaScript를 사용하여 얼굴 인식 및 감정 분석 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 이러한 기술을 학습하고 숙달함으로써 인공지능 기술은 다양한 분야에 적용되어 사용자에게 더 나은 경험과 서비스를 제공할 수 있습니다. 이 기사의 소개와 코드 예제를 통해 독자들이 이러한 기술을 더 깊이 이해하고 적용하고 더 많은 인공 지능 애플리케이션의 개발을 촉진할 수 있기를 바랍니다.

위 내용은 JavaScript로 얼굴 인식 및 감정 분석 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!