Memanggil backend Penelusuran Produk API Vision di Android

25 menit tersisa

Tentang codelab ini

Terakhir diperbarui Nov 3, 2021

Ditulis oleh Khanvi LeViet

1. Sebelum memulai

Pernahkah Anda melihat demo Google Lens, tempat Anda dapat mengarahkan kamera ponsel ke sebuah objek dan mencari tempat untuk membelinya secara online? Jika Anda ingin mempelajari cara menambahkan fitur yang sama ke aplikasi, codelab ini memang untuk Anda. Ini adalah bagian dari jalur pembelajaran yang mengajarkan Anda cara membuat fitur penelusuran gambar produk ke dalam aplikasi seluler.

Dalam codelab ini, Anda akan mempelajari cara memanggil backend yang dibuat dengan Vision API Product Search dari aplikasi seluler. Backend ini dapat mengambil gambar kueri dan menelusuri produk yang mirip secara visual dari katalog produk.

Anda dapat mempelajari langkah-langkah selanjutnya dalam membuat fitur penelusuran produk visual, termasuk cara menggunakan Deteksi dan Pelacakan Objek ML Kit untuk mendeteksi objek dalam gambar kueri dan memungkinkan pengguna memilih produk yang ingin ditelusuri, di jalur pembelajaran.

Yang akan Anda buat

Dalam codelab ini, Anda akan memulai dengan aplikasi Android yang dapat mendeteksi objek dari gambar input. Anda akan menulis kode untuk mengambil objek yang dipilih pengguna, mengirimkannya ke backend penelusuran produk, dan menampilkan hasil penelusuran di layar.
Di bagian akhir, Anda akan melihat sesuatu yang mirip dengan gambar di sebelah kanan.

Yang akan Anda pelajari

Cara memanggil dan mengurai respons Vision API Product Search API dari aplikasi Android

Yang Anda butuhkan

Versi terbaru Android Studio (v4.1.2+)
Android Studio Emulator atau perangkat Android fisik
Kode contoh
Pengetahuan dasar tentang pengembangan Android di Kotlin

Codelab ini berfokus pada Product Search Vision API. Konsep dan blok kode yang tidak-relevan tidak akan dijelajahi dan disediakan sehingga Anda cukup menyalin dan menempelkan.

2. Tentang Vision API Product Search

Vision API Product Search adalah fitur di Google Cloud yang memungkinkan pengguna menelusuri produk yang serupa secara visual dari katalog produk. Retailer dapat membuat produk, yang masing-masing berisi gambar referensi yang secara visual mendeskripsikan produk dari sekumpulan sudut pandang. Anda kemudian dapat menambahkan produk ini ke kumpulan produk (yaitu katalog produk). Saat ini Vision API Product Search mendukung kategori produk berikut: perlengkapan rumah, pakaian, mainan, barang yang dikemas, dan produk umum.

Saat pengguna mengkueri kumpulan produk dengan gambarnya sendiri, Penelusuran Produk Vision API akan menerapkan machine learning untuk membandingkan produk dalam gambar kueri pengguna dengan gambar di kumpulan produk retailer, lalu menampilkan daftar hasil yang serupa secara visual dan semantik.

3. Mendownload dan menjalankan aplikasi awal

Download Kode

Klik link berikut untuk mendownload semua kode untuk codelab ini:

Mengekstrak file zip yang didownload. Ini akan mengekstrak folder root (odml-pathways-main) dengan semua resource yang Anda butuhkan. Untuk codelab ini, Anda hanya memerlukan sumber di subdirektori product-search/codelab2/android.

Subdirektori codelab2 dalam repositori odml-pathways berisi dua direktori:

starter—Kode awal yang Anda build untuk codelab ini.
final—Kode lengkap untuk aplikasi contoh yang sudah selesai.

Aplikasi awal di sini adalah aplikasi yang telah Anda build di codelab Mendeteksi objek dalam gambar untuk membuat penelusuran produk visual: Android. Fitur ini menggunakan Deteksi dan Pelacakan Objek ML Kit untuk mendeteksi objek dari gambar dan menampilkannya di layar.

Mengimpor aplikasi ke Android Studio

Mulailah dengan mengimpor aplikasi starter ke Android Studio.

Buka Android Studio, pilih Import Project (Gradle, Eclipse ADT, etc.) lalu pilih folder starter dari kode sumber yang telah Anda download sebelumnya.

Menjalankan aplikasi awal

Setelah mengimpor project ke Android Studio, Anda siap menjalankan aplikasi untuk pertama kalinya. Hubungkan perangkat Android melalui USB ke host atau Start emulator Android Studio, dan klik Run ( ) di toolbar Android Studio.

(Jika tombol ini dinonaktifkan, pastikan Anda hanya mengimpor starter/app/build.gradle, bukan seluruh repositori.)

Sekarang aplikasi seharusnya sudah diluncurkan di perangkat Android Anda. Fitur ini sudah memiliki kemampuan deteksi objek: mendeteksi item mode dari gambar dan menunjukkan lokasinya. Coba dengan foto preset untuk mengonfirmasi.

Screenshot aplikasi awal yang dapat mendeteksi objek dalam gambar

Selanjutnya, Anda akan memperluas aplikasi untuk mengirim objek yang terdeteksi ke backend Vision Product Search Vision API dan menampilkan hasil penelusuran di layar.

4. Menangani pemilihan objek

Mengizinkan pengguna mengetuk objek yang terdeteksi untuk memilih

Sekarang Anda akan menambahkan kode agar pengguna dapat memilih objek dari gambar dan memulai penelusuran produk. Aplikasi awal sudah memiliki kemampuan untuk mendeteksi objek dalam gambar. Mungkin ada beberapa objek dalam gambar, atau objek yang terdeteksi hanya menempati sebagian kecil gambar. Oleh karena itu, Anda perlu meminta pengguna mengetuk salah satu objek yang terdeteksi untuk menunjukkan objek mana yang ingin digunakan untuk penelusuran produk.

Screenshot item mode yang terdeteksi dari gambar

Agar codelab tetap sederhana dan berfokus pada machine learning, beberapa kode Android boilerplate telah diterapkan di aplikasi awal untuk membantu Anda mendeteksi objek mana yang telah diketuk oleh pengguna. Tampilan yang menampilkan gambar dalam aktivitas utama (ObjectDetectorActivity) sebenarnya adalah tampilan kustom (ImageClickableView) yang memperluas ImageView default Android OS. Mengimplementasikan beberapa metode utilitas yang mudah digunakan, termasuk:

fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Ini adalah callback untuk menerima gambar yang dipangkas yang hanya berisi objek yang telah diketuk pengguna. Anda akan mengirim gambar yang dipangkas ini ke backend penelusuran produk.

Tambahkan kode untuk menangani ketukan pengguna pada objek yang terdeteksi.

Buka metode initViews di class ObjectDetectorActivity dan tambahkan baris berikut di akhir metode: (Android Studio akan memberi tahu Anda bahwa metode tersebut tidak dapat menemukan startProductImageSearch . Jangan khawatir, Anda akan menerapkannya nanti.)

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

onObjectClickListener akan dipanggil setiap kali pengguna mengetuk objek yang terdeteksi pada layar. Fitur ini menerima gambar yang dipangkas yang hanya berisi objek yang dipilih. Misalnya, jika pengguna mengetuk orang yang mengenakan gaun di sebelah kanan, pemroses akan dipicu dengan objectImage seperti di bawah.

Contoh gambar yang dipangkas yang diteruskan ke onObjectClickListener

Mengirim gambar yang dipangkas ke aktivitas penelusuran produk

Sekarang Anda akan mengimplementasikan logika pengiriman gambar kueri ke backend Product Search Vision API dalam aktivitas terpisah (ProductSearchActivity).

Semua komponen UI telah diterapkan sebelumnya sehingga Anda dapat berfokus pada penulisan kode untuk berkomunikasi dengan backend penelusuran produk.

Screenshot komponen UI pada ProductSearchActivity

Tambahkan kode untuk mengirimkan gambar objek yang telah dipilih pengguna ke ProductSearchActivity.

Kembali ke Android Studio dan tambahkan metode startProductImageSearch ini ke class 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)
    }
}

Cuplikan kode melakukan 3 hal:

Mengambil gambar yang dipangkas dan melakukan serialisasi ke file PNG.
Memulai ProductSearchActivity untuk menjalankan urutan penelusuran produk.
Menyertakan URI gambar yang dipangkas dalam intent aktivitas awal sehingga ProductSearchActivity dapat mengambilnya nanti untuk digunakan sebagai gambar kueri.

Ada beberapa hal yang perlu diingat:

Logika untuk mendeteksi objek dan membuat kueri backend telah dibagi menjadi 2 aktivitas hanya untuk membuat codelab lebih mudah dipahami. Anda dapat menentukan cara menerapkannya di aplikasi Anda.
Anda perlu menulis gambar kueri ke dalam file dan meneruskan URI gambar di antara aktivitas karena gambar kueri dapat lebih besar dari batas ukuran 1 MB intent Android.
Anda dapat menyimpan gambar kueri dalam PNG karena merupakan format lossless.

Mengambil gambar kueri dalam aktivitas penelusuran produk

Di ProductSearchActivity, kode untuk mengambil gambar kueri dan menampilkannya di layar telah diimplementasikan di aplikasi awal.

Buka metode onCreate dan pastikan kode ini sudah ada di sana:

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

Menjalankan aplikasi

Sekarang klik Run ( ) di toolbar Android Studio.

Setelah aplikasi dimuat, ketuk gambar preset, lalu pilih salah satu objek yang terdeteksi.

Konfirmasikan bahwa ProductSearchActivity muncul dengan gambar yang Anda ketuk. Tombol Telusuri belum melakukan apa pun, tetapi kita akan menerapkan tombol berikutnya.

Anda akan melihat layar yang serupa setelah mengetuk salah satu objek yang terdeteksi.

5. Menjelajahi backend penelusuran produk

Membuat backend penelusuran gambar produk

Codelab ini memerlukan backend penelusuran produk yang dibuat dengan Vision API Product Search. Ada dua opsi untuk melakukan ini:

Opsi 1: Gunakan backend demo yang telah di-deploy untuk Anda

Anda dapat melanjutkan codelab ini dengan menggunakan backend penelusuran produk yang telah di-deploy oleh Google untuk Anda. Backend demo dapat direplikasi dengan mengikuti panduan memulai Penelusuran Produk Vision API.

Opsi 2: Buat backend Anda sendiri dengan mengikuti panduan memulai Product Search Vision API

Opsi ini direkomendasikan bagi mereka yang ingin mempelajari secara mendalam cara membuat backend penelusuran produk agar Anda dapat membuat backend untuk katalog produk Anda sendiri nanti. Anda harus memiliki:

Akun Google Cloud dengan penagihan diaktifkan. (Dapat berupa akun uji coba gratis.)
Beberapa pengetahuan tentang konsep Google Cloud, termasuk project, akun layanan, dll.

Anda dapat mempelajari cara melakukannya nanti di jalur pembelajaran.

Mempelajari konsep penting

Anda akan menemukan konsep berikut saat berinteraksi dengan backend penelusuran produk:

Set Produk: Set produk adalah penampung sederhana untuk sekelompok produk. Katalog produk dapat direpresentasikan sebagai kumpulan produk dan produknya.
Produk: Setelah membuat set produk, Anda dapat membuat produk dan menambahkannya ke set produk.
Gambar Referensi Produk: Ini adalah gambar yang berisi berbagai tampilan produk Anda. Gambar referensi digunakan untuk menelusuri produk yang serupa secara visual.
Menelusuri produk: Setelah membuat kumpulan produk dan kumpulan produk tersebut telah diindeks, Anda dapat mengajukan kueri kumpulan produk menggunakan Cloud Vision API.

Memahami katalog produk preset

Backend demo penelusuran produk yang digunakan dalam codelab ini dibuat menggunakan Penelusuran Produk Vision API dan katalog produk sekitar seratus gambar sepatu dan gaun. Berikut beberapa gambar dari katalog:

Contoh dari katalog produk preset

Memanggil backend demo penelusuran produk

Anda dapat memanggil Product Search Vision API langsung dari aplikasi seluler dengan menyiapkan kunci Google Cloud API dan membatasi akses ke kunci API hanya ke aplikasi Anda.

Agar codelab ini tetap sederhana, endpoint proxy telah disiapkan yang memungkinkan Anda mengakses backend demo tanpa mengkhawatirkan kunci dan autentikasi API. Aplikasi ini menerima permintaan HTTP dari aplikasi seluler, menambahkan kunci API, dan meneruskan permintaan ke backend Product Search Vision API. Kemudian proxy menerima respons dari backend dan mengembalikannya ke aplikasi seluler.

Endpoint proxy: https://us-central1-odml-codelabs.cloudfunctions.net/productSearch
Perilaku proxy: Tambahkan header autentikasi yang sesuai dan teruskan permintaan API ke backend Vision Product Search. Misalnya, panggilan API ke https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotate akan diteruskan ke https://vision.googleapis.com/v1/images:annotate

Dalam codelab ini, Anda akan menggunakan dua API Vision API Product Search:

projects.locations.images.annotate: Mengirim gambar kueri ke server dan menerima daftar produk dari katalog produk preset yang secara visual serupa dengan gambar kueri.
projects.locations.products.referenceImages.get: Mendapatkan URI gambar produk yang ditampilkan di panggilan API di atas untuk ditampilkan kepada pengguna.

6. Mengimplementasikan klien API

Memahami alur kerja penelusuran produk

Ikuti alur kerja ini untuk melakukan penelusuran produk dengan backend:

Mengenkode gambar kueri sebagai string base64
Panggil endpoint projects.locations.images.annotate dengan gambar kueri
Terima ID gambar produk dari panggilan API sebelumnya dan kirimkan ke endpoint projects.locations.products.referenceImages.get untuk mendapatkan URI gambar produk dalam hasil penelusuran.

Mengimplementasikan class klien API

Sekarang Anda akan mengimplementasikan kode untuk memanggil backend penelusuran produk di class khusus yang disebut ProductSearchAPIClient. Beberapa kode boilerplate telah diterapkan untuk Anda di aplikasi awal:

class ProductSearchAPIClient: Class ini sebagian besar kosong sekarang memiliki beberapa metode yang akan Anda terapkan nanti dalam codelab ini.
fun convertBitmapToBase64(bitmap: Bitmap): Mengonversi instance Bitmap ke dalam representasi base64-nya untuk dikirim ke backend penelusuran produk
fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>: Panggil API projects.locations.images.annotate dan mengurai respons.
fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>: Panggil API projects.locations.products.referenceImages.get dan mengurai respons.
SearchResult.kt: File ini berisi beberapa class data untuk mewakili jenis yang ditampilkan oleh backend Vision Product Search Vision.

Menentukan konfigurasi API

Buka class ProductSearchAPIClient dan Anda akan melihat beberapa konfigurasi backend penelusuran produk yang sudah ditentukan:

// 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 adalah endpoint API Cloud Vision API. Saat Anda melanjutkan backend backend, setel ini ke endpoint proxy. Namun, jika men-deploy backend Anda sendiri, Anda harus mengubahnya ke endpoint Cloud Vision API. https://vision.googleapis.com/v1.
VISION_API_KEY adalah kunci API Project Cloud Anda. Karena proxy sudah menangani autentikasi, Anda dapat mengosongkannya.
VISION_API_PROJECT_ID adalah project ID Cloud. odml-codelabs adalah project Cloud tempat backend demo di-deploy.
VISION_API_LOCATION_ID adalah lokasi Cloud tempat backend penelusuran produk di-deploy. us-east1 adalah tempat kita men-deploy backend demo.
VISION_API_PRODUCT_SET_ID adalah ID katalog produk (alias "product set" di istilah Vision API) tempat Anda ingin menelusuri produk yang serupa secara visual. Anda dapat memiliki beberapa katalog dalam satu project Cloud. product_set0 adalah katalog produk preset dari backend demo.

7. Memanggil API penelusuran produk

Menjelajahi format permintaan dan respons API

Anda dapat menemukan produk yang serupa untuk gambar tertentu dengan meneruskan URI Google Cloud Storage gambar, URL web, atau string berenkode base64 ke Vision API Product Search. Dalam codelab ini, Anda akan menggunakan opsi string yang dienkode base64, karena gambar kueri kami hanya ada di perangkat pengguna.

Anda harus mengirim permintaan POST ke endpoint projects.locations.images.annotate dengan isi JSON permintaan ini:

{
  "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"
          ],
        }
      }
    }
  ]
}

Ada beberapa parameter yang perlu ditentukan:

base64-encoded-image: Representasi base64 (string ASCII) untuk data biner gambar kueri.
project-id: Project ID GCP Anda.
location-id: ID lokasi yang valid.
product-set-id: ID untuk kumpulan produk tempat Anda ingin menjalankan operasi.

Karena katalog produk Anda hanya berisi gambar sepatu dan gaun, tentukan productCategories menjadi apparel-v2. v2 di sini berarti kita menggunakan versi 2 dari model machine learning penelusuran produk pakaian.

Jika permintaan berhasil, server akan menampilkan kode status HTTP 200 OK dan responsnya dalam format JSON. JSON respons menyertakan dua jenis hasil berikut:

productSearchResults - Berisi daftar produk yang cocok untuk seluruh gambar.
productGroupedResults - Berisi koordinat kotak pembatas dan item yang cocok untuk setiap produk yang diidentifikasi dalam gambar.

Karena produk telah dipangkas dari gambar asli, Anda akan mengurai hasilnya dalam daftar productSearchResults.

Berikut adalah beberapa kolom penting dalam objek hasil penelusuran produk:

product.name: ID unik produk dalam format projects/{project-id}/locations/{location-id}/products/{product_id}
product.score: Nilai yang menunjukkan seberapa mirip hasil penelusuran dengan gambar kueri. Nilai yang lebih tinggi berarti lebih banyak kesamaan.
product.image: ID unik gambar referensi produk dalam format projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id}. Anda harus mengirim permintaan API lain ke projects.locations.products.referenceImages.get untuk mendapatkan URL gambar referensi ini sehingga akan ditampilkan di layar.
product.labels [label.produk]: Daftar tag produk yang telah ditentukan sebelumnya. Hal ini berguna jika Anda ingin memfilter hasil penelusuran untuk hanya menampilkan satu kategori pakaian, seperti gaun.

Mengonversi gambar kueri ke base64

Anda perlu mengonversi gambar kueri menjadi representasi string base64 dan melampirkan string ke objek JSON dalam isi permintaan.

Buka class ProductSearchAPIClient, cari metode convertBitmapToBase64 yang kosong, lalu ganti dengan implementasi ini:

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

Mengimplementasikan panggilan API

Selanjutnya, buat permintaan API penelusuran produk dan kirimkan ke backend. Anda akan menggunakan Volley untuk membuat permintaan API, dan menampilkan hasilnya menggunakan Task API.

Kembali ke class ProductSearchAPIClient, temukan metode annotateImage kosong dan ganti dengan implementasi ini:

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
}

Menampilkan hasil penelusuran di UI

Sekarang kode API di ProductSearchAPIClient sudah siap. Kembali ke aktivitas ProductSearchActivity untuk mengimplementasikan kode UI.

Aktivitas ini sudah memiliki beberapa kode boilerplate yang memicu metode searchByImage(queryImage: Bitmap). Tambahkan kode untuk memanggil backend dan menampilkan hasil di UI ke metode yang saat ini kosong.

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

Metode showSearchResult berisi beberapa kode boilerplate yang menguraikan respons API dan menampilkannya di layar untuk Anda.

Menjalankan aplikasi

Sekarang klik Run ( ) di toolbar Android Studio. Setelah aplikasi dimuat, ketuk gambar preset, pilih objek yang terdeteksi, ketuk tombol Telusuri dan lihat hasil penelusuran yang ditampilkan dari backend. Anda akan melihat sesuatu seperti ini:

Screenshot layar hasil penelusuran produk

Backend sudah menampilkan daftar produk yang mirip secara visual dari katalog produk preset. Namun, Anda dapat melihat bahwa gambar produk masih kosong. Hal ini karena endpoint projects.locations.images.annotate hanya menampilkan ID gambar produk seperti projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77. Anda harus melakukan panggilan API lain ke endpoint projects.locations.products.referenceImages.get dan mendapatkan URL gambar referensi ini untuk menampilkannya di layar.

8. Mendapatkan gambar referensi produk

Menjelajahi format permintaan dan respons API

Anda akan mengirimkan permintaan GET HTTP dengan isi permintaan kosong ke endpoint projects.locations.products.referenceImages.get untuk mendapatkan URI gambar produk yang ditampilkan oleh endpoint penelusuran produk.

Permintaan HTTP terlihat seperti ini:

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

Jika permintaan berhasil, server akan menampilkan kode status HTTP 200 OK dan responsnya dalam format 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"
}

name [nama]: ID gambar referensi
uri: URI gambar di Google Cloud Storage (GCS).

Gambar referensi backend penelusuran produk demo disiapkan untuk memiliki izin baca publik. Oleh karena itu, Anda dapat dengan mudah mengonversi URI GCS ke URL HTTP dan menampilkannya di UI aplikasi. Anda hanya perlu mengganti awalan gs:// dengan https://storage.googleapis.com/.

Mengimplementasikan panggilan API

Selanjutnya, buat permintaan API penelusuran produk dan kirimkan ke backend. Anda akan menggunakan Volley dan Task API dengan cara yang sama seperti panggilan API penelusuran produk.

Kembali ke class ProductSearchAPIClient, temukan metode fetchReferenceImage kosong dan ganti dengan implementasi ini:

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
}

Metode ini mengambil objek searchResult: ProductSearchResult yang ditampilkan oleh endpoint penelusuran produk, lalu mengikuti langkah-langkah berikut:

Memanggil endpoint gambar referensi untuk mendapatkan URI GCS gambar referensi.
Mengonversi URI GCS ke URL HTTP.
Memperbarui properti httpUri dari objek searchResult dengan URL HTTP ini.

Menghubungkan dua permintaan API

Kembali ke annotateImage dan ubah untuk mendapatkan semua URL HTTP gambar referensi sebelum menampilkan daftar ProductSearchResult ke pemanggilnya.

Cari baris ini:

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

Kemudian, ganti dengan implementasi ini:

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

Kode boilerplate untuk menampilkan gambar referensi pada layar sudah diimplementasikan di class ProductSearchAdapter untuk Anda, sehingga Anda dapat melanjutkan untuk menjalankan ulang aplikasi.

Menjalankan aplikasi

Sekarang klik Run ( ) di toolbar Android Studio. Setelah aplikasi dimuat, ketuk gambar preset, pilih objek yang terdeteksi, ketuk tombol Telusuri untuk melihat hasil penelusuran, kali ini dengan gambar produk.

Apakah hasil penelusuran produk relevan bagi Anda?

9. Selamat!

Anda telah mempelajari cara memanggil backend Vision API Product Search untuk menambahkan kemampuan penelusuran gambar produk ke aplikasi Android Anda. Hanya itu yang Anda perlukan untuk mengaktifkan dan menjalankan!

Saat melanjutkan, Anda mungkin ingin membuat backend sendiri menggunakan katalog produk. Lihat codelab berikutnya di jalur pembelajaran Penelusuran Gambar Produk untuk mempelajari cara membuat backend Anda sendiri dan menyiapkan kunci API untuk memanggilnya dari aplikasi seluler.

Yang telah kita bahas

Cara memanggil backend Product Search Vision API dari aplikasi Android

Langkah Berikutnya

Lihat codelab Membuat backend penelusuran gambar produk dengan Vision API Product Search untuk mempelajari cara membuat backend Anda sendiri.
Lihat jalur pembelajaran lainnya di situs Machine Learning di Perangkat
Membuat fitur penelusuran produk ke dalam aplikasi Android Anda sendiri

Pelajari Lebih Lanjut

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

Laporkan kesalahan