Reconoce texto y rasgos faciales con ML Kit: Android

1. Introducción

ML Kit es un SDK para dispositivos móviles que lleva la experiencia de Google en el aprendizaje automático a las apps para iOS y Android a través de un paquete eficaz, pero fácil de usar. Independientemente de si eres nuevo o tienes experiencia en el aprendizaje automático, puedes implementar fácilmente la funcionalidad que necesites con solo unas pocas líneas de código. No es necesario que tengas un profundo conocimiento sobre redes neuronales o en optimización de modelos para comenzar.

Si a medida que avanzas con este codelab encuentras algún problema (errores de código, errores gramaticales, texto poco claro, etc.), infórmalo mediante el vínculo Informa un error que se encuentra en la esquina inferior izquierda del codelab.

¿Cómo funciona?

ML Kit facilita la aplicación de técnicas de AA en tus apps incorporando tecnologías de AA de Google, como Mobile Vision y TensorFlow Lite, en un solo SDK. Ya sea que necesites las capacidades en tiempo real de los modelos integrados en el dispositivo de Mobile Vision o la flexibilidad de los modelos personalizados de TensorFlow Lite, ML Kit te ofrece todo lo que necesitas.

En este codelab, aprenderás a crear tu propia app para Android que puede detectar automáticamente texto y rasgos faciales en una imagen.

Qué compilarás

En este codelab, compilarás una app para Android con ML Kit. Tu app hará lo siguiente:

  • Usa la API de ML Kit Text Recognition para detectar texto en imágenes
  • Usa la API de Face Contour de ML Kit para identificar rasgos faciales en imágenes

Qué aprenderás

  • Cómo usar el SDK de ML Kit para agregar fácilmente capacidades avanzadas de aprendizaje automático, como el reconocimiento de texto y la detección de rasgos faciales

Requisitos

  • Una versión reciente de Android Studio (3.0 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 Java
  • Conocimientos básicos sobre los modelos de aprendizaje automático

Este codelab se enfoca en ML Kit. Los conceptos y los bloques de código no relacionados con esos temas se abordan superficialmente y se proporcionan para que simplemente los copies y pegues.

2. Cómo prepararte

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 (mlkit-android-master) con todos los recursos que necesitarás. Para este codelab, solo necesitarás los recursos del subdirectorio vision.

El subdirectorio vision del repositorio mlkit-android-master contiene dos directorios:

  • android_studio_folder.pngstarter: Código inicial que usarás como base para compilar en este codelab
  • android_studio_folder.pngfinal: Código completado para la app de ejemplo finalizada

3. Verifica las dependencias de ML Kit

Verifica las dependencias de ML Kit

Las siguientes líneas ya deberían estar agregadas al final del archivo build.gradle en el directorio app de tu proyecto (verifica para confirmar):

build.gradle

dependencies {
  // Face features
  implementation 'com.google.mlkit:face-detection:16.0.0'

  // Text features
  implementation 'com.google.android.gms:play-services-mlkit-text-recognition:16.0.0'
}

Estas son las dependencias específicas de ML Kit que necesitas para implementar las funciones en este codelab.

4. Ejecuta la app de partida

Ahora que importaste el proyecto a Android Studio y verificaste las dependencias de ML Kit, tienes todo listo para ejecutar la app por primera vez. Inicia el emulador de Android Studio y haz clic en Run ( execute.png) en la barra de herramientas de Android Studio.

La app debería iniciarse en el emulador. En este punto, deberías ver un diseño básico que tiene un campo desplegable que te permite seleccionar entre 3 imágenes. En la siguiente sección, agregarás reconocimiento de texto a tu app para identificar texto en imágenes.

5. Agrega reconocimiento de texto integrado en el dispositivo

En este paso, agregaremos la funcionalidad a tu app para reconocer texto en imágenes.

Configura y ejecuta el reconocimiento de texto integrado en el dispositivo en una imagen

Agrega lo siguiente al método runTextRecognition de la clase MainActivity:

MainActivity.java

private void runTextRecognition() {
   InputImage image = InputImage.fromBitmap(mSelectedImage, 0);
   TextRecognizer recognizer = TextRecognition.getClient();
   mTextButton.setEnabled(false);
   recognizer.process(image)
           .addOnSuccessListener(
                   new OnSuccessListener<Text>() {
                       @Override
                       public void onSuccess(Text texts) {
                           mTextButton.setEnabled(true);
                           processTextRecognitionResult(texts);
                       }
                   })
           .addOnFailureListener(
                   new OnFailureListener() {
                       @Override
                       public void onFailure(@NonNull Exception e) {
                           // Task failed with an exception
                           mTextButton.setEnabled(true);
                           e.printStackTrace();
                       }
                   });
}

El código anterior configura el detector de reconocimiento de texto y llama a la función processTextRecognitionResult con la respuesta.

Procesa la respuesta del reconocimiento de texto

Agrega el siguiente código a processTextRecognitionResult en la clase MainActivity para analizar los resultados y mostrarlos en tu app.

MainActivity.java

private void processTextRecognitionResult(Text texts) {
   List<Text.TextBlock> blocks = texts.getTextBlocks();
   if (blocks.size() == 0) {
       showToast("No text found");
       return;
   }
   mGraphicOverlay.clear();
   for (int i = 0; i < blocks.size(); i++) {
       List<Text.Line> lines = blocks.get(i).getLines();
       for (int j = 0; j < lines.size(); j++) {
           List<Text.Element> elements = lines.get(j).getElements();
           for (int k = 0; k < elements.size(); k++) {
               Graphic textGraphic = new TextGraphic(mGraphicOverlay, elements.get(k));
               mGraphicOverlay.add(textGraphic);

           }
       }
   }
}

Cómo ejecutar la app en el emulador

Ahora haz clic en Run ( execute.png) en la barra de herramientas de Android Studio. Una vez que se cargue la app, asegúrate de que Test Image 1(Text) esté seleccionado en el campo desplegable y haz clic en el botón FIND TEXT.

Ahora, tu app debería verse como la imagen que se muestra a continuación, con los resultados del reconocimiento de texto y los cuadros delimitadores superpuestos sobre la imagen original.

10b12d0e8822eaf5.png

Foto: Kai Schreiber / Wikimedia Commons / CC BY-SA 2.0

¡Felicitaciones! Acabas de agregar el reconocimiento de texto en el dispositivo a tu app con ML Kit. El reconocimiento de texto integrado en el dispositivo es ideal para muchos casos de uso, ya que funciona incluso cuando tu app no tiene conectividad a Internet y es lo suficientemente rápido como para usarlo en imágenes fijas y en fotogramas de video en vivo.

6. Se agregó la detección de contorno de rostro integrada en el dispositivo

En este paso, agregaremos funcionalidad a tu app para reconocer los contornos de los rostros en las imágenes.

Configura y ejecuta la detección de contorno facial en el dispositivo en una imagen

Agrega lo siguiente al método runFaceContourDetection de la clase MainActivity:

MainActivity.java

private void runFaceContourDetection() {
   InputImage image = InputImage.fromBitmap(mSelectedImage, 0);
   FaceDetectorOptions options =
           new FaceDetectorOptions.Builder()
                   .setPerformanceMode(FaceDetectorOptions.PERFORMANCE_MODE_FAST)
                   .setContourMode(FaceDetectorOptions.CONTOUR_MODE_ALL)
                   .build();

   mFaceButton.setEnabled(false);
   FaceDetector detector = FaceDetection.getClient(options);
   detector.process(image)
           .addOnSuccessListener(
                   new OnSuccessListener<List<Face>>() {
                       @Override
                       public void onSuccess(List<Face> faces) {
                           mFaceButton.setEnabled(true);
                           processFaceContourDetectionResult(faces);
                       }
                   })
           .addOnFailureListener(
                   new OnFailureListener() {
                       @Override
                       public void onFailure(@NonNull Exception e) {
                           // Task failed with an exception
                           mFaceButton.setEnabled(true);
                           e.printStackTrace();
                       }
                   });

}

El código anterior configura el detector de contorno facial y llama a la función processFaceContourDetectionResult con la respuesta.

Procesa la respuesta de detección del contorno del rostro

Agrega el siguiente código a processFaceContourDetectionResult en la clase MainActivity para analizar los resultados y mostrarlos en tu app.

MainActivity.java

private void processFaceContourDetectionResult(List<Face> faces) {
   // Task completed successfully
   if (faces.size() == 0) {
       showToast("No face found");
       return;
   }
   mGraphicOverlay.clear();
   for (int i = 0; i < faces.size(); ++i) {
       Face face = faces.get(i);
       FaceContourGraphic faceGraphic = new FaceContourGraphic(mGraphicOverlay);
       mGraphicOverlay.add(faceGraphic);
       faceGraphic.updateFace(face);
   }
}

Cómo ejecutar la app en el emulador

Ahora haz clic en Run ( execute.png) en la barra de herramientas de Android Studio. Una vez que se cargue la app, asegúrate de que Test Image 2 (Face) esté seleccionado en el campo desplegable y haz clic en el botón FIND FACE CONTOUR.

Ahora, tu app debería verse como la imagen que se muestra a continuación, con los resultados de la detección del contorno facial y los contornos de la cara como puntos superpuestos sobre la imagen original.

f9ff2fcbf63f0f3b.png

¡Felicitaciones! Acabas de agregar la detección de contornos faciales integrada en el dispositivo a tu app con ML Kit. La detección de contorno facial en el dispositivo es ideal para muchos casos de uso, ya que funciona incluso cuando tu app no tiene conectividad a Internet y es lo suficientemente rápida para usarla en imágenes fijas y en fotogramas de video en vivo.

7. ¡Felicitaciones!

Usaste correctamente ML Kit para agregar fácilmente capacidades avanzadas de aprendizaje automático a tu app.

Temas abordados

  • Cómo agregar ML Kit a tu app para Android
  • Cómo usar el reconocimiento de texto en el dispositivo de ML Kit para encontrar texto en imágenes
  • Cómo usar el contorno facial en el dispositivo en ML Kit para identificar rasgos faciales en imágenes

Próximos pasos

  • Usa ML Kit en tu propia app para Android.

Más información