Обнаруживайте объекты на изображениях для визуального поиска товаров с помощью ML Kit: Android

1. Прежде чем начать

727608486a28395d.png

Вы видели демо-версию Google Lens, где вы можете навести камеру телефона на объект и найти, где его можно купить в Интернете? Если вы хотите узнать, как добавить ту же функцию в свое приложение, то эта лаборатория кода для вас. Это часть курса обучения, который научит вас, как встроить функцию поиска по изображениям продуктов в мобильное приложение.

В этой лаборатории кода вы узнаете первый шаг к созданию функции поиска по изображениям продуктов: как обнаруживать объекты на изображениях и позволять пользователю выбирать объекты, которые он хочет искать. Для создания этой функции вы будете использовать обнаружение и отслеживание объектов ML Kit .

Вы можете узнать об остальных шагах, в том числе о том, как создать серверную часть поиска продуктов с помощью Vision API Product Search , в схеме обучения .

Что ты построишь

  • В этой лаборатории кода вы собираетесь создать приложение для Android с помощью ML Kit. Ваше приложение будет использовать API обнаружения и отслеживания объектов ML Kit для обнаружения объектов на заданном изображении. Затем пользователь выберет объект, который он хочет найти в нашей базе данных продуктов.
  • В итоге вы должны увидеть что-то похожее на изображение справа.

Что вы узнаете

  • Как интегрировать ML Kit SDK в ваше приложение для Android
  • API обнаружения и отслеживания объектов ML Kit

Что вам понадобится

  • Последняя версия Android Studio (v4.1.2+).
  • Эмулятор Android Studio или физическое устройство Android
  • Пример кода
  • Базовые знания разработки Android на Kotlin.

Эта лаборатория ориентирована на ML Kit. Другие концепции и блоки кода не изучаются и предоставляются для простого копирования и вставки.

2. Настройте

Загрузите код

Щелкните следующую ссылку, чтобы загрузить весь код для этой лаборатории кода:

Распакуйте загруженный zip-файл. Это распакует корневую папку ( odml-pathways-main ) со всеми необходимыми вам ресурсами. Для этой лаборатории кода вам понадобятся только исходники в подкаталоге product-search/codelab1/android .

Подкаталог обнаружения объектов в репозитории mlkit-android содержит два каталога:

  • android_studio_folder.png starter — Начальный код, который вы используете для этой лаборатории кода.
  • android_studio_folder.png Final — Готовый код готового примера приложения.

3. Добавьте в проект API обнаружения и отслеживания объектов ML Kit.

Импортируйте приложение в Android Studio.

Начните с импорта стартового приложения в Android Studio.

Перейдите в Android Studio, выберите «Импорт проекта» (Gradle, Eclipse ADT и т. д.) и выберите стартовую папку из исходного кода, который вы скачали ранее.

7c0f27882a2698ac.png

Добавьте зависимости для обнаружения и отслеживания объектов ML Kit.

Зависимости ML Kit позволяют интегрировать ML Kit ODT SDK в ваше приложение.

Перейдите в файл app/build.gradle вашего проекта и убедитесь, что зависимость уже существует:

build.gradle 

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

Синхронизируйте свой проект с файлами gradle

Чтобы быть уверенным, что все зависимости доступны для вашего приложения, на этом этапе вам следует синхронизировать свой проект с файлами Gradle.

Выберите «Синхронизировать проект с файлами Gradle » ( b451ab2d04d835f9.png ) с панели инструментов Android Studio.

(Если эта кнопка отключена, убедитесь, что вы импортируете только starter/app/build.gradle, а не весь репозиторий.)

4. Запустите стартовое приложение.

Теперь, когда вы импортировали проект в Android Studio и добавили зависимости для обнаружения и отслеживания объектов ML Kit, вы готовы запустить приложение в первый раз.

Подключите устройство Android через USB к хосту или запустите эмулятор Android Studio и нажмите « Выполнить» ( выполнить.png ) на панели инструментов Android Studio.

Запустите и изучите приложение

Приложение должно запуститься на вашем устройстве Android. В нем есть некоторый шаблонный код, позволяющий вам сделать снимок или выбрать предустановленное изображение и передать его в конвейер обнаружения и отслеживания объектов, который вы создадите в этой лаборатории кода. Прежде чем писать код, немного изучите приложение:

Во-первых, есть кнопка ( c6d965d639c3646.png ) внизу, чтобы

  • запустите приложение камеры, интегрированное в ваше устройство/эмулятор
  • сделать снимок в приложении камеры
  • получить захваченное изображение в стартовом приложении
  • покажи изображение

Попробуйте кнопку « Сделать фото ». Следуйте инструкциям, чтобы сделать снимок, примите снимок и посмотрите, как он отображается в стартовом приложении .

Во-вторых, есть 3 предустановленных изображения, которые вы можете выбрать. Вы можете использовать эти изображения позже, чтобы протестировать код обнаружения объектов, если вы работаете на эмуляторе Android.

  1. Выберите изображение из 3 предустановленных изображений.
  2. Посмотрите, что изображение отображается в увеличенном виде.

1290481786af21b9.png

5. Добавьте обнаружение объектов на устройстве.

На этом этапе вы добавите в начальное приложение функцию обнаружения объектов на изображениях. Как вы видели на предыдущем шаге, стартовое приложение содержит шаблонный код для съемки фотографий с помощью приложения камеры на устройстве. В приложении также есть 3 предустановленных изображения, на которых вы можете попробовать обнаружение объектов, если вы запускаете кодовую лабораторию на эмуляторе Android.

Когда вы выбираете изображение из предустановленных изображений или делая фотографию с помощью приложения камеры, шаблонный код декодирует это изображение в экземпляр Bitmap , отображает его на экране и вызывает метод runObjectDetection с изображением.

На этом этапе вы добавите код в метод runObjectDetection для обнаружения объектов!

Настройка и запуск обнаружения объектов на устройстве на изображении

Для настройки ML Kit ODT нужно всего 3 простых шага с 3 API.

  • подготовить изображение: InputImage
  • создайте объект детектора: ObjectDetection.getClient(options)
  • соедините два объекта выше: process(image)

Вы достигаете этого внутри функции ** runObjectDetection(bitmap: Bitmap) ** в файле MainActivity.kt .

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

Сейчас функция пуста. Перейдите к следующим шагам, чтобы интегрировать ML Kit ODT! Попутно Android Studio предложит вам добавить необходимый импорт.

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

Шаг 1. Создайте входное изображение

ML Kit предоставляет простой API для создания InputImage из Bitmap . Затем вы можете передать InputImage в API ML Kit.

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

Добавьте приведенный выше код в начало runObjectDetection(bitmap:Bitmap) .

Шаг 2. Создайте экземпляр детектора

ML Kit соответствует шаблону проектирования Builder : вы передаете конфигурацию разработчику, а затем получаете от него детектор . Существует 3 варианта настройки (выделенный жирным шрифтом используется в кодовой лаборатории):

  • режим детектора ( одиночное изображение или поток )
  • режим обнаружения (обнаружение одного или нескольких объектов )
  • режим классификации ( вкл. или выкл .)

Эта кодовая лаборатория предназначена для обнаружения и классификации одного изображения — нескольких объектов, давайте сделаем это: 

// 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 : целое число, которое вы используете для отслеживания между кадрами (НЕ используется в этой кодовой лаборатории)
  • boundingBox : ограничивающая рамка объекта.
  • labels: список меток для обнаруженного объекта (только если классификация включена)
  • index (Получить индекс этой метки)
  • text (Получите текст этой этикетки, включая «Модные товары», «Еда», «Товары для дома», «Место», «Растение»)
  • confidence (плавающее значение от 0,0 до 1,0, где 1,0 означает 100%)

Вы, вероятно, заметили, что код выводит обнаруженные результаты в Logcat с помощью debugPrint() . Добавьте его в класс 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}")
       }
   }
}

Теперь вы готовы принимать изображения для обнаружения!

Запустите лабораторию кода, нажав кнопку «Выполнить» ( выполнить.png ) на панели инструментов Android Studio. Попробуйте выбрать предустановленное изображение или сделать снимок, затем посмотрите на окно logcat( 16bd6ea224cf8cf1.png ) внутри IDE. Вы должны увидеть что-то похожее на это:

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))
  • Детектор вполне уверен, что первое — это модный товар (90%) ( это платье )

Технически это все, что вам нужно для работы ML Kit Object Detection — все это у вас уже есть! Поздравляем !

Да, что касается пользовательского интерфейса, вы все еще находитесь на том этапе, когда начали, но вы можете использовать обнаруженные результаты в пользовательском интерфейсе, например, нарисовать ограничивающую рамку, чтобы улучшить взаимодействие. Следующий шаг — визуализация обнаруженных результатов!

6. Постобработка результатов обнаружения

На предыдущих шагах вы распечатали обнаруженный результат в logcat : просто и быстро.

В этом разделе вы будете использовать результат на изображении:

  • нарисовать ограничивающую рамку на изображении
  • нарисуйте имя категории и уверенность внутри ограничительной рамки

Понимание утилит визуализации

Внутри лаборатории кода есть некоторый шаблонный код, который поможет вам визуализировать результат обнаружения. Используйте эти утилиты, чтобы упростить наш код визуализации:

  • class ImageClickableView Это класс представления изображений, который предоставляет несколько удобных утилит для визуализации и взаимодействия с результатом обнаружения.
  • fun drawDetectionResults(results: List<DetectedObject>) Этот метод рисует белые круги в центре каждого обнаруженного объекта.
  • fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Это обратный вызов для получения обрезанного изображения, содержащего только тот объект, на который нажал пользователь. Вы отправите это обрезанное изображение в серверную часть поиска изображений в более поздней лаборатории кода, чтобы получить визуально похожий результат. В этой лаборатории вы пока не будете использовать этот метод.

Показать результат обнаружения ML Kit

Используйте утилиты визуализации, чтобы отобразить результат обнаружения объекта ML Kit поверх входного изображения.

Перейдите туда, где вы вызываете debugPrint() , и добавьте под ним следующий фрагмент кода: 

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Запусти это

Теперь нажмите «Выполнить» ( выполнить.png ) на панели инструментов Android Studio.

После загрузки приложения нажмите кнопку со значком камеры, наведите камеру на объект, сделайте снимок, примите фотографию (в приложении «Камера») или вы можете легко нажать на любое предустановленное изображение. Вы должны увидеть результат обнаружения; нажмите кнопку еще раз или выберите другое изображение, чтобы повторить его пару раз, и испытайте новейшую версию ML Kit ODT!

5027148750dc0748.png

7. Поздравляем!

Вы использовали ML Kit, чтобы добавить в свое приложение возможности обнаружения объектов:

  • 3 шага с 3 API
  • Создать входное изображение
  • Создать детектор
  • Отправить изображение в детектор

Это все, что вам нужно, чтобы запустить его!

Что мы рассмотрели

  • Как добавить обнаружение и отслеживание объектов ML Kit в ваше приложение для Android
  • Как использовать обнаружение и отслеживание объектов на устройстве в ML Kit для обнаружения объектов на изображениях

Следующие шаги

  • Попробуйте эту лабораторную работу о том, как отправить обнаруженный объект на сервер поиска продуктов и отобразить результаты поиска.
  • Узнайте больше с помощью ML Kit ODT с большим количеством изображений и видео в реальном времени, чтобы оценить точность и производительность обнаружения, классификации.
  • Ознакомьтесь с учебным курсом «Дальше с обнаружением объектов» , чтобы узнать, как обучать пользовательскую модель.
  • Прочтите о рекомендациях Material Design для обнаружения объектов с помощью камеры в реальном времени и статического изображения.
  • Примените ML Kit ODT в своем собственном приложении для Android.

Узнать больше