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ğru tutarak bunu online olarak nereden satın alabileceğinizi öğrenebileceğiniz 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öre. Bu eğitim, mobil uygulamaya ürün görseli arama özelliği eklemeyi öğreten öğrenme rotasının bir parçasıdır.

Bu codelab'de, ürün resmi arama özelliği derlemenin ilk adımını öğreneceksiniz: Resimlerdeki nesnelerin nasıl algılanacağı ve kullanıcının aramak istediği nesneleri seçmesine nasıl izin verileceği. 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 yolunda bilgi edinebilirsiniz.

Oluşturacaklarınız

Bu codelab'de, Makine Öğrenimi Kiti ile bir Android uygulaması geliştireceksiniz. 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. Son olarak, 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'sı

Gerekenler

• Android Studio'nun yeni bir sürümü (v4.1.2+)
• Android Studio Emülatörü veya fiziksel bir Android cihaz
• Örnek kod
• Kotlin'de Android uygulaması geliştirmeyle ilgili temel bilgiler

Bu codelab'de, Makine Öğrenimi Kiti'ne odaklanılmıştır. Diğer kavramlar ve kod blokları incelenmemiştir ve bunları kopyalayıp yapıştırmanız için sunulmaktadır.

2. Hazırlanın

Kodu İndirme

Bu codelab'e ait tüm kodları indirmek için şu bağlantıyı tıklayın:

Kaynak kodu indir

İndirilen zip dosyasının paketini açın. Bu işlem, ihtiyacınız olan tüm kaynakların yer aldığı 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 nesne algılama alt dizini iki dizin içerir:

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

3. Projeye ML Kit Nesne Algılama ve İzleme API'si 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 için bağımlılıkları ekleyin

ML Kit bağımlılıkları, ML Kit ODT SDK'yı uygulamanıza entegre etmenizi sağlar.

Projenizin app/build.gradle dosyasına gidin ve bağımlılığın zaten mevcut 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 deponun 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 aktarıp 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 ile ana makinenize bağlayın veya Android Studio emülatörünü başlatın,ardından 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 görüntü seçmenize olanak tanıyan standart kodlar içerir. Bu kodları, bu codelab'de derleyeceğiniz nesne algılama ve izleme ardışık düzenine beslemenize olanak tanır. Kod yazmadan önce uygulamayı biraz keşfedin:

İlk olarak, ekranın alt kısmında bir Düğme ( ) bulunur ve

• Cihazınıza/emülatörünüze entegre olan kamera uygulamasını başlatın
• kamera uygulamanızın içinde fotoğraf çekin
• Yakalanan görüntüyü başlangıç uygulamasında alın
• resmi göster

"Fotoğraf çek" özelliğini deneyin düğmesini tıklayın. Fotoğraf çekmek için talimatları uygulayın, fotoğrafı kabul edin ve başlangıç uygulamasında gösterilip gösterilmediğini kontrol edin.

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

1. Hazır ayarlı 3 resimden bir resim seçin.
2. Resmin daha büyük görünümde göründüğünden emin olun.

5. Cihaz üzerinde nesne algılama özelliği ekleyin

Bu adımda, resimlerdeki nesneleri algılamak için başlangıç uygulamasına işlev ekleyeceksiniz. Önceki adımda gördüğünüz gibi, başlangıç uygulaması cihazdaki kamera uygulamasıyla fotoğraf çekmek için ortak kod içerir. Ayrıca, codelab'i bir Android emülatöründe çalıştırıyorsanız nesne algılamayı deneyebileceğiniz, önceden ayarlanmış 3 görüntü de vardır.

Önceden ayarlanmış resimlerden veya kamera uygulamasıyla fotoğraf çekerek bir resim seçtiğinizde, ortak metin kodu ilgili 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 işlemi için runObjectDetection yöntemine kod ekleyeceksiniz.

Resimler üzerinde cihaz üzerinde nesne algılamayı kurma ve çalıştırma

ML Kit ODT'yi kurmak için 3 API ile yalnızca 3 basit adım yeterlidir

• bir resim hazırlayın: 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ştur. ML Kit ODT'yi entegre etmek için aşağıdaki adımlara geçin. Android Studio da sizden 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: BirEntryImage oluşturun

ML Kit, Bitmap üzerinden InputImage oluşturmak için basit bir API sunar. Ardından ML Kit API'lerine InputImage besleyebilirsiniz.

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

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

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

ML Kit, Builder Tasarım Kalıbı'na uygun olarak yapılandırmayı oluşturucuya iletir ve daha sonra ondan bir algılar edinirsiniz. Yapılandırılacak 3 seçenek vardır (codelab'de kalın yazı tipiyle yazılmış seçenek kullanılır):

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

Bu codelab tek bir görüntü (birden fazla nesne algılama ve şunu 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: Resimleri algılayıcıya gönderin

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

• Algılayıcıya resim gönderirsiniz (process() üzerinden)
• dedektör oldukça yoğun çalışıyor
• algılayıcı, sonucu size geri çağırma yoluyla bildirir

Aşağıdaki kod tam olarak bunu sağlar (kodu 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())
   }

İşlem tamamlandığında, algılayıcı size

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

• trackingId: Kareler arası izlemek için kullandığınız tam sayı (bu codelab'de KULLANILMAZ)
• 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 al)
• text ("Moda Ürünleri", "Gıda", "Ev Ürünleri", "Yer", "Bitki" dahil olmak üzere bu etiketin metnini alın)
• confidence (1,0 ile 0,0 ile 1,0 arasındaki bir kayan noktalı değer, %100 anlamına gelir)

Kod yazdırıldığında, sonuçları debugPrint() ile Logcat'e yazdırdığını fark etmiş olabilirsiniz. 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 görüntüleri algılamak için kabul etmeye hazırsınız!

Android Studio araç çubuğunda Çalıştır'ı ( ) tıklayarak codelab'i çalıştırın. Hazır bir görüntü seçmeyi deneyin veya fotoğraf çekin, ardından IDE'deki logcat penceresine( ) bakın. Şuna benzer bir kod 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, algılayıcının şu 3 nesneyi gördüğü anlamına gelir:

• Bunlar Moda iyi ve Ev ürünleri kategorileridir.
• bilinmeyen bir sınıf olduğundan ikincisi için kategori döndürülmedi.
• hayır trackingId (bu tek resim algılama modu olduğu için)
• boundingBox dikdörtgeninin içindeki konum (ör. (481, 2021) – (2426, 3376))
• algılayıcı, birincisinin Moda ürünü (%90) (bir elbise) olduğundan oldukça emin.

Makine Öğrenimi Kiti Nesne Algılama'nın çalışmasını teknik olarak sağlamak için ihtiyacınız olan tek şey bu. Şu anda her şey yolunda! Tebrikler!

Evet, kullanıcı arayüzü tarafında başlangıçta hâlâ 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ı

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

Bu bölümde, resimdeki sonuçtan yararlanacaksınız:

• resimdeki sınırlayıcı kutuyu çiz
• kategori adını ve güveni sınırlayıcı kutunun içine çizin

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

Codelab'in içinde, algılama sonucunu görselleştirmenize yardımcı olacak bazı standart kodlar bulunur. Görselleştirme kodumuzu basit hale getirmek için şu yardımcı programlardan yararlanın:

• class ImageClickableView Bu, algılama sonucuyla görselleştirme ve etkileşim için kullanışlı araçlar sağlayan bir görsel görüntüleme sınıfıdır.
• fun drawDetectionResults(results: List<DetectedObject>) Bu yöntem, algılanan her nesnenin merkezinde 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 bir geri çağırmadır. Kırpılmış bu resmi, görsel olarak benzer bir sonuç elde etmek için daha sonraki bir codelab'de görsel arama arka ucuna göndereceksiniz. Bu codelab'de bu yöntemi henüz kullanamayacaksınız.

ML Kit algılama sonucunu göster

Görselleştirme yardımcı programlarını kullanarak ML Kit nesne algılama sonucunu giriş görüntüsünün üzerinde gösterin.

debugPrint() adını verdiğiniz yere gidin ve aşağıdaki kod snippet'ini altına ekleyin:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Çalıştırma

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

Uygulama yüklendikten sonra, kamera simgesi bulunan düğmeye basın, kameranızı bir nesneye doğru tutun, fotoğraf çekin, fotoğrafı kabul edin (Kamera Uygulaması'nda) veya önceden ayarlanmış resimlere kolayca dokunun. Algılama sonucunu görürsünüz; Birkaç kez tekrarlamak için düğmeye tekrar basın veya başka bir görüntü seçin. En yeni ML Kit ODT'yi deneyin.

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ştur
• Algılayıcı Oluştur
• Resmi Algılayıcıya Gönder

Uygulamanızı hemen kullanmaya başlamak için ihtiyacınız olan bu kadar.

İşlediklerimiz

• 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 izleme özelliği nasıl kullanılır?

Sonraki Adımlar

• Algılanan nesnenin bir ürün arama arka ucuna nasıl gönderileceği ve arama sonuçlarını nasıl göstereceğiniz ile ilgili bu codelab'i deneyin
• Daha fazla görüntü ve canlı video içeren ML Kit ODT ile daha fazlasını tespit edin ve öğrenin. sınıflandırma doğruluğu ve performansı
• Özel bir modeli nasıl eğiteceğinizi öğrenmek için Nesne algılamayla daha ileriye gitme öğrenme rotasına göz atın
• Nesne algılama canlı kamera ve statik görüntü için Materyal Tasarım önerileri hakkında bilgi edinin
• ML Kit ODT'yi kendi Android uygulamanızda uygulayın

Daha Fazla Bilgi

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