<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <canvas id="canvas" width="400" height="400">
    </canvas>
    <script src="script.js"></script>
  </body>
</html>




tf.setBackend('cpu');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function draw(data, n) {
	var hc = n * 100 + 100;
	ctx.strokeStyle = "#f00";
	ctx.lineWidth = 1;
	ctx.moveTo(0, hc);
	for (var i = 1; i < 200; i++)
	{
		ctx.lineTo(i, hc - data[i] * 30);
	}
	ctx.stroke();
}
const model = tf.sequential();
model.add(tf.layers.dense({
	units: 64,
	activation: 'tanh',
	inputShape: [2]
}));
model.add(tf.layers.dense({
  units: 64, 
  activation: "tanh"
}));
model.add(tf.layers.dense({
  units: 1, 
  activation: "tanh"
}));
model.compile({
  optimizer: 'adam',
  loss: 'meanSquaredError'
});
const buf0 = [];
const buf1 = [];
b = [];
for (var i = 0; i < 200; i++)
{
	var x = i / 30.0;
	var y = Math.sin(x);
	b.push(y);
}
for (var i = 0; i < 197; i++)
{
	buf0.push([(b[i + 1] - b[i]) , b[i + 1]]);
	buf1.push([b[i + 1]]);
}
draw(b, 0);
const xs = tf.tensor2d(buf0);
const ys = tf.tensor2d(buf1);
model.fit(xs, ys, {
	batchSize: 180,
	epochs: 300
}).then((d) => {
	var str = "loss = ";
	str += d.history.loss[0];
	alert(str);
	p = [];
	var x;
	var y0;
	var y1;
	x =  1 / 30.0;
	y0 = Math.sin(x);
	x =  (1 + 1) / 30.0;
	y1 = Math.sin(x);
	var z0 = y0;
	var z1 = y1;
	for (i = 0; i < 197; i++)
	{
		var pre = model.predict(tf.tensor2d([[(z1 - z0), z1]]));
		var f = pre.dataSync();
		p.push(f);
		z0 = z1;
		z1 = f;
	}
	draw(p, 1);
});





/* Styles go here */