Halaman ini diterjemahkan oleh Cloud Translation API.

Memanggil backend Product Search Vision API di Android

1. Sebelum memulai

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

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

Anda dapat mempelajari langkah-langkah yang tersisa dalam membangun 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 mereka telusuri, di jalur pembelajaran.

Yang akan Anda bangun

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.
Pada akhirnya, Anda akan melihat sesuatu yang mirip dengan gambar di sebelah kanan.

Yang akan Anda pelajari

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

Yang Anda butuhkan

Versi terbaru Android Studio (v4.1.2+)
Emulator Android Studio 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 dibahas dan disediakan agar Anda cukup menyalin dan menempelkannya.

2. Tentang Product Search Vision API

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, masing-masing berisi gambar referensi yang secara visual menjelaskan produk dari serangkaian sudut pandang. Kemudian, Anda dapat menambahkan produk ini ke set produk (yaitu katalog produk). Saat ini, Product Search Vision API mendukung kategori produk berikut: perlengkapan rumah, pakaian, mainan, barang kemasan, dan umum.

Saat pengguna membuat kueri untuk set produk dengan gambar mereka sendiri, Product Search Vision API menerapkan machine learning untuk membandingkan produk dalam gambar kueri pengguna dengan gambar dalam set produk retailer, lalu menampilkan daftar berperingkat dari hasil yang mirip secara visual dan semantik.

3. Mendownload dan menjalankan aplikasi awal

Download Kode

Klik link berikut untuk mendownload semua kode untuk codelab ini:

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

Subdirektori codelab2 di repositori odml-pathways berisi dua direktori:

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

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

Mengimpor aplikasi ke Android Studio

Mulai 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 Anda melalui USB ke host atau Mulai emulator Android Studio, lalu klik Run ( ) di toolbar Android Studio.

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

Sekarang aplikasi akan diluncurkan di perangkat Android Anda. Aplikasi ini sudah memiliki kemampuan deteksi objek: mendeteksi item fashion 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 Penelusuran Produk 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 untuk memungkinkan pengguna 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 harus meminta pengguna mengetuk salah satu objek yang terdeteksi untuk menunjukkan objek mana yang ingin mereka gunakan untuk penelusuran produk.

Screenshot item fashion yang terdeteksi dari gambar

Agar codelab tetap sederhana dan berfokus pada machine learning, beberapa kode Android boilerplate telah diimplementasikan di aplikasi awal untuk membantu Anda mendeteksi objek mana yang telah diketuk pengguna. Tampilan yang menampilkan gambar di aktivitas utama (ObjectDetectorActivity) sebenarnya adalah tampilan kustom (ImageClickableView) yang memperluas ImageView default Android OS. Library ini mengimplementasikan beberapa metode utilitas yang mudah, 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 mengirimkan gambar yang dipangkas ini ke backend penelusuran produk.

Tambahkan kode untuk menangani pengguna yang mengetuk objek yang terdeteksi.

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

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

onObjectClickListener dipanggil setiap kali pengguna mengetuk salah satu objek yang terdeteksi di layar. Fungsi 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 dan diteruskan ke onObjectClickListener

Mengirim gambar yang dipangkas ke aktivitas penelusuran produk

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

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

Screenshot komponen UI di ProductSearchActivity

Tambahkan kode untuk mengirim 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 ini melakukan 3 hal:

Mengambil gambar yang dipangkas dan menyerialisasinya ke file PNG.
Memulai ProductSearchActivity untuk menjalankan urutan penelusuran produk.
Menyertakan URI gambar yang dipangkas dalam intent start-activity sehingga ProductSearchActivity dapat mengambilnya nanti untuk digunakan sebagai gambar kueri.

Ada beberapa hal yang harus diingat:

Logika untuk mendeteksi objek dan membuat kueri backend telah dibagi menjadi 2 aktivitas hanya untuk mempermudah pemahaman codelab. Anda dapat memutuskan cara menerapkannya di aplikasi Anda.
Anda perlu menulis gambar kueri ke dalam file dan meneruskan URI gambar antar-aktivitas karena gambar kueri dapat lebih besar dari batas ukuran 1 MB intent Android.
Anda dapat menyimpan gambar kueri dalam format PNG karena merupakan format tanpa kehilangan data.

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 konfirmasi bahwa kode ini sudah ada:

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

Pastikan ProductSearchActivity muncul dengan gambar yang Anda ketuk. Tombol Search belum melakukan apa pun, tetapi kami akan menerapkannya nanti.

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

5. Menjelajahi backend penelusuran produk

Membangun backend penelusuran gambar produk

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

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

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

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 sehingga Anda dapat membuatnya 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.

Pelajari konsep penting

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

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

Memahami katalog produk preset

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

Contoh dari katalog produk preset

Panggil backend demo penelusuran produk

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

Agar codelab ini tetap sederhana, endpoint proxy telah disiapkan yang memungkinkan Anda mengakses backend demo tanpa mengkhawatirkan kunci API dan autentikasi. Backend ini menerima permintaan HTTP dari aplikasi seluler, menambahkan kunci API, dan meneruskan permintaan ke backend Penelusuran Produk Vision API. Kemudian, proxy menerima respons dari backend dan menampilkannya 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 Product Search Vision API. 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 mirip dengan gambar kueri.
projects.locations.products.referenceImages.get: Mendapatkan URI gambar produk yang ditampilkan dalam 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:

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

Menerapkan class klien API

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

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

Tentukan 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 dengan backend demo, tetapkan ini ke endpoint proxy. Namun, jika Anda men-deploy backend 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 mengosongkan kolom ini.
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 "set produk" dalam istilah Vision API) tempat Anda ingin menelusuri produk yang mirip secara visual. Anda dapat memiliki beberapa katalog dalam satu project Cloud. product_set0 adalah katalog produk preset backend demo.

7. Memanggil API penelusuran produk

Menjelajahi format permintaan dan respons API

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

Anda perlu 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) dari data biner gambar kueri.
project-id: Project ID GCP Anda.
location-id: ID lokasi yang valid.
product-set-id: ID untuk set 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 kami menggunakan model machine learning penelusuran produk pakaian versi 2.

Jika permintaan berhasil, server akan menampilkan kode status HTTP 200 OK dan respons dalam format JSON. JSON respons mencakup 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 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 agar ditampilkan di layar.
product.labels: Daftar tag yang telah ditentukan sebelumnya untuk produk. Hal ini berguna jika Anda ingin memfilter hasil penelusuran untuk menampilkan hanya satu kategori pakaian, seperti gaun.

Mengonversi gambar kueri menjadi base64

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

Buka class ProductSearchAPIClient, temukan 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 yang kosong, lalu 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 menerapkan kode UI.

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

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 mengurai 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 serupa 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 mengirim permintaan HTTP GET 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 respons dalam format JSON seperti di bawah:

{
  "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: ID gambar referensi
uri: URI gambar di Google Cloud Storage (GCS).

Gambar referensi backend penelusuran produk demo disiapkan agar memiliki izin baca publik. Oleh karena itu, Anda dapat dengan mudah mengonversi URI GCS menjadi 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 yang kosong, lalu 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 menjadi URL HTTP.
Memperbarui properti httpUri 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.

Temukan 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 di layar sudah diterapkan 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 masuk akal 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 butuhkan untuk membuatnya berfungsi.

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

Yang telah kita bahas

Cara memanggil backend Vision API Product Search dari aplikasi Android

Langkah Berikutnya

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

Pelajari Lebih Lanjut

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

Memanggil backend Product Search Vision API di Android Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Sebelum memulai

Yang akan Anda bangun

Yang akan Anda pelajari

Yang Anda butuhkan

2. Tentang Product Search Vision API

3. Mendownload dan menjalankan aplikasi awal

Download Kode

Mengimpor aplikasi ke Android Studio

Menjalankan aplikasi awal

4. Menangani pemilihan objek

Mengizinkan pengguna mengetuk objek yang terdeteksi untuk memilih

Mengirim gambar yang dipangkas ke aktivitas penelusuran produk

Mengambil gambar kueri dalam aktivitas penelusuran produk

Menjalankan aplikasi

5. Menjelajahi backend penelusuran produk

Membangun backend penelusuran gambar produk

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

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

Pelajari konsep penting

Memahami katalog produk preset

Panggil backend demo penelusuran produk

6. Mengimplementasikan klien API

Memahami alur kerja penelusuran produk

Menerapkan class klien API

Tentukan konfigurasi API

7. Memanggil API penelusuran produk

Menjelajahi format permintaan dan respons API

Mengonversi gambar kueri menjadi base64

Mengimplementasikan panggilan API

Menampilkan hasil penelusuran di UI

Menjalankan aplikasi

8. Mendapatkan gambar referensi produk

Menjelajahi format permintaan dan respons API

Mengimplementasikan panggilan API

Menghubungkan dua permintaan API

Menjalankan aplikasi

9. Selamat!

Yang telah kita bahas

Langkah Berikutnya

Pelajari Lebih Lanjut

Memanggil backend Product Search Vision API di Android