Android पर कॉल विज़न एपीआई प्रॉडक्ट सर्च बैकएंड

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

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

इस कोडलैब में आप मोबाइल ऐप्लिकेशन से विज़न एपीआई प्रॉडक्ट सर्च का इस्तेमाल करके बैकएंड को कॉल करने का तरीका जानेंगे. यह बैकएंड, किसी प्रॉडक्ट इमेज से विज़ुअल इमेज और सर्च जैसे मिलते-जुलते प्रॉडक्ट को खोज सकता है.

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

आप क्या बनाते हैं

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

आप क्या #39;जानेंगे

• किसी Android ऐप्लिकेशन से Vision API प्रॉडक्ट खोज API के जवाब को कॉल और पार्स कैसे करें

आपको क्या चाहिए

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

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

2. Vision एपीआई प्रॉडक्ट सर्च के बारे में जानकारी

Vision API प्रॉडक्ट सर्च, Google Cloud की एक सुविधा है. इससे उपयोगकर्ता, प्रॉडक्ट कैटलॉग से मिलते-जुलते प्रॉडक्ट को खोज सकते हैं. खुदरा दुकानदार प्रॉडक्ट बना सकते हैं. हर प्रॉडक्ट में ऐसी रेफ़रंस इमेज शामिल होनी चाहिए जो व्यू के सेट के सेट से प्रॉडक्ट के बारे में विज़ुअल तौर पर जानकारी देती हों. इसके बाद, इन प्रॉडक्ट को प्रॉडक्ट सेट (जैसे कि प्रॉडक्ट कैटलॉग) में जोड़ा जा सकता है. फ़िलहाल, Vision API प्रॉडक्ट सर्च इन प्रॉडक्ट कैटगरी के साथ काम करता है: घरेलू सामान, कपड़े, खिलौने, पैकेज किए गए सामान, और सामान्य.

जब उपयोगकर्ता प्रॉडक्ट सेट की इमेज अपनी इमेज से क्वेरी करते हैं, तो Vision API प्रॉडक्ट सर्च, उपयोगकर्ता की #/39;s प्रॉडक्ट सेट की इमेज से प्रॉडक्ट की तुलना करने के लिए मशीन लर्निंग का इस्तेमाल करता है. इसके बाद, इमेज के तौर पर मिलते-जुलते नतीजे दिखाता है.

3. स्टार्टर ऐप्लिकेशन डाउनलोड करें और चलाएं

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

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

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

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

odml-pathways रिपॉज़िटरी में codelab2 सबडायरेक्ट्री में दो डायरेक्ट्री होती हैं:

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

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

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

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

Android Studio पर जाएं, Project (Gradle, Eclipse ADT वगैरह) इंपोर्ट करें और उस स्रोत कोड से starter फ़ोल्डर चुनें जिसे आपने पहले डाउनलोड किया था.

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

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

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

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

स्टार्टर ऐप्लिकेशन का स्क्रीनशॉट, जो इमेज में मौजूद चीज़ों का पता लगा सकता है

आप फ़ोन के कैमरे से फ़ोटो भी ले सकते हैं या अपनी गैलरी से कोई इमेज चुन सकते हैं और देख सकते हैं कि ऑब्जेक्ट की पहचान करने की सुविधा आपकी इमेज के साथ कैसे काम करती है.

इसके बाद, ऐप्लिकेशन को आप अपने विज़न एपीआई प्रॉडक्ट सर्च बैकएंड को भेज पाएंगे, ताकि यह पता चल सके कि खोज के नतीजे स्क्रीन पर दिखेंगे.

4. ऑब्जेक्ट चुनने का तरीका मैनेज करें

उपयोगकर्ताओं को किसी ऑब्जेक्ट पर टैप करने दें, ताकि वे उस आइटम को चुन सकें

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

इमेज से फ़ैशन के आइटम का स्क्रीनशॉट मिला

कोडलैब को आसान बनाने के लिए और मशीन लर्निंग पर फ़ोकस करने के लिए, स्टार्टर ऐप्लिकेशन में कुछ बॉयलरप्लेट Android कोड लागू किए गए हैं. इससे, आप यह जान पाएंगे कि उपयोगकर्ता ने किस ऑब्जेक्ट पर टैप किया है. मुख्य गतिविधि (ObjectDetectorActivity) में, इमेज को दिखाने वाला व्यू, असल में एक कस्टम व्यू (ImageClickableView) है. यह Android ओएस' के डिफ़ॉल्ट ImageView को बढ़ाता है. यह सुविधा, इस्तेमाल करने के कुछ सुविधाजनक तरीके लागू करता है. इनमें शामिल हैं:

• fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) यह कॉलबैक डेटा पाने का कॉलबैक है. इसमें सिर्फ़ वह ऑब्जेक्ट शामिल है जिस पर उपयोगकर्ता ने टैप किया है. काटी गई यह इमेज, प्रॉडक्ट के खोज बैकएंड पर भेजी जाएगी.

उपयोगकर्ता के पता लगाए गए ऑब्जेक्ट पर टैप करने के लिए, कोड जोड़ें.

ObjectDetectorActivity क्लास में initViews मेथड पर जाएं और मेथड के आखिर में ये लाइनें जोड़ें: (Android Studio आपको बताएगा कि startProductImageSearch वाला तरीका नहीं मिल रहा है. {चिंता न करें, आप इसे बाद में लागू करेंगे.)

// Callback received when the user taps on any of the detected objects.
ivPreview.setOnObjectClickListener { objectImage ->
    startProductImageSearch(objectImage)
}

onObjectClickListener को तब कॉल किया जाता है, जब उपयोगकर्ता स्क्रीन पर दिखाए गए किसी भी ऑब्जेक्ट पर टैप करता है. इसे काटी गई इमेज मिलती है, जिसमें सिर्फ़ चुना गया ऑब्जेक्ट होता है. उदाहरण के लिए, अगर उपयोगकर्ता दाईं ओर ड्रेस पहने हुए व्यक्ति पर टैप करता है, तो लिसनर को objectImage के साथ नीचे ट्रिगर किया जाएगा.

onObjectClickListener को पास की गई इमेज का उदाहरण

काटी गई इमेज को प्रॉडक्ट की खोज गतिविधि में भेजना

अब आप अलग-अलग गतिविधि (ProductSearchActivity) में, विज़न एपीआई प्रॉडक्ट सर्च बैकएंड को क्वेरी इमेज भेजने का तर्क लागू करेंगे.

सभी यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट पहले ही लागू कर दिए गए हैं, ताकि आप प्रॉडक्ट सर्च बैकएंड के साथ बातचीत करने के लिए कोड लिखने पर ध्यान दे सकें.

ProductSearchActivity पर यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का स्क्रीनशॉट

उपयोगकर्ता को, ProductSearchActivity की चुनी गई ऑब्जेक्ट इमेज भेजने के लिए कोड जोड़ें.

Android Studio पर वापस जाएं और यह startProductImageSearch तरीका ObjectDetectorActivity क्लास में जोड़ें:

private fun startProductImageSearch(objectImage: Bitmap) {
    try {
        // Create file based Bitmap. We use PNG to preserve the image quality
        val savedFile = createImageFile(ProductSearchActivity.CROPPED_IMAGE_FILE_NAME)
        objectImage.compress(Bitmap.CompressFormat.PNG, 100, FileOutputStream(savedFile))

        // Start the product search activity (using Vision Product Search API.).
        startActivity(
            Intent(
                    this,
                    ProductSearchActivity::class.java
            ).apply {
                // As the size limit of a bundle is 1MB, we need to save the bitmap to a file
                // and reload it in the other activity to support large query images.
                putExtra(
                    ProductSearchActivity.REQUEST_TARGET_IMAGE_PATH,
                    savedFile.absolutePath
                )
            })
    } catch (e: Exception) {
        // IO Exception, Out Of memory ....
        Toast.makeText(this, e.message, Toast.LENGTH_SHORT).show()
        Log.e(TAG, "Error starting the product image search activity.", e)
    }
}

कोड स्निपेट से तीन काम किए जा सकते हैं:

• काटी गई इमेज को लेता है और उसे PNG फ़ाइल पर क्रम से लगाता है.
• प्रॉडक्ट की खोज के क्रम को लागू करने के लिए, ProductSearchActivity शुरू करता है.
• इसमें स्टार्ट-ऐक्टिविटी इंटेंट में काटा गया चित्र यूआरआई शामिल होता है, ताकि ProductSearchActivity को फिर से क्वेरी इमेज के तौर पर इस्तेमाल करने के लिए फिर से पाया जा सके.

यहां दी गई कुछ बातों का ध्यान रखें:

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

प्रॉडक्ट की खोज गतिविधि में क्वेरी इमेज को वापस लाएं

ProductSearchActivity में, क्वेरी इमेज को फिर से पाने और स्क्रीन पर दिखाने के लिए कोड को स्टार्टर ऐप्लिकेशन में पहले ही लागू किया जा चुका है.

onCreate वाले तरीके पर जाएं और पुष्टि करें कि यह कोड पहले से ही मौजूद है:

// Receive the query image and show it on the screen
intent.getStringExtra(REQUEST_TARGET_IMAGE_PATH)?.let { absolutePath ->
    viewBinding.ivQueryImage.setImageBitmap(BitmapFactory.decodeFile(absolutePath))
}

ऐप्लिकेशन चलाएं

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

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

पक्का करें कि ProductSearchActivity उस इमेज के साथ दिखे जिस पर आपने टैप किया है. खोजें बटन अभी तक कुछ भी नहीं करता है, लेकिन हम इसे बाद में लागू करेंगे.

पता लगाए गए किसी ऑब्जेक्ट पर टैप करने के बाद, आपको उससे मिलती-जुलती स्क्रीन दिखेगी.

5. प्रॉडक्ट के खोज बैकएंड के बारे में ज़्यादा जानें

प्रॉडक्ट इमेज का खोज बैकएंड बनाना

इस कोडलैब के लिए विज़न एपीआई प्रॉडक्ट सर्च का इस्तेमाल करके प्रॉडक्ट खोज का बैकएंड बनाना ज़रूरी है. इसे पाने के दो विकल्प हैं:

पहला विकल्प: उस डेमो बैकएंड का इस्तेमाल करें जिसे आपके लिए डिप्लॉय किया गया है

आप इस कोडलैब के साथ आगे बढ़ सकते हैं. इसके लिए, प्रॉडक्ट के उस खोज बैकएंड का इस्तेमाल करें जिसे Google ने आपके लिए पहले से डिप्लॉय किया है. डेमो बैकएंड को विज़न एपीआई प्रॉडक्ट सर्च क्विकस्टार्ट के मुताबिक बार-बार दिखाया जा सकता है.

दूसरा विकल्प: Vision API प्रॉडक्ट सर्च क्विकस्टार्ट का इस्तेमाल करके अपना बैकएंड बनाना

यह विकल्प उन लोगों के लिए सुझाया जाता है जो प्रॉडक्ट खोज बैकएंड बनाने के बारे में ज़्यादा जानना चाहते हैं, ताकि आप बाद में अपने प्रॉडक्ट कैटलॉग के लिए इसे बना सकें. आपके पास ये चीज़ें होनी चाहिए:

• बिलिंग की सुविधा वाला Google Cloud खाता. (यह मुफ़्त में आज़माने की सुविधा वाला खाता हो सकता है.)
• प्रोजेक्ट, सेवा खाते वगैरह समेत Google Cloud के सिद्धांतों के बारे में कुछ जानकारी.

आप लर्निंग पाथवे में बाद में ऐसा करने का तरीका जान सकते हैं.

अहम कॉन्सेप्ट के बारे में जानें

प्रॉडक्ट के खोज बैकएंड के साथ इंटरैक्ट करते समय आपको ये सिद्धांत दिखेंगे:

• प्रॉडक्ट सेट: प्रॉडक्ट सेट, प्रॉडक्ट के ग्रुप के लिए एक आसान कंटेनर है. प्रॉडक्ट कैटलॉग को प्रॉडक्ट सेट और उसके प्रॉडक्ट के तौर पर दिखाया जा सकता है.
• प्रॉडक्ट: प्रॉडक्ट सेट बनाने के बाद, आप प्रॉडक्ट बना सकते हैं और उन्हें प्रॉडक्ट सेट में जोड़ सकते हैं.
• प्रॉडक्ट की रेफ़रंस इमेज: ये ऐसी इमेज होती हैं जिनमें आपके प्रॉडक्ट के अलग-अलग व्यू शामिल होते हैं. पहचान फ़ाइलों का इस्तेमाल, मिलते-जुलते प्रॉडक्ट को खोजने के लिए किया जाता है.
• प्रॉडक्ट खोजें: प्रॉडक्ट सेट बनाने और प्रॉडक्ट सेट को इंडेक्स करने के बाद, Cloud Vision एपीआई का इस्तेमाल करके, प्रॉडक्ट सेट की क्वेरी की जा सकती है.

पहले से तय प्रॉडक्ट कैटलॉग को समझना

इस कोडलैब में इस्तेमाल किया गया प्रॉडक्ट सर्च डेमो बैकएंड, विज़न एपीआई प्रॉडक्ट सर्च और सौ जूतों और ड्रेस इमेज के प्रॉडक्ट कैटलॉग का इस्तेमाल करके बनाया गया था. ये रही कैटलॉग की कुछ इमेज:

पहले से तय प्रॉडक्ट कैटलॉग के उदाहरण

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

प्रॉडक्ट सर्च डेमो बैकएंड को कॉल करें

आप Google Cloud API कुंजी को सेट अप करके और एपीआई कुंजी के ऐक्सेस को सिर्फ़ अपने ऐप्लिकेशन तक सीमित करके, सीधे विज़न एपीआई प्रॉडक्ट सर्च को मोबाइल ऐप्लिकेशन से कॉल कर सकते हैं.

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

• प्रॉक्सी एंडपॉइंट: https://us-central1-odml-codelabs.cloudfunctions.net/productSearch
• प्रॉक्सी व्यवहार: एक सही पुष्टि करने वाला हेडर जोड़ें और एपीआई अनुरोधों को Vision API प्रॉडक्ट सर्च बैकएंड में फ़ॉरवर्ड करें. उदाहरण के लिए, https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotate पर किए गए एपीआई कॉल को https://vision.googleapis.com/v1/images:annotate पर भेज दिया जाएगा

इस कोडलैब में, आप 3D एपीआई प्रॉडक्ट खोज के दो एपीआई इस्तेमाल करेंगे:

• projects.locations.images.annotate: सर्वर को क्वेरी इमेज भेजना और पहले से सेट प्रॉडक्ट कैटलॉग से प्रॉडक्ट की सूची पाना जो कि क्वेरी इमेज से मिलते-जुलते हैं.
• projects.locations.products.referenceImages.get: उपयोगकर्ताओं को दिखाने के लिए, ऊपर API कॉल में लौटाए गए प्रॉडक्ट की इमेज के यूआरआई पाना.

6. एपीआई क्लाइंट को लागू करना

प्रॉडक्ट की खोज के वर्कफ़्लो को समझना

बैकएंड के साथ प्रॉडक्ट खोज करने के लिए इस वर्कफ़्लो का पालन करें:

• क्वेरी इमेज को base64 स्ट्रिंग के तौर पर कोड में बदलें
• क्वेरी इमेज के साथ projects.locations.images.annotate एंडपॉइंट को कॉल करें
• पिछले एपीआई कॉल से प्रॉडक्ट इमेज के आईडी पाएं और उन्हें projects.locations.products.referenceimages.get एंडपॉइंट पर भेजें, ताकि खोज के नतीजों में प्रॉडक्ट की इमेज के यूआरआई मिल सकें.

एपीआई क्लाइंट क्लास लागू करना

अब आप #39;ProductSearchAPIClient नाम की खास क्लास में प्रॉडक्ट सर्च के बैकएंड को कॉल करने के लिए कोड लागू करेंगे. स्टार्टर ऐप्लिकेशन में आपके लिए कुछ बॉयलरप्लेट कोड लागू किए गए हैं:

• class ProductSearchAPIClient: यह क्लास अब ज़्यादातर खाली है, लेकिन इसमें कुछ ऐसे तरीके हैं जिन्हें आप इस कोडलैब में बाद में लागू करेंगे.
• fun convertBitmapToBase64(bitmap: Bitmap): प्रॉडक्ट सर्च बैकएंड को भेजने के लिए बिट मैप इंस्टेंस को उसके base64 प्रतिनिधित्व में बदलें
• fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>: projects.locations.images.annotate API को कॉल करें और जवाब को पार्स करें.
• fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>: projects.locations.products.referenceimages.get एपीआई को कॉल करें और रिस्पॉन्स को पार्स करें.
• SearchResult.kt: इस फ़ाइल में कई तरह के डेटा क्लास होते हैं. इनसे पता चलता है कि विज़न एपीआई प्रॉडक्ट सर्च बैकएंड में दिए गए टाइप किस तरह के हैं.

एपीआई कॉन्फ़िगरेशन के बारे में बताना

ProductSearchAPIClient क्लास पर जाएं और आपको प्रॉडक्ट खोज बैकएंड के कुछ कॉन्फ़िगरेशन पहले से तय दिखेंगे:

// Define the product search backend
// Option 1: Use the demo project that we have already deployed for you
const val VISION_API_URL =
    "https://us-central1-odml-codelabs.cloudfunctions.net/productSearch"
const val VISION_API_KEY = ""
const val VISION_API_PROJECT_ID = "odml-codelabs"
const val VISION_API_LOCATION_ID = "us-east1"
const val VISION_API_PRODUCT_SET_ID = "product_set0"

• VISION_API_URL, Cloud Vision एपीआई का एपीआई एंडपॉइंट है. डेमो बैकएंड के साथ आगे बढ़ने पर इसे प्रॉक्सी एंडपॉइंट पर सेट करें. हालांकि, अगर आप अपना बैकएंड डिप्लॉय करते हैं, तो आपको इसे Cloud Vision एपीआई एंडपॉइंट में बदलना होगा. https://vision.googleapis.com/v1.
• VISION_API_KEY आपके Cloud Project की एपीआई कुंजी है. प्रॉक्सी पहले से ही प्रमाणीकरण को प्रबंधित करती है, इसलिए आप इसे खाली छोड़ सकते हैं.
• VISION_API_PROJECT_ID क्लाउड प्रोजेक्ट का आईडी है. odml-codelabs वह क्लाउड प्रोजेक्ट है जहां डेमो बैकएंड को डिप्लॉय किया जाता है.
• VISION_API_LOCATION_ID वह क्लाउड जगह है जहां प्रॉडक्ट खोज बैकएंड को डिप्लॉय किया जाता है. us-east1 से हमने डेमो बैकएंड को लागू किया है.
• VISION_API_PRODUCT_SET_ID, प्रॉडक्ट कैटलॉग का आईडी (aka &कोटेशन;प्रॉडक्ट सेट&कोटेशन; Vision एपीआई शब्द में) है, जिसमें आप विज़ुअल तौर पर मिलते-जुलते प्रॉडक्ट खोजना चाहते हैं. आपके पास एक क्लाउड प्रोजेक्ट में एक से ज़्यादा कैटलॉग हो सकते हैं. product_set0 डेमो बैकएंड का प्रीसेट प्रॉडक्ट कैटलॉग है.

7. प्रॉडक्ट खोज API को कॉल करें

एपीआई अनुरोध और जवाब के फ़ॉर्मैट को एक्सप्लोर करना

आप किसी इमेज के साथ मिलते-जुलते प्रॉडक्ट खोजने के लिए, इमेज के Google Cloud Storage के यूआरएल, वेब यूआरएल या base64 कोड में बदली गई स्ट्रिंग को विज़न एपीआई प्रॉडक्ट सर्च में पास कर सकते हैं. इस कोडलैब में आप #69 कोड में बदले गए स्ट्रिंग विकल्प का इस्तेमाल करेंगे, क्योंकि हमारी क्वेरी इमेज सिर्फ़ उपयोगकर्ता के डिवाइस में मौजूद होती है.

आपको JSON फ़ाइल के इस अनुरोध के साथ, projects.locations.images.annotate एंडपॉइंट पर POST अनुरोध भेजना होगा:

{
  "requests": [
    {
      "image": {
        "content": {base64-encoded-image}
      },
      "features": [
        {
          "type": "PRODUCT_SEARCH",
          "maxResults": 5
        }
      ],
      "imageContext": {
        "productSearchParams": {
          "productSet": "projects/{project-id}/locations/{location-id}/productSets/{product-set-id}",
          "productCategories": [
               "apparel-v2"
          ],
        }
      }
    }
  ]
}

कुछ पैरामीटर कुछ खास होने चाहिए:

• base64-कोड में बदली गई इमेज: क्वेरी इमेज और #39;s बाइनरी डेटा का base64 प्रतिनिधित्व (ASCII स्ट्रिंग) है.
• project-id: आपका GCP प्रोजेक्ट आईडी.
• location-id: एक मान्य लोकेशन आइडेंटिफ़ायर.
• प्रॉडक्ट सेट आईडी: उस प्रॉडक्ट सेट का आईडी जिस पर आप कार्रवाई करना चाहते हैं.

आपके प्रॉडक्ट कैटलॉग में सिर्फ़ जूते और ड्रेस इमेज हैं. इसलिए, productकैटगरी को apparel-v2 के तौर पर तय करें. यहां v2 का मतलब है कि हम कपड़े वाले प्रॉडक्ट की खोज करने वाले मशीन लर्निंग मॉडल के दूसरे वर्शन का इस्तेमाल करते हैं.

अगर अनुरोध पूरा होता है, तो सर्वर 200 OK एचटीटीपी स्टेटस कोड और JSON फ़ॉर्मैट में रिस्पॉन्स देता है. रिस्पॉन्स JSON में ये दो तरह के नतीजे होते हैं:

• productSearchResults - इसमें पूरी इमेज के लिए मिलते-जुलते प्रॉडक्ट की सूची शामिल होती है.
• productGroupedResults - इसमें बाउंडिंग बॉक्स निर्देशांक और इमेज में पहचाने गए हर प्रॉडक्ट के लिए मेल खाने वाले आइटम शामिल होते हैं.

प्रॉडक्ट को पहले ही मूल इमेज से काट दिया गया है, इसलिए आप नतीजों को productSearchResults सूची में पार्स करेंगे.

प्रॉडक्ट खोज के नतीजे के ऑब्जेक्ट में कुछ अहम फ़ील्ड यहां दिए गए हैं:

• product.name: projects/{project-id}/locations/{location-id}/products/{product_id} के फ़ॉर्मैट में किसी प्रॉडक्ट का यूनीक आइडेंटिफ़ायर
• product.score: वैल्यू, यह दिखाती है कि खोज का नतीजा क्वेरी इमेज से कितना मिलता-जुलता है. ज़्यादा वैल्यू का मतलब है, ज़्यादा समानताएं.
• product.image: projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id} के फ़ॉर्मैट में किसी प्रॉडक्ट की पहचान इमेज का यूनीक आइडेंटिफ़ायर. आपको इस रेफ़रंस इमेज का यूआरएल पाने के लिए projects.locations.products.referenceImages.get को एक और एपीआई अनुरोध भेजना होगा, ताकि वह स्क्रीन पर दिखाई दे.
• product.labels: प्रॉडक्ट के पहले से तय किए गए टैग की सूची. यह तब कारगर होता है, जब आप कपड़ों की सिर्फ़ एक कैटगरी दिखाने के लिए, खोज के नतीजों को फ़िल्टर करना चाहते हैं.

क्वेरी इमेज को base64 में बदलना

आपको क्वेरी इमेज को उसके base64 स्ट्रिंग प्रतिनिधित्व में बदलना होगा और अनुरोध के मुख्य हिस्से में स्ट्रिंग को JSON ऑब्जेक्ट से जोड़ना होगा.

ProductSearchAPIClient क्लास पर जाएं, खाली convertBitmapToBase64 तरीका ढूंढें और उसे इस इंप्लीमेंटेशन से बदलें:

private fun convertBitmapToBase64(bitmap: Bitmap): String {
    val byteArrayOutputStream = ByteArrayOutputStream()
    bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream)
    val byteArray: ByteArray = byteArrayOutputStream.toByteArray()
    return Base64.encodeToString(byteArray, Base64.DEFAULT)
}

एपीआई कॉल को लागू करना

इसके बाद, प्रॉडक्ट के लिए खोज एपीआई का अनुरोध बनाएं और उसे बैकएंड में भेजें. आप एपीआई अनुरोध करने के लिए, वॉली का इस्तेमाल करेंगे. साथ ही, टास्क एपीआई का इस्तेमाल करके नतीजे को वापस करेंगे.

ProductSearchAPIClient क्लास पर वापस जाएं, खाली annotateImage तरीका ढूंढें और उसे इस इंप्लीमेंटेशन से बदलें:

fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>> {
    // Initialization to use the Task API
    val apiSource = TaskCompletionSource<List<ProductSearchResult>>()
    val apiTask = apiSource.task

    // Convert the query image to its Base64 representation to call the Product Search API.
    val base64: String = convertBitmapToBase64(image)

    // Craft the request body JSON.
    val requestJson = """
        {
          "requests": [
            {
              "image": {
                "content": """".trimIndent() + base64 + """"
              },
              "features": [
                {
                  "type": "PRODUCT_SEARCH",
                  "maxResults": $VISION_API_PRODUCT_MAX_RESULT
                }
              ],
              "imageContext": {
                "productSearchParams": {
                  "productSet": "projects/${VISION_API_PROJECT_ID}/locations/${VISION_API_LOCATION_ID}/productSets/${VISION_API_PRODUCT_SET_ID}",
                  "productCategories": [
                       "apparel-v2"
                     ]
                }
              }
            }
          ]
        }
    """.trimIndent()

    // Add a new request to the queue
    requestQueue.add(object :
        JsonObjectRequest(
            Method.POST,
            "$VISION_API_URL/images:annotate?key=$VISION_API_KEY",
            JSONObject(requestJson),
            { response ->
                // Parse the API JSON response to a list of ProductSearchResult object/
                val productList = apiResponseToObject(response)

                // Return the list.
                apiSource.setResult(productList)
            },
            // Return the error
            { error -> apiSource.setException(error) }
        ) {
        override fun getBodyContentType() = "application/json"
    }.apply {
        setShouldCache(false)
    })

    return apiTask
}

यूज़र इंटरफ़ेस (यूआई) पर खोज के नतीजे दिखाना

अब ProductSearchAPIClient में API कोड तैयार है. यूज़र इंटरफ़ेस (यूआई) कोड को लागू करने के लिए, ProductSearchActivity गतिविधि पर वापस जाएं.

गतिविधि में पहले से ही कुछ बॉयलरप्लेट कोड हैं, जो searchByImage(queryImage: Bitmap) तरीके को ट्रिगर करता है. बैकएंड को कॉल करने के लिए कोड जोड़ें और यूज़र इंटरफ़ेस (यूआई) पर नतीजे दिखाने के लिए इस खाली तरीके का इस्तेमाल करें.

apiClient.annotateImage(queryImage)
    .addOnSuccessListener { showSearchResult(it) }
    .addOnFailureListener { error ->
        Log.e(TAG, "Error calling Vision API Product Search.", error)
        showErrorResponse(error.localizedMessage)
    }

showSearchResult तरीके में कुछ बॉयलरप्लेट कोड होते हैं जो एपीआई के जवाब को पार्स करते हैं और उन्हें स्क्रीन पर दिखाते हैं.

इसे चलाएं

अब Android Studio टूलबार में चलाएं () पर क्लिक करें. ऐप्लिकेशन के लोड हो जाने पर, किसी भी प्रीसेट इमेज पर टैप करें, पहचानी गई कोई चीज़ चुनें, खोजें बटन पर टैप करें, और बैकएंड में लौटाए गए खोज नतीजे देखें. आपको कुछ इस तरह दिखेगा:

प्रॉडक्ट की खोज के नतीजे की स्क्रीन का स्क्रीनशॉट

बैकएंड पहले से मौजूद प्रॉडक्ट कैटलॉग से एक जैसे प्रॉडक्ट की सूची दिखाता है. हालांकि, आप देख सकते हैं कि प्रॉडक्ट की इमेज अब भी खाली है. ऐसा इसलिए है, क्योंकि projects.locations.images.annotate एंडपॉइंट सिर्फ़ projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77 जैसे प्रॉडक्ट इमेज आईडी दिखाता है. आपको projects.locations.products.referenceimages.get एंडपॉइंट पर एक और एपीआई कॉल करना होगा और स्क्रीन पर दिखाने के लिए इस रेफ़रंस इमेज का यूआरएल पाना होगा.

8. प्रॉडक्ट रेफ़रंस वाली इमेज पाना

एपीआई अनुरोध और जवाब के फ़ॉर्मैट को एक्सप्लोर करना

आप projects.locations.products.referenceImages.get एंडपॉइंट के साथ, प्रॉडक्ट की खोज के एंडपॉइंट से मिली प्रॉडक्ट इमेज के यूआरआई पाने के लिए, खाली अनुरोध के साथ जीईटी एचटीटीपी अनुरोध भेजेंगे.

एचटीटीपी अनुरोध कुछ ऐसा दिखता है:

GET $VISION_API_URL/projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77?key=$VISION_API_KEY

अगर अनुरोध पूरा हो जाता है, तो सर्वर नीचे दिए गए तरीके से 200 OK एचटीटीपी स्टेटस कोड और JSON फ़ॉर्मैट में रिस्पॉन्स देता है:

{
  "name":"projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77",
  "uri":"gs://cloud-ai-vision-data/product-search-tutorial/images/46991e7370ba11e8a1bbd20059124800.jpg"
}

• नाम: पहचान इमेज का पहचानकर्ता
• uri: Google Cloud Storage (जीसीएस) पर इमेज का यूआरआई.

डेमो प्रॉडक्ट के खोज बैकएंड की रेफ़रंस इमेज को, सार्वजनिक तौर पर पढ़ने की अनुमति देने के लिए सेट अप किया गया था. इसलिए, आप जीसीएस यूआरआई को आसानी से एचटीटीपी यूआरएल में बदल सकते हैं और उसे ऐप्लिकेशन यूज़र इंटरफ़ेस (यूआई) पर दिखा सकते हैं. आपको सिर्फ़ gs:// प्रीफ़िक्स को https://storage.googleapis.com/ से बदलना होगा.

एपीआई कॉल को लागू करना

इसके बाद, प्रॉडक्ट के लिए खोज एपीआई का अनुरोध बनाएं और उसे बैकएंड में भेजें. आप वॉली और टास्क एपीआई का इस्तेमाल प्रॉडक्ट खोज एपीआई कॉल की तरह ही करेंगे.

ProductSearchAPIClient क्लास पर वापस जाएं, खाली fetchReferenceImage तरीका ढूंढें और उसे इस इंप्लीमेंटेशन से बदलें:

private fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult> {
    // Initialization to use the Task API
    val apiSource = TaskCompletionSource<ProductSearchResult>()
    val apiTask = apiSource.task

    // Craft the API request to get details about the reference image of the product
    val stringRequest = object : StringRequest(
        Method.GET,
        "$VISION_API_URL/${searchResult.imageId}?key=$VISION_API_KEY",
        { response ->
            val responseJson = JSONObject(response)
            val gcsUri = responseJson.getString("uri")

            // Convert the GCS URL to its HTTPS representation
            val httpUri = gcsUri.replace("gs://", "https://storage.googleapis.com/")

            // Save the HTTPS URL to the search result object
            searchResult.imageUri = httpUri

            // Invoke the listener to continue with processing the API response (eg. show on UI)
            apiSource.setResult(searchResult)
        },
        { error -> apiSource.setException(error) }
    ) {

        override fun getBodyContentType(): String {
            return "application/json; charset=utf-8"
        }
    }
    Log.d(ProductSearchActivity.TAG, "Sending API request.")

    // Add the request to the RequestQueue.
    requestQueue.add(stringRequest)

    return apiTask
}

इस तरीके से searchResult: ProductSearchResult ऑब्जेक्ट का इस्तेमाल किया जाता है, जो प्रॉडक्ट के खोज एंडपॉइंट से मिलता है. इसके बाद, यह तरीका अपनाया जाता है:

1. रेफ़रंस इमेज का GCS (जीसीएस) यूआरआई पाने के लिए, रेफ़रंस इमेज एंडपॉइंट को कॉल करता है.
2. GCS यूआरआई को एक एचटीटीपी यूआरएल में बदलता है.
3. searchResult ऑब्जेक्ट की httpUri प्रॉपर्टी को इस एचटीटीपी यूआरएल से अपडेट करता है.

दो एपीआई अनुरोधों को जोड़ना

ProductSearchResult पर वापस जाने से पहले annotateImage पर वापस जाएं और सभी रेफ़रंस इमेज और #39; एचटीटीपी यूआरएल पाने के लिए, अपने यूआरएल में बदलाव करें.

यह लाइन ढूंढें:

// Return the list.
apiSource.setResult(productList)

इसके बाद, इसे इस इंप्लीमेंटेशन से बदलें:

// Loop through the product list and create tasks to load reference images.
// We will call the projects.locations.products.referenceImages.get endpoint
// for each product.
val fetchReferenceImageTasks = productList.map { fetchReferenceImage(it) }

// When all reference image fetches have completed,
// return the ProductSearchResult list
Tasks.whenAllComplete(fetchReferenceImageTasks)
    // Return the list of ProductSearchResult with product images' HTTP URLs.
    .addOnSuccessListener { apiSource.setResult(productList) }
    // An error occurred so returns it to the caller.
    .addOnFailureListener { apiSource.setException(it) }

स्क्रीन पर रेफ़रंस इमेज दिखाने के लिए बॉयलरप्लेट कोड आपके लिए ProductSearchAdapter क्लास में पहले ही लागू किया जा चुका है, ताकि आप ऐप्लिकेशन को फिर से चलाने के लिए आगे बढ़ सकें.

इसे चलाएं

अब Android Studio टूलबार में चलाएं ( ) पर क्लिक करें. ऐप्लिकेशन लोड होने के बाद, पहले से तय की गई किसी इमेज पर टैप करें, पहचानी गई कोई चीज़ चुनें, खोज के नतीजे देखने के लिए खोजें बटन पर टैप करें, इस बार प्रॉडक्ट इमेज के साथ ऐसा करें.

क्या प्रॉडक्ट के लिए खोज नतीजे आपके लिए सही हैं?

9. बधाई हो!

आपने Android ऐप्लिकेशन में प्रॉडक्ट की इमेज खोजने की सुविधा जोड़ने के लिए, विज़न एपीआई प्रॉडक्ट सर्च बैकएंड को कॉल करने का तरीका सीखा है. इसे शुरू करने के लिए, आपको बस इतना ही करना है!

आगे बढ़ने के साथ-साथ, आप अपने प्रॉडक्ट कैटलॉग का इस्तेमाल करके अपना बैकएंड बना सकते हैं. प्रॉडक्ट इमेज सर्च लर्निंग पाथवे में अगला कोडलैब देखें. इससे आप खुद का बैकएंड बना सकते हैं. साथ ही, इसे मोबाइल ऐप्लिकेशन से कॉल करने के लिए, एपीआई कुंजी सेट अप कर सकते हैं.

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

• किसी Android ऐप्लिकेशन से Vision API प्रॉडक्ट खोज बैकएंड को कॉल करने का तरीका

अगले चरण

• खुद का बैकएंड बनाने का तरीका जानने के लिए, विज़न एपीआई प्रॉडक्ट सर्च की मदद से प्रॉडक्ट इमेज के लिए खोज बैकएंड बनाना कोडलैब देखें.
• डिवाइस पर मौजूद मशीन लर्निंग वेबसाइट में लर्निंग पाथवे देखें
• अपने Android ऐप्लिकेशन में प्रॉडक्ट की खोज सुविधा बनाएं

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

• https://cloud.google.com/vision/product-search/docs