Mem-build Aplikasi Computer Vision pertama Anda di Android atau iOS

1. Sebelum memulai

Dalam codelab ini, Anda akan menjelajahi cara mem-build aplikasi yang menangani kasus penggunaan Computer Vision inti, yang mendeteksi konten utama gambar. Hal ini umumnya disebut Klasifikasi Gambar atau Pelabelan Gambar.

Prasyarat

Codelab ini adalah bagian dari jalur Memulai klasifikasi gambar. Aplikasi ini telah ditulis untuk developer berpengalaman yang baru mengenal machine learning.

Yang akan Anda buat

Aplikasi Android yang mampu mengklasifikasikan gambar bunga
(Opsional) Aplikasi iOS yang dapat mengklasifikasikan gambar bunga

Yang Anda butuhkan

Android Studio, tersedia di https://developer.android.com/studio untuk bagian Android dalam Codelab
Xcode, tersedia di Apple App Store, untuk bagian iOS Codelab

2. Mulai

Computer Vision adalah bidang disiplin machine learning yang lebih luas, yang berfungsi untuk menemukan cara baru bagi mesin untuk memproses dan mengekstrak informasi dari konten gambar. Jika komputer sebelumnya hanya menyimpan data gambar yang sebenarnya, seperti nilai piksel yang membentuk gambar, Computer Vision memungkinkan komputer mengurai konten gambar dan mendapatkan informasi tentang apa yang ada di dalamnya.

Misalnya, dalam kolom Computer Vision, gambar kucing bisa diberi label sebagai berisi kucing, selain piksel yang membentuk gambar tersebut. Ada bidang computer vision lainnya yang membahas hal ini secara lebih mendetail, seperti Deteksi Objek, tempat komputer dapat menemukan beberapa item dalam gambar dan membuat kotak pembatas untuk objek tersebut.

Dalam codelab ini, Anda akan menjelajahi cara mem-build aplikasi yang menangani kasus penggunaan inti, yang mendeteksi konten utama gambar. Hal ini umumnya disebut Klasifikasi Gambar atau Pelabelan Gambar.

Untuk membuat aplikasi sesederhana mungkin, aplikasi akan menggunakan gambar yang dipaketkan dengannya sebagai resource dan menampilkan klasifikasi darinya. Ekstensi yang akan datang bisa berupa menggunakan Pemilih Gambar atau mengambil gambar langsung dari kamera.

Anda akan memulai dengan proses pembuatan aplikasi di Android menggunakan Android Studio. (Langsung ke langkah 7 untuk melakukan hal yang setara di iOS.)

Buka Android Studio, buka menu File, lalu pilih Buat Project Baru.
Anda akan diminta untuk memilih template project. Pilih Empty Activity.

Klik Next. Anda akan diminta untuk Mengonfigurasi Project. Beri nama dan nama paket yang Anda inginkan, tetapi kode contoh dalam codelab ini menggunakan nama project ImageClassifierStep1 dan nama paket com.google.imageclassifierstep1.

Pilih bahasa untuk Kotlin atau Java. Lab ini menggunakan Kotlin. Jadi, jika Anda ingin mengikutinya secara persis, sebaiknya pilih Kotlin.
Jika sudah siap, klik Selesai. Android Studio akan membuat aplikasi untuk Anda. Mungkin diperlukan waktu beberapa saat untuk menyiapkan semuanya.

3 Impor Library Pelabelan Gambar ML Kit

ML Kit (https://developers.google.com/ml-kit) menawarkan sejumlah solusi bagi developer, dengan memenuhi skenario umum dalam Machine Learning, serta memudahkan penerapan dan pengerjaan lintas platform. ML Kit menyediakan library siap pakai yang dapat Anda gunakan dalam aplikasi ini yang disebut Pelabelan Gambar. Library ini mencakup model yang telah dilatih untuk mengenali lebih dari 600 class gambar. Oleh karena itu, sangat cocok untuk memulainya.

Perlu diperhatikan bahwa ML Kit juga memungkinkan Anda menggunakan model kustom menggunakan API yang sama. Jadi, jika sudah siap, Anda dapat beralih dari "memulai" dan mulai membuat aplikasi pelabelan gambar yang dipersonalisasi yang menggunakan model yang dilatih untuk skenario Anda.

Dalam skenario ini, Anda akan membuat pengenal bunga. Saat Anda membuat aplikasi pertama dan menampilkan gambar bunga, aplikasi tersebut akan mengenalinya sebagai bunga. (Nanti, saat membuat model pendeteksi bunga sendiri, Anda akan dapat memasukkannya ke aplikasi dengan sedikit perubahan berkat ML Kit, dan meminta model baru memberi tahu jenis bunga tersebut, seperti tulip atau mawar.)

Di Android Studio, menggunakan penjelajah project, pastikan Android dipilih di bagian atas.
Buka folder Gradle Scripts, lalu pilih file build.gradle untuk aplikasi tersebut. Mungkin ada 2 atau lebih, jadi pastikan Anda menggunakan tingkat aplikasi satu seperti yang ditunjukkan di sini:

Di bagian bawah file, Anda akan melihat bagian yang disebut dependensi tempat daftar setelan implementation, testImplementation, dan androidImplementation disimpan. Tambahkan kode baru ke file dengan kode ini:

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

(Pastikan file ini berada dalam dependensi { })

Sebuah baris akan muncul di bagian atas jendela yang menandai bahwa build.gradle telah diubah, dan Anda perlu menyinkronkan ulang. Harap lakukan. Jika Anda tidak melihatnya, cari ikon gajah kecil di toolbar di kanan atas, lalu klik.

Anda telah mengimpor ML Kit, dan siap memulai pelabelan gambar.

Selanjutnya, Anda akan membuat antarmuka pengguna sederhana untuk merender gambar, dan memberi Anda tombol yang saat pengguna menekannya, ML Kit memanggil model pemberi label gambar untuk mengurai konten gambar.

4. Membuat Antarmuka Pengguna

Di Android Studio, Anda mengedit antarmuka pengguna untuk setiap layar (atau Aktivitas) dengan menggunakan file tata letak berbasis xml. Aplikasi dasar yang Anda buat memiliki satu aktivitas (yang kodenya ada di MainActivity, dan Anda akan segera melihatnya), dan deklarasi antarmuka pengguna berada di activity_main.xml.

Anda dapat menemukannya di folder res > layout di penjelajah project Android – seperti ini:

Ini akan membuka editor lengkap yang memungkinkan Anda merancang antarmuka pengguna Aktivitas. Ada banyak hal di sana, dan lab ini tidak dimaksudkan untuk mengajari Anda cara menggunakannya. Untuk mempelajari editor tata letak lebih lanjut, lihat: https://developer.android.com/studio/write/layout-editor

Untuk tujuan lab ini, pilih alat Kode di sudut kanan atas editor.

Anda sekarang hanya akan melihat kode XML di bagian utama jendela. Ubah kode menjadi ini:

<?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>

Ini akan memberi Anda tata letak super sederhana yang berisi ImageView (untuk merender gambar), Button (untuk pengguna ditekan) dan TextView tempat label akan ditampilkan.

Sekarang Anda telah menetapkan antarmuka pengguna. Sebelum memulai coding, tambahkan beberapa gambar sebagai aset, dan aplikasi akan melakukan inferensi pada gambar tersebut.

5. Memaketkan Gambar dengan Aplikasi

Salah satu cara untuk memaketkan file tambahan dengan aplikasi Android adalah dengan menambahkannya sebagai aset yang dikompilasi ke dalam aplikasi. Agar aplikasi ini tetap sederhana, kami akan melakukan ini untuk menambahkan gambar beberapa bunga. Nantinya, Anda dapat memperluas aplikasi ini untuk menggunakan CameraX atau library lain untuk mengambil foto dan menggunakannya. Namun, untuk memudahkan, kami akan memaketkan gambar untuk saat ini.

Di penjelajah project, pada app di bagian atas, klik kanan dan pilih New Directory.
Pada dialog yang muncul dengan listingan berbagai direktori, pilih src/main/assets.

Setelah melakukannya, folder aset baru akan muncul di penjelajah project:

Klik kanan folder ini dan Anda akan melihat pop-up yang berisi daftar opsi. Salah satunya adalah membuka folder di sistem file Anda. Temukan yang sesuai untuk sistem operasi Anda dan pilih. (Di Mac, ini akan menjadi Reveal in Finder, di Windows akan menjadi Open in Explorer, dan di Ubuntu akan menjadi Show in Files.)

Salin file ke dalamnya. Anda dapat mendownload gambar dari situs seperti Pixabay. Mengganti nama gambar menjadi nama yang sederhana direkomendasikan. Dalam hal ini, gambar telah diganti namanya menjadi flower1.jpg.

Setelah melakukannya, kembali ke Android Studio, dan Anda akan melihat file dalam folder aset.

Sekarang Anda siap memberi label gambar ini!

6. Tulis Kode Klasifikasi untuk Melabeli Gambar

(Dan sekarang bagian yang sudah kita tunggu-tunggu, melakukan Computer Vision di Android!)

Anda akan menulis kode dalam file MainActivity, jadi temukan bahwa di folder project di bagian com.google.devrel.imageclassifierstep1 (atau namespace apa pun yang setara jika Anda memilih yang lain). Perhatikan bahwa biasanya ada 3 folder namespace yang disiapkan dalam project Android Studio, satu untuk aplikasi, satu untuk Android Test, dan satu untuk pengujian. Anda akan menemukan MainActivity di dalam deskripsi yang tidak memiliki deskripsi setelahnya dalam tanda kurung.

Jika memilih untuk menggunakan Kotlin, Anda mungkin bertanya-tanya mengapa folder induk disebut Java. Ini adalah artefak bersejarah, sejak Android Studio hanya Java. Versi mendatang mungkin telah memperbaiki hal ini, namun jangan khawatir jika Anda ingin menggunakan Kotlin, tidak masalah. Hanya nama folder untuk kode sumber.

Buka file MainActivity, dan Anda akan melihat file class bernama MainActivity di editor kode. Tampilannya akan terlihat seperti ini:

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

Di bawah kurung kurawal tutup, Anda dapat menambahkan kode ekstensi yang bukan bagian dari class, tetapi dapat digunakan oleh class. Anda memerlukan ekstensi untuk membaca file dari aset sebagai bitmap. Ini akan digunakan untuk memuat gambar yang Anda salin ke folder aset sebelumnya.

Tambahkan kode ini:

// 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 mungkin akan mengeluhkannya, dan menyoroti beberapa kode dalam warna merah, seperti Context, Bitmap, dan IOException:

Jangan khawatir! Ini karena Anda belum mengimpor library yang berisi library tersebut. Android Studio menawarkan pintasan yang praktis.

Tarik kursor ke kata, lalu tekan ALT + Enter (Opsi + Enter di Mac) dan impor akan dibuat untuk Anda.
Selanjutnya, Anda dapat memuat bitmap dari aset dan menempatkannya di ImageView. Kembali ke onCreateFunction MainActivity, tambahkan kode ini tepat di bawah baris setContentView:

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

Seperti sebelumnya, beberapa kode akan ditandai dengan warna merah. Letakkan kursor di baris tersebut, dan gunakan Alt + Enter / Option + Enter untuk menambahkan impor secara otomatis.
Di file layout.xml yang Anda buat sebelumnya, Anda memberi ImageView nama imageToLabel, sehingga baris pertama akan membuat instance objek ImageView, yang disebut img, menggunakan informasi tata letak tersebut. Temukan detail menggunakan findViewById, yang merupakan fungsi bawaan Android. Kemudian, nama file flower1.jpg akan digunakan untuk memuat gambar dari folder aset menggunakan fungsi assetsToBitmap yang Anda buat di langkah sebelumnya. Terakhir, file ini menggunakan class abstrak bitmap untuk memuat bitmap ke dalam img.
File tata letak memiliki TextView yang akan digunakan untuk merender label yang ditentukan untuk gambar. Dapatkan objek kode untuk itu berikutnya. Tepat di bawah kode sebelumnya, tambahkan ini:

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

Seperti sebelumnya, ini menemukan informasi file tata letak untuk tampilan teks menggunakan namanya (periksa XML tempatnya disebut txtOutput) dan gunakan untuk membuat instance objek TextView yang disebut txtOutput.

Demikian pula, Anda akan membuat objek tombol untuk mewakili tombol tersebut, dan membuat instance dengan konten file tata letak.

Dalam file tata letak, kita memanggil tombol btnTest, sehingga dapat membuat instance seperti ini:

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

Setelah semua kode dan kontrol diinisialisasi, langkah berikutnya (dan terakhir) adalah menggunakannya untuk mendapatkan inferensi pada gambar.

Sebelum melanjutkan, pastikan kode onCreate Anda terlihat seperti ini:

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

Tidak satu pun kata kunci yang akan berwarna merah, yang menunjukkan bahwa kata kunci belum diimpor. Jika ya, kembali dan lakukan trik ALT + Enter untuk membuat impor.

Saat menggunakan pemberi label pada gambar di ML Kit, langkah pertama biasanya untuk membuat objek Options untuk menyesuaikan perilaku. Anda akan mengonversi gambar ke format InputImage yang dapat dikenali oleh ML Kit. Kemudian, Anda membuat objek Labeler untuk melakukan inferensi. Tindakan ini akan menampilkan panggilan asinkron kembali dengan hasilnya, yang kemudian dapat Anda uraikan.

Pada tombol yang baru saja Anda buat, lakukan semua itu di dalam peristiwa onClickListener. Berikut kode lengkapnya:

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
  }
}

Saat pengguna pertama kali mengklik tombol, kode akan membuat instance pemberi label menggunakan ImageLabeling.getClient, dengan meneruskan ImageLabelerOptions. Properti ini dilengkapi dengan properti DEFAULT_OPTIONS yang memungkinkan Anda menyiapkan dan menjalankannya dengan cepat.
Selanjutnya, InputImage akan dibuat dari bitmap menggunakan metode fromBitmap. InputImage adalah format yang diinginkan pada ML Kit untuk memproses gambar.
Terakhir, pemberi label akan memproses gambar, dan memberikan callback asinkron, baik saat berhasil maupun gagal. Jika inferensi berhasil, callback akan menyertakan daftar label. Selanjutnya Anda dapat mengurai daftar label ini untuk membaca teks label dan nilai keyakinan. Jika gagal, Anda akan dikirimi pengecualian yang dapat digunakan untuk melaporkan kepada pengguna.

Dan selesai! Kini, Anda dapat menjalankan aplikasi di perangkat Android atau dalam emulator. Jika belum pernah melakukannya, Anda dapat mempelajari caranya di sini: https://developer.android.com/studio/run/emulator

Ini aplikasi yang berjalan di emulator. Pada awalnya, Anda akan melihat gambar dan tombol, dan label akan kosong.

Tekan tombol, dan Anda akan mendapatkan kumpulan label untuk gambar.

Di sini, Anda dapat melihat bahwa pemberi label menentukan ada kemungkinan besar bahwa gambar tersebut berisi kelopak, bunga, tanaman, dan langit. Semua ini benar, dan semuanya menunjukkan bahwa model tersebut berfungsi untuk mengurai gambar.

Namun, aplikasi tersebut belum dapat menentukan bahwa ini adalah gambar aster. Untuk itu, Anda memerlukan model kustom yang dilatih dengan bunga tertentu, dan Anda akan melihat cara melakukannya di lab berikutnya.

Pada langkah berikut, Anda akan mempelajari cara membuat aplikasi yang sama ini di iOS.

7. Membuat Pengklasifikasi Gambar di iOS - Memulai

Anda dapat membuat aplikasi serupa di iOS menggunakan Xcode.

Luncurkan Xcode, dan dari menu file, pilih New Project. Anda akan melihat dialog ini:

Pilih Aplikasi seperti yang ditunjukkan, lalu klik Berikutnya. Anda akan diminta untuk memilih opsi untuk project Anda. Beri nama dan ID organisasi seperti yang ditunjukkan. Pastikan jenis antarmuka adalah Storyboard, dan bahasanya adalah Swift seperti yang ditunjukkan.

Jika ingin men-deploy ke ponsel dan menyiapkan profil developer, Anda dapat menetapkan setelan tim. Jika tidak, biarkan di None dan Anda dapat menggunakan simulator iOS untuk menjalankan aplikasi.
Klik Next dan pilih folder untuk menyimpan project dan file di dalamnya. Ingat lokasi project ini karena Anda akan membutuhkannya di langkah berikutnya.
Tutup Xcode untuk saat ini karena Anda akan membukanya kembali menggunakan file Workspace berbeda setelah langkah berikutnya.

8 Mengintegrasikan ML Kit menggunakan Cocoapods

Karena ML Kit juga berfungsi di iOS, Anda dapat menggunakannya dengan cara yang sangat mirip untuk membuat pengklasifikasi gambar. Untuk mengintegrasikannya, Anda akan menggunakan CocoaPods. Jika belum menginstalnya, Anda dapat melakukannya dengan mengikuti petunjuk di https://cocoapods.org/

Buka direktori tempat Anda membuat project. File ini harus berisi file .xcodetoolkit.

Di sini, Anda dapat melihat file .xcodetoolkit yang menunjukkan bahwa saya berada di lokasi yang benar.

Dalam folder ini, buat file baru bernama Podfile. Tidak ada ekstensi, hanya Podfile. Di dalamnya, tambahkan:

platform :ios, '10.0'

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

Simpan, dan kembali ke terminal. Dalam direktori yang sama, ketik pod install. Cocoapods akan mendownload library dan dependensi yang sesuai, lalu membuat ruang kerja baru yang menggabungkan project Anda dengan dependensi eksternalnya.

Perhatikan bahwa di bagian akhir, Asisten Google akan meminta Anda menutup sesi Xcode, dan menggunakan file ruang kerja mulai sekarang. Buka file ini dan Xcode akan diluncurkan dengan project asli Anda serta dependensi eksternal.

Sekarang Anda siap untuk melanjutkan ke langkah berikutnya dan membuat antarmuka pengguna.

9. Membuat UI iOS menggunakan Storyboard

Buka file Main.storyboard, dan Anda akan melihat tata letak antarmuka pengguna dengan permukaan desain untuk ponsel.
Di bagian kanan atas layar adalah tombol + yang dapat digunakan untuk menambahkan kontrol. Klik untuk mendapatkan palet kontrol.

Dari sana, tarik lalu lepas ImageView, Tombol, dan Label ke platform desain. Atur dari atas ke bawah seperti yang ditunjukkan berikut:

Klik dua kali tombol untuk mengedit teksnya dari Tombol menjadi Klasifikasikan.
Tarik tuas kontrol di sekitar label untuk memperbesarnya. (Misalnya lebar yang sama dengan UIImageView dan tinggi dua kali lipat.)
Pada label yang masih dipilih, klik tombol pemilih di kanan atas untuk menampilkan palet pemeriksa.
Setelah selesai melakukannya, temukan setelan Baris dan pastikan setelan ini disetel ke 0. Hal ini memungkinkan label merender jumlah baris dinamis.

Sekarang Anda siap untuk mengambil langkah berikutnya – menghubungkan UI ke kode menggunakan outlet dan tindakan.

10. Membuat Tindakan dan Stopkontak

Saat melakukan pengembangan iOS menggunakan storyboard, Anda mengacu pada informasi tata letak untuk kontrol Anda menggunakan stopkontak, dan menentukan kode yang akan dijalankan saat pengguna mengambil tindakan pada kontrol menggunakan tindakan.

Pada langkah berikutnya, Anda harus membuat outlet untuk ImageView dan Label. ImageView akan dirujuk dalam kode untuk memuat gambar ke dalamnya. Label akan dirujuk dalam kode untuk menetapkan teksnya berdasarkan inferensi yang berasal dari ML Kit.

Tutup palet inspector dengan mengklik kontrol di kanan atas layar, lalu klik tombol Tambahkan Editor di Kanan yang berada tepat di bawahnya.

Anda akan memiliki tata letak layar yang membingungkan karena main.storyboard dibuka dua kali. Di sebelah kiri, di navigator project, pilih ViewController.swift sehingga kode pengontrol tampilan terbuka. Sepertinya permukaan desain telah hilang dari editor storyboard di sebelah kiri, tetapi jangan khawatir, permukaan tersebut masih ada.
Untuk mengembalikannya, klik View Controller di Scene View Controller. Coba buat UI Anda terlihat seperti ini – dengan storyboard di sebelah kiri menunjukkan desain Anda, dan kode untuk ViewController.swift di sebelah kanan.

Pilih UIImageView dari permukaan desain di sebelah kiri, dan saat menekan tombol Control, tarik ke kode di sebelah kanan, letakkan di bawah kata kunci class (pada baris 11 di screenshot di atas).

Anda akan melihat panah saat menarik, dan saat melepaskannya, Anda akan mendapatkan pop-up seperti ini:

Isi kolom Name sebagai "imageView", lalu klik Connect.
Ulangi proses ini dengan label tersebut, dan beri nama "lblOutput".
Penting: Untuk tombol tersebut, Anda akan melakukan hal yang sama, tetapi pastikan Anda menyetel jenis koneksi ke Action, bukan Outlet.

Beri nama "doKlasifikasi", lalu klik Hubungkan.

Setelah selesai, kode Anda akan terlihat seperti ini: (Perhatikan bahwa label dan tampilan gambar dideklarasikan sebagai IBOutlet (Outlet Builder Antarmuka), dan tombolnya sebagai IBAction (Action Builder Antarmuka).)

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

}

Terakhir, kelompokkan gambar dengan aplikasi sehingga kita dapat melakukan klasifikasi dengan mudah. Untuk melakukannya, tarik file dari file explorer ke explorer di sebelah kiri Xcode. Saat melepaskannya, Anda akan mendapatkan pop-up seperti ini:

Pastikan kotak centang di bagian Tambahkan ke Target dicentang seperti yang ditunjukkan, lalu klik Selesai.

File akan dipaketkan dengan aplikasi Anda, dan kini Anda dapat mengklasifikasikannya dengan mudah. Sekarang Anda siap membuat kode antarmuka pengguna untuk melakukan klasifikasi gambar.

11. Menulis Kode untuk Klasifikasi Gambar

Setelah semuanya siap, menulis kode untuk melakukan klasifikasi gambar sangatlah mudah.

Mulai dengan menutup desainer storyboard dengan mengklik X di sudut kiri atas di atas permukaan desain. Dengan begitu, Anda dapat berfokus hanya pada kode. Anda akan mengedit ViewController.swift untuk bagian selanjutnya dari lab ini.
Impor library MLKitVision dan MLKit ImageLabeling dengan menambahkan kode ini di bagian atas, tepat di bawah impor UIKit:

import MLKitVision
import MLKitImageLabeling

Kemudian, dalam fungsi viewDidLoad, inisialisasi ImageView menggunakan file yang dipaketkan dalam aplikasi:

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

Buat fungsi bantuan untuk mendapatkan label gambar, tepat di bawah viewDidLoad():

func getLabels(with image: UIImage){

Membuat BrailleBack dari gambar. ML Kit menggunakan jenis ini saat melakukan klasifikasi gambar. Jadi, dalam fungsi getLabels, tambahkan kode ini:

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

Selanjutnya, buat opsi untuk pemberi label gambar. Ini akan diinisialisasi menggunakan opsi ini. Dalam hal ini, Anda hanya akan menetapkan opsi dasar confidenceThreshold. Artinya, Anda hanya akan meminta pemberi label untuk mengembalikan label yang memiliki keyakinan 0,4 atau lebih tinggi. Misalnya, untuk bunga, kelas seperti "tanaman" atau "hewan" akan memiliki keyakinan tinggi, tetapi kelas seperti "basket" atau "mobil" akan memiliki tingkat keyakinan yang rendah.

let options = ImageLabelerOptions()
options.confidenceThreshold = 0.4

Sekarang buat pemberi label menggunakan opsi ini:

let labeler = ImageLabeler.imageLabeler(options: options)

Setelah memiliki pemberi label, Anda dapat memprosesnya. Ini akan memberi Anda callback asinkron dengan label (jika berhasil) dan error (jika gagal), yang kemudian dapat Anda proses di fungsi lain yang akan kita buat dalam beberapa saat.

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

Jangan khawatir jika Xcode mengeluh bahwa tidak ada anggota processResult. Anda belum mengimplementasikannya dan akan melakukannya nanti.

Untuk memudahkan, berikut fungsi getLabels yang lengkap:

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

Jadi, sekarang Anda perlu menerapkan fungsi processResult. Proses ini sangat mudah, mengingat label dan objek error ditampilkan kepada kami. Label harus ditransmisikan ke dalam jenis ImageLabel dari ML Kit.

Setelah selesai, Anda dapat melakukan iterasi melalui kumpulan label, menarik deskripsi dan nilai keyakinan, lalu menambahkannya ke var yang bernama labeltexts. Setelah melakukan iterasi pada semua nilai tersebut, cukup tetapkan lblOutput.text ke nilai tersebut.

Berikut adalah fungsi lengkapnya:

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

Yang tersisa hanyalah memanggil getLabels saat pengguna menekan tombol tersebut.

Saat Anda membuat tindakan, semuanya sudah disiapkan untuk Anda, jadi Anda hanya perlu memperbarui IBAction yang disebut doClassificaiton yang Anda buat sebelumnya untuk memanggil getLabels.

Berikut adalah kode untuk memanggilnya dengan konten imageView:

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

Sekarang jalankan aplikasi Anda dan cobalah. Anda dapat melihat cara kerjanya di sini:

Perhatikan bahwa tata letak mungkin terlihat berbeda bergantung pada perangkat Anda.

Codelab tidak menjelajahi berbagai jenis tata letak per perangkat, yang merupakan konsep yang cukup kompleks. Jika Anda tidak melihat UI dengan benar, kembali ke editor storyboard, dan di bagian bawah, Anda akan melihat bagian Lihat sebagai: tempat Anda dapat memilih perangkat tertentu. Pilih satu gambar yang cocok dengan gambar atau perangkat yang diuji, dan edit UI-nya agar sesuai.

Seiring dengan pengembangan iOS Anda lebih lanjut, Anda akan mempelajari cara menggunakan batasan untuk memastikan UI Anda konsisten di seluruh ponsel, tetapi berada di luar cakupan lab ini.

12. Selamat!

Anda kini telah mengimplementasikan aplikasi di Android dan iOS yang memberi Anda computer vision dasar dengan model umum. Anda sudah menyelesaikan sebagian besar pekerjaan yang sulit.

Dalam codelab berikutnya, Anda akan membuat model kustom yang mengenali berbagai jenis bunga, dan hanya dengan beberapa baris kode, Anda dapat mengimplementasikan model kustom di aplikasi ini untuk membuatnya lebih berguna.