I am making a little webpage on visualizing polynomial regression prediction with math.js and Tensorflow.js and it seems that I'm not very good at it.
It's supposed to work on sgd with lineair and polynomial regression but sgd doesnt work at all and when I use adam to train it overshoots with even 200epochs on something as simple as y=2x and if I switch up to polynomial with adam the numbers are nonsensical. Here's what i have so far:
let xTry = undefined;
let yTry = undefined;
function draw() {
try {
// compile the expression once
const expression = document.getElementById('eq').value
const expr = math.compile(expression)
// evaluate the expression repeatedly for different values of x
const xValues = math.range(-100, 100, 1).toArray()
xTry = xValues;
const yValues = xValues.map(function (x) {
return expr.evaluate({x: x})
})
console.log(yValues);
yTry = yValues;
console.log(xValues);
// render the plot using plotly
const trace1 = {
x: xValues,
y: yValues,
line: {shape: 'spline'},
type: 'scatter'
}
const data = [trace1]
Plotly.newPlot('plot', data)
}
catch (err) {
console.error(err)
}
}
document.getElementById('form').onsubmit = function (event) {
event.preventDefault()
draw()
}
async function learnLinear() {
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: [1], useBias: true }));
//beschrijving dimensies netwerk
model.compile({
loss: "meanSquaredError",
optimizer: "adam",
});
const xtest = tf.tensor2d(xTry, [200, 1])
const ytest = tf.tensor2d(yTry, [200, 1])
// grafiek, x en y waarde met matrix grootte erachter
await model.fit(xtest, ytest, {epochs: 200});
//trainen model 250 epochs
document.getElementById("output_field").innerText = model.predict(
tf.tensor2d([20], [1, 1])
);
}
document.getElementById('form2').onsubmit = function (event) {
event.preventDefault()
learnLinear();
console.log(learnLinear())
}
//heel deze functie is het model trainen + uittesten
//script 1 gemakkelijk trainen
/*
https://mathjs.org/docs/expressions/parsing.html
https://plotly.com/javascript/plotly-fundamentals/
https://plotly.com/javascript/plotly-fundamentals/
https://stackoverflow.com/questions/21518381/proper-way-to-wait-for-one-function-to-finish-before-continuing
*/
<!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">
<script defer src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.11.2" type="text/javascript"></script>
<script defer src="https://unpkg.com/mathjs@9.5.1/lib/browser/math.js"></script>
<script defer src="https://cdn.plot.ly/plotly-1.35.2.min.js"></script>
<script defer src="./js/basic_plot.js"></script>
<title>tfjs Hoofdstuk 1</title>
</head>
<body>
<form id="form">
<label for="eq">Enter an equation:</label>
<input type="text" id="eq" placeholder="4 * sin(x) + 5 * cos(x/2)" />
<input id="eqsubm" type="submit" value="Draw" />
</form>
<form id="form2">
<input id="help" type="submit" value="calc" />
</form>
<div class="test" id="output_field"></div>
<div id="output2"></div>
<div id="plot"></div>
</body>
</html>