웹용 이미지 삽입 가이드

MediaPipe 이미지 임베더 태스크를 사용하면 이미지 데이터를 숫자로 변환하여 두 이미지의 유사성을 비교하는 등 ML 관련 이미지 처리 작업을 실행할 수 있습니다. 이 안내에서는 Node 및 웹 앱에서 이미지 삽입 도구를 사용하는 방법을 보여줍니다.

이 태스크의 기능, 모델, 구성 옵션에 관한 자세한 내용은 개요를 참고하세요.

코드 예

이미지 삽입 도구의 예시 코드는 참고용으로 JavaScript에서 이 작업을 완전히 구현한 코드를 제공합니다. 이 코드는 이 작업을 테스트하고 자체 이미지 삽입 앱을 빌드하는 데 도움이 됩니다. 웹브라우저만 사용하여 이미지 삽입 도구 예시 코드를 보고, 실행하고, 수정할 수 있습니다.

설정

이 섹션에서는 특히 이미지 삽입 도구를 사용하도록 개발 환경 및 코드 프로젝트를 설정하는 주요 단계를 설명합니다. 플랫폼 버전 요구사항을 비롯하여 MediaPipe 태스크를 사용하기 위한 개발 환경 설정에 관한 일반적인 정보는 웹용 설정 가이드를 참고하세요.

JavaScript 패키지

이미지 삽입 도구 코드는 MediaPipe @mediapipe/tasks-vision NPM 패키지를 통해 사용할 수 있습니다. 이러한 라이브러리는 플랫폼 설정 가이드에 제공된 링크에서 찾고 다운로드할 수 있습니다.

다음 명령어를 사용하여 로컬 스테이징을 위해 다음 코드로 필요한 패키지를 설치할 수 있습니다.

npm install @mediapipe/tasks-vision

콘텐츠 전송 네트워크 (CDN) 서비스를 통해 작업 코드를 가져오려면 HTML 파일의 태그에 다음 코드를 추가합니다.

<!-- You can replace jsDelivr with your preferred CDN -->
<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/

할 일 만들기

모델 경로 지정

createFromModelPath() 메서드를 사용하여 기본 옵션으로 태스크를 만들 수 있습니다.

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
  const imageEmbedder = await ImageEmbedder.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath: `https://storage.googleapis.com/mediapipe-models/image_embedder/mobilenet_v3_small/float32/1/mobilenet_v3_small.tflite`
    },
  });

모델 버퍼 지정

모델이 이미 메모리에 로드된 경우 createFromModelBuffer() 메서드를 사용할 수 있습니다.

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const imageEmbedder = ImageEmbedder.createFromModelBuffer(
    vision, 
    new Uint8Array(...)
);

맞춤 옵션 지정

MediaPipe 이미지 삽입 도구 작업은 createFromOptions 함수를 사용하여 작업을 설정합니다. createFromOptions 함수는 구성 옵션의 값을 허용합니다. 구성 옵션에 관한 자세한 내용은 구성 옵션을 참고하세요.

다음 코드는 맞춤 옵션으로 작업을 빌드하고 구성하는 방법을 보여줍니다.

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

구성 옵션

이 작업에는 웹 애플리케이션의 다음과 같은 구성 옵션이 있습니다.

옵션 이름 설명 값 범위 기본값
running_mode 태스크의 실행 모드를 설정합니다. 모드는 두 가지가 있습니다.

IMAGE: 단일 이미지 입력의 모드입니다.

동영상: 동영상의 디코딩된 프레임 또는 카메라와 같은 입력 데이터의 라이브 스트림에 관한 모드입니다.		 {IMAGE, VIDEO} IMAGE
l2Normalize 반환된 특성 벡터를 L2 norm으로 정규화할지 여부입니다. 모델에 아직 네이티브 L2_NORMALIZATION TFLite 연산자가 포함되어 있지 않은 경우에만 이 옵션을 사용하세요. 대부분의 경우 이미 이 연산자가 포함되어 있으므로 이 옵션 없이 TFLite 추론을 통해 L2 정규화가 이루어집니다. Boolean False
quantize 반환된 임베딩을 스칼라 정규화를 통해 바이트로 정규화해야 하는지 여부입니다. 임베딩은 단위 노름이라고 암시적으로 가정되므로 모든 측정기준의 값은 [-1.0, 1.0] 범위에 포함됩니다. 그렇지 않은 경우 l2Normalize 옵션을 사용하세요. Boolean False

데이터 준비

이미지 삽입 도구는 호스트 브라우저에서 지원하는 모든 형식으로 이미지를 삽입할 수 있습니다. 이 작업은 크기 조절, 회전, 값 정규화 등 데이터 입력 전처리도 처리합니다.

이미지 삽입 도구 embed() 및 embedForVideo() 메서드 호출은 동기식으로 실행되고 사용자 인터페이스 스레드를 차단합니다. 동영상 프레임에서 특징 벡터를 추출하려면 각 임베딩이 기본 스레드를 차단합니다. 웹 워커를 구현하여 다른 스레드에서 embed() 및 embedForVideo() 메서드를 실행하면 이를 방지할 수 있습니다.

태스크 실행

이미지 임베더는 embed() (실행 모드 image) 및 embedForVideo() (실행 모드 video) 메서드를 사용하여 추론을 트리거합니다. Image Embedder API는 입력 이미지의 임베딩 벡터를 반환합니다.

다음 코드는 태스크 모델로 처리를 실행하는 방법을 보여줍니다.

이미지

const image = document.getElementById("image") as HTMLImageElement;
const imageEmbedderResult = imageEmbedder.embed(image);

동영상

  const video = document.getElementById("webcam");

  const startTimeMs = performance.now();
  const embedderResult = await imageEmbedder.embedForVideo(video, startTimeMs);

결과 처리 및 표시

추론을 실행하면 이미지 임베더 태스크는 입력 이미지 또는 프레임의 임베딩 벡터가 포함된 ImageEmbedderResult 객체를 반환합니다.

다음은 이 태스크의 출력 데이터 예시입니다.

ImageEmbedderResult:
  Embedding #0 (sole embedding head):
    float_embedding: {0.0, 0.0, ..., 0.0, 1.0, 0.0, 0.0, 2.0}
    head_index: 0

다음 이미지를 삽입하여 이 결과를 얻었습니다.

이국적인 고양이의 미디엄 샷

ImageEmbedder.cosineSimilarity 함수를 사용하여 두 임베딩의 시맨틱 유사성을 비교할 수 있습니다. 다음 코드를 참고하세요.

// Compute cosine similarity.
const similarity = ImageEmbedder.cosineSimilarity(
  imageEmbedderResult.embeddings[0],
  otherEmbedderResult.embeddings[0]);

이미지 삽입 도구 예시 코드는 태스크에서 반환된 삽입 도구 결과를 표시하는 방법을 보여줍니다. 자세한 내용은 코드 예시를 참고하세요.