LiteRT 소개: 온디바이스 AI를 위한 Google의 고성능 런타임(이전 명칭: TensorFlow Lite)입니다.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹용 포즈 랜드마크 감지 가이드

MediaPipe 포즈 랜드마크 작업을 사용하면 이미지에서 인체의 랜드마크를 감지할 수 있습니다. 있습니다. 이 작업을 사용하여 주요 신체 위치를 식별하고, 자세를 분석하고, 움직임을 분류합니다. 이 작업에서는 머신러닝 (ML) 모델을 단일 이미지 또는 동영상만 사용할 수 있습니다. 작업이 이미지에 랜드마크를 포즈 본문을 출력합니다. 3차원 세계 좌표로 구성됩니다.

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

코드 예

포즈 랜드마크의 코드 예는 다음과 같은 전체 구현을 제공합니다. 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 는 자신만의 포즈 랜드마크 앱을 만들기 시작했습니다. 데이터를 보고, 실행하고, Pose TRADEMARKer 예시 코드 수정 할 수 있습니다.

설정

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

JavaScript 패키지

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

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

npm install @mediapipe/tasks-vision

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

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

모델

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

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

<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 poseLandmarker = await poseLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

구성 옵션

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

옵션 이름	설명	값 범위	기본값
`runningMode`	작업의 실행 모드를 설정합니다. 두 가지 모드: IMAGE: 단일 이미지 입력 모드입니다. 동영상: 동영상의 디코딩된 프레임 모드 입력 데이터의 라이브 스트림(예: 카메라)	{`IMAGE, VIDEO`}	`IMAGE`
`numPoses`	에서 감지할 수 있는 최대 포즈 수입니다. 포즈 랜드마크	`Integer > 0`	`1`
`minPoseDetectionConfidence`	자세 감지에 필요한 최소 신뢰도 점수입니다. 성공으로 간주됩니다.	`Float [0.0,1.0]`	`0.5`
`minPosePresenceConfidence`	포즈 존재의 최소 신뢰도 점수입니다. 점수가 몇 점인지 평가합니다.	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	자세 추적의 최소 신뢰도 점수입니다. 합격해야 합니다.	`Float [0.0,1.0]`	`0.5`
`outputSegmentationMasks`	Pose TRADEMARKer에서 감지된 대상에 대해 세분화 마스크를 출력하는지 여부 있습니다.	`Boolean`	`False`

데이터 준비

포즈 랜드마크는 지원되는 모든 형식의 이미지에서 포즈를 감지할 수 있습니다. 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다. 동영상 속 이목을 끄는 포즈를 잡기 위해 API를 사용하면 타임스탬프를 사용하여 한 번에 한 프레임씩 빠르게 처리할 수 사용하여 동영상 내에서 포즈가 발생하는 시점을 결정합니다.

작업 실행

포즈 랜드마크는 detect() (IMAGE 달리기 모드 포함)를 사용합니다. 트리거할 detectForVideo() (실행 모드 VIDEO 포함) 메서드 제공합니다. 태스크는 데이터를 처리하고, 랜드마크 자세를 시도하고, 결과를 보고합니다.

포즈 랜드마크 도구 detect() 및 detectForVideo() 메서드 호출이 실행됩니다. 사용자가 삽입한 스레드를 차단할 수 있습니다. 자세를 감지하면 각 감지는 주요 프레임의 스레드가 필요합니다. 웹 작업자를 구현하여 detect() 및 detectForVideo() 메서드가 있습니다.

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

이미지

const image = document.getElementById("image") as HTMLImageElement;
const poseLandmarkerResult = poseLandmarker.detect(image);

동영상

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

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

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

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

포즈 랜드마크 작업 실행에 대한 더 완전한 구현은 다음을 참조하세요. 코드 예를 참고하세요.

결과 처리 및 표시

포즈 랜드마크는 각 감지마다 poseLandmarkerResult 객체를 반환합니다. 실행할 수 있습니다 결과 객체에는 각 포즈 랜드마크의 좌표가 포함됩니다.

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

PoseLandmarkerResult:
  Landmarks:
    Landmark #0:
      x            : 0.638852
      y            : 0.671197
      z            : 0.129959
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.634599
      y            : 0.536441
      z            : -0.06984
      visibility   : 0.999909
      presence     : 0.999958
    ... (33 landmarks per pose)
  WorldLandmarks:
    Landmark #0:
      x            : 0.067485
      y            : 0.031084
      z            : 0.055223
      visibility   : 0.9999997615814209
      presence     : 0.9999984502792358
    Landmark #1:
      x            : 0.063209
      y            : -0.00382
      z            : 0.020920
      visibility   : 0.999976
      presence     : 0.999998
    ... (33 world landmarks per pose)
  SegmentationMasks:
    ... (pictured below)

출력에 정규화된 좌표 (Landmarks)와 세계가 모두 포함됩니다. 각 랜드마크의 좌표 (WorldLandmarks)입니다.

출력에는 다음과 같은 정규화된 좌표 (Landmarks)가 포함됩니다.

x 및 y: 이미지 너비 (x)와 높이 (y)입니다.
z: 랜드마크 깊이로, 엉덩이 중간 지점의 깊이를 출처입니다. 값이 작을수록 랜드마크가 카메라에 더 가깝습니다. 이 z의 크기는 x와 거의 동일한 배율을 사용합니다.
visibility: 이미지 내에 랜드마크가 표시될 가능성입니다.

출력에는 다음의 세계 좌표 (WorldLandmarks)가 포함됩니다.

x, y, z: 미터 단위의 실제 3차원 좌표와 골반의 중간점을 기준으로 합니다.
visibility: 이미지 내에 랜드마크가 표시될 가능성입니다.

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

선택사항인 세그먼테이션 마스크는 각 픽셀이 해당 영역에 속할 가능성을 전송됩니다 다음 이미지는 작업 출력:

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