Clasifica imágenes utilizando Aprendizaje de Máquina

Introducción

En este artículo aprenderemos cómo clasificar una imagen usando Machine Learning. Esto lo haremos con la ayuda de la librería ml5.js. Es un proyecto desarrollado por Google cuyo objetivo tiene hacer el aprendizaje de máquina más accesible. Esta librería esta creada sobre TensorFlow.js, la cual es una librería de bajo invel para realizar operaciones relacionadas a redes neuronales y otros conceptos del Aprendizaje de Máquina.

Requisitos

Para llevar a cabo este tutorial necesitamos:

Un editor de texto. (Se recomienda usar vscode).
Tener instalado NodeJs con NPM.
Un navegador web como Firefox, Chrome o Edge Chromium.

Creación de archivos

Creamos una carpeta con el nombre de nuestra preferencia, dentro de esta carpeta colocamos los siguientes archivos:

images/

index.html

index.js

En la carpeta de images/, podemos colocar imágenes varias que queramos utilizar, como parte del artículo les colocaré 3 imágenes que podemos usar en nuestras pruebas. Estas imágenes son de uso libre.

Imágenes:

Bola de futbol

Guacamayo

Perro

En el archivo index.html colocamos lo siguiente:

html

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Image classification using MobileNet and p5.js</title>
    <!-- TailwindCss para agilizar la colocación de estilos -->
    <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <!-- Librería ml5.js -->
    <script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
  </head>

  <body>
    <div class="h-full">
      <div class="text-center">
        <h1 class="text-2xl pt-5 font-bold">
          Clasificación de imágenes usando MobileNet
        </h1>

        <div align="center">
          <img
            id="image"
            class="h-64 w-36 object-cover shadow rounded-lg my-3"
          />
        </div>

        <div class="my-3">
          <div class="text-lg font-semibold" id="label"></div>
          <div class="text-lg font-semibold" id="confidence"></div>
        </div>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>

El código html contiene en el <head> las referencias a TailwindCss para las clases de estilo y lo más importante, que es la librería ml5.js que nos servirá para analizar una imagen y obtener una categorización de esta.

Luego en el archivo index.js colocamos lo siguiente (explicación del código en los comentarios del archivo):

javascript

// Obtenemos la referencia de la etiqueta de imagen en el HTML.
const img = document.getElementById('image');
// Declaramos una variable con la ruta de la imagen que queremos utilizar.
// En este ejemplo coloco la imagen ball.jpg, sin embargo links de imágenes en otros sitios
// tambien funcionaría.
const imgSource = '/images/ball.jpg';
// Le colocamos a la etiqueta de imagen un atributo src con el enlace de la imagen.
img.setAttribute('src', imgSource);

window.onload = async function () {
  // Cuando todo el contenido de la página carga ejecutamos el siguiente código:
  // usamos el método imageClassifier de ml5, seleccionando como modelo de datos a MobileNet.
  const classifier = await ml5.imageClassifier('MobileNet');

  // Obtenemos la referencia del div 'label' y 'confidence'
  const label = document.getElementById('label');
  const confidence = document.getElementById('confidence');

  // Ejecutamos el método classify al cual le pasamos la referencia del <img>
  const results = await classifier.classify(img);

  // Colocamos en consola los resultados obtenidos
  console.log(results);

  // En el texto del div#label colocamos la primera clasificación obtenida.
  label.innerHTML = `Detectado: ${results[0].label}`;

  // En el texto del div#confidence colocamos el porcentaje de confidencia con el que la
  // imagen fue clasificada.
  confidence.innerHTML = `Confidencia: ${(results[0].confidence * 100).toFixed(
    2
  )}%`;
};

MobileNet es una base de datos en línea alimentada por miles de imágenes.

Async y Await se utiliza para esperar código asíncrono. Conoce más en este post.

Ejecución del código

Instalamos un servidor ligero llamado serve. Abrimos la consola de comandos y colocamos:

shell

npm install -g serve

Luego, una vez se instala serve, en la carpeta del proyecto, abrimos la consola y colocamos:

shell

serve

Por defecto, esto crea un servidor sencillo que corre en http://localhost:5000

Al abrir esta url, se nos debe presentar la imagen que colocamos en imgSource y luego de un momento (ya que la carga de MobileNet puede demorar un poco), debemos ver la clasificación que se le da a esta imagen y con que porcentaje de confidencia (es decir, que tan segura es la estimación con respecto al contenido).

Como colocamos los resultados en la consola del navegador, en esta podremos ver todas las clasificaciones que recibe la imagen con un porcentaje de confidencia de 0 a 1 (es decir, de 0% a 100%).

Ml5 Soccer Ball

Podemos continuar cambiando el valor de imgSource y haciendo refresh en el sitio para ver las diferentes clasificaciones que reciben distintas imágenes. La base de datos MobileNet suele ser más efectiva en detectar objetos que personas o paisajes. Por lo que quizá verás clasificaciones imprecisas con ciertas imágenes.

Clasifica imágenes utilizando Aprendizaje de Máquina ​

Introducción ​

Requisitos ​

Creación de archivos ​

Ejecución del código ​

Clasifica imágenes utilizando Aprendizaje de Máquina

Introducción

Requisitos

Creación de archivos

Ejecución del código