웹용 얼굴 스타일 지정 가이드

<ph type="x-smartling-placeholder">

MediaPipe 얼굴 스타일라이저 작업을 사용하면 이미지의 면에 얼굴 스타일을 적용할 수 있습니다. 이 작업을 사용하여 다양한 스타일의 가상 아바타를 만들 수 있습니다.

이 지침에서 설명하는 코드 샘플은 GitHub 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예

얼굴 스타일라이저의 코드 예는 이 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 나만의 얼굴 스타일 지정 앱을 만들어 보세요. 데이터를 보고, 실행하고, 얼굴 스타일 지정 도구 예시 수정 웹만 사용하여 코드를 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명합니다. 도움이 될 것입니다. 설정 방법에 대한 일반적인 정보는 웹 및 JavaScript 개발 환경(플랫폼 버전 포함) 웹 설정 가이드를 참고하세요.

JavaScript 패키지

얼굴 스타일라이저 코드는 MediaPipe @mediapipe/tasks-vision를 통해 사용할 수 있습니다. NPM 패키지 GNI의 웹사이트인 g.co/newsinitiative에서 플랫폼 설정의 안내에 따라 이러한 라이브러리를 다운로드합니다. 가이드를 참조하세요.

<ph type="x-smartling-placeholder">

다음 명령어를 사용하여 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 facestylizer = await FaceStylizer.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
      },
    });

데이터 준비

얼굴 스타일라이저는 호스트에서 지원하는 모든 형식으로 이미지의 얼굴에 스타일을 지정할 수 있습니다. 있습니다. 이 작업은 또한 크기 조절, 크기 조절, 정규화를 사용합니다.

작업 실행

얼굴 스타일라이저는 stylize() 메서드를 사용하여 추론을 트리거합니다. 작업 는 데이터를 처리하고, 얼굴에 스타일을 지정하려고 시도한 다음 결과를 보고합니다. Face Stylizer stylize() 메서드 호출은 동기식으로 실행되고 사용자 인터페이스 스레드입니다.

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

const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);

결과 처리 및 표시

얼굴 스타일라이저는 스타일이 가장 높은 MPImage 객체를 반환합니다. 입력 이미지 내에서 눈에 띄는 얼굴

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

위의 출력은 색상 스케치 모델을 다음 입력 이미지에 추가합니다.