1. Pengantar
ML Kit adalah SDK seluler yang menghadirkan keahlian machine learning Google untuk aplikasi Android dan iOS dalam paket yang andal dan mudah digunakan. Sebagai pengguna machine learning, baik pemula maupun berpengalaman, Anda dapat menerapkan fungsionalitas yang diperlukan dengan mudah hanya dalam beberapa baris kode. Anda tidak perlu memiliki pengetahuan mendalam tentang jaringan neural atau pengoptimalan model untuk memulai.
Bagaimana cara kerjanya?
ML Kit memudahkan penerapan teknik ML di aplikasi Anda dengan menyatukan teknologi ML Google, seperti Mobile Vision dan TensorFlow Lite, semua dalam satu SDK. Baik Anda memerlukan kemampuan real-time model di perangkat Mobile Vision, atau fleksibilitas model klasifikasi gambar TensorFlow Lite kustom, ML Kit memungkinkan hal ini hanya dengan beberapa baris kode.
Codelab ini akan memandu Anda dalam membuat aplikasi iOS sendiri yang dapat mendeteksi teks dan fitur wajah dalam gambar secara otomatis.
Yang akan Anda buat
Dalam codelab ini, Anda akan membuat aplikasi iOS dengan ML Kit. Aplikasi Anda akan:
|
|
Yang akan Anda pelajari
- Cara menggunakan ML Kit SDK untuk menambahkan kemampuan Machine Learning tingkat lanjut seperti pengenalan teks, deteksi fitur wajah ke aplikasi iOS mana pun dengan mudah
Yang Anda butuhkan
- Xcode versi terbaru (v12.4+)
- Simulator iOS atau perangkat iOS fisik yang menjalankan iOS 10.0+
- ML Kit hanya mendukung dua arsitektur 64-bit ini:
x86_64danarm64 - Kode contoh
- Pengetahuan dasar tentang pengembangan iOS di Swift
- Pemahaman dasar tentang model machine learning
Codelab ini berfokus pada ML Kit. Konsep dan blok kode yang tidak relevan akan dibahas sekilas dan disediakan, jadi Anda cukup menyalin dan menempelkannya.
2. Mempersiapkan
Download Kode
Klik link berikut untuk mendownload semua kode untuk codelab ini:
Ekstrak file ZIP yang didownload. Tindakan ini akan membuat folder root (mlkit-ios-codelab) dengan semua resource yang Anda butuhkan. Untuk codelab ini, Anda hanya memerlukan resource di subdirektori vision.
Subdirektori vision di repositori mlkit-ios-codelab berisi dua direktori:
starter—Kode awal yang Anda buat dalam codelab ini.
final—Kode lengkap untuk aplikasi contoh yang sudah selesai.
Tambahkan dependensi untuk ML Kit dengan CocoaPods
CocoaPods digunakan untuk menambahkan dependensi ML Kit ke aplikasi Anda. Jika Anda belum menginstal CocoaPods di komputer, temukan petunjuk penginstalannya di sini. Setelah diinstal, buka Podfile di editor favorit Anda dan tambahkan ML Kit sebagai dependensi:
Podfile
platform :ios, '10.0'
use_frameworks!
pod 'GoogleMLKit/FaceDetection'
pod 'GoogleMLKit/TextRecognition'
target 'MLKit-codelab' do
end
Instal Pod Cocoa ML Kit
Untuk memastikan semua dependensi tersedia untuk aplikasi Anda, Anda harus menggunakan command line untuk menginstal ML Kit Cocoa Pods.
Command Line
# Make sure you are in the root of your app
pod install
xed .
3. Menjalankan aplikasi awal
Sekarang Anda siap menjalankan aplikasi untuk pertama kalinya. Klik
Run di Xcode untuk mengompilasi aplikasi dan menjalankannya di iOS Simulator.
Aplikasi akan diluncurkan di simulator Anda. Pada tahap ini, Anda akan melihat tata letak dasar yang memiliki pemilih yang memungkinkan Anda memilih antara 2 gambar. Di bagian berikutnya, Anda akan menambahkan pengenalan teks ke aplikasi untuk mengidentifikasi teks dalam gambar.
4. Menambahkan pengenalan teks di perangkat
Pada langkah ini, kita akan menambahkan fungsi ke aplikasi Anda untuk mengenali teks dalam gambar.
Mengimpor modul MLVision
Pastikan impor berikut ada di class ViewController Anda.
ViewController.swift
import MLKit
Membuat VisionTextRecognizer
Tambahkan properti lambat berikut ke class ViewController Anda.
ViewController.swift
private lazy var textRecognizer = TextRecognizer.textRecognizer()
Menyiapkan dan menjalankan pengenalan teks di perangkat pada gambar
Tambahkan kode berikut ke metode runTextRecognition class ViewController:
ViewController.swift
func runTextRecognition(with image: UIImage) {
let visionImage = VisionImage(image: image)
textRecognizer.process(visionImage) { features, error in
self.processResult(from: features, error: error)
}
}
Kode di atas mengonfigurasi detektor pengenalan teks dan memanggil fungsi processResult(from:, error:) dengan respons.
Memproses respons pengenalan teks
Tambahkan kode berikut ke processResult di class ViewController untuk mengurai hasil dan menampilkannya di aplikasi Anda.
ViewController.swift
func processResult(from text: Text?, error: Error?) {
removeDetectionAnnotations()
guard error == nil, let text = text else {
let errorString = error?.localizedDescription ?? Constants.detectionNoResultsMessage
print("Text recognizer failed with error: \(errorString)")
return
}
let transform = self.transformMatrix()
// Blocks.
for block in text.blocks {
drawFrame(block.frame, in: .purple, transform: transform)
// Lines.
for line in block.lines {
drawFrame(line.frame, in: .orange, transform: transform)
// Elements.
for element in line.elements {
drawFrame(element.frame, in: .green, transform: transform)
let transformedRect = element.frame.applying(transform)
let label = UILabel(frame: transformedRect)
label.text = element.text
label.adjustsFontSizeToFitWidth = true
self.annotationOverlayView.addSubview(label)
}
}
}
}
Menjalankan aplikasi di simulator
Sekarang klik
Run di Xcode. Setelah aplikasi dimuat, pastikan Image 1 dipilih di pemilih, lalu klik tombol Find Text.
Aplikasi Anda sekarang akan terlihat seperti gambar di bawah, yang menampilkan hasil pengenalan teks dan kotak pembatas yang ditempatkan di atas gambar asli.

Foto: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0
Selamat, Anda baru saja menambahkan pengenalan teks di perangkat ke aplikasi menggunakan ML Kit. Pengenalan teks di perangkat sangat cocok untuk banyak kasus penggunaan karena berfungsi meskipun aplikasi Anda tidak memiliki konektivitas internet dan cukup cepat untuk digunakan pada gambar diam serta frame video live.
5. Menambahkan deteksi kontur wajah di perangkat
Pada langkah ini, kita akan menambahkan fungsi ke aplikasi Anda untuk mendeteksi kontur wajah dalam gambar.
Membuat FaceDetector
Tambahkan properti lambat berikut ke class ViewController Anda.
ViewController.swift
private lazy var faceDetectorOption: FaceDetectorOptions = {
let option = FaceDetectorOptions()
option.contourMode = .all
option.performanceMode = .fast
return option
}()
private lazy var faceDetector = FaceDetector.faceDetector(options: faceDetectorOption)
Menyiapkan dan menjalankan deteksi kontur wajah di perangkat pada gambar
Tambahkan kode berikut ke metode runFaceContourDetection class ViewController:
ViewController.swift
func runFaceContourDetection(with image: UIImage) {
let visionImage = VisionImage(image: image)
faceDetector.process(visionImage) { features, error in
self.processResult(from: features, error: error)
}
}
Kode di atas mengonfigurasi detektor pengenalan teks dan memanggil fungsi processResult(from:, error:) dengan respons.
Memproses respons detektor wajah
Tambahkan kode berikut ke processResult di class ViewController untuk mengurai hasil dan menampilkannya di aplikasi Anda.
ViewController.swift
func processResult(from faces: [Face]?, error: Error?) {
removeDetectionAnnotations()
guard let faces = faces else {
return
}
for feature in faces {
let transform = self.transformMatrix()
let transformedRect = feature.frame.applying(transform)
UIUtilities.addRectangle(
transformedRect,
to: self.annotationOverlayView,
color: UIColor.green
)
self.addContours(forFace: feature, transform: transform)
}
}
Terakhir, tambahkan metode bantuan addContours di class ViewController untuk menggambar titik kontur.
ViewController.swift
private func addContours(forFace face: Face, transform: CGAffineTransform) {
// Face
if let faceContour = face.contour(ofType: .face) {
for point in faceContour.points {
drawPoint(point, in: .blue, transform: transform)
}
}
// Eyebrows
if let topLeftEyebrowContour = face.contour(ofType: .leftEyebrowTop) {
for point in topLeftEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
if let bottomLeftEyebrowContour = face.contour(ofType: .leftEyebrowBottom) {
for point in bottomLeftEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
if let topRightEyebrowContour = face.contour(ofType: .rightEyebrowTop) {
for point in topRightEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
if let bottomRightEyebrowContour = face.contour(ofType: .rightEyebrowBottom) {
for point in bottomRightEyebrowContour.points {
drawPoint(point, in: .orange, transform: transform)
}
}
// Eyes
if let leftEyeContour = face.contour(ofType: .leftEye) {
for point in leftEyeContour.points {
drawPoint(point, in: .cyan, transform: transform)
}
}
if let rightEyeContour = face.contour(ofType: .rightEye) {
for point in rightEyeContour.points {
drawPoint(point, in: .cyan, transform: transform)
}
}
// Lips
if let topUpperLipContour = face.contour(ofType: .upperLipTop) {
for point in topUpperLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
if let bottomUpperLipContour = face.contour(ofType: .upperLipBottom) {
for point in bottomUpperLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
if let topLowerLipContour = face.contour(ofType: .lowerLipTop) {
for point in topLowerLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
if let bottomLowerLipContour = face.contour(ofType: .lowerLipBottom) {
for point in bottomLowerLipContour.points {
drawPoint(point, in: .red, transform: transform)
}
}
// Nose
if let noseBridgeContour = face.contour(ofType: .noseBridge) {
for point in noseBridgeContour.points {
drawPoint(point, in: .yellow, transform: transform)
}
}
if let noseBottomContour = face.contour(ofType: .noseBottom) {
for point in noseBottomContour.points {
drawPoint(point, in: .yellow, transform: transform)
}
}
}
Jalankan aplikasi di simulator
Sekarang klik
Run di Xcode. Setelah aplikasi dimuat, pastikan Image 2 dipilih di pemilih, lalu klik tombol Find Face Contour. Aplikasi Anda sekarang akan terlihat seperti gambar di bawah, yang menampilkan kontur wajah Grace Hopper sebagai titik-titik yang ditumpuk di atas gambar asli.

Selamat, Anda baru saja menambahkan deteksi kontur wajah di perangkat ke aplikasi menggunakan Deteksi kontur wajah ML Kit di perangkat sangat cocok untuk banyak kasus penggunaan karena berfungsi meskipun aplikasi Anda tidak memiliki konektivitas internet dan cukup cepat untuk digunakan pada gambar diam serta frame video live.
6. Selamat!
Anda telah menggunakan ML Kit untuk menambahkan kemampuan machine learning tingkat lanjut ke aplikasi Anda dengan mudah.
Yang telah kita bahas
- Cara menambahkan ML Kit ke aplikasi iOS Anda
- Cara menggunakan pengenalan teks di perangkat di ML Kit untuk menemukan teks dalam gambar
- Cara menggunakan pengenalan wajah di perangkat di ML Kit untuk mengidentifikasi fitur wajah dalam gambar
Langkah Berikutnya
- Gunakan ML Kit di aplikasi iOS Anda sendiri.
Pelajari Lebih Lanjut
- https://g.co/mlkit

