GUÍA DE CAPACITACIÓN

E IMPLEMENTACIÓN DE
MODELOS DE MACHINE
LEARNING EN EL
NAVEGADOR Y
NODE.JS

TENSOR FLOW.JS

Integrantes:
-Manuel Eduardo Berna Vasquez
-Orlando Khael Jeri Alvarado
-Jackelin Nuñez Aguirre
Índice

1. Fuentes de consulta 3
2. Requisitos previos 3
3. Introducción 4
4. Implementar el modelo de clasificación de texto tóxico en Node.js 4
4.1. Tener previamente instalado el Node.js para poder ejecutar código
javascript, podemos descargarlo desde su página oficial https://nodejs.org/es 4
4.2. Abrimos la consola del Node.js y nos situamos en la ruta en donde vamos
a guardar nuestro proyecto, en este caso, será en D:\node. Para poder acceder
a esa ruta escribimos “D:” y luego “cd D:/node” 5
4.3. Creamos el archivo javascript con cualquier editor de texto en la ruta de
nuestro proyecto, en nuestro ejemplo está guardado en “D:/node” y pegamos el
siguiente código en el archivo 6
4.4. Ejecutamos el código en nuestro editor de texto o en la consola del
Node.js 7
5. Tensor Flow.js : Realiza predicciones a partir de datos en 2D 8
5.1.-Creamos una página HTML (index.html) https://deteccion-
villa.netlify.app/ 8
5.2.-Creación del formulario con un campo de texto en archivo html .9
5.3.- Creamos un título llamativo en el centro de la página con efectos
visuales, como una animación de parpadeo y sombra de texto. El título se
refiere a "Detección de Toxicidad de Texto" 9
5.4. Cuando el botón "Analizar" se hace clic, se invoca una función llamada
"classify()" que debería estar definida en un archivo JavaScript externo y se
encargará de mostrar resultados en el div "resultados" 10
5.5- Visualización: Aqui a podemos apreciar el interfaz de la pagina el cual,
nos muestra el modelo 10
5.6.Resultados 11
6. Subirlo a netlify ………………………………………………..12
1. Fuentes de consulta

TensorFlow.js (Modelos de aprendizaje automático)

Models | TensorFlow

Tensorflow.js - Modelos de aprendizaje automático

https://www.tensorflow.org/js/models?hl=es-419

Github (Repositorio online de códigos)

Github

Github - tfjs-models/toxicity/

https://github.com/tensorflow/tfjs-models/tree/master/toxicity

Netlify (Plataforma para automatizar proyectos webs)

Netlify

Netlify - with/nextjs/

https://www.netlify.com/

2. Requisitos previos

-Tener Node.js y un editor de texto instalado

-Conocimiento básico de JavaScript
-Conocimiento de PLN
-Aprendizaje automático
3. Introducción
Este trabajo se enfocará en el desarrollo de un Modelo de Tensor Flow.js para la detección
de toxicidad en textos. Explicaremos este modelo previamente entrenado que nos permitirá
agregar una visión artificial, procesamiento de lenguaje natural (PLN) y otras tareas de
Aprendizaje Automático comunes a nuestra aplicación web.

Definiciones:
-Node.js: Node.js es un entorno de ejecución de JavaScript del lado del servidor que permite
a los desarrolladores escribir código JavaScript para crear aplicaciones web y servidores.
-Procesamiento de Lenguaje Natural (PLN): Es una rama de la inteligencia artificial que se
enfoca en la interacción entre las computadoras y el lenguaje humano. El objetivo
principal del NLP es permitir que las computadoras comprendan, interpreten y generen
lenguaje humano de manera natural.
-Tensor Flow.js: Es una biblioteca de código abierto que permite la ejecución de modelos de
aprendizaje automático, incluyendo redes neuronales, en navegadores web y entornos
basados en JavaScript.

4. Implementar el modelo de clasificación de texto

tóxico en Node.js

4.1. Tener previamente instalado el Node.js para poder ejecutar

código JavaScript, podemos descargarlo desde su página oficial
https://nodejs.org/es
4.2. Abrimos la consola del Node.js y nos situamos en la ruta en
donde vamos a guardar nuestro proyecto, en este caso, será en D:\
node. Para poder acceder a esa ruta escribimos “D:” y luego “cd
D:/node”

Necesitaremos instalar los paquetes de TensorFlow.js y el Modelo de Toxicidad en la ruta

donde irá nuestro proyecto, para eso usaremos el siguiente comando “npm install
@tensorflow/tfjs @tensorflow-models/toxicity “
Nos ubicamos en la carpeta del proyecto y verificamos que se
ha descargado correctamente sí se encuentra la carpeta
llamada “node_modules”

4.3. Creamos el archivo JavaScript con cualquier editor de texto

en la ruta de nuestro proyecto, en nuestro ejemplo está guardado en
“D:/node” y pegamos el siguiente código en el archivo

// Importamos el módulo 'toxicity' de TensorFlow.js

const toxicity = require('@tensorflow-models/toxicity');

// Establecemos un umbral de confianza (0.9) para las clasificaciones

const threshold = 0.9;

// Cargamos el modelo de toxicidad con el umbral especificado

toxicity.load(threshold).then(async model => {
// Definimos la oración que queremos clasificar
const sentence = 'stupid';

// Clasificamos la oración utilizando el modelo cargado

model.classify(sentence).then(predictions => {
// Recorremos las predicciones
predictions.forEach(prediction => {
// Obtenemos la etiqueta de la clasificación
const label = prediction.label;
// Verificamos si la oración es tóxica (match=true) o no
(match=false)
const isToxic = prediction.results[0].match;
// Asignamos un emoji y texto según si es tóxica o no
const emoji = isToxic ? '😠 - NO' : '😠 - YES';
// Imprimimos el resultado en la consola
 console.log(`Texto: "${sentence}", Clasificación "${label}":
${emoji}`);
});
});
});

No olvidar que el archivo javascript debe estar en la ruta donde

descargamos los paquetes, en nuestro caso “D:/node”

4.4. Ejecutamos el código en nuestro editor de texto o en la

consola del Node.js

Si queremos ejecutar en la consola del Node.js, seguiremos estos pasos

a) Abrir la consola del Node.js
b) Situarnos en la ruta del proyecto
c)Escribir “node javascript.js” (el nombre de nuestro archivo js)
5. Tensor Flow.js: Realiza predicciones a partir de
datos en 2D
A continuación, se entrenará un modelo para realizar predicciones a partir de datos
numéricos que describen un conjunto de automóviles.

5.1.-Creamos una página HTML (index.html) https://deteccion-

villa.netlify.app/
 5.2.-Creación del formulario con un campo de texto en archivo
html

5.3.- Creamos un título llamativo en el centro de la página con

efectos visuales, como una animación de parpadeo y sombra de
texto. El título se refiere a "Detección de Toxicidad de Texto"
 5.4. Cuando el botón "Analizar" se hace clic, se invoca una
función llamada "classify()" que debería estar definida en un
archivo JavaScript externo y se encargará de mostrar resultados en
el div "resultados"

5.5- Visualización: Aquí a podemos apreciar el interfaz de la página

el cual, nos muestra el modelo.
5.6. Resultados

–
6- Después que el proyecto funciona , entramos a la página netlify, nos registramos

6.1 Dentro de sites , subimos el proyecto de nuestra carpeta dentro de la ventana

6.2- En site overview podemos visualizar los proyectos

 Aquí podemos cambiarle de nombre .dandole click

6.3- Regresamos a sites podemos visualizar nuestro proyecto

Dándole click te genera https://deteccion-villa.netlify.app/