Introducción

Supongamos que ha hemos hecho un modelo Deep Learning para poder clasificar imágenes, por ejemplo, perros, gatos, …. Este modelo tiene buenos resultados en un conjunto de test o con algunas imágenes que haya probado, pero nos gustaría que otras personas usen nuestro modelo y mejor si lo usan desde una aplicación web. Es sobre esto que va a tratar este tutorial.

Vamos a aprender cómo crear una aplicación web usando la librería tensorflow.js y el modelo MobiileNet. Solo es necesario conocer lo básico en HTML y JavaScript. Luego de seguir este tutorial, podrá tener una aplicación similar a la siguiente:

Tensorflow.js

Tensorflow.js es una librería desarrollada por Google en donde se pueden generar modelos de Machine Learning, específicamente Deep Learning, desde JavaScript.

Ventajas de usar tensorflow.js:

• Importar un modelo existente previamente entrenado y usarlo en su navegador. El modelo existente puede ser creado con Tensorflow o Keras. Para esto tiene que instalar la librería tensorflowjs y ejecutar el siguiente script (para más información puede ir al siguiente enlace):

• Volver a entrenar un modelo importado. Puede recopilar más datos en el navegador y usando transferencia de aprendizaje puede seguir entrenando el modelo.

• Entrenar en el navegador. Puede usar tensorflow.js para definir, entrenar y ejecutar modelos en el navegador. El script es muy parecido escribir en Keras.

Para más información, puede ir a la web principal:  https://www.tensorflow.org/js

Para este tutorial vamos a usar un modelo entrenado con imágenes ImageNet, llamada MobileNet. MobileNet es una arquitectura de Redes Neuronales Convolucionales (CNN) el cual fue creada para poder ser ejecutada en dispositivos móviles [1. Para más información sobre esta arquitectura, puede ir a este enlace y a este enlace.]. Como sabrán, una Red Neuronal Convolucional es un algoritmo Deep Learning usada para aprender modelos de Machine Learning relacionados con imágenes, como por ejemplo: clasificar imágenes, detectar objetos en una imagen o vídeo,…[2. Lo que hace este tipo de red es aprender una serie de filtros, los cuales tratarán de extraer características relevantes como, por ejemplo, bordes, colores, …. Para conocer más sobre redes neuronales convolucionales puede ir a este enlace o a este enlace.]

2. Aplicación web

¡Ahora vamos a lo interesante! Vamos a hacer nuestra aplicación web para reconocer imágenes. Para esto solo necesitamos un editor de texto, puede usar notepad++, sublime o un simple block de notas (con la que se sienta más cómodo)

HTML

Empezaremos con HTML, este se encargará de estructurar la página web. El fichero lo llamaremos Index.html:

• Para poder usar la librería tensorflow.js necesitamos llamarla desde HTML de la siguiente manera:

• Vamos a mostrar las probabilidades y decisiones de las predicciones del modelo MobileNet:

La salida es la siguiente:

• Vamos a agregar un poco de texto en nuestra aplicación web:

La salida es la siguiente:

• Ahora agregamos una sección para poder subir imágenes en nuestra aplicación web:

• • El modelo MobileNet ha sido entrenado con imágenes de tamaño 224 * 224, por lo que vamos a transformar las imágenes.

  • La función de JavaScript que usaremos para cargar una imagen y mostrarla, se llama showFiles(event):

JavaScript

JavaScript, se encargará de subir imágenes, llamar a la función de tensorflow.js y realizar las predicciones usando el modelo MobileNet. El fichero lo llamaremos index.js:

• Primero crearemos una función para poder subir imágenes y mostrarlas en el navegador:

• El siguiente script graficará las probabilidades de las predicciones en un gráfico de barras. Haremos uso de la librería Google:

• Ahora vamos a cargar el modelo preentrenado MobileNet[3. Si quiere probar con su propio modelo, tendrá que actualizar esta parte: https://www.tensorflow.org/js/tutorials/conversion/import_keras]:

• Por último, vamos a predecir la imagen subida:

Poniendo todos los códigos juntos:

HTML (fichero index.html):

JavaScript (fichero index.js):

Y eso es todo, en pocas líneas ha creado su aplicación web que pueda reconocer imágenes.

En el siguiente enlace se encuentra el mismo código.

Ahora vamos a probar la aplicación web:

Espero que este tutorial le haya gustado.

La versión en inglés se encuentra en: https://medium.com/analytics-vidhya/create-your-web-application-to-recognize-images-71cf4f242d7

Hágame saber en sus comentarios que tal le ha parecido.