Udhëzues interaktiv i segmentimit të imazheve për ueb

Detyra MediaPipe Interactive Image Segmenter merr një vendndodhje në një imazh, vlerëson kufijtë e një objekti në atë vendndodhje dhe kthen segmentimin për objektin si të dhëna imazhi. Këto udhëzime ju tregojnë se si të përdorni Interactive Image Segmenter për aplikacionet Node dhe web. Për më shumë informacion në lidhje me aftësitë, modelet dhe opsionet e konfigurimit të kësaj detyre, shihni Përmbledhjen .

Shembull kodi

Kodi shembull për Interactive Image Segmenter 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 interaktiv të segmentimit të imazheve. Mund ta shikoni, ekzekutoni dhe modifikoni shembullin e Interactive Image Segmenter 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 Interactive Image Segmenter. 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 ueb .

Paketat JavaScript

Kodi i Segmentuesit Ndërveprues të Imazheve ë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 --save @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:

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

Model

Detyra MediaPipe Interactive Image Segmenter 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 Interactive Image Segmenter, 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

Përdorni një nga funksionet createFrom...() të Segmentuesit të Imazhit Interaktiv për të përgatitur detyrën për ekzekutimin e inferencave. Përdorni funksionin createFromModelPath() me një shteg relativ ose absolut për në skedarin e modelit të trajnuar. Nëse modeli juaj është ngarkuar tashmë në memorie, mund të përdorni metodën createFromModelBuffer() .

Shembulli i kodit më poshtë demonstron përdorimin e funksionit createFromOptions() për të konfiguruar detyrën. Funksioni createFromOptions ju lejon të personalizoni Segmentuesin Ndërveprues të Imazhit me opsione konfigurimi. 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:

async function createSegmenter() {
  const vision = await FilesetResolver.forVisionTasks(
    "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
  );

  interactiveSegmenter = await InteractiveSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-tasks/interactive_segmenter/ptm_512_hdt_ptm_woid.tflite"
    },
  });
}
createSegmenter();

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
`outputCategoryMask`	Nëse vendoset në `True` , rezultati përfshin një maskë segmentimi si një imazh uint8, ku çdo vlerë pikseli tregon nëse pikseli është pjesë e objektit të vendosur në zonën e interesit.	{ `True, False` }	`False`
`outputConfidenceMasks`	Nëse vendoset në `True` , rezultati përfshin një maskë segmentimi si një imazh me vlerë lundruese, ku çdo vlerë lundruese përfaqëson besimin se pikseli është pjesë e objektit të vendosur në zonën e interesit.	{ `True, False` }	`True`
`displayNamesLocale`	Cakton gjuhën e etiketave që do të përdoren për emrat e shfaqur të dhënë në metadatat e modelit të detyrës, nëse është e disponueshme. Vlera e parazgjedhur është `en` për anglishten. Mund të shtoni etiketa të lokalizuara në metadatat e një modeli të personalizuar duke përdorur API-në e Shkruesit të Metadatave TensorFlow Lite.	Kodi lokal	en

Përgatitni të dhënat

Segmentuesi Interaktiv i Imazheve mund të segmentojë objektet në 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 Interactive Image Segmenter segment() dhe segmentForVideo() ekzekutohen në mënyrë sinkrone dhe bllokojnë fijen e ndërfaqes së përdoruesit. Nëse segmentoni objekte në kuadro video nga kamera e një pajisjeje, çdo detyrë segmentimi bllokon fijen kryesore. Mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar segment() dhe segmentForVideo() në një fije tjetër.

Ekzekuto detyrën

Segmentuesi Ndërveprues i Imazheve përdor metodën segment() për të shkaktuar përfundime. Segmentuesi Ndërveprues i Imazheve i kthen segmentet e zbuluara si të dhëna imazhi në një funksion rikthimi që e caktoni kur ekzekutoni një përfundim për detyrën.

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

const image = document.getElementById("image") as HTMLImageElement;
interactiveSegmenter.segment(
  image,
  {
    keypoint: {
      x: event.offsetX / event.target.width,
      y: event.offsetY / event.target.height
    }
  },
  callback);