웹용 이미지 삽입 가이드

MediaPipe 이미지 임베딩 작업을 사용하면 이미지 데이터를 숫자 표현으로 변환하여 두 이미지의 유사성을 비교하는 등 ML 관련 이미지 처리 작업을 수행할 수 있습니다. 다음 안내는 이미지 임베딩을 사용하는 방법을 보여줍니다. 네 가지 옵션을 제공합니다

기능, 모델, 구성 옵션에 대한 자세한 내용은 개요를 참조하세요.

코드 예

이미지 Embedder의 예제 코드는 이 자바스크립트 작업을 참조하세요. 이 코드는 이 작업을 테스트하고 자체 이미지 임베딩 앱 빌드를 시작해 보세요. 데이터를 보고, 실행하고, 로 이동하여 이미지 삽입 예시 코드 할 수 있습니다.

설정

이 섹션에서는 개발 환경을 설정하는 주요 단계를 설명하고 코드 프로젝트에서 이미지 삽입을 사용해야 합니다. 일반적인 정보 다음과 같은 MediaPipe 작업을 사용하기 위한 개발 환경 설정 자세한 내용은 웹 설정 가이드

JavaScript 패키지

이미지 임베딩 코드는 MediaPipe @mediapipe/tasks-vision를 통해 사용할 수 있습니다. NPM 패키지 다음과 같은 작업을 할 수 있습니다. 플랫폼에 제공된 링크에서 이러한 라이브러리를 찾아 다운로드 설정 가이드

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

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

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 작업 대부분의 경우 이미 이러한 경우에 해당하며 따라서 L2 정규화는 필요 없이 TFLite 추론을 통해 달성됩니다. 이 옵션에 사용할 수 있습니다. Boolean False
quantize 반환된 임베딩을 스칼라 양자화입니다. 임베딩은 암시적으로 단위 표준으로 가정되고 따라서 모든 측정기준은 [-1.0, 1.0] 값을 갖습니다. 사용 그렇지 않은 경우 l2Normalize 옵션을 사용합니다. Boolean False

데이터 준비

Image Embedder는 호스트 브라우저. 이 작업은 또한 다음을 포함한 데이터 입력 전처리를 처리합니다. 크기 조정, 회전, 값 정규화 등이 있습니다.

Image Embedder 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);

결과 처리 및 표시

추론을 실행하면 Image Embedder 작업은 입력의 임베딩 벡터가 포함된 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]);

이미지 임베딩 예제 코드에서는 임베딩을 표시하는 방법을 보여줍니다. 자세히 알아보려면 코드 예시 참조하세요.