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ë paraqitje numerike për të përmbushur detyrat e përpunimit të imazhit të lidhura me ML, të tilla si krahasimi i ngjashmërisë së dy imazheve. Këto udhëzime ju tregojnë se si të përdorni Embedder-in e imazhit për aplikacionet Node dhe ueb.

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

Shembull kodi

Shembulli i kodit për Image Embedder ofron një zbatim të plotë të kësaj detyre në JavaScript për referencën tuaj. Ky kod ju ndihmon të testoni këtë detyrë dhe të filloni të ndërtoni aplikacionin tuaj të ngulitjes së imazhit. Mund të shikoni, ekzekutoni dhe modifikoni kodin e shembullit të 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 në mënyrë specifike 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 të MediaPipe, duke përfshirë kërkesat e versionit të platformës, shihni udhëzuesin e konfigurimit për Ueb .

Paketat JavaScript

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

Ju mund të instaloni paketat e kërkuara me kodin e mëposhtëm për vendosjen lokale duke përdorur komandën e mëposhtme:

npm install @mediapipe/tasks-vision

Nëse dëshironi të importoni kodin e detyrës nëpërmjet një shërbimi të rrjetit të shpërndarjes së përmbajtjes (CDN), shtoni kodin e mëposhtëm në etiketa 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.js"
    crossorigin="anonymous"></script>
</head>

Model

Detyra MediaPipe Image Embedder kërkon një model të trajnuar që është në përputhje 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ë detyrave.

Zgjidhni dhe shkarkoni një model dhe më pas ruajeni në direktorinë e projektit tuaj:

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

Krijo detyrën

Specifikoni një rrugë modeli

Mund të krijoni një detyrë me opsionet e paracaktuara 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 buferin e modelit

Nëse modeli juaj tashmë është i ngarkuar 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ërtoni dhe konfiguroni detyrën 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 në ueb:

Emri i opsionit Përshkrimi Gama e vlerave Vlera e paracaktuar
running_mode Vendos modalitetin e ekzekutimit për detyrën. Ka dy mënyra:

IMAGE: Modaliteti për hyrjet e një imazhi të vetëm.

VIDEO: Modaliteti për kornizat e deshifruara të një videoje ose në një transmetim të drejtpërdrejtë të të dhënave hyrëse, si p.sh. nga një aparat fotografik.		 { IMAGE, VIDEO } IMAGE
l2Normalize Nëse do të normalizohet vektori i tipareve 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 i L2 arrihet në këtë mënyrë përmes përfundimit të TFLite pa pasur nevojë për këtë opsion. Boolean False
quantize Nëse futja e kthyer duhet të kuantizohet në bajt nëpërmjet kuantizimit skalar. Përfshirjet supozohen në mënyrë implicite si njësi-normë 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ë kështu. Boolean False

Përgatitni të dhënat

Image Embedder mund të vendosë imazhe në çdo format të mbështetur nga shfletuesi pritës. Detyra trajton gjithashtu parapërpunimin e hyrjes së të dhënave, duke përfshirë ndryshimin e madhësisë, rrotullimin dhe normalizimin e vlerës.

Thirrjet në metodat Embedder embed() dhe embedForVideo() ekzekutohen në mënyrë sinkronike dhe bllokojnë lidhjen e ndërfaqes së përdoruesit. Nëse dëshironi të nxirrni vektorët e veçorive nga kornizat e videos, çdo futje do të bllokojë fillin kryesor. Ju mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar metodat embed() dhe embedForVideo() në një thread tjetër.

Drejtoni detyrën

Embedder-i i imazhit përdor metodat embed() (me image e modalitetit ekzekutues ) dhe embedForVideo() (me video në modalitet ekzekutimi ) për të nxjerrë përfundime. Image Embedder API do të kthejë vektorët e ngulitjes për imazhin e hyrjes.

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

Imazhi 

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ë konkluzionit, detyra Image Embedder kthen një objekt ImageEmbedderResult i cili përmban vektorët e integruar për imazhin ose kornizën hyrëse.

Më poshtë tregon një shembull të të dhënave dalëse 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:

Foto mesatare e një mace ekzotike

Ju mund të krahasoni ngjashmërinë semantike të dy futjeve duke përdorur funksionin ImageEmbedder.cosineSimilarity . Shih kodin e mëposhtëm për një shembull. 

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

Shembulli i kodit të Embedder-it të imazhit demonstron se si të shfaqen rezultatet e embedder-it të kthyera nga detyra, shikoni shembullin e kodit për detaje.