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

Question

如以下 js 代码所示，我正在加载模型作为承诺： tf.loadLayersModel('../tfjs-models/hadwritten-digits/model.json')

现在，我正在使用 model.predict，它将 return 一个形状为 (1, 128, 128, 1) 的张量，即一个灰度图像。我现在有很多关于承诺和等待的问题。我有一个 canvas，在 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 比使用 flask 或 django 提供结果更冒险。所以任何帮助对我来说都是很大的:)

Solved

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);

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

tensorflowjs : show predicted array as image

html

javascript

promise

html5-canvas

tensorflow.js