ML Kit ile görsel bir ürün araması oluşturmak için görüntülerdeki nesneleri tespit edin: Android

1. Başlamadan önce

Telefon kameranızı bir nesneye doğrultarak internetten 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 eğitim, mobil uygulamaya ürün resmi arama özelliğini nasıl ekleyeceğinizi öğreten bir öğrenme yolunun parçasıdır.

Bu codelab'de, ürün resmi arama özelliği oluşturmanın ilk adımını öğreneceksiniz: resimlerdeki nesneleri algılama ve kullanıcının aramak istediği nesneleri seçmesine izin verme. Bu özelliği oluşturmak için ML Kit Nesne Algılama ve İzleme'yi kullanacaksınız.

Vision API Ürün Araması ile ürün arama arka ucu oluşturma da dahil olmak üzere kalan adımlar hakkında bilgi edinmek için öğrenim rotasını inceleyebilirsiniz.

Oluşturacağınız uygulama

Bu codelab'de, ML Kit ile bir Android uygulaması oluşturacaksınız. Uygulamanız, belirli bir görüntüdeki nesneleri algılamak için ML Kit Nesne Algılama ve İzleme API'sini kullanır. Ardından kullanıcı, ürün veritabanımızda aramak istediği bir nesneyi seçer. Sonuçta sağdaki resme benzer bir şey görürsünüz.

Neler öğreneceksiniz?

• ML Kit SDK'sını Android uygulamanıza entegre etme
• ML Kit Nesne Algılama ve İzleme API'si

Gerekenler

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

Bu codelab, ML Kit'e odaklanmaktadır. Diğer kavramlar ve kod blokları incelenmez ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulur.

2. Hazırlanın

Kodu İndirme

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

Kaynak kodu indir

İndirilen ZIP dosyasının sıkıştırması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/codelab1/android alt dizinindeki kaynaklara ihtiyacınız vardır.

mlkit-android deposundaki object-detection alt dizini iki dizin içerir:

• starter: Bu codelab için temel aldığınız başlangıç kodu.
• final: Tamamlanmış örnek uygulamanın tamamlanmış kodu.

3. Projeye ML Kit Nesne Algılama ve İzleme API'sini ekleme

Uygulamayı Android Studio'ya aktarma

starter uygulamasını Android Studio'ya aktararak başlayın.

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

ML Kit Nesne Algılama ve İzleme için bağımlılıkları ekleme

ML Kit bağımlılıkları, ML Kit ODT SDK'sını uygulamanıza entegre etmenize olanak tanır.

Projenizin app/build.gradle dosyasına gidin ve bağımlılık öğesinin zaten orada olduğunu onaylayın:

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

Projenizi Gradle dosyalarıyla senkronize etme

Tüm bağımlılıkların uygulamanızda kullanılabildiğinden emin olmak için bu noktada projenizi gradle dosyalarıyla senkronize etmeniz gerekir.

Android Studio araç çubuğundan Projeyi Gradle Dosyalarıyla Senkronize Et'i ( ) seçin.

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

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

Projeyi Android Studio'ya içe aktardığınıza ve ML Kit Nesne Algılama ve İzleme için bağımlılıkları eklediğinize göre, uygulamayı ilk kez çalıştırmaya hazırsınız.

Android cihazınızı USB üzerinden 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.

Uygulamayı çalıştırma ve keşfetme

Uygulama, Android cihazınızda başlatılır. Bu kod, fotoğraf çekmenize veya önceden ayarlanmış bir resim seçmenize ve bu kod laboratuvarında oluşturacağınız bir nesne algılama ve izleme ardışık düzenine beslemenize olanak tanıyan bazı standart kodlar içerir. Kod yazmadan önce uygulamayı biraz inceleyin:

Öncelikle, alt kısımda bir düğme ( ) vardır.

• Cihazınıza/emülatörünüze entegre edilmiş kamera uygulamasını başlatın.
• Kamera uygulamanızda fotoğraf çekin
• Başlatıcı uygulamasında çekilen resmi alma
• resmi gösterme

"Fotoğraf çek" düğmesini deneyin. Talimatları uygulayarak fotoğraf çekin, fotoğrafı kabul edin ve başlatıcı uygulamasında gösterildiğini gözlemleyin.

İkinci olarak, aralarından seçim yapabileceğiniz 3 hazır resim vardır. Android emülatöründe çalışıyorsanız bu resimleri daha sonra nesne algılama kodunu test etmek için kullanabilirsiniz.

1. 3 hazır resimden bir resim seçin.
2. Resmin daha büyük görünümde gösterildiğini görebilirsiniz.

5. Cihaz üzerinde nesne algılama ekleme

Bu adımda, resimlerdeki nesneleri algılamak için başlangıç uygulamasına işlevi ekleyeceksiniz. Önceki adımda gördüğünüz gibi, başlangıç uygulaması, cihazdaki kamera uygulamasıyla fotoğraf çekmek için şablon kod içerir. Codelab'i bir Android emülatöründe çalıştırıyorsanız uygulamada, nesne algılamayı denemeniz için önceden ayarlanmış 3 resim de vardır.

Hazır ayarlanmış resimlerden veya kamera uygulamasıyla fotoğraf çekerek bir resim seçtiğinizde şablon kod, bu resmin kodunu çözerek Bitmap örneğine dönüştürür, ekranda gösterir ve resimle birlikte runObjectDetection yöntemini çağırır.

Bu adımda, nesne algılama yapmak için runObjectDetection yöntemine kod ekleyeceğiz.

Bir resimde cihaz üzerinde nesne algılamayı ayarlama ve çalıştırma

ML Kit ODT'yi ayarlamak için 3 API ile yalnızca 3 basit adım vardır.

• Resim hazırlama: InputImage
• algılayıcı nesnesi oluşturun: ObjectDetection.getClient(options)
• Yukarıdaki 2 nesneyi bağlayın: process(image)

Bu işlemleri MainActivity.kt dosyasındaki **runObjectDetection(bitmap: Bitmap)**işlevinde yapabilirsiniz.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

Şu anda işlev boş. ML Kit ODT'yi entegre etmek için aşağıdaki adımlara geçin. Bu süreçte Android Studio, gerekli içe aktarma işlemlerini eklemenizi ister.

• com.google.mlkit.vision.common.InputImage
• com.google.mlkit.vision.objects.ObjectDetection
• com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

1. adım: InputImage oluşturun

ML Kit, Bitmap'den InputImage oluşturmak için basit bir API sağlar. Ardından ML Kit API'lerine bir InputImage besleyebilirsiniz.

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

Yukarıdaki kodu runObjectDetection(bitmap:Bitmap) dosyasının üst kısmına ekleyin.

2. adım: Algılayıcı örneği oluşturun

ML Kit, Oluşturucu Tasarım Deseni'ni izler. Yapılandırmayı oluşturucuya iletir ve ardından ondan bir algılayıcı edinirsiniz. Yapılandırabileceğiniz 3 seçenek vardır (kalın olan, codelab'de kullanılır):

• algılayıcı modu (tek resim veya yayın)
• algılama modu (tek veya çoklu nesne algılama)
• sınıflandırma modu (açık veya kapalı)

Bu kod laboratuvarı, tek resimli birden çok nesne algılama ve sınıflandırma içindir. Şimdi bunu yapalım:

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

3. adım: Tarayıcıya resim besleyin

Nesne algılama ve sınıflandırma işlemi ayarsızdır:

• process() aracılığıyla algılayıcıya bir resim gönderirseniz
• algılayıcı bu konuda oldukça iyi çalışıyor
• algılayıcı, sonucu geri arama yoluyla size bildirir.

Aşağıdaki kod tam da bunu yapar (fun runObjectDetection(bitmap:Bitmap)): içindeki mevcut koda kopyalayıp ekler).

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

İşlem tamamlandığında algılayıcı sizi aşağıdakilerle bilgilendirir:

1. Algılanan toplam nesne sayısı
2. Algılanan her nesne

• trackingId: Çerçeveler arasında izlemek için kullandığınız bir tam sayı (bu kod laboratuvarında KULLANILMAZ)
• boundingBox: Nesnenin sınırlayıcı kutusu
• labels: algılanan nesnenin etiketlerinin listesi (yalnızca sınıflandırma etkin olduğunda)
• index (Bu etiketin dizini)
• text ("Giyim", "Yiyecek", "Ev Eşyaları", "Yer", "Bitki" gibi öğeleri içeren bu etiketin metnini alın)
• confidence (0,0 ile 1,0 arasında değişen bir kayan nokta. 1,0 %100 anlamına gelir.)

Kodun, algılanan sonuçları debugPrint() ile Logcat'e yazdırdığını fark etmişsinizdir. MainActivity sınıfına ekleyin:

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

Artık algılama için resimleri kabul etmeye hazırsınız.

Android Studio araç çubuğunda Çalıştır'ı ( ) tıklayarak codelab'i çalıştırın. Önceden ayarlanmış bir resim seçmeyi deneyin veya fotoğraf çekin, ardından IDE'deki logcat penceresine( ) bakın. Aşağıdakine benzer bir şey görürsünüz:

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

Bu, dedektörün şu nesnelerden 3 tanesini gördüğü anlamına gelir:

• kategorileri Moda ürünü ve Ev ürünü'dür.
• Bilinmeyen bir sınıf olduğu için 2. sınıf için kategori döndürülmez.
• hayır trackingId (bu tek resim algılama modu olduğundan)
• boundingBox dikdörtgenindeki konum (ör. (481, 2021) - (2426, 3376))
• algılayıcı, 1. öğenin Moda ürünü (%90) olduğundan oldukça emin (elbisedir)

Teknik olarak, ML Kit Nesne Algılama'nın çalışmasını sağlamak için ihtiyacınız olan her şeye şu anda sahipsiniz. Tebrikler.

Evet, kullanıcı arayüzü tarafında henüz başladığınız aşamadasınız ancak daha iyi bir deneyim oluşturmak için kullanıcı arayüzünde algılanan sonuçlardan (ör. sınırlayıcı kutuyu çizme) yararlanabilirsiniz. Bir sonraki adım, tespit edilen sonuçları görselleştirmek.

6. Algılama sonuçlarını işleme sonrası işleme

Önceki adımlarda, algılanan sonucu logcat'e yazdınız: basit ve hızlı.

Bu bölümde, resimdeki sonucu kullanacaksınız:

• Resim üzerinde sınırlayıcı kutu çizme
• Kategori adını ve güven puanını sınırlayıcı kutunun içine çizin

Görselleştirme yardımcı programlarını anlama

Kod laboratuvarının içinde, algılama sonucunu görselleştirmenize yardımcı olacak bazı standart kodlar vardır. Görselleştirme kodumuzu basitleştirmek için aşağıdaki yardımcı programlardan yararlanın:

• class ImageClickableView Bu, algılama sonucuyla görselleştirme ve etkileşim için bazı kullanışlı yardımcı programlar sağlayan bir resim görüntüleme sınıfıdır.
• fun drawDetectionResults(results: List<DetectedObject>) Bu yöntem, algılanan her nesnenin ortasına beyaz daireler çizer.
• 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 kullanılan bir geri çağırma işlevidir. Görsel olarak benzer bir sonuç elde etmek için daha sonraki bir kod laboratuvarındaki resim arama arka ucuna bu kırpılmış resmi göndereceksiniz. Bu codelab'de henüz bu yöntemi kullanmıyoruz.

ML Kit algılama sonucunu gösterme

ML Kit nesne algılama sonucunu giriş resminin üstünde göstermek için görselleştirme yardımcı programlarını kullanın.

debugPrint()'yi çağırdığınız yere gidin ve altına aşağıdaki kod snippet'ini ekleyin:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Çalıştırın

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

Uygulama yüklendikten sonra kamera simgesinin bulunduğu düğmeye basın, kameranızı bir nesneye doğrultun, fotoğraf çekin, fotoğrafı kabul edin (Kamera uygulamasında) veya önceden ayarlanmış resimlere kolayca dokunabilirsiniz. Algılama sonucunu görürsünüz. Düğmeye tekrar basın veya birkaç kez tekrarlamak için başka bir resim seçin ve en son ML Kit ODT'yi deneyimleyin.

7. Tebrikler!

Uygulamanıza nesne algılama özellikleri eklemek için ML Kit'i kullandınız:

• 3 API ile 3 adım
• Giriş resmi oluşturma
• Algılayıcı Oluşturma
• Resmi algılayıcıya gönderme

Hepsi bu kadar.

Ele aldığımız konular

• Android uygulamanıza ML Kit Nesne Algılama ve İzleme özelliğini ekleme
• Görüntülerdeki nesneleri algılamak için ML Kit'te cihaz üzerinde nesne algılama ve izlemeyi kullanma

Sonraki Adımlar

• Tespit edilen nesnenin bir ürün arama arka ucuna nasıl gönderileceği ve arama sonuçlarının nasıl gösterileceği hakkında bu kod laboratuvarını deneyin.
• Algılama ve sınıflandırma doğruluğunu ve performansını deneyimlemek için daha fazla resim ve canlı video içeren ML Kit ODT ile daha fazlasını keşfedin
• Özel bir modeli nasıl eğiteceğinizi öğrenmek için Nesne algılama ile daha ileri seviyeye geçin öğrenme yoluna göz atın.
• Nesne algılama live-camera ve static-image için Material Design önerileri hakkında bilgi edinin.
• ML Kit ODT'yi kendi Android uygulamanıza uygulama

Daha Fazla Bilgi

• https://developers.google.com/ml-kit/vision/object-detection