Cognitive Services: Utilizando el Face API en una app de Xamarin
¡Hola! En esta entrada vamos a aprender a utilizar el Face API incluido en los Azure Cognitive Services a fin de desarrollar una app móvil (con Xamarin) que trabaje con reconocimiento facial a fin de autorizar acceso.
Face API permite realizar operaciones reconocimiento facial para utilizarlo en escenarios donde se necesita detectar rostros humanos en una fotografía o video, hacer una comparación facial entre varios rostros, organizarlos de acuerdo a su parecido e identificar personas que tenemos en un repositorio. También es posible identificar características del rostro detectado, tales como el color de cabello, género, emoción, edad estimada, si la persona utiliza lentes o no, etc.
Para realizar todas estas operaciones, se provee de un API y de un SDK que simplifica su implementación en una aplicación de cualquier tipo (desktop, web, móvil) en varias tecnologías (C#, PHP, Node.JS, Java, etc). Para demostrar su uso desarrollaremos una app móvil con Xamarin que realice lo siguiente:
- Crear un repositorio (grupo) donde las imágenes serán almacenadas
- El usuario debe registrarse en la aplicación para que pueda utilizarla.
- El proceso de registro consiste en tomar 3 fotografías al usuario
- El sistema de reconocimiento facial es entrenado con las nuevas imágenes
- Para iniciar sesión, la app toma otra fotografía al usuario
- Si es identificado, se le brinda acceso
Para utilizar este servicio es necesario obtener llaves de acceso. Eso lo podemos hacer desde el portal de Azure y de manera gratuita.
¡Manos a la obra! Inicia sesión con tu cuenta de Azure. Da clic en Todos los servicios –> AI + Cognitive Services –> Face API
Ahora ingresa la información solicitada:
- Un nombre (para identificar tu aplicación)
- Suscripción (en caso de incurrir en algún costo, pero recuerda que hay tier gratuito)
- Ubicación (selecciona un servidor lo más cercano posible a la ubicación de los usuarios de tu app)
- Plan de tarifa (elige F0, que es el Free Tier. Como puedes ver, en mi caso ya tengo otra app que usa el esquema gratuito y por eso debo seleccionar el tier estándar, con costo).
- Crea un grupo de recursos o selecciona uno que tengas (sirve para agrupar servicios relacionados)
Da clic en Crear
A continuación, espera a que se aprovisione el servicio. Recibirás una notificación cuando el proceso finalice:
Da clic en Ir al recurso y accederás a la página de Resumen de tu servicio. Identifica el endpoint y cópialo en un bloc de notas. Es la URL a la que enviaremos nuestras peticiones. Da clic además en Mostrar llaves de acceso:
Copia la primer llave que aparece en tu servicio y pégala en un bloc de notas. La utilizaremos al realizar las llamadas a nuestro servicio para que las peticiones sean autorizadas.
Con estos elementos, ya podemos comenzar a desarrollar una app móvil con capacidades de reconocimiento facial. Abrimos Visual Studio y creamos un nuevo proyecto de tipo Cross-Platform App (Xamarin.Forms) llamado FaceLoginApp.
Utilizaremos la estrategia de código compartido .NET Standard, así como Xamarin.Forms para nuestra tecnología de interfaz de usuario. Elige las plataformas que deseas soportar
Una vez creado el proyecto, da clic derecho sobre la solución y selecciona Administrar paquetes Nuget para la solución. Agrega los siguientes paquetes en todos los proyectos:
Microsoft.EntityFrameworkCore.Sqlite (versión 1.1.5)
Microsoft.Net.Http
Microsoft.ProjectOxford.Face.DotNetStandard
Newtonsoft.Json
Xam.Plugin.Media (versión 2.6.0)
System.Runtime.CompilerServices.Unsafe
Ahora da clic derecho sobre el proyecto de Android y selecciona Administrar paquetes Nuget. Incluye los siguientes paquetes:
Plugin.Permissions
System.Runtime.CompilerServices.Unsafe. Realiza un downgrade a la versión 4.3.0
Plugin.CurrentActivity
Crea las siguientes carpetas en el proyecto FaceLoginApp (.NET Standard)
En la carpeta Helpers, agrega la clase Constantes, con el código siguiente:
En la carpeta Modelos, agrega la clase Usuario, con el siguiente código:
En la misma carpeta, agrega la clase Emocion, la cual contiene el siguiente código:
A continuación accede a la carpeta Datos y crea primero la interfaz IBaseDatos, la cual solo contiene un elemento:
Posteriormente, agrega la clase BaseDatos en la misma carpeta, la cual implementa esta interfaz. El código es el siguiente:
El siguiente paso es ir a la carpeta Servicios y crear la clase ServicioImagen con el siguiente código:
Ahora creamos otra clase como servicio, llamada ServicioFace. Esta es la clase principal de nuestra aplicación, donde llamamos varios de los servicios para almacenar rostros en el repositorio, crear un grupo de almacenamiento, identificar una persona en base a una fotografía y más.
Generamos una interfaz llamada IServicioBaseDatos, la cual contiene los siguientes elementos:
Y el tercer y último servicio que vamos a crear en esta carpeta se llama ServicioBaseDatos, el cual implementa la interfaz recién creada:
Ahora procedemos a crear los elementos de interfaz de usuario. En la carpeta Páginas primero agregamos un ContentPage llamado PaginaRegistro. El código XAML es el siguiente:
Y su code-behind es:
A continuación creamos PaginaBienvenido, otro ContentPage, con el siguiente código:
Su código de C# respectivo es:
Finalmente, creamos PaginaLogin, un ContentPage que tiene los siguientes elementos:
Con el código de C# siguiente:
En App.xaml.cs establecemos la página de inicio y un stack de navegación:
Ahora tenemos que hacer ciertos ajustes en el proyecto de Android.
En primer lugar, en el proyecto raiz de Android agrega una clase llamada MainApplication, con el siguiente código:
Ahora modifica MainActivity, agregando el método OnRequestPermissionsResult dentro de la clase:
En tercer lugar agrega la carpeta Datos y crea la clase BaseDatosAndroid dentro de ella, con el código siguiente:
Dentro de la carpeta Resources agrega una carpeta llamada xml; en ella, agrega un Archivo xml llamado file_paths.xml
En las Propiedades del proyecto de Android (doble clic en Properties), ubica el Manifiesto y agrega los siguientes permisos:
- READ_EXTERNAL_STORAGE
- WRITE_EXTERNAL_STORAGE
- INTERNET
- CAMERA
Guarda las propiedades (de preferencia cierra ese archivo) y a continuación abre el AndroidManifest.xml que se encuentra dentro de Properties. Agrega un provider dentro de la etiqueta application. El código debería ser similar al siguiente:
NOTA: Una propiedad importante que debes tomar en cuenta es android:authorities, la cual consta del paquete de la aplicación seguido de fileProvider; ese dato lo encuentras también en el manifiesto, en la propiedad package. Además, en android:resource debes hacer referencia al archivo creado xml/file_paths (sin extensión).
¡Listo! ¡Ya puedes probar la app! Vamos a compilar y ejecutar la aplicación en caso de que no existan errores. Dado que vamos a utilizar la cámara, la prueba solo puedes hacerla con un dispositivo físico.
Antes de que se me olvide, el código fuente lo puedes descargar desde mi repositorio de GitHub: https://github.com/icebeam7/FaceLoginApp
Por cierto, en mi canal de YouTube también puedes seguir paso a paso el desarrollo de esta app:
