tfjs

Mix.install([
  {:kino, "~> 0.10.0"}
])

Section

defmodule KinoTF.Sin do
  use Kino.JS

  def new(html) do
    Kino.JS.new(__MODULE__, html)
  end

  asset "main.js" do
    """
    import "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js";
    function draw(ctx, data, n) {
    	var hc = n * 20 + 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();
    }
    export function init(ctx, html) {
    	const canvas = document.createElement("canvas");
    	canvas.style.width = "400px";
    	canvas.style.height = "400px";
    	ctx.root.appendChild(canvas);
    	const ctx2 = canvas.getContext('2d');
    	ctx2.clearRect(0, 0, canvas.width, canvas.height);
    	ctx2.beginPath();
    	tf.setBackend('cpu');
    	const buffer = tf.buffer([200, 1]);
    	const buffer2 = tf.buffer([200, 1]);
    	var b = [];
    	for (var i = 0; i < 200; i++)
    	{
    		var x = i / 30.0;
    		var y = Math.sin(x);
    		b.push(y);
    		buffer.set(x, i, 0);
    		buffer2.set(y, i, 0);
    	}
    	
    	const model = tf.sequential();
    	eval(html);
    	const xs = buffer.toTensor();
    	const ys = buffer2.toTensor();
    	model.fit(xs, ys, {
    		batchSize: 200,
    		epochs: 6000
    	}).then((d) => {
    		var str = "loss = ";
    		str += d.history.loss[0];
    		alert(str);
    		var p = [];
    		for (i = 0; i < 200; i++)
    		{
    			var x = i / 30.0;
    			var pre = model.predict(tf.tensor2d([[x]], [1, 1]));
    			var f = pre.dataSync();
    			p.push(f);
    		}
    		draw(ctx2, p, 1);
    	});
       draw(ctx2, b, 0);
    }
    """
  end
end

KinoTF.Sin.new("""
model.add(tf.layers.dense({
	units: 40,
	activation: 'tanh',
	inputShape: [1]
}));
model.add(tf.layers.dense({
	units: 1,
	activation: 'tanh'
}));
model.compile({
	optimizer: 'adam',
	loss: 'meanSquaredError'
});
""")