Xamarin.Forms + Cognitive Services
¿Cuantas veces preguntamos a los demás por su edad y no obtenemos respuesta? Bueno!!! los servicios Cognitive de Microsoft nos va a ayudar con esto.
¿Que son los Microsoft Cognitive Services?
Los servicios cognitivos de Microsoft son una colección de algoritmos e interfaces de programación de aplicaciones (APIs) que están diseñados para ayudar a los desarrolladores a agregar capacidades de inteligencia artificial en sus aplicaciones.
¿Que vamos hacer?
Vamos a construir una aplicación que a partir de una foto nos diga que edad tiene aproximadamente esa persona.
NOTA: Es bueno aclarar que la foto del ejemplo no es reciente, por tal motivo si no te cuadra la edad es normal.
Alcance de la aplicación
Esta aplicación es un ejemplo muy simple con el fin demostrar la facilidad de integrar los servicios cognitivos de Microsoft con Xamarin.Forms, en un entorno real implica validaciones de muchos escenarios por ejemplo: validar que en la foto aparezca una persona, validar que en la foto se visualice el rostro de la persona entre otras cosas.
Esto se puede hacer con la información que nos devuelve el API o incluso usar otros servicios adicionales que ofrecer Microsoft Cognitive, pero para este ejemplo vamos a ignorar esas validaciones para no complicar el ejemplo.
Configuración
Lo primero que demos hacer es obtener un KEY que es requerido para poder consumir el API.
- Ingresamos al siguiente sitio. Y hacemos clic en “Get API Key” tal como se muestra en la imagen.
2. A continuación veremos las opciones disponibles.
a) Si no tenemos cuenta de Azure lo más fácil es seleccionar la primera opción, la cual nos dará un KEY de prueba durante 7 días.
b) En caso de tener una cuenta en Azure podemos usar la opción 2, es muy importante que al momento de seleccionar el plan elijas el gratuito para evitar algún tipo de cobro, tiene limitaciones pero para las pruebas es más que suficiente. Luego de iniciar sesión en Azure y crear un servicio de API Face verás algo como lo siguiente:
En ambos caso vamos a obtener una URL y un KEY que son los datos que vamos a necesitar para consumir el servicio.
Creando la aplicación
Primero vamos a crear una aplicación tipo Xamarin.Form que vamos a llamar “HowOldAreyou”, para este ejemplo nos vamos a enfocar en el proyecto UWP solo para variar :)
Instalando paquetes nuget
A continuación instalamos los siguientes paquetes nuget requeridos para nuestra aplicación.
Newtonsoft.Json: Utilizado para la deserialización del JSON que nos devuelve el servicio.
Xam.Plugin.Media: Nos facilita la tarea de tomar una foto a través de la cámara o seleccionar una del dispositivo.
Creando estructura básica del proyecto
Para mantener un orden en el proyecto compartido creamos las carpetas Models, Services y ViewModels.
Dentro de la carpeta ViewModels creamos un archivo llamado ViewModelBase.cs y agregamos el siguiente código.
Esta es la ViewModel que usaremos para implementar MVVM. A continuación en la carpeta Models incluimos un archivo llamado FaceResult.cs y agregamos el siguiente código.
Esta la clase que sirve para almacenar la información que nos devuelve el servicio, como notaras el servicio nos brinda mucha más información adicional a la edad.
A continuación vamos reemplazar el contenido actual del archivo MainPage.xaml con el siguiente código.
El código anterior corresponde a la creación de la vista, básicamente sé está agregando 3 botones que corresponden a tomar foto, seleccionar de la galería una imagen y analizar. Adicional a eso estamos agregando una imagen donde se observará la selecciona por el usuario. Y finalmente un Label donde se muestra la edad de la persona.
A continuación vamos agregar en la carpeta de ViewModels un archivo llamado MainViewModel.cs con el siguiente código.
El archivo anterior básicamente contiene la lógica de la aplicación; comportamiento de los botones, código para mostrar la foto y la edad del usuario cuando es devuelva por el servicio, el proceso para tomar una foto o seleccionar una de galería, entre otras cosas más.
Integrando con Microsoft Cognitive Services
A continuación vamos agregar el código requerido para integrarnos con el servicio y posteriormente vamos a explicar de manera general su funcionamiento.
En la carpeta de Services agregamos un archivo llamado FaceService.cs y agregamos el siguiente código.
La clase cuenta con 2 variables globales: subscriptionKey y uriBase las cuales debemos cambiar su valor por obtenido en proceso configuración.
El método DetectAge que recibe el path de la imagen que vamos a analizar y nos va a devolver la edad.
En la variable requestParameters especificamos la información que queremos obtener de la API, como puedes observar estamos obteniendo datos adicionales a edad, esto se hace con fin de que observes que puede traer información adicional en una misma petición sin tener que hacer varias solicitudes para la misma imagen la documentación completa la puedes encontrar aquí.
El método GetImageAsByteArray se utiliza para leer la imagen del dispositivo y convertirla bytes para poder enviarlo API.
El servicio nos devuelve un JSON con la información que requerimos, solo queda deserializar y obtener el valor de la edad que es lo que nos interesa.
La mayor parte se código de la clase se obtuvo de ejemplo que proporciona la documentación de Microsoft, aquí puedes obtener la información de manera más detallada
Resultado
Ahora al ejecutar la aplicación tendremos el siguiente resultado
Código Fuente
El código fuente de la aplicación lo puedes descargar de mi repositorio git.
Conclusión
Microsoft Cognitive Services nos permite implementar análisis de imágenes de manera muy sencilla en nuestras aplicaciones, solo nos limita nuestra imaginación.
