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

Android'de Vision API Product Search arka ucunu çağırma

1. Başlamadan önce

Telefonunuzun kamerasını bir nesneye doğrultup internette nereden satın alabileceğinizi bulabileceğiniz Google Lens demosunu gördünüz mü? Aynı özelliği uygulamanıza nasıl ekleyeceğinizi öğrenmek istiyorsanız bu codelab tam size göre. Bu modül, mobil uygulamalara ürün görseli arama özelliği eklemeyi öğreten bir öğrenme rotasının parçasıdır.

Bu codelab'de, Vision API Ürün Arama ile oluşturulmuş bir arka uca mobil uygulamadan nasıl çağrı yapılacağını öğreneceksiniz. Bu arka uç, bir sorgu resmi alabilir ve ürün kataloğunda görsel olarak benzer ürünleri arayabilir.

Sorgu resmindeki nesneleri algılamak ve kullanıcıların hangi ürünü aramak istediklerini seçmelerine olanak tanımak için ML Kit Nesne Algılama ve İzleme'yi kullanma da dahil olmak üzere görsel ürün arama özelliği oluşturmanın kalan adımları hakkında öğrenme rotasında bilgi edinebilirsiniz.

Ne oluşturacaksınız?

Bu codelab'de, giriş görüntüsündeki nesneleri algılayabilen bir Android uygulamasıyla başlayacaksınız. Kullanıcının seçtiği nesneyi alıp ürün arama arka ucuna göndermek ve arama sonucunu ekranda göstermek için kod yazacaksınız.
Sonunda, sağdaki resme benzer bir görüntü görmelisiniz.

Neler öğreneceksiniz?

Android uygulamasından Vision API Ürün Arama API'lerini çağırma ve yanıtını ayrıştırma

Gerekenler

Android Studio'nun yeni bir sürümü (4.1.2 veya sonraki sürümler)
Android Studio Emulator veya fiziksel bir Android cihaz
Örnek kod
Kotlin ile Android geliştirme hakkında temel düzeyde bilgi sahibi olmak

Bu codelab, Vision API Product Search'e odaklanmaktadır. Alakalı olmayan kavramlar ve kod blokları incelenmez ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulur.

2. Vision API Product Search hakkında

Vision API Product Search, Google Cloud'da kullanıcıların bir ürün kataloğunda görsel olarak benzer ürünleri aramasına olanak tanıyan bir özelliktir. Perakendeciler, her biri ürünü belirli bakış açılarından görsel olarak açıklayan referans resimler içeren ürünler oluşturabilir. Ardından bu ürünleri ürün kümelerine (ör. ürün kataloğu) ekleyebilirsiniz. Vision API Product Search şu anda ev eşyası, giyim, oyuncak, paketlenmiş ürün ve genel olmak üzere aşağıdaki ürün kategorilerini desteklemektedir.

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

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

Kodu İndirme

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

İndirilen ZIP dosyasını açın. Bu işlem, ihtiyacınız olan tüm kaynakları içeren bir kök klasörü (odml-pathways-main) 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'de temel alacağınız başlangıç kodu.
final: Tamamlanmış örnek uygulamanın kodu.

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

Uygulamayı Android Studio'ya aktarma

Başlangıç uygulamasını Android Studio'ya aktararak başlayın.

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

Başlangıç uygulamasını çalıştırma

Projeyi Android Studio'ya aktardığınıza göre artık uygulamayı ilk kez çalıştırmaya hazırsınız. Android cihazınızı USB ile ana makinenize bağlayın veya Android Studio emülatörünü başlatın ve Android Studio araç çubuğunda Çalıştır'ı ( ) tıklayın.

(Bu düğme devre dışıysa yalnızca starter/app/build.gradle dosyasını içe aktardığınızdan emin olun. Deponun tamamını içe aktarmayın.)

Uygulama artık Android cihazınızda başlatılmış olmalıdır. Bu özellik, nesne algılama özelliğine sahiptir: Görüntüdeki moda ürünlerini algılayıp nerede olduklarını gösterir. Onaylamak için hazır fotoğrafları deneyin.

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

Ardından, uygulamayı algılanan nesneleri Vision API Ürün Arama arka ucuna gönderecek ve arama sonuçlarını ekranda gösterecek şekilde genişleteceksiniz.

4. Nesne seçimini işleme

Kullanıcıların, algılanan bir nesneye dokunarak seçmesine izin ver

Şimdi de kullanıcıların resimden bir nesne seçip ürün araması başlatmasına olanak tanıyan kodu ekleyeceksiniz. Başlangıç uygulaması, resimdeki nesneleri algılama özelliğine zaten sahiptir. Resimde birden fazla nesne olabilir veya algılanan nesne, resmin yalnızca küçük bir bölümünü kaplıyor olabilir. Bu nedenle, kullanıcının ürün arama için hangi nesneyi kullanmak istediğini belirtmek üzere algılanan nesnelerden birine dokunması gerekir.

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

Codelab'i basit tutmak ve makine öğrenimine odaklanmak için başlangıç uygulamasında, kullanıcının hangi nesneye dokunduğunu tespit etmenize yardımcı olacak bazı ortak metin Android kodları uygulanmıştır. Resmi ana etkinlikte (ObjectDetectorActivity) gösteren görünüm aslında Android OS'nin varsayılan ImageView'ını genişleten özel bir görünümdür (ImageClickableView). Aşağıdakiler de dahil olmak üzere bazı kullanışlı yardımcı yöntemler uygular:

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

Kullanıcının algılanan nesnelere dokunmasını işleyecek kodu 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ı söyler. Endişelenmeyin, bunu biraz sonra uygulayacaksınız.)

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

Kullanıcı ekrandaki algılanan nesnelerden herhangi 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ğdaki elbiseli kişiye dokunursa dinleyici aşağıdaki gibi objectImage ile tetiklenir.

onObjectClickListener'a iletilen kırpılmış resim örneği

Kırpılan resmi ürün arama etkinliğine gönderme

Şimdi sorgu resmini Vision API Product Search arka ucuna gönderme mantığını ayrı bir etkinlikte (ProductSearchActivity) uygulayacaksınız.

Tüm kullanıcı arayüzü bileşenleri önceden uygulandığından ürün arama arka ucuyla iletişim kuracak kodu yazmaya odaklanabilirsiniz.

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

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

Android Studio'ya geri 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 işlem yapar:

Kırpılan resmi alır ve PNG dosyasına dönüştürür.
Ürün arama sırasını yürütmek için ProductSearchActivity başlatır.
ProductSearchActivity'nın daha sonra sorgu resmi olarak kullanmak üzere alabilmesi için kırpılmış resim URI'sini start-activity amacına dahil eder.

Unutmamanız gereken birkaç nokta vardır:

Nesneleri algılama ve arka uca sorgu gönderme mantığı, yalnızca codelab'in anlaşılmasını kolaylaştırmak için 2 etkinliğe bölünmüştür. Bunları uygulamanızda nasıl kullanacağınıza siz karar verirsiniz.
Sorgu resmi, Android amacının 1 MB boyut sınırından daha büyük olabileceğinden sorgu resmini bir dosyaya yazmanız ve etkinlikler arasında resim URI'sini iletmeniz gerekir.
Sorgu resmini kayıpsız bir biçim olan PNG olarak saklayabilirsiniz.

Ürün arama etkinliğinde sorgu resmini alma

ProductSearchActivity bölümünde, sorgu resmini almak ve ekranda göstermek için gereken kod, başlangıç uygulamasında zaten uygulanmıştır.

onCreate yöntemine gidin ve bu kodun zaten orada olduğunu onaylayı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ırma

Şimdi Android Studio araç çubuğunda Run'ı ( ) tıklayın.

Uygulama yüklendikten sonra herhangi bir hazır resme dokunun ve algılanan nesnelerden birini seçin.

ProductSearchActivity simgesinin, dokunduğunuz resimle birlikte göründüğünü onaylayın. Arama düğmesi henüz çalışmıyor ancak bir sonraki adımda bu özelliği kullanıma sunacağız.

Tespit edilen nesnelerden birine dokunduktan sonra benzer bir ekran görürsünüz.

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

Ürün resmi arama arka ucunu oluşturma

Bu codelab için Vision API Product Search ile oluşturulmuş bir ürün arama arka ucu gerekir. Bunu yapmanın iki yolu vardır:

1. seçenek: Sizin için dağıtılan demo arka uç sistemini kullanma

Google'ın sizin için önceden dağıttığı ürün arama arka ucunu kullanarak bu codelab'e devam edebilirsiniz. Demo arka ucu, Vision API Product Search hızlı başlangıç kılavuzu takip edilerek kopyalanabilir.

2. seçenek: Vision API Product Search hızlı başlangıç kılavuzunu takip ederek kendi arka uçunuzu oluşturun

Bu seçenek, ürün arama arka ucu oluşturma hakkında ayrıntılı bilgi edinmek isteyen ve daha sonra kendi ürün kataloğu için bir arka uç oluşturmak isteyen kullanıcılar için önerilir. Aşağıdakilere sahip olmanız gerekir:

Faturalandırmanın etkinleştirildiği bir Google Cloud hesabı. (Ücretsiz deneme hesabı olabilir.)
Projeler ve hizmet hesapları gibi Google Cloud kavramları hakkında bilgi sahibi olmanız gerekir.

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

Önemli kavramları öğrenme

Ürün arama arka ucuyla etkileşim kurarken aşağıdaki kavramlarla karşılaşacaksınız:

Ürün grubu: Ürün grubu, bir grup ürün için basit bir kapsayıcıdır. Ürün kataloğu, ürün grubu ve ürünleri olarak gösterilebilir.
Ürün: Ürün grubu oluşturduktan sonra ürün oluşturup bunları ürün grubuna ekleyebilirsiniz.
Ürünün referans resimleri: Ürünlerinizin çeşitli görünümlerini içeren resimlerdir. Referans resimler, görsel olarak benzer ürünleri aramak için kullanılır.
Ürün arama: Ürün kümenizi oluşturup ürün kümesi dizine eklendikten sonra Cloud Vision API'yi kullanarak ürün kümesini sorgulayabilirsiniz.

Önceden ayarlanmış ürün kataloğunu anlama

Bu codelab'de kullanılan ürün arama demosu arka ucu, Vision API Ürün Arama ve yaklaşık yüz ayakkabı ile elbise resminden oluşan bir ürün kataloğu kullanılarak oluşturulmuştur. Katalogdaki bazı resimler:

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

Ürün arama demosu arka ucunu çağırma

Google Cloud API anahtarı oluşturup API anahtarına erişimi yalnızca uygulamanızla kısıtlayarak Vision API Product Search'ü doğrudan bir mobil uygulamadan çağırabilirsiniz.

Bu codelab'i basit tutmak için, API anahtarı ve kimlik doğrulama konusunda endişelenmeden demo arka ucuna erişmenizi sağlayan bir proxy uç noktası ayarlandı. Mobil uygulamadan gelen 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çtan 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 yapılan 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 önceden ayarlanmış bir ürün kataloğundan, sorgu resmine görsel olarak benzeyen ürünlerin listesini alma.
projects.locations.products.referenceImages.get: Kullanıcılara göstermek için yukarıdaki API çağrısında döndürülen ürün resimlerinin URI'lerini alma.

6. API istemcisini uygulama

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

Arka uçta ürün araması yapmak için aşağıdaki iş akışını uygulayın:

Sorgu resmini Base64 dizesi olarak kodlayın.
Sorgu resmiyle projects.locations.images.annotate uç noktasını çağırın.
Önceki API çağrısından ürün resmi kimliklerini alın ve arama sonucundaki ürün resimlerinin URI'lerini 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 kodu uygulayacaksınız. Başlangıç uygulamasında sizin için bazı standart kodlar uygulanmıştır:

class ProductSearchAPIClient: Bu sınıf şu anda çoğunlukla boş olsa da bu Codelab'de daha sonra uygulayacağınız bazı yöntemler içerir.
fun convertBitmapToBase64(bitmap: Bitmap): Ürün arama arka ucuna göndermek için bir Bitmap örneğini base64 gösterimine dönüştürme
fun annotateImage(image: Bitmap): Task<List<ProductSearchResult>>: projects.locations.images.annotate API'sini çağırın ve 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 dosyada, Vision API Product Search arka ucu tarafından döndürülen türleri temsil eden çeşitli veri sınıfları bulunur.

API yapılandırmalarını belirtme

ProductSearchAPIClient sınıfına gidin. Ürün arama arka ucunun bazı yapılandırmalarının zaten tanımlandığı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 ucuna devam ederken bunu proxy uç noktasına ayarlayın. Ancak kendi arka uçunuzu dağıtırsanız bunu Cloud Vision API uç noktasına değiştirmeniz gerekir. https://vision.googleapis.com/v1.
VISION_API_KEY, Cloud projenizin API anahtarıdır. Kimlik doğrulama işlemi zaten proxy tarafından yapıldığından bu alanı boş bırakabilirsiniz.
VISION_API_PROJECT_ID, Cloud projesi 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. us-east1, demo arka ucunu dağıttığımız yerdir.
VISION_API_PRODUCT_SET_ID, görsel olarak benzer ürünleri aramak istediğiniz ürün kataloğunun (Vision API teriminde "ürün grubu" olarak da bilinir) kimliğidir. Bir Cloud projesinde birden fazla katalog olabilir. product_set0, demo arka ucunun önceden ayarlanmış ürün kataloğudur.

7. Ürün Arama API'sini çağırma

API isteği ve yanıt biçimini keşfedin

Bir resmin Google Cloud Storage URI'sini, web URL'sini veya base64 olarak kodlanmış dizesini Vision API Product Search'e ileterek ilgili resme benzer ürünler bulabilirsiniz. Bu codelab'de, sorgu resmimiz yalnızca kullanıcının cihazında bulunduğundan base64 olarak kodlanmış dize seçeneğini kullanacaksınız.

Bu istek JSON gövdesiyle projects.locations.images.annotate uç noktasına 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-encoded-image: Sorgu resminin ikili verilerinin base64 gösterimi (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ğunuzda yalnızca ayakkabı ve elbise resimleri bulunduğundan productCategories değerini apparel-v2 olarak belirtin. Buradaki v2, giyim ürünü arama makine öğrenimi modelinin 2. sürümünü kullandığımızı gösterir.

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

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

Ürün, 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 benzediğini gösteren değer. 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 resmin URL'sini almak üzere projects.locations.products.referenceImages.get adresine başka bir API isteği göndermeniz gerekir.
product.labels: Ürünün önceden tanımlanmış etiketlerinin listesi. Bu, arama sonuçlarını yalnızca tek bir giyim kategorisini (ör. elbiseler) gösterecek şekilde filtrelemek istediğinizde 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

Ardından, bir Product Search API isteği oluşturun ve arka uca gönderin. API isteğini yapmak için Volley'i, sonucu döndürmek için ise Task API'yi kullanacaksınız.

ProductSearchAPIClient sınıfına geri dönün, boş annotateImage yöntemini bulun ve bu 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

Artık ProductSearchAPIClient'taki API kodu hazır. Kullanıcı arayüzü kodunu uygulamak için etkinlik ProductSearchActivity'ye geri dönün.

Etkinlikte, searchByImage(queryImage: Bitmap) yöntemini tetikleyen bazı standart kodlar zaten var. Arka uca çağrı yapmak ve sonuçları kullanıcı arayüzünde göstermek için kodu şu anda boş olan bu yönteme 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ırıp ekranda gösteren bazı standart kodlar içerir.

Çalıştırın

Şimdi Android Studio araç çubuğunda Run'ı ( ) tıklayın. Uygulama yüklendikten sonra herhangi bir hazır resme 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üyor. 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 resmi kimliklerini 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 resmin URL'sini almanız gerekir.

8. Ürün referans resimlerini alma

API isteği ve yanıt biçimini keşfedin

Ü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ş istek gövdesi içeren bir GET HTTP isteği gönderirsiniz.

HTTP isteği şu şekilde 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 kodunu ve yanıtı aşağıdaki gibi 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 görsel tanımlayıcısı
uri: Google Cloud Storage'daki (GCS) resmin URI'si.

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österebilirsiniz. Yalnızca gs:// önekini https://storage.googleapis.com/ ile değiştirmeniz gerekir.

API çağrısını uygulama

Ardından, bir Product Search API isteği oluşturun ve arka uca gönderin. Volley ve Task API'yi, ürün arama 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 bu 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 bir searchResult: ProductSearchResult nesnesi alır ve ardından şu adımları uygular:

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

İki API isteğini bağlama

annotateImage öğesine geri dönün ve ProductSearchResult listesini arayana döndürmeden önce tüm referans resimlerin HTTP URL'lerini alacak şekilde değiştirin.

Şu satırı bulun:

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

Ardından, bu 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 resimleri ekranda göstermek için gereken standart kod, ProductSearchAdapter sınıfında sizin için zaten uygulanmıştır. Bu nedenle, uygulamayı yeniden çalıştırmaya devam edebilirsiniz.

Çalıştırın

Şimdi Android Studio araç çubuğunda Run'ı ( ) tıklayın. Uygulama yüklendikten sonra herhangi bir hazır resme dokunun, algılanan bir nesneyi seçin, Ara düğmesine dokunarak arama sonuçlarını (bu kez ürün resimleriyle birlikte) görün.

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

9. Tebrikler!

Android uygulamanıza ürün resmi arama özelliği eklemek için Vision API Product Search arka ucunu nasıl çağıracağınızı öğrendiniz. Uygulamanızı kullanmaya başlamak için ihtiyacınız olan her şeyi öğrendiniz.

Devam ederken ürün kataloğunuzu kullanarak kendi arka uçunuzu oluşturmak isteyebilirsiniz. Kendi arka uçunuzu nasıl oluşturacağınızı ve API anahtarını mobil uygulamadan çağırmak için nasıl ayarlayacağınızı öğrenmek üzere Ürün Resmi Arama öğrenme rotasındaki sonraki codelab'e göz atın.

İşlediğimiz konular

Vision API Ürün Arama arka ucunu Android uygulamasından çağırma

Sonraki Adımlar

Kendi arka uçunuzu nasıl oluşturacağınızı öğrenmek için Vision API Product Search ile ürün resmi arama arka ucu oluşturma adlı codelab'e göz atın.
Cihaz Üzerinde Makine Öğrenimi web sitesindeki diğer öğrenme rotalarına göz atın.
Ürün arama özelliğini kendi Android uygulamanıza entegre etme

Daha Fazla Bilgi

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

Android'de Vision API Product Search arka ucunu çağırma Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Başlamadan önce

Ne oluşturacaksınız?

Neler öğreneceksiniz?

Gerekenler

2. Vision API Product Search hakkında

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

Kodu İndirme

Uygulamayı Android Studio'ya aktarma

Başlangıç uygulamasını çalıştırma

4. Nesne seçimini işleme

Kullanıcıların, algılanan bir nesneye dokunarak seçmesine izin ver

Kırpılan resmi ürün arama etkinliğine gönderme

Ürün arama etkinliğinde sorgu resmini alma

Uygulamayı çalıştırma

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

Ürün resmi arama arka ucunu oluşturma

1. seçenek: Sizin için dağıtılan demo arka uç sistemini kullanma

2. seçenek: Vision API Product Search hızlı başlangıç kılavuzunu takip ederek kendi arka uçunuzu oluşturun

Önemli kavramları öğrenme

Önceden ayarlanmış ürün kataloğunu anlama

Ürün arama demosu arka ucunu çağırma

6. API istemcisini uygulama

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

API istemci sınıfını uygulama

API yapılandırmalarını belirtme

7. Ürün Arama API'sini çağırma

API isteği ve yanıt biçimini keşfedin

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

API çağrısını uygulama

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

Çalıştırın

8. Ürün referans resimlerini alma

API isteği ve yanıt biçimini keşfedin

API çağrısını uygulama

İki API isteğini bağlama

Çalıştırın

9. Tebrikler!

İşlediğimiz konular

Sonraki Adımlar

Daha Fazla Bilgi

Android'de Vision API Product Search arka ucunu çağırma