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

1. قبل البدء

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

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

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

ما ستنشئه

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

ما ستتعلمه

• كيفية دمج حزمة تطوير البرامج (SDK) الخاصة بخدمة حزمة تعلّم الآلة في تطبيق Android
• ‫واجهة برمجة تطبيقات حزمة تعلّم الآلة لاكتشاف العناصر وتتبُّعها

المتطلبات

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

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

2. طريقة الإعداد

تنزيل الرمز

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

تنزيل رمز المصدر

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

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

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

3- إضافة واجهة برمجة التطبيقات "رصد الأجسام وتتبُّعها" في ML Kit إلى المشروع

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

ابدأ باستيراد تطبيق البدء إلى استوديو Android.

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

إضافة التبعيات الخاصة بميزة "رصد العناصر وتتبُّعها" في ML Kit

تتيح لك تبعيات ML Kit دمج حزمة تطوير البرامج (SDK) الخاصة باكتشاف العناصر وتتبُّعها في تطبيقك.

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

build.gradle

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

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

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

انقر على مزامنة المشروع مع ملفات Gradle ( ) من شريط أدوات "استوديو Android".

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

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

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

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

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

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

أولاً، هناك زر ( ) في أسفل الشاشة

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

جرِّب الزر التقاط صورة. اتّبِع التعليمات لالتقاط صورة، ثم اقبل الصورة ولاحظ ظهورها داخل تطبيق البداية.

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

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

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

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

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

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

إعداد ميزة "رصد العناصر على الجهاز فقط" وتشغيلها على صورة

لا يتطلّب إعداد ميزة "التعرّف على العناصر" في حزمة تعلّم الآلة سوى 3 خطوات بسيطة باستخدام 3 واجهات برمجة تطبيقات.

• تحضير صورة: InputImage
• أنشئ عنصر أداة رصد: ObjectDetection.getClient(options)
• اربط بين العنصرَين أعلاه: process(image)

يمكنك تحقيق ذلك داخل الدالة **runObjectDetection(bitmap: Bitmap)**في الملف MainActivity.kt.

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

في الوقت الحالي، الدالة فارغة. انتقِل إلى الخطوات التالية لدمج ميزة "رصد العناصر" في حزمة تعلّم الآلة. أثناء ذلك، سيطلب منك "استوديو Android" إضافة عمليات الاستيراد اللازمة.

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

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

توفّر حزمة تعلُّم الآلة واجهة برمجة تطبيقات بسيطة لإنشاء InputImage من Bitmap. بعد ذلك، يمكنك إدخال InputImage في واجهات برمجة التطبيقات الخاصة بحزمة تعلُّم الآلة (ML Kit).

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

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

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

تتّبع حزمة تعلّم الآلة نمط تصميم أداة الإنشاء، حيث يتم تمرير الإعدادات إلى أداة الإنشاء، ثم يتم الحصول على أداة رصد منها. تتوفّر 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}")
       }
   }
}

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

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

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) (إنّها فستان)

من الناحية الفنية، هذا كل ما تحتاج إليه لتشغيل ميزة "رصد العناصر" في حزمة تعلّم الآلة، إذ يتوفّر لديك كل شيء في الوقت الحالي. تهانينا.

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

6. المعالجة اللاحقة لنتائج الرصد

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

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

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

التعرّف على أدوات التصوّر

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

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

عرض نتيجة الرصد في حزمة تعلّم الآلة

استخدِم أدوات العرض المرئي لإظهار نتيجة رصد العناصر في حزمة تعلُّم الآلة فوق الصورة المُدخَلة.

انتقِل إلى المكان الذي تستدعي فيه debugPrint() وأضِف مقتطف الرمز التالي أدناه:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

تشغيلها

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

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

7. تهانينا!

استخدام ML Kit لإضافة إمكانات "رصد العناصر" إلى تطبيقك:

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

هذا كل ما عليك فعله لتشغيلها.

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

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

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

• جرِّب هذا الدرس التطبيقي حول الترميز حول كيفية إرسال العنصر الذي تم رصده إلى الخلفية الخاصة بالبحث عن المنتجات وعرض نتائج البحث.
• استكشاف المزيد باستخدام ميزة "رصد وتصنيف العناصر" في حزمة تعلّم الآلة مع المزيد من الصور والفيديوهات المباشرة لتجربة دقة الرصد والتصنيف والأداء
• اطّلِع على مسار التعلّم التعمّق في رصد العناصر لمعرفة كيفية تدريب نموذج مخصّص.
• يمكنك الاطّلاع على اقتراحات التصميم المتعدد الأبعاد بشأن الكاميرا المباشرة والصور الثابتة لرصد العناصر.
• تطبيق ميزة "رصد العناصر" من حزمة تعلّم الآلة في تطبيق Android الخاص بك

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

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