Integra un modelo personalizado en tu app

1. Antes de comenzar

En el primer codelab de esta serie, creaste una app muy simple que usaba el etiquetado de imágenes para analizar el contenido de una imagen. Le pasaste una imagen de una margarita y te devolvió que veía cosas como un pétalo o el cielo. Luego, en el segundo codelab, cambiaste a Python para entrenar un modelo nuevo y personalizado que reconoce cinco tipos diferentes de flores.

En este codelab, actualizarás la app del primer lab con el modelo del segundo.

Para obtener el código fuente completo de este codelab, clona este repositorio. Verás subdirectorios para Android y iOS. El código del codelab anterior está disponible como ImageClassifierStep1 si quieres seguirlo. El código terminado de este codelab está disponible como ImageClassifierStep2.

Requisitos previos

Debes haber completado los dos primeros codelabs de esta ruta de aprendizaje.

Qué compilarás y aprenderás

Integra un modelo personalizado, entrenado en el lab anterior, en una app para Android o iOS.

Requisitos

Android Studio, disponible en developer.android.com/studio para la parte de Android del lab
Xcode, disponible en Apple App Store, para la parte de iOS del lab

2. Obtén la app inicial

Primero, necesitarás la app del codelab Compila tu primera app de visión artificial en Android o iOS. Si ya realizaste el lab, se llamará ImageClassifierStep1. Si no quieres realizar el lab, puedes clonar la versión terminada del repositorio

Ábrela en Android Studio, realiza las actualizaciones que necesites y, cuando esté lista, ejecuta la app para asegurarte de que funcione. Deberías ver algo como esto:

Es una app bastante primitiva, pero muestra una funcionalidad muy potente con solo un poco de código. Sin embargo, si quieres que esta flor se reconozca como una margarita y no solo como una flor, deberás actualizar la app para que use tu modelo personalizado del codelab Crea un modelo personalizado para tu clasificador de imágenes.

3. Actualiza build.gradle para usar modelos personalizados del Kit de AA

Con Android Studio, busca el archivo build.gradle a nivel de la app. La forma más fácil de hacerlo es en el explorador de proyectos. Asegúrate de que Android esté seleccionado en la parte superior y verás una carpeta para Gradle Scripts en la parte inferior.
Abre el que es para el módulo, con el nombre de tu app seguido de “.app”, como se muestra aquí (Module: ImageClassifierStep1.app):

En la parte inferior del archivo, busca el parámetro de configuración dependencies. Allí deberías ver esta línea:

implementation 'com.google.mlkit:image-labeling:17.0.1'

Es posible que el número de versión sea diferente. Siempre busca el número de versión más reciente en el sitio del Kit de AA en https://developers.google.com/ml-kit/vision/image-labeling/android.

Reemplaza esto por la referencia de la biblioteca de etiquetado de imágenes personalizada. El número de versión de este se puede encontrar en https://developers.google.com/ml-kit/vision/image-labeling/custom-models/android.

implementation 'com.google.mlkit:image-labeling-custom:16.3.1'

Además, agregarás un modelo .tflite que creaste en el lab anterior. No quieres que este modelo se comprima cuando Android Studio compile tu app, así que asegúrate de usar este parámetro de configuración en la sección Android del mismo archivo build.gradle:

aaptOptions{
    noCompress "tflite"
}

Asegúrate de que no esté dentro de ningún otro parámetro de configuración. Debe estar anidado directamente debajo de la etiqueta android. Por ejemplo:

4. Agrega el modelo de TFLite

En el codelab anterior, creaste tu modelo personalizado y lo descargaste como model.tflite.

En tu proyecto, busca la carpeta assets que actualmente contiene flower1.jpg. Copia el modelo en esa carpeta de la siguiente manera:

Haz clic con el botón derecho en la carpeta Assets en Android Studio. En el menú que se abre, selecciona Reveal in Finder. (“Mostrar en el Explorador” en Windows y “Mostrar en archivos” en Linux).

Se te dirigirá al directorio en el sistema de archivos. Copia el archivo model.tflite en ese directorio, junto con flower1.jpg.

Android Studio se actualizará para mostrar ambos archivos en tu carpeta de recursos:

Ya puedes actualizar tu código.

5. Actualiza tu código para el modelo personalizado

El primer paso será agregar código para cargar el modelo personalizado.

En tu archivo MainActivity, agrega lo siguiente a tu onCreate, inmediatamente debajo de la línea que dice setContentView(R.layout.activity_main).

Esto usará un LocalModel para compilar desde el recurso model.tflite. Si Android Studio se queja y pone “LocalModel” en rojo, presiona ALT + Intro para importar la biblioteca. Debería agregar una importación a com.google.mlkit.common.model.LocalModel por ti.

val localModel = LocalModel.Builder()
        .setAssetFilePath("model.tflite")
        .build()

Anteriormente, en tu controlador btn.setOnClickListener, usabas el modelo predeterminado. Se configuró con este código:

val labeler = ImageLabeling.getClient(ImageLabelerOptions.DEFAULT_OPTIONS)

Lo reemplazarás para usar el modelo personalizado.

Configura un objeto de opciones personalizadas:

val options = CustomImageLabelerOptions.Builder(localModel)
        .setConfidenceThreshold(0.7f)
        .setMaxResultCount(5)
        .build()

Esto reemplaza las opciones predeterminadas por un conjunto personalizado. El umbral de confianza establece una barra para la calidad de las predicciones que se mostrarán. Si vuelves a ver la muestra en la parte superior de este codelab, en la que la imagen era una margarita, tenías 4 predicciones, cada una con un valor junto a ellas, como “Sky” que es 0 .7632.

Podrías filtrar de manera eficaz los resultados de menor calidad con un umbral de confianza alto. Si configuras esto en 0.9, por ejemplo, no se mostrará ninguna etiqueta con una prioridad inferior a esa. El setMaxResultCount() es útil en modelos con muchas clases, pero como este modelo solo tiene 5, lo dejarás en 5.

Ahora que tienes opciones para el etiquetador, puedes cambiar la instancia del etiquetador a lo siguiente:

val labeler = ImageLabeling.getClient(options)

El resto de tu código se ejecutará sin modificaciones. ¡Pruébalo!

Aquí puedes ver que esta flor ahora se identificó como una margarita con una probabilidad de 0.959.

Supongamos que agregaste una segunda imagen de flores y volviste a ejecutarla:

La identifica como una rosa.

Quizás te preguntes por qué dice roses en lugar de solo “rose”. Eso se debe a que, en el conjunto de datos, las etiquetas se dan por los nombres de las carpetas y, lamentablemente, esos nombres de carpetas son un poco incoherentes, ya que a veces usan singular (como “daisy”) y a veces usan plural (como “roses”). No confundas esto con el modelo que intenta contar los elementos de la imagen. Es mucho más primitivo que eso y solo puede identificar los tipos de flores.

6. Obtén la app de inicio de iOS

Primero, necesitarás la app del primer codelab. Si ya realizaste el lab, se llamará ImageClassifierStep1. Si no quieres realizar el lab, puedes clonar la versión terminada del repositorio. Ten en cuenta que los pods y .xcworkspace no están presentes en el repositorio, por lo que, antes de continuar con el siguiente paso, asegúrate de ejecutar “pod install” desde el mismo directorio que .xcproject.
Abre ImageClassifierStep1.xcworkspace en Xcode. Ten en cuenta que debes usar .xcworkspace y no .xcproject porque agrupaste el Kit de AA con pods, y el espacio de trabajo los cargará.

Durante el resto de este lab, ejecutaré la app en el simulador de iPhone, que debería admitir los objetivos de compilación del codelab. Si quieres usar tu propio dispositivo, es posible que debas cambiar el objetivo de compilación en la configuración de tu proyecto para que coincida con tu versión de iOS.

Ejecútalo y verás algo como esto:

Observa las clasificaciones muy genéricas: pétalo, flor, cielo. El modelo que creaste en el codelab anterior se entrenó para detectar 5 variedades de flores, incluida esta: una margarita.

Durante el resto de este codelab, verás lo que se necesita para actualizar tu app con el modelo personalizado.

7. Usa pods de etiquetador de imágenes personalizado del Kit de AA

La primera app usó un archivo de pod para obtener las bibliotecas y el modelo base del etiquetador de imágenes del Kit de AA. Deberás actualizarlo para usar las bibliotecas de etiquetado de imágenes personalizadas.

Busca el archivo llamado podfile en el directorio de tu proyecto. Ábrelo y verás algo como esto:

platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabeling'
end

Cambia la declaración de pod de ImageLabeling a ImageLabelingCustom, de la siguiente manera:

platform :ios, '10.0'

target 'ImageClassifierStep1' do
        pod 'GoogleMLKit/ImageLabelingCustom'
end

Una vez que termines, usa la terminal para navegar al directorio que contiene el archivo de pod (así como .xcworkspace) y ejecuta pod install.

Después de unos segundos, se quitarán las bibliotecas de MLKitImageLabeling y se agregarán las personalizadas. Ahora puedes abrir tu .xcworkspace para editar tu código.

8. Agrega el modelo de TFLite a Xcode

En el codelab anterior, creaste un modelo personalizado y lo descargaste como model.tflite. Si no lo tienes a mano, vuelve a ejecutar ese codelab o revisa el código de Colab aquí. Si no tienes acceso a Google Colab, el notebook está disponible en este vínculo.

Con el espacio de trabajo abierto en Xcode, arrastra model.tflite a tu proyecto. Debe estar en la misma carpeta que el resto de tus archivos, como ViewController.swift o Main.storyboard.
Aparecerá un diálogo con opciones para agregar el archivo. Asegúrate de que esté seleccionado Add to Targets o el modelo no se agrupará con la app cuando se implemente en un dispositivo.

Ten en cuenta que la entrada “Add to Targets” tendrá ImageClassifierStep1 si comenzaste desde allí y continúas con este paso del lab paso a paso o ImageClassifierStep2 (como se muestra) si avanzaste al código terminado.

Esto garantizará que puedas cargar el modelo. En el siguiente paso, verás cómo hacerlo.

9. Actualiza tu código para el modelo personalizado

Abre el archivo ViewController.swift. Es posible que veas un error en “import MLKitImageLabeling” en la parte superior del archivo. Esto se debe a que quitaste las bibliotecas de etiquetado de imágenes genéricas cuando actualizaste tu archivo de pod. No dudes en borrar esta línea y actualizarla con lo siguiente:

import MLKitVision
import MLKit
import MLKitImageLabelingCommon
import MLKitImageLabelingCustom

Puede ser fácil leerlos rápidamente y pensar que repiten el mismo código. Pero es “Common” y “Custom” al final.

A continuación, cargarás el modelo personalizado que agregaste en el paso anterior. Busca la función getLabels(). Debajo de la línea que dice visionImage.orientation = image.imageOrientation, agrega estas líneas:

// Add this code to use a custom model
let localModelFilePath = Bundle.main.path(forResource: "model", ofType: "tflite")
let localModel = LocalModel(path: localModelFilePath!)

Busca el código para especificar las opciones del ImageLabeler genérico. Es probable que te dé un error, ya que se quitaron esas bibliotecas:

let options = ImageLabelerOptions()

Reemplaza eso con este código para usar un CustomImageLabelerOptions y que especifique el modelo local:

let options = CustomImageLabelerOptions(localModel: localModel)

Y eso es todo. Intenta ejecutar tu app ahora. Cuando intentes clasificar la imagen, debería ser más precisa y decirte que estás viendo una margarita con alta probabilidad.

Supongamos que agregaste una segunda imagen de flores y volviste a ejecutarla:

La app detectó correctamente que esta imagen coincidía con la etiqueta “roses”.

10. ¡Felicitaciones!

Ahora pasaste de compilar una app que usaba un modelo genérico para reconocer el contenido de una imagen a crear tu propio modelo de AA para reconocer elementos específicos, como flores, y, luego, actualizar tu app para usar tu modelo personalizado.

Por supuesto, la app resultante es muy limitada porque se basó en recursos de imágenes agrupados. Sin embargo, la parte de AA funciona bien. Por ejemplo, puedes usar AndroidX Camera para tomar fotogramas de un feed en vivo y clasificarlos para ver qué flores reconoce tu teléfono.

A partir de aquí, las posibilidades son infinitas. Si tienes tus propios datos para algo que no sean flores, tienes los fundamentos de lo que necesitas para compilar una app que los reconozca con visión artificial. Estos son solo los primeros pasos en un mundo mucho más amplio y, con suerte, disfrutaste de trabajar en ellos.