时间戳

首页 > 解决方案 > tensorflowjs：将预测数组显示为图像

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

问题描述

在下面的 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
});

标签： javascripthtmlpromisehtml5-canvastensorflow.js

解决方案

代码中有几处需要更改

  • 现在没有3d上下文，有2d上下文。

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

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

简短的例子

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

推荐阅读