Clasificación de imágenes usando Javascript y ML5.js (Tensorflow)

Publicada el por

Clasificación de imágenes usando Javascript y ML5.JS (Tensorflow)

Esta es la primera entrada del año y me gustaría comenzar con un pequeño tutorial sobre inteligencia artificial mostrando algunas cosas que podemos hacer con ella.

Con este y otros pequeños tutoriales que iré creando, me gustaría acercar de una manera sencilla la inteligencia artificial a todos, tanto para nuestros proyectos personales como profesionales.

Pequeña introducción y algunos conceptos

A continuación voy añadir algunos conceptos que entiendo que al menos debemos conocer.

  • TensorFlow: Es una biblioteca de aprendizaje automático desarrollada por Google para crear y entrenar redes neuronales.
  • ml5.js: Es una librería que nos proporciona acceso a los algoritmos y modelos de aprendizaje automático usando Javascript y como única dependencia tensorflow.js.
  • Red neuronal: Es un modelo inspirado en el funcionamiento de un cerebro humano y esta formada por neuronas artificiales (nodos) que están conectadas y transmiten señales entre sí.

Empezando a programar

En este ejemplo vamos a intentar reconocer el contenido de una imagen y así poder realizar una clasificación del mismo.

Para ello la librería ml5.js nos ofrece multitud de métodos que nos facilitan el trabajo, ya que esta librería es una capa superior que envuelve a la librería tensorflow.js.

La clasificación la vamos a realizar usando un modelo que esta previamente entrenado usando una base de datos de unos 15 millones de imágenes (ImageNet) y que ml5.js accede a este modelo desde la nube.

A continuación usaremos el código de ejemplo que tiene la propia página para comprobar lo sencillo que es realizar la clasificación.

<img src="imagen.jpg" id="image />

const classifier = ml5.imageClassifier('MobileNet', modelLoaded);

function modelLoaded() {
  console.log('Model Loaded!');
}

classifier.classify(document.getElementById('image'), (err, results) => {
  console.log(results);
});

Desde este enlace podemos acceder a toda la documentación de la librería.

Entendiendo el código

Lo primero que necesitamos es cargar la imagen que vamos a clasificar, y para ello usaremos el tag <img>.

<img src="imagen.jpg" id="image />

Ahora vamos a inicializar el clasificador y añadiremos un callback, el cual nos indicara cuando se ha cargado el modelo.

También debemos indicar que modelo queremos usar para realizar la clasificación: MobileNet, Darknet, Darknet-tiny, DoodleNet o nuestro propio modelo.

const classifier = ml5.imageClassifier('MobileNet', modelLoaded); 
function modelLoaded() { 
    console.log('Model Loaded!');
}

Para finalizar vamos a realizar la clasificación usando uno de los métodos que nos ofrece ml5.js.

classifier.classify(document.getElementById('image'), (err, results) => { 
   console.log(results);
});

Creando una aplicación mas elaborada

Para finalizar la entrada os dejo el enlace al repositorio en Github y una pequeña aplicación que he creado usando ml5.js, Javascript y Bulma. que podéis usar desde aquí.

App ejemplo