08.-TensorFlow js en Espa帽ol馃嚜馃嚫 [Predecir ventas con regresi贸n lineal]


Introducci贸n

Bienvenidos a programas novatos muchas gracias por continuar viendo este curso de Tensor Flow en JavaScript y en este tutorial vamos a hacer una predicci贸n y no, no vamos a hacer predicciones con los astros ni el tarot, ni cartas ni leyendo el caf茅 no no. Lo que vamos a hacer es predecir las ventas que ha tenido (o que va a tener) una tienda en relaci贸n a las ventas que ha tenido anteriormente y ahora vamos a ver esto de forma pr谩ctica y pues comencemos con este c贸digo:

Codigo

<!DOCTYPE html>
<html lang="es">  
    <head>    
        <title>Prueba tensorflow</title>
        <meta charset="UTF-8">
        <meta name="title" content="Prueba tensorflow">
        <!-- Cargamos TensorFlow.js -->
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

    </head>  
    <body>    
        <table border="0">
            <tbody>
                <tr>
                    <td>Repeticiones</td>
                    <td><input type="number" id="repeticiones" value="100"/></td>
                </tr>
                <tr>
                    <td>Valor de x</td>
                    <td><input type="number" id="nuevoValX" value="10"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td> <input type="button" value="Calcular" name="calcular" id="calcular" onclick="learnLinear()" /> </td>
                </tr>
                <tr>
                    <td>Valor de Y</td>
                    <td> <span id="valy"></span> </td>
                </tr>
                <tr>
                    <td>Epoca</td>
                    <td> <span id="epocas"></span> </td>
                </tr>
            </tbody>
        </table>
        <canvas id="myChart" width="400" height="400"></canvas>
        <script>
            // Definimos los parametros en x y en y
            var valX = [1  , 2  , 3 , 4 , 5  , 6];
            var valY = [100, 110, 90, 80, 150, 130];
            var datosGrafica=deArrayAMatriz(valX, valY);
            // Inicializamos la Grafica
            var grafica = new Chart(document.getElementById("myChart"), {
                type: 'scatter',
                data: {
                    datasets: [{
                            label: "Ventas",
                            data: datosGrafica,
                            borderColor: "red",
                        }]
                },
                options: {
                    responsive: false
                    
                }
            });

            //Creamos una funcion asincrona (para que se active hasta que termine de cargar la pagina)
            async function learnLinear() {

                //Definimos el modelo que sera de regresion lineal
                const model = tf.sequential();
                //Agregamos una capa densa porque todos los nodos estan conectado entre si
                model.add(tf.layers.dense({units: 1, inputShape: [1]}));

                // Compilamos el modelo con un sistema de perdida de cuadratico y optimizamos con sdg
                model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
                // Creamos los tensores para x y para y
                const xs = tf.tensor2d(valX, [6, 1]);
                const ys = tf.tensor2d(valY, [6, 1]);

                // Obtenemos la epocas (Las veces que se repetira para encontrar el valor de x)
                var epocas = +document.getElementById("repeticiones").value;
                // Obtenemos el valor de x
                var nuevoValX = +document.getElementById("nuevoValX").value;
                
                // Ciclo que va ir ajustando el calculo
                for (i = 0; i < epocas; i++) {
                    // Entrenamos el modelo una sola vez (pero como esta dentro de un ciclo se va ir entrenando por cada bucle)
                    await model.fit(xs, ys, {epochs: 1});
                    // Obtenemos el valor de Y cuando el valor de x sea
                    var prediccionY = model.predict(tf.tensor2d([nuevoValX], [1, 1])).dataSync()[0];
                    // Escribimos el valor de y
                    document.getElementById("valy").innerText = prediccionY;
                    // Escribimos en que epoca vamos
                    document.getElementById("epocas").innerText = i+1;
                    // Redibujamos la grafica con el nuevo valor de X y Y
                    datosGrafica.push({x:nuevoValX,y:prediccionY});
                    grafica.data.datasets[0].data = datosGrafica;
                    grafica.update();
                }

            }
            function deArrayAMatriz(arx, ary) {
                var data = [];
                for (i = 0; i < arx.length; i++) {
                    data.push({x: arx[i], y: ary[i]});
                }
                return data;
            }

        </script>
    </body>  
</html>


Codigo en codepen: https://codepen.io/eucm2/pen/LoWBQB

Video



Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04