tensorflowjs：将预测数组显示为图像

Question

在下面的 js 代码中，我将模型作为承诺加载： tf.loadLayersModel('../tfjs-models/hadwritten-digits/model.json')

现在，我使用 model.predict 将返回形状为 (1, 128, 128, 1) 的张量，即一个灰度图像。我现在有很多关于承诺和等待的问题。我在 index.html 中有一个已知 id 的画布，我想将图像放入。现在需要一些帮助。

async function generate() {

    let input =  document.getElementById("slider").value
    console.log(`Random Noisy Input Mean is ${input}`)

    tf.loadLayersModel('../tfjs-models/hadwritten-digits/model.json').then(async (model) => {

    tensor = tf.tensor([randomnormal(100, input, 0.5)]);
    result = await model.predict(tensor).array()
    document.getElementById("myCanvas").getContext("3d").putImageData(
        new ImageData(Uint8ClampedArray.from(result), 1, 1), 1, 1);
    });
}

错误

model.js:39 Uncaught (in promise) TypeError: Cannot read property 'putImageData' of null
    at model.js:39

我对 javascript 很陌生，python 是我的主要语言。 我需要为我的 GAN 模型搭建一个前端。我觉得使用 tfjs 比使用烧瓶或 django 提供结果更冒险。所以任何帮助对我来说都是很大的:)

解决了

async function generate() {

    let input =  document.getElementById("slider").value
    console.log(`Random Noisy Input Mean is ${input}`)

    inputtensor = tf.tensor([randomnormal(100, input, 0.5)]);
    outputtensor = await model.predict(inputtensor)

    result = outputtensor.mul([1, 1, 1, 1]).dataSync()
    for(var i=0;i<result.length;i++){
        result[i]=result[i]*255.0 + 128.0;
    }
    document.getElementById("myCanvas").getContext("2d").putImageData(
        new ImageData(Uint8ClampedArray.from(result), 128, 128), 1, 1);

}

var model;

tf.loadLayersModel('../tfjs-models/hadwritten-digits/model.json').then(async (resolve) => {
    model=resolve
});

Answer 1

代码中有几处需要修改

• 目前没有3d 上下文，有2d 上下文。

• 另外，Uint8ClampedArray 需要一个扁平数组。因此，与其使用array（分别为arraySync），不如使用data（分别为dataSync）。

• ImageData 需要图像的宽度和高度。图像宽度和高度不太可能各为 1 个像素。所以可能需要更改给ImageData的参数

简短的例子

tensor = tf.ones([5, 5, 4]);
new ImageData(Uint8ClampedArray.from(tensor.dataSync()), 5, 5);