1. Antes de comenzar
¿Ya viste la demostración de Google Lens, donde puedes apuntar la cámara de tu teléfono hacia un objeto para encontrar dónde puedes comprar en línea? Si deseas aprender a agregar la misma función a tu app, este codelab es para ti. Es parte de una ruta de aprendizaje que enseña a compilar una función de búsqueda de imágenes de productos en una app para dispositivos móviles.
En este codelab, aprenderás el primer paso para compilar una función de búsqueda de imágenes de productos: cómo detectar objetos en imágenes y permitir que el usuario elija los objetos que desea buscar. Usará Detección y seguimiento de objetos del Kit de AA para compilar esta función.
En la ruta de aprendizaje, puede aprender sobre los pasos restantes, incluido cómo compilar un backend de búsqueda de productos con la API de Vision para Product Search.
Qué compilarás
|
|
Qué aprenderá
- Cómo integrar el SDK del Kit de AA en tu aplicación para Android
- API de detección y seguimiento de objetos del Kit de AA
Requisitos
- Una versión reciente de Android Studio (v4.1.2 o posterior)
- Android Studio Emulator o un dispositivo Android físico
- El código de muestra
- Conocimientos básicos sobre el desarrollo para Android en Kotlin
Este codelab está enfocado en el Kit de AA. Otros conceptos y bloques de código no se estudian y se proporcionan para que simplemente los copies y los pegues.
2. Prepárate
Descarga el código
Haz clic en el siguiente vínculo a fin de descargar todo el código de este codelab:
Descomprime el archivo zip descargado. Esto descomprimirá una carpeta raíz (odml-pathways-main) con todos los recursos que necesitarás. Para este codelab, solo necesitarás las fuentes del subdirectorio product-search/codelab1/android.
El subdirectorio de detección de objetos del repositorio mlkit-android contiene los siguientes dos directorios:
starter: Código inicial en el que se basa este codelab.- final: Código completo para la app de muestra finalizada.
3. Agregar la API de detección y seguimiento de objetos del Kit de AA al proyecto
Importa la app a Android Studio
Primero, importa la app de starter a Android Studio.
Ve a Android Studio, selecciona Import Project (Gradle, ADT para Eclipse, etc.) y elige la carpeta starter del código fuente que descargaste antes.
Agrega las dependencias para la detección y el seguimiento de objetos del Kit de AA
Las dependencias del Kit de AA te permiten integrar el SDK de ODT del Kit de AA en tu app.
Ve al archivo app/build.gradle de tu proyecto y confirma que la dependencia ya está allí:
build.gradle
dependencies {
// ...
implementation 'com.google.mlkit:object-detection:16.2.4'
}
Cómo sincronizar tu proyecto con archivos de Gradle
A fin de asegurarte de que todas las dependencias estén disponibles para tu app, en este momento, debes sincronizar tu proyecto con archivos de Gradle.
En la barra de herramientas de Android Studio, selecciona Sync Project with Gradle Files ( 
).
(Si se inhabilita este botón, asegúrate de importar solo starter/app/build.gradle, no todo el repositorio).
4. Ejecuta la app de inicio
Ahora que importaste el proyecto a Android Studio y agregaste las dependencias para la detección y el seguimiento de objetos del Kit de AA, ya puedes ejecutar la app por primera vez.
Conecta tu dispositivo Android mediante USB a tu host o inicia el emulador de Android Studio y haz clic en Run ( 
) en la barra de herramientas de Android Studio.
Cómo ejecutar y explorar la app
La app debe iniciarse en el dispositivo Android. Tiene código estándar para permitirte capturar una foto, o seleccionar una imagen predeterminada y enviarla a una canalización de detección y seguimiento de objetos que compilarás en este codelab. Explora la app un poco antes de escribir el código:
Primero, hay un botón ( 
) en la parte inferior para
- Inicia la aplicación de la cámara integrada en tu dispositivo o emulador.
- toma una foto en la app de la cámara
- recibir la imagen capturada en la aplicación de inicio
- mostrar la imagen
Prueba el botón "Tomar foto". Sigue las indicaciones para tomar una foto, aceptarla y observarla dentro de la app de inicio.
En segundo lugar, hay 3 imágenes predeterminadas que puedes elegir. Puedes usar estas imágenes más adelante para probar el código de detección de objetos si estás ejecutando en Android Emulator.
- Selecciona una imagen de las 3 imágenes predeterminadas.
- Observa que la imagen aparezca en la vista más grande.
5. Cómo agregar la detección de objetos en el dispositivo
En este paso, agregarás la funcionalidad a la app de inicio para detectar objetos en imágenes. Como viste en el paso anterior, la app de inicio contiene código estándar para tomar fotos con la app de cámara del dispositivo. También hay 3 imágenes predeterminadas en la app que puedes probar con la detección de objetos si ejecutas el codelab en un emulador de Android.
Cuando seleccionas una imagen, ya sea entre las predeterminadas o cuando tomas una foto con la app de cámara, el código estándar decodifica esa imagen en una instancia de Bitmap, la muestra en la pantalla y llama al método runObjectDetection con el imagen.
En este paso, agregarás código al método runObjectDetection para realizar la detección de objetos.
Cómo configurar y ejecutar la detección de objetos en el dispositivo en una imagen
Solo tienes que seguir 3 pasos sencillos con 3 API para configurar el ODT del Kit de AA
- prepara una imagen:
InputImage - crea un objeto detector:
ObjectDetection.getClient(options) - conecta los 2 objetos anteriores:
process(image)
Esto se logra dentro de la función **runObjectDetection(bitmap: Bitmap)**en el archivo MainActivity.kt.
/**
* ML Kit Object Detection Function
*/
private fun runObjectDetection(bitmap: Bitmap) {
}
En este momento, la función está vacía. Sigue los pasos que se indican a continuación para integrar el ODT del Kit de AA. Durante el proceso, Android Studio te solicitará que agregues las importaciones necesarias
com.google.mlkit.vision.common.InputImagecom.google.mlkit.vision.objects.ObjectDetectioncom.google.mlkit.vision.objects.defaults.ObjectDetectorOptions
Paso 1: Crea una InputImage
El Kit de AA proporciona una API simple para crear un objeto InputImage a partir de un Bitmap. Luego, puedes ingresar un InputImage a las API del Kit de AA.
// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)
Agrega el código anterior en la parte superior de runObjectDetection(bitmap:Bitmap).
Paso 2: Crea una instancia de detector
El Kit de AA sigue el patrón de diseño de compilador: pasarías la configuración al compilador y, luego, le adquirirías un detector. Hay 3 opciones que debes configurar (la que se usa en negrita se usa en el codelab):
- modo de detector (imagen única o transmisión)
- modo de detección (detección de objeto única o múltiples )
- modo de clasificación (activado o desactivado)
En este codelab, se usa para una sola imagen: detección y clasificación de varios objetos. Vamos a hacer lo siguiente:
// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
.setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
.enableMultipleObjects()
.enableClassification()
.build()
val objectDetector = ObjectDetection.getClient(options)
Paso 3: Feed las imágenes al detector
La detección y clasificación de objetos es un procesamiento asíncrono:
- envías una imagen al detector (a través de
process()) - el detector funciona bastante bien en él
- el detector informa el resultado a través de una devolución de llamada
El siguiente código hace precisamente eso (cópialo y agrégalo al código existente dentro de 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())
}
Al finalizar, el detector te notifica con
- Cantidad total de objetos detectados
- Cada objeto detectado se describe con
trackingId: Es un número entero que usas para hacer un seguimiento de fotogramas cruzados (NO se usa en este codelab).boundingBox: El cuadro de límite del objeto- Lista de etiquetas
labels:para el objeto detectado (solo cuando la clasificación está habilitada) index(Obtener el índice de esta etiqueta)text(Obtenga el texto de esta etiqueta, incluidos "Artículos de moda", "Comidas", "Artículos para el hogar", "Lugar", "Plantas")confidence(un número de punto flotante entre 0.0 y 1.0 con 1.0 significa 100%)
Es probable que hayas notado que el código impreso detectó resultados en Logcat con debugPrint(). Agrégalo en la clase 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}")
}
}
}
Ahora, estás listo para aceptar imágenes y detectarlas.
Para ejecutar el codelab, haz clic en Run ( ) en la barra de herramientas de Android Studio. Intenta seleccionar una imagen predeterminada o toma una foto, luego mira la ventana de logcat(
) dentro del IDE. Deberías ver un resultado similar a este:
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
Eso significa que el detector detectó 3 objetos de lo siguiente:
- Las categorías son Modas buenas y Buena forma de casa.
- No se muestra ninguna categoría para la segunda, ya que se trata de una clase desconocida.
- no
trackingId(porque este es el modo de detección de imágenes únicas) - posición dentro del rectángulo
boundingBox(p.ej., (481, 2021) - (2426, 3376)) - el detector está bastante seguro de que el primero es un artículo de moda (90%) (es un vestido),
Técnicamente, eso es todo lo que necesitas para que funcione la detección de objetos del Kit de AA. ¡Lo tienes todo en este momento! Felicitaciones.
Sí, en el lado de la IU, todavía estás en la etapa inicial, pero puedes usar los resultados detectados en la IU, como dibujar el cuadro de límite para crear una mejor experiencia. El siguiente paso es visualizar los resultados detectados.
6. Posprocesamiento de los resultados de detección
En pasos anteriores, imprimiste el resultado detectado en logcat: simple y rápido.
En esta sección, usarás el resultado de la imagen:
- dibujar el cuadro de límite en la imagen
- dibujar el nombre de la categoría y la confianza dentro del cuadro de límite
Información sobre las utilidades de visualización
Hay código estándar dentro del codelab que te ayudará a visualizar el resultado de la detección. Aprovecha estas utilidades para simplificar nuestro código de visualización:
class ImageClickableViewEsta es una clase de vista de imagen que proporciona algunas utilidades convenientes para la visualización y la interacción con el resultado de la detección.fun drawDetectionResults(results: List<DetectedObject>)Este método dibuja círculos blancos en el centro de cada objeto detectado.fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit))Esta es una devolución de llamada para recibir la imagen recortada que contiene solo el objeto que el usuario presionó. En un codelab posterior, enviarás esta imagen recortada al backend de búsqueda de imágenes para obtener un resultado visualmente similar. En este codelab, aún no usarás este método.
Mostrar el resultado de detección del Kit de AA
Usa las utilidades de visualización para mostrar el resultado de la detección de objetos del Kit de AA sobre la imagen de entrada.
Ve a donde llamas a debugPrint() y agrega el siguiente fragmento de código:
runOnUiThread {
viewBinding.ivPreview.drawDetectionResults(it)
}
Ejecuta el código
Ahora, haz clic en Run ( ) en la barra de herramientas de Android Studio.
Una vez que se cargue la app, presiona el botón con el ícono de la cámara, apunta la cámara a un objeto, toma una foto o acepta la foto (en la app de Cámara) o puedes presionar fácilmente cualquier imagen predeterminada. Deberías ver el resultado de la detección. vuelve a presionar el botón o selecciona otra imagen para que se repita un par de veces y experimentar la versión más reciente del Kit de AA ODT.
7. ¡Felicitaciones!
Usaste el Kit de AA para agregar capacidades de detección de objetos a la app:
- 3 pasos con 3 API
- Crear imagen de entrada
- Crear detector
- Enviar imagen al detector
¡Eso es todo lo que necesitas para ponerte en marcha!
Temas abordados
- Cómo agregar la detección y el seguimiento de objetos del Kit de AA a tu app para Android
- Cómo usar la detección y el seguimiento de objetos en el dispositivo con el Kit de AA para detectar objetos en imágenes
Próximos pasos
- Prueba este codelab sobre cómo enviar el objeto detectado a un backend de búsqueda de productos y mostrar los resultados de la búsqueda.
- Explora más con ML Kit ODT con más imágenes y video en vivo para experimentar la detección y clasificación del rendimiento y la clasificación
- Consulta la ruta de aprendizaje Ir más allá con la detección de objetos para aprender a entrenar un modelo personalizado.
- Obtén información sobre las recomendaciones de material design para detección de objetos cámara en vivo e imagen estática
- Aplicar el ODT del Kit de AA en tu propia app para Android