将预测张量转换为图像
convert prediction tensor to an image
使用tensorflow.js
我已成功导入我的模型并从中返回预测。接下来我想将该预测从张量转换为图像。我的第一个想法是去 tensor -> js array -> some canvas 情况。不过,我敢打赌有一种更简单的方法可以做到这一点。希望不必涉及节点,但我对此持开放态度。
在这种情况下,预测被归一化为 -1 -> 1,所以我首先进行一些数学运算,将值设为 0 -> 255
到目前为止:
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();
这给了我一个 JS 中的二维数组。那么我可以这样做:
// 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);
}
}
虽然没有我想要的那么快,但它确实有效。试图让事情发生在客户端。有什么想法吗?
tf.browser.toPixels
可用于将图像绘制到canvas。
const canvas = document.createElement('canvas');
canvas.width = tensor.shape.width
canvas.height = tensor.shape.height
await tf.browser.toPixels(tensor, canvas);
使用tensorflow.js
我已成功导入我的模型并从中返回预测。接下来我想将该预测从张量转换为图像。我的第一个想法是去 tensor -> js array -> some canvas 情况。不过,我敢打赌有一种更简单的方法可以做到这一点。希望不必涉及节点,但我对此持开放态度。
在这种情况下,预测被归一化为 -1 -> 1,所以我首先进行一些数学运算,将值设为 0 -> 255
到目前为止:
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();
这给了我一个 JS 中的二维数组。那么我可以这样做:
// 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);
}
}
虽然没有我想要的那么快,但它确实有效。试图让事情发生在客户端。有什么想法吗?
tf.browser.toPixels
可用于将图像绘制到canvas。
const canvas = document.createElement('canvas');
canvas.width = tensor.shape.width
canvas.height = tensor.shape.height
await tf.browser.toPixels(tensor, canvas);