راهنمای جاسازی تصویر برای وب

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

برای اطلاعات بیشتر در مورد قابلیت‌ها، مدل‌ها و گزینه‌های پیکربندی این کار، به نمای کلی مراجعه کنید.

نمونه کد

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

برپایی

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

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

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

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

npm install @mediapipe/tasks-vision

اگر می‌خواهید کد وظیفه را از طریق سرویس شبکه تحویل محتوا (CDN) وارد کنید، کد زیر را در آن اضافه کنید در فایل 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>

مدل

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

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

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

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

یک مسیر مدل را مشخص کنید

می توانید با استفاده از متد 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`
    },
  });

بافر مدل را مشخص کنید

اگر مدل شما قبلاً در حافظه بارگذاری شده است، می توانید از متد 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(...)
);

گزینه های سفارشی را مشخص کنید

وظیفه MediaPipe Image Embedder از تابع createFromOptions برای تنظیم کار استفاده می کند. تابع createFromOptions مقادیری را برای گزینه های پیکربندی می پذیرد. برای اطلاعات بیشتر در مورد گزینه های پیکربندی، گزینه های پیکربندی را ببینید.

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

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

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

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

نام گزینه شرح محدوده ارزش مقدار پیش فرض
running_mode حالت اجرا را برای کار تنظیم می کند. دو حالت وجود دارد:

IMAGE: حالت برای ورودی های تک تصویر.

VIDEO: حالت برای فریم های رمزگشایی شده یک ویدیو یا در جریان مستقیم داده های ورودی، مانند یک دوربین.		 { IMAGE, VIDEO } IMAGE
l2Normalize آیا باید بردار ویژگی بازگشتی را با نرمال L2 عادی سازی کرد. فقط در صورتی از این گزینه استفاده کنید که مدل از قبل دارای یک L2_NORMALIZATION TFLite Op بومی نباشد. در بیشتر موارد، این قبلاً وجود دارد و بنابراین عادی سازی L2 از طریق استنتاج TFLite بدون نیاز به این گزینه حاصل می شود. Boolean False
quantize اینکه آیا تعبیه برگشتی باید از طریق کوانتیزه کردن اسکالر به بایت تبدیل شود یا خیر. تعبیه‌ها به طور ضمنی واحد هنجار فرض می‌شوند و بنابراین هر بعد تضمین می‌شود که مقداری در [-1.0، 1.0] داشته باشد. اگر اینطور نیست از گزینه l2Normalize استفاده کنید. Boolean False

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

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

فراخوانی به روش های Image Embedder embed() و embedForVideo() به صورت همزمان اجرا می شود و رشته رابط کاربری را مسدود می کند. اگر می‌خواهید بردارهای ویژگی را از فریم‌های ویدیو استخراج کنید، هر جاسازی رشته اصلی را مسدود می‌کند. شما می توانید با پیاده سازی وب کارگران برای اجرای متدهای embed() و embedForVideo() در رشته ای دیگر از این امر جلوگیری کنید.

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

Image Embedder از متدهای embed() (با image حالت در حال اجرا) و embedForVideo() (با video حالت در حال اجرا) برای استنتاج استفاده می کند. Image Embedder API بردارهای جاسازی شده را برای تصویر ورودی برمی گرداند.

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

تصویر

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

ویدیو

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

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

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

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

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

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

این نتیجه با قرار دادن تصویر زیر به دست آمد:

می توانید شباهت معنایی دو جاسازی را با استفاده از تابع ImageEmbedder.cosineSimilarity مقایسه کنید. برای نمونه کد زیر را ببینید.

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

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