gpt4 book ai didi

javascript - Tensorflow.js 中的图像大小调整方法(resizeBilinear 和 resizeNearestNeighbor)不会返回正确的结果

转载 作者:行者123 更新时间:2023-12-05 06:11:35 26 4
gpt4 key购买 nike

问题

  1. resizeBilinear(*1) 和 resizeNearestNeighbor(*2) 有什么区别?特别是,resizeNearestNeighbor 不会返回正确的图像(图像的一半是黑色的)。 (图像的一半是黑色的。)
  2. ResizeBilinear 没有返回正确的分割结果。 (图像的一半是灰色的。)这是为什么?这与 resizeNearestNeighbor 的结果非常相似。

背景

我想开发一个在 Tensorflow.js 中进行分割的应用程序。幸运的是,我找到了一些用 Python 进行分割的示例代码。 (*3)我相信我可以通过将在那里获取的 Keras 模型转换为 TFJS 模型来在 Tensorflow.js 中进行分割。我尝试在 Tensorflow.js 中调整图像的大小,但无法获得正确的结果。有没有人有什么好的想法?

代码

这是我写的源代码。 (我不习惯写 JavaScript。)

<!DOCTYPE html>
<html>
<head></head>
<meta charset="utf-8"/>
<body>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<canvas id="canvas1" width="256" height="256" style="border: 2px solid;"></canvas>
<canvas id='canvas2' width="128" height="128" style="border: 2px solid;"></canvas>
<canvas id='canvas3' width="128" height="128" style="border: 2px solid;"></canvas>
<canvas id='canvas4' width="128" height="128" style="border: 2px solid;"></canvas>
<canvas id='canvas5' width="128" height="128" style="border: 2px solid;"></canvas>
<script>

var inputImg = new Image();inputImg.src = "../00_resources/woman172.jpg";
const canvas1 = document.getElementById('canvas1');
const canvas2 = document.getElementById('canvas2');
const canvas3 = document.getElementById('canvas3');
const canvas4 = document.getElementById('canvas4');
const canvas5 = document.getElementById('canvas5');

const SIZE = 128;
const COL_CHANNEL = 3;
const BIN_CHANNEL = 1;

inputImg.onload = () => {
const inCtx = canvas1.getContext('2d');
inCtx.drawImage(inputImg, 0, 0, canvas1.width, canvas1.height);
};


(async() => {

// load model
let model = await tf.loadGraphModel('/tfjsdoc/Portrait-Segmentation/model/deconv_bnoptimized_munet_to_tfjs_graph_model/model.json');

// image1 (original image)
let img1 = tf.browser.fromPixels(canvas1, COL_CHANNEL);
tf.browser.toPixels(img1, canvas2);// OK

// image2 (resized image - using 'resizeNearestNeighbor')
let img2 = img1.resizeNearestNeighbor([SIZE, SIZE]).toFloat().div(tf.scalar(255));
tf.browser.toPixels(img2, canvas3);// NG

// image3 (resized image - using 'resizeBilinear')
let img3 = img1.resizeBilinear([SIZE, SIZE]).toFloat().div(tf.scalar(255));
tf.browser.toPixels(img3, canvas4);// OK?

// predict (image3 is used to make predictions, but the same problem occurs as in image2)
let pred = await model.predict(tf.reshape(img3, [-1,SIZE,SIZE,COL_CHANNEL])).data();
tf.browser.toPixels(tf.tensor(pred, [SIZE,SIZE, BIN_CHANNEL]), canvas5);// NG

})();

</script>
</body>
</html>

Capturing the Execution Result

从左到右

  • 原始图片
  • 原始图像被拍摄并绘制在 Canvas 上
  • 原始图像使用 resizeNearestNeighbor 调整大小并绘制在 Canvas 上(图像的一半是黑色)
  • 使用 resizeBilinear 调整大小并绘制在 Canvas 上的原始图像(看起来正确)
  • 使用 resizeBilinear 调整大小并在 Canvas 上绘制的原始图像的分割(图像的一半是灰色的)

引用资料

(*1) https://js.tensorflow.org/api/latest/#image.resizeBilinear

(*2) https://js.tensorflow.org/api/latest/#image.resizeNearestNeighbor

(*3) https://github.com/anilsathyan7/Portrait-Segmentation

最佳答案

根据我的经验,似乎两者都完成了类似的输入图像大小调整。 ResizeBilinear 对图像执行双线性插值。

关于javascript - Tensorflow.js 中的图像大小调整方法(resizeBilinear 和 resizeNearestNeighbor)不会返回正确的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63937147/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com