<!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 */