شناسایی اشیاء در تصاویر برای ایجاد یک جستجوی محصول بصری با ML Kit: Android

۱. قبل از شروع

آیا نسخه آزمایشی گوگل لنز را دیده‌اید، جایی که می‌توانید دوربین گوشی خود را به سمت یک شیء بگیرید و ببینید که از کجا می‌توانید آن را به صورت آنلاین خریداری کنید؟ اگر می‌خواهید یاد بگیرید که چگونه می‌توانید همین ویژگی را به برنامه خود اضافه کنید، این codelab برای شما مناسب است. این بخشی از یک مسیر یادگیری است که به شما یاد می‌دهد چگونه یک ویژگی جستجوی تصویر محصول را در یک برنامه تلفن همراه ایجاد کنید.

در این آزمایشگاه کد، اولین قدم برای ساخت یک ویژگی جستجوی تصویر محصول را یاد خواهید گرفت: نحوه تشخیص اشیاء در تصاویر و اجازه دادن به کاربر برای انتخاب اشیاء مورد نظر برای جستجو. برای ساخت این ویژگی از کیت تشخیص و ردیابی اشیاء ML استفاده خواهید کرد.

می‌توانید در مسیر یادگیری، درباره مراحل باقی‌مانده، از جمله نحوه ساخت یک backend جستجوی محصول با Vision API Product Search ، اطلاعات کسب کنید.

آنچه خواهید ساخت

در این آزمایشگاه کد، شما قصد دارید یک برنامه اندروید با ML Kit بسازید. برنامه شما از API تشخیص و ردیابی شیء ML Kit برای تشخیص اشیاء در یک تصویر مشخص استفاده خواهد کرد. سپس کاربر شیء مورد نظر خود را برای جستجو در پایگاه داده محصول ما انتخاب می‌کند. در نهایت، باید چیزی شبیه به تصویر سمت راست ببینید.

آنچه یاد خواهید گرفت

• چگونه ML Kit SDK را در برنامه اندروید خود ادغام کنیم؟
• API تشخیص و ردیابی شیء ML Kit

آنچه نیاز دارید

• نسخه جدید اندروید استودیو (نسخه ۴.۱.۲ به بالا)
• شبیه‌ساز اندروید استودیو یا یک دستگاه اندروید فیزیکی
• کد نمونه
• آشنایی اولیه با توسعه اندروید با زبان کاتلین

این آزمایشگاه کد بر روی کیت یادگیری ماشین (ML Kit) تمرکز دارد. سایر مفاهیم و بلوک‌های کد مورد مطالعه قرار نمی‌گیرند و برای کپی و پیست ساده در اختیار شما قرار می‌گیرند.

۲. آماده شوید

کد را دانلود کنید

برای دانلود تمام کدهای این codelab روی لینک زیر کلیک کنید:

سورس کد

فایل زیپ دانلود شده را از حالت فشرده خارج کنید. این کار یک پوشه ریشه ( odml-pathways-main ) را با تمام منابع مورد نیاز شما از حالت فشرده خارج می‌کند. برای این codelab، فقط به منابع موجود در زیرشاخه product-search/codelab1/android نیاز خواهید داشت.

زیرشاخه‌ی تشخیص شیء در مخزن mlkit-android شامل دو دایرکتوری است:

• کد آغازین - کدی که برای این آزمایشگاه کد بر اساس آن کد می‌نویسید.
• نهایی - کد تکمیل‌شده برای برنامه نمونه نهایی.

۳. API تشخیص و ردیابی شیء ML Kit را به پروژه اضافه کنید

وارد کردن برنامه به اندروید استودیو

با وارد کردن برنامه‌ی آغازین به اندروید استودیو شروع کنید.

به اندروید استودیو بروید، گزینه‌ی Import Project (Gradle، Eclipse ADT و غیره) را انتخاب کنید و پوشه‌ی آغازین را از کد منبعی که قبلاً دانلود کرده‌اید، انتخاب کنید.

وابستگی‌های مربوط به تشخیص و ردیابی شیء ML Kit را اضافه کنید

وابستگی‌های ML Kit به شما امکان می‌دهند ML Kit ODT SDK را در برنامه خود ادغام کنید.

به فایل app/build.gradle پروژه خود بروید و تأیید کنید که وابستگی از قبل وجود دارد:

ساخت.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

پروژه خود را با فایل‌های gradle همگام‌سازی کنید

برای اطمینان از اینکه همه وابستگی‌ها برای برنامه شما در دسترس هستند، باید پروژه خود را در این مرحله با فایل‌های gradle همگام‌سازی کنید.

پروژه همگام‌سازی با فایل‌های Gradle را انتخاب کنید ( ) از نوار ابزار اندروید استودیو.

(اگر این دکمه غیرفعال است، مطمئن شوید که فقط starter/app/build.gradle را وارد می‌کنید، نه کل مخزن را.)

۴. برنامه‌ی آغازین را اجرا کنید

اکنون که پروژه را به اندروید استودیو وارد کرده‌اید و وابستگی‌های مربوط به ML Kit Object Detection and Tracking را اضافه کرده‌اید، آماده‌اید تا برنامه را برای اولین بار اجرا کنید.

دستگاه اندروید خود را از طریق USB به هاست خود وصل کنید یا شبیه‌ساز اندروید استودیو را اجرا کنید و روی Run () کلیک کنید. ) در نوار ابزار اندروید استودیو.

برنامه را اجرا و بررسی کنید

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

اول، یک دکمه ( ) در پایین به

• برنامه دوربین را که در دستگاه/شبیه‌ساز شما ادغام شده است، اجرا کنید.
• داخل برنامه دوربین خود عکس بگیرید
• تصویر گرفته شده را در برنامه شروع کننده دریافت کنید
• تصویر را نمایش دهید

دکمه‌ی « عکس گرفتن » را امتحان کنید. دستورالعمل‌ها را دنبال کنید تا عکس بگیرید، عکس را بپذیرید و مشاهده کنید که در برنامه‌ی اولیه نمایش داده می‌شود.

دوم، ۳ تصویر از پیش تعیین‌شده وجود دارد که می‌توانید از بین آنها انتخاب کنید. اگر کد را روی شبیه‌ساز اندروید اجرا می‌کنید، می‌توانید بعداً از این تصاویر برای آزمایش کد تشخیص شیء استفاده کنید.

1. یک تصویر از بین ۳ تصویر از پیش تعیین‌شده انتخاب کنید .
2. می‌بینید که تصویر در نمای بزرگتر نمایش داده می‌شود.

۵. اضافه کردن تشخیص اشیاء روی دستگاه

در این مرحله، قابلیت تشخیص اشیاء در تصاویر را به برنامه‌ی اولیه اضافه خواهید کرد. همانطور که در مرحله‌ی قبل دیدید، برنامه‌ی اولیه شامل کد آماده‌ای برای گرفتن عکس با برنامه‌ی دوربین روی دستگاه است. همچنین ۳ تصویر از پیش تعیین‌شده در برنامه وجود دارد که می‌توانید در صورت اجرای codelab روی یک شبیه‌ساز اندروید، تشخیص اشیاء را روی آنها امتحان کنید.

وقتی تصویری را انتخاب می‌کنید، چه از بین تصاویر از پیش تعیین‌شده و چه با گرفتن عکس با برنامه دوربین، کد قالبی آن تصویر را به یک نمونه Bitmap تبدیل می‌کند، آن را روی صفحه نمایش می‌دهد و متد runObjectDetection را همراه با تصویر فراخوانی می‌کند.

در این مرحله، کدی را به متد runObjectDetection اضافه خواهید کرد تا تشخیص شیء را انجام دهد!

تنظیم و اجرای تشخیص شیء روی تصویر در دستگاه

فقط ۳ مرحله ساده با ۳ API برای راه‌اندازی ML Kit ODT وجود دارد.

• آماده‌سازی یک تصویر: InputImage
• یک شیء آشکارساز ایجاد کنید: ObjectDetection.getClient(options)
• دو شیء بالا را به هم وصل کنید: process(image)

شما این موارد را درون تابع ** runObjectDetection(bitmap: Bitmap) ** در فایل MainActivity.kt به دست می‌آورید.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

در حال حاضر تابع خالی است. برای ادغام ML Kit ODT به مراحل زیر بروید! در طول مسیر، اندروید استودیو از شما می‌خواهد که ایمپورت‌های لازم را اضافه کنید.

• com.google.mlkit.vision.common.InputImage
• com.google.mlkit.vision.objects.ObjectDetection
• com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

مرحله ۱: ایجاد یک تصویر ورودی

ML Kit یک API ساده برای ایجاد یک InputImage از یک Bitmap ارائه می‌دهد. سپس می‌توانید یک InputImage به APIهای ML Kit وارد کنید.

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

کد بالا را به بالای runObjectDetection(bitmap:Bitmap) اضافه کنید .

مرحله ۲: ایجاد یک نمونه آشکارساز

کیت ML از الگوی طراحی Builder پیروی می‌کند، شما پیکربندی را به سازنده منتقل می‌کنید، سپس یک آشکارساز از آن دریافت می‌کنید. 3 گزینه برای پیکربندی وجود دارد (گزینه پررنگ در codelab استفاده می‌شود):

• حالت آشکارساز ( تصویر واحد یا جریان )
• حالت تشخیص ( تشخیص یک یا چند شیء)
• حالت طبقه‌بندی ( روشن یا خاموش )

این آزمایشگاه کد برای تشخیص و طبقه‌بندی تک تصویر - چند شیء است، بیایید این کار را انجام دهیم:

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

مرحله ۳: تصویر (یا تصاویر) را به آشکارساز بدهید

تشخیص و طبقه‌بندی اشیاء، پردازش ناهمزمان است:

• شما یک تصویر را به detector ارسال می‌کنید (از طریق process() )
• آشکارساز روی آن خیلی سخت کار می‌کند
• آشکارساز نتیجه را از طریق یک فراخوانی مجدد به شما گزارش می‌دهد

کد زیر دقیقاً همین کار را انجام می‌دهد (آن را کپی کرده و به کد موجود درون fun runObjectDetection(bitmap:Bitmap)):

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

پس از اتمام، آشکارساز به شما اطلاع می‌دهد

1. تعداد کل اشیاء شناسایی شده
2. هر شیء شناسایی شده با ... توصیف می‌شود.

• trackingId : یک عدد صحیح که برای ردیابی آن در فریم‌های متقاطع استفاده می‌کنید (در این آزمایشگاه کد استفاده نمی‌شود)
• boundingBox : کادر احاطه‌کننده‌ی شیء
• labels: فهرست برچسب‌ها برای شیء شناسایی‌شده (فقط زمانی که طبقه‌بندی فعال باشد)
• index (فهرست این برچسب را دریافت کنید)
• text (متن این برچسب شامل «کالاهای مد»، «غذا»، «کالاهای خانگی»، «مکان»، «گیاه» را دریافت کنید)
• confidence (مقدار اعشاری بین ۰.۰ تا ۱.۰ که ۱.۰ به معنی ۱۰۰٪ است)

احتمالاً متوجه شده‌اید که کد، نتایج شناسایی‌شده را با استفاده از debugPrint() در Logcat چاپ می‌کند. آن را به کلاس MainActivity اضافه کنید:

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

حالا شما آماده‌اید تا تصاویر را برای تشخیص بپذیرید!

با کلیک روی Run (، codelab را اجرا کنید) ) در نوار ابزار اندروید استودیو. سعی کنید یک تصویر از پیش تعیین‌شده را انتخاب کنید یا یک عکس بگیرید، سپس به پنجره logcat نگاه کنید ( ) داخل IDE. شما باید چیزی شبیه به این را ببینید:

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

که یعنی آن آشکارساز ۳ شیء از موارد زیر را دیده است:

• دسته‌ها عبارتند از کالاهای مد روز و کالاهای خانگی .
• هیچ دسته‌ای برای مورد دوم برگردانده نشده است زیرا یک کلاس ناشناخته است.
• بدون trackingId (زیرا این حالت تشخیص تصویر واحد است)
• موقعیت درون مستطیل boundingBox (مثلاً (481، 2021) – (2426، 3376))
• جستجوگر کاملاً مطمئن است که مورد اول یک کالای مد است (۹۰٪) ( یک لباس است )

از نظر فنی، این تمام چیزی است که برای راه‌اندازی تشخیص شیء ML Kit نیاز دارید - شما در حال حاضر همه چیز را دارید! تبریک می‌گویم !

بله، در سمت رابط کاربری، شما هنوز در مرحله‌ای هستید که شروع کردید، اما می‌توانید از نتایج شناسایی‌شده در رابط کاربری مانند ترسیم کادر محدوده برای ایجاد یک تجربه بهتر استفاده کنید. مرحله بعدی تجسم نتایج شناسایی‌شده است!

۶. پس‌پردازش نتایج تشخیص

در مراحل قبلی، نتیجه شناسایی شده را در logcat چاپ کردید: ساده و سریع.

در این بخش، از نتیجه‌ی موجود در تصویر استفاده خواهید کرد:

• کادر محدوده را روی تصویر رسم کنید
• نام دسته و ضریب اطمینان را درون کادر محصورکننده رسم کنید

ابزارهای تجسم را درک کنید

تعدادی کد آماده در داخل codelab وجود دارد که به شما در تجسم نتیجه تشخیص کمک می‌کند. از این ابزارها برای ساده‌سازی کد تجسم خود استفاده کنید:

• class ImageClickableView این یک کلاس نمایش تصویر است که ابزارهای مناسبی برای تجسم و تعامل با نتیجه تشخیص ارائه می‌دهد.
• fun drawDetectionResults(results: List<DetectedObject>) این متد دایره‌های سفیدی را در مرکز هر شیء شناسایی‌شده رسم می‌کند.
• fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) این یک فراخوانی برای دریافت تصویر برش داده شده است که فقط شامل شیئی است که کاربر روی آن ضربه زده است. شما این تصویر برش داده شده را به backend جستجوی تصویر در codelab بعدی ارسال خواهید کرد تا نتیجه بصری مشابهی دریافت کنید. در این codelab، هنوز از این متد استفاده نخواهید کرد.

نمایش نتیجه تشخیص کیت ML

از ابزارهای مصورسازی برای نمایش نتیجه تشخیص شیء ML Kit در بالای تصویر ورودی استفاده کنید.

به جایی که debugPrint() را فراخوانی می‌کنید بروید و قطعه کد زیر را در زیر آن اضافه کنید:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

اجراش کن

حالا روی اجرا کلیک کنید ( ) در نوار ابزار اندروید استودیو.

پس از بارگذاری برنامه، دکمه با نماد دوربین را فشار دهید، دوربین خود را به سمت یک شیء بگیرید، عکس بگیرید، عکس را بپذیرید (در برنامه دوربین) یا می‌توانید به راحتی روی هر تصویر از پیش تعیین شده ضربه بزنید. باید نتیجه تشخیص را ببینید؛ دوباره دکمه را فشار دهید یا تصویر دیگری را برای چند بار تکرار انتخاب کنید و آخرین ML Kit ODT را تجربه کنید!

۷. تبریک می‌گویم!

شما از کیت ML برای افزودن قابلیت‌های تشخیص شیء به برنامه خود استفاده کرده‌اید:

• ۳ مرحله با ۳ API
• ایجاد تصویر ورودی
• ایجاد آشکارساز
• ارسال تصویر به آشکارساز

این تمام چیزی است که برای راه‌اندازی و اجرای آن نیاز دارید!

آنچه ما پوشش داده‌ایم

• نحوه اضافه کردن تشخیص و ردیابی شیء ML Kit به برنامه اندروید شما
• نحوه استفاده از تشخیص و ردیابی اشیاء روی دستگاه در کیت ML برای تشخیص اشیاء در تصاویر

مراحل بعدی

• این codelab را در مورد نحوه ارسال شیء شناسایی شده به backend جستجوی محصول و نمایش نتایج جستجو امتحان کنید.
• با ML Kit ODT و تصاویر و ویدیوهای زنده بیشتر، کاوش‌های بیشتری انجام دهید تا دقت و عملکرد تشخیص و طبقه‌بندی را تجربه کنید.
• برای یادگیری نحوه آموزش یک مدل سفارشی، مسیر یادگیری «با تشخیص شیء بیشتر پیش بروید» را بررسی کنید.
• درباره توصیه‌های طراحی متریال برای تشخیص اشیا با دوربین زنده و تصویر ثابت بخوانید.
• ML Kit ODT را در برنامه اندروید خود اعمال کنید

اطلاعات بیشتر

• https://developers.google.com/ml-kit/vision/object-detection