অ্যান্ড্রয়েডে কল ভিশন API পণ্য অনুসন্ধান ব্যাকএন্ড

1. আপনি শুরু করার আগে

bd8c01b2f8013c6d.png

আপনি কি গুগল লেন্সের ডেমো দেখেছেন, যেখানে আপনি আপনার ফোনের ক্যামেরাকে একটি বস্তুর দিকে নির্দেশ করতে পারেন এবং আপনি এটি অনলাইনে কোথায় কিনতে পারেন তা খুঁজে পেতে পারেন? আপনি যদি আপনার অ্যাপে একই বৈশিষ্ট্য যুক্ত করতে পারেন তা শিখতে চান, তাহলে এই কোডল্যাবটি আপনার জন্য। এটি একটি শেখার পথের অংশ যা আপনাকে শেখায় কিভাবে একটি মোবাইল অ্যাপে একটি পণ্য চিত্র অনুসন্ধান বৈশিষ্ট্য তৈরি করতে হয়৷

এই কোডল্যাবে, আপনি শিখবেন কিভাবে একটি মোবাইল অ্যাপ থেকে Vision API প্রোডাক্ট সার্চ দিয়ে তৈরি একটি ব্যাকএন্ড কল করতে হয়। এই ব্যাকএন্ডটি একটি ক্যোয়ারী ইমেজ নিতে পারে এবং একটি পণ্যের ক্যাটালগ থেকে দৃশ্যত অনুরূপ পণ্যগুলির জন্য অনুসন্ধান করতে পারে।

আপনি একটি ভিজ্যুয়াল প্রোডাক্ট সার্চ ফিচার তৈরির বাকি ধাপগুলি সম্পর্কে জানতে পারবেন, যার মধ্যে রয়েছে কীভাবে এমএল কিট অবজেক্ট ডিটেকশন এবং ট্র্যাকিং ব্যবহার করে ক্যোয়ারী ইমেজে অবজেক্ট শনাক্ত করতে হয় এবং ব্যবহারকারীদের শেখার পথে তারা কোন পণ্যটি খুঁজতে চান তা বেছে নিতে দেয়।

আপনি কি নির্মাণ করবেন

  • এই কোডল্যাবে, আপনি Android অ্যাপ দিয়ে শুরু করেন যা একটি ইনপুট ইমেজ থেকে বস্তু সনাক্ত করতে পারে। ব্যবহারকারী যে বস্তুটি বেছে নেয় সেটি নিতে আপনি কোড লিখবেন, পণ্য অনুসন্ধান ব্যাকএন্ডে পাঠাবেন এবং স্ক্রীনে অনুসন্ধান ফলাফল প্রদর্শন করবেন।
  • শেষ পর্যন্ত, আপনি ডানদিকে ইমেজ অনুরূপ কিছু দেখতে হবে.

আপনি কি শিখবেন

  • একটি অ্যান্ড্রয়েড অ্যাপ থেকে ভিশন API প্রোডাক্ট সার্চ API-এর প্রতিক্রিয়া কীভাবে কল এবং পার্স করবেন

আপনি কি প্রয়োজন হবে

  • অ্যান্ড্রয়েড স্টুডিওর একটি সাম্প্রতিক সংস্করণ (v4.1.2+)
  • অ্যান্ড্রয়েড স্টুডিও এমুলেটর বা একটি শারীরিক অ্যান্ড্রয়েড ডিভাইস
  • নমুনা কোড
  • কোটলিনে অ্যান্ড্রয়েড বিকাশের প্রাথমিক জ্ঞান

এই কোডল্যাব দৃষ্টি এপিআই পণ্য অনুসন্ধান উপর দৃষ্টি নিবদ্ধ করা হয়. অ-প্রাসঙ্গিক ধারণা এবং কোড ব্লকগুলি অন্বেষণ করা হয় না এবং আপনাকে কেবল অনুলিপি এবং পেস্ট করার জন্য সরবরাহ করা হয়।

2. ভিশন API পণ্য অনুসন্ধান সম্পর্কে

ভিশন API পণ্য অনুসন্ধান হল Google ক্লাউডের একটি বৈশিষ্ট্য যা ব্যবহারকারীদের একটি পণ্য ক্যাটালগ থেকে দৃশ্যমান অনুরূপ পণ্য অনুসন্ধান করতে দেয়। খুচরা বিক্রেতারা পণ্য তৈরি করতে পারে, যার প্রতিটিতে রেফারেন্স চিত্র রয়েছে যা দৃষ্টিভঙ্গির একটি সেট থেকে পণ্যটিকে দৃশ্যত বর্ণনা করে। তারপরে আপনি এই পণ্যগুলিকে পণ্য সেটগুলিতে যুক্ত করতে পারেন (যেমন পণ্যের ক্যাটালগ)। বর্তমানে ভিশন API পণ্য অনুসন্ধান নিম্নলিখিত পণ্য বিভাগগুলিকে সমর্থন করে: বাড়ির পণ্য, পোশাক, খেলনা, প্যাকেজ করা পণ্য এবং সাধারণ৷

যখন ব্যবহারকারীরা তাদের নিজস্ব ছবি দিয়ে প্রোডাক্ট সেটের বিষয়ে প্রশ্ন করে, তখন ভিশন API প্রোডাক্ট সার্চ ব্যবহারকারীর কোয়েরি ইমেজে থাকা প্রোডাক্টটিকে খুচরা বিক্রেতার প্রোডাক্ট সেটের ছবিগুলির সাথে তুলনা করার জন্য মেশিন লার্নিং প্রয়োগ করে, এবং তারপর দৃশ্যত এবং শব্দার্থগতভাবে অনুরূপ ফলাফলের একটি র‌্যাঙ্ক করা তালিকা প্রদান করে।

3. স্টার্টার অ্যাপটি ডাউনলোড করুন এবং চালান

কোডটি ডাউনলোড করুন

এই কোডল্যাবের সমস্ত কোড ডাউনলোড করতে নিম্নলিখিত লিঙ্কে ক্লিক করুন:

ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন। এটি আপনার প্রয়োজনীয় সমস্ত সংস্থান সহ একটি রুট ফোল্ডার ( odml-pathways-main ) আনপ্যাক করবে। এই কোডল্যাবের জন্য, আপনার শুধুমাত্র product-search/codelab2/android সাবডিরেক্টরিতে উৎসের প্রয়োজন হবে।

odml-pathways সংগ্রহস্থলের codelab2 সাবডিরেক্টরিতে দুটি ডিরেক্টরি রয়েছে:

  • android_studio_folder.png starter — এই কোডল্যাবের জন্য আপনি যে স্টার্টিং কোড তৈরি করেন।
  • android_studio_folder.png চূড়ান্ত — সমাপ্ত নমুনা অ্যাপের জন্য সম্পূর্ণ কোড।

এখানে স্টার্টার অ্যাপটি এমন একটি যা আপনি একটি ভিজ্যুয়াল প্রোডাক্ট সার্চ তৈরি করতে ছবিতে ডিটেক্ট অবজেক্টে তৈরি করেছেন: অ্যান্ড্রয়েড কোডল্যাব। এটি এমএল কিট অবজেক্ট ডিটেকশন এবং ট্র্যাকিং ব্যবহার করে একটি ইমেজ থেকে অবজেক্ট সনাক্ত করতে এবং সেগুলিকে স্ক্রিনে দেখায়।

অ্যান্ড্রয়েড স্টুডিওতে অ্যাপটি আমদানি করুন

অ্যান্ড্রয়েড স্টুডিওতে স্টার্টার অ্যাপ আমদানি করে শুরু করুন।

অ্যান্ড্রয়েড স্টুডিওতে যান, ইমপোর্ট প্রজেক্ট (গ্র্যাডল, ইক্লিপস এডিটি, ইত্যাদি) নির্বাচন করুন এবং আপনি আগে ডাউনলোড করা সোর্স কোড থেকে starter ফোল্ডারটি বেছে নিন।

7c0f27882a2698ac.png

স্টার্টার অ্যাপটি চালান

এখন আপনি অ্যান্ড্রয়েড স্টুডিওতে প্রকল্পটি আমদানি করেছেন, আপনি প্রথমবারের জন্য অ্যাপটি চালানোর জন্য প্রস্তুত৷ ইউএসবি এর মাধ্যমে আপনার অ্যান্ড্রয়েড ডিভাইসটিকে আপনার হোস্টের সাথে সংযুক্ত করুন বা অ্যান্ড্রয়েড স্টুডিও এমুলেটর শুরু করুন এবং রান ক্লিক করুন ( execute.png ) অ্যান্ড্রয়েড স্টুডিও টুলবারে।

(যদি এই বোতামটি অক্ষম করা থাকে, তবে নিশ্চিত করুন যে আপনি শুধুমাত্র starter/app/build.gradle আমদানি করেছেন, সম্পূর্ণ সংগ্রহস্থল নয়।)

এখন অ্যাপটি আপনার অ্যান্ড্রয়েড ডিভাইসে চালু হওয়া উচিত। এটিতে ইতিমধ্যেই অবজেক্ট শনাক্ত করার ক্ষমতা রয়েছে: চিত্র থেকে ফ্যাশন আইটেমগুলি সনাক্ত করা এবং সেগুলি কোথায় রয়েছে তা আপনাকে দেখায়৷ নিশ্চিত করতে প্রিসেট ফটো দিয়ে চেষ্টা করুন।

c6102a808fdfcb11.png

স্টার্টার অ্যাপের স্ক্রিনশট যা একটি ছবিতে বস্তু সনাক্ত করতে পারে

এর পরে, আপনি সনাক্ত করা বস্তুগুলিকে ভিশন API পণ্য অনুসন্ধান ব্যাকএন্ডে পাঠাতে এবং স্ক্রিনে অনুসন্ধানের ফলাফলগুলি দেখাতে অ্যাপ্লিকেশনটিকে প্রসারিত করবেন।

4. বস্তু নির্বাচন পরিচালনা করুন

ব্যবহারকারীদের নির্বাচন করার জন্য একটি শনাক্ত করা বস্তুতে ট্যাপ করার অনুমতি দিন

এখন আপনি ব্যবহারকারীদের ছবি থেকে একটি বস্তু নির্বাচন করতে এবং পণ্য অনুসন্ধান শুরু করার অনুমতি দেওয়ার জন্য কোড যোগ করবেন। স্টার্টার অ্যাপটির ইতিমধ্যেই ছবিতে থাকা বস্তু শনাক্ত করার ক্ষমতা রয়েছে। এটা সম্ভব যে ছবিতে একাধিক অবজেক্ট আছে, অথবা শনাক্ত করা বস্তুটি শুধুমাত্র ছবির একটি ছোট অংশ দখল করে আছে। অতএব, পণ্য অনুসন্ধানের জন্য তারা কোন বস্তুটি ব্যবহার করতে চায় তা নির্দেশ করার জন্য আপনাকে সনাক্ত করা বস্তুগুলির একটিতে ব্যবহারকারীকে ট্যাপ করতে হবে।

9cdfcead6d95a87.png

চিত্র থেকে শনাক্ত করা ফ্যাশন আইটেমগুলির একটি স্ক্রিনশট

কোডল্যাবটিকে সহজ রাখতে এবং মেশিন লার্নিং-এ ফোকাস করার জন্য কিছু বয়লারপ্লেট অ্যান্ড্রয়েড কোড স্টার্টার অ্যাপে প্রয়োগ করা হয়েছে যাতে ব্যবহারকারী কোন বস্তুতে ট্যাপ করেছে তা শনাক্ত করতে সাহায্য করে। যে ভিউটি মূল অ্যাক্টিভিটি ( ObjectDetectorActivity ) এ ইমেজ প্রদর্শন করে তা আসলে একটি কাস্টম ভিউ ( ImageClickableView ) যা Android OS এর ডিফল্ট ImageView প্রসারিত করে। এটি কিছু সুবিধাজনক ইউটিলিটি পদ্ধতি প্রয়োগ করে, যার মধ্যে রয়েছে:

  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) এটি একটি কলব্যাক যা ক্রপ করা ইমেজ প্রাপ্ত করার জন্য যাতে ব্যবহারকারীর ট্যাপ করা বস্তুটিই থাকে। আপনি পণ্য অনুসন্ধান ব্যাকএন্ডে এই ক্রপ করা ছবি পাঠাবেন।

সনাক্ত করা বস্তুর উপর একটি ব্যবহারকারী ট্যাপ পরিচালনা করতে কোড যোগ করুন।

ObjectDetectorActivity ক্লাসে initViews পদ্ধতিতে যান এবং পদ্ধতির শেষে এই লাইনগুলি যোগ করুন: (Android স্টুডিও আপনাকে বলবে যে এটি startProductImageSearch পদ্ধতিটি খুঁজে পাচ্ছে না। চিন্তা করবেন না, আপনি এটি একটু পরে বাস্তবায়ন করবেন।)

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

onObjectClickListener বলা হয় যখনই ব্যবহারকারী স্ক্রিনে শনাক্ত করা কোনো বস্তুতে ট্যাপ করে। এটি কেবলমাত্র নির্বাচিত বস্তু ধারণ করে ক্রপ করা চিত্র গ্রহণ করে। উদাহরণস্বরূপ, যদি ব্যবহারকারী ডানদিকে পোশাক পরা ব্যক্তির উপর ট্যাপ করে, তাহলে শ্রোতা নীচের মত objectImage দিয়ে ট্রিগার হবে।

9cac8458d0f326e6.png

onObjectClickListener-এ পাস করা ক্রপ করা ছবির একটি উদাহরণ

পণ্য অনুসন্ধান কার্যকলাপে ক্রপ করা ছবি পাঠান

এখন আপনি একটি পৃথক কার্যকলাপে ( ProductSearchActivity ) ভিশন API পণ্য অনুসন্ধান ব্যাকএন্ডে ক্যোয়ারী ইমেজ পাঠানোর যুক্তি প্রয়োগ করবেন।

সমস্ত UI উপাদানগুলি আগাম প্রয়োগ করা হয়েছে যাতে আপনি পণ্য অনুসন্ধান ব্যাকএন্ডের সাথে যোগাযোগ করতে কোড লেখার উপর ফোকাস করতে পারেন৷

25939f5a13eeb3c3.png

ProductSearchActivity-এ UI উপাদানগুলির একটি স্ক্রিনশট৷

ব্যবহারকারী পণ্য অনুসন্ধান কার্যকলাপে নির্বাচিত ProductSearchActivity ছবি পাঠাতে কোড যোগ করুন।

Android স্টুডিওতে ফিরে যান এবং ObjectDetectorActivity ক্লাসে এই startProductImageSearch পদ্ধতিটি যোগ করুন:

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)
    }
}

কোড স্নিপেট 3টি জিনিস করে:

  • ক্রপ করা ইমেজটি নেয় এবং এটিকে একটি PNG ফাইলে সিরিয়ালাইজ করে।
  • পণ্য অনুসন্ধান ক্রম চালানোর জন্য ProductSearchActivity শুরু করে।
  • স্টার্ট-অ্যাক্টিভিটি অভিপ্রায়ে ক্রপ করা ইমেজ URI অন্তর্ভুক্ত করে যাতে ProductSearchActivity পরে ক্যোয়ারী ইমেজ হিসেবে ব্যবহার করার জন্য এটি পুনরুদ্ধার করতে পারে।

মনে রাখতে কিছু জিনিস আছে:

  • অবজেক্ট সনাক্তকরণ এবং ব্যাকএন্ড অনুসন্ধানের যুক্তিটিকে শুধুমাত্র কোডল্যাব বোঝা সহজ করার জন্য 2টি কার্যকলাপে বিভক্ত করা হয়েছে। আপনার অ্যাপে সেগুলি কীভাবে প্রয়োগ করবেন তা সিদ্ধান্ত নেওয়া আপনার উপরে।
  • আপনাকে একটি ফাইলে ক্যোয়ারী ইমেজ লিখতে হবে এবং ক্রিয়াকলাপের মধ্যে ইমেজ ইউআরআই পাস করতে হবে কারণ ক্যোয়ারী ইমেজটি একটি অ্যান্ড্রয়েড উদ্দেশ্যের 1MB সাইজের সীমার চেয়ে বড় হতে পারে।
  • আপনি ক্যোয়ারী ইমেজ 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))
}

অ্যাপটি চালান

এখন রান ক্লিক করুন ( execute.png ) অ্যান্ড্রয়েড স্টুডিও টুলবারে।

একবার অ্যাপ লোড হয়ে গেলে, যেকোন প্রিসেট ইমেজে আলতো চাপুন এবং শনাক্ত করা অবজেক্টগুলির মধ্যে একটি নির্বাচন করুন।

আপনি যে ProductSearchActivity ট্যাপ করেছেন তার সাথে প্রোডাক্ট সার্চ অ্যাক্টিভিটি দেখা যাচ্ছে তা নিশ্চিত করুন। অনুসন্ধান বোতামটি এখনও কিছু করে না তবে আমরা পরবর্তীতে এটি বাস্তবায়ন করব।

fed40f81b8b43801.png

শনাক্ত করা বস্তুগুলির একটিতে ট্যাপ করার পরে আপনার একটি অনুরূপ স্ক্রীন দেখতে হবে।

5. পণ্য অনুসন্ধান ব্যাকএন্ড অন্বেষণ

পণ্য চিত্র অনুসন্ধান ব্যাকএন্ড তৈরি করুন

এই কোডল্যাবের জন্য ভিশন API পণ্য অনুসন্ধানের সাথে নির্মিত একটি পণ্য অনুসন্ধান ব্যাকএন্ড প্রয়োজন। এটি অর্জন করার জন্য দুটি বিকল্প রয়েছে:

বিকল্প 1: আপনার জন্য স্থাপন করা হয়েছে যে ডেমো ব্যাকএন্ড ব্যবহার করুন

আপনি পণ্য অনুসন্ধান ব্যাকএন্ড ব্যবহার করে এই কোডল্যাবের সাথে এগিয়ে যেতে পারেন যা Google ইতিমধ্যে আপনার জন্য স্থাপন করেছে৷ ভিশন API প্রোডাক্ট সার্চ কুইকস্টার্ট অনুসরণ করে ডেমো ব্যাকএন্ড প্রতিলিপি করা যেতে পারে।

বিকল্প 2: ভিশন API পণ্য অনুসন্ধান কুইকস্টার্ট অনুসরণ করে আপনার নিজস্ব ব্যাকএন্ড তৈরি করুন

এই বিকল্পটি তাদের জন্য সুপারিশ করা হয় যারা একটি পণ্য অনুসন্ধান ব্যাকএন্ড কীভাবে তৈরি করতে হয় সে সম্পর্কে গভীরভাবে শিখতে চান যাতে আপনি পরে আপনার নিজের পণ্য ক্যাটালগের জন্য একটি তৈরি করতে পারেন। তোমার থাকা দরকার:

  • বিলিং সক্ষম সহ একটি Google ক্লাউড অ্যাকাউন্ট৷ (এটি একটি বিনামূল্যের ট্রায়াল অ্যাকাউন্ট হতে পারে।)
  • প্রোজেক্ট, সার্ভিস অ্যাকাউন্ট ইত্যাদি সহ Google ক্লাউড ধারণা সম্পর্কে কিছু জ্ঞান।

আপনি শেখার পথে এটি কীভাবে করবেন তা পরে শিখতে পারেন।

গুরুত্বপূর্ণ ধারণা শিখুন

পণ্য অনুসন্ধান ব্যাকএন্ডের সাথে ইন্টারঅ্যাক্ট করার সময় আপনি এই ধারণাগুলি দেখতে পাবেন:

  • পণ্য সেট : একটি পণ্য সেট পণ্যগুলির একটি গ্রুপের জন্য একটি সাধারণ ধারক। একটি পণ্য ক্যাটালগ একটি পণ্য সেট এবং তার পণ্য হিসাবে প্রতিনিধিত্ব করা যেতে পারে।
  • পণ্য : আপনি একটি পণ্য সেট তৈরি করার পরে, আপনি পণ্য তৈরি করতে পারেন এবং পণ্য সেটে যোগ করতে পারেন।
  • প্রোডাক্টের রেফারেন্স ইমেজ : এগুলি আপনার প্রোডাক্টের বিভিন্ন ভিউ সম্বলিত ছবি। রেফারেন্স ইমেজ চাক্ষুষরূপে অনুরূপ পণ্য অনুসন্ধান করতে ব্যবহার করা হয়.
  • পণ্যগুলির জন্য অনুসন্ধান করুন : একবার আপনি আপনার পণ্য সেট তৈরি করে নিলে এবং পণ্য সেটটি ইন্ডেক্স করা হয়ে গেলে, আপনি ক্লাউড ভিশন API ব্যবহার করে পণ্য সেটটি জিজ্ঞাসা করতে পারেন৷

প্রিসেট পণ্য ক্যাটালগ বুঝুন

এই কোডল্যাবে ব্যবহৃত পণ্য অনুসন্ধান ডেমো ব্যাকএন্ডটি ভিশন API পণ্য অনুসন্ধান এবং প্রায় একশত জুতা এবং পোশাকের চিত্রগুলির একটি পণ্য ক্যাটালগ ব্যবহার করে তৈরি করা হয়েছিল। এখানে ক্যাটালগ থেকে কিছু ছবি আছে:

4f1a8507b74ab178.png79a5fc6c829eca77.png3528c872f813826e.png

প্রিসেট পণ্য ক্যাটালগ থেকে উদাহরণ

পণ্য অনুসন্ধান ডেমো ব্যাকএন্ড কল

আপনি একটি Google ক্লাউড API কী সেট আপ করে এবং শুধুমাত্র আপনার অ্যাপে API কী অ্যাক্সেস সীমাবদ্ধ করে একটি মোবাইল অ্যাপ থেকে সরাসরি ভিশন API পণ্য অনুসন্ধানে কল করতে পারেন।

এই কোডল্যাবটিকে সহজ রাখার জন্য, একটি প্রক্সি এন্ডপয়েন্ট সেট আপ করা হয়েছে যা আপনাকে API কী এবং প্রমাণীকরণ সম্পর্কে চিন্তা না করেই ডেমো ব্যাকএন্ড অ্যাক্সেস করতে দেয়। এটি মোবাইল অ্যাপ থেকে HTTP অনুরোধ গ্রহণ করে, API কী যুক্ত করে এবং অনুরোধটিকে ভিশন API পণ্য অনুসন্ধান ব্যাকএন্ডে ফরোয়ার্ড করে। তারপর প্রক্সি ব্যাকএন্ড থেকে প্রতিক্রিয়া গ্রহণ করে এবং মোবাইল অ্যাপে ফেরত দেয়।

এই কোডল্যাবে, আপনি ভিশন API পণ্য অনুসন্ধানের দুটি API ব্যবহার করবেন:

  • projects.locations.images.annotate : সার্ভারে ক্যোয়ারী ইমেজ পাঠানো এবং একটি প্রিসেট প্রোডাক্ট ক্যাটালগ থেকে প্রোডাক্টের একটি তালিকা প্রাপ্ত করা যা দৃশ্যত কোয়েরি ইমেজের মতো।
  • projects.locations.products.referenceImages.get : ব্যবহারকারীদের কাছে প্রদর্শনের জন্য উপরের API কলে ফিরে আসা পণ্যের চিত্রগুলির URI প্রাপ্ত করা।

6. API ক্লায়েন্ট বাস্তবায়ন করুন

পণ্য অনুসন্ধান কর্মপ্রবাহ বুঝতে

ব্যাকএন্ড সহ পণ্য অনুসন্ধান পরিচালনা করতে এই কর্মপ্রবাহ অনুসরণ করুন:

  • একটি বেস64 স্ট্রিং হিসাবে ক্যোয়ারী ইমেজ এনকোড করুন
  • ক্যোয়ারী ইমেজ সহ projects.locations.images.annotate এন্ডপয়েন্টে কল করুন
  • পূর্ববর্তী API কল থেকে পণ্যের চিত্র আইডিগুলি গ্রহণ করুন এবং অনুসন্ধানের ফলাফলে পণ্যের চিত্রগুলির URI পেতে projects.locations.products.referenceImages.get এন্ডপয়েন্টে পাঠান৷

API ক্লায়েন্ট ক্লাস বাস্তবায়ন করুন

এখন আপনি 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 API কল করুন এবং প্রতিক্রিয়া পার্স করুন।
  • SearchResult.kt : ভিশন API পণ্য অনুসন্ধান ব্যাকএন্ড দ্বারা প্রত্যাবর্তিত প্রকারগুলিকে উপস্থাপন করার জন্য এই ফাইলটিতে বেশ কয়েকটি ডেটা ক্লাস রয়েছে।

API কনফিগারেশন নির্দিষ্ট করুন

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 হল ক্লাউড ভিশন API-এর API এন্ডপয়েন্ট। আপনি ডেমো ব্যাকএন্ডের সাথে এগিয়ে যাওয়ার সাথে সাথে এটিকে প্রক্সি এন্ডপয়েন্টে সেট করুন। যাইহোক, আপনি যদি নিজের ব্যাকএন্ড স্থাপন করেন, তাহলে আপনাকে এটিকে ক্লাউড ভিশন API এন্ডপয়েন্টে পরিবর্তন করতে হবে। https://vision.googleapis.com/v1
  • VISION_API_KEY হল আপনার ক্লাউড প্রকল্পের API কী৷ যেহেতু প্রক্সি ইতিমধ্যেই প্রমাণীকরণ পরিচালনা করে, আপনি এটি ফাঁকা রাখতে পারেন।
  • VISION_API_PROJECT_ID হল ক্লাউড প্রকল্প আইডি। odml-codelabs হল ক্লাউড প্রকল্প যেখানে ডেমো ব্যাকএন্ড স্থাপন করা হয়।
  • VISION_API_LOCATION_ID হল ক্লাউডের অবস্থান যেখানে পণ্য অনুসন্ধান ব্যাকএন্ড স্থাপন করা হয়। us-east1 হল যেখানে আমরা ডেমো ব্যাকএন্ড স্থাপন করেছি।
  • VISION_API_PRODUCT_SET_ID হল পণ্য ক্যাটালগের আইডি (উরফে "পণ্য সেট" ভিশন এপিআই পদে) যেখানে আপনি দৃশ্যত অনুরূপ পণ্যগুলির জন্য অনুসন্ধান করতে চান৷ আপনার একটি ক্লাউড প্রকল্পে একাধিক ক্যাটালগ থাকতে পারে। product_set0 হল ডেমো ব্যাকএন্ডের প্রিসেট প্রোডাক্ট ক্যাটালগ।

7. পণ্য অনুসন্ধান API কল করুন

API অনুরোধ এবং প্রতিক্রিয়া বিন্যাস অন্বেষণ করুন

আপনি চিত্রের Google ক্লাউড স্টোরেজ ইউআরআই, ওয়েব ইউআরএল, বা ভিশন API পণ্য অনুসন্ধানে বেস64 এনকোডেড স্ট্রিং পাস করে প্রদত্ত চিত্রের অনুরূপ পণ্যগুলি খুঁজে পেতে পারেন। এই কোডল্যাবে, আপনি base64 এনকোডেড স্ট্রিং বিকল্পটি ব্যবহার করবেন, কারণ আমাদের ক্যোয়ারী ইমেজ শুধুমাত্র ব্যবহারকারীর ডিভাইসে বিদ্যমান।

এই অনুরোধ 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-এনকোডেড-ইমেজ : কোয়েরি ইমেজের বাইনারি ডেটার বেস64 উপস্থাপনা (ASCII স্ট্রিং)।
  • প্রোজেক্ট-আইডি : আপনার জিসিপি প্রোজেক্ট আইডি।
  • অবস্থান-আইডি : একটি বৈধ অবস্থান শনাক্তকারী।
  • product-set-id : আপনি যে পণ্য সেটটিতে অপারেশন চালাতে চান তার আইডি।

যেহেতু আপনার পণ্যের ক্যাটালগে শুধুমাত্র জুতা এবং পোশাকের ছবি রয়েছে, তাই পোশাক- apparel-v2 হতে পণ্যের বিভাগগুলি নির্দিষ্ট করুন। v2 এর অর্থ হল আমরা পোশাক পণ্য অনুসন্ধান মেশিন লার্নিং মডেলের সংস্করণ 2 ব্যবহার করি।

অনুরোধ সফল হলে, সার্ভার একটি 200 ওকে HTTP স্ট্যাটাস কোড এবং JSON ফর্ম্যাটে প্রতিক্রিয়া প্রদান করে। প্রতিক্রিয়া JSON নিম্নলিখিত দুটি ফলাফল প্রকার অন্তর্ভুক্ত করে:

  • পণ্য অনুসন্ধানের ফলাফল - সমগ্র চিত্রের জন্য মিলে যাওয়া পণ্যগুলির একটি তালিকা রয়েছে৷
  • productGroupedResults - ছবিতে চিহ্নিত প্রতিটি পণ্যের জন্য বাউন্ডিং বক্স স্থানাঙ্ক এবং ম্যাচিং আইটেম রয়েছে।

যেহেতু পণ্যটি ইতিমধ্যেই মূল চিত্র থেকে ক্রপ করা হয়েছে, আপনি পণ্য অনুসন্ধান ফলাফল তালিকায় ফলাফল বিশ্লেষণ করবেন।

এখানে পণ্য অনুসন্ধান ফলাফল বস্তুর কিছু গুরুত্বপূর্ণ ক্ষেত্র আছে:

  • 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} ফর্ম্যাটে একটি পণ্যের রেফারেন্স চিত্রের অনন্য শনাক্তকারী। এই রেফারেন্স ইমেজটির URL পেতে আপনাকে projects.locations.products.referenceImages.get- এ আরেকটি API অনুরোধ পাঠাতে হবে যাতে এটি স্ক্রিনে প্রদর্শিত হয়।
  • 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)
}

API কল বাস্তবায়ন করুন

এরপরে, একটি পণ্য অনুসন্ধান API অনুরোধ তৈরি করুন এবং এটি ব্যাকএন্ডে পাঠান। আপনি API অনুরোধ করতে ভলি ব্যবহার করবেন এবং টাস্ক API ব্যবহার করে ফলাফলটি ফেরত দেবেন।

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
}

UI এ অনুসন্ধান ফলাফল দেখান

এখন ProductSearchAPIClient-এ API কোড প্রস্তুত। UI কোড প্রয়োগ করতে কার্যকলাপ ProductSearchActivity এ ফিরে যান।

কার্যকলাপে ইতিমধ্যে কিছু বয়লারপ্লেট কোড রয়েছে যা searchByImage(queryImage: Bitmap) পদ্ধতিতে ট্রিগার করে। ব্যাকএন্ডে কল করতে কোড যোগ করুন এবং এই বর্তমানে খালি পদ্ধতিতে UI-তে ফলাফল দেখান।

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

showSearchResult পদ্ধতিতে কিছু বয়লারপ্লেট কোড রয়েছে যা API প্রতিক্রিয়া পার্স করে এবং আপনার জন্য স্ক্রীনে দেখায়।

চালাও এটা

এখন রান ক্লিক করুন ( execute.png ) অ্যান্ড্রয়েড স্টুডিও টুলবারে। একবার অ্যাপ লোড হয়ে গেলে, যেকোনো প্রিসেট ইমেজ আলতো চাপুন, একটি শনাক্ত করা বস্তু নির্বাচন করুন, অনুসন্ধান বোতামে আলতো চাপুন এবং ব্যাকএন্ড থেকে ফিরে আসা অনুসন্ধানের ফলাফলগুলি দেখুন। আপনি এই মত কিছু দেখতে পাবেন:

bb5e7c27c283a2fe.png

পণ্য অনুসন্ধান ফলাফল পর্দার স্ক্রিনশট

ব্যাকএন্ড ইতিমধ্যেই প্রিসেট পণ্য ক্যাটালগ থেকে দৃশ্যমান অনুরূপ পণ্যগুলির একটি তালিকা প্রদান করে। যাইহোক, আপনি দেখতে পারেন যে পণ্যের চিত্রটি এখনও খালি রয়েছে। এর কারণ হল projects.locations.images.annotate এন্ডপয়েন্ট শুধুমাত্র projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77 মত প্রোডাক্ট ইমেজ আইডি প্রদান করে। আপনাকে projects.locations.products.referenceImages.get এন্ডপয়েন্টে আরেকটি API কল করতে হবে এবং স্ক্রীনে দেখানোর জন্য এই রেফারেন্স ইমেজের URL পেতে হবে।

8. পণ্য রেফারেন্স ইমেজ পান

API অনুরোধ এবং প্রতিক্রিয়া বিন্যাস অন্বেষণ করুন

আপনি প্রোজেক্ট .locations.products.referenceImages.get এন্ডপয়েন্টে একটি খালি রিকোয়েস্ট বডি সহ একটি GET HTTP রিকোয়েস্ট পাঠাবেন।

HTTP অনুরোধ এই মত দেখায়:

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

অনুরোধটি সফল হলে, সার্ভার একটি 200 ওকে HTTP স্ট্যাটাস কোড প্রদান করে এবং 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 ক্লাউড স্টোরেজ (GCS) এ ছবির URI।

ডেমো পণ্য অনুসন্ধান ব্যাকএন্ডের রেফারেন্স চিত্রগুলি সর্বজনীন-পঠনের অনুমতির জন্য সেট আপ করা হয়েছিল৷ অতএব, আপনি সহজেই GCS URI-কে একটি HTTP URL-এ রূপান্তর করতে পারেন এবং এটি অ্যাপ UI-এ প্রদর্শন করতে পারেন। আপনাকে শুধুমাত্র https://storage.googleapis.com/ দিয়ে gs:// উপসর্গ প্রতিস্থাপন করতে হবে।

API কল বাস্তবায়ন করুন

এরপরে, একটি পণ্য অনুসন্ধান API অনুরোধ তৈরি করুন এবং এটি ব্যাকএন্ডে পাঠান। আপনি পণ্য অনুসন্ধান API কলের মতো একইভাবে ভলি এবং টাস্ক API ব্যবহার করবেন।

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 URI পেতে রেফারেন্স ইমেজ এন্ডপয়েন্টকে কল করে।
  2. GCS URI-কে HTTP URL-এ রূপান্তর করে।
  3. এই HTTP URL দিয়ে searchResult অবজেক্টের httpUri প্রপার্টি আপডেট করে।

দুটি API অনুরোধ সংযুক্ত করুন

annotateImage এ ফিরে যান এবং পণ্য অনুসন্ধানের ফলাফল তালিকাটি তার ProductSearchResult ফেরত দেওয়ার আগে সমস্ত রেফারেন্স চিত্রের HTTP URL পেতে এটিকে সংশোধন করুন।

এই লাইন খুঁজুন:

// 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 ক্লাসে প্রয়োগ করা হয়েছে, তাই আপনি অ্যাপটি পুনরায় চালু করতে এগিয়ে যেতে পারেন।

চালাও এটা

এখন রান ক্লিক করুন ( execute.png ) অ্যান্ড্রয়েড স্টুডিও টুলবারে। অ্যাপ লোড হয়ে গেলে, যেকোন প্রিসেট ইমেজ ট্যাপ করুন, একটি শনাক্ত করা অবজেক্ট সিলেক্ট করুন, সার্চের ফলাফল দেখতে সার্চ বোতামে ট্যাপ করুন, এইবার প্রোডাক্ট ইমেজ সহ।

পণ্য অনুসন্ধান ফলাফল কি আপনার কাছে অর্থপূর্ণ?

25939f5a13eeb3c3.png

9. অভিনন্দন!

আপনার অ্যান্ড্রয়েড অ্যাপে প্রোডাক্ট ইমেজ সার্চের ক্ষমতা যোগ করতে ভিশন API প্রোডাক্ট সার্চ ব্যাকএন্ডকে কীভাবে কল করতে হয় তা আপনি শিখেছেন। যে আপনি এটি পেতে এবং চলমান প্রয়োজন!

আপনি এগিয়ে যাওয়ার সাথে সাথে, আপনি আপনার পণ্য ক্যাটালগ ব্যবহার করে আপনার নিজস্ব ব্যাকএন্ড তৈরি করতে পছন্দ করতে পারেন। আপনি কীভাবে নিজের ব্যাকএন্ড তৈরি করতে পারেন এবং মোবাইল অ্যাপ থেকে কল করার জন্য API কী সেট আপ করতে পারেন তা শিখতে পণ্যের চিত্র অনুসন্ধান শেখার পথের পরবর্তী কোডল্যাবটি দেখুন।

আমরা কভার করেছি কি

  • একটি অ্যান্ড্রয়েড অ্যাপ থেকে ভিশন API পণ্য অনুসন্ধান ব্যাকএন্ডকে কীভাবে কল করবেন

পরবর্তী পদক্ষেপ

আরও জানুন