使用机器学习套件检测图片中的对象,以构建视觉化商品搜索:Android

1. 准备工作

727608486a28395d.png

您看过 Google 智能镜头演示吗?在此演示中,您可将手机摄像头对准某个物体,并找到可以网上购买的地点。 如果您想了解如何向应用添加同样的功能,此 Codelab 非常适合您。它是学习路线的一部分,它会教您如何在移动应用中构建商品图片搜索功能。

在此 Codelab 中,您将学习构建商品图片搜索功能的第一步:如何检测图片中的对象,让用户选择要搜索的对象。您将使用机器学习套件的对象检测和跟踪功能来构建此功能。

您可以通过学习衔接课程了解剩余步骤,包括如何使用 Vision API Product Search 构建商品搜索后端。

构建内容

  • 在此 Codelab 中,您将使用机器学习套件构建一个 Android 应用。您的应用将使用机器学习套件的对象检测和跟踪 API 来检测给定图片中的对象。然后,用户可以在我们的产品数据库中选择要搜索的对象。
  • 最后,您应该会看到类似于右边的图片。

学习内容

  • 如何将机器学习套件 SDK 集成到 Android 应用中
  • 机器学习套件的对象检测和跟踪 API

所需条件

  • 最新版本的 Android Studio (v4.1.2+)
  • Android Studio 模拟器或实体 Android 设备
  • 示例代码
  • 使用 Kotlin 进行 Android 开发的基础知识

此 Codelab 重点介绍机器学习套件。我们不会研究其他概念和代码块,提供这些内容供您直接复制和粘贴。

2. 进行设置

下载代码

点击下面的链接可下载本 Codelab 的所有代码:

解压下载的 ZIP 文件。此操作会解压缩一个根文件夹 (odml-pathways-main),其中包含您需要的所有资源。在本 Codelab 中,您只需要 product-search/codelab1/android 子目录中的源代码。

mlkit-android 代码库中的对象检测子目录包含两个目录:

  • android_studio_folder.pngstarter - 本 Codelab 的起始代码。
  • android_studio_folder.pngfinal - 完成后的示例应用的完整代码。

3.将机器学习套件的对象检测和跟踪 API 添加到项目中

将应用导入 Android Studio

首先,将 starter 应用导入 Android Studio。

转到 Android Studio,选择“Import Project”(Gradle、Eclipse ADT 等),然后从您之前下载的源代码中选择 starter 文件夹。

7c0f27882a2698ac.png

为机器学习套件的对象检测和跟踪添加依赖项

借助机器学习套件依赖项,您可以将机器学习套件 ODT SDK 集成到您的应用中。

转到项目的 app/build.gradle 文件,确认依赖项已存在:

build.gradle

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

将项目与 Gradle 文件同步

为了确保所有依赖项对您的应用都可用,此时应将项目与 gradle 文件同步。

从 Android Studio 工具栏中选择 Sync Project with Gradle Files ( b451ab2d04d835f9.png)。

(如果此按钮已停用,请确保您仅导入 starter/app/build.gradle,而不是导入整个代码库)。

4.运行入门级应用

现在,您已将项目导入 Android Studio 并为机器学习套件的对象检测和跟踪添加了依赖项,接下来就可以首次运行应用了。

通过 USB 将 Android 设备连接到主机或启动 Android Studio 模拟器,然后点击 Android Studio 工具栏中的 Run ( execute.png)。

运行和探索应用

应用应该会在 Android 设备上启动。它包含一些样板代码,您可以使用它来拍摄照片或选择预设图片,然后将其提供给您将在此 Codelab 中构建的对象检测和跟踪管道。在编写代码之前,稍微了解一下该应用:

首先,底部有一个 Button ( c6d965d639c3646.png) 来

  • 启动集成在您的设备/模拟器中的相机应用
  • 相机应用中拍摄照片
  • 起始应用接收拍摄的图片
  • 显示图片

请试试拍照按钮。按照提示拍照,接受照片,然后观察它是否在起始应用中显示。

其次,有 3 个预设图片可供选择。如果您在 Android 模拟器上运行,可以稍后使用这些映像测试对象检测代码。

  1. 从 3 张预设图片中选择一张图片。
  2. 看到该图片显示在较大的视图中。

1290481786af21b9.png

5. 添加设备端对象检测

在此步骤中,您将向起始应用添加用于检测图片中的对象的功能。如上一步所示,入门应用包含使用设备上的相机应用拍摄照片的样板代码。如果您在 Android 模拟器上运行 Codelab,还可在应用中使用 3 种预设图片来检测对象。

从预设图片中选择或通过相机应用拍摄照片时,样板代码会将其解码为Bitmap该实例显示在屏幕上并调用runObjectDetection方法。

在此步骤中,您将向 runObjectDetection 方法添加用于执行对象检测的代码!

对图片设置并运行设备端对象检测

只需 3 个简单步骤,即可通过 3 个 API 设置机器学习套件 ODT

  • 准备图片:InputImage
  • 创建检测器对象:ObjectDetection.getClient(options)
  • 连接上述 2 个对象:process(image)

您可以在 MainActivity.kt 文件内的 **runObjectDetection(bitmap: Bitmap)**函数中实现这些函数。

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

目前,该函数是空的。继续执行下面的步骤,以集成机器学习套件 ODT! 在此过程中,Android Studio 将提示您添加必要的导入

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

第 1 步:创建 InputImage

机器学习套件提供了一个简单的 API,用于从 Bitmap 创建 InputImage。然后,您可以将 InputImage 提供给 ML Kit API。

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

将上述代码添加runObjectDetection(bitmap:Bitmap) 的顶部。

第 2 步:创建检测器实例

机器学习套件遵循构建器设计模式,您将该配置传递给构建器,然后从中获取检测器。 有 3 个配置选项(在 Codelab 中使用粗体的选项):

  • 检测器模式(单图信息流
  • 检测模式(单个或 多个 对象检测
  • 分类模式 (已开启 或关闭

此 Codelab 适用于单张图片(多对象检测和分类),我们来执行以下操作:

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

第 3 步:将图片馈送到检测器

对象检测和分类是异步处理:

  • 你通过 process() 将图片发送给检测器
  • 检测器非常实用
  • 检测器通过回调将结果报告给您

以下代码只是这样做(复制并附加它到 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())
   }

完成后,检测器会通过

  1. 检测到的对象总数
  2. 每个检测到的对象的说明如下
  • trackingId:用于跟踪跨帧的整数(未在此 Codelab 中使用)
  • boundingBox:对象的边界框
  • 检测到的对象的标签列表(仅当启用了分类时)labels:
  • index(获取此标签的索引)
  • text(获取此标签的文字,包括“时尚商品”、“食品”、“家居用品”、“地点”、“植物”)
  • confidence(介于 0.0 和 1.0 之间,且为 1.0 表示 100%)

您可能已经注意到,代码会使用 debugPrint() 将检测到的结果输出到 Logcat。将以下代码添加到 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}")
       }
   }
}

现在,您可以接受要检测的图片了!

点击 Android Studio 工具栏中的 Run ( execute.png) 以运行 Codelab。请尝试选择预设的图片或拍照,然后查看Logcat 窗口(16bd6ea224cf8cf1.png 。您应该会看到如下所示的内容:

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

这意味着检测器检测到以下 3 个对象:

  • 类别有时尚好品家居商品
  • 第二个类没有返回任何类别,因为它是一个未知类。
  • trackingId(因为这是单图片检测模式)
  • 位于 boundingBox 矩形内的位置(例如:(481, 2021) - (2426, 3376))
  • 检测器十分确定第 1 个是时尚潮流 (90%)(它是一个连衣裙

从技术上讲,这正是使机器学习套件对象检测正常运行所需的一切 - 您目前已掌握了一切!恭喜

是的,在界面端,您仍处于启动的阶段,但可以利用界面上检测到的结果(例如绘制边界框)来打造更好的体验。下一步是直观呈现检测到的结果!

6.对检测结果进行后处理

在之前的步骤中,您将检测到的结果输出到 logcat 中:简单快速。

在本部分中,您将使用图片中的结果:

  • 在图片上绘制边界框
  • 在边界框内绘制类别名称和置信度

了解可视化实用程序

此 Codelab 中有一些样板代码,可帮助您直观呈现检测结果。利用这些实用程序来简化可视化代码:

  • class ImageClickableView。这是一个图片视图类,提供了一些便捷的实用程序,可用于直观呈现检测结果以及与之互动。
  • fun drawDetectionResults(results: List<DetectedObject>)此方法会在检测到的每个对象的中心绘制白色圆圈。
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) 这是一个回调,用于接收仅包含用户点按的对象的剪裁图片。您将在之后的 Codelab 中将此剪裁后的图片发送到图片搜索后端,以获取外观相似的结果。在此 Codelab 中,您不会使用此方法。

显示机器学习套件检测结果

使用可视化实用程序在输入图片上显示机器学习套件的对象检测结果。

转到调用 debugPrint() 的位置,然后在其下方添加以下代码段:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

运行应用

现在,点击 Android Studio 工具栏中的 Run ( execute.png)。

应用加载后,按下带有相机图标的按钮、将相机镜头对准某个对象、拍摄照片、接受照片(在“相机”应用中),您也可以轻松地点按任何预设图片。您应该会看到检测结果;再次按下 Button 或选择另一张图片重复几次,体验最新的机器学习套件 ODT!

5027148750dc0748.png

7. 恭喜!

您已使用机器学习套件向应用添加对象检测功能:

  • 使用 3 个 API 执行 3 个步骤
  • 创建输入图片
  • 创建检测器
  • 将图片发送到检测器

您只需完成此步骤便可开始投放广告!

所学内容

  • 如何将机器学习套件的对象检测和跟踪添加到您的 Android 应用
  • 如何使用机器学习套件中的设备端对象检测和跟踪功能来检测图片中的对象

后续步骤

  • 试用此 Codelab,了解如何将检测到的对象发送到商品搜索后端并显示搜索结果
  • 利用 ML Kit ODT 和更多图像和实时视频探索更多内容,体验检测和分类的准确性和性能
  • 查看深入了解对象检测学习路线,了解如何训练自定义模型
  • 了解 Material Design 针对实时相机静态图片进行对象检测的建议
  • 在您自己的 Android 应用中应用机器学习套件 ODT

了解详情