Reconoce texto y rasgos faciales con ML Kit: Android

1. Introducción

El Kit de AA es un SDK para dispositivos móviles que lleva la experiencia de aprendizaje automático de Google a las apps para iOS y Android en un paquete potente y fácil de usar. Independientemente de si eres nuevo o tienes experiencia en el aprendizaje automático, puedes implementar 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 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, se te guiará para crear tu propia app para Android que pueda 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:

  • Usar la API de ML Kit Text Recognition para detectar texto en imágenes
  • Usar la API de ML Kit Face Contour 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 (v3.0+)
  • Android Studio Emulator 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. Se 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 compilarás en este codelab
  • android_studio_folder.pngfinal: Código completo para la aplicación de muestra finalizada

3. Verifica las dependencias de ML Kit

Verifica las dependencias de ML Kit

Las siguientes líneas ya deberían agregarse 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 de 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 tu 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 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 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 de 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);

           }
       }
   }
}

Ejecuta 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 en la siguiente imagen, que muestra 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 reconocimiento de texto en el dispositivo a tu app con ML Kit. El reconocimiento de texto en el dispositivo es excelente para muchos casos de uso, ya que funciona incluso cuando tu app no tiene conectividad a Internet y es lo suficientemente rápido para usar en imágenes fijas y fotogramas de video en vivo.

6. Agrega detección de contorno facial 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 de contorno facial

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);
   }
}

Ejecuta 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 en la siguiente imagen, que muestra los resultados de la detección de contorno facial y los contornos del rostro como puntos superpuestos sobre la imagen original.

f9ff2fcbf63f0f3b.png

¡Felicitaciones! Acabas de agregar detección de contorno facial en el dispositivo a tu app con ML Kit. La detección de contorno facial en el dispositivo es excelente para muchos casos de uso, ya que funciona incluso cuando tu app no tiene conectividad a Internet y es lo suficientemente rápido para usar en imágenes fijas y 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 en 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