¿Cómo implementar un modelo de aprendizaje automático usando Node.js?

En este artículo, aprenderemos cómo implementar un modelo de aprendizaje automático utilizando NodeJS . Al hacerlo, crearemos un simple reconocedor de dígitos escrito a mano usando NodeJS y tensorflow.js .

Tensorflow.js es una biblioteca ML para JavaScript. Ayuda a implementar modelos de aprendizaje automático directamente en node.js o en un navegador web.

Entrenamiento del modelo: Para entrenar el modelo vamos a utilizar Google Colab . Es una plataforma donde podemos ejecutar todo nuestro código python y viene cargada con la mayoría de las bibliotecas de aprendizaje automático que se utilizan.

A continuación se muestra el código para el modelo final que vamos a crear.

# Importing Libraries
from tensorflow.keras.datasets import mnist
import matplotlib.pyplot as plt
from keras.utils import np_utils
from keras import Sequential
from keras.layers import Dense
import tensorflowjs as tfjs
  
# Loading data
(X_train, y_train), (X_test, y_test) = mnist.load_data()
print ("X_train.shape: {}".format(X_train.shape))
print ("y_train.shape: {}".format(y_train.shape))
print ("X_test.shape: {}".format(X_test.shape))
print ("y_test.shape: {}".format(y_test.shape))
  
# Visualizing Data
plt.subplot(161)
plt.imshow(X_train[3], cmap=plt.get_cmap('gray'))
plt.subplot(162)
plt.imshow(X_train[5], cmap=plt.get_cmap('gray'))
plt.subplot(163)
plt.imshow(X_train[7], cmap=plt.get_cmap('gray'))
plt.subplot(164)
plt.imshow(X_train[2], cmap=plt.get_cmap('gray'))
plt.subplot(165)
plt.imshow(X_train[0], cmap=plt.get_cmap('gray'))
plt.subplot(166)
plt.imshow(X_train[13], cmap=plt.get_cmap('gray'))
  
plt.show()
  
# Normalize Inputs from 0–255 to 0–1
X_train = X_train / 255
X_test = X_test / 255
# One-Hot Encode outputs
y_train = np_utils.to_categorical(y_train)
y_test = np_utils.to_categorical(y_test)
num_classes = 10
  
# Training model
x_train_simple = X_train.reshape(60000, 28 * 28).astype('float32')
x_test_simple = X_test.reshape(10000, 28 * 28).astype('float32')
model = Sequential()
model.add(Dense(28 * 28, input_dim=28 * 28, activation='relu'))
model.add(Dense(num_classes, activation='softmax'))
model.compile(loss='categorical_crossentropy', 
        optimizer='adam', metrics=['accuracy'])
model.fit(x_train_simple, y_train, 
        validation_data=(x_test_simple, y_test))

Paso 1: datos de entrenamiento

Para entrenar el modelo, usaremos la base de datos MNIST . Esta es una gran base de datos de dígitos escritos a mano que está disponible de forma gratuita. En este conjunto de datos hay 60.000 imágenes, todas ellas tienen un tamaño de 28 x 28 píxeles en escala de grises, con valores de píxel de 0 a 255.

Paso 2: Preprocesamiento de datos 

Realizamos los siguientes pasos para procesar nuestros datos:

1. Normalizar entradas: Las entradas están en el rango 0-255. Necesitamos escalarlos a 0-1.
2. Una codificación en caliente de las salidas

Paso 3: Aprendizaje automático

Para entrenar el modelo, usamos una red neuronal simple con una capa oculta que es lo suficientemente buena como para brindar una precisión del 98%.

Paso 4: Convertir el modelo usando tensorflow.js

Primero, guarde el modelo usando el siguiente comando:

model.save(“model.h5”)

Luego instala tensorflow.js y convierte el modelo usando el siguiente comando:

!pip install tensorflowjs
!tensorflowjs_converter --input_format keras 
    ‘/content/model.h5’ ‘/content/mnist-model’

Después de ejecutar el comando anterior, actualice los archivos. Su contenido debe verse como el siguiente.

Nota: Descargue la carpeta mnist-model que usaremos más adelante.

Creación de la aplicación Express e instalación del módulo:

Paso 1: Cree package.json usando el siguiente comando:

npm init

 Paso 2: ahora instala las dependencias siguiendo el comando. Usaremos express para servidor y ejs como motores de plantillas.

npm install express ejs

Estructura del proyecto: ahora asegúrese de tener la siguiente estructura de archivos. Copie los archivos que descargamos de Colab en la carpeta del modelo.

Ahora escriba el siguiente código en su archivo index.js .

// Requiring module
const express = require("express");
const app = express();
const path = require("path")
  
// Set public as static directory
app.use(express.static('public'));
  
app.set('views', path.join(__dirname, '/views'))
  
// Use ejs as template engine
app.set('view engine', 'ejs');
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
  
// Render main template
app.get('/',(req,res)=>{
    res.render('main')
})
  
// Server setup
app.listen(3000, () => {
  console.log("The server started running on port 3000") 
});

<!DOCTYPE html>
<html lang="en">
  
<head>
    <script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.5.2/dist/tf.min.js">
    </script>
    <link rel="stylesheet" href="style.css" />
</head>
  
<body>
    <h1>Digit Recognition WebApp</h1>
  
    <div id="paint">
        <canvas id="myCanvas"></canvas>
    </div>
  
    <div id="predicted">
        Recognized digit
        <div id="number"></div>
        <button id="clear">Clear</button>
    </div>
      
    <script src="script.js"></script>
</body>
  
</html>

body {
    touch-action: none; 
    font-family: "Roboto";
}
h1 {
    margin: 50px;
    font-size: 70px;
    text-align: center;
}
#paint {
    border:3px solid red;
    margin: auto;
}
#predicted { 
    font-size: 60px;
    margin-top: 60px;
    text-align: center;
}
#number {
    border: 3px solid black;
    margin: auto;
    margin-top: 30px;
    text-align: center;
    vertical-align: middle;
}
#clear {
    margin: auto;
    margin-top: 70px;
    padding: 30px;
    text-align: center;
}

Escribiendo el Script: Usando el lienzo de HTML5 definimos los eventos del mouse. Luego capturamos la imagen con el mouse hacia arriba y la escalamos a 28 × 28 píxeles, para que coincida con nuestro modelo, y luego la pasamos a nuestra función de predicción.

canvas.addEventListener('mousedown', function (e) {
    context.moveTo(mouse.x, mouse.y);
    context.beginPath();
    canvas.addEventListener('mousemove', onPaint, false);
}, false); var onPaint = function () {
    context.lineTo(mouse.x, mouse.y);
    context.stroke();
};
  
canvas.addEventListener('mouseup', function () {
    $('#number').html('<img id="spinner" src="spinner.gif"/>');
    canvas.removeEventListener('mousemove', onPaint, false);
    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, 28, 28);
        data = context.getImageData(0, 0, 28, 28).data;
        var input = [];
        for (var i = 0; i < data.length; i += 4) {
            input.push(data[i + 2] / 255);
        }
        predict(input);
    };
    img.src = canvas.toDataURL('image/png');
}, false);
  
// Setting up tfjs with the model we downloaded
tf.loadLayersModel('model / model.json')
    .then(function (model) {
        window.model = model;
    });
  
// Predict function
var predict = function (input) {
    if (window.model) {
        window.model.predict([tf.tensor(input)
            .reshape([1, 28, 28, 1])])
            .array().then(function (scores) {
                scores = scores[0];
                predicted = scores
                    .indexOf(Math.max(...scores));
                $('#number').html(predicted);
            });
    } else {
  
        // The model takes a bit to load, 
        // if we are too fast, wait
        setTimeout(function () { predict(input) }, 50);
    }
}

Paso para ejecutar la aplicación: Ejecute el archivo index.js usando el siguiente comando.

node index.js

Salida: Abra el navegador y vaya a http://localhost:3000 , veremos la siguiente salida.