MediaPipe 얼굴 스타일라이저 작업을 사용하면 이미지 속 얼굴에 얼굴 스타일을 적용할 수 있습니다. 이 작업을 사용하여 다양한 스타일의 가상 아바타를 만들 수 있습니다.
이 안내에 설명된 코드 샘플은 GitHub에서 제공됩니다. 이 태스크의 기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.
코드 예시
얼굴 스타일라이저의 예시 코드에서는 이 작업을 JavaScript로 완전히 구현한 후 참고할 수 있습니다. 이 코드를 사용하면 이 작업을 테스트하고 자체 얼굴 스타일 지정 앱을 빌드할 수 있습니다. 웹브라우저만 사용하여 얼굴 스타일라이저 예시 코드를 보고 실행하고 수정할 수 있습니다.
설정
이 섹션에서는 특히 얼굴 스타일라이저를 사용하도록 개발 환경을 설정하는 주요 단계를 설명합니다. 플랫폼 버전 요구사항을 포함하여 웹 및 JavaScript 개발 환경 설정에 관한 일반적인 정보는 웹 설정 가이드를 참고하세요.
JavaScript 패키지
얼굴 스타일라이저 코드는 MediaPipe @mediapipe/tasks-vision
NPM 패키지를 통해 사용할 수 있습니다. 플랫폼 설정 가이드의 안내에 따라 이러한 라이브러리를 찾아 다운로드할 수 있습니다.
다음 명령어를 사용하여 NPM을 통해 필요한 패키지를 설치할 수 있습니다.
npm install @mediapipe/tasks-vision
콘텐츠 전송 네트워크 (CDN) 서비스를 사용하여 작업 코드를 가져오려면 HTML 파일의 <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() 메서드를 사용하여 추론을 트리거합니다. 이 작업은 데이터를 처리하고 얼굴 스타일 지정을 시도한 후 결과를 보고합니다.
얼굴 스타일라이저 stylize() 메서드 호출은 동기식으로 실행되며 사용자 인터페이스 스레드를 차단합니다.
다음 코드는 작업 모델을 사용하여 처리를 실행하는 방법을 보여줍니다.
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
결과 처리 및 표시
얼굴 스타일라이저는 입력 이미지 내에서 가장 눈에 띄는 얼굴이 스타일이 지정된 MPImage 객체를 반환합니다.
다음은 이 작업의 출력 데이터 예를 보여줍니다.
위 출력은 다음 입력 이미지에 색상 스케치 모델을 적용하여 생성되었습니다.
