Udhëzues për futjen e imazhit për ueb

Detyra MediaPipe Image Embedder ju lejon të konvertoni të dhënat e imazhit në një përfaqësim numerik për të kryer detyra të përpunimit të imazhit që lidhen me ML, siç është krahasimi i ngjashmërisë së dy imazheve. Këto udhëzime ju tregojnë se si të përdorni Image Embedder për aplikacionet Node dhe web.

Për më shumë informacion rreth aftësive, modeleve dhe opsioneve të konfigurimit të kësaj detyre, shihni Përmbledhjen .

Shembull kodi

Kodi shembull për Image Embedder ofron një implementim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod ju ndihmon ta testoni këtë detyrë dhe të filloni ndërtimin e aplikacionit tuaj të integrimit të imazheve. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e Image Embedder duke përdorur vetëm shfletuesin tuaj të internetit.

Konfigurimi

Ky seksion përshkruan hapat kryesorë për konfigurimin e mjedisit tuaj të zhvillimit dhe projekteve të kodit posaçërisht për të përdorur Image Embedder. Për informacion të përgjithshëm mbi konfigurimin e mjedisit tuaj të zhvillimit për përdorimin e detyrave MediaPipe, duke përfshirë kërkesat e versionit të platformës, shihni udhëzuesin e konfigurimit për Web .

Paketat JavaScript

Kodi i Imazhe Embedder është i disponueshëm përmes paketës MediaPipe @mediapipe/tasks-vision NPM . Mund t'i gjeni dhe shkarkoni këto biblioteka nga lidhjet e dhëna në udhëzuesin e Konfigurimit të platformës.

Mund të instaloni paketat e kërkuara me kodin e mëposhtëm për konfigurimin lokal duke përdorur komandën e mëposhtme:

npm install @mediapipe/tasks-vision

Nëse doni të importoni kodin e detyrës nëpërmjet një shërbimi të rrjetit të ofrimit të përmbajtjes (CDN), shtoni kodin e mëposhtëm në etiketë në skedarin tuaj HTML:

<!-- You can replace jsDelivr with your preferred CDN -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.mjs"
    crossorigin="anonymous"></script>
</head>

Model

Detyra MediaPipe Image Embedder kërkon një model të trajnuar që është i pajtueshëm me këtë detyrë. Për më shumë informacion mbi modelet e trajnuara të disponueshme për Image Embedder, shihni seksionin Modelet e përmbledhjes së detyrës.

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni atë brenda direktorisë së projektit tuaj:

<dev-project-root>/app/shared/models/

Krijo detyrën

Specifikoni një rrugë modeli

Mund të krijoni një detyrë me opsionet fillestare duke përdorur metodën 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`
    },
  });

Specifikoni bufferin e modelit

Nëse modeli juaj është ngarkuar tashmë në memorie, mund të përdorni metodën 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(...)
);

Specifikoni opsionet e personalizuara

Detyra MediaPipe Image Embedder përdor funksionin createFromOptions për të konfiguruar detyrën. Funksioni createFromOptions pranon vlera për opsionet e konfigurimit. Për më shumë informacion mbi opsionet e konfigurimit, shihni Opsionet e konfigurimit .

Kodi i mëposhtëm tregon se si të ndërtohet dhe konfigurohet detyra me opsione të personalizuara:

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
    });

Opsionet e konfigurimit

Kjo detyrë ka opsionet e mëposhtme të konfigurimit për aplikacionet Web:

Emri i opsionit Përshkrimi Diapazoni i Vlerave Vlera e parazgjedhur
running_mode Cakton modalitetin e ekzekutimit për detyrën. Ekzistojnë dy mënyra:

IMAZH: Modaliteti për futjen e një imazhi të vetëm.

VIDEO: Modaliteti për kuadrot e dekoduara të një videoje ose në një transmetim të drejtpërdrejtë të të dhënave hyrëse, si p.sh. nga një kamera.		 { IMAGE, VIDEO } IMAGE
l2Normalize Nëse duhet të normalizohet vektori i karakteristikave të kthyera me normën L2. Përdoreni këtë opsion vetëm nëse modeli nuk përmban tashmë një L2_NORMALIZATION TFLite Op. Në shumicën e rasteve, ky është tashmë rasti dhe normalizimi L2 arrihet kështu përmes inferencës TFLite pa pasur nevojë për këtë opsion. Boolean False
quantize Nëse ngulitja e kthyer duhet të kuantizohet në bajt nëpërmjet kuantizimit skalar. Ngulitja supozohet në mënyrë implicite të jetë normë njësie dhe për këtë arsye çdo dimension është i garantuar të ketë një vlerë në [-1.0, 1.0]. Përdorni opsionin l2Normalize nëse nuk është ky rasti. Boolean False

Përgatitni të dhënat

Imazh Embedder mund të ngulë imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra gjithashtu trajton përpunimin paraprak të të dhënave të futura, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerave.

Thirrjet në metodat Image Embedder embed() dhe embedForVideo() ekzekutohen në mënyrë sinkrone dhe bllokojnë fijen e ndërfaqes së përdoruesit. Nëse doni të nxirrni vektorë karakteristikash nga kornizat e videos, çdo ngulitje do të bllokojë fijen kryesore. Mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat embed() dhe embedForVideo() në një fije tjetër.

Ekzekuto detyrën

Imazh Embedder përdor metodat embed() (me modalitetin ekzekutues image ) dhe embedForVideo() (me modalitetin ekzekutues video ) për të shkaktuar përfundime. Imazh Embedder API do të kthejë vektorët e integrimit për imazhin hyrës.

Kodi i mëposhtëm tregon se si ekzekutohet përpunimi me modelin e detyrës:

Imazh 

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

Video 

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

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

Trajtoni dhe shfaqni rezultatet

Pas ekzekutimit të inferencës, detyra Image Embedder kthen një objekt ImageEmbedderResult i cili përmban vektorët e ngulitjes për imazhin ose kornizën e hyrjes.

Më poshtë tregohet një shembull i të dhënave të daljes nga kjo detyrë:

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

Ky rezultat u mor duke futur imazhin e mëposhtëm:

Pamje mesatare e një maceje ekzotike

Mund të krahasoni ngjashmërinë semantike të dy ngulitjeve duke përdorur funksionin ImageEmbedder.cosineSimilarity . Shihni kodin e mëposhtëm për një shembull. 

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

Kodi shembullor i Image Embedder tregon se si të shfaqen rezultatet e embedderê të kthyera nga detyra, shihni shembullin për detaje.