javascript - Tensorflow.js の画像サイズ変更メソッド (resizeBilinear および resizeNearestNeighbor) が正しい結果を返さない

Question

問題

resizeBilinear(*1) と resizeNearestNeighbor(*2) の違いは？特に、resizeNearestNeighbor は正しい画像を返しません (画像の半分が黒です)。（画像の半分は黒です。）
ResizeBilinear は、セグメンテーションの正しい結果を返しません。（画像の半分が灰色です。）それはなぜですか？これは、resizeNearestNeighbor の結果と非常によく似ています。

バックグラウンド

Tensorflow.js でセグメンテーションを行うアプリケーションを開発したいと考えています。幸いなことに、Python でのセグメンテーションのサンプルコードをいくつか見つけました。(*3) Tensorflow.js で取得した Keras モデルを TFJS モデルに変換することでセグメンテーションができると思います。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>

実行結果の取得

左から右へ。