5 marzo, 2024
carloscorredor34 IA

Usar Red neuronal con Tensorflow.js

Modelo de Cat and Dogs javascript

Introduccion

JavaScript es un lenguaje de programación ampliamente utilizado en el desarrollo web para agregar interactividad y dinamismo a las páginas. Tradicionalmente, se ha utilizado para manipular el DOM (Modelo de Objetos del Documento) y realizar operaciones del lado del cliente, como validación de formularios, animaciones y manipulación de elementos HTML y CSS.

Sin embargo, con el advenimiento de bibliotecas y frameworks modernos, como TensorFlow.js, JavaScript ha encontrado un nuevo campo de aplicación en el ámbito del aprendizaje automático y la inteligencia artificial.

TensorFlow.js es una biblioteca de JavaScript de código abierto desarrollada por Google que permite la construcción y entrenamiento de modelos de aprendizaje automático directamente en el navegador o en Node.js. Esto significa que los desarrolladores pueden implementar modelos de aprendizaje automático en el frontend de sus aplicaciones web utilizando JavaScript, sin necesidad de utilizar servidores adicionales o depender completamente del backend.

Problematica a resolver

Para afinar nuestros conocimientos en tensorflow, crearemos un modelo tipico el cual se basara en determinar si el contenido de una imagen es la de un perro o un gato,  donde para ello  implementaremos un modelo CNN.

A continuacion adjuntare imagen de la arquitectura creada.

Claro, aquí tienes una lista con el tipo de cada capa en la red neuronal convolucional (CNN) que has definido:

1. Conv2D Capa convolucional que aplica convoluciones en la imagen de entrada para extraer características.

2. MaxPool2D: Capa de agrupación máxima que reduce la dimensionalidad de las características seleccionando el valor máximo en una ventana.

3. LeakyReLU: Función de activación que introduce una pequeña pendiente para valores negativos, ayudando a evitar el problema de neuronas muertas.

4. Flatten: Capa que transforma los datos de salida en un vector unidimensional, generalmente utilizado antes de la capa densa.

5. Dense: Capa densa o completamente conectada, donde todas las neuronas de la capa anterior están conectadas a todas las neuronas de la capa siguiente.

Descripcion de creacion de model.json

Ahora crearemos  el codigo usando tensroflow js para que desde nuestor modelo guardado como cat_dog.h5 se transforme en un  model.json y un archivo .bin que es donde se guardan las especificaciones de tensroflow. 

Ahora que ya tenemos los archivos necesarios para la creacion de nuesto modelo procederemos a exponer el como diseñamos el codigo que testeaste en la primera fase; expondermoes el codigo html y el js necesario para le ejecucion y prediccion del modelo 

Creacion del HTML y js

				
					    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

HTML

Como parte importante necesitaremos importar tensorflow en nuestra pagina web; haciendo uso del script en la parte superior importaras  todo lo necesario para cargar, crear  y testar tu modelo

				
					    // Carga del modelo
    const model = await tf.loadLayersModel('Models/model.json');

JS

En el javascript tenemos la funcion para cargar nuestor modelo de .json es importante mencionar que donde guardemos nuestro modelo hemos de guardar el archivo .bin  que tambien se crea, esto dado que si no lo hacemos la lectura del modelo fallara

				
					
    reader.onload = function(event) {
        const img = new Image();
        img.onload = async function() {
            // Escalamiento de la imagen a 150x150
            const canvas = document.createElement('canvas');
            canvas.width = 150;
            canvas.height = 150;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, 150, 150);
            const imageData = ctx.getImageData(0, 0, 150, 150);

            // Conversión de la imagen a un tensor
            const tensor = tf.browser.fromPixels(imageData).expandDims();

En este javascript,  redimencionamos la imagen en un formato de 150 x 150 ; esto dado que en la seccion donde creamos el modelo (vease la imagen de la arquitectura) especificamos la entrada para imagenes de 150 x 150 con tres canales de color.

				
					 // Realización de la predicción
            const prediction = model.predict(tensor);

            // procesamiento de los datos
            var values = await prediction.data();

            
            var perro = values[0]
            var gato = values[1]
            if(perro > gato)
            {
                predictionResult.textContent = "Es un perro, pocentaje: "+perro.toFixed(2)+"%";
            }
            else
            {
                predictionResult.textContent = "Es un Gato, pocentaje: "+gato.toFixed(2)+"%";
            }

Por ultimo, hacemos que el modelo prediga la imagen creada y procesamos el resultado, de tal manera en que lo unico que nos quedaria hacer es usar el medo document  para insertar el texto donde queremos que se vea

Ver codigo en github
Ver código en Colab
Leer post en ingles