1. Antes de comenzar
¿Viste la demostración de Google Lens, en la que puedes apuntar la cámara de tu teléfono hacia un objeto y buscar dónde puedes comprarlo en línea? Si quieres aprender a agregar la misma función a tu app, entonces este codelab es para ti. Forma parte de una ruta de aprendizaje en la que se enseña a compilar una función de búsqueda de imágenes del producto 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 del producto: cómo detectar objetos en imágenes y permitir que el usuario elija los objetos que desea buscar. Deberás usar la detección y el seguimiento de objetos del ML Kit para crear 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 del ML Kit 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 y versiones posteriores)
- Android Studio Emulator 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 el ML Kit. Otros conceptos y bloques de código no se estudian 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. Se 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 en el que se basa este codelab- final: Código completo para la app de ejemplo finalizada
3. Agregar la API de detección y seguimiento de objetos del ML Kit al proyecto
Importa la app a Android Studio
Primero, importa 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 para la detección y el seguimiento de objetos del Kit de AA
Las dependencias del ML Kit te permiten integrar el SDK de ODT del ML Kit 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 momento.
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 el repositorio completo).
4. Ejecuta la app de partida
Ahora que importaste el proyecto a Android Studio y agregaste las dependencias para la detección y el seguimiento de objetos del ML Kit, 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.
Ejecuta y explora la app
La app debería iniciarse en tu dispositivo Android. Tiene código estándar que te permite 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 de
- Inicia la app de cámara integrada en tu dispositivo o emulador
- toma una foto con la aplicación de cámara
- recibir la imagen capturada en la app de inicio
- muestra la imagen
Prueba la función "Tomar foto" . Sigue las indicaciones para tomar una foto, aceptarla y observar que se muestra dentro de la app de inicio.
En segundo lugar, existen 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 ejecutas un emulador de Android.
- Selecciona una de las 3 imágenes preestablecidas.
- Observa que la imagen aparece en la vista más grande.
5. Agrega la detección de objetos en el dispositivo
En este paso, agregarás la funcionalidad a la app de partida para detectar objetos en imágenes. Como se vio 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 desde las imágenes 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 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 en el dispositivo en una imagen
Solo hay 3 pasos sencillos con 3 APIs para configurar la ODT del ML Kit
- preparar 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. Continúa con los siguientes pasos para integrar la ODT del ML Kit. 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 InputImage a partir de un Bitmap. Luego, puedes ingresar un InputImage en las APIs del 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 de detector
El Kit de AA sigue el patrón de diseño del compilador. Debes pasar la configuración al compilador y, luego, adquirir un detector. Puedes configurar 3 opciones (la que está en negrita se usa en el codelab):
- modo detector (imagen única o transmisión)
- modo de detección (detección de un solo objeto o varios objetos)
- modo de clasificación (activado o desactivado)
Este codelab es para una sola imagen, la detección de varios objetos y de clasificación, haremos 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 (mediante
process()) - detector trabaja bastante duro
- el detector te informa el resultado con 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())
}
Cuando finalice, el detector te notificará con
- Cantidad total de objetos detectados
- Cada objeto detectado se describe con
trackingId: Es un número entero que usas para realizar un seguimiento entre fotogramas (NO se usa en este codelab).boundingBox: Es el cuadro de límite del objeto.labels: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, incluido "Artículos de moda", "Comida", "Artículos para el hogar", "Lugar", "Planta")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 imprime los resultados detectados en Logcat con debugPrint(). Agrégala 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}")
}
}
}
Ya está todo listo para que aceptes 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 toma una foto. Luego, observa 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:
- las categorías son Moda y artículos del hogar y Artículos para el hogar.
- no se devuelve ninguna categoría para la segunda porque es una clase desconocida.
- no
trackingId(porque este es el modo de detección de una sola imagen) - posición dentro del rectángulo
boundingBox(p.ej., (481, 2021) – (2426, 3376)) - está bastante seguro de que el primero es un artículo de moda de moda (90%) (es un vestido).
Técnicamente, eso es todo lo que necesitas para hacer que la detección de objetos del ML Kit funcione. ¡Ya puedes lograrlo! Felicitaciones.
Sí, en el lado de la IU, todavía estás en la etapa cuando comenzaste, pero puedes usar los resultados detectados en la IU, como dibujar el cuadro delimitador para crear una mejor experiencia. El siguiente paso es visualizar los resultados detectados.
6. Procesamiento posterior de los resultados de la detección
En los 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 delimitador en la imagen
- dibuja el nombre de la categoría y la confianza dentro del cuadro delimitador
Comprende las utilidades de visualización
El codelab incluye código estándar 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 la 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 la detección del ML Kit
Usa las utilidades de visualización para mostrar el resultado de la detección de objetos del ML Kit sobre la imagen de entrada.
Ve a donde llamas a debugPrint() y agrega el siguiente fragmento de código debajo:
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 aplicación, presiona el Botón con el ícono de la cámara, apunta la cámara hacia un objeto, toma una foto y acepta la foto (en la app de Cámara) o presiona fácilmente cualquier imagen preestablecida. 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 experimenta la ODT más reciente del ML Kit.
7. ¡Felicitaciones!
Usaste el Kit de AA para agregar capacidades de detección de objetos a tu app:
- 3 pasos con 3 APIs
- Crear imagen de entrada
- Crear detector
- Enviar imagen al detector
Eso es todo lo que necesitas para empezar a usarlo.
Temas abordados
- Cómo agregar la detección y el seguimiento de objetos del ML Kit a tu app para Android
- Cómo usar la detección y el seguimiento de objetos integrados en el dispositivo en el ML Kit para detectar objetos en imágenes
Próximos pasos
- Prueba este codelab para enviar el objeto detectado a un backend de la búsqueda de productos y mostrar los resultados de la búsqueda
- Explora más con la ODT del ML Kit, que incluye más imágenes y video en vivo para experimentar la detección y la exactitud y el rendimiento de la clasificación
- Consulta la ruta de aprendizaje Ve más allá con la detección de objetos para aprender a entrenar un modelo personalizado.
- Lee acerca de las recomendaciones de Material Design para la detección de objetos con cámaras en vivo y imágenes estáticas.
- Aplica la ODT del Kit de AA en tu propia app para Android