זיהוי אובייקטים בתמונות כדי ליצור חיפוש חזותי של מוצרים באמצעות ערכת ML: Android

1. לפני שמתחילים

האם ראית את ההדגמה של Google Lens, שבה אפשר לכוון את מצלמת הטלפון לאובייקט ולמצוא איפה אפשר לקנות אותו באינטרנט? אם אתם רוצים לדעת איך להוסיף את אותה תכונה לאפליקציה שלכם, אתם מוזמנים לנסות את ה-codelab הזה. הוא חלק מתוכנית לימודים שמלמדת איך לשלב תכונה של חיפוש תמונות מוצרים באפליקציה לנייד.

ב-codelab הזה תלמדו את השלב הראשון ביצירת תכונה לחיפוש תמונות של מוצרים: איך לזהות אובייקטים בתמונות ולאפשר למשתמשים לבחור את האובייקטים שהם רוצים לחפש. תשתמשו ב-ML Kit Object Detection and Tracking כדי ליצור את התכונה הזו.

בתוכנית הלימודים מוסבר איך לבצע את השלבים הבאים, כולל איך ליצור קצה עורפי לחיפוש מוצרים באמצעות Vision API Product Search.

מה תפַתחו

ב-Codelab הזה תלמדו איך ליצור אפליקציית Android באמצעות ML Kit. האפליקציה תשתמש ב-API של ML Kit לזיהוי ומעקב אחרי אובייקטים כדי לזהות אובייקטים בתמונה נתונה. לאחר מכן המשתמש יבחר אובייקט שהוא רוצה לחפש במסד הנתונים של המוצרים שלנו.
בסיום, אמור להופיע משהו דומה לתמונה שמשמאל.

מה תלמדו

איך משלבים ML Kit SDK באפליקציה ל-Android
‫ML Kit Object Detection and Tracking API

מה תצטרכו

גרסה עדכנית של Android Studio (גרסה 4.1.2 ואילך)
אמולטור של Android Studio או מכשיר Android פיזי
קוד לדוגמה
ידע בסיסי בפיתוח ל-Android ב-Kotlin

ה-Codelab הזה מתמקד ב-ML Kit. מושגים ובלוקים אחרים של קוד לא נלמדים, ואתם יכולים פשוט להעתיק ולהדביק אותם.

2. להגדרה

הורדת הקוד

כדי להוריד את כל הקוד של ה-Codelab הזה, לוחצים על הקישור הבא:

מחלצים את קובץ ה-ZIP שהורד. הפעולה הזו תפרוס תיקיית שורש (odml-pathways-main) עם כל המשאבים שתצטרכו. במהלך ה-codelab הזה, תצטרכו רק את המקורות בספריית המשנה product-search/codelab1/android.

ספריית המשנה object-detection במאגר mlkit-android מכילה שתי ספריות:

‫starter – קוד התחלתי שעליו מתבססים ב-Codelab הזה.
‫final – קוד מלא של אפליקציית הדוגמה המוגמרת.

3. הוספת ML Kit Object Detection and Tracking API לפרויקט

ייבוא האפליקציה ל-Android Studio

מתחילים בייבוא אפליקציית המתחילים אל Android Studio.

עוברים אל Android Studio, בוחרים באפשרות Import Project (ייבוא פרויקט) (Gradle,‏ Eclipse ADT וכו') ובוחרים את התיקייה starter (התחלה) מתוך קוד המקור שהורדתם קודם.

הוספת יחסי התלות של ML Kit Object Detection and Tracking

יחסי התלות של ML Kit מאפשרים לכם לשלב את ML Kit ODT SDK באפליקציה.

עוברים לקובץ app/build.gradle של הפרויקט ומוודאים שהתלות כבר קיימת:

build.gradle

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

סנכרון הפרויקט עם קובצי Gradle

כדי לוודא שכל התלויות זמינות לאפליקציה, בשלב הזה צריך לסנכרן את הפרויקט עם קובצי gradle.

בסרגל הכלים של Android Studio, בוחרים באפשרות Sync Project with Gradle Files (סנכרון הפרויקט עם קובצי Gradle) ( ).

(אם הכפתור הזה מושבת, מוודאים שייבאתם רק את starter/app/build.gradle ולא את כל המאגר).

4. הפעלת האפליקציה לתחילת הדרך

אחרי שייבאתם את הפרויקט ל-Android Studio והוספתם את התלות של ML Kit Object Detection and Tracking (זיהוי ומעקב אובייקטים), אתם מוכנים להפעיל את האפליקציה בפעם הראשונה.

מחברים את מכשיר Android באמצעות USB למחשב המארח או מפעילים את האמולטור של Android Studio ולוחצים על Run (הפעלה) ( ) בסרגל הכלים של Android Studio.

הפעלת האפליקציה ועיון בה

האפליקציה אמורה להיפתח במכשיר Android. יש בו קוד שחוזר על עצמו (boilerplate) שמאפשר לכם לצלם תמונה או לבחור תמונה מוגדרת מראש, ולהזין אותה לצינור עיבוד לזיהוי ולמעקב אחרי אובייקטים שתבנו ב-codelab הזה. כדאי לעיין קצת באפליקציה לפני שכותבים קוד:

קודם כול, יש לחצן ( ) בחלק התחתון של המסך

מפעילים את אפליקציית המצלמה שמשולבת במכשיר או באמולטור.
מצלמים תמונה בתוך אפליקציית המצלמה
מקבלים את התמונה שצולמה באפליקציה לתחילת הדרך
הצגת התמונה

אפשר לנסות את הלחצן צילום תמונה. פועלים לפי ההנחיות כדי לצלם תמונה, מאשרים את התמונה וצופים בה מוצגת בתוך אפליקציה לתחילת הדרך.

בנוסף, יש 3 תמונות מוגדרות מראש שאפשר לבחור מביניהן. אם אתם מריצים את הקוד של זיהוי האובייקטים באמולטור של Android, תוכלו להשתמש בתמונות האלה בהמשך כדי לבדוק את הקוד.

בוחרים תמונה מתוך 3 התמונות המוגדרות מראש.
התמונה תופיע בתצוגה הגדולה יותר.

5. הוספת זיהוי אובייקטים במכשיר

בשלב הזה תוסיפו לאפליקציה לתחילת הדרך את הפונקציונליות של זיהוי אובייקטים בתמונות. כמו שראיתם בשלב הקודם, אפליקציה לתחילת הדרך מכילה קוד שחוזר על עצמו (boilerplate) לצילום תמונות באמצעות אפליקציית המצלמה במכשיר. יש גם 3 תמונות מוגדרות מראש באפליקציה שבהן אפשר לנסות זיהוי אובייקטים, אם מריצים את ה-codelab באמולטור של Android.

כשבוחרים תמונה, מתוך התמונות המוגדרות מראש או על ידי צילום תמונה באמצעות אפליקציית המצלמה, קוד ה-boilerplate מפענח את התמונה הזו למופע Bitmap, מציג אותה במסך ומפעיל את השיטה runObjectDetection עם התמונה.

בשלב הזה תוסיפו קוד לשיטה runObjectDetection כדי לבצע זיהוי אובייקטים.

הגדרה והפעלה של זיהוי אובייקטים במכשיר בתמונה

ההגדרה של ML Kit ODT כוללת רק 3 שלבים פשוטים עם 3 ממשקי API

הכנת תמונה: 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 מספק API פשוט ליצירת InputImage מתוך Bitmap. אחרי כן אפשר להזין InputImage לממשקי ה-API של ML Kit.

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

מוסיפים את הקוד שלמעלה לחלק העליון של runObjectDetection(bitmap:Bitmap).

שלב 2: יצירת מופע של גלאי

‫ML Kit פועל לפי תבנית עיצוב של Builder. מעבירים את ההגדרה ל-Builder, ואז מקבלים ממנו גלאי. יש 3 אפשרויות להגדרה (האפשרות שמופיעה במודגש משמשת ב-codelab):

מצב הגלאי (תמונה בודדת או סטרימינג)
מצב זיהוי (יחיד או מרובה זיהוי אובייקטים)
מצב סיווג (מופעל או מושבת)

ב-codelab הזה נתמקד בזיהוי וסיווג של כמה אובייקטים בתמונה אחת. בואו נתחיל:

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

שלב 3: מזינים את התמונה או התמונות לגלאי

זיהוי וסיווג אובייקטים הם עיבודים אסינכרוניים:

שולחים תמונה לגלאי (דרך process())
הגלאי עובד קשה כדי לזהות את זה
הגלאי מדווח על התוצאה באמצעות קריאה חוזרת (callback)

הקוד הבא עושה בדיוק את זה (מעתיק ומצרף אותו לקוד הקיים בתוך 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())
   }

בסיום, הגלאי מודיע לכם באמצעות

המספר הכולל של האובייקטים שזוהו
כל אובייקט שמזוהה מתואר באמצעות

‫trackingId: מספר שלם שמשמש למעקב אחריו בין מסגרות (לא בשימוש ב-codelab הזה)
‫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}")
       }
   }
}

עכשיו אפשר לקבל תמונות לזיהוי!

מריצים את ה-codelab בלחיצה על Run (הפעלה) ( ) בסרגל הכלים של Android Studio. אפשר לנסות לבחור תמונה מוגדרת מראש או לצלם תמונה, ואז לבדוק את חלון 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

כלומר, מזהה התוכן זיהה 3 אובייקטים מהסוגים הבאים:

הקטגוריות הן מוצרי אופנה ומוצרים לבית.
לא מוחזרת קטגוריה עבור השני כי הוא מחלקה לא ידועה.
לא (כי זה מצב זיהוי של תמונה אחת)trackingId
המיקום בתוך המלבן boundingBox (למשל, (481, 2021) – (2426, 3376))
גלאי התוצאות בטוח למדי שהתוצאה הראשונה היא מוצר אופנה (90%) (מדובר בשמלה)

מבחינה טכנית, זה כל מה שצריך כדי להפעיל את התכונה 'זיהוי אובייקטים' ב-ML Kit – יש לכם את כל מה שצריך בשלב הזה! מזל טוב!

כן, מבחינת ממשק המשתמש, עדיין נמצאים בשלב שבו התחלתם, אבל אפשר להשתמש בתוצאות שזוהו בממשק המשתמש, למשל לצייר את תיבת התוחמת כדי ליצור חוויה טובה יותר. השלב הבא הוא להציג את התוצאות שזוהו.

6. עיבוד התוצאות של הגלאי

בשלבים הקודמים, הדפסתם את התוצאה שזוהתה ב-logcat: פשוט ומהיר.

בקטע הזה תשתמשו בתוצאה שמוצגת בתמונה:

לשרטט את התיבה התוחמת על התמונה
לצייר את שם הקטגוריה ואת רמת הביטחון בתוך תיבת התוחמת

הסבר על כלי ההדמיה

יש קוד boilerplate בתוך ה-codelab כדי לעזור לכם להמחיש את תוצאת הזיהוי. כדי לפשט את קוד ההמחשה, אפשר להשתמש בכלי העזר הבאים:

‫class ImageClickableView זוהי מחלקה של תצוגת תמונה שמספקת כמה כלי עזר נוחים להצגה חזותית ולאינטראקציה עם תוצאת הזיהוי.
fun drawDetectionResults(results: List<DetectedObject>) בשיטה הזו מצוירים עיגולים לבנים במרכז של כל אובייקט שזוהה.
‫fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) זוהי קריאה חוזרת לקבלת התמונה החתוכה שמכילה רק את האובייקט שהמשתמש הקיש עליו. תשלחו את התמונה החתוכה הזו אל ה-backend של חיפוש התמונות בשלב מאוחר יותר ב-codelab כדי לקבל תוצאה דומה מבחינה חזותית. ב-codelab הזה, עדיין לא תשתמשו בשיטה הזו.

הצגת תוצאת הזיהוי של ML Kit

אפשר להשתמש בכלי הוויזואליזציה כדי להציג את תוצאת זיהוי האובייקטים של ML Kit מעל תמונת הקלט.

עוברים למקום שבו מתבצעת הקריאה ל-debugPrint() ומוסיפים את קטע הקוד הבא מתחתיה:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

מפעילים פתרונות חכמים

עכשיו לוחצים על Run (הפעלה) ( ) בסרגל הכלים של Android Studio.

אחרי שהאפליקציה נטענת, לוחצים על הכפתור עם סמל המצלמה, מכוונים את המצלמה לאובייקט, מצלמים תמונה ומאשרים אותה (באפליקציית המצלמה). אפשר גם פשוט להקיש על אחת מהתמונות המוגדרות מראש. אמור להופיע תוצאת הזיהוי. לוחצים שוב על הלחצן או בוחרים תמונה אחרת כדי לחזור על הפעולה כמה פעמים ולהתנסות ב-ODT העדכני של ML Kit.

7. מעולה!

השתמשתם ב-ML Kit כדי להוסיף לאפליקציה יכולות של זיהוי אובייקטים:

3 שלבים עם 3 ממשקי API
יצירת תמונת קלט
יצירת גלאי
שליחת תמונה לגלאי

זה כל מה שצריך לעשות כדי להתחיל להשתמש בו.

מה נכלל

איך מוסיפים לאפליקציית Android את התכונות 'זיהוי אובייקטים' ו'מעקב אחרי אובייקטים' של ML Kit
איך משתמשים בזיהוי ובמעקב אחרי אובייקטים במכשיר ב-ML Kit כדי לזהות אובייקטים בתמונות

השלבים הבאים

אפשר לנסות את ה-codelab הזה כדי ללמוד איך לשלוח את האובייקט שזוהה אל העורף של חיפוש מוצרים ולהציג את תוצאות החיפוש
כדי לחוות את הדיוק והביצועים של הזיהוי והסיווג, כדאי לנסות את ML Kit ODT עם תמונות נוספות וסרטוני וידאו בשידור חי
כדי ללמוד איך לאמן מודל בהתאמה אישית, אפשר לעיין בתוכנית הלימודים שימוש מתקדם בזיהוי אובייקטים
מידע נוסף על ההמלצות של Material Design לגבי זיהוי אובייקטים בשידור חי מהמצלמה ובתמונה סטטית
איך משתמשים ב-ODT של ML Kit באפליקציית Android משלכם

מידע נוסף

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