Reconocimiento facial con Angular y los servicios cognitivos de Azure

Este post escribiré acerca de un proyecto de mi Universidad en donde teníamos el reto de crear una herramienta que pueda usarse para solucionar problemas de personas desaparecidas mediante una herramienta tecnológica que fuera accesible a cualquiera con acceso a Internet.

Abstract

Actually, hundreds of thousands of people are missing in Latin America as a result of armed conflicts, violence, natural disasters or migration. The CARONTE project has as objective be a tool for the search for people through photographic analysis using Artificial Intelligence.

Bien, sin duda era una bonita misión, pero nunca habíamos enfrentado algo similar y no teníamos idea de cómo empezar, entonces recordé ese consejo que todos dicen y que la gente generalmente olvida, esa frase que Nicolas Maquiavelo tanto hacía referencia en su libro El Principe.

Divide y vencerás. — Julio Cesar

Para eso empezamos a plantear una serie de ideas y arquitecturas como también una posible interfaz, para esto usamos InVision y el framework Carbon de IBM.

Además de esto iniciamos el documento de especificación de requisitos e interfaz de usuario.

Documento de especificación de requisitos e interfaz de usuario

Una vez fraccionado el problema en problemas más pequeños empezamos a seleccionar las tecnologías que usaríamos.

Base de Datos: Cloud FireStore
Buscaba una base de datos rápida, fácil de integrar y de usar; además ya tenía experiencia usándola, así que ¿por qué no?.

Front-end: Angular
Iniciamos con Angular por amor al Framework y su capacidad para adaptarse a cualquier problema, elegirnos nos ahorro mucho tiempo a diferencia de trabajar con Vanilla JavaScript.

Estilos: Carbon Framework
Un hombre se forma a base de errores y considero que esta fue una mala decisión, quería probar esta nueva herramienta por sus componentes ya desarrollados para Angular pero al final le hace falta muchos componentes por esto hizo falta hacer mucho CSS, una desventaja si lo comparamos con Boostrap, NgPrime, Bulma …

Reconocimiento Facial: Face API
De todo el proyecto esta era la parte que más me emocionaba solucionar, al inicio lo quería hacer con alguna librería como TensorFlow y entrenar mis propias redes neuronales capaces de reconocer si ella te ama, pero el cursar 10 materias y lo poco que dura un semestre (Dato curioso: un semestre son 4 meses en las universidades de Colombia y en Argentina se le llama cuatrimestre, un nombre más apropiado), hizo que tuviera que cambiar de rumbo y buscar otra opción más rápida.

Aquí es donde encontré a Face API dentro del catalogo de servicios cognitivos de Azure, la cual se adaptaba muy bien a nuestro rompecabezas y contaba con las mismas ventajas de las herramientas anteriores fácil, rápida y barata.

Después de muchas horas pensando y escribiendo código, realizamos una demo para concursar en Expoingenio (Una feria de proyectos de ingeniería de la universidad).

Al público y a nosotros nos agradó el resultado y por eso decidí compartir nuestra experiencia.

Demostración

El uso es muy fácil, subes una imagen mediante un link o archivo, se consulta a la API y con los datos obtenidos se consulta en la base de datos de usuarios registrados como ´Desaparecidos´, y así mostramos los resultados de todas las personas que tienen un nivel de parentesco bastante alto. (He registrado las mismas personas varias veces para simular diferentes usuarios).

Errores y problemas

Como mencioné al principio considero que usar Carbon fue un error y por motivos de tiempo no alcancé a sustituir el framework por otro, también nos ha costado entender el asíncronismo y programación reactiva, sin duda son temas que estaré estudiando a fondo.

Código

Para usar el proyecto se debe agregar las claves y el respectivo Endpoint de FaceApi en los servicios y los valores de configuración de Firebase en el archivo Enviroments.

Archivos que deben ser modificados con las claves de acceso

Espero que el código les sirva de ayuda y si tienen alguna duda o comentario con gusto estaré ayudandoles.

--

--

--

光 — Nobody said it would be easy, mijo.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Andrey Bueno Solano

Kevin Andrey Bueno Solano

光 — Nobody said it would be easy, mijo.

More from Medium

How to Edit Context Menu in AG Grid

OpenId Connect (OIDC) with Angular

Angular Framework

Angular vs. AngularJS: A Complete Comparison Guide

Angular vs AngularJS