Bu sayfa, Cloud Translation API ile çevrilmiştir.

Android'de Vision API Product Search arka ucu

1. Başlamadan önce

Telefon kameranızı bir nesneye doğru yöneltip Google Kamera'yı internetten nereden satın alabileceğinizi bulabileceğiniz bir Google Lens demosunu gördünüz mü? Aynı özelliği uygulamanıza nasıl ekleyebileceğinizi öğrenmek istiyorsanız bu codelab tam size göredir. Bu, ürün resmi arama özelliğini mobil uygulamaya nasıl oluşturacağınızı öğreten bir öğrenme yolunun parçasıdır.

Bu codelab'de, mobil uygulamadan Vision API Product Search ile oluşturulan arka ucu nasıl arayacağınızı öğreneceksiniz. Bu arka uç, sorgu resmi alıp ürün kataloğundan görsel olarak benzer ürünler arayabilir.

Bir görsel ürün arama özelliği oluşturmayla ilgili kalan adımlar hakkında bilgi edinmek için ML Kit Nesne Algılama ve İzleme özelliğini nasıl kullanacağınızı öğrenmek, sorgu resmindeki nesneleri algılamak ve kullanıcıların hangi ürünü aramak istediklerini seçmelerine izin vermek dahil öğrenme yolu hakkında bilgi edinebilirsiniz.

Geliştireceğiniz uygulama

Bu codelab'de, bir giriş resmindeki nesneleri algılayabilen Android uygulamasıyla başlarsınız. Kullanıcının seçtiği nesneyi almak, ürün arama arka ucuna göndermek ve arama sonucunu ekranda göstermek için kod yazarsınız.
Sonunda, sağdaki resme benzer bir resim görürsünüz.

Neler öğreneceksiniz?

Bir Android uygulamasından Vision API Product Search API'lerin yanıtlarını çağırma ve ayrıştırma

Gerekenler

Android Studio'nun en yeni sürümü (v4.1.2+)
Android Studio Emulator veya fiziksel bir Android cihaz
Örnek kod
Kotlin'de Android geliştirmeyle ilgili temel bilgiler

Bu codelab, Vision API Ürün Arama hizmetine odaklanmaktadır. Alakasız kavramlar ve kod blokları araştırılmaz ve yalnızca kopyalayıp yapıştırmanız için sağlanır.

2. Vision API Ürün Araması Hakkında

Vision API Product Search, Google Cloud'da sunulan ve kullanıcıların bir ürün kataloğundan görsel olarak benzer ürünleri aramasına olanak tanıyan bir özelliktir. Perakendeciler, her biri ürünü bir dizi bakış açısıyla görsel olarak açıklayan referans resimler içeren ürünler oluşturabilir. Daha sonra bu ürünleri ürün gruplarına (ör. ürün kataloğu) ekleyebilirsiniz. Vision API Product Search şu anda şu ürün kategorilerini desteklemektedir: ev eşyaları, giyim, oyuncaklar, ambalajlı ürünler ve genel.

Kullanıcılar ürün resimlerini kendi resimleriyle sorguladığında Vision API Ürün Arama, kullanıcının sorgu resmindeki ürünü perakendecinin ürün kümesindeki resimlerle karşılaştırmak için makine öğrenimini uygular ve ardından, görsel ve semantik olarak benzer sonuçların sıralı listesini döndürür.

3. Başlangıç uygulamasını indirme ve çalıştırma

Kodu İndirme

Bu codelab'in tüm kodunu indirmek için aşağıdaki bağlantıyı tıklayın:

İndirilen ZIP dosyasını paketten çıkarın. Bu, ihtiyaç duyacağınız tüm kaynaklarla bir kök klasörün (odml-pathways-main) paketini açar. Bu codelab için yalnızca product-search/codelab2/android alt dizinindeki kaynaklara ihtiyacınız olacaktır.

odml-pathways deposundaki codelab2 alt dizini iki dizin içerir:

starter - Bu codelab için geliştirdiğiniz başlangıç kodu.
Son: Tamamlanmış örnek uygulama için kod tamamlandı.

Buradaki başlangıç uygulaması, Görsel ürün araması oluşturmak için resimlerdeki nesneleri algılama: Android codelab'de oluşturduğunuz uygulamadır. Bir görüntüdeki nesneleri algılamak ve ekranda göstermek için ML Kit Nesne Algılama ve İzleme özelliğini kullanır.

Uygulamayı Android Studio'ya aktarın

Starter uygulamasını Android Studio'ya içe aktararak başlayın.

Android Studio'ya gidin, Projeyi İçe Aktar (Gradle, Eclipse ADT vb.) ve daha önce indirdiğiniz kaynak koddan starter klasörünü seçin.

Starter uygulamasını çalıştırma

Projeyi Android Studio'ya aktardığınıza göre, uygulamayı ilk kez çalıştırmaya hazırsınız. Android cihazınızı USB üzerinden barındırıcınıza bağlayın veya Android Studio emülatörünü başlatın ve Android Studio araç çubuğundan Çalıştır'ı () tıklayın.

(Bu düğme devre dışı bırakılırsa kod deposunun tamamını değil, yalnızca start/app/build.gradle dosyasını içe aktardığınızdan emin olun.)

Artık uygulamanın Android cihazınızda başlatılması gerekir. Zaten nesne algılama özelliğine sahip: Resimdeki moda öğelerini algılamak ve nerede olduklarını göstermek. Onaylamak için hazır ayarlı fotoğrafları kullanmayı deneyin.

Bir resimdeki nesneleri algılayabilen başlangıç uygulamasının ekran görüntüsü

Ardından, uygulamayı genişleterek, algılanan nesneleri Vision API Product Search arka ucuna gönderir ve arama sonuçlarını ekranda gösterir.

4. Nesne seçimini işleme

Kullanıcıların, algılanan bir nesneye dokunmasına izin ver

Şimdi kullanıcıların görselden bir nesne seçip ürün araması başlatmasına olanak tanıyacak kod ekleyeceksiniz. Başlatıcı uygulamanın, resimdeki nesneleri algılama özelliği zaten vardır. Resimde birden fazla nesne olabilir veya algılanan nesne, resmin yalnızca küçük bir bölümünü kaplayabilir. Dolayısıyla, kullanıcının ürün aramasında hangi nesneyi kullanmak istediğini belirtmek için algılanan nesnelerden birine dokunması gerekir.

Resimde algılanan moda öğelerinin ekran görüntüsü

Codelab'in basit olması ve makine öğrenimine odaklanmasını sağlamak için başlangıç uygulamasında, kullanıcının hangi nesneye dokunduğunu algılamanıza yardımcı olan bazı ortak Android kodları uygulandı. Görüntüyü ana etkinlikte (ObjectDetectorActivity) görüntüleyen görünüm, aslında Android OS'in varsayılan ImageView uygulamasını uzatan özel bir görünümdür (ImageClickableView). Aşağıdakiler dahil olmak üzere bazı kullanışlı yardımcı yöntemler uygular:

fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Bu, yalnızca kullanıcının dokunduğu nesneyi içeren kırpılmış resmi almak için bir geri çağırmadır. Bu kırpılmış resmi ürün arama arka ucuna göndereceksiniz.

Algılanan nesnelere dokunan bir kullanıcıyı işlemek için kod ekleyin.

ObjectDetectorActivity sınıfındaki initViews yöntemine gidin ve yöntemin sonuna şu satırları ekleyin: (Android Studio, startProductImageSearch yöntemini bulamadığını size bildirir. Endişelenmeyin, biraz sonra bunu uygulayacaksınız.)

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

Kullanıcı, ekranda algılanan nesnelerden birine dokunduğunda onObjectClickListener çağrılır. Yalnızca seçili nesneyi içeren kırpılmış resmi alır. Örneğin, kullanıcı sağ taraftaki elbiseyi giyen kişiye dokunursa dinleyici aşağıdaki gibi objectImage tetiklenir.

onObjectClickListener'a aktarılan kırpılmış resmin örneği

Kırpılmış resmi ürün arama etkinliğine gönderin

Şimdi, sorgu resmini, ayrı bir etkinlikte Vision API Ürün Arama arka ucuna gönderme mantığını uygulayacaksınız (ProductSearchActivity).

Tüm kullanıcı arayüzü bileşenleri önceden uygulandı. Böylece, ürün arama arka ucuyla iletişim kurmak için kodu yazmaya odaklanabilirsiniz.

ProductSearchActivity üzerindeki kullanıcı arayüzü bileşenlerinin ekran görüntüsü

Kullanıcının seçtiği nesne resmini ProductSearchActivity öğesine göndermek için kod ekleyin.

Android Studio'ya dönün ve bu startProductImageSearch yöntemini ObjectDetectorActivity sınıfına ekleyin:

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

Kod snippet'i 3 şey yapar:

Kırpılmış resmi alır ve bir PNG dosyasına serileştirir.
Ürün arama dizisini yürütmek için ProductSearchActivity öğesini başlatır.
ProductSearchActivity'nin, sorgu resmi olarak kullanmak üzere daha sonra alabilmesi için başlangıç etkinliği amacına göre kırpılmış resim URI'sini içerir.

Unutmamanız gereken birkaç nokta var:

Nesneleri algılama ve arka ucu sorgulama mantığı, yalnızca codelab'in anlaşılmasını kolaylaştırmak için 2 etkinliğe ayrılmıştır. Bu önerileri uygulamanıza nasıl uygulayacağınıza karar vermek size bağlıdır.
Sorgu resmi bir Android niyetinin 1 MB'lık boyut sınırını aşabileceğinden, sorgu resmini bir dosyaya yazmanız ve etkinlikler arasında resim URI'sini iletmeniz gerekir.
Kayıpsız bir biçim olduğu için sorgu resmini PNG biçiminde depolayabilirsiniz.

Ürün arama etkinliğinde sorgu resmini alın

ProductSearchActivity içinde, sorgu resmini alıp ekranda görüntüleyecek kod, başlangıç uygulamasında zaten uygulanmıştır.

onCreate yöntemine gidin ve bu kodun zaten mevcut olduğunu doğrulayın:

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

Uygulamayı çalıştırın

Şimdi Android Studio araç çubuğunda Çalıştır'ı ( ) tıklayın.

Uygulama yüklendikten sonra, önceden ayarlanmış resimlere dokunun ve algılanan nesnelerden birini seçin.

Dokunduğunuz görselle birlikte ProductSearchActivity ifadesinin göründüğünü onaylayın. Ara düğmesi henüz bir şey yapmaz ancak bu düğmeyi daha sonra uygularız.

Algılanan nesnelerden birine dokunduktan sonra benzer bir ekran görmeniz gerekir.

5. Ürün arama arka ucunu keşfedin

Ürün resmi arama arka ucunu oluşturun

Bu codelab için Vision API Ürün Arama ile oluşturulmuş bir ürün arama arka ucu gerekir. Bunun için iki seçenek vardır:

1. Seçenek: Sizin için dağıtılan demo arka ucunu kullanın

Google'ın sizin için önceden dağıttığı ürün arama arka ucunu kullanarak bu codelab'i kullanmaya devam edebilirsiniz. Demo arka ucu, Vision API Product Search hızlı başlangıç kılavuzunu izleyerek güncellenebilir.

2. Seçenek: Vision API Product Search hızlı başlangıç kılavuzunu izleyerek kendi arka ucunuzu oluşturun

Bu seçenek, daha sonra kendi ürün kataloğunuza ait bir arka uç oluşturmak için ürün arama arka ucunun nasıl oluşturulacağı hakkında ayrıntılı bilgi edinmek isteyenler için önerilir. Aşağıdakilere sahip olmanız gerekir:

Faturalandırmanın etkin olduğu bir Google Cloud hesabı. (Ücretsiz deneme hesabı olabilir.)
Projeler, hizmet hesapları gibi Google Cloud kavramlarıyla ilgili bazı bilgiler.

Bunu nasıl yapacağınızı daha sonra öğrenme yolunda öğrenebilirsiniz.

Önemli kavramları öğrenin

Ürün arama arka ucuyla etkileşime geçerken şu kavramları görürsünüz:

Ürün Grubu: Ürün grubu, bir ürün grubu için basit bir kapsayıcıdır. Ürün kataloğu, ürün seti ve ürünleri olarak temsil edilebilir.
Ürün: Ürün grubu oluşturduktan sonra, ürün oluşturabilir ve bunları ürün grubuna ekleyebilirsiniz.
Ürünün Referans Görüntüleri: Bunlar, ürünlerinizin çeşitli görünümlerini içeren resimlerdir. Görsel olarak benzer ürünleri aramak için referans resimler kullanılır.
Ürün arama: Ürün grubunuzu oluşturduktan ve ürün grubu dizine eklendikten sonra, Cloud Vision API'yi kullanarak ürün grubunu sorgulayabilirsiniz.

Hazır ürün kataloğunu anlama

Bu codelab'de kullanılan ürün arama demo arka ucu, Vision API Product Search ile yaklaşık yüz ayakkabı ve elbise resmi içeren bir ürün kataloğu kullanılarak oluşturulmuştur. Katalogda bazı resimler verilmiştir:

Hazır ürün kataloğundan örnekler

Ürün arama demo arka ucunu çağırın

Bir Google Cloud API anahtarı oluşturarak ve API anahtarına erişimi yalnızca uygulamanızla kısıtlayarak doğrudan API'den Vision API Ürün Arama'yı çağırabilirsiniz.

Bu codelab'i basitleştirmek için, API anahtarı ve kimlik doğrulaması konusunda endişelenmeden demo arka ucuna erişmenize olanak tanıyan bir proxy uç noktası ayarlanmıştır. Mobil uygulamadan HTTP isteğini alır, API anahtarını ekler ve isteği Vision API Product Search arka ucuna yönlendirir. Ardından proxy arka uçtaki yanıtı alır ve mobil uygulamaya döndürür.

Proxy uç noktası: https://us-central1-odml-codelabs.cloudfunctions.net/productSearch
Proxy davranışı: Uygun bir kimlik doğrulama üstbilgisi ekleyin ve API isteklerini Vision API Product Search arka ucuna yönlendirin. Örneğin, https://us-central1-odml-codelabs.cloudfunctions.net/productSearch/images:annotate adresine yönelik bir API çağrısı https://vision.googleapis.com/v1/images:annotate adresine yönlendirilir

Bu codelab'de Vision API Product Search'ün iki API'sini kullanacaksınız:

projects.locations.images.annotate: Sorgu resmini sunucuya gönderme ve sorgu resmine benzer şekilde hazır bir ürün kataloğundan ürünlerin listesi alma.
projects.locations.products.referenceImages.get: Yukarıdaki API çağrısında döndürülen ürün resimlerinin URI'larını kullanıcılara gösterir.

6. API istemcisini uygulama

Ürün arama iş akışını anlama

Arka uçla ürün araması yapmak için bu iş akışını uygulayın:

Sorgu resmini base64 dizesi olarak kodlayın
Sorgu projesiyle projects.locations.images.annotate uç noktasını çağırın
Önceki API çağrısından ürün görüntüsü kimliklerini alın ve arama sonucunda ürün resimlerinin URI'larını almak için projects.locations.products.referenceImages.get uç noktalarına gönderin.

API istemci sınıfını uygulama

Şimdi ProductSearchAPIClient adlı özel bir sınıfta ürün arama arka ucunu çağırmak için kod uygulayacaksınız. Başlangıç uygulamasında sizin için birkaç ortak kod uygulandı:

class ProductSearchAPIClient: Bu sınıf şu anda neredeyse boş ancak bu codelab'de daha sonra uygulayacağınız bazı yöntemler var.
fun convertBitmapToBase64(bitmap: Bitmap): Bit eşlemi, ürün arama arka ucuna göndermek için base64 temsiline dönüştürün
fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>: projects.locations.images.annotate API'sini çağırıp yanıtı ayrıştırın.
fun fetchReferenceImage(searchResult: ProductSearchResult): Task<ProductSearchResult>: projects.locations.products.referenceImages.get API'sini çağırın ve yanıtı ayrıştırın.
SearchResult.kt: Bu dosya, Vision API Product Search arka ucu tarafından döndürülen türleri temsil eden çeşitli veri sınıfları içerir.

API yapılandırmalarını belirtme

ProductSearchAPIClient sınıfına gittiğinizde ürün araması arka ucunun önceden tanımlanmış bazı yapılandırmalarını görürsünüz:

// 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 API'nin API uç noktasıdır. Demo arka ucuyla ilerlerken bunu proxy uç noktasına ayarlayın. Ancak kendi arka ucunuzu dağıtıyorsanız Cloud Vision API uç noktasına dönüştürmeniz gerekir. https://vision.googleapis.com/v1.
VISION_API_KEY, Cloud Projenizin API anahtarıdır. Proxy zaten kimlik doğrulamayı işlediğinden bu alanı boş bırakabilirsiniz.
VISION_API_PROJECT_ID, Cloud proje kimliğidir. odml-codelabs, demo arka ucunun dağıtıldığı Cloud projesidir.
VISION_API_LOCATION_ID, ürün arama arka ucunun dağıtıldığı Cloud konumudur. Demo arka ucunu us-east1 dağıttık.
VISION_API_PRODUCT_Set_ID, görsel olarak benzer ürünleri aramak istediğiniz ürün kataloğunun (Vision API terimindeki "ürün seti" olarak da bilinir) kimliğidir. Bir Cloud projesinde birden fazla katalog olabilir. product_set0, demo arka ucunun hazır ürün kataloğudur.

7. Product Search API'yi çağırın

API istek ve yanıt biçimini keşfetme

Resmin Google Cloud Storage URI'sını, web URL'sini veya base64 olarak kodlanmış dizesini Vision API Ürün Arama'ya ileterek belirli bir resme benzer ürünler bulabilirsiniz. Bu codelab'de, sorgu resmimiz yalnızca kullanıcının cihazında bulunduğu için base64 kodlu dize seçeneğini kullanacaksınız.

projects.locations.images.annotate uç noktasına bu istek JSON gövdesiyle bir POST isteği göndermeniz gerekir:

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

Belirtilmesi gereken bazı parametreler vardır:

base64 olarak kodlanmış resim: Sorgu resminin ikili veri verilerinin base64 temsili (ASCII dizesi).
project-id: GCP proje kimliğiniz.
location-id: Geçerli bir konum tanımlayıcısı.
product-set-id: İşlemi çalıştırmak istediğiniz ürün grubunun kimliği.

Ürün kataloğunuz yalnızca ayakkabı ve elbise resimleri içerdiği için ürün kategorilerini apparel-v2 olacak şekilde belirtin. Buradaki v2, giyim ürünü arama makinesi öğrenimi modelinin 2. sürümünü kullandığımız anlamına gelir.

İstek başarılı olursa sunucu, 200 OK HTTP durum kodu ve yanıtı JSON biçiminde döndürür. Yanıt JSON'da aşağıdaki iki sonuç türü bulunur:

productSearchResults: Tüm resim için eşleşen ürünlerin listesini içerir.
productGroupedResults - Resimde tanımlanan her bir ürün için sınırlayıcı kutu koordinatları ve eşleşen öğeler içerir.

Ürün zaten orijinal resimden kırpıldığı için sonuçları productSearchResults listesinde ayrıştırırsınız.

Ürün arama sonucu nesnesindeki bazı önemli alanlar şunlardır:

product.name: Bir ürünün projects/{project-id}/locations/{location-id}/products/{product_id} biçimindeki benzersiz tanımlayıcısı
product.score: Arama sonucunun sorgu resmine ne kadar benzer olduğunu gösteren bir değer. Daha yüksek değerler daha fazla benzerlik anlamına gelir.
product.image: Bir ürünün referans resminin projects/{project-id}/locations/{location-id}/products/{product_id}/referenceImages/{image_id} biçimindeki benzersiz tanımlayıcısı. Ekranda görünmesi için bu referans resminin URL'sini almak üzere projects.locations.products.referenceImages.get'e başka bir API isteği göndermeniz gerekir.
product.labels: Ürünün önceden tanımlanmış etiketlerinin listesi. Bu özellik, arama sonuçlarını elbise gibi yalnızca tek bir giyim kategorisini gösterecek şekilde filtrelemek isterseniz yararlı olur.

Sorgu resmini base64'e dönüştürme

Sorgu resmini base64 dize gösterimine dönüştürmeniz ve dizeyi, istek gövdesindeki JSON nesnesine eklemeniz gerekir.

ProductSearchAPIClient sınıfına gidin, boş convertBitmapToBase64 yöntemini bulun ve bu uygulamayla değiştirin:

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 çağrısını uygulama

Daha sonra, bir ürün arama API'si isteği oluşturun ve bunu arka ucuna gönderin. API isteğinde bulunmak için Volley'i kullanacaksınız ve Task API'yi kullanarak sonucu döndüreceksiniz.

ProductSearchAPIClient sınıfına geri dönün, boş annotateImage yöntemini bulun ve bunu aşağıdaki uygulamayla değiştirin:

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
}

Arama sonucunu kullanıcı arayüzünde gösterme

ProductSearchAPIClient'teki API kodu hazır. Kullanıcı arayüzü kodunu uygulamak için ProductSearchActivity etkinliğine geri dönün.

Etkinlikte searchByImage(queryImage: Bitmap) yöntemini tetikleyen bazı ortak kod zaten var. Arka ucu çağıracak ve kullanıcı arayüzündeki sonuçları şu anda boş olan yöntemde gösterecek kodu ekleyin.

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

showSearchResult yöntemi, API yanıtını ayrıştıran ve sizin için ekranda gösteren bazı ortak kod içerir.

Çalıştır

Şimdi Android Studio araç çubuğunda Çalıştır'ı () tıklayın. Uygulama yüklendikten sonra, önceden ayarlanmış resimlerden birine dokunun, algılanan bir nesneyi seçin, Ara düğmesine dokunun ve arka uçtan döndürülen arama sonuçlarını görün. Şuna benzer bir şey görürsünüz:

Ürün arama sonucu ekranının ekran görüntüsü

Arka uç, önceden ayarlanmış ürün kataloğundan görsel olarak benzer ürünlerin listesini zaten döndürür. Ancak ürün resminin hâlâ boş olduğunu görebilirsiniz. Bunun nedeni, projects.locations.images.annotate uç noktasının yalnızca projects/odml-codelabs/locations/us-east1/products/product_id77/referenceImages/image77 gibi ürün resim kimlikleri döndürmesidir. Ekranda göstermek için projects.locations.products.referenceImages.get uç noktasına başka bir API çağrısı yapmanız ve bu referans resminin URL'sini almanız gerekir.

8. Ürün referans resimlerini alın

API istek ve yanıt biçimini keşfetme

Ürün arama uç noktası tarafından döndürülen ürün resimlerinin URI'lerini almak için projects.locations.products.referenceImages.get uç noktasına boş bir istek gövdesine sahip bir GET HTTP isteği gönderirsiniz.

HTTP isteği aşağıdaki gibi görünür:

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

İstek başarılı olursa sunucu, 200 OK HTTP durum kodu ve yanıtı aşağıdaki biçimde JSON biçiminde döndürür:

{
  "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: Referans resim tanımlayıcısı
uri: Resmin Google Cloud Storage'daki (GCS) URI'sı.

Demo ürün arama arka ucunun referans resimleri, herkese açık okuma izni olacak şekilde ayarlanmıştır. Bu nedenle, GCS URI'sini kolayca bir HTTP URL'sine dönüştürebilir ve uygulama kullanıcı arayüzünde görüntüleyebilirsiniz. gs:// önekini yalnızca https://storage.googleapis.com/ ile değiştirmeniz gerekiyor.

API çağrısını uygulama

Daha sonra, bir ürün arama API'si isteği oluşturun ve bunu arka ucuna gönderin. Volley ve Task API'yi product search API çağrısına benzer şekilde kullanacaksınız.

ProductSearchAPIClient sınıfına geri dönün, boş fetchReferenceImage yöntemini bulun ve bunu aşağıdaki uygulamayla değiştirin:

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
}

Bu yöntem, ürün arama uç noktası tarafından döndürülen searchResult: ProductSearchResult nesnesini alır ve aşağıdaki adımları uygular:

Referans resmin GCS URI'sini almak için referans resim uç noktasını çağırır.
GCS URI'sini bir HTTP URL'sine dönüştürür.
searchResult nesnesinin httpUri özelliğini bu HTTP URL'si ile günceller.

İki API isteğini bağlama

annotateImage listesine geri dönün ve çağrıyı yapana ProductSearchResult listesi döndürmeden önce tüm referans resimlerini ve HTTP URL'lerini almak için URL'yi değiştirin.

Bu satırı bulun:

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

Daha sonra, bunu aşağıdaki uygulamayla değiştirin:

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

Referans referansların ekranda görüntülenmesi için ortak kod sizin için ProductSearchAdapter sınıfında zaten uygulanmış olduğundan uygulamayı yeniden çalıştırabilirsiniz.

Çalıştır

Şimdi Android Studio araç çubuğunda Çalıştır'ı ( ) tıklayın. Uygulama yüklendikten sonra, önceden ayarlanmış resimlere dokunun, bir algılama nesnesi seçin, arama sonuçlarını görmek için bu kez ürün resimleriyle birlikte Ara düğmesine dokunun.

Ürün arama sonuçları sizin için anlamlı mı?

9. Tebrikler!

Android uygulamanıza ürün görseli arama özelliği eklemek için Vision API Ürün Arama arka ucunu nasıl çağıracağınızı öğrendiniz. Uygulamanızı kurmak için ihtiyacınız olan tek şey bu!

İlerleyen zamanlarda, ürün kataloğunuzu kullanarak kendi arka ucunuzu oluşturabilirsiniz. Kendi ürün arka ucunuzu nasıl oluşturacağınızı ve API anahtarını mobil uygulamadan çağıracak şekilde nasıl ayarlayacağınızı öğrenmek için Ürün Görsel Arama öğrenme yolundaki sonraki codelab'e göz atın.

Değindiğimiz konular

Bir Android uygulamasından Vision API Product Search arka ucunu çağırma

Sonraki Adımlar

Kendi arka ucunuzu nasıl oluşturacağınızı öğrenmek için Vision API Ürün Arama ile ürün resim arama arka ucu oluşturma codelab'ine göz atın.
Cihazdaki Makine Öğrenimi web sitesindeki diğer öğrenme yollarını inceleyin.
Kendi Android uygulamanızda ürün arama özelliği oluşturun

Daha Fazla Bilgi

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