<h3>Input your data and let TensorFlow give a best-fit line predict</h3>
x: <input type="text" id="x" />
y: <input type="text" id="y" />
<input type="button" id="append" value="submit">
<div style="padding:50px">
<canvas id="graph" width="80%" height="50%"></canvas>
</div>
The next script block will handle populating the data, graphing the chart, and later calculating the best-fit line.
We will start to give values with data from the inputs. From there, we're just going to automatically increment x by 1 in the field with. Then with a .onclick function we start to populate those values when the submit button is pressed.
<script>
var xs = [] // Initialized blank
var ys = [] // Initialized blank
var bestfit = [] //
....
...
// the append id is given to the submit button
document.getElementById("append").onclick = function(){
var x = document.getElementById("x").value; // grab the current value for x
var y = document.getElementById("y").value; // grab the current value for y
xs.push(x) // append that value to the xs
ys.push(y) // append that value to the ys
document.getElementById('x').value = parseInt(x)+1; // add 1 to the x automatically
Then we start to define our model using TensorFlow object and then train the model based on the data the user has inpu.
In this part we could define which layer we are going to use: LeakyReLu or a Dense
TensorFlow works with JavaScript promises, which are just asynchronous operations that return either a successful result or an error. We want this to be asynchronous so that our application doesn't just hang.
After fitment, we want to calculate our bestfit line:
//Create our model
//Decide if you want to use a ReLU layers or a dense to activate with some sort of sigmoid function.
/*
const model = tf.sequential(); //use a sequential tf model
model.add(tf.layers.leakyReLU({units: 128, inputShape: [1]})); // add layer 1
model.add(tf.layers.leakyReLU({units: 128, inputShape: [128]})); // add layer 2
model.add(tf.layers.dense({units: 1, inputShape: [128]})); // output layer
model.compile({loss: 'meanSquaredError', optimizer: 'adam'}); // compile with params
*/
/*
const model = tf.sequential();
model.add(tf.layers.dense({units: 128, inputShape: [1]})); // layer 1
model.add(tf.layers.dense({units: 128, inputShape: [128], activation: "sigmoid"})); // layer 2
model.add(tf.layers.dense({units: 1, inputShape: [128]})); // output layer
model.compile({loss: 'meanSquaredError', optimizer: 'adam'}); // compile with params
document.getElementById('x').value = 1; // set the starting value for x
*/
Then we could create our graph based on input data and the best-fit line, making our full fitment and graph function:
// the append id is given to the submit button
document.getElementById("append").onclick = function(){
var x = document.getElementById("x").value; // grab the current value for x
var y = document.getElementById("y").value; // grab the current value for y
xs.push(x) // append that value to the xs
ys.push(y) // append that value to the ys
document.getElementById('x').value = parseInt(x)+1; // add 1 to the x automatically
// Train the model:
model.fit(tf.tensor(xs), tf.tensor(ys), {epochs:150}).then(() => { //set the values, Epochs to x
bestfit = model.predict(tf.tensor(xs, [xs.length, 1])).dataSync(); // create best-fit line from xs data
var ctx = document.getElementById("graph").getContext('2d'); // begin chart
var graph = new Chart(ctx, {
type: 'line',
options: {scales:{yAxes: [{ticks: {beginAtZero: true}}]}},
data: {
labels: xs,
datasets: [
{
label: 'Original Data',
data: ys,
borderWidth: 1,
},{
label: 'Best Fit line',
data: bestfit,
borderWidth: 1,
borderColor: '#FF0000',
backgroundColor: 'rgba(1,1,1,0)'
},]
},
});
});
}
</script>
</body>
</html>