1. Antes de comenzar
¿Viste la demostración de Google Lens, en la que puedes apuntar la cámara de tu teléfono a un objeto y encontrar dónde puedes comprarlo en línea? Si quieres aprender a agregar la misma función a tu app, este codelab es para ti. Forma parte de una ruta de aprendizaje que te 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ás ML Kit Object Detection and Tracking para compilar esta función.
Puedes obtener información sobre los pasos restantes, incluido cómo compilar un backend de búsqueda de productos con Product Search de la API de Vision, en la ruta de aprendizaje.
Qué compilarás
|
|
Qué aprenderás
- Cómo integrar el SDK de ML Kit en tu aplicación para Android
- API de ML Kit Object Detection and Tracking
Requisitos
- Una versión reciente de Android Studio (v4.1.2+)
- Emulador de Android Studio o un dispositivo Android físico
- El código de muestra
- Conocimientos básicos sobre el desarrollo de Android en Kotlin
Este codelab se enfoca en ML Kit. No se estudian otros conceptos y bloques de código, y se proporcionan para que simplemente los copies y 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 en el subdirectorio product-search/codelab1/android.
El subdirectorio de detección de objetos en el repositorio mlkit-android contiene dos directorios:
starter: Código inicial que compilarás en este codelab.- final: Código completo de la app de muestra terminada
3. Agrega la API de ML Kit Object Detection and Tracking al proyecto
Importa la app a Android Studio
Comienza por importar la app starter a Android Studio.
Ve a Android Studio, selecciona Import Project (Gradle, Eclipse ADT, etc.) y elige la carpeta starter del código fuente que descargaste antes.
Agrega las dependencias de ML Kit Object Detection and Tracking
Las dependencias de ML Kit te permiten integrar el SDK de ML Kit ODT 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'
}
Sincroniza tu proyecto con archivos de Gradle
Para asegurarte de que todas las dependencias estén disponibles para tu app, debes sincronizar tu proyecto con archivos de Gradle en este punto.
Selecciona Sync Project with Gradle Files ( 
) en la barra de herramientas de Android Studio.
(Si este botón está inhabilitado, asegúrate de importar solo starter/app/build.gradle, no todo el repositorio).
4. Ejecuta la app de partida
Ahora que importaste el proyecto a Android Studio y agregaste las dependencias de ML Kit Object Detection and Tracking, tienes todo listo para ejecutar la app por primera vez.
Conecta tu dispositivo Android a través de USB a tu host o inicia el emulador de Android Studio, y haz clic en Run ( 
) en la barra de herramientas de Android Studio.
Ejecuta y explora la app
La app debería iniciarse en tu dispositivo Android. Tiene un 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 un poco la app antes de escribir el código:
Primero, hay un Button ( 
) en la parte inferior para lo siguiente:
- iniciar la app de cámara integrada en tu dispositivo o emulador
- tomar una foto dentro de tu app de cámara
- recibir la imagen capturada en la app de partida
- mostrar la imagen
Prueba el botón "Take photo". Sigue las instrucciones para tomar una foto, aceptarla y observarla en la app de partida.
En segundo lugar, hay 3 imágenes predeterminadas entre las que puedes elegir. Puedes usar estas imágenes más adelante para probar el código de detección de objetos si ejecutas el codelab en un emulador de Android.
- Selecciona una imagen de las 3 imágenes predeterminadas.
- Observa que la imagen aparece en la vista más grande.
5. Agrega la detección de objetos integrada en el dispositivo
En este paso, agregarás la funcionalidad a la app de partida para detectar objetos en imágenes. Como viste en el paso anterior, la app de partida contiene código estándar para tomar fotos con la app de cámara en el dispositivo. También hay 3 imágenes predeterminadas en la app en las que puedes probar la detección de objetos si ejecutas el codelab en un emulador de Android.
Cuando seleccionas una imagen, ya sea de las imágenes predeterminadas o tomando 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 la imagen.
En este paso, agregarás código al método runObjectDetection para realizar la detección de objetos.
Configura y ejecuta la detección de objetos integrada en el dispositivo en una imagen
Solo hay 3 pasos simples con 3 APIs para configurar ML Kit ODT.
- preparar una imagen:
InputImage - crear un objeto detector:
ObjectDetection.getClient(options) - conectar los 2 objetos anteriores:
process(image)
Puedes lograrlo 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. Pasa a los siguientes pasos para integrar ML Kit ODT. En el camino, Android Studio te pedirá 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 un InputImage
ML Kit proporciona una API simple para crear un InputImage a partir de un Bitmap. Luego, puedes enviar un InputImage a las APIs de ML Kit.
// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)
Agrega el código anterior a la parte superior de runObjectDetection(bitmap:Bitmap).
Paso 2: Crea una instancia del detector
ML Kit sigue el patrón de diseño del compilador, por lo que pasarás la configuración al compilador y, luego, obtendrás un detector de él. Hay 3 opciones para configurar (la que está en negrita se usa en el codelab):
- modo de detector (imagen individual o transmisión)
- modo de detección (detección de objetos individuales o múltiples)
- modo de clasificación (activado o desactivado)
Este codelab es para la detección y clasificación de imágenes individuales y múltiples objetos. Hagamos 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: Envía 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 trabaja mucho en ella
- el detector te informa el resultado a través de una devolución de llamada
El siguiente código hace exactamente 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())
}
Una vez completado, el detector te notifica con lo siguiente:
- Cantidad total de objetos detectados
- Cada objeto detectado se describe con lo siguiente:
trackingId: Un número entero que usas para hacerle un seguimiento en todos los fotogramas (NO se usa en este codelab)boundingBox: Cuadro de límite del objetolabels:Lista de etiquetas para el objeto detectado (solo cuando la clasificación está habilitada)index(Obtén el índice de esta etiqueta)text(Obtén el texto de esta etiqueta, incluidos "Fashion Goods", "Food", "Home Goods", "Place" y "Plant")confidence(un número de punto flotante entre 0.0 y 1.0, donde 1.0 significa 100%)
Probablemente notaste que el código imprime los resultados detectados en Logcat con debugPrint(). Agrégalo a 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 tienes todo listo para aceptar imágenes para la detección.
Para ejecutar el codelab, haz clic en Run ( ) en la barra de herramientas de Android Studio. Intenta seleccionar una imagen predeterminada o tomar una foto y, 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
lo que significa que el detector vio 3 objetos de lo siguiente:
- Las categorías son Fashion good y Home good.
- No se muestra ninguna categoría para la segunda porque es una clase desconocida.
- No hay
trackingId(porque este es el modo de detección de imágenes individuales). - Posición dentro del rectángulo
boundingBox(p.ej., (481, 2021) – (2426, 3376)) - El detector tiene bastante confianza en que el primero es un Fashion good (90%) (es un vestido).
Técnicamente , eso es todo lo que necesitas para que funcione la detección de objetos de ML Kit. ¡Ya lo tienes todo en este momento! Felicitaciones.
Sí, en el lado de la IU, aún estás en la etapa en la que comenzaste, pero podrías 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. Procesa los resultados de la detección de forma posterior
En los pasos anteriores, imprimiste el resultado detectado en logcat: simple y rápido.
En esta sección, usarás el resultado en la imagen:
- dibuja el cuadro de límite en la imagen
- dibuja el nombre de la categoría y la confianza dentro del cuadro de límite
Comprende las utilidades de visualización
Hay un código estándar dentro del codelab para ayudarte a visualizar el resultado de la detección. Aprovecha estas utilidades para simplificar nuestro código de visualización:
class ImageClickableView: 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)): Es una devolución de llamada para recibir la imagen recortada que contiene solo el objeto en el que presionó el usuario. Enviarás esta imagen recortada al backend de búsqueda de imágenes en un codelab posterior para obtener un resultado visualmente similar. En este codelab, aún no usarás este método.
Muestra el resultado de la detección de ML Kit
Usa las utilidades de visualización para mostrar el resultado de la detección de objetos de ML Kit sobre la imagen de entrada.
Ve a donde llamas a debugPrint() y agrega el siguiente fragmento de código debajo de él:
runOnUiThread {
viewBinding.ivPreview.drawDetectionResults(it)
}
Ejecución
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, 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 repetir un par de veces y experimentar el último ML Kit ODT.
7. ¡Felicitaciones!
Usaste ML Kit para agregar capacidades de detección de objetos a tu app:
- 3 pasos con 3 APIs
- Crea una imagen de entrada.
- Crea un detector.
- Envía la imagen al detector.
Eso es todo lo que necesitas para ponerlo en funcionamiento.
Temas abordados
- Cómo agregar ML Kit Object Detection and Tracking a tu app para Android
- Cómo usar la detección y el seguimiento de objetos integrados en el dispositivo en ML Kit para detectar objetos en imágenes
Próximos pasos
- Prueba este codelab para 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 precisión y el rendimiento de la detección y la clasificación.
- Consulta la ruta de aprendizaje Aprovecha al máximo la detección de objetos para aprender a entrenar un modelo personalizado.
- Lee las recomendaciones de Material Design para la detección de objetos en cámaras en vivo e imágenes estáticas.
- Aplica ML Kit ODT en tu propia app para Android.