Microsoft Cognitive Toolkit (CNTK) Course: Deep learning, 1.Conceptos básicos

Machine Learning (Aprendizaje de maquina)

  • Definición:

Desde una perspectiva general: Disciplina enfocada en como construir  sistemas que automáticamente mejoren de acuerdo a su experiencia sin ser programados para ello y descubrir  cuales son las leyes fundamentales de la estadística-matemática-computación-información que gobiernan todos los sistemas de aprendizaje, incluyendo computadoras, seres humanos y organizaciones.
Desde una perspectiva mas especifica: Consiste en entrenar un modelo matemático o estadístico usando información histórica, con el fin de que pueda inferir o predecir el valor de una variable, la cuál puede ser discreta o continua, dependiendo el tipo de problema, clasificación o regresión respectivamente, en miras a comprender o explicar un fenómeno dado, realizar predicciones a futuro o hacer inferencias, en general a identificar patrones.

  • Conceptos básicos: 

En esta sección se definen los conceptos fundamentales, que hacen parte de la nomenclatura(términos estándar) usada cuando se esta describiendo un set de datos o abordando un problema en particular  en términos de machine learning:

Data: Cuando se piensa en datos, comúnmente lo primero que se nos viene a la cabeza es filas y columnas, quizás tablas en una base de datos o una hoja de calculo en excel. dicha estructura es una forma tradicional de representar un conjunto de datos y se conserva para representar las entradas de un modelo o algoritmo de machine learning, a continuación se describen los componentes de un dataset.

  1. Instancia/Instance : Una instancia corresponde a un registro dado, o fila de un dataset o matriz de datos representada de la forma tradicional en filas y columnas
  2. Característica/Feature: Una columna de la matriz de datos es llamada feature,representa un componente o variable del modelo. Existen de salida(dependientes) y de entrada(independientes), las primeras serán las que conformarán el set de características(número de alcobas, baños, pisos etc. de cada casa) , la ultimas aquellas que se espera el modelo pueda predecir (precio de la casa).
  3. Tipo de dato/ data type: La features, o columnas de un set de datos o matriz, tienen un tipo de dato definido, este puede ser real, entero o categórico(lista de valores), e incluso almacenar cadenas, fechas o tipos de datos mas complejos, sin embargo por lo general los algoritmos/modelos tradicionales reducen el set de variables a tipo real o categórico.
  4. Conjunto de datos/Dataset: Colección de instancias(rows) que representan los datos del modelo
  5. Conjunto de datos de entrenamiento/Training Dataset: por lo general es un subconjunto de instancias del dataset que se usa para entrenar el modelo.
  6. Conjunto de datos de prueba/Testing Dataset: Por lo general es un subconjunto de instancias del modelo que se usa para validar el desempeño o la tasa de reconocimiento de un modelo, dependiendo del tipo de problema.

LearningSegún el contexto, tipo de variables etc., existen diferentes modos a través de los cuales un modelo puede aprender de los datos, en esta sección se describen  algunos conceptos importantes con respeto al aprendizaje de los algoritmos.

  1. Aprendizaje Supervisado/supervised learning: las instancias de nuestro conjunto de datos están debidamente categorizadas o clasificadas,es decir,  cada una tiene su respectivo label asociado o clase.
    • ejemplo 1: usando las palabras presentes en el cuerpo en un correo electrónico como set de características, podemos entrenar un modelo de clasificación con un n (número de mensajes) definido, para que este pueda inferir o «predecir»  si dicho mensaje es spam o no spam (en este caso el valor de Y, variable dependiente es discreto, dado que es una categoría, 1-spam , 0- no spam).
    • ejemplo 2: Es posible predecir el costo de una casa dentro de un vecindario, usando un modelo de regresión previamente entrenado con las características físicas (número de baños, habitaciones, ubicación) y el valor o costo asociado a un conjunto de casas con ubicación espacial en común (donde el valor Y, variable dependiente es continuo, dado es un precio).
  2. Aprendizaje no supervisado/ unsupervised learning: las instancias dentro del conjunto de datos no están categorizadas o clasificadas, es decir no tienen un label asociado. Este tipo de modelos  por lo general son usados para identificar o deducir estructuras comunes entre si que permitan agruparlas (donde el identificador del  grupo termina siendo la clase a la que la instancia pertenece). Esto puede ser extrayendo reglas generales a través de algún método matemático que permita identificar patrones similares(por ejemplo la distancia espacial), o simplemente agrupándolos teniendo en cuenta alguna medida de similitud.
  3. Aprendizaje semi-Supervisado: existen algunas instancias del conjunto de datos que están categorizadas, los cuales son usadas para inferir/predecir a que categoría pertenece cada una de las restantes o su respectivo valor en caso de que sea un problema de regresión. Esto es posible solo si la cantidad de instancias clasificadas es mayor al de no clasificadas, en caso tal de que dicha condición no se cumpla existen otras formas de abordar este tipo de problemas, como por ejemplo iniciar haciendo un análisis de clustering ( usando modelos de aprendizaje no supervisado).

Machine Learning Approachs: 

machine learning

Cuando nos enfrentamos a resolver o abordar un problema especifico usando Machine Learning existen dos enfoques diferentes que podemos usar dependiendo del contexto y los requerimientos. La diferencia radica en que mientras con los modelos tradicionales de machine learning como: SVM (Maquina de vector de soporte), QDL (Discriminante lineal cuadrático), Knn (vecino más cercano) etc. para proceder con el entrenamiento del modelo debemos desde el inicio tener definido nuestro conjunto de características (features extraction), usando Deep learning, no es necesario puesto que el algoritmo realiza dicha tarea automáticamente (learning higher order abstraction staring with the raw data). Lo anterior representa una ventaja significativa puesto que en algunos escenarios definir dichas características puede ser costoso, ya que en caso de que decidamos usar el enfoque tradicional este conjunto de variables seleccionadas debe ser cíclicamente refinado hasta lograr un buen resultado (classification rate/regression rate). Existen diferentes técnicas basadas en ejecuciones metódicas sucesivas para realizar selección de características (feature selection), entre las cuales se encuentra Greedy forward selection, algoritmos genéticos etc.

we need to hand-craft the features

we need to hand-craft the features

feature engineering is done automatically by the algorithm

feature engineering is done automatically by the algorithm

Otra de las diferencias representativa entre los dos enfoques esta en que mientras en el enfoque tradicional se habla de modelos refiriéndonos a los diferentes algoritmos que existen, en deep learning nos referimos a redes neuronales con arquitecturas de red diferentes(número de capas, nodes, salidas, entradas etc.). En el link a continuación podremos obtener mas información sobre  algunas arquitecturas predefinidas que son muy usadas. The Neural Network Zoo .

Algunos Modelos:

 

deepLearning

Neural Networks Models

traditional

Traditional Models

¿Qué es deep learning?

En la imagen a continuación podemos observar el corte transversal del hippocampus tomada del cerebro de un ratón, la cual nos permite evidenciar que dicho sistema está compuesto morfológicamente de diferentes capas, las cuales comparten información en forma de impulsos nerviosos a través de las neuronas. Basado en este concepto biológico, que ocurre además en el cerebro de los humanos, las redes neuronales (deep neural networks) son algoritmos bio-inspirados que de acuerdo a la complejidad de su arquitectura pueden tener n cantidad de capas (unidades de procesamiento).

mouseBrain

The hippocampus, shown here in a mouse, is a brain region involved in storing memories. The mouse was genetically modified with a gene that creates a green fluorescent protein that causes the neurons to glow green.

¿Porque «deep learning» en lugar de «neural network»?

Esto es debido a la estructura de las redes, hace unos 40 años atrás (aproximadamente) se hablaba de arquitecturas de red de solo 2 capas, esto dado que en ese momento no se contaba con los recursos de hardware, ni la capacidad de computo que se tiene hoy en día (cloud computing, GPU), en donde es muy común encontrar modelos  incluso con mas de 100.

Algunas Aplicaciones:

  • Real world applications
    • Image: autonomous driving, disease detection
    • Text: Machine translation, document cromprehension
    • Speech: voice recognition

Qué es CNTK?

A medida que la arquitectura de la red neuronal empieza a crecer o a volverse mas compleja, es decir empieza a mutar, codificar por nuestra cuenta su arquitectura puede ser muy tedioso, por lo que existen herramientas como Microsoft Coknitive Toolkit ( CNTK ) que nos facilita dicha tarea. CNTK es un framework para deep learning de código abierto, escalable,flexible, compatible con la CPU y la GPU,  que nos permite codificar e implementar de una forma fácil e intuitiva nuestro modelos usando python o c++ e incluso en otros lenguajes ver: https://docs.microsoft.com/en-us/cognitive-toolkit/CNTK-Evaluation-Overview.  se presenta como otra alternativa a soluciones similares como Tensorflow, Torch, Keras, Caffe etc.

Esto es todo por el momento, en el próximo tutorial entraré mas a fondo en el mundo de deep learning y les enseñare como construir una red neuronal simple. posteriormente empezaremos a interactuar con CNTK.

 

 

 

Anuncio publicitario

meRobot : RaspberryPi, Nodejs & Cognitive Services (Parte 1)

Hola todos, en esta ocasión, con esta serie de tutoriales  les enseñaré como construir su propio Robot capaz de identificar y reconocer personas, inferir tu estado de animo, hablar!!! , traducir comandos de voz e incluso reconocer a tu mascota, con tan solo 50 usd, usando raspberrypi, node.js,microsoft cognitive services,machine learning  y algo de opencv. Para empezar a continuación, les comparto la lista de los   componentes de Hardware  que necesitamos para nuestro experimento : Nota:  todos los componentes se pueden adquirir en Colombia vía mercadoLibre, amazon . microelectronicos etc.

  1. Raspberry Pi camera
  2. Raspberry pi camera module 

Ok!!!, manos a la obra: Procedamos entonces a configurar nuestra raspberrypi siguiendo los pasos a continuación: Nota: Dado que las instrucciones fueron tomadas de este post : link, extiendo los créditos al autor y destaco que en mi opinión sin duda es uno de los tutoriales mas completo y detallado que he encontrado :

Instalación del SO

  1. Descargue la ultima versión de Raspbian del link oficial https://www.raspberrypi.org/downloads/raspbian/.
  2. Inserte y formatee  la microsd  sobre la cual desea instalar el sistema operativo de la raspberry (esta debe de ser de al menos 8 gb de espacio)
  3. Descargue, instale y ejecute  Etcher (cross-platform (Windows, OS X, Linux) tool for flashing images to SD cards)
  4. siga las instrucciones del asistente:etcher1
  5. haga click sobre el botón Select Image y ubique el archivo que descargo anteriormente (…zip)
  6. haga click sobre el botón Select Drive y seleccione la sd
  7. haga click sobre el botón flash, para que Etcher proceda a realizar la copia de la imagen
  8. al finalizar el proceso retire la sd de su computadora y conéctela nuevamente a la raspberry pi : https://www.youtube.com/watch?v=PCcXa4UFeLg

Configuración Inicial 

  1. conecte a la raspberry vía usb el teclado y el mouse
  2. por hdmi el monitor
  3. enciéndala conectándola a la corriente
  4. espere que el sistema operativo cargue y proceda con la configuración
  5. en el menú principal, dentro del submenu preferences haga click sobre la opción Raspberry Pi configuration
  6. luego en la siguiente ventana modifique el hostname(raspi), cambie el password por default(optional) , y lo mas importante haga click sobre el boton Expand Filesystem para asegurarnos que todo el espacio de nuestra sd quede disponible para nuestro so.
  7. en la misma ventana, en la pestaña localisation, asegúrese de modificar la zona horaria, el idioma etc.

  8. finalmente conecte la raspberry a internet 2017-02-21_12-50-38

Instalando actualizaciones 

  1. En la terminal ejecute los siguientes comandos
  • sudo apt update
  • sudo apt full-upgrade

Habilitar el acceso remoto

Si queremos acceder a nuestra raspberry de forma remota y no tener que requerir un monitor HDMI dedicado, mouse y teclado, existen diferentes formas :

  1. para acceder vía ssh, solo basta con activar el acceso desde el menú de preferences:

2017-02-21_13-05-04.jpg

  1. para acceder vía rdp/acceso remoto  o vía vnc : debemos instalar los siguientes paquetes

sudo apt install -y tightvncserver

sudo apt install -y xrdp

  1. Independientemente del protocolo que usemos para conectarnos de forma remota  a nuestra raspberry(ssh, vnc, rdp), debemos hacerlo a través de la dirección ip estática que le tengamos asignada  o la ip dinamica que el dhcp le defina, pero que pasa si queremos hacerlo usando el hostname, para eso debemos instalar samba, ejecutando el comando a continuación:

sudo apt install -y samba

ya con esto, si estamos conectados en nuestra maquina a la misma red wifi que la raspberry, podremos hacerle un  ping usando su hostname para probar si hay conexión:

2017-02-21_13-28-58.jpg

Instalación de la cámara

Finalmente para instalar la cámara podemos seguir las instrucciones del siguiente  vídeo :


Estos es todo por el momento en el siguiente vídeo les mostrare como instalar nodejs y como configurar samba para poder crear un directorio compartido que podamos acceder desde visual studio code. Espero les sea de utilidad!

Microsoft Cognitive Services Notes: Face API (Node.js)

Hola a todos, en esta nueva entrega sobre el desarrollo de aplicaciones usando la suite de servicios de Microsoft Cognitive services  les mostrare como construir una aplicación sobre nodejs usando el api de reconocimiento facial; Pero antes de empezar a codificar nuestra app, quisiera hacer una breve introducción sobre el uso del api y algunas de sus bondades, en esta ocasión me centrare en  la función de detección de rostros que es la que vamos a usar para el ejercicio, este método recibe como entrada una imagen en formato JPEG, PNG,GIF o bmp, de máximo 4mb, entre 36×36 y 4096×4096 pixeles  y retorna como resultado (en formato json) información de interés de cada una de las caras “identificadas”, dicho función está en la capacidad de  detectar un máximo de 64. Para cada rostro podemos obtener:

  • Face rectangle: ubicación espacial de cada rostro en la imagen, contiene su posición en x, y y sus dimensiones(anchoXalto).
  • Face attributes: información adicional de interés: edad de la persona, genero, orientación del rostro, vello facial, gafas(si usa/no)
  • FaceLandmarks: Serie de puntos, que denotan el contorno del rostro y partes de interés, como por ejemplo la ubicación de cada ojo, la nariz, las cejas y la boca. El api nos entrega 27 puntos tal como se muestra en la imagen a continuación (tomada de la documentación oficial):

landmarks-1

Con lo que se pueden lograr cosas fascinantes  como estas! :

Nota: en Cada petición que realicemos al api debemos especificar, bien sea en el header o como un query parameter de la petición la suscripción key, por lo tanto, generar esta clave es fundamental antes de continuar. pueden seguir las instrucciones del post anterior( Microsoft Cognitive Services Notes: Emotion API (Node.js)) o revisar la documentación oficial.

Sin mas preámbulos podemos pasar a crear nuestro proyecto Nodejs usando el editor de su preferencia, los que quieran trabajar con visual studio pueden apoyarse en el  post anterior ( Microsoft Cognitive Services Notes: Emotion API (Node.js)). luego debemos instalar los paquetes requerido vía npm, para ello debemos abrir una linea de comando en windows y sobre el directorio de nuestro proyecto, ejecutar las siguientes instrucciones:

npm install hapi –save

npm install request –save

npm install inert –save

Una vez instalados los paquetes correctamente, pasemos entonces a crear nuestro archivo server.js/app.js y index.html, a continuación adjunto el código lo mejor documentado posible de cada uno, se puede optimizar,organizar, mejorar etc.
….Esto es todo por esta vez, espero les sea de utilidad y pongan a volar su imaginación, el enlace del repositorio es:  github  y de la app corriendo en azure http://faceapiappfun.azurewebsites.net/, cualquier duda al respecto, no duden en contactarme.

La app funcionando:

server.js:

//1. definimos las dependencias de nuestro proyecto
const Hapi = require("hapi");
const Util = require("util");
const Fs = require("fs");
const Http = require("http");
const Request = require("request");
const Path = require("path");
const Stream = require('stream');
const config = {
FACE_API_KEY: "<KEY>",
FACE_API_ENDPOINT: "https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=true&returnFaceAttributes=age,gender,headPose,smile,facialHair,glasses&quot;
}
//2.Instanciamos nuestro objeto server
const server = new Hapi.Server();
//3. Inicializamos los modulos
server.register(require("inert"), function (err) {
if (err)
trow("failed to load the plugin " + err);
});
//5. especificamos el puerto por el cual,nuestro objeto server atenderá las conexiones
server.connection({ port: process.env.port || 3000 });
//6. Definimos las rutas de nuestra app
server.route({
path: "/", method: "GET", handler: {
file: Path.join(__dirname, '/views') + "/index.html"
}
});
//7.Contenido estatico de nuestro app (.css, .js, images etc)
server.route({
path: "/public/{path*}", method: "GET", handler: {
directory: { path: Path.join(__dirname, 'public'), listing: true }
}
});
/*recibe una imagen enviada via post desde el cliente(front-end)
en formato base64, y realiza el request al api
de reconocimiento facial*/
server.route({
path: "/detectfaces",
method: "POST",
config: {
//restricciones de archivo
payload: {
maxBytes: 1048576 * 50, /*50MB*/
parse: true,
},
/*
funcion que se ejecutará cada vez que una petición post al path /detectfaces
sea realizada*/
handler: function (request, reply) {
//podemos obtener el buffer de la imagen si lo requerimos, de la siguiente forma
var base64Buffer = new Buffer(request.payload.image, "base64");
var binaryBuffer = new Buffer(base64Buffer.toString("binary"), "binary");
//generamos el request al api
var req = Request(
{
url: config.FACE_API_ENDPOINT,//url de la api
method: 'POST',
headers: {
//formato de envío de la imagen al api
'Content-Type': 'application/octet-stream',
//tamaño del buffer
'Content-Length': binaryBuffer.length,
//suscription API KEY
'Ocp-Apim-Subscription-Key': config.FACE_API_KEY,
}
}, function (error, response, body) {
if (error)
reply(error); //en caso de que algo salga mal, retornamos al cliente el error
// si todo sale bien, devolvemos al cliente la respuesta del API
reply(body);
});
/*creamos nuestro objeto stream a partir del buffer de la imagen y lo atachamos
/al cuerpo de la petici'on*/
var bufferStream = new Stream.PassThrough();
bufferStream.end(binaryBuffer);
bufferStream.pipe(req);
}
}
});
//ejecutamos nuestro server
server.start(function (err) {
if (err) { throw err; } console.log('Server running at:', server.info.uri);
});
view raw server.js hosted with ❤ by GitHub

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<style>
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body text-center">
<input id="file" class="center-block" type="file" name="file"><br />
<div class="btn-group">
<button type="button" action="faces" class="btn btn-primary">Detect Faces</button>
<button type="button" action="landmarks" class="btn btn-primary">Draw Landmarks</button>
<button type="button" action="fun" class="btn btn-primary">Fun Photo</button>
</div>
<br />
<br />
<canvas id="c" class="center-block" width="800" height="600" style="background-color:aliceblue"></canvas>
<br />
</div>
</div>
<div class="row">
<div class="panel-body">
<div class="panel-heading">Api Response</div>
<div class="panel-body" style="padding:20px;">
<pre id="txtCode"> </pre>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var preferedSize = { w: 800, h: 600};
//calcular la distancia entre 2 puntos
function getDistanceBetwen2Points(x1, y1, x2, y2) {
var a = x1 - x2
var b = y1 - y2
var c = Math.sqrt(a * a + b * b);
return c;
}
//evalua el angulo entre 2 puntos, esta funcion es util para obtener
//la orientaci'on de cada uno de los rostros y ubicar los accesories
//en la posici'on correcta
function calcularAngleBetwen2Points(pt1, pt2) {
var deltaY = pt2.y - pt1.y;
var deltaX = pt2.x - pt1.x;
var angle = Math.atan2(deltaY, deltaX);
return angle;
}
//dibujar un punto
function drawPoint(x, y, ctx) {
ctx.beginPath(); ctx.arc(x, y, 2, 0, 2 * Math.PI, true); ctx.fill();
}
function drawLine(x1, y1, x2, y2, ctx) {
ctx.strokeStyle = '#DF0174';
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawPolygon(poly, ctx) {
ctx.fillStyle = '#DF0174';
ctx.beginPath();
ctx.moveTo(poly[0], poly[1]);
for (var item = 2 ; item < poly.length - 1 ; item += 2) {
ctx.lineTo(poly[item], poly[item + 1])
}
ctx.closePath();
ctx.globalAlpha = 0.8;
ctx.fill();
}
//encierra con un rectangulo cada rostro detectado
function drawFace(face) {
var rec = face.faceRectangle;
ctx.fillStyle = '#DF0174';
ctx.globalAlpha = 0.3;
ctx.fillRect(rec.left, rec.top, rec.width, rec.height);
ctx.globalAlpha = 1;
drawPoint(rec.left, rec.top, ctx);
drawPoint(rec.left + rec.width, rec.top, ctx);
drawPoint(rec.left, rec.top + rec.height, ctx);
drawPoint(rec.left + rec.width, rec.top + rec.height, ctx);
ctx.strokeStyle = 'red';
ctx.fillStyle = '#DF0174';
ctx.font = "20px Arial";
ctx.stroke();
}
//este me'todo obtiene la posici'on de cada rostro y algunos puntos de interes
//y sobrepone sobre cada uno (en la imagen), las gafas, el cigarro y la gorra, aprovechando
//las bondades de html5 (se puede mejorar)
function drawFun(face) {
var faceRectangle = face.faceRectangle;
var faceLandmarks = face.faceLandmarks;
//ctx.fillStyle = '#DF0174';
//drawPoint(faceLandmarks.pupilLeft.x, faceLandmarks.pupilLeft.y, ctx);
//drawPoint(faceLandmarks.pupilRight.x, faceLandmarks.pupilRight.y, ctx);
//drawPoint(faceLandmarks.eyebrowLeftOuter.x, faceLandmarks.eyebrowLeftOuter.y, ctx);
//drawPoint(faceLandmarks.eyebrowRightOuter.x, faceLandmarks.eyebrowRightOuter.y, ctx);
var pt1 = { x: faceLandmarks.eyebrowLeftOuter.x, y: faceLandmarks.eyebrowLeftOuter.y };
var pt2 = { x: faceLandmarks.eyebrowRightOuter.x, y: faceLandmarks.eyebrowRightOuter.y };
var d = getDistanceBetwen2Points(pt1.x, pt1.y, pt2.x, pt2.y);
var deltaY = pt2.y - pt1.y;
var deltaX = pt2.x - pt1.x;
var angle = Math.atan2(deltaY, deltaX);
//solo si la persona no tiene gafas
if (face.faceAttributes.glasses == "NoGlasses") {
var glasses = new Image();
glasses.src = "public/images/glasses_3.png";
glasses.onload = function () {
var aspectRatio = d / this.width;
ctx.save();
ctx.translate(pt1.x, pt1.y);
ctx.rotate(angle);
ctx.translate(-pt1.x, -pt1.y);
ctx.drawImage(this, pt1.x, pt1.y, this.width * aspectRatio, this.height * aspectRatio);
ctx.restore();
};
}
var gorra = new Image();
gorra.src = "public/images/gorra.png";
gorra.onload = function () {
var aspectRatio = (faceRectangle.width) / this.width;
ctx.save();
ctx.translate(pt1.x, pt1.y);
ctx.rotate(angle);
ctx.translate(-pt1.x, -pt1.y);
ctx.drawImage(this, faceRectangle.left, (faceRectangle.top - faceRectangle.height) + 10, this.width * aspectRatio, this.height * aspectRatio);
ctx.restore();
};
var cigarro = new Image();
cigarro.src = "public/images/cigarro.png";
cigarro.onload = function () {
var pt1 = { x: faceLandmarks.mouthLeft.x, y: faceLandmarks.mouthLeft.y };
var pt2 = { x: faceLandmarks.mouthRight.x, y: faceLandmarks.mouthRight.y };
var d = getDistanceBetwen2Points(pt1.x, pt1.y, pt2.x, pt2.y);
var aspectRatio = d / this.width;
ctx.drawImage(this, faceLandmarks.underLipTop.x - d, faceLandmarks.underLipTop.y - 5, d, this.height * aspectRatio);
};
var logo = new Image();
logo.src = "public/images/logo.png";
logo.onload = function () {
var aspectRatio = 200 / this.width;
ctx.drawImage(this, (canvas.width - (this.width * aspectRatio)) - 10, (canvas.height - (this.height * aspectRatio)) - 10, 200, this.height * aspectRatio);
};
}
function drawLandmarks(face) {
var faceLandmarks = face.faceLandmarks;
//draw eyebrows
drawLine(
faceLandmarks.eyebrowLeftOuter.x,
faceLandmarks.eyebrowLeftOuter.y,
faceLandmarks.eyebrowLeftInner.x,
faceLandmarks.eyebrowLeftInner.y
, ctx);
drawLine(
faceLandmarks.eyebrowRightOuter.x,
faceLandmarks.eyebrowRightOuter.y,
faceLandmarks.eyebrowRightInner.x,
faceLandmarks.eyebrowRightInner.y
, ctx);
//draw eyes
drawPolygon([
faceLandmarks.eyeLeftOuter.x,
faceLandmarks.eyeLeftOuter.y,
faceLandmarks.eyeLeftTop.x,
faceLandmarks.eyeLeftTop.y,
faceLandmarks.eyeLeftInner.x,
faceLandmarks.eyeLeftInner.y,
faceLandmarks.eyeLeftBottom.x,
faceLandmarks.eyeLeftBottom.y
], ctx);
drawPolygon([
faceLandmarks.eyeRightOuter.x,
faceLandmarks.eyeRightOuter.y,
faceLandmarks.eyeRightTop.x,
faceLandmarks.eyeRightTop.y,
faceLandmarks.eyeRightInner.x,
faceLandmarks.eyeRightInner.y,
faceLandmarks.eyeRightBottom.x,
faceLandmarks.eyeRightBottom.y
], ctx);
//draw mouth
drawPolygon([
faceLandmarks.mouthLeft.x,
faceLandmarks.mouthLeft.y,
faceLandmarks.upperLipTop.x,
faceLandmarks.upperLipTop.y,
faceLandmarks.mouthRight.x,
faceLandmarks.mouthRight.y,
faceLandmarks.underLipBottom.x,
faceLandmarks.underLipBottom.y
], ctx);
//draw Nose
drawPolygon([
faceLandmarks.noseRootLeft.x,
faceLandmarks.noseRootLeft.y,
faceLandmarks.noseLeftAlarTop.x,
faceLandmarks.noseLeftAlarTop.y,
faceLandmarks.noseLeftAlarOutTip.x,
faceLandmarks.noseLeftAlarOutTip.y,
faceLandmarks.noseTip.x,
faceLandmarks.noseTip.y,
faceLandmarks.noseRightAlarOutTip.x,
faceLandmarks.noseRightAlarOutTip.y,
faceLandmarks.noseRightAlarTop.x,
faceLandmarks.noseRightAlarTop.y,
faceLandmarks.noseRootRight.x,
faceLandmarks.noseRootRight.y
], ctx);
}
//la funcion draw se ejecuta cada vez que hagamos click sobre alguno de los botones
//desde la interfaz
function draw(apiResponse,action) {
var faces = JSON.parse(apiResponse);
$("#txtCode").empty().html(JSON.stringify(faces[0], null, ' '));
$.each(faces, function (index, face) {
switch(action){
case "faces": drawFace(face); break;
case "fun": drawFun(face); break;
case "landmarks": drawLandmarks(face); break;
}
});
}
/*toma el contenido del canvas, y lo envía en forma de imagen al server*/
function sendImageToServer(action) {
var dataURL = canvas.toDataURL("image/png");
var encodedImage = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
$.ajax({
url: '/detectfaces',
data: { image: encodedImage },
type: 'POST',
cache: false,
success: function (data) {
draw(data, action);
},
error: function (err) {
console.log(err);//JSON.parse(err.responseText).message);
}
});
}
$("button").click(function (e) { sendImageToServer($(this).attr("action")); });
var handleFileSelect = function (evt) {
//obtenemos la lista de archivos cargados
var files = evt.target.files;
//validamos que el usuario haya seleccionado almenos uno
if (files && files.length > 0) {
//Accedemos al archivo cargado
var blob = files[0];
//Validamos de que sea una imagen
if (blob.type.includes("image")) {
/*Obtenemos su extension*/
var ext = blob.type.split('/')[1];
//Leemos el contenido de la imagen
var reader = new FileReader();
reader.readAsBinaryString(blob);
reader.onload = function (ev) {
var binaryString = ev.target.result;
var base64String = btoa(binaryString);
//document.getElementById("base64textarea").value = btoa(binaryString);
//visualizamos la imagen
var image = new Image();
image.onload = function () {
//obtenemos las dimensiones de la imagen
var w = this.width;
var h = this.height;
var aspecRatio = preferedSize.w / w;
canvas.width = w * aspecRatio;
canvas.height = h * aspecRatio;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0, w * aspecRatio, h * aspecRatio);
};
image.src = "data:"+blob.type+";base64,"+base64String;
};
}
}
};
//chequeamos que el browser se compatible con el API de lectura de archivos
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('file').addEventListener('change', handleFileSelect, false);
} else {
alert('The File APIs are not fully supported in this browser.');
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Hasta la próxima 🙂

Microsoft Cognitive Services Notes: Emotion API (Node.js)

El set de servicios de cognitive services de Microsoft, proyecto conocido como «Project Oxford» hasta el pasado build (evento en donde se realizo su lanzamiento oficial), es una colección de APIS gratuitas que nos permite construir aplicaciones inteligentes,con solo unas cuantas lineas de código, sobre cualquier plataforma(python, Android,iOs,C#, java etc), para cualquier tipo de dispositivo.  Tal como lo menciono Harry Shum, Vicepresidente ejecutivo de Microsoft Research «Give your apps a human side»; Estas APIS estan agrupadas en 5 areas principales: Computer Vision, Speech Recognition,Natural language, Knowledge y Search, durante su intervención en el build, Harry menciono  algunas showcase apps, que vale la pena mencionarlas:

How-Old.net: Es una aplicación que a partir de una fotografia,usando el  API de face recognition, incluida dentro de la suite de servicios de cognitive services, es capaz de predecir la edad de la persona.

TwinsOrNot.net: Esta aplicación, al igual que el anterior, se apoya en el API de face recognition y la de Bing, para determinar el porcentaje de parecido entre dos personas. si llega al 100% eso quiere decir que has encontrado a tu gemelo!.

Es realmente fascinante lo que podemos llegar  a hacer, si integramos en nuestros desarrollos este tipo de servicios, A continuación le dejo un ejemplo de ello, presentado por el Microsoft CEO Satya Nadella,  durante el keynote :

En este primer post introductivo, les enseñaré como consumir el api de reconocimiento de emociones usando Node.js.

El API de reconocimiento de emociones, recibe como entrada una imagen e identifica dentro de la misma las caras de las personas y sus emociones, actualmente este servicio que se encuentra en beta, es capaza de detectar emociones de alegría, tristeza, sorpresa, ira, miedo, desprecio, disgusto o neutral; Al momento de usar el API, debemos de considerar lo siguiente: Los formatos de imagen soportados son: JPEG, PNG, GIF, BMP, el tamaño de la imagen no debe exceder los 4mb, el tamaño de las caras debe estar entre 36×36 hasta 4096×4096 pixeles para poder ser detectadas. Para cada imagen, el número máximo de caras detectadas es 64. Si no se detecta ninguna cara, el servicio devolverá una matriz vacía. El desprecio y disgusto son emociones experimentales.

Para Empezar debemos ingresar al sitio de Microsoft Cognitive services, registrarnos y posteriormente iniciar sesión:

2016-04-11_16-10-06

  • El siguiente paso, consiste en obtener nuestra API Key:

2016-04-13_23-02-28

2016-04-16_18-31-07

A continuación, abrimos visual studio y procedemos entonces a crear nuestro proyecto, desde el menu File/New/New Project:

2016-04-17_0-42-28

Luego, agregamos nuestro archivo de configuración:

2016-04-17_0-45-43

A nuestro archivo de configuración adicionamos dos variables EMOTION_API_KEY, EMOTION_API_ENDPOINT:

config.json:

{
"EMOTION_API_KEY": "<API>",
"EMOTION_API_ENDPOINT": "https://api.projectoxford.ai/emotion/v1.0/recognize"
}
view raw config.json hosted with ❤ by GitHub

Así debe de quedar nuestro archivo server.js

server.js (server)

//1. cargamos nuestras dependencias
var Hapi = require("hapi");
var Path = require('path');
var Util = require("util");
var Fs = require('fs');
var Http = require('http');
var Request = require('request');
//2. Leemos nuestro archivo de configuración
var config = {};
Fs.readFile('./config.json', 'utf8', function (err, data) {
config = JSON.parse(data.toString('utf8').replace(/^\uFEFF/, '')); console.log(config);
});
//3. Instanciamos nuestro objeto server, el cual se encargará de atender y administrar todas las conexiones entrantes.
var server = new Hapi.Server();
//4. Inicializamos los modulos(plugins hapi)
server.register(require('inert'), function (err) {
if (err) {
console.error('Failed to load plugin:', err);
}
});
//5. especificamos el puerto por el cual, nuestro objeto server atenderá conexiones
server.connection({ port : 3000 });
//6. Definimos las rutas de nuestra app
server.route({
path: "/" , method: "GET", handler: {
file: Path.join(__dirname, 'src/views') + "/index.html"
}
});
//7.Contenido estatico de nuestro app (.css, .js, images etc)
server.route({
path: "/public/{path*}", method: "GET", handler: {
directory: { path: Path.join(__dirname, 'public'), listing: true }
}
});
/*
* 8. esta función se encarga de recibir la imagen enviada por el usuario desde la pagina index.html(front-end),
* e invokar el api de reconocimiento de expresiones de cognitive services
*/
server.route({
path: '/upload',
method: 'POST',
config: {
payload: {
//restricciones de archivo
output: 'stream',
maxBytes: 1048576 * 10, /*10MB*/
parse: true,
allow: 'multipart/form-data'
}
}, handler: function (request, reply) {
var data = request.payload;
if (data.file) {
var fileName = Path.basename(data.file.hapi.filename);//obtenemos el nombre de la imagen
var src = Path.join(__dirname, Util.format('public/upload/%s', fileName)); //definimos la ruta en donde quedará guardada la imagen en nuestro server
//copiamos la imagen en nuestro servidor
var stream = Fs.createWriteStream(src);
data.file.pipe(stream);//
//si esta operación se realiza con exito
data.file.on('end', function (err) {
if (err) reply(err);
//invocamos el Api de reconocimiento de expresiones de Microsoft cognitive services
var req = Request(
{
url: config.EMOTION_API_ENDPOINT,//url de la api
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',//formato de envío de la imagen al api
'Ocp-Apim-Subscription-Key': config.EMOTION_API_KEY,//suscription API KEY
}
}, function (error, response, body) {
if (error) {
reply(error); //en caso de que se algo salga mal, retornamos al cliente dicho error
} else {
// si todo sale bien, devolvemos al cliente la respuesta del API
reply({ 'uri' : Util.format('/public/upload/%s', fileName), 'info': body }).code(200);
}
});
Fs.createReadStream(src).pipe(req);//enviamos la imagen como un stream al api
});
}
}
});
//ejecutamos nuestro server
server.start(function (err) {
if (err) { throw err; } console.log('Server running at:', server.info.uri);
});
view raw server.js hosted with ❤ by GitHub

Creamos dos archivos mas en nuestro proyecto index.html(en la raíz) y app.js (public/js):

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Emotion API Node js</title>
</head>
<body>
<form id="frmUploadImage">
<input type="file" name="file" id="inputImage">
<button type="submit" class="btn btn-default">Cargar foto</button>
</form>
<canvas id="canvasLoadImage"></canvas>
<script src="/public/vendor/jquery/dist/jquery.js"></script>
<script src="/public/js/app.js"></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

app.js (client)

$(document).ready(function () {
$form = $("#frmUploadImage"), $inputFile = $('#inputImage');
$form.on("submit", function (e) {
e.preventDefault();
if ($inputFile.get(0).files.length === 0) {
alert("No ha seleccionado ninguna imagen");
return false;
}
var formData = new FormData($(this)[0]);
//enviamos la imagen cargada por el usuario al servidor
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
previewImage(data);//visualizamos la imagen si todo sale bien
}
});
});
function drawPoint(x, y, ctx) {
ctx.beginPath(); ctx.arc(x, y, 2, 0, 2 * Math.PI, true); ctx.fill();
}
function previewImage(data) {
var c = document.getElementById("canvasLoadImage");
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function () {
//obtenemos las dimensiones de la imagen
c.width = this.width;
c.height = this.height;
//dibujamos la imagen en nuestro canvas
ctx.drawImage(this, 0, 0);
//lista de caras detectadas dentro de la imagen
var faces = JSON.parse(data.info);
$.each(faces, function (index, face) {
//obtenemos la posisción de cada cara dentro de nuestra imagen
var rec = face.faceRectangle;
ctx.fillStyle = '#DF0174';
ctx.globalAlpha = 0.1;
ctx.fillRect(rec.left, rec.top, rec.width, rec.height);
ctx.globalAlpha = 1;
drawPoint(rec.left, rec.top, ctx);
drawPoint(rec.left + rec.width, rec.top, ctx);
drawPoint(rec.left, rec.top + rec.height, ctx);
drawPoint(rec.left + rec.width, rec.top + rec.height, ctx);
ctx.strokeStyle = 'red';
ctx.restore();
ctx.fillStyle = '#DF0174';
ctx.font = "20px Arial";
ctx.stroke();
var max, maxScore;
$.each(face.scores, function (key, value) {
if (!max || parseFloat(value) > parseFloat(max)) {
max = parseFloat(value); maxScore = key;
}
});
ctx.fillText(maxScore, rec.left + (rec.width / 2), rec.top + (rec.height / 2));
});
};
img.src = data.uri;//url de la imagen en el servidor
}
});
view raw app.js hosted with ❤ by GitHub

Y finalmente la demo funcionando!.

El codigo fuente lo pueden descargar de: Emotion-API-Microsoft-Cognitive-Services-Nodejs

Espero les sea de utilidad, hasta la proxima ocasión

Gracias!