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 Segmentuesin Interaktiv të 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 Segmenterin Interaktiv të Imazhit 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 ndërtimin e aplikacionit tuaj interaktiv të segmentimit të imazheve. Mund të shikoni, ekzekutoni dhe modifikoni shembullin e kodit të segmentit të imazhit interaktiv duke përdorur vetëm shfletuesin tuaj të internetit. Ju gjithashtu mund të rishikoni kodin për këtë shembull në GitHub .

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 Segmentuesin Interaktiv të Imazhit. 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 interaktiv i segmentit 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 --save @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:

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

Model

Detyra MediaPipe Interactive Image Segmenter 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 Segmenterin Interaktiv të Imazhit, 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

Përdorni një nga funksionet e Segmenterit Interaktiv të Imazhit createFrom...() për të përgatitur detyrën për ekzekutimin e konkluzioneve. Përdorni funksionin createFromModelPath() me një shteg relative ose absolute drejt skedarit të modelit të trajnuar. Nëse modeli juaj tashmë është i ngarkuar në memorie, mund të përdorni metodën createFromModelBuffer() .

Shembulli i kodit më poshtë tregon përdorimin e funksionit createFromOptions() për të vendosur detyrën. Funksioni createFromOptions ju lejon të personalizoni Segmenterin Interaktiv të Imazhit me 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:

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 në ueb:

Emri i opsionit Përshkrimi Gama e vlerave Vlera e paracaktuar
outputCategoryMask Nëse vendoset në True , dalja përfshin një maskë segmentimi si një imazh uint8, ku çdo vlerë piksel tregon nëse piksel është pjesë e objektit të vendosur në zonën e interesit. { True, False } False
outputConfidenceMasks Nëse vendoset në True , dalja përfshin një maskë segmentimi si një imazh me vlerë notuese, ku çdo vlerë float përfaqëson besimin se piksel është pjesë e objektit të vendosur në zonën e interesit. { True, False } True
displayNamesLocale Vendos gjuhën e etiketave për t'u përdorur për emrat e shfaqur të dhëna në meta të dhënat e modelit të detyrës, nëse disponohet. Parazgjedhja është en për anglisht. Ju mund të shtoni etiketa të lokalizuara në meta të dhënat e një modeli të personalizuar duke përdorur API-në e shkrimtarit metadata TensorFlow Lite Kodi lokal sq

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 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 segment() dhe segmentForVideo() ekzekutohen në mënyrë sinkronike dhe bllokojnë lidhjen e ndërfaqes së përdoruesit. Nëse segmentoni objekte në korniza video nga kamera e një pajisjeje, çdo detyrë segmentimi bllokon fillin kryesor. Ju mund ta parandaloni këtë duke zbatuar punëtorët e uebit për të ekzekutuar segment() dhe segmentForVideo() në një thread tjetër.

Drejtoni detyrën

Segmentuesi interaktiv i imazhit përdor metodën segment() për të nxjerrë konkluzione. Segmentuesi interaktiv i imazhit i kthen segmentet e zbuluara si të dhëna imazhi në një funksion të kthimit të thirrjes që vendosni 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);