convert prediction tensor to an image

Question

Using tensorflow.js

I have successfully imported my model and returned predictions from it. Next I want to convert that prediction from a tensor to an image. My first thought was to go tensor -> js array -> some canvas situation. I bet there is an easier way to do it, though. Hopefully without having to involve node, but I'm open to that.

In this case the prediction is normalized to -1 -> 1 so I first do some math to get the values to 0 -> 255

So far:

var a = model.predict(tf.ones([1, 100]));
// map values from -1 -> 1 to 0 -> 255
var b = tf.scalar(127);
a = a.mul(b);
a = a.add(b);
// a.print();

// float to int
var cast = a.asType('int32');

// finally, as an array
var values = cast.arraySync();

That gives me a 2d array in JS. Then I can do this:

        // draw to a canvas
        var canvas = document.createElement("canvas");
        canvas.height = 128
        canvas.width = 128;
        //canvas.style.visibility = "hidden";
        document.body.appendChild(canvas);

        // in case not converting 2d to 1d...
        var data = values;

        // Now that we have canvas to work with, we need to draw the image data into it:
        var ctx = canvas.getContext("2d");
        for (var y = 0; y < data.length; ++y) {
          for (var x = 0; x < data[y].length; ++x) {
            ctx.fillStyle = "rgb("+data[x][y][0]+","+data[x][y][1]+","+data[x][y][2]+")";
            ctx.fillRect(x, y, 1, 1);
          }
        }

This works, though it's not quite as snappy as I'd like. Trying to keep things client-side. Any ideas?

edkeveked edkeveked · Accepted Answer · 2020-10-22T15:14:28

tf.browser.toPixels can be used to draw the image to a canvas.

const canvas = document.createElement('canvas');
canvas.width = tensor.shape.width
canvas.height = tensor.shape.height
await tf.browser.toPixels(tensor, canvas);

convert prediction tensor to an image

1 Answers