معرفی LiteRT : زمان اجرا با کارایی بالا گوگل برای هوش مصنوعی روی دستگاه، که قبلا با نام TensorFlow Lite شناخته می شد. بیشتر بدانید

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

راهنمای تقسیم بندی تصویر برای وب

وظیفه MediaPipe Image Segmenter به شما امکان می دهد تصاویر را بر اساس دسته های از پیش تعریف شده برای اعمال جلوه های بصری مانند محو کردن پس زمینه به مناطق تقسیم کنید. این دستورالعمل‌ها به شما نشان می‌دهند که چگونه از Image Segmenter برای Node و برنامه‌های وب استفاده کنید. برای اطلاعات بیشتر در مورد قابلیت‌ها، مدل‌ها و گزینه‌های پیکربندی این کار، به نمای کلی مراجعه کنید.

نمونه کد

کد نمونه برای Image Segmenter اجرای کامل این کار را در جاوا اسکریپت برای مرجع شما فراهم می کند. این کد به شما کمک می کند تا این کار را آزمایش کنید و شروع به ساخت برنامه تقسیم بندی تصویر خود کنید. می‌توانید کد نمونه Image Segmenter را فقط با استفاده از مرورگر وب خود مشاهده، اجرا و ویرایش کنید. همچنین می توانید کد این مثال را در GitHub مرور کنید.

راه اندازی

این بخش مراحل کلیدی را برای راه اندازی محیط توسعه و پروژه های کد مخصوصاً برای استفاده از Image Segmenter توضیح می دهد. برای اطلاعات کلی در مورد تنظیم محیط توسعه خود برای استفاده از وظایف MediaPipe، از جمله الزامات نسخه پلت فرم، به راهنمای راه اندازی وب مراجعه کنید.

بسته های جاوا اسکریپت

کد Segmenter تصویر از طریق بسته MediaPipe @mediapipe/tasks-vision NPM در دسترس است. می‌توانید این کتابخانه‌ها را از پیوندهای ارائه شده در راهنمای راه‌اندازی پلتفرم پیدا و دانلود کنید.

با استفاده از دستور زیر می توانید بسته های مورد نیاز را با کد زیر برای مرحله محلی نصب کنید:

npm install --save @mediapipe/tasks-vision

اگر می‌خواهید کد وظیفه را از طریق سرویس شبکه تحویل محتوا (CDN) وارد کنید، کد زیر را در آن اضافه کنید در فایل HTML خود تگ کنید:

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

مدل

وظیفه MediaPipe Image Segmenter به یک مدل آموزش دیده نیاز دارد که با این کار سازگار باشد. برای اطلاعات بیشتر در مورد مدل‌های آموزش‌دیده موجود برای Image Segmenter، بخش مدل‌های نمای کلی کار را ببینید.

یک مدل را انتخاب و دانلود کنید و سپس آن را در فهرست پروژه خود ذخیره کنید:

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

کار را ایجاد کنید

از یکی از توابع Image Segmenter createFrom...() برای آماده کردن کار برای اجرای استنتاج استفاده کنید. از تابع createFromModelPath() با یک مسیر نسبی یا مطلق به فایل مدل آموزش دیده استفاده کنید. اگر مدل شما قبلاً در حافظه بارگذاری شده است، می توانید از متد createFromModelBuffer() استفاده کنید.

مثال کد زیر استفاده از تابع createFromOptions() را برای تنظیم کار نشان می دهد. تابع createFromOptions به شما این امکان را می‌دهد که Segmenter تصویر را با گزینه‌های پیکربندی سفارشی کنید. برای اطلاعات بیشتر در مورد پیکربندی کار، گزینه های پیکربندی را ببینید.

کد زیر نحوه ساخت و پیکربندی کار را با گزینه های سفارشی نشان می دهد:

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

برای اجرای کامل‌تر ایجاد یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

گزینه های پیکربندی

این کار دارای گزینه های پیکربندی زیر برای برنامه های کاربردی وب است:

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش فرض
`outputCategoryMask`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم بندی به عنوان یک تصویر uint8 است، که در آن هر مقدار پیکسل، مقدار دسته برنده را نشان می دهد.	{ `True, False` }	`False`
`outputConfidenceMasks`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم‌بندی به‌عنوان تصویر مقدار شناور است، که در آن هر مقدار شناور نقشه امتیاز اطمینان دسته را نشان می‌دهد.	{ `True, False` }	`True`
`displayNamesLocale`	زبان برچسب‌ها را برای استفاده برای نام‌های نمایشی ارائه شده در فراداده مدل کار، در صورت وجود، تنظیم می‌کند. پیش فرض برای انگلیسی `en` است. با استفاده از TensorFlow Lite Metadata Writer API می‌توانید برچسب‌های محلی را به ابرداده یک مدل سفارشی اضافه کنید.	کد محلی	en
`resultListener`	شنونده نتیجه را طوری تنظیم می‌کند که وقتی قطعه‌ساز تصویر در حالت `LIVE_STREAM` است، نتایج تقسیم‌بندی را به صورت ناهمزمان دریافت کند. فقط زمانی قابل استفاده است که حالت اجرا روی `LIVE_STREAM` تنظیم شده باشد	N/A	N/A

داده ها را آماده کنید

Image Segmenter می تواند اشیاء را در تصاویر در هر قالبی که توسط مرورگر میزبان پشتیبانی می شود تقسیم بندی کند. این وظیفه همچنین از پیش پردازش ورودی داده ها، از جمله تغییر اندازه، چرخش و نرمال سازی مقدار، استفاده می کند.

فراخوانی به متدهای segment() Image Segmenter و segmentForVideo() بصورت همزمان اجرا می شود و رشته رابط کاربری را مسدود می کند. اگر اشیاء را در فریم‌های ویدیویی از دوربین دستگاه قطعه‌بندی کنید، هر وظیفه تقسیم‌بندی رشته اصلی را مسدود می‌کند. شما می توانید با پیاده سازی وب کارگران برای اجرای segment() و segmentForVideo() در یک رشته دیگر از این امر جلوگیری کنید.

وظیفه را اجرا کنید

Image Segmenter از متد segment() با حالت تصویر و از متد segmentForVideo() با حالت video برای استنتاج استفاده می کند. قطعه‌ساز تصویر، بخش‌های شناسایی‌شده را به‌عنوان داده‌های تصویری به یک تابع برگشتی که هنگام اجرای یک استنتاج برای کار تنظیم کرده‌اید، برمی‌گرداند.

کد زیر نحوه اجرای پردازش با مدل وظیفه را نشان می دهد:

تصویر

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

ویدیو

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

برای اجرای کامل‌تر اجرای یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

کنترل و نمایش نتایج

پس از اجرای استنتاج، وظیفه Image Segmenter داده های تصویر بخش را به یک تابع پاسخ به تماس برمی گرداند. محتوای خروجی به outputType بستگی دارد که هنگام پیکربندی کار تنظیم کرده اید.

بخش های زیر نمونه هایی از داده های خروجی از این کار را نشان می دهد:

اعتماد به دسته

تصاویر زیر تجسمی از خروجی کار را برای ماسک اطمینان دسته بندی نشان می دهد. خروجی ماسک اطمینان حاوی مقادیر شناور بین [0, 1] است.

خروجی ماسک اطمینان تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

ارزش دسته

تصاویر زیر تصویری از خروجی کار را برای ماسک مقدار دسته نشان می دهد. محدوده ماسک دسته [0, 255] است و هر مقدار پیکسل نشان دهنده شاخص دسته برنده خروجی مدل است. شاخص دسته برنده بالاترین امتیاز را در بین دسته‌هایی دارد که مدل می‌تواند تشخیص دهد.

خروجی ماسک تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

کد نمونه Image Segmenter نحوه نمایش نتایج تقسیم بندی برگشتی از کار را نشان می دهد، برای جزئیات به مثال کد مراجعه کنید.

نمونه کد

راه اندازی

بسته های جاوا اسکریپت

با استفاده از دستور زیر می توانید بسته های مورد نیاز را با کد زیر برای مرحله محلی نصب کنید:

npm install --save @mediapipe/tasks-vision

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

مدل

یک مدل را انتخاب و دانلود کنید و سپس آن را در فهرست پروژه خود ذخیره کنید:

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

کار را ایجاد کنید

کد زیر نحوه ساخت و پیکربندی کار را با گزینه های سفارشی نشان می دهد:

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

برای اجرای کامل‌تر ایجاد یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

گزینه های پیکربندی

این کار دارای گزینه های پیکربندی زیر برای برنامه های کاربردی وب است:

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش فرض
`outputCategoryMask`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم بندی به عنوان یک تصویر uint8 است، که در آن هر مقدار پیکسل، مقدار دسته برنده را نشان می دهد.	{ `True, False` }	`False`
`outputConfidenceMasks`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم‌بندی به‌عنوان تصویر مقدار شناور است، که در آن هر مقدار شناور نقشه امتیاز اطمینان دسته را نشان می‌دهد.	{ `True, False` }	`True`
`displayNamesLocale`	زبان برچسب‌ها را برای استفاده برای نام‌های نمایشی ارائه شده در فراداده مدل کار، در صورت وجود، تنظیم می‌کند. پیش فرض برای انگلیسی `en` است. با استفاده از TensorFlow Lite Metadata Writer API می‌توانید برچسب‌های محلی را به ابرداده یک مدل سفارشی اضافه کنید.	کد محلی	en
`resultListener`	شنونده نتیجه را طوری تنظیم می‌کند که وقتی قطعه‌ساز تصویر در حالت `LIVE_STREAM` است، نتایج تقسیم‌بندی را به صورت ناهمزمان دریافت کند. فقط زمانی قابل استفاده است که حالت اجرا روی `LIVE_STREAM` تنظیم شده باشد	N/A	N/A

داده ها را آماده کنید

وظیفه را اجرا کنید

کد زیر نحوه اجرای پردازش با مدل وظیفه را نشان می دهد:

تصویر

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

ویدیو

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

برای اجرای کامل‌تر اجرای یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

کنترل و نمایش نتایج

بخش های زیر نمونه هایی از داده های خروجی از این کار را نشان می دهد:

اعتماد به دسته

خروجی ماسک اطمینان تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

ارزش دسته

خروجی ماسک تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

کد نمونه Image Segmenter نحوه نمایش نتایج تقسیم بندی برگشتی از کار را نشان می دهد، برای جزئیات به مثال کد مراجعه کنید.

نمونه کد

راه اندازی

بسته های جاوا اسکریپت

با استفاده از دستور زیر می توانید بسته های مورد نیاز را با کد زیر برای مرحله محلی نصب کنید:

npm install --save @mediapipe/tasks-vision

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

مدل

یک مدل را انتخاب و دانلود کنید و سپس آن را در فهرست پروژه خود ذخیره کنید:

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

کار را ایجاد کنید

کد زیر نحوه ساخت و پیکربندی کار را با گزینه های سفارشی نشان می دهد:

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

برای اجرای کامل‌تر ایجاد یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

گزینه های پیکربندی

این کار دارای گزینه های پیکربندی زیر برای برنامه های کاربردی وب است:

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش فرض
`outputCategoryMask`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم بندی به عنوان یک تصویر uint8 است، که در آن هر مقدار پیکسل، مقدار دسته برنده را نشان می دهد.	{ `True, False` }	`False`
`outputConfidenceMasks`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم‌بندی به‌عنوان تصویر مقدار شناور است، که در آن هر مقدار شناور نقشه امتیاز اطمینان دسته را نشان می‌دهد.	{ `True, False` }	`True`
`displayNamesLocale`	زبان برچسب‌ها را برای استفاده برای نام‌های نمایشی ارائه شده در فراداده مدل کار، در صورت وجود، تنظیم می‌کند. پیش فرض برای انگلیسی `en` است. با استفاده از TensorFlow Lite Metadata Writer API می‌توانید برچسب‌های محلی را به ابرداده یک مدل سفارشی اضافه کنید.	کد محلی	en
`resultListener`	شنونده نتیجه را طوری تنظیم می‌کند که وقتی قطعه‌ساز تصویر در حالت `LIVE_STREAM` است، نتایج تقسیم‌بندی را به صورت ناهمزمان دریافت کند. فقط زمانی قابل استفاده است که حالت اجرا روی `LIVE_STREAM` تنظیم شده باشد	N/A	N/A

داده ها را آماده کنید

وظیفه را اجرا کنید

Image Segmenter از متد segment() با حالت تصویر و از متد segmentForVideo() با حالت video برای استنتاج استفاده می کند. قطعه‌ساز تصویر، بخش‌های شناسایی‌شده را به‌عنوان داده‌های تصویری به یک تابع برگشتی که هنگام اجرای استنتاج برای کار تنظیم کرده‌اید، برمی‌گرداند.

کد زیر نحوه اجرای پردازش با مدل وظیفه را نشان می دهد:

تصویر

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

ویدیو

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

برای اجرای کامل‌تر اجرای یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

کنترل و نمایش نتایج

بخش های زیر نمونه هایی از داده های خروجی از این کار را نشان می دهد:

اعتماد به دسته

خروجی ماسک اطمینان تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

ارزش دسته

خروجی ماسک تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

کد نمونه Image Segmenter نحوه نمایش نتایج تقسیم بندی برگشتی از کار را نشان می دهد، برای جزئیات به مثال کد مراجعه کنید.

نمونه کد

کد مثال برای Image Segmenter اجرای کامل این کار را در جاوا اسکریپت برای مرجع شما فراهم می کند. این کد به شما کمک می کند تا این کار را آزمایش کنید و شروع به ساخت برنامه تقسیم بندی تصویر خود کنید. می‌توانید کد نمونه Image Segmenter را فقط با استفاده از مرورگر وب خود مشاهده، اجرا و ویرایش کنید. همچنین می توانید کد این مثال را در GitHub مرور کنید.

راه اندازی

بسته های جاوا اسکریپت

با استفاده از دستور زیر می توانید بسته های مورد نیاز را با کد زیر برای مرحله محلی نصب کنید:

npm install --save @mediapipe/tasks-vision

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

مدل

یک مدل را انتخاب و دانلود کنید و سپس آن را در فهرست پروژه خود ذخیره کنید:

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

کار را ایجاد کنید

مثال کد زیر استفاده از تابع createFromOptions() را برای تنظیم کار نشان می دهد. تابع createFromOptions به شما این امکان را می دهد که بخش تصویر را با گزینه های پیکربندی سفارشی کنید. برای اطلاعات بیشتر در مورد پیکربندی کار، گزینه های پیکربندی را ببینید.

کد زیر نحوه ساخت و پیکربندی کار را با گزینه های سفارشی نشان می دهد:

runningMode = "IMAGE";

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

  imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
    baseOptions: {
      modelAssetPath:
        "https://storage.googleapis.com/mediapipe-assets/deeplabv3.tflite?generation=1661875711618421",
    },
    outputCategoryMask: true,
    outputConfidenceMasks: false
    runningMode: runningMode
  });
}
createImageSegmenter();

برای اجرای کامل‌تر ایجاد یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

گزینه های پیکربندی

این کار دارای گزینه های پیکربندی زیر برای برنامه های کاربردی وب است:

نام گزینه	توضیحات	محدوده ارزش	مقدار پیش فرض
`outputCategoryMask`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم بندی به عنوان یک تصویر uint8 است، که در آن هر مقدار پیکسل، مقدار دسته برنده را نشان می دهد.	{ `True, False` }	`False`
`outputConfidenceMasks`	اگر روی `True` تنظیم شود، خروجی شامل یک ماسک تقسیم‌بندی به‌عنوان تصویر مقدار شناور است، که در آن هر مقدار شناور نقشه امتیاز اطمینان دسته را نشان می‌دهد.	{ `True, False` }	`True`
`displayNamesLocale`	زبان برچسب‌ها را برای استفاده برای نام‌های نمایشی ارائه شده در فراداده مدل کار، در صورت وجود، تنظیم می‌کند. پیش فرض برای انگلیسی `en` است. با استفاده از TensorFlow Lite Metadata Writer API می‌توانید برچسب‌های محلی را به ابرداده یک مدل سفارشی اضافه کنید.	کد محلی	en
`resultListener`	شنونده نتیجه را طوری تنظیم می‌کند که وقتی قطعه‌ساز تصویر در حالت `LIVE_STREAM` است، نتایج تقسیم‌بندی را به صورت ناهمزمان دریافت کند. فقط زمانی قابل استفاده است که حالت اجرا روی `LIVE_STREAM` تنظیم شده باشد	N/A	N/A

داده ها را آماده کنید

وظیفه را اجرا کنید

Image Segmenter از متد segment() با حالت تصویر و از متد segmentForVideo() با حالت video برای استنتاج استفاده می کند. قطعه‌ساز تصویر، بخش‌های شناسایی‌شده را به‌عنوان داده‌های تصویری به یک تابع برگشتی که هنگام اجرای استنتاج برای کار تنظیم کرده‌اید، برمی‌گرداند.

کد زیر نحوه اجرای پردازش با مدل وظیفه را نشان می دهد:

تصویر

const image = document.getElementById("image") as HTMLImageElement;
imageSegmenter.segment(image, callback);

ویدیو

async function renderLoop(): void {
  const video = document.getElementById("video");
  let startTimeMs = performance.now();

  imageSegmenter.segmentForVideo(video, startTimeMs, callbackForVideo);

  requestAnimationFrame(() => {
    renderLoop();
  });
}

برای اجرای کامل‌تر اجرای یک تکلیف Image Segmenter، به مثال کد مراجعه کنید.

کنترل و نمایش نتایج

بخش های زیر نمونه هایی از داده های خروجی از این کار را نشان می دهد:

اعتماد به دسته

خروجی ماسک اطمینان تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

ارزش دسته

خروجی ماسک تصویر اصلی و دسته. تصویر منبع از مجموعه داده پاسکال VOC 2012 .

کد نمونه Image Segmenter نحوه نمایش نتایج تقسیم بندی برگشتی از کار را نشان می دهد، برای جزئیات به مثال کد مراجعه کنید.