Phát hiện các đối tượng trong hình ảnh để tạo kết quả tìm kiếm sản phẩm trực quan bằng Bộ công cụ học máy: Android

1. Trước khi bắt đầu

Bạn đã xem bản minh hoạ về Google Ống kính chưa? Trong đó, bạn có thể hướng máy ảnh của điện thoại vào một vật thể và tìm nơi có thể mua vật thể đó trên mạng. Nếu bạn muốn tìm hiểu cách thêm tính năng tương tự vào ứng dụng của mình, thì lớp học lập trình này là dành cho bạn. Đây là một phần của lộ trình học tập hướng dẫn bạn cách tạo tính năng tìm kiếm hình ảnh sản phẩm trong ứng dụng di động.

Trong lớp học lập trình này, bạn sẽ tìm hiểu bước đầu tiên để xây dựng tính năng tìm kiếm hình ảnh sản phẩm: cách phát hiện đối tượng trong hình ảnh và cho phép người dùng chọn đối tượng họ muốn tìm kiếm. Bạn sẽ sử dụng tính năng Phát hiện và theo dõi đối tượng trong Bộ công cụ học máy để xây dựng tính năng này.

Bạn có thể tìm hiểu về các bước còn lại, bao gồm cả cách xây dựng phần phụ trợ tìm kiếm sản phẩm bằng Tìm kiếm sản phẩm API Vision trong lộ trình học tập.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ xây dựng một ứng dụng Android bằng Bộ công cụ học máy. Ứng dụng của bạn sẽ sử dụng API Theo dõi và phát hiện đối tượng của Bộ công cụ học máy để phát hiện đối tượng trong một hình ảnh nhất định. Sau đó, người dùng sẽ chọn một đối tượng mà họ muốn tìm kiếm trong cơ sở dữ liệu sản phẩm của chúng tôi. Cuối cùng, bạn sẽ thấy nội dung tương tự như hình ảnh ở bên phải.

Kiến thức bạn sẽ học được

• Cách tích hợp SDK Bộ công cụ học máy vào ứng dụng Android
• API Theo dõi và phát hiện đối tượng của Bộ công cụ học máy

Bạn cần có

• Một phiên bản Android Studio gần đây (phiên bản 4.1.2 trở lên)
• Trình mô phỏng Android Studio hoặc thiết bị Android thực
• Mã mẫu
• Kiến thức cơ bản về phát triển Android bằng Kotlin

Lớp học lập trình này tập trung vào Bộ công cụ máy học. Các khái niệm và khối mã khác không được nghiên cứu và chỉ được cung cấp cho bạn để sao chép và dán.

2. Bắt đầu thiết lập

Tải mã nguồn xuống

Nhấp vào đường liên kết sau đây để tải toàn bộ mã nguồn cho lớp học lập trình này:

Tải mã nguồn xuống

Giải nén tệp zip đã tải xuống. Thao tác này sẽ giải nén một thư mục gốc (odml-pathways-main) có tất cả tài nguyên bạn cần. Đối với lớp học lập trình này, bạn sẽ chỉ cần các nguồn trong thư mục con product-search/codelab1/android.

Thư mục con phát hiện đối tượng trong kho lưu trữ mlkit-android chứa hai thư mục:

• starter – Mã khởi động mà bạn sẽ xây dựng dựa trên lớp học lập trình này.
• final – Mã hoàn chỉnh cho ứng dụng mẫu đã hoàn tất.

3. Thêm API Theo dõi và phát hiện đối tượng của Bộ công cụ học máy vào dự án

Nhập ứng dụng vào Android Studio

Bắt đầu bằng cách nhập ứng dụng starter vào Android Studio.

Chuyển đến Android Studio, chọn Import Project (Nhập dự án) (Gradle, Eclipse ADT, v.v.) rồi chọn thư mục starter (bắt đầu) trong mã nguồn mà bạn đã tải xuống trước đó.

Thêm các phần phụ thuộc cho tính năng Phát hiện và theo dõi đối tượng của Bộ công cụ học máy

Các phần phụ thuộc của Bộ công cụ học máy cho phép bạn tích hợp SDK ODT của Bộ công cụ học máy vào ứng dụng của mình.

Chuyển đến tệp app/build.gradle của dự án và xác nhận rằng phần phụ thuộc đã có trong đó:

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

Đồng bộ hoá dự án với các tệp Gradle

Để đảm bảo rằng ứng dụng của bạn có tất cả các phần phụ thuộc, bạn nên đồng bộ hoá dự án với các tệp gradle tại thời điểm này.

Chọn Sync Project with Gradle Files (Đồng bộ hoá dự án với tệp Gradle) ( ) trên thanh công cụ Android Studio.

(Nếu nút này bị tắt, hãy đảm bảo bạn chỉ nhập starter/app/build.gradle chứ không phải toàn bộ kho lưu trữ.)

4. Chạy ứng dụng khởi động

Giờ đây, bạn đã nhập dự án vào Android Studio và thêm các phần phụ thuộc cho tính năng Phát hiện và Theo dõi đối tượng của Bộ công cụ học máy, bạn đã sẵn sàng chạy ứng dụng lần đầu tiên.

Kết nối thiết bị Android của bạn với máy chủ qua USB hoặc Khởi động trình mô phỏng Android Studio rồi nhấp vào Run (Chạy) ( ) trong thanh công cụ Android Studio.

Chạy và khám phá ứng dụng

Ứng dụng sẽ khởi chạy trên thiết bị Android của bạn. Ứng dụng này có một số mã nguyên mẫu cho phép bạn chụp ảnh hoặc chọn một hình ảnh đặt trước rồi đưa hình ảnh đó vào quy trình phát hiện và theo dõi đối tượng mà bạn sẽ tạo trong lớp học lập trình này. Khám phá một chút về ứng dụng trước khi viết mã:

Trước tiên, có một Nút ( ) ở dưới cùng để

• chạy ứng dụng máy ảnh được tích hợp trong thiết bị/trình mô phỏng
• chụp ảnh trong ứng dụng máy ảnh
• nhận hình ảnh đã chụp trong ứng dụng khởi động
• hiển thị hình ảnh

Thử nút "Chụp ảnh". Làm theo lời nhắc để chụp ảnh, chấp nhận ảnh và quan sát ảnh đó xuất hiện trong ứng dụng khởi động.

Thứ hai, bạn có thể chọn trong số 3 hình ảnh đặt trước. Bạn có thể sử dụng các hình ảnh này sau để kiểm thử mã phát hiện đối tượng nếu đang chạy trên trình mô phỏng Android.

1. Chọn một ảnh trong số 3 ảnh đặt trước.
2. Bạn sẽ thấy hình ảnh xuất hiện ở chế độ xem lớn hơn.

5. Thêm tính năng phát hiện vật thể trên thiết bị

Ở bước này, bạn sẽ thêm chức năng vào ứng dụng khởi động để phát hiện đối tượng trong hình ảnh. Như bạn đã thấy ở bước trước, ứng dụng khởi động chứa mã nguyên mẫu để chụp ảnh bằng ứng dụng máy ảnh trên thiết bị. Ngoài ra, ứng dụng còn có 3 hình ảnh đặt trước mà bạn có thể thử tính năng phát hiện đối tượng, nếu đang chạy lớp học lập trình trên trình mô phỏng Android.

Khi bạn chọn một hình ảnh, từ các hình ảnh đặt trước hoặc bằng cách chụp ảnh bằng ứng dụng máy ảnh, mã nguyên mẫu sẽ giải mã hình ảnh đó thành một thực thể Bitmap, hiển thị hình ảnh đó trên màn hình và gọi phương thức runObjectDetection bằng hình ảnh.

Trong bước này, bạn sẽ thêm mã vào phương thức runObjectDetection để phát hiện đối tượng!

Thiết lập và chạy tính năng phát hiện đối tượng trên thiết bị trên hình ảnh

Chỉ cần 3 bước đơn giản với 3 API để thiết lập ODT của Bộ công cụ học máy

• chuẩn bị hình ảnh: InputImage
• tạo đối tượng trình phát hiện: ObjectDetection.getClient(options)
• kết nối 2 đối tượng ở trên: process(image)

Bạn có thể thực hiện những việc này bên trong hàm **runObjectDetection(bitmap: Bitmap)**trong tệp MainActivity.kt.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

Hiện tại, hàm này đang trống. Hãy chuyển sang các bước sau để tích hợp ODT Bộ công cụ học máy! Trong quá trình này, Android Studio sẽ nhắc bạn thêm các lệnh nhập cần thiết

• com.google.mlkit.vision.common.InputImage
• com.google.mlkit.vision.objects.ObjectDetection
• com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

Bước 1: Tạo InputImage

Bộ công cụ học máy cung cấp một API đơn giản để tạo InputImage từ Bitmap. Sau đó, bạn có thể truyền InputImage vào các API Bộ công cụ học máy.

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

Thêm mã trên vào đầu runObjectDetection(bitmap:Bitmap).

Bước 2: Tạo một thực thể trình phát hiện

Bộ công cụ học máy tuân theo Mẫu thiết kế của trình tạo, bạn sẽ chuyển cấu hình đến trình tạo, sau đó lấy trình phát hiện từ cấu hình đó. Có 3 tuỳ chọn để định cấu hình (tuỳ chọn được in in đậm được dùng trong lớp học lập trình):

• chế độ trình phát hiện (hình ảnh đơn hoặc luồng)
• chế độ phát hiện (phát hiện một hoặc nhiều vật thể)
• chế độ phân loại (bật hoặc tắt)

Lớp học lập trình này dành cho một hình ảnh – phát hiện và phân loại nhiều đối tượng, hãy cùng thực hiện:

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

Bước 3: Cung cấp(các) hình ảnh cho trình phát hiện

Tính năng phát hiện và phân loại đối tượng được xử lý không đồng bộ:

• bạn gửi hình ảnh đến trình phát hiện (thông qua process())
• trình phát hiện hoạt động khá hiệu quả
• trình phát hiện sẽ báo cáo kết quả cho bạn thông qua lệnh gọi lại

Mã sau đây thực hiện việc đó (sao chép và nối mã đó vào mã hiện có bên trong fun runObjectDetection(bitmap:Bitmap)):

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

Sau khi hoàn tất, trình phát hiện sẽ thông báo cho bạn bằng

1. Tổng số đối tượng được phát hiện
2. Mỗi đối tượng được phát hiện được mô tả bằng

• trackingId: một số nguyên mà bạn dùng để theo dõi nó trên nhiều khung (KHÔNG dùng trong lớp học lập trình này)
• boundingBox: hộp giới hạn của đối tượng
• labels: danh sách(các) nhãn cho đối tượng được phát hiện (chỉ khi bật tính năng phân loại)
• index (Lấy chỉ mục của nhãn này)
• text (Lấy văn bản của nhãn này, bao gồm "Hàng thời trang", "Thực phẩm", "Hàng gia dụng", "Địa điểm", "Cây trồng")
• confidence (số thực có độ chính xác đơn từ 0 đến 1, trong đó 1 có nghĩa là 100%)

Có thể bạn đã nhận thấy rằng mã này in kết quả đã phát hiện vào Logcat bằng debugPrint(). Thêm lớp này vào lớp MainActivity:

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

Giờ thì bạn đã sẵn sàng chấp nhận hình ảnh để phát hiện!

Chạy lớp học lập trình bằng cách nhấp vào biểu tượng Chạy ( ) trong thanh công cụ của Android Studio. Hãy thử chọn một hình ảnh đặt trước hoặc chụp ảnh, sau đó xem cửa sổ logcat( ) bên trong IDE. Bạn sẽ thấy nội dung tương tự như sau:

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

nghĩa là trình phát hiện đã thấy 3 đối tượng:

• là Hàng thời trang và Hàng gia dụng.
• không có danh mục nào được trả về cho lớp thứ hai vì đó là một lớp không xác định.
• không có trackingId (vì đây là chế độ phát hiện hình ảnh đơn)
• vị trí bên trong hình chữ nhật boundingBox (ví dụ: (481, 2021) – (2426, 3376))
• trình phát hiện khá tự tin rằng hình ảnh đầu tiên là Hàng thời trang (90%) (đó là một chiếc váy)

Về mặt kỹ thuật, đó là tất cả những gì bạn cần để tính năng Phát hiện đối tượng của Bộ công cụ máy học hoạt động. Bạn đã có tất cả những gì cần thiết tại thời điểm này! Chúc mừng bạn!

Vâng, về giao diện người dùng, bạn vẫn đang ở giai đoạn bắt đầu, nhưng bạn có thể tận dụng các kết quả được phát hiện trên giao diện người dùng, chẳng hạn như vẽ hộp giới hạn để tạo trải nghiệm tốt hơn. Bước tiếp theo là trực quan hoá kết quả phát hiện được!

6. Xử lý hậu kỳ kết quả phát hiện

Trong các bước trước, bạn đã in kết quả phát hiện được vào logcat: đơn giản và nhanh chóng.

Trong phần này, bạn sẽ sử dụng kết quả trong hình ảnh:

• vẽ hộp giới hạn trên hình ảnh
• vẽ tên danh mục và độ tin cậy bên trong hộp giới hạn

Tìm hiểu về các tiện ích trực quan

Có một số mã nguyên mẫu trong lớp học lập trình này để giúp bạn trực quan hoá kết quả phát hiện. Hãy tận dụng các tiện ích này để đơn giản hoá mã hình ảnh của chúng ta:

• class ImageClickableView Đây là một lớp thành phần hiển thị hình ảnh cung cấp một số tiện ích thuận tiện để trực quan hoá và tương tác với kết quả phát hiện.
• fun drawDetectionResults(results: List<DetectedObject>) Phương thức này vẽ các vòng tròn màu trắng ở giữa mỗi đối tượng được phát hiện.
• fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Đây là lệnh gọi lại để nhận hình ảnh đã cắt chỉ chứa đối tượng mà người dùng đã nhấn vào. Bạn sẽ gửi hình ảnh đã cắt này đến phần phụ trợ tìm kiếm hình ảnh trong một lớp học lập trình sau này để nhận được kết quả tương tự về mặt hình ảnh. Trong lớp học lập trình này, bạn chưa sử dụng phương thức này.

Hiển thị kết quả phát hiện của Bộ công cụ học máy

Sử dụng các tiện ích trực quan hoá để hiển thị kết quả phát hiện đối tượng của Bộ công cụ học máy ở đầu hình ảnh đầu vào.

Chuyển đến vị trí bạn gọi debugPrint() rồi thêm đoạn mã sau bên dưới:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Chạy ứng dụng

Bây giờ, hãy nhấp vào Run (Chạy) ( ) trong thanh công cụ của Android Studio.

Sau khi ứng dụng tải, hãy nhấn vào Nút có biểu tượng máy ảnh, hướng máy ảnh đến một đối tượng, chụp ảnh, chấp nhận ảnh (trong Ứng dụng máy ảnh) hoặc bạn có thể dễ dàng nhấn vào bất kỳ hình ảnh đặt trước nào. Bạn sẽ thấy kết quả phát hiện; nhấn lại Nút hoặc chọn một hình ảnh khác để lặp lại vài lần và trải nghiệm ODT Bộ công cụ học máy mới nhất!

7. Xin chúc mừng!

Bạn đã sử dụng Bộ công cụ học máy để thêm tính năng Phát hiện đối tượng vào ứng dụng:

• 3 bước với 3 API
• Tạo hình ảnh đầu vào
• Tạo trình phát hiện
• Gửi hình ảnh đến trình phát hiện

Đó là tất cả những gì bạn cần để thiết lập và chạy ứng dụng!

Nội dung đã đề cập

• Cách thêm tính năng Theo dõi và phát hiện đối tượng của Bộ công cụ học máy vào ứng dụng Android
• Cách sử dụng tính năng phát hiện và theo dõi đối tượng trên thiết bị trong Bộ công cụ học máy để phát hiện đối tượng trong hình ảnh

Các bước tiếp theo

• Hãy thử lớp học lập trình này về cách gửi đối tượng đã phát hiện đến phần phụ trợ tìm kiếm sản phẩm và hiển thị kết quả tìm kiếm
• Khám phá thêm với ODT của Bộ công cụ học máy bằng nhiều hình ảnh và video trực tiếp hơn để trải nghiệm độ chính xác và hiệu suất của tính năng phát hiện và phân loại
• Hãy xem lộ trình học tập Tiến xa hơn với tính năng phát hiện đối tượng để tìm hiểu cách huấn luyện mô hình tuỳ chỉnh
• Đọc về các đề xuất của Material Design cho tính năng phát hiện đối tượng máy ảnh trực tiếp và hình ảnh tĩnh
• Áp dụng ODT của Bộ công cụ học máy trong ứng dụng Android của riêng bạn

Tìm hiểu thêm

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