웹 설정 가이드

이 페이지에서는 JavaScript 웹 애플리케이션에서 MediaPipe 태스크를 사용하도록 개발 환경을 설정하는 방법을 설명합니다.

지원되는 플랫폼 및 버전

MediaPipe 태스크로 웹 애플리케이션을 만들려면 개발 환경에 다음이 필요합니다.

  • Chrome 또는 Safari 브라우저
  • Node.js 및 NPM을 사용하는 웹 애플리케이션 또는 스크립트 태그를 사용하여 콘텐츠 전송 네트워크(CDN)를 통해 MediaPipe 태스크에 액세스할 수 있습니다.

MediaPipe 태스크 종속 항목

MediaPipe 태스크는 비전, 텍스트, 오디오를 위해 사전 빌드된 라이브러리 세 개를 제공합니다. 앱에서 사용하는 MediaPipe 태스크에 따라 비전, 텍스트 또는 오디오 라이브러리를 개발 프로젝트로 가져옵니다.

생성형 AI 작업

MediaPipe 태스크 생성형 AI 모듈에는 이미지 또는 텍스트 생성을 처리하는 태스크가 포함됩니다. MediaPipe Tasks 생성형 AI 라이브러리를 가져오려면 다음 종속 항목을 개발 프로젝트로 가져옵니다.

LLM 추론 API

MediaPipe LLM 추론 작업은 tasks-genai 라이브러리 내에 포함되어 있습니다.

npm install @mediapipe/tasks-genai

서버에 배포하려면 jsDelivr과 같은 콘텐츠 전송 네트워크 (CDN) 서비스를 사용하여 HTML 페이지에 코드를 직접 추가하면 됩니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

비전 작업

MediaPipe 태스크 비전 모듈에는 이미지 또는 동영상 입력을 처리하는 태스크가 포함되어 있습니다. MediaPipe Tasks 비전 라이브러리를 가져오려면 다음 종속 항목을 개발 프로젝트로 가져옵니다.

npm install @mediapipe/tasks-vision

서버에 배포하려면 jsDelivr과 같은 콘텐츠 전송 네트워크 (CDN) 서비스를 사용하여 HTML 페이지에 코드를 직접 추가하면 됩니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

텍스트 작업

MediaPipe 태스크 텍스트 모듈에는 문자열 입력을 처리하는 태스크가 포함됩니다. MediaPipe Tasks 텍스트 라이브러리를 가져오려면 다음 종속 항목을 개발 프로젝트로 가져옵니다.

npm install @mediapipe/tasks-text

서버에 배포하려면 jsDelivr과 같은 콘텐츠 전송 네트워크 (CDN) 서비스를 사용하여 HTML 페이지에 코드를 직접 추가하면 됩니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/text_bundle.js"
    crossorigin="anonymous"></script>
</head>

오디오 작업

MediaPipe 작업 오디오 모듈에는 사운드 입력을 처리하는 작업이 포함됩니다. MediaPipe Tasks 오디오 라이브러리를 가져오려면 다음 종속 항목을 개발 프로젝트로 가져옵니다.

npm install @mediapipe/tasks-audio

서버에 배포하려면 jsDelivr과 같은 콘텐츠 전송 네트워크 (CDN) 서비스를 사용하여 HTML 페이지에 코드를 직접 추가하면 됩니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/audio_bundle.js"
    crossorigin="anonymous"></script>
</head>

BaseOptions 구성

BaseOptions는 MediaPipe Task API의 일반 구성을 허용합니다.

옵션 이름 설명 허용되는 값
modelAssetBuffer Uint8Array 유형의 배열인 모델 애셋 파일 콘텐츠 Uint8Array
modelAssetPath 열어서 메모리에 매핑할 모델 애셋의 경로입니다. TrustedResourceUrl
Delegate 기기 대리자를 통한 하드웨어 가속을 사용 설정하여 MediaPipe 파이프라인을 실행합니다. 기본값은 CPU입니다. [CPU,
GPU]

문제 해결

MediaPipe와 관련된 기술 질문이 있으면 토론방 또는 Stack Overflow를 방문하여 커뮤니티의 지원을 받으세요. 버그를 신고하거나 기능을 요청하려면 GitHub에서 문제를 신고하세요.