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

Telefonunuzun kamerasını bir nesneye doğrultup bu nesneyi 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, ü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 Product Search ile ürün arama arka ucu oluşturma da dahil olmak üzere kalan adımlar hakkında öğrenme rotasında bilgi edinebilirsiniz.

Ne oluşturacaksınız?

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 kullanacak. Ardından kullanıcı, ürün veritabanımızda aramak istediği bir nesneyi seçer.
Sonunda, sağdaki resme benzer bir görüntü görmelisiniz.

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 yeni bir sürümü (4.1.2 veya daha yeni)
Android Studio Emulator veya fiziksel bir Android cihaz
Örnek kod
Kotlin ile Android geliştirme hakkında temel düzeyde bilgi sahibi olma

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 paylaşılır.

2. Hazırlanın

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/codelab1/android alt dizinindeki kaynaklara ihtiyacınız olacak.

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

starter: Bu codelab'de temel alacağınız başlangıç kodu.
final: Tamamlanmış örnek uygulama için kod.

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

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çin ve daha önce indirdiğiniz kaynak kodundan starter klasörünü seçin.

ML Kit Nesne Algılama ve İzleme'nin bağımlılıklarını 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ığın zaten orada olduğunu doğrulayı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ılabilir olduğundan 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 yalnızca starter/app/build.gradle dosyasını içe aktardığınızdan emin olun. Deponun tamamını içe aktarmayın.)

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

Projeyi Android Studio'ya aktardığınıza ve ML Kit Nesne Algılama ve İzleme bağımlılıklarını eklediğinize göre 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.

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

Uygulama, Android cihazınızda başlatılmalıdır. Fotoğraf çekmenize veya önceden ayarlanmış bir resmi seçip bu codelab'de oluşturacağınız nesne algılama ve izleme ardışık düzenine aktarmanıza olanak tanıyan bazı ortak metin kodları içerir. Kod yazmadan önce uygulamayı biraz inceleyin:

İlk olarak, altta Düğme ( ) bulunur.

Cihazınızda/emülatörünüzde entegre kamera uygulamasını başlatın.
Kamera uygulamanızda fotoğraf çekme
Başlangıç uygulamasında çekilen resmi alma
resmi görüntüleme

"Fotoğraf çek" düğmesini deneyin. Talimatları uygulayarak fotoğraf çekin, fotoğrafı kabul edin ve başlangıç uygulamasında gösterilmesini izleyin.

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

3 hazır resimden birini seçin.
Resmin daha büyük görünümde gösterildiğini doğrulayın.

5. Cihaz üzerinde nesne algılama ekleme

Bu adımda, başlangıç uygulamasına resimlerdeki nesneleri algılama işlevini ekleyeceksiniz. Önceki adımda gördüğünüz gibi, başlangıç uygulaması cihazdaki kamera uygulamasıyla fotoğraf çekmek için ortak metin kodu içerir. Android emülatörde codelab'i çalıştırıyorsanız uygulamada nesne algılamayı deneyebileceğiniz 3 hazır resim de vardır.

Hazır resimlerden veya kamera uygulamasıyla fotoğraf çekerek bir resim seçtiğinizde, ortak metin kodu bu resmi 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 için runObjectDetection yöntemine kod ekleyeceksiniz.

Görüntüde cihaz üzerinde nesne algılamayı ayarlama ve çalıştırma

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

Resim hazırlama: InputImage
Algılayıcı nesnesi oluşturma: ObjectDetection.getClient(options)
Yukarıdaki 2 nesneyi bağla: process(image)

Bunları, 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 aktarmaları 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 öğesinden 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) bölümünün en üstüne ekleyin.

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

ML Kit, Builder Design Pattern'i izler. Yapılandırmayı oluşturucuya iletir, ardından oluşturucudan bir algılayıcı edinirsiniz. Yapılandırılacak 3 seçenek vardır (codelab'de kalın olan kullanılır):

algılama modu (tek resim veya akış)
algılama modu (tek veya çoklu nesne algılama)
sınıflandırma modu (açık veya kapalı)

Bu kod laboratuvarı, tek resimle birden fazla 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: Görüntüleri dedektöre aktarın

Nesne algılama ve sınıflandırma, eşzamansız bir işlemdir:

Tespit aracına (process() aracılığıyla) bir resim gönderdiğinizde
dedektör bu konuda oldukça fazla çalışıyor
dedektör, geri arama yoluyla sonucu size bildirir.

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

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

Tamamlandığında dedektör sizi aşağıdaki bilgilerle uyarır:

Algılanan toplam nesne sayısı
Algılanan her nesne şu şekilde açıklanır:

trackingId: Çerçeveler arasında izlemek için kullandığınız bir tam sayı (Bu codelab'de kullanılmaz)
boundingBox: nesnenin sınırlayıcı kutusu
Algılanan nesne için labels: etiket listesi (yalnızca sınıflandırma etkinleştirildiğinde)
index (Bu etiketin dizinini alma)
text ("Moda Ürünleri", "Yiyecek", "Ev Ürünleri", "Yer", "Bitki" dahil olmak üzere bu etiketin metnini alın)
confidence (1,0 %100 anlamına gelen, 0,0 ile 1,0 arasında değişen bir kayan nokta)

Kodu çalıştırdığınızda, algılanan sonuçların debugPrint() ile Logcat'e yazdırıldığı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 resim kabul etmeye hazırsınız.

Android Studio araç çubuğunda Run'ı ( ) tıklayarak codelab'i çalıştırın. Önceden ayarlanmış bir resmi seçmeyi deneyin veya fotoğraf çekin, ardından IDE'deki logcat penceresine( ) bakın. Aşağıdakine benzer bir ifade 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 durumda dedektör şu türden 3 nesne görmüş demektir:

kategorileri Moda ürünleri ve Ev ürünleri'dir.
Bilinmeyen bir sınıf olduğundan 2. için kategori döndürülmez.
trackingId yok (çünkü bu tek resim algılama modudur)
boundingBox dikdörtgeninin içindeki konum (ör. (481, 2021) – (2426, 3376))
algılayıcı, 1. öğenin moda ürünü olduğundan (%90) oldukça emin (elbise)

ML Kit Nesne Algılama'nın çalışması için teknik olarak ihtiyacınız olan her şeyi şu anda elde ettiniz. Tebrikler!

Evet, kullanıcı arayüzü tarafında hala başladığınız aşamadasınız ancak daha iyi bir deneyim oluşturmak için sınırlayıcı kutuyu çizmek gibi kullanıcı arayüzünde algılanan sonuçlardan yararlanabilirsiniz. Bir sonraki adım, algılanan sonuçları görselleştirmektir.

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

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

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

görüntüde sınırlayıcı kutuyu çizin
sınırlayıcı kutunun içine kategori adını ve güven düzeyini çiz

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

Algılama sonucunu görselleştirmenize yardımcı olmak için kod laboratuvarında bazı standart kodlar bulunur. Görselleştirme kodumuzu basitleştirmek için bu 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ünümü sınıfıdır.
fun drawDetectionResults(results: List<DetectedObject>) Bu yöntemde, algılanan her nesnenin merkezine beyaz daireler çizilir.
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şlemidir. Görsel olarak benzer bir sonuç elde etmek için bu kırpılmış resmi daha sonraki bir codelab'de görsel arama arka ucuna göndereceksiniz. Bu codelab'de henüz bu yöntemi kullanmayacaksınız.

ML Kit algılama sonucunu gösterme

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

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

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Uygulayın

Şimdi Android Studio araç çubuğunda Run'ı ( ) 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 herhangi bir hazır resme kolayca dokunun. Algılama sonucunu görürsünüz. Birkaç kez tekrarlamak için düğmeye tekrar basın veya başka bir resim seçin. En yeni ML Kit ODT'yi deneyimleyin.

7. Tebrikler!

Uygulamanıza Nesne Algılama özellikleri eklemek için ML Kit'i kullanmış olmanız gerekir:

3 API ile 3 adım
Giriş Resmi Oluşturma
Algılayıcı Oluşturma
Resmi Tespit Aracı'na Gönderme

Çalıştırmak için yapmanız gerekenler bu kadar.

İşlediğimiz konular

Android uygulamanıza ML Kit Nesne Algılama ve İzleme'yi ekleme
Resimlerdeki nesneleri algılamak için ML Kit'te cihaz üzerinde nesne algılama ve izleme nasıl kullanılır?

Sonraki Adımlar

Algılanan nesneyi bir ürün arama arka ucuna gönderme ve arama sonuçlarını gösterme hakkında bu codelab'i deneyin.
Algılama ve sınıflandırma doğruluğu ile performansı deneyimlemek için daha fazla resim ve canlı video ile ML Kit ODT'yi kullanarak daha fazlasını keşfedin.
Özel bir modeli nasıl eğiteceğinizi öğrenmek için Nesne algılama ile daha fazlasını yapın başlıklı öğrenme rotasına göz atın.
Nesne algılama canlı kamera ve statik resim için Materyal Tasarım önerileri hakkında bilgi edinin.
Kendi Android uygulamanızda ML Kit ODT'yi uygulama

Daha Fazla Bilgi

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