<!DOCTYPE html> <html> <script src="myailib.js"></script> <script src="myplotlib.js"></script> <body> <canvas id="myCanvas" width="400px" height="400px" style="width:100%;max-width:400px;border:1px solid black"></canvas> <p>Train me to find the line of best fit:</p> <p> <button onclick="train(100)">100 times</button> <button onclick="train(200)">200 times</button> <button onclick="train(300)">300 times</button> <button onclick="train(500)">500 times</button> </p> <div id="demo"></div> <script> // Create a Trainer Object xArray = [32,53,61,47,59,55,52,39,48,52,45,54,44,58,56,48,44,60]; yArray = [31,68,62,71,87,78,79,59,75,71,55,82,62,75,81,60,82,97]; let myTrainer = new Trainer(xArray, yArray); // Create a Plotter Object let myPlotter = new XYPlotter("myCanvas"); myPlotter.transformXY(); myPlotter.transformMax(100, 100); // Plot the Points myPlotter.plotPoints(xArray.length, xArray, yArray, "blue"); function train(iter) { myTrainer.train(iter); // Display Guessed Results document.getElementById("demo").innerHTML = "<p>Slope: " + myTrainer.weight.toFixed(2) + "</p>" + "<p>Bias: " + myTrainer.bias.toFixed(2) + "</p>" + "<p>Cost: " + myTrainer.cost.toFixed(2); myPlotter.plotLine(0, myTrainer.bias, myPlotter.xMax,myPlotter.xMax*(myTrainer.weight)+(myTrainer.bias), "black"); } </script> </body> </html>