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

Android veya iOS'te ilk Compute Vision uygulamanızı oluşturma

1. Başlamadan önce

Bu codelab'de, bir resmin birincil içeriklerini algılayarak temel Bilgisayar Vizyonu kullanım alanını işleyen bir uygulamanın nasıl oluşturulacağını keşfedeceksiniz. Buna genellikle Resim Sınıflandırma veya Resim Etiketleme denir.

Ön koşullar

Bu codelab, Resim sınıflandırmasını kullanmaya başlama yolunun bir parçasıdır. Makine öğrenimini kullanmaya yeni başlayan deneyimli geliştiriciler için yazılmıştır.

Derlemeniz istenen nedir?

Bir çiçek resmini sınıflandırabilen Android uygulaması
(İsteğe bağlı) Bir çiçek resmini sınıflandırabilen iOS uygulaması

Gerekenler

Android Studio, Codelab'in Android bölümü için https://developer.android.com/studio adresinde kullanılabilir
Codelab'in iOS sürümü için Apple App Store'da sunulan Xcode

2. Başlarken

Makine Görüşü, makine öğreniminin daha büyük disiplininde yer alan ve makinelerin, bir görselin içeriğindeki bilgileri işlemesi ve çıkarması için yeni yollar bulmaya çalışan bir alandır. Bir bilgisayarda yalnızca, resmin gerçek verilerini (örneğin, resmi oluşturan piksellerin değerleri) depolandığı yerde, Bilgisayar Vizyonu bilgisayarın resmin içeriğini ayrıştırmasına ve resimde neler olduğu hakkında bilgi almasına olanak verir.

Örneğin, Bilgisayar Görüşü alanında bir kedi resmi, kediyi içeren piksellere ek olarak kedi içeriyor olarak etiketlenebilir. Bilgisayar Görüşü gibi başka ayrıntıların da dahil olduğu başka alanlar da vardır. Nesne Algılama, bilgisayarın bir resimdeki birden çok öğeyi bulup bunlar için sınırlayıcı kutular elde etmesine olanak tanır.

Bu codelab'de, resmin temel içeriğini algılayarak temel kullanım alanını işleyen bir uygulamayı nasıl oluşturabileceğinizi keşfedeceksiniz. Buna genellikle Resim Sınıflandırma veya Resim Etiketleme denir.

Uygulamayı mümkün olduğunca basitleştirmek için, kaynak olarak paketlenmiş resimleri kullanıp bunlardan bir sınıflandırma gösterir. Gelecekteki uzantılar, Resim Seçici kullanmak veya doğrudan kameradan resim çekmek olabilir.

Android Studio'yu kullanarak Android'de uygulama oluşturma işlemine başlayabilirsiniz. (iOS'ta eşdeğerini yapmak için 7. adıma geçin.)

Android Studio'yu açın, Dosya menüsüne gidin ve Yeni Proje Oluştur'u seçin.
Bir proje şablonu seçmeniz istenir. Boş Etkinlik'i seçin.

İleri'yi tıklayın. Projenizi Yapılandırmanız istenir. İstediğiniz adı ve paket adını verin ancak bu codelab'deki örnek kodda ImageClassifierStep1 proje adı ve com.google.imageclassifierstep1 paket adı kullanılmaktadır.

Tercih ettiğiniz dili seçin (Kotlin veya Java). Bu laboratuvar Kotlin kullandığından, tam olarak izlemek istiyorsanız Kotlin'i seçmeniz önerilir.
Hazır olduğunda Bitti'yi tıklayın. Android Studio uygulamayı sizin için oluşturur. Tüm ayarların yapılması birkaç dakika sürebilir.

3. ML Kit'in Görüntü Etiketleme Kitaplığını İçe Aktarma

ML Kit (https://developers.google.com/ml-kit), Makine Öğrenimi'nde sık karşılaşılan senaryoların yanı sıra platformlar arasında uygulamayı ve çalışmayı kolaylaştıran, çeşitli çözümler sunar. ML Kit, Resim Etiketleme adlı bu uygulamada kullanabileceğiniz bir kullanıma hazır kitaplık sunuyor. Bu kitaplıkta, 600'den fazla resim sınıfını tanıyacak şekilde önceden eğitilmiş bir model bulunur. Bu nedenle, başlamak için mükemmel.

ML Kit'in aynı API'yi kullanarak özel modeller kullanmanıza da olanak tanıdığını unutmayın. Böylece hazır olduğunuzda işe koyularak, senaryonuz için eğitilmiş bir modelin kullanıldığı kişiselleştirilmiş görüntü etiketleme uygulamanızı oluşturmaya başlayabilirsiniz.

Bu senaryoda çiçek tanıyıcı oluşturursunuz. İlk uygulamanızı oluşturup bir çiçek resmini gösterdiğinizde uygulama bir çiçek olarak tanımlanır. (Daha sonra kendi çiçek algılayıcı modelinizi oluşturduğunuzda model makineniz sayesinde küçük değişiklikler yaparak bu modeli uygulamanıza bırakabilir ve yeni modelin lale veya gül gibi bir çiçek türünü öğrenmesini sağlayabilirsiniz.)

Android Studio'da proje gezginini kullanarak üst kısımda Android'in seçili olduğundan emin olun.
Gradle Komut Dosyaları klasörünü açın ve uygulama için build.gradle dosyasını seçin. İki veya daha fazla dosya olabilir. Bu nedenle, aşağıda gösterildiği gibi uygulama düzeyinde birinci sürümü kullandığınızdan emin olun:

Dosyanın en altında, bağımlılıklar adlı bir bölüm görürsünüz. Bu bölümde implementation, testImplementation ve androidImplementation ayarlarının listesi saklanır. Kodla dosyaya yeni bir kod ekleyin:

implementation 'com.google.mlkit:image-labeling:17.0.3'

(Bunun { } bağımlıları içinde olduğundan emin olun)

Pencerenin üst kısmında, build.gradle değerinin değiştiğini belirten bir çubuk görünür ve yeniden senkronize etmeniz gerekir. Gönder. Bu simgeyi görmüyorsanız sağ üstteki araç çubuğunda küçük fil simgesini bulup tıklayın.

ML Kit'i içe aktardınız ve resim etiketlemeye başlamak için hazırsınız.

Ardından, bir resim oluşturmak için basit bir kullanıcı arayüzü oluşturursunuz ve kullanıcınız düğmeye bastığında resmin içeriğini ayrıştırmak için resim etiketleyici modelini çağıran bir düğme oluşturursunuz.

4. Kullanıcı Arayüzünü Oluşturma

Android Studio'da, xml tabanlı bir düzen dosyası kullanarak her bir ekranın (veya etkinliğin) kullanıcı arayüzünü düzenlersiniz. Oluşturduğunuz temel uygulamanın tek bir etkinliği var (kodu MainActivity dilinde, kısa süre içinde bunu göreceksiniz) ve kullanıcı arayüzü beyanı activity_main.xml dilinde.

Bu dosyayı Android's proje gezginindeki res > scheme klasöründe şu şekilde bulabilirsiniz:

Bunu yaptığınızda, Etkinlik kullanıcı arayüzünüzü tasarlamanıza olanak sağlayan tam düzenleyici açılır. Çok fazla şey var ve bu laboratuvarın nasıl kullanılacağını öğretmeyi amaçlamıyor. Düzen düzenleyici hakkında daha fazla bilgi edinmek için şu adrese göz atın: https://developer.android.com/studio/write/layout-editor

Bu laboratuvara özel olarak düzenleyicinin sağ üst köşesindeki Kod aracını seçin.

Pencerenin ana bölümünde artık yalnızca XML kodunu göreceksiniz. Kodu şu şekilde değiştirin:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageToLabel"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <Button
            android:id="@+id/btnTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label Image"
            android:layout_gravity="center"/>
        <TextView
            android:id="@+id/txtOutput"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:gravity="start|top" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Bu size, ImageView (resmi oluşturmak için), Button (kullanıcının basması için) ve etiketlerin görüntüleneceği bir TextView içeren son derece basit bir düzen sağlar.

Artık kullanıcı arayüzünüz tanımlanmıştır. Kodlamaya başlamadan önce öğe olarak birkaç resim ekleyin. Uygulama, bu resimlerden çıkarım yapar.

5. Uygulamayla Resim Paketleme

Ekstra dosyaları bir Android uygulamasıyla paket haline getirmenin bir yolu, bu dosyaları uygulamada derlenen öğeler olarak eklemektir. Uygulamayı basit hale getirmek için bazı çiçeklerin resmini eklemek üzere bu işlemi gerçekleştireceğiz. Daha sonra, bu uygulamayı fotoğraf çekmek ve kullanmak için CameraX'i veya diğer kitaplıkları kullanacak şekilde genişletebilirsiniz. Basit olması açısından, resmi şimdilik paketleyeceğiz.

Proje gezgininde, üst taraftaki uygulamada sağ tıklayıp Yeni Dizin'i seçin.
Farklı dizinlerle birlikte gösterilen iletişim kutusunda src/main/assets seçeneğini belirtin.

Bunu yaptıktan sonra proje gezgininde yeni bir assets klasörü görürsünüz:

Bu klasörü sağ tıkladığınızda seçenekler listesinin bulunduğu bir pop-up görürsünüz. Bunlardan biri, klasörü dosya sisteminizde açmak olacaktır. İşletim sisteminize uygun olanı bulun ve seçin. (Mac'te bu, Finder'da Göster, Windows'da ise Gezgin'de Aç ve Ubuntu'da Dosyalarda Göster olur.)

Bir dosyayı dosyanın içine kopyalayın. Pixabay gibi sitelerden resim indirebilirsiniz. Resmi basit bir şekilde yeniden adlandırmanız önerilir. Bu durumda, resim flower1.jpg olarak yeniden adlandırıldı.

Bu işlemi yaptıktan sonra Android Studio'ya dönün. Dosyanızı öğeler klasöründe göreceksiniz.

Artık bu resmi etiketlemeye hazırsınız.

6. Görüntüyü Etiketlemek için Sınıflandırma Kodunu Yazma

(Şimdi de Android'de Bilgisayar Görüşü yaparak hepimizin beklediği kısım.)

Kodunuzu MainActivity dosyasına yazacağınızdan, com.google.devrel.imageclassifierstep1 altındaki proje klasöründe (veya farklı bir kod seçtiyseniz bu adın karşılığı olan ad alanında) dosyayı bulun. Bir Android Studio projesi için genellikle bir tane uygulama, bir tane Android Test ve bir tane test için olmak üzere 3 ad alanı klasörü oluşturulur. MainActivity öğenizi, parantez içinde açıklamasının olmadığı yerde bulabilirsiniz.

Kotlin kullanmayı seçtiyseniz, üst klasörün neden Java olarak adlandırıldığını merak ediyor olabilirsiniz. Android Studio yalnızca Java'dan beri kullanılan tarihi bir yapıdır. Gelecekteki sürümlerde bu durum düzeltilebilir. Kotlin kullanmak istiyorsanız üzülmeyin, sorun değil. Bu, kaynak kodun klasör adıdır.

MainActivity dosyasını açtığınızda kod düzenleyicide MainActivity adlı bir sınıf dosyası görürsünüz. Aşağıdaki gibi görünmelidir:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Kapanış ayracının altına sınıfın parçası olmayan, ancak sınıf tarafından kullanılabilen bir uzantı kodu ekleyebilirsiniz. Öğelerden dosya eşlemi olarak okumak için bir uzantıya ihtiyacınız vardır. Bu işlem, kopyaladığınız resmi daha önce öğeler klasörüne yüklemek için kullanılır.

Şu kodu ekleyin:

// extension function to get bitmap from assets
fun Context.assetsToBitmap(fileName: String): Bitmap?{
    return try {
        with(assets.open(fileName)){
            BitmapFactory.decodeStream(this)
        }
    } catch (e: IOException) { null }
}

Android Studio bu noktada muhtemelen şikayet edecektir. Context, Bitmap ve IOException gibi bazı kodları kırmızı renkle vurgulayacaktır:

Merak etmeyin! Bunun nedeni, kitaplıkları içeren kitaplıkları henüz içe aktarmamış olmanızdır. Android Studio, kullanışlı bir kısayol sunar.

İmlecinizi kelimenin üzerine sürükleyin, ardından ALT + Enter (Mac'te Option + Enter) tuşlarına basın. İçe aktarma işlemi sizin için oluşturulur.
Daha sonra, öğelerden bit eşlemi yükleyip ImageView'a yerleştirebilirsiniz. MainActivity'nin onCreateFunction içinde, setContentView satırının hemen altına bu kodu ekleyin:

val img: ImageView = findViewById(R.id.imageToLabel)
// assets folder image file name with extension
val fileName = "flower1.jpg"
// get bitmap from assets folder
val bitmap: Bitmap? = assetsToBitmap(fileName)
bitmap?.apply {
    img.setImageBitmap(this)
}

Daha önce olduğu gibi kodun bir kısmı kırmızı renkle vurgulanacaktır. İmleci bu satıra getirin ve içe aktarmaları otomatik olarak eklemek için Alt + Enter veya Option + Enter tuşlarına basın.
Daha önce oluşturduğunuz layout.xml dosyasında, ImageView adını imageToLabel olarak vermiştiniz. Böylece ilk satır, bu düzen bilgilerini kullanarak img adlı bir ImageView nesnesinin örneğini oluşturur. Ayrıntıları, yerleşik bir Android işlevi olan findViewById kullanarak bulur. Ardından, önceki adımda oluşturduğunuz assetsToBitmap işlevini kullanarak öğeler klasöründen resim yüklemek için flower1.jpg dosya adını kullanır. Son olarak, bit eşlemi img öğesine yüklemek için bit eşlem soyut sınıfını kullanır.
Düzen dosyasında, resim için tahmin edilen etiketleri oluşturmak amacıyla kullanılacak bir TextView vardı. Bunun için kod nesnesi alın. Önceki kodun hemen altına ekleyin:

val txtOutput : TextView = findViewById(R.id.txtOutput)

Daha önce olduğu gibi bu yöntem, metin görünümünün adını kullanarak düzen dosyası bilgilerini bulur (txtOutput olarak adlandırılan XML'i kontrol eder) ve bunu, txtExit adlı TextView nesnesini örneklendirmek için kullanır.

Benzer şekilde, düğmeyi temsil edecek bir düğme nesnesi oluşturur ve düzen dosyası içeriğiyle bunu örneklendirirsiniz.

Düzen dosyasında, düğmeyi şu şekilde örnekleyebilmemiz için btnTest düğmesini adlandırdık:

val btn: Button = findViewById(R.id.btnTest)

Tüm kod ve kontrolleriniz başlatıldığında, bir sonraki (ve son) adım da resim üzerinde çıkarım yapmak için bunları kullanmaktır.

Devam etmeden önce onCreate kodunuzun aşağıdaki gibi göründüğünden emin olun:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val img: ImageView = findViewById(R.id.imageToLabel)
    // assets folder image file name with extension
    val fileName = "flower1.jpg"
    // get bitmap from assets folder
    val bitmap: Bitmap? = assetsToBitmap(fileName)
    bitmap?.apply {
        img.setImageBitmap(this)
    }
    val txtOutput : TextView = findViewById(R.id.txtOutput)
    val btn: Button = findViewById(R.id.btnTest)
}

Anahtar kelimelerden hiçbirinin kırmızı renkte olmaması, henüz içe aktarılmadıklarını gösterir. Böyle bir durum varsa lütfen geri dönün ve içe aktarmaları oluşturmak için ALT + Enter tuşunu kullanın.

ML Kit'in resim etiketleyicisini kullanırken ilk adım genellikle davranışı özelleştirmek için bir Seçenekler nesnesi oluşturmaktır. Resminizi ML Kit'in tanıyabileceği bir InputImage biçimine dönüştürürsünüz. Ardından, çıkarımı yapmak için bir Etiketleyici nesnesi oluşturursunuz. Sonuçlarla birlikte, ayrıştırabileceğiniz eşzamansız bir çağrı alırsınız.

Oluşturduğunuz düğmenin tüm etkinliğini, onClickListener etkinliğinde yapın. Kodun tamamı aşağıda verilmiştir:

btn.setOnClickListener {
  val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)
  val image = InputImage.fromBitmap(bitmap!!, 0)
  var outputText = ""
  labeler.process(image)
    .addOnSuccessListener { labels ->
      // Task completed successfully
      for (label in labels) {
        val text = label.text
        val confidence = label.confidence
        outputText += "$text : $confidence\n"
      }
      txtOutput.text = outputText
  }
    .addOnFailureListener { e ->
      // Task failed with an exception
  }
}

Kullanıcı düğmeyi ilk kez tıkladığında, kod ImageLabeling.getClient kullanarak bir etiketleyiciyi örneklendirir ve ImageLabelerOptions bunu iletir. Bu ürün, hızlı bir şekilde harekete geçmemizi sağlayan DEFAULT_OPTIONS özelliği ile birlikte gelir.
Daha sonra, fromBitmap yöntemi kullanılarak bit eşlemden bir InputImage oluşturulacak. InputImage, görüntüleri işlemek için ML Kit'in istediği biçimdir.
Son olarak etiketleyici, resmi işler ve başarılı ya da başarısız olduğunda eşzamansız olarak geri çağırma yapar. Çıkarım başarılı olursa geri çağırma, etiketlerin listesini içerir. Daha sonra, etiketin metnini ve güven değerini okumak için bu etiket listesi aracılığıyla ayrıştırabilirsiniz. Başarısız olursa size durumu bildirmek için kullanabileceğiniz bir istisna gönderir.

Hepsi bu kadar! Artık uygulamayı bir Android cihazda veya emülatör içinde çalıştırabilirsiniz. Daha önce hiç tamamlamadıysanız nasıl yapacağınızı buradan öğrenebilirsiniz: https://developer.android.com/studio/run/emulator

Emülatörde çalışan uygulama. Başlangıçta resmi ve düğmeyi göreceksiniz. Etiket boş olacak.

Düğmeye bastığınızda resim için bir etiket grubu elde edersiniz.

Burada, etiketleyicinin resmin bir çiçek, çiçek, bir bitki ve gökyüzü içerdiğini belirleme olasılığının yüksek olduğunu görebilirsiniz. Bunların hepsi doğrudur ve bunların tamamı, modelin resmi ayrıştırmak için çalıştığını göstermektedir.

Ancak henüz bunun bir papatya resmi olduğunu belirleyemiyor. Bunun için belirli çiçekler konusunda eğitilmiş özel bir modele ihtiyacınız vardır ve bu işlemin bir sonraki laboratuvarda nasıl yapılacağını öğrenebilirsiniz.

Aşağıdaki adımlarda, aynı uygulamanın iOS'ta nasıl oluşturulacağını keşfedeceksiniz.

7. iOS'te Görüntü Sınıflandırıcı Oluşturma - Başlayın

iOS'te Xcode'u kullanarak benzer bir uygulama oluşturabilirsiniz.

Xcode'u başlatın ve dosya menüsünden Yeni Proje'yi seçin. Şu iletişim kutusunu görürsünüz:

Gösterilen Uygulama'yı seçin ve İleri'yi tıklayın. Projeniz için seçenekler belirlemeniz istenir. Gösterilen ad ve kuruluş tanımlayıcısını belirtin. Arayüz türünün Resimli Taslak olduğundan ve dilin gösterildiği gibi İsviçre olduğundan emin olun.

Bir telefona dağıtım yapmak ve bir geliştirici profili oluşturmak istiyorsanız ekip ayarınızı yapabilirsiniz. Değilse uygulamayı Yok olarak bırakın. Uygulamanızı çalıştırmak için iOS simülasyon aracını kullanabilirsiniz.
İleri'yi tıklayın ve projenizin ve dosyalarınızın depolanacağı bir klasör seçin. Bu projenin konumunu unutmayın. Sonraki adımda bu projeye ihtiyacınız olacak.
Xcode'u şimdilik kapatın. Çünkü sonraki adımdan sonra kodu farklı bir çalışma alanı dosyası kullanarak yeniden açacaksınız.

8. Cocoapod'ları kullanarak ML Kit'i entegre edin

ML Kit ayrıca iOS'ta da çalıştığından, resim sınıflandırıcı oluşturmak için bu seti çok benzer bir şekilde kullanabilirsiniz. Entegre etmek için CocoaPods kullanacaksınız. Henüz yüklemediyseniz https://cocoapods.org/ adresindeki talimatları uygulayarak bunu yapabilirsiniz.

Projenizi oluşturduğunuz dizini açın. .xcodeproj dosyanızı içermelidir.

Burada, doğru konumda I'm belirten .xcodeproj dosyasını görebilirsiniz.

Bu klasörde Podfile adlı yeni bir dosya oluşturun. Uzantı yok, sadece Podfile. Bu bölüme aşağıdakileri ekleyin:

platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end

Kaydedin ve terminale geri dönün. pod install aynı dizin türünde. Cocoapod'lar, uygun kitaplıkları ve bağımlıları indirir ve projenizi harici bağımlılarıyla birleştiren yeni bir çalışma alanı oluşturur.

Sonunda Xcode oturumlarınızı kapatmanız ve bundan sonra çalışma alanı dosyasını kullanmanız gerektiğini unutmayın. Bu dosyayı açtığınızda Xcode orijinal projenizle ve harici bağımlılıklarla başlatılır.

Artık bir sonraki adıma geçmeye ve kullanıcı arayüzünü oluşturmaya hazırsınız.

9. Resimli taslakları kullanarak iOS kullanıcı arayüzü oluşturma

Main.storyboard dosyasını açtığınızda, telefon için tasarım yüzeyi olan bir kullanıcı arayüzü düzeni görürsünüz.
Ekranın sağ üst kısmında kontrol eklemek için kullanabileceğiniz bir + düğmesi bulunur. Kontrol paletini almak için tıklayın.

Ardından, tasarım yüzeyine bir ImageView, Düğme ve bir Etiket sürükleyip bırakın. Hepsini aşağıda gösterildiği gibi yukarıdan aşağıya doğru düzenleyin:

Metnini Düğme'den Sınıflandırma'ya düzenlemek için düğmeyi çift tıklayın.
Etiketi büyütmek için kontrol noktalarını etiketin etrafında sürükleyin. (UIImageView ile aynı genişliğe ve yüksekliğin iki katına bakın.)
Etiket hâlâ seçiliyken, inceleyici paletini göstermek için sağ üstteki seçiciler düğmesini tıklayın.
Bunu yaptıktan sonra Satırlar ayarını bulun ve 0 olarak ayarlandığından emin olun. Bu, etiketin dinamik sayıda satır oluşturmasına olanak tanır.

Artık bir sonraki adıma geçmeye hazırsınız. Kullanıcı arayüzünü prizler ve işlemler kullanarak koda bağlayın.

10. İşlem ve Çıkış Oluştur

Resimli taslakları kullanarak iOS geliştirmesi yaparken, çıkışları kullanarak kontrolleriniz için düzen bilgilerini referans gösterir ve kullanıcı, işlemleri kullanarak bir kontrolle ilgili işlem yaptığında çalıştırılacak kodu tanımlarsınız.

Bir sonraki adımda, ImageView ve Etiket için prizler oluşturmanız gerekir. Görsele resmin yüklenmesi için codeView kullanılır. Etiket, metnini ML Kit'ten gelen çıkarıma göre ayarlamak için kodda belirtilir.

Ekranın sağ üst kısmındaki kontrolü tıklayarak denetleyicilerin paletini kapatın ve ardından hemen altındaki Sağa Düzenleyici Ekle düğmesini tıklayın.

Main.storyboard'un iki kez açıldığı kafa karıştırıcı bir ekran düzeniniz vardır. Sol tarafta proje projektöründe, kumanda kodunu görüntülemek için ViewController.swift'i seçin. Sol taraftaki resimli taslak düzenleyiciden tasarım tamamen kaybolmuş gibi görünebilir ancak endişelenmeyin.
Görüntüyü geri almak için, Denetleyici Görünümü'nde Denetleyiciyi Görüntüle'yi tıklayın. Sol tarafta resimli taslak tasarımınızı, sağ tarafta ise ViewController.swift kodunu gösteren kullanıcı arayüzünüzün bu şekilde görünmesini sağlamaya çalışın.

Soldaki tasarım yüzeyinden UIImageView'u seçin ve Ctrl tuşuna basarken bu kodu sağdaki koda sürükleyip class anahtar kelimesinin hemen altına bırakın (yukarıdaki ekran görüntüsünde 11. satırda).

Sürüklerken bir ok görürsünüz ve çıkardığınızda aşağıdakine benzer bir pop-up görürsünüz:

Name (Ad) alanını "&view" olarak doldurup Bağla'yı tıklayın.
Bu işlemi etiket ile tekrarlayın ve etikete "&";{0}lblçıkış" adını verin.
Önemli: Düğme için aynı işlemi yapmalısınız, ancak bağlantı türünü Priz değil, İşlem olarak ayarladığınızdan emin olun.

Odanın adını "DoSınıflandırma" yapın ve Bağlan'ı tıklayın.

İşiniz bittiğinde, kodunuz şu şekilde görünmelidir: (Etiket ve resim görünümünün IBOutlet (Arayüz Oluşturucu Çıkışı) ve düğmenin IBAction (Arayüz Oluşturucu İşlemi) olarak belirtildiğini unutmayın.)

import UIKit

class ViewController: UIViewController {

    @IBAction func doClassification(_ sender: Any) {
    }
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var lblOutput: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

}

Son olarak, sınıflandırmayı kolayca yapabilmemiz için uygulamayla bir resmi birleştirin. Bunu yapmak için dosyayı dosya gezgininizden Xcode'un sol tarafındaki gezgine sürükleyin. Düzenleyiciyi bıraktığınızda şunun gibi bir pop-up açılır:

Hedeflere Ekle bölümündeki onay kutusunun gösterildiği gibi işaretlendiğinden emin olun ve ardından Son'u tıklayın.

Dosya, uygulamanızla birlikte paketlenir ve artık kolayca sınıflandırılabilir. Artık resim sınıflandırmasını yapmak için kullanıcı arayüzünü kodlamaya hazırsınız!

11. Resim Sınıflandırma için Kod Yazın

Tüm kurulum tamamlandığına göre, resim sınıflandırmasını yapmak için kodu yazmak gerçekten çok basit.

Resim yüzeyi tasarımcısını, tasarım yüzeyinin sol üst köşesinde yer alan X işaretini tıklayarak başlatın. Böylece yalnızca kodunuza odaklanabilirsiniz. Bu laboratuvarın geri kalanı için ViewController.swift'i düzenleyeceksiniz.
Bu kodu üst kısımda UIKit içe aktarma işleminin altına ekleyerek MLKitVision ve MLKit ImageLabeling kitaplıklarını içe aktarın:

import MLKitVision
import MLKitImageLabeling

Ardından, viewDidLoad işlevinizin içinde, uygulamada paketlediğimiz dosyayı kullanarak ImageView'u başlatın:

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    imageView.image = UIImage(named:"flower1.jpg")
}

Resmin etiketlerini almak için hemen viewDidLoad() altında bir yardımcı işlev oluşturun:

func getLabels(with image: UIImage){

Resimden bir VisionImage oluşturun. ML Kit, resim sınıflandırması yaparken bu türü kullanır. Bu nedenle, getLabels alanına şu kodu ekleyin:

let visionImage = VisionImage(image: image)
visionImage.orientation = image.imageOrientation

Daha sonra, resim etiketleyici için seçenekleri oluşturun. Bu seçenekler kullanılarak başlatılır. Bu durumda, yalnızca confidenceThreshold öğesinin temel seçeneğini belirlersiniz. Bu, etiketleyiciden yalnızca 0,4 veya daha yüksek güvene sahip etiketler döndürmesini isteyeceğiniz anlamına gelir. Örneğin, çiçeğimiz için "bitki" veya "evcil hayvan" gibi sınıflar büyük olasılıkla daha güvenilirdir, ancak "basketbol" ya da "araba" gibi sınıflar daha düşük bir güven düzeyine sahiptir.

let options = ImageLabelerOptions()
options.confidenceThreshold = 0.4

Şimdi şu seçenekleri kullanarak etiketleyiciyi oluşturun:

let labeler = ImageLabeler.imageLabeler(options: options)

Etiketleyiciyi aldıktan sonra işleyebilirsiniz. Size etiketler (başarılıysa) ve hata (başarılı olmadıysa) içeren eşzamansız bir geri arama gönderir. Bu bilgileri, kısa süre içinde oluşturacağımız başka bir işlevde işleme alabilirsiniz.

labeler.process(visionImage) { labels, error in
    self.processResult(from: labels, error: error)
  }

Xcode processResult üyesi olmadığından şikayet ederse endişelenmeyin. Bunu henüz uygulamadınız ve bir sonraki adımda yapacaksınız.

Kolaylık sağlaması açısından tüm getLabels işlevini burada bulabilirsiniz:

// This is called when the user presses the button
func getLabels(with image: UIImage){
    // Get the image from the UI Image element and set its orientation
    let visionImage = VisionImage(image: image)
    visionImage.orientation = image.imageOrientation

    // Create Image Labeler options, and set the threshold to 0.4
    // so we will ignore all classes with a probability of 0.4 or less
    let options = ImageLabelerOptions()
    options.confidenceThreshold = 0.4

    // Initialize the labeler with these options
    let labeler = ImageLabeler.imageLabeler(options: options)

    // And then process the image, with the callback going to self.processresult
    labeler.process(visionImage) { labels, error in
        self.processResult(from: labels, error: error)
 }
}

Şimdi processResult işlevini uygulamanız gerekiyor. Etiketlerimiz ve bize bir hata nesnesi döndürüldüğü için bu oldukça basittir. Etiketler, ML Kit'ten ImageLabel türünde yayınlanmalıdır.

Bunu yaptıktan sonra etiket grubunu yinelemeniz, açıklamayı ve güven değerini çekmeniz ve bunları labeltexts adlı bir var öğesine eklemeniz yeterlidir. Hepsini tekrarladıktan sonra lbloutput.text'i bu değere ayarlamanız yeterlidir.

İşlevin tamamı:

// This gets called by the labeler's callback
func processResult(from labels: [ImageLabel]?, error: Error?){
    // String to hold the labels
    var labeltexts = ""
    // Check that we have valid labels first
    guard let labels = labels else{
        return
    }
  // ...and if we do we can iterate through the set to get the description and confidence
    for label in labels{
        let labelText = label.text + " : " + label.confidence.description + "\n"
        labeltexts += labelText
    }
    // And when we're done we can update the UI with the list of labels
    lblOutput.text = labeltexts
}

Kalan tek şey, kullanıcı düğmeye bastığında getLabels işlevini çağırmaktır.

İşlemi oluşturduğunuzda her şey sizin için kablolanmıştır. Bu nedenle, daha önce oluşturduğunuz (doClassificaiton) IBAction öğesini getLabels çağırmanız yeterli olacaktır.

Görüntüyü yalnızca imageView'un içeriğiyle çağırmak için şu kodu kullanabilirsiniz:

@IBAction func doClassification(_ sender: Any) {
    getLabels(with: imageView.image!)
}

Şimdi uygulamanızı çalıştırabilirsiniz. Bunun nasıl çalıştığını burada görebilirsiniz:

Düzeninizin cihazınıza bağlı olarak farklı görünebileceğini unutmayın.

Codelab'de cihaz başına farklı düzen türleri keşfedilmez. Bu da oldukça karmaşık bir kavramdır. Kullanıcı arayüzünü düzgün görmüyorsanız resimli taslak düzenleyiciye geri dönün ve altta belirli bir cihazı seçebileceğiniz bir Şu kullanıcı olarak görüntüle: bölümü görürsünüz. Test ettiğiniz resim veya cihazla eşleşecek bir tane seçin ve kullanıcı arayüzünü buna uygun şekilde düzenleyin.

iOS geliştirmesiyle ilgili daha fazla bilgi edindikçe kullanıcı arayüzünün telefonlarda tutarlı bir şekilde çalışmasını sağlamak için kısıtlamaları nasıl kullanacağınızı öğreneceksiniz. Ancak bu laboratuvarda belirtilenlerin ötesine geçemezsiniz.

12. Tebrikler!

Şimdi hem Android hem de iOS'te genel bir modelle temel bilgisayar görüşünü sağlayan bir uygulama uyguladınız. İşin çoğunu halletmişsiniz.

Bir sonraki codelab'de, farklı çiçek türlerini tanıyan özel bir model oluşturacaksınız. Yalnızca birkaç satır kod girerek bu modeli daha kullanışlı hale getirmek için bu uygulamada uygulayabilirsiniz.