Alejandro Santamaria
Diseñar un modelo de Regresión Lineal
Demo: https://alex112.gitlab.io/regresi-n-lineal-con-tensorflow-js
Repositorio: https://gitlab.com/alex112/regresi-n-lineal-con-tensorflow-js.git
¿Cómo entrenar un modelo de regresión lineal en TensorFlow JS?
El entrenamiento de un modelo de regresión lineal usando TensorFlow JS es un proceso fascinante que nos ayuda a optimizar y calcular datos en base a patrones específicos. Al dominar este proceso, podrás implementar soluciones robustas utilizando JavaScript para manejar grandes cantidades de datos y hacer predicciones precisas. En este artículo, desglosaremos los pasos esenciales para entrenar tu propio modelo de regresión lineal usando TensorFlow JS.
¿Cuáles son los pasos iniciales para comenzar?
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.7.4"></script>
Crear el modelo: Tu modelo constará de una capa oculta y una capa de salida. Para esto, utiliza la función sequential que permite que los datos fluyan de manera continua de un tensor de entrada hasta la capa de salida.
Preparar los datos: Ordena y limpia tus datos para que no contengan valores nulos antes de entrenar el modelo.
Entrenar y almacenar el modelo: Una vez entrenado, puedes guardar el modelo para usarlo en el futuro sin tener que volver a entrenarlo.
¿Cómo empezamos con nuestro código HTML y el script?
Inicialmente, necesitas crear una simple página HTML donde cargarás las librerías, y un archivo JavaScript para el procesamiento:
<!DOCTYPE html> <html> <head> <title>Modelo de regresión</title> </head> <body> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.7.4"></script> <script src="script.js"></script> </body> </html>
En el script.js, obtendrás y limpiarás los datos de un archivo JSON, centrando la atención en el número de cuartos y el precio de las casas:
async function obtenerDatos() { const response = await fetch('tuArchivoDeDatos.json'); const datos = await response.json(); return datos.filter(item => item.cuartos != null && item.precio != null) .map(item => ({ cuartos: item.cuartos, precio: item.precio })); }
¿Cómo se visualizan los datos utilizando TensorFlow para visualización?
Para entender mejor nuestros datos, es importante visualizar las relaciones entre las variables de entrada y salida. Usando el visor de visualización de TensorFlow JS, puedes implementar fácilmente un diagrama de dispersión:
async function visualizarDatos() { const data = await obtenerDatos(); const valores = data.map(d => ({ x: d.cuartos, y: d.precio })); tfvis.render.scatterplot( { name: 'Número de Cuartos vs Precio' }, { values: valores }, { xLabel: 'Número de Cuartos', yLabel: 'Precio', height: 300 } ); } visualizarDatos();
¿Cómo transformar los datos para el entrenamiento?
Antes de entrenar el modelo, tus datos deben ser convertidos en tensores. Los tensores son el formato que TensorFlow JS utiliza para realizar cálculos:
function convertirATensores(data) { const entradas = data.map(d => d.cuartos); const etiquetas = data.map(d => d.precio); const tensorEntradas = tf.tensor2d(entradas, [data.length, 1]); const tensorEtiquetas = tf.tensor2d(etiquetas, [data.length, 1]); return { entradas: tensorEntradas, etiquetas: tensorEtiquetas }; }
¿Por qué es vital el uso de promesas y async/await?
En JavaScript, es importante usar promesas y la sintaxis async/await para manejar procesos asincrónicos como la carga de datos desde un servidor. Esto asegura que nuestro código espere a que se completen estas operaciones antes de continuar, evitando errores debido a datos incompletos.
Implementar modelos de regresión lineal en TensorFlow JS ofrece un poderoso conjunto de herramientas para quienes deseen explorar el aprendizaje automático usando JavaScript. Al seguir estos pasos, podrás construir sistemas predictivos eficientes, garantizando un manejo óptimo y visualización de datos pertinentes. ¡Continúa tu viaje de aprendizaje y descubre las múltiples aplicaciones que esta tecnología ofrece!
codigo de esta clase: crear index,html
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title> Modelo Regresion </title> <!-- Importar TensorFlow.js --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.7.4/dist/tf.min.js"></script> <!-- Importar tfjs-vis Visualizacion--> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script> </head> <body> <!-- Importar el archivo principal --> <script src="script.js"></script> </body> </html>
y en la misma carpeta debemos crear un archivo script.js
/* { "IngresoPromedioZona": 79545.45857, "EdadPromedioZona": 5.682861322, "NumeroDeCuartosPromedio": 7.009188143, "NumeroRecamarasPromedio": 4.09, "PoblacionZona": 23086.8005, "Precio": 1059033.558, "Direccion": "No disponible" } */ async function getData() { const datosCasasR = await fetch('https://static.platzi.com/media/public/uploads/datos-entrenamiento_15cd99ce-3561-494e-8f56-9492d4e86438.json'); const datosCasas = await datosCasasR.json(); const datosLimpios = datosCasas.map(casa => ({ precio: casa.Precio, cuartos: casa.NumeroDeCuartosPromedio })) .filter(casa => (casa.precio != null && casa.cuartos != null)); return datosLimpios; } function visualizarDatos(data){ const valores = data.map(d => ({ x: d.cuartos, y: d.precio, })); tfvis.render.scatterplot( {name: 'Cuartos vs Precio'}, {values: valores}, { xLabel: 'Cuartos', yLabel: 'Precio', height: 300 } ); } function crearModelo(){ const modelo = tf.sequential(); // agregar capa oculta que va a recibir 1 dato modelo.add(tf.layers.dense({inputShape: [1], units: 1, useBias: true})); // agregar una capa de salida que va a tener 1 sola unidad modelo.add(tf.layers.dense({units: 1, useBias: true})); return modelo; } async function run() { const data = await getData(); visualizarDatos(data); crearModelo(); } run();
Alejandro Santamaria
Diseñar un modelo de Regresión Lineal
Demo: https://alex112.gitlab.io/regresi-n-lineal-con-tensorflow-js
Repositorio: https://gitlab.com/alex112/regresi-n-lineal-con-tensorflow-js.git
Alan Bertinat
Muy buena clase, donde empezamos a afirmar de forma práctica el curso, me topé con algunos problemas al correr y los solucioné con un servidor local, gracias!
Katherine Hernandez
Chicos si trabajan con VSCODE pueden utilizar la extencion LIVE SERVER para trabajar desde un servidor y poder solucionar los problemas de lectura de json. a mi me funciono! aca les dejo el link https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Damian Spizzirri
Quiero cargar el archivo de forma local como muestra en el ejemplo, pero me sale "Pedido de origen cruzado bloqueado" no encuentro como sortear eso. Remoto funciona, pero quiero aprender a resolverlo cargandolo local.
Cesar Anzules
hola que tal intenta me paso lo mismo es que tienes que usar como tal un servidor instala con npm esto https://www.npmjs.com/package/http-server y correlo con npx http-server dentro tu carpeta del proyecto en tu localhost ya funcionaria
José Alberto Ortiz Vargas
Cesar Anzules me salvaste la vida con NPM. Gracias.
jorge Vivas
hola no logro que me aprezca la data solo me sale undefined
jorge Vivas
en mi caso me devuelve Failed to load resource: net::ERR_FAILED y Uncaught (in promise) TypeError: Failed to fetch sera por que es muy grande el archivo?
BinaryTreeCode
que es el Bias
Alejandro Santamaria
Al momento de entrenar un modelo de inteligencia artificial estamos calculando los pesos de cada una de las conexiones entre las neuronas de una capa y una o más de las neuronas que están en la siguiente capa, pero adicionalmente, también calculamos los pesos independientes que se activarían incluso si todos las entradas originales fueran cero.
Piénsalo de esta forma: si representaras una neurona mediante la siguiente ecuación
Y = sumatoria(pesos * input) y todas las entraras fueran cero, el valor de Y sería cero, y esto no es siempre correcto, por lo que normalmente entrenamos parametros de "bias" que transforman esa función en Y=sumatoria(pesos*input) + bias de tal forma que es posible aproximar la operación de tu modelo de una mejor manera.
Katherine Hernandez
<code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modelo de Regresion</title> <!--Import TSjs--> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.7.4/dist/tf.min.js"></script> <!--Import TSjs para Visualizacion--> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.7.4/dist/tf.min.js"></script> </head> <body> <!--Import touch js--> <script src="script.js"></script> </body> </html>
José Alberto Ortiz Vargas
Wow! Aqui ya empieza la cosa seria.