Integra un modelo personalizado en tu app

1. Antes de comenzar

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

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

Puedes obtener el código fuente completo para este codelab si clonas este repositorio. Verás los subdirectorios para iOS y Android. El código del codelab anterior está disponible como ImageClassifierStep1 si deseas continuar. El código terminado para este codelab está disponible como ImageClassifierStep2.

Avanza al paso 6 para iOS.

Requisitos previos

• Deberías haber completado los dos primeros codelabs de esta ruta de aprendizaje

Qué compilarás y aprenderás

• Integrar 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 sección Android del lab
• Xcode, disponible en la App Store de Apple, para la parte del lab sobre iOS

2. Obtén la app de partida

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

Ábrelo en Android Studio, realiza las actualizaciones que necesites y, cuando esté lista, ejecútala para asegurarte de que funcione. Debería ver algo como esto:

Es una app bastante primitiva, pero muestra algunas funcionalidades muy potentes 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 usar tu modelo personalizado del codelab Crea un modelo personalizado para tu clasificador de imágenes.

3. Actualiza build.gradle para usar modelos de ML Kit personalizados

1. 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 la opción Android esté seleccionada en la parte superior. Verás una carpeta para Gradle Scripts en la parte inferior.
2. Abre la que corresponde al Módulo, con el nombre de tu app seguido de ".app". como se muestra aquí – (Módulo: ImageClassifierStep1.app):

3. En la parte inferior del archivo, busca la configuración de dependencias. Allí, deberías ver la siguiente línea:

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

El número de versión puede ser diferente. Encuentra siempre el número de versión más reciente en el sitio de ML Kit en: https://developers.google.com/ml-kit/vision/image-labeling/android.

4. Reemplázalo por la referencia de la biblioteca de etiquetado de imágenes personalizada. El número de versión 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'

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

aaptOptions{
    noCompress "tflite"
}

Asegúrate de que no esté dentro de ninguna otra configuración. Debe anidarse directamente en 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 como se indica a continuación:

1. Haz clic con el botón derecho en la carpeta Assets en Android Studio. En el menú que se abre, selecciona Mostrar en Finder. ("Mostrar en Explorer" en Windows y "Mostrar en archivos" en Linux).

2. 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 está todo listo para actualizar el código.

5. Actualiza el código para el modelo personalizado

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

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

Esto usará un LocalModel para compilar a partir del recurso model.tflite. Si Android Studio activa "LocalModel" para generar un reclamo 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 el 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.

2. 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 un estándar para la calidad de las predicciones que se mostrarán. Si observas el ejemplo de la parte superior de este codelab, en el que la imagen era una margarita, tenías 4 predicciones, cada una con un valor a su lado, como “Cielo”. es 0 .7632.

Podrías filtrar de manera eficaz los resultados de menor calidad usando un umbral de confianza alto. Por ejemplo, establecer este valor en 0.9 no mostraría ninguna etiqueta con una prioridad menor que esa. setMaxResultCount() es útil en modelos con muchas clases, pero como este modelo solo tiene 5, lo dejas en 5.

Ahora que tienes opciones para el etiquetador, puedes cambiar la creación de instancias del etiquetador de la siguiente manera:

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 flor y vuelves a ejecutar con eso:

La identifica como una rosa.

Es posible que te preguntes por qué dice rosas en lugar de solo "rose". Esto se debe a que, en el conjunto de datos, las etiquetas se asignan a los nombres de las carpetas y, lamentablemente, esos nombres de carpetas son un poco incoherentes y, a veces, se usan en singular (como “margarita”) y en plural (como “rosas”). 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 para iOS

1. Primero, necesitarás la app del primer codelab. Si realizaste el lab, se llamará ImageClassifierStep1. Si no quieres realizar el lab, puedes clonar la versión finalizada desde el repositorio. Ten en cuenta que los Pods y .xcworkspace no están presentes en el repositorio, así que, antes de continuar con el siguiente paso, asegúrate de ejecutar el comando "pod install". del mismo directorio que el .xcproject.
2. Abre ImageClassifierStep1.xcworkspace en Xcode. Ten en cuenta que debes usar el .xcworkspace y no el .xcproject porque empaquetaste el ML Kit con Pods, y el espacio de trabajo los cargará.

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

Ejecútalo. 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.

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

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

La primera app usó un archivo de Pod para obtener las bibliotecas y el modelo base de Image Labeler del ML Kit. Deberás actualizar esa función para usar las bibliotecas de etiquetado de imágenes personalizadas.

1. 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

2. Cambia la declaración del Pod de ImageLabeling a ImageLabelingCustom de la siguiente manera:

platform :ios, '10.0'

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

3. Cuando termines, usa la terminal para navegar al directorio que contiene el podfile (además del .xcworkspace) y ejecuta pod install.

Después de unos momentos, se quitarán las bibliotecas MLKitImageLabeling y se agregarán las personalizadas. Ahora puedes abrir tu archivo .xcworkspace para editar el 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 tienes esto a mano, regresa y ejecuta ese codelab, o revisa el código de Colab aquí. Si no tienes acceso a Google Colab, podrás acceder al notebook en este vínculo

1. 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.
2. Aparecerá un diálogo con opciones para agregar el archivo. Asegúrate de que esté seleccionada la opción Agregar a destinos. De lo contrario, el modelo no se empaquetará con la app cuando se implemente en un dispositivo.

Ten en cuenta que la pestaña “Agregar a objetivos” tendrá ImageClassifierStep1 si comenzaste a partir de eso y continúas con este lab paso a paso, o ImageClassifierStep2 (como se muestra) si te adelantaste al código finalizado.

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

9. Actualiza tu código para el modelo personalizado

1. Abre el archivo ViewController.swift. Es posible que vea un error en la columna “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 el archivo del Pod. Puedes borrar esta línea y actualizarla con lo siguiente:

import MLKitVision
import MLKit
import MLKitImageLabelingCommon
import MLKitImageLabelingCustom

Puede ser fácil leerlos más rápido y pensar que repiten el mismo código. Pero es algo común y "Personalizada" al final.

2. 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!)

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

let options = ImageLabelerOptions()

Reemplázalo por este código para usar un CustomImageLabelerOptions 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 mirando una margarita con alta probabilidad.

Supongamos que agregaste una segunda imagen de flor y vuelves a ejecutar con eso:

La app detectó correctamente que esta imagen coincidió con la etiqueta "rosas".

10. ¡Felicitaciones!

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 el modelo personalizado.

La app resultante es, por supuesto, muy limitada porque dependía de recursos de imagen empaquetados. Sin embargo, la parte del AA funciona bien. Por ejemplo, puedes usar la Cámara AndroidX 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 y, si dispones de tus propios datos para algo que no sea las flores, ya tienes las bases de lo que necesitas para crear una aplicación que los reconozca con visión artificial. Estos son solo los primeros pasos hacia un mundo mucho más amplio, y esperamos que hayas disfrutado trabajar en ellos.