웹용 얼굴 랜드마크 감지 가이드

MediaPipe 얼굴 랜드마크 작업을 사용하면 컴퓨터에서 얼굴의 랜드마크와 표정을 이미지 및 동영상입니다. 이 작업을 사용하여 인간의 얼굴 표정, 얼굴 필터와 효과를 적용하고, 가상 아바타를 만들었습니다. 이 태스크에서는 다음을 사용합니다. 머신러닝 (ML) 모델은 단일 이미지 또는 연속된 이미지 이미지 스트림입니다. 이 작업은 3차원 얼굴 랜드마크, 혼합형을 출력합니다. 상세한 얼굴 표정을 추론하기 위한 점수 (얼굴 표정을 나타내는 계수) 실시간으로 표시, 변환 행렬을 사용하여 변환이 필요합니다.

다음 안내는 웹 및 JavaScript용 얼굴 랜드마크를 사용하는 방법을 보여줍니다. 있습니다. 기능, 모델, 구성에 대한 자세한 내용은 개요를 참조하세요.

코드 예

얼굴 랜드마크의 코드 예는 다음의 전체 구현을 제공합니다. 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 를 시작했습니다. 데이터를 보고, 실행하고, 얼굴 랜드마크 도구 예시 코드 수정 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명합니다. 도움이 될 것입니다 일반적인 정보 웹 및 자바스크립트 개발 환경 설정, 자세한 내용은 웹 설정 가이드

JavaScript 패키지

얼굴 랜드마크 코드는 MediaPipe @mediapipe/tasks-vision를 통해 사용할 수 있습니다. NPM 패키지 다음과 같은 작업을 할 수 있습니다. 플랫폼의 안내에 따라 이러한 라이브러리를 찾아 다운로드합니다. 설정 가이드

NPM을 통해 필수 패키지를 설치할 수 있습니다. 사용하여 다음 명령어를 실행합니다.

npm install @mediapipe/tasks-vision

콘텐츠 전송 네트워크 (CDN)를 통해 작업 코드를 가져오려는 경우 <head> 페이지에 다음 코드를 태그 사이에 다음 코드를 추가하세요.

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

모델

MediaPipe Face TRADEMARKer 작업을 수행하려면 이 작업과 호환되는 학습된 모델이 필요합니다. 태스크에 맞추는 것입니다. 얼굴 랜드마크에 사용할 수 있는 학습된 모델에 대한 자세한 내용은 다음을 참조하세요. 작업 개요의 모델 섹션을 확인합니다.

모델을 선택하고 다운로드한 후 프로젝트 디렉터리에 저장합니다.

<dev-project-root>/app/shared/models/

할 일 만들기

얼굴 랜드마크 도구 createFrom...() 함수 중 하나를 사용하여 다음 작업을 수행합니다. 추론 실행을 위한 작업을 준비합니다. createFromModelPath() 사용 학습된 모델 파일에 대한 상대 또는 절대 경로를 사용하여 함수를 생성합니다. 모델이 이미 메모리에 로드된 경우 createFromModelBuffer() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

아래 코드 예에서는 createFromOptions() 함수를 사용하여 다음을 수행하는 방법을 보여줍니다. 작업을 설정하는 것입니다. createFromOptions 함수를 사용하면 구성 옵션이 있는 얼굴 랜드마크 자세한 내용은 구성 옵션.

다음 코드는 커스텀 옵션:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

구성 옵션

이 작업에는 웹 및 JavaScript에 대한 다음과 같은 구성 옵션이 있습니다. 애플리케이션:

옵션 이름	설명	값 범위	기본값
`running_mode`	작업의 실행 모드를 설정합니다. 두 가지 모드: IMAGE: 단일 이미지 입력 모드입니다. 동영상: 동영상의 디코딩된 프레임 모드 입력 데이터의 라이브 스트림(예: 카메라)	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	기기가 인식할 수 있는 최대 얼굴 수입니다. `FaceLandmarker` 평활화는 `num_faces`가 1로 설정됩니다.	`Integer > 0`	`1`
`minFaceDetectionConfidence`	얼굴 인식에 필요한 최소 신뢰도 점수입니다. 성공으로 간주됩니다.	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	얼굴 존재의 최소 신뢰도 점수입니다. 얼굴 특징 감지에서 점수를 계산할 수 있습니다.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	얼굴 추적의 최소 신뢰도 점수입니다. 합격해야 합니다.	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	얼굴 랜드마크 도구가 얼굴 혼합 형태를 출력하는지 여부입니다. 얼굴 혼합 모양은 3D 얼굴 모델을 렌더링하는 데 사용됩니다.	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceShadower가 얼굴 인식을 출력하는지 여부 변환 행렬입니다. FaceTRADEMARKer는 행렬을 사용하여 얼굴 랜드마크를 표준 얼굴 모델에서 이를 통해 사용자는 감지된 랜드마크에 효과를 적용할 수 있습니다.	`Boolean`	`False`

데이터 준비

Face TRADEMARKer는 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다. 동영상의 랜드마크인 얼굴과 API를 사용하면 타임스탬프를 사용하여 한 번에 한 프레임씩 빠르게 처리할 수 을 사용하여 동영상에서 얼굴이 나오는 시점을 파악합니다.

작업 실행

얼굴 랜드마크는 detect() (실행 모드 IMAGE 사용)를 사용합니다. 트리거할 detectForVideo() (실행 모드 VIDEO 포함) 메서드 제공합니다. 이 작업은 데이터를 처리하고, 랜드마크를 인식하려고 시도하며, 결과를 보고합니다.

Face TRADEMARKer detect() 및 detectForVideo() 메서드 호출이 실행됩니다. 비동기식으로 처리하고 사용자 인터페이스 스레드를 차단해야 합니다 얼굴을 인식하는 경우 각 감지는 주요 프레임의 스레드가 필요합니다. 웹 작업자를 구현하여 detect() 및 detectForVideo() 메서드가 있습니다.

다음 코드는 작업 모델을 사용하여 처리를 실행하는 방법을 보여줍니다.

이미지

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

동영상

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

얼굴 랜드마크 작업 실행을 좀 더 전체적으로 구현하려면 코드 예를 참고하세요.

결과 처리 및 표시

얼굴 랜드마크는 각 감지마다 결과 객체를 반환합니다. 실행할 수 있습니다 결과 객체에는 인식된 각 얼굴에 대한 얼굴 메시가 포함되며 좌표입니다. 선택적으로 결과 객체는 얼굴 표정을 나타내는 혼합 형태와 변환 매트릭스를 사용하여 인식된 랜드마크에 얼굴 효과를 적용합니다.

다음은 이 작업의 출력 데이터 예시를 보여줍니다.

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

다음 이미지는 작업 출력을 시각화한 것입니다.

얼굴 랜드마크 도구 예제 코드는 자세히 알아보려면 코드 예시