एमएल किट की मदद से, विज़ुअल प्रॉडक्ट खोज के लिए इमेज में मौजूद ऑब्जेक्ट का पता लगाएं: Android

1. शुरू करने से पहले

क्या आपने Google Lens का डेमो देखा है, जिसमें फ़ोन के कैमरे को किसी ऑब्जेक्ट पर फ़ोकस करके, उसे ऑनलाइन खरीदने की जगह का पता लगाया जा सकता है? अगर आपको अपने ऐप्लिकेशन में यह सुविधा जोड़ने का तरीका जानना है, तो यह कोडलैब आपके लिए है. यह एक लर्निंग पाथवे का हिस्सा है, जो आपको मोबाइल ऐप्लिकेशन में प्रॉडक्ट इमेज खोजने की सुविधा बनाने का तरीका सिखाता है.

इस कोडलैब में, प्रॉडक्ट की इमेज से खोजने की सुविधा बनाने का पहला चरण जानें: इमेज में ऑब्जेक्ट का पता लगाने और उपयोगकर्ता को वे ऑब्जेक्ट चुनने की सुविधा देने का तरीका. इस सुविधा को बनाने के लिए, ML Kit ऑब्जेक्ट की पहचान करने और उसे ट्रैक करने की सुविधा का इस्तेमाल किया जाएगा.

लर्निंग पाथवे में, बाकी चरणों के बारे में जानें. इनमें, Vision API Product Search की मदद से प्रॉडक्ट सर्च का बैकएंड बनाने का तरीका भी शामिल है.

आपको क्या बनाना है

इस कोडलैब में, आपको ML Kit की मदद से Android ऐप्लिकेशन बनाना है. आपका ऐप्लिकेशन, किसी इमेज में मौजूद ऑब्जेक्ट का पता लगाने के लिए, ML Kit के ऑब्जेक्ट का पता लगाने और ट्रैकिंग एपीआई का इस्तेमाल करेगा. इसके बाद, उपयोगकर्ता वह ऑब्जेक्ट चुनेगा जिसे उसे हमारे प्रॉडक्ट डेटाबेस में खोजना है. आखिर में, आपको दाईं ओर दी गई इमेज जैसा कुछ दिखेगा.

आपको इनके बारे में जानकारी मिलेगी

• अपने Android ऐप्लिकेशन में ML Kit SDK टूल को इंटिग्रेट करने का तरीका
• ML Kit का ऑब्जेक्ट का पता लगाने और ट्रैक करने वाला एपीआई

आपको इन चीज़ों की ज़रूरत होगी

• Android Studio का नया वर्शन (v4.1.2+)
• Android Studio एमुलेटर या कोई Android डिवाइस
• सैंपल कोड
• Kotlin में Android डेवलपमेंट की बुनियादी जानकारी

इस कोडलैब में, ML Kit पर फ़ोकस किया गया है. अन्य कॉन्सेप्ट और कोड ब्लॉक का अध्ययन नहीं किया जाता है. ये आपको सिर्फ़ कॉपी और चिपकाने के लिए दिए जाते हैं.

2. सेट अप करें

कोड डाउनलोड करना

इस कोडलैब का पूरा कोड डाउनलोड करने के लिए, इस लिंक पर क्लिक करें:

सोर्स कोड डाउनलोड करना

डाउनलोड की गई ज़िप फ़ाइल को अनपैक करें. इससे, रूट फ़ोल्डर (odml-pathways-main) अनपैक हो जाएगा. इसमें आपको ज़रूरी सभी संसाधन मिलेंगे. इस कोडलैब के लिए, आपको सिर्फ़ product-search/codelab1/android सबडायरेक्ट्री में मौजूद सोर्स की ज़रूरत होगी.

mlkit-android डेटा स्टोर करने की जगह में, ऑब्जेक्ट-डिटेक्शन सब-डायरेक्ट्री में दो डायरेक्ट्री होती हैं:

• starter—इस कोडलैब के लिए इस्तेमाल किया जाने वाला स्टार्टर कोड.
• final—पूरे किए गए सैंपल ऐप्लिकेशन के लिए पूरा कोड.

3. प्रोजेक्ट में ML Kit के ऑब्जेक्ट की पहचान करने और ट्रैकिंग एपीआई को जोड़ना

ऐप्लिकेशन को Android Studio में इंपोर्ट करना

Android Studio में starter ऐप्लिकेशन इंपोर्ट करके शुरुआत करें.

Android Studio में जाकर, 'प्रोजेक्ट इंपोर्ट करें' (Gradle, Eclipse ADT वगैरह) को चुनें. इसके बाद, पहले डाउनलोड किए गए सोर्स कोड से starter फ़ोल्डर चुनें.

ML Kit के ऑब्जेक्ट का पता लगाने और ट्रैकिंग की सुविधा के लिए डिपेंडेंसी जोड़ना

ML Kit की डिपेंडेंसी की मदद से, अपने ऐप्लिकेशन में ML Kit ODT SDK टूल को इंटिग्रेट किया जा सकता है.

अपने प्रोजेक्ट की app/build.gradle फ़ाइल पर जाएं और पुष्टि करें कि डिपेंडेंसी पहले से मौजूद है:

build.gradle

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

अपने प्रोजेक्ट को Gradle फ़ाइलों के साथ सिंक करना

यह पक्का करने के लिए कि आपके ऐप्लिकेशन के लिए सभी डिपेंडेंसी उपलब्ध हों, आपको इस समय अपने प्रोजेक्ट को ग्रेडल फ़ाइलों के साथ सिंक करना चाहिए.

Android Studio टूलबार से, Gradle फ़ाइलों के साथ प्रोजेक्ट सिंक करें ( ) को चुनें.

(अगर यह बटन बंद है, तो पक्का करें कि आपने सिर्फ़ starter/app/build.gradle इंपोर्ट किया हो, न कि पूरी रिपॉज़िटरी.)

4. स्टार्टर ऐप्लिकेशन चलाना

प्रोजेक्ट को Android Studio में इंपोर्ट करने और ML Kit के ऑब्जेक्ट का पता लगाने और ट्रैकिंग के लिए डिपेंडेंसी जोड़ने के बाद, ऐप्लिकेशन को पहली बार चलाया जा सकता है.

अपने Android डिवाइस को यूएसबी के ज़रिए होस्ट से कनेक्ट करें या Android Studio एमुलेटर शुरू करें. इसके बाद,Android Studio टूलबार में चालू करें ( ) पर क्लिक करें.

ऐप्लिकेशन चलाना और उसके बारे में ज़्यादा जानना

इसके बाद, ऐप्लिकेशन आपके Android डिवाइस पर लॉन्च हो जाएगा. इसमें कुछ बोइलरप्लेट कोड हैं, जिनकी मदद से फ़ोटो कैप्चर की जा सकती है या कोई प्रीसेट इमेज चुनी जा सकती है. साथ ही, इसे ऑब्जेक्ट की पहचान करने और ट्रैक करने वाली उस पाइपलाइन में फ़ीड किया जा सकता है जिसे इस कोडलैब में बनाया जाएगा. कोड लिखने से पहले, ऐप्लिकेशन को थोड़ा एक्सप्लोर करें:

सबसे पहले, नीचे एक बटन ( ) है, जिससे

• अपने डिवाइस/एम्युलेटर में इंटिग्रेट किया गया कैमरा ऐप्लिकेशन लॉन्च करें
• कैमरा ऐप्लिकेशन में जाकर फ़ोटो लें
• स्टार्टर ऐप्लिकेशन में कैप्चर की गई इमेज पाना
• इमेज दिखाएं

"फ़ोटो लें" बटन आज़माएं. फ़ोटो लेने के लिए, निर्देशों का पालन करें. इसके बाद, फ़ोटो स्वीकार करें और देखें कि वह स्टार्टर ऐप्लिकेशन में कैसे दिखती है.

दूसरा, आपके पास तीन प्रीसेट इमेज में से किसी एक को चुनने का विकल्प है. अगर Android एमुलेटर पर काम किया जा रहा है, तो ऑब्जेक्ट का पता लगाने वाले कोड की जांच करने के लिए, इन इमेज का इस्तेमाल बाद में किया जा सकता है.

1. तीन प्रीसेट इमेज में से कोई एक चुनें.
2. देखें कि इमेज बड़े व्यू में दिख रही है या नहीं.

5. डिवाइस पर ऑब्जेक्ट की पहचान करने की सुविधा जोड़ना

इस चरण में, आपको इमेज में ऑब्जेक्ट का पता लगाने के लिए, स्टार्टर ऐप्लिकेशन में फ़ंक्शन जोड़ना होगा. जैसा कि आपने पिछले चरण में देखा था, स्टार्टर ऐप्लिकेशन में डिवाइस पर कैमरा ऐप्लिकेशन से फ़ोटो लेने के लिए, बूलिप్లेट कोड शामिल होता है. अगर कोडलैब को Android एमुलेटर पर चलाया जा रहा है, तो ऐप्लिकेशन में तीन प्रीसेट इमेज भी हैं जिन पर ऑब्जेक्ट का पता लगाने की सुविधा आज़माई जा सकती है.

पहले से सेट की गई इमेज में से कोई इमेज चुनने या कैमरा ऐप्लिकेशन से फ़ोटो लेने पर, बॉयलरप्लेट कोड उस इमेज को Bitmap इंस्टेंस में डिकोड करता है. इसके बाद, उसे स्क्रीन पर दिखाता है और इमेज के साथ runObjectDetection तरीके को कॉल करता है.

इस चरण में, आपको ऑब्जेक्ट का पता लगाने के लिए runObjectDetection तरीके में कोड जोड़ना होगा!

इमेज पर, डिवाइस पर ऑब्जेक्ट का पता लगाने की सुविधा सेट अप करना और उसे चलाना

ML Kit ODT को सेट अप करने के लिए, तीन एपीआई के साथ सिर्फ़ तीन आसान चरण हैं

• इमेज तैयार करें: InputImage
• डिटेक्टर ऑब्जेक्ट बनाएं: ObjectDetection.getClient(options)
• ऊपर दिए गए दो ऑब्जेक्ट को कनेक्ट करें: process(image)

ये फ़ंक्शन, फ़ाइल MainActivity.kt में **runObjectDetection(bitmap: Bitmap)**फ़ंक्शन में इस्तेमाल किए जाते हैं.

/**
 * 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

पहला चरण: InputImage बनाना

ML Kit, Bitmap से InputImage बनाने के लिए एक आसान एपीआई उपलब्ध कराता है. इसके बाद, ML Kit के एपीआई में InputImage फ़ीड किया जा सकता है.

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

ऊपर दिए गए कोड को runObjectDetection(bitmap:Bitmap) के सबसे ऊपर जोड़ें.

दूसरा चरण: डिटेक्टर इंस्टेंस बनाना

ML Kit, बिल्डर डिज़ाइन पैटर्न का इस्तेमाल करती है. इसके लिए, आपको बिल्डर को कॉन्फ़िगरेशन पास करना होगा. इसके बाद, उससे डिटेक्टर हासिल करना होगा. कॉन्फ़िगर करने के लिए तीन विकल्प हैं. कोडलैब में, बोल्ड में दिए गए विकल्प का इस्तेमाल किया जाता है:

• डिटेक्टर मोड (एक इमेज या स्ट्रीम)
• ऑब्जेक्ट का पता लगाने का मोड (एक या एक से ज़्यादा ऑब्जेक्ट का पता लगाने की सुविधा)
• क्लासिफ़िकेशन मोड (चालू या बंद)

यह कोडलैब, एक इमेज में एक से ज़्यादा ऑब्जेक्ट का पता लगाने और उनकी कैटगरी तय करने के लिए है. आइए, इसे आज़माते हैं:

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

तीसरा चरण: डिटेक्टर को इमेज फ़ीड करना

ऑब्जेक्ट का पता लगाने और उसकी कैटगरी तय करने की प्रोसेस, एक साथ नहीं होती:

• आपने 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% है)

आपने शायद देखा होगा कि कोड, 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}")
       }
   }
}

अब आपके पास, पहचान करने के लिए इमेज स्वीकार करने का विकल्प है!

Android Studio टूलबार में, चालू करें ( ) पर क्लिक करके कोडलैब चलाएं. कोई प्रीसेट इमेज चुनें या फ़ोटो लें. इसके बाद, IDE में 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

इसका मतलब है कि डिटेक्टर को तीन ऐसे आइटम मिले हैं:

• कैटगरी फ़ैशन के सामान और घर के सामान हैं.
• दूसरी लाइन के लिए कोई कैटगरी नहीं दिखाई गई है, क्योंकि यह एक अनजान क्लास है.
• नहीं 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)
}

इसे चलाना

अब Android Studio टूलबार में, चालू करें ( ) पर क्लिक करें.

ऐप्लिकेशन लोड होने के बाद, कैमरा आइकॉन वाले बटन को दबाएं. इसके बाद, अपने कैमरे को किसी ऑब्जेक्ट पर फ़ोकस करें और फ़ोटो लें. इसके बाद, Camera ऐप्लिकेशन में जाकर फ़ोटो स्वीकार करें या किसी भी प्रीसेट इमेज पर आसानी से टैप करें. आपको ऑब्जेक्ट का पता चलने का नतीजा दिखेगा. इसे दोहराने के लिए, बटन को फिर से दबाएं या कोई दूसरी इमेज चुनें. साथ ही, ML Kit के नए ODT का इस्तेमाल करें!

7. बधाई हो!

आपने अपने ऐप्लिकेशन में ऑब्जेक्ट की पहचान करने की सुविधाएं जोड़ने के लिए, ML Kit का इस्तेमाल किया है:

• तीन एपीआई के साथ तीन चरण
• इनपुट इमेज बनाना
• डिटेक्टर बनाना
• डिटेक्टर को इमेज भेजना

इसे चालू करने के लिए, आपको बस इतना ही करना है!

हमने क्या-क्या शामिल किया है

• अपने Android ऐप्लिकेशन में ML Kit की ऑब्जेक्ट का पता लगाने और ट्रैकिंग की सुविधा जोड़ने का तरीका
• इमेज में ऑब्जेक्ट का पता लगाने के लिए, ML Kit में डिवाइस पर ऑब्जेक्ट का पता लगाने और ट्रैक करने की सुविधा इस्तेमाल करने का तरीका

अगले चरण

• पहचाने गए ऑब्जेक्ट को प्रॉडक्ट सर्च के बैकएंड पर भेजने और खोज के नतीजे दिखाने के तरीके के बारे में जानने के लिए, यह कोडलैब आज़माएं
• ज़्यादा इमेज और लाइव वीडियो के साथ ML Kit ODT को एक्सप्लोर करें. इससे, आपको ऑब्जेक्ट की पहचान करने और उसे कैटगरी में बांटने की सटीक जानकारी और परफ़ॉर्मेंस का अनुभव मिलेगा
• कस्टम मॉडल को ट्रेन करने का तरीका जानने के लिए, ऑब्जेक्ट की पहचान करने की सुविधा का ज़्यादा से ज़्यादा फ़ायदा पाएं लर्निंग पाथ देखें
• ऑब्जेक्ट का पता लगाने के लिए, लाइव-कैमरा और स्टैटिक-इमेज के लिए Material Design के सुझावों के बारे में पढ़ें
• अपने Android ऐप्लिकेशन में ML Kit ODT लागू करना

ज़्यादा जानें

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