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

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

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

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

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

आपको क्या बनाने को मिलेगा

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

आपको क्या सीखने को मिलेगा

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

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

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

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

2. सेट अप करें

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

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

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

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

mlkit-android रिपॉज़िटरी में मौजूद object-detection सबडायरेक्ट्री में दो डायरेक्ट्री होती हैं:

• स्टार्टर—यह कोडलैब के लिए शुरुआती कोड है.
• final—यह फ़ोल्डर, सैंपल ऐप्लिकेशन के पूरे कोड के लिए है.

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

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

सबसे पहले, स्टार्टर ऐप्लिकेशन को Android Studio में इंपोर्ट करें.

Android Studio पर जाएं. इसके बाद, Import Project (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 Emulator शुरू करें. इसके बाद,Android Studio टूलबार में मौजूद Run ( ) पर क्लिक करें.

ऐप्लिकेशन को चलाना और एक्सप्लोर करना

ऐप्लिकेशन आपके 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, InputImage से Bitmap बनाने के लिए एक आसान एपीआई उपलब्ध कराता है. इसके बाद, InputImage को ML Kit API में फ़ीड किया जा सकता है.

// 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() के ज़रिए)
• detector works pretty hard on it
• डिटेक्टर, कॉलबैक के ज़रिए आपको नतीजे की जानकारी देता है

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

विज़ुअलाइज़ेशन यूटिलिटी का इस्तेमाल करके, इनपुट इमेज के ऊपर एमएल किट की ऑब्जेक्ट डिटेक्शन सुविधा का नतीजा दिखाएं.

उस जगह पर जाएं जहां 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