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 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 la detección y el seguimiento de objetos de ML Kit 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 detección y seguimiento de objetos de ML Kit
Requisitos
- Una versión reciente de Android Studio (v4.1.2 o posterior)
- 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. 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. 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 object-detection del repositorio mlkit-android contiene dos directorios:
starter: Código inicial en el que se basa este codelab- final: Es el código completo de la app de ejemplo finalizada.
3. Agrega la API de detección y seguimiento de objetos de ML Kit al proyecto
Importa la app a Android Studio
Para comenzar, importa la app de 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.
Cómo agregar las dependencias de la detección y el seguimiento de objetos de ML Kit
Las dependencias de ML Kit te permiten integrar el SDK de ODT de 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 los archivos 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 para la detección y el seguimiento de objetos del Kit de AA, tienes todo listo para ejecutar la app por primera vez.
Conecta tu dispositivo Android a través de USB al 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 debería iniciarse en tu dispositivo Android. Tiene código de plantilla para que puedas 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 código:
Primero, hay un botón ( 
) en la parte inferior para
- inicia la app de cámara integrada en tu dispositivo o emulador
- tomar una foto en la app de la cámara
- recibe la imagen capturada en la app de partida
- muestra la imagen
Prueba el botón "Take photo". Sigue las indicaciones para tomar una foto, aceptarla y observarla en la app de partida.
En segundo lugar, puedes elegir entre 3 imágenes predeterminadas. Puedes usar estas imágenes más adelante para probar el código de detección de objetos si ejecutas el código en un emulador de Android.
- Selecciona una imagen de las 3 imágenes predeterminadas.
- Verás que la imagen aparece en la vista ampliada.
5. Cómo agregar 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 de plantilla para tomar fotos con la app de cámara del 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 cuando tomas una foto con la app de la cámara, el código de texto sin formato 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 el ODT de ML Kit.
- Prepara una imagen:
InputImage - Crea un objeto detector:
ObjectDetection.getClient(options) - conecta los 2 objetos anteriores:
process(image)
Puedes hacerlo 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 de ML Kit. En el proceso, 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 ingresar un InputImage en 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 debes pasarle la configuración al compilador y, luego, adquirir un detector a partir de él. Hay 3 opciones para configurar (la que está en negrita se usa en el codelab):
- modo de detector (imagen única o transmisión)
- modo de detección (detección de objetos única o múltiple)
- modo de clasificación (activado o desactivado)
Este codelab es para una sola imagen: detección y clasificación de varios 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()) - detector funciona bastante bien en él
- El detector te informa el resultado a través de una devolución de llamada.
El siguiente código hace exactamente eso (lo copia y lo agrega 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 se complete, 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 hacer un seguimiento de los fotogramas cruzados (NO se usa en este codelab).boundingBox: Es el cuadro de límite del objeto.- Lista de etiquetas de
labels: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, incluidas las palabras "Productos de moda", "Comida", "Productos para el hogar", "Lugar" y "Planta")confidence(un número de punto flotante entre 0.0 y 1.0, en el que 1.0 significa 100%)
Es probable que hayas notado 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}")
}
}
}
Ya está 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 toma una foto y, luego, observa la ventana de Logcat( 
) en el 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 los siguientes tipos:
- son Artículo de moda y Artículo para el hogar.
- No se muestra ninguna categoría para el segundo, ya que 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)) - detector tiene bastante confianza en que el primero es un bien 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. Ya lo tienes todo en este momento. Felicitaciones.
Sí, en el lado de la IU, todavía estás en la etapa en la que empezaste, 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. Procesamiento posterior de los resultados de la detección
En pasos anteriores, imprimiste el resultado detectado en logcat: simple y rápido.
En esta sección, usarás el resultado que se muestra 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
Información sobre las utilidades de visualización
Hay un código de plantilla en el codelab para ayudarte 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 en el que el usuario hizo clic. 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.
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 la ubicación a la que 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 app, presiona el botón con el ícono de cámara, apunta la cámara a un objeto, toma una foto, acepta la foto (en la app de Cámara) o presiona 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 el proceso un par de veces y prueba la ODT de ML Kit más reciente.
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
- Cómo crear un detector
- Cómo enviar una imagen al detector
Eso es todo lo que necesitas para comenzar a usarlo.
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 integrados en el dispositivo en ML Kit 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 el ODT de ML Kit con más imágenes y videos 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.
- Obtén información sobre las recomendaciones de Material Design para la detección de objetos live-camera y static-image.
- Aplica el ODT de ML Kit en tu propia app para Android