APP-recidos razonables con los jugadores de la liga

Posted by in Programación

APP-recidos razonables es una web app que permite comparar fotografías de personas con los jugadores de fútbol profesional de la Liga Santander 16-17, y determinar su grado de parecido.

APP-recidos razonables

La idea surgió al ver la web de Face API de Microsoft Cognitive Services. Ésta es una API proporcionada por Microsoft que permite detectar y verificar caras en fotografías. En su web, tienen varios ejemplos que muestran sus funcionalidades, así como una detallada documentación. Lo que más me llamó la atención era el poder comparar dos fotografías; y, que la API detectase las probabilidades de que ambas fotos tuviesen a la misma persona. Así que, para “jugar” con esta API, se me ocurrió la idea de una web app que dijese, dada una fotografía de una persona, a qué tres jugadores de la liga de fútbol se parece más. 🙂

Scraping

Para ello, lo primero que hice fue scrapear las fotografías de todos los jugadores de la Liga Santander 16-17 usando la web oficial de La Liga. Por ejemplo, este link con las fotos de los jugadores del Atlético de Madrid. Para obtener la información utilicé este script de Python (con Selenium), que genera un fichero csv con toda la información: nombre del jugador, equipo y url de la foto de su ficha de jugador.

Face API script

Cognitive-Faces-Python es la librería que utilicé para conectar fácilmente con la Face API en Python. El script que se encarga de todo se puede consultar en este enlace. Básicamente, hay dos partes en el proceso:

  1. Registrar todas las caras de los jugadores en la API : createFaceList() – Recorre el fichero csv con la información de los jugadores, y va registrando cada uno de ellos en la API. Cada vez que se produce un registro, la API devuelve el identificador de la cara de ese jugador. Este identificador contiene los datos característicos y que identifican a dicha cara en el servicio de Face API, en una lista de grupos concreta. Y ésta nueva información se vuelca en otro fichero csv.
  2. Verificar caras : getComparationFaces() – Consta de varias fases:
    1. Detectar la cara a comparar : Dada una url con una imagen, se consulta la API con dicha información: CF.face.detect(urlFace). Como respuesta, se recibirá un identificador de imagen dentro de la API con la info de la cara.
    2. Comparar con la lista de jugadores : Con la información de la cara detectada, se llama a la API pasando también como parámetro el identificador de la lista donde está guardada toda la información de los jugadores (CF.face.find_similars). Devuelve una lista ordenada por el grado de parecido (confidence) de todos los jugadores.
    3. Obtener los tres jugadores más parecidos : Con dicha lista, se recorren los 3 primeros jugadores y se crean sus determinados objetos. Éstos serán enviados en formato JSON a la a través de la API como respuesta a la página.

AWS Lambda / Gateway

AWS Lambda es un servicio proporcionado por Amazon que permite ejecutar código en servidor. Un “mini back-end” y con la comodidad de la nube y Amazon. Yo lo he utilizado para que se ejecute el script que explicado en la anterior sección. En concreto, la parte de comparación de caras. Junto a él, he utilizado Amazon API Gateway  para crear la API a consultar.

Un esquema/resumen sería el siguiente:

untitled-diagram

Front-End

El front-end es sencillo utilizando HTML5, CSS y JS, sin ningún “framework moderno”. Pero he practicado usando “CSS3 Flex” para posicionar los elementos; y, sobre todo, para hacerlo “responsive design” y “mobile first”. Utilicé Coolors.co para la paleta de colores. El javascript utiliza JQuery para las llamada POST a la API y su asincronía. También he aprendido (ya que nunca antes lo había hecho) a poner los botones de compartir por Twitter y Facebook en un pop-up nuevo; y compartir vía Whatsapp.

captura-de-pantalla-2016-11-16-a-las-20-06-38

Ejemplos

captura-de-pantalla-2016-11-15-a-las-21-12-28

captura-de-pantalla-2016-11-15-a-las-20-52-13

captura-de-pantalla-2016-11-15-a-las-20-49-29

captura-de-pantalla-2016-11-15-a-las-22-52-35

captura-de-pantalla-2016-11-15-a-las-21-35-51

captura-de-pantalla-2016-11-15-a-las-22-33-01

captura-de-pantalla-2016-11-15-a-las-22-44-38

Conclusiones

Este mini-proyecto me ha servido para jugar con la API Faces de Microsoft, y su poder de machine learning. Me ha resultado súper sencillo de utilizar. Y con unos resultados, que aunque evidentemente no son perfectos, son más que aceptables. Otro API de Cognitive Services que me resulta interesante, y que seguramente pruebe en el futuro, es el de análisis de textos.

También me ha servido para aprender el uso básico de los servicios de Amazon: Lambda y Gateway. Me parece que son muy útiles, debido a su comodidad de uso. Flex y el “responsive design” es otro de los aspectos que repasé con esta aplicación

Por último, me gustaría comentar la feature que pensé a medida que lo desarrollaba, pero que se quedó en “el tintero”. Ésta es el poder subir fotos desde el dispositivo (ordenador o móvil), y no utilizar solo direcciones web de imágenes ya subidas. Finalmente no lo implementé. El motivo fue que tenía que lidiar con subida de imágenes a servidor. Y, aunque hice una pequeña prueba con Amazon S3 buckets que funcionaba bien, al final decidí no implementarlo. La razón principal fue para evitar que el usuario subiera “fotos suyas” a un servidor el cual tuviese que gestionar yo, evitando “temas legales”.

Y, aunque se haya podido quedar algún bug rondando por ahí (por ejemplo, algunas imágenes duplicadas), estoy bastante satisfecho con el resultado final. Sobre todo por haber podido acabarlo. Todos sabemos lo motivante que es iniciar y prototipar una idea; pero cuánto cuesta mantener dicha motivación para acabarlo. Ah! Y cualquier feedback es bienvenido. 🙂

Share 🙂Share on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedInBuffer this pageShare on RedditShare on Tumblr