Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Crea una aplicación Android para reconocer contornos faciales con Firebase ML

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

El Kit Firebase ML, una colección de APIs locales y basadas en la nube para añadir habilidades de aprendizaje automático (machine learning) a las aplicaciones móviles, recientemente ha sido mejorado para ser compatible con la detección de contornos faciales. Gracias a esta poderosa herramienta, ya no tienes que limitarte a las aproximaciones rectangulares al detectar caras. En vez de eso, puedes trabajar con una gran cantidad de coordenadas que describen con precisión las formas de las caras y las referencias faciales detectadas, como los ojos, los labios y las cejas.

Esto te permite crear con facilidad aplicaciones basadas en inteligencia artificial que pueden llevar a cabo complejas tareas relacionadas con la visión por computadora, como intercambiar caras, reconocer emociones o aplicar maquillaje digital.

En este tutorial te mostraré cómo usar la herramienta de detección de contornos de caras del Kit ML para crear una aplicación Android que puede seleccionar caras en fotografías.

Prerrequisitos

Para aprovechar este tutorial al máximo debes tener acceso a lo siguiente:

  • la versión más reciente de Android Studio
  • un dispositivo con Android API nivel 23 o posterior

1. Configurando tu proyecto

Ya que el Kit ML es una parte de la plataforma Firebase, necesitarás un proyecto de Firebase para poder usarlo en tu proyecto de Android Studio. Para crear uno, abre el Asistente de Firebase yendo a Tools > Firebase (Herramientas > Firebase).

A continuación abre la sección Analytics (Analítica) y presiona el botón Connect (Conectar). En el cuadro de diálogo que aparece escribe un nombre para tu nuevo proyecto de Firebase, selecciona el país en el que estés y presiona el botón Connect.

Connect to Firebase dialog

Una vez que hayas logrado una conexión exitosa, presiona el botón Add analytics to your app (Agregar analítica a tu aplicación) para que el asistente pueda hacer todos los cambios de configuración relacionados con Firebase que sean necesarios en tu proyecto de Android Studio. 

En este punto, si abres el archivo build.gradle de tu módulo app, entre otros cambios deberás ver la siguiente dependencia implementation presente en él:

Para poder usar la herramienta de detección de contornos faciales del Kit ML necesitarás otras dos dependencias. una para la versión más reciente de la biblioteca ML Vision y una para el modelo de rostros ML Vision. Esta es la manera en la que puedes añadirlas:

En este tutorial estarás trabajando con imágenes remotas. Para facilitar la descarga y visualización de tales imágenes, agrega una dependencia para la biblioteca Picasso:

La detección de contornos de caras del Kit ML siempre se ejecuta de forma local en el dispositivo de tu usuario. De forma predeterminada, el modelo de aprendizaje automático que lleva a cabo la detección de contornos de caras se descarga automáticamente la primera vez que el usuario abre tu aplicación. Sin embargo, para mejorar la experiencia del usuario te sugiero que comiences la descarga tan pronto como el usuario instale tu aplicación. Para hacer eso, agrega la siguiente etiqueta <meta-data> al archivo AndroidManifest.xml:

2. Creando el diseño

Vas a necesitar tres widgets en el diseño de tu aplicación: un widget editText en el que el usuario pueda escribir el URL de una fotografía en línea, un widget ImageView para mostrar la fotografía, y un widget Button para iniciar el proceso de detección de contornos faciales. Además, necesitarás un widget RelativeLayout para colocar los tres widgets. Así que agrega el siguiente código al archivo de diseño XML de tu activity principal:

3. Descargando y mostrando imágenes

Con la biblioteca Picasso, para descargar y mostrar una imagen remota se requiere llamar solamente a dos métodos. Primero, una llamada al método load() para especificar el URL de la imagen que quieras descargar, y luego una llamada al método into() para especificar el widget ImageView dentro del que quieres mostrar la imagen descargada.

Desde luego debes invocar ambos métodos solo hasta después de que el usuario haya terminado de escribir el URL. Por lo tanto, asegúrate de invocarlos dentro de un objeto OnEditorActionListener vinculado al widget EditText que creaste en el paso anterior. El siguiente código te muestra cómo hacerlo:

Ejecuta la aplicación ahora e intenta escribir un URL de imagen válido para asegurarte de que esté funcionando correctamente.

App displaying a photo

4. Creando un detector de contornos de caras

Vas a ejecutar todas las opciones de detección de contornos de caras dentro de un manejador de eventos on-click vinculado al widget Button de tu diseño. Por lo tanto agrega el siguiente código a tu activity antes de continuar:

Para poder trabajar con datos de caras ahora debes crear un objeto FirebaseVisionFaceDetector. Sin embargo, ya que este no detecta los contornos de las caras de forma predeterminada, también debes crear un objeto FirebaseVisionFaceDetectorOptions que pueda configurarlo para hacer eso.

Para crear un objeto con opciones válidas debes seguir el patrón del constructor. Así que crea una instancia de la clase FirebaseVisionFaceDetectorOptions.Builder, invoca a su método setContourMode() y envíale la constante ALL_CONTOURS para especificar que quieres detectar los contornos de todas las caras presentes en tus imágenes.

Después invoca al método build() del constructor para generar el objeto de opciones.

Ahora puedes enviar el objeto de opciones al método getVisionFaceDetector() de la clase FirebaseVision contenida en el Kit ML para crear tu detector de contornos de caras.

5. Recolectando datos de coordenadas

El detector de contornos de caras no puede usar directamente la fotografía que está siendo mostrada en tu widget ImageView. En vez de eso, este espera que le envíes un objeto FirebaseVisionImage. Para generar un objeto así debes convertir la fotografía a un objeto Bitmap. El siguiente código te muestra cómo hacerlo:

Ahora puedes invocar al método detectInImage() del detector para obtener los contornos de todas las caras presentes en la fotografía. El método se ejecuta de forma asíncrona y devuelve una lista de objetos FirebaseVisionFace si termina con éxito.

Dentro del método de escucha on-success, puedes usar la variable implícita it para recorrer la lista de caras detectadas. Cada cara tiene una gran cantidad de puntos de contorno asociada a ella. Para conseguir el acceso a esos puntos, debes invocar al método getContour(). Este método puede devolver los puntos del contorno de diferentes partes de referencia faciales. Por ejemplo, si le envías la constante LEFT_EYE, este devolverá los puntos que necesitarás para crear el contorno del ojo izquierdo. De manera similar, si le envías UPPER_LIP_TOP obtendrás los puntos asociados con la orilla superior del labio superior.

En este tutorial usaremos la constante FACE, ya que queremos resaltar la cara en sí. El siguiente código te muestra cómo imprimir las coordenadas X e Y de todos los puntos que se encuentran presentes a lo largo de las orillas de cada cara:

Si intentas usar la aplicación ahora y especificas una imagen que tenga al menos una cara, deberás ver algo como esto en la ventana Logcat:

Logcat window showing coordinates of contour points

6. Trazando líneas alrededor de las caras

Para resaltar las caras detectadas, simplemente vamos a dibujar líneas alrededor de ellas usando los puntos del contorno. Para poder dibujar esas líneas necesitarás una copia modificable del mapa de bits de tu widget ImageView. Crea una invocando a su método copy().

Trazar las líneas modificando directamente los píxeles del mapa de bits puede ser difícil. Así que crea un nuevo lienzo 2D para eso enviándolo al constructor de la clase Canvas.

Además de eso, crea un objeto Paint para especificar el color de los píxeles que quieras dibujar en el lienzo. El siguiente código te muestra cómo crear un lienzo en el que puedes dibujar píxeles rojos translúcidos:

La manera más sencilla de trazar líneas en un lienzo es usando la clase Path. A través del uso de los intuitivamente nombrados métodos moveTo() y lineTo() de la clase, puedes trazar figuras complejas en el lienzo de forma sencilla.

Por ahora, para trazar la forma de una cara invoca al método moveTo() una vez y envíale las coordenadas del primer punto del contorno. Al hacer esto le especificas el lugar en el que comienza la línea. Luego envía las coordenadas de todos los puntos al método lineTo() para trazar la línea. Finalmente invoca al método close() para cerrar el trazo y rellenarlo.

En consecuencia, agrega el siguiente código:

Para mostrar el trazo, envíalo al método drawPath() del lienzo junto con el objeto Paint.

Y para actualizar el widget ImageView para que muestre el mapa de bits modificado, envía el mapa de bits a su método setImageBitmap().

Si ejecutas la aplicación ahora podrás verla dibujar máscaras rojas translúcidas sobre todas las caras que detecte.

App highlighting a face

Conclusión

Con la nueva API de detección de contornos faciales del Kit ML y un poco de creatividad, puedes generar fácilmente aplicaciones con inteligencia artificial que pueden llevar a cabo tareas complejas relacionadas con la visión por computadora, como intercambiar caras, detectar emociones o aplicar maquillaje digital. En este tutorial aprendiste a usar las coordenadas en 2D que la API genera para trazar figuras que resaltan las caras presentes en una fotografía.

La API de detección de contornos de caras puede gestionar un máximo de cinco caras en una foto. Sin embargo, para lograr la velocidad y precisión máximas, te sugiero que la uses solamente con fotos que tengan una o dos caras.

Para conocer más sobre la API consulta la documentación oficial.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.