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

1. قبل البدء

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

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

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

ما الذي ستنشئه

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

المعلومات التي ستطّلع عليها

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

المتطلبات

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

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

2. الإعداد

تنزيل الرمز

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

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

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

يحتوي الدليل الفرعي "اكتشاف الكائنات" في مستودع mlkit-android على دليلين:

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

3- إضافة واجهة برمجة التطبيقات لميزة ML Kit Detection and Tracking API إلى المشروع

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

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

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

إضافة الموارد الاعتمادية لرصد عناصر حزمة تعلُّم الآلة وتتبُّعها

تتيح لك تبعيات ML Kit إمكانية دمج ML Kit ODT SDK في تطبيقك.

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

build.gradle

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

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

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

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

(إذا تم إيقاف هذا الزر، تأكَّد من استيراد البداية/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) {
}

الدالة فارغة في الوقت الحالي. الانتقال إلى الخطوات التالية لدمج ML Kit ODT بالإضافة إلى ذلك، سيطلب منك "استوديو Android" إضافة عمليات الاستيراد اللازمة.

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

الخطوة 1: إنشاء إدخال صورة

توفّر حزمة تعلّم الآلة واجهة برمجة تطبيقات بسيطة لإنشاء 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. تهانينا

لقد استخدمت حزمة تعلّم الآلة لإضافة إمكانات رصد العناصر إلى تطبيقك:

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

هذا كل ما تحتاجه لتشغيله.

النقاط التي تناولناها

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

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

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

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

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