رصد العناصر في الصور لإنشاء بحث مرئي للمنتجات باستخدام حزمة تعلُّم الآلة في Android

1. قبل البدء

727608486a28395d.png

هل شاهدت العرض التقديمي لتطبيق "عدسة Google" الذي يتيح لك توجيه كاميرا هاتفك إلى منتج ومعرفة مكان شرائه على الإنترنت؟ إذا كنت تريد معرفة كيفية إضافة الميزة نفسها إلى تطبيقك، هذا الدليل التعليمي هو لك. وهو جزء من مسار تعليمي يعلّمك كيفية إنشاء ميزة البحث عن صور المنتجات في تطبيق جوّال.

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على الخطوة الأولى لإنشاء ميزة البحث عن صور المنتجات: كيفية رصد الأجسام في الصور والسماح للمستخدم باختيار الأجسام التي يريد البحث عنها. ستستخدم ميزة "رصد الأجسام وتتبُّعها" في ML Kit لإنشاء هذه الميزة.

يمكنك الاطّلاع على الخطوات المتبقية، بما في ذلك كيفية إنشاء خلفية بحث عن المنتجات باستخدام Vision API Product Search، في مسار التعلّم.

التطبيق الذي ستصممه

  • في هذا الدرس التطبيقي حول الترميز، ستُنشئ تطبيق Android باستخدام ML Kit. سيستخدم تطبيقك واجهة برمجة التطبيقات Object Detection and Tracking API من ML Kit لرصد الأجسام في صورة معيّنة. بعد ذلك، سيختار المستخدم عنصرًا يريد البحث عنه في قاعدة بيانات المنتجات.
  • في النهاية، من المفترض أن يظهر لك شيء مشابه للصورة على يسار الصفحة.

ما ستتعرّف عليه

  • كيفية دمج حزمة تطوير البرامج (SDK) لـ ML Kit في تطبيق Android
  • واجهة برمجة التطبيقات لرصد الأجسام وتتبُّعها في حزمة ML Kit

المتطلبات

  • أحدث إصدار من "استوديو Android" (الإصدار 4.1.2 أو إصدار أحدث)
  • محاكي Android Studio أو جهاز Android
  • نموذج الرمز البرمجي
  • معرفة أساسية بتطوير تطبيقات Android باستخدام لغة Kotlin

يركز هذا الدرس التطبيقي على ML Kit. لا يتمّ دراسة المفاهيم الأخرى ووحدات الرموز البرمجية الأخرى، بل يتمّ تقديمها لك لكي تتمكّن من نسخها ولصقها بسهولة.

2. الإعداد

تنزيل الرمز

انقر على الرابط التالي لتنزيل كل الرموز البرمجية لهذا الدرس التطبيقي حول الترميز:

فكِّ ضغط ملف ZIP الذي تم تنزيله. سيؤدي ذلك إلى فك ضغط مجلد جذر (odml-pathways-main) يحتوي على جميع الموارد التي ستحتاج إليها. في هذا الدليل التعليمي حول الرموز البرمجية، لن تحتاج سوى إلى المصادر في الدليل الفرعي product-search/codelab1/android.

يحتوي الدليل الفرعي object-detection في مستودع mlkit-android على دليلَين:

  • android_studio_folder.pngstarter: الرمز البرمجي الأوّلي الذي تستند إليه في هذا الدرس التطبيقي حول الترميز
  • android_studio_folder.pngfinal: الرمز المكتمل لنموذج التطبيق المكتمل

3- إضافة ML Kit Object Detection and Tracking API إلى المشروع

استيراد التطبيق إلى "استوديو Android"

ابدأ باستيراد تطبيق starter إلى Android Studio.

انتقِل إلى Android Studio، واختَر "استيراد مشروع" (Gradle أو Eclipse ADT أو غير ذلك)، ثم اختَر مجلد starter من رمز المصدر الذي نزّلته سابقًا.

7c0f27882a2698ac.png

إضافة التبعيات لميزة "اكتشاف الأجسام وتتبُّعها" في ML Kit

تسمح لك متطلّبات ML Kit بدمج حزمة تطوير البرامج (SDK) لـ ML Kit ODT في تطبيقك.

انتقِل إلى ملف app/build.gradle في مشروعك وتأكَّد من توفّر التبعية:

build.gradle

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

مزامنة مشروعك مع ملفات Gradle

للتأكّد من توفّر جميع التبعيات لتطبيقك، عليك مزامنة مشروعك مع ملفات Gradle في هذه المرحلة.

اختَر مزامنة المشروع مع ملفات Gradle ( b451ab2d04d835f9.png) من شريط أدوات "استوديو Android".

(إذا كان هذا الزر غير مفعّل، تأكَّد من استيراد starter/app/build.gradle فقط، وليس المستودع بأكمله.)

4. تشغيل التطبيق النموذجي

بعد استيراد المشروع إلى Android Studio وإضافة التبعيات لميزة "رصد الأجسام وتتبُّعها" في ML Kit، أصبحت مستعدًا لتشغيل التطبيق للمرة الأولى.

وصِّل جهاز Android عبر USB بالجهاز المضيف أو ابدأ محاكي "استوديو Android"، ثم انقر على تشغيل ( execute.png) في شريط أدوات "استوديو Android".

تشغيل التطبيق واستكشافه

من المفترض أن يتم تشغيل التطبيق على جهاز Android. يحتوي على بعض الرموز البرمجية المتكررة التي تتيح لك التقاط صورة أو اختيار صورة مُعدّة مسبقًا وإرسالها إلى مسار معالجة لرصد الأجسام وتتبُّعها، وهو المسار الذي ستُنشئه في هذا الدليل التعليمي حول الرموز البرمجية. استكشِف التطبيق قليلاً قبل كتابة الرمز البرمجي:

أولاً، هناك زر ( c6d965d639c3646.png) في أسفل الصفحة لإجراء ما يلي:

  • تشغيل تطبيق الكاميرا المدمج في جهازك أو المحاكي
  • التقاط صورة في تطبيق الكاميرا
  • تلقّي الصورة التي تم التقاطها في تطبيق التشغيل
  • عرض الصورة

جرِّب الزرّ التقاط صورة. اتّبِع التعليمات لالتقاط صورة، ثم اقبل الصورة واطّلِع على عرضها داخل تطبيق التشغيل.

ثانيًا، تتوفّر 3 صور مُعدّة مسبقًا يمكنك الاختيار من بينها. يمكنك استخدام هذه الصور لاحقًا لاختبار رمز رصد الأجسام إذا كنت تستخدم محاكي Android.

  1. اختَر صورة من الصور الثلاث المُعدّة مسبقًا.
  2. تأكَّد من ظهور الصورة في العرض الأكبر.

1290481786af21b9.png

5- إضافة ميزة "رصد الأجسام" على الجهاز فقط

في هذه الخطوة، ستضيف الوظيفة إلى التطبيق المبدئي لرصد الأجسام في الصور. كما رأيت في الخطوة السابقة، يحتوي التطبيق المبدئي على رمز نموذجي لالتقاط الصور باستخدام تطبيق الكاميرا على الجهاز. تتوفّر أيضًا 3 صور مُعدّة مسبقًا في التطبيق يمكنك تجربة ميزة "اكتشاف الأجسام" عليها، إذا كنت تشغّل الدرس التطبيقي على محاكي Android.

عند اختيار صورة، إما من الصور المُعدّة مسبقًا أو من خلال التقاط صورة باستخدام تطبيق الكاميرا، يفكّ رمز النموذج الجاهز ترميز هذه الصورة إلى مثيل Bitmap، ويعرضها على الشاشة ويُطلِب طريقة runObjectDetection مع الصورة.

في هذه الخطوة، ستضيف رمزًا إلى طريقة runObjectDetection لرصد الأجسام.

إعداد ميزة "اكتشاف الأجسام" على الجهاز وتشغيلها على صورة

هناك 3 خطوات بسيطة فقط باستخدام 3 واجهات برمجة تطبيقات لإعداد 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. أثناء إنشاء التطبيق، سيطلب منك Android Studio إضافة عمليات الاستيراد اللازمة.

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

الخطوة 1: إنشاء InputImage

توفّر ML Kit واجهة برمجة تطبيقات بسيطة لإنشاء InputImage من Bitmap. بعد ذلك، يمكنك إرسال InputImage إلى واجهات برمجة التطبيقات في ML Kit.

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

أضِف الرمز أعلاه إلى أعلى runObjectDetection(bitmap:Bitmap).

الخطوة 2: إنشاء مثيل أداة رصد

تتّبع ML Kit نمط تصميم أداة الإنشاء، ويمكنك تمرير الإعدادات إلى أداة الإنشاء، ثم الحصول على كاشف منها. هناك 3 خيارات للضبط (يتم استخدام الخيار المكتوب بخط عريض في الدرس التطبيقي حول الترميز):

  • وضع أداة الرصد (صورة واحدة أو بث)
  • وضع رصد (رصد جسم واحد أو أجسام متعددة )
  • وضع التصنيف (مفعَّل أو غير مفعَّل)

يهدف هذا الدليل التعليمي إلى رصد وتحديد أجسام متعددة في صورة واحدة، وننصحك باتّباع الخطوات التالية:

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

الخطوة 3: إرسال الصور إلى أداة الكشف

تتم معالجة رصد الأجسام وتصنيفها بشكل غير متزامن:

  • إرسال صورة إلى أداة الكشف (عبر 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 (عدد عشري يتراوح بين 0.0 و1.0، حيث يشير الرقم 1.0 إلى %100)

ربما لاحظت أنّ الرمز يطبع النتائج التي تم رصدها في Logcat باستخدام debugPrint(). أضِفها إلى فئة 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}")
       }
   }
}

أنت الآن جاهز لقبول الصور لرصدها.

شغِّل دورة تعليمية عن البرمجة من خلال النقر على رمز التشغيل ( execute.png) في شريط أدوات "استوديو Android". جرِّب اختيار صورة مُعدّة مسبقًا أو التقاط صورة، ثم اطّلِع على نافذة logcat( 16bd6ea224cf8cf1.png) داخل 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

وهذا يعني أنّ أداة الكشف رصدت 3 عناصر من:

  • سلع أزياء وسلع منزلية.
  • لا يتم عرض فئة للعنصر الثاني لأنّه فئة غير معروفة.
  • لا trackingId (لأنّ هذا هو وضع رصد صورة واحدة)
  • الموضع داخل مستطيل boundingBox (مثلاً (481, 2021) – (2426, 3376))
  • يثق نظام رصد المحتوى تمامًا بأنّ الصورة الأولى سلعة أزياء (‎90%) (إنّها فستان).

من الناحية الفنية، هذا كل ما تحتاجه لتشغيل ميزة "اكتشاف الأجسام" في ML Kit. تهانينا.

نعم، من ناحية واجهة المستخدم، ما زلت في المرحلة التي بدأت فيها، ولكن يمكنك الاستفادة من النتائج التي تم رصدها على واجهة المستخدم، مثل رسم مربّع الحدود لتوفير تجربة أفضل. الخطوة التالية هي عرض النتائج التي تم رصدها.

6- معالجة نتائج رصد المحتوى بعد اكتمالها

في الخطوات السابقة، طبّقت النتيجة التي تم رصدها في logcat: خطوة بسيطة وسريعة.

في هذا القسم، ستستفيد من النتيجة في الصورة:

  • رسم مربّع الحدود على الصورة
  • رسم اسم الفئة ونسبة الثقة داخل مربّع الحدود

التعرّف على أدوات المساعدة في العروض المرئية

هناك بعض الرموز البرمجية النموذجية داخل ورشة رموز البرامج لمساعدتك في عرض نتيجة الكشف بشكل مرئي. يمكنك الاستفادة من هذه الأدوات لتسهيل رمز التصور:

  • class ImageClickableView هذه فئة عرض صور تقدّم بعض الأدوات المفيدة للعرض التفاعلي وتفاعلي مع نتيجة الكشف.
  • fun drawDetectionResults(results: List<DetectedObject>) ترسم هذه الطريقة دوائر بيضاء في مركز كل جسم يتم رصده.
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) هذه دالة ردّ اتصال لتلقّي الصورة المقتطعة التي تحتوي فقط على العنصر الذي نقر عليه المستخدم. سترسل هذه الصورة المقتطعة إلى الخلفية في ميزة البحث عن الصور في ورشة عمل لاحقة لإنشاء نتيجة مشابهة من الناحية المرئية. في هذا الدليل التعليمي حول الرموز البرمجية، لن تستخدم هذه الطريقة بعد.

عرض نتيجة رصد حزمة ML Kit

استخدِم أدوات العروض المرئية لعرض نتيجة ميزة "التعرّف على الأجسام" من ML Kit فوق صورة الإدخال.

انتقِل إلى المكان الذي تتصل فيه بـ debugPrint() وأضِف مقتطف الرمز التالي تحته:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

تشغيله

الآن، انقر على تشغيل ( execute.png) في شريط أدوات "استوديو Android".

بعد تحميل التطبيق، اضغط على الزر الذي يحمل رمز الكاميرا، ثم وجِّه الكاميرا إلى جسم معيّن، والتقط صورة، واقبل الصورة (في تطبيق "الكاميرا")، أو يمكنك النقر بسهولة على أي صور مُعدّة مسبقًا. من المفترض أن تظهر لك نتيجة رصد العنصر. اضغط على الزر مرة أخرى أو اختَر صورة أخرى لتكرار العملية بضع مرات، واستمتع بأحدث إصدار من ML Kit ODT.

5027148750dc0748.png

7- تهانينا!

إذا كنت قد استخدمت أدوات تعلُّم الآلة لإضافة إمكانات ميزة "اكتشاف الأجسام" إلى تطبيقك:

  • 3 خطوات باستخدام 3 واجهات برمجة تطبيقات
  • إنشاء صورة إدخال
  • إنشاء أداة رصد
  • إرسال الصورة إلى أداة الكشف

هذا كل ما عليك فعله لبدء استخدام التطبيق.

المواضيع التي تناولناها

  • كيفية إضافة ميزتَي "رصد الأجسام وتتبُّعها" من ML Kit إلى تطبيق Android
  • كيفية استخدام ميزتَي رصد الأجسام وتتبُّعها على الجهاز في ML Kit لرصد الأجسام في الصور

الخطوات التالية

  • جرِّب هذا الدرس التطبيقي حول كيفية إرسال الجسم الذي تم رصده إلى الخلفية لميزة البحث عن المنتجات وعرض نتائج البحث.
  • استكشِف المزيد باستخدام ML Kit ODT مع المزيد من الصور والفيديوهات المباشرة لتجربة دقة الرصد والتصنيف والأداء
  • اطّلِع على مسار التعلّم تحسين ميزة "اكتشاف الأجسام" لمعرفة كيفية تدريب نموذج مخصّص.
  • اطّلِع على اقتراحات Material Design لميزة "التعرّف على الأجسام" live-camera وstatic-image.
  • تطبيق ML Kit ODT في تطبيق Android الخاص بك

مزيد من المعلومات