我转换后的 tensorflow 迁移学习模型在 Tensorflow JS 中总是 returns 相同的结果

Question

我创建了一个模型，该模型将 Mobilenet V2 应用于 Google colab 中的卷积基层。然后我使用这个命令转换它：

path_to_h5 = working_dir + '/Tensorflow_PY_Model/SavedModel.h5'
path_tfjs = working_dir + '/TensorflowJS'

!tensorflowjs_converter --input_format keras \
                        {path_to_h5} \
                       {path_tfjs}

我用一张图片测试了两者的分类。在 python 中，我使用下面的代码进行预测：

from google.colab import files
from io import BytesIO
from PIL import Image
import matplotlib.pyplot as plt

uploaded = files.upload()
last_uploaded = list(uploaded.keys())[-1]
im = Image.open(BytesIO(uploaded[last_uploaded]))

im = im.resize(size=(224,224))
img = np.array(im)
img = img / 255.0
prediction1 = model.predict(img[None,:,:])
print(prediction1)

上面的代码 returns 这个数组：

[6.1504150e-05 4.8508531e-11 5.1813848e-15 2.1887154e-12 9.9993849e-01
  8.4171114e-13 1.4638757e-08 3.4268971e-14 7.5719299e-15 1.0649443e-16]]

之后，我尝试使用以下代码在 Javascript 中进行预测：

async function predict(image) {
    var model = await tf.loadLayersModel('./TFJs/model.json');
    let predictions = model.predict(preprocessImage(image)).dataSync(); 
    console.log(predictions);

    return results;
}

function preprocessImage(image) {
    let tensor = tf.browser.fromPixels(image);
    const resizedImage = tensor.resizeNearestNeighbor([224,224]);
    const batchedImage = resizedImage.expandDims(0);
    return batchedImage.toFloat().div(tf.scalar(255)).sub(tf.scalar(1));
}

document.querySelector('input[type="file"]').addEventListener("change", async function () {
        if (this.files && this.files[0]) {
            img = document.getElementById("uploaded-img");
            img.onload = () => {
                URL.revokeObjectURL(img.src); // no longer needed, free memory
            };
            img.src = URL.createObjectURL(this.files[0]);
            predictionResult = await predict(model, img);
            displayResult(predictionResult);
        }
    });

然而，使用与我在 Python 上预测时使用的相同的图像，它 returns 这个结果并且它 永远不会改变 无论我改变图片。

Float32Array(10) [0.9489052295684814, 0.0036257198080420494, 0.000009185552698909305,
0.000029705168344662525, 0.04141413792967796, 1.4301890782775217e-9, 0.006003820803016424,
2.8357267645162665e-9, 0.000011812648153863847, 4.0659190858605143e-7]

那么如何解决这个问题呢？我还应该做什么？在此先感谢您的回答和建议！

Answer 1

调试了一些可能的原因后，我发现问题出在这段代码中：

document.querySelector('input[type="file"]').addEventListener("change", async function () {
        if (this.files && this.files[0]) {
            img = document.getElementById("uploaded-img");
            img.onload = () => {
                URL.revokeObjectURL(img.src); // no longer needed, free memory
            };
            img.src = URL.createObjectURL(this.files[0]);
            predictionResult = await predict(model, img);
            displayResult(predictionResult);
        }
    });

首先，我想让它自动化，这样它就会立即显示选取的图像并在管道中进行预测。但这是不可能的，因为 img 的 src 属性仍然与整个块执行之前的值相同。

在我的例子中，它执行了整个块直到预测和结果然后上传的和错误的预测一起出现。所以我最后做了一个改变，比如添加另一个按钮只用于预测和 从那个块中取出预测线 并将它们放在另一个函数中。最后效果很好。

document.querySelector('input[type="file"]').addEventListener("change", async function () {
        if (this.files && this.files[0]) {
            img = document.getElementById("uploaded-img");
            img.onload = () => {
                URL.revokeObjectURL(img.src); // no longer needed, free memory
            };
            img.src = URL.createObjectURL(this.files[0]);
        }
    });

document.querySelector('#predict-btn').addEventListener("click", async function ()  {
    img = document.getElementById("uploaded-img");
    predictionResult = await predict(model, img);
    displayResult(predictionResult);
});

好吧，我还是很好奇我是否可以将这些功能放入一个管道过程中，这样就只有一个上传按钮，其余的工作由系统完成。

我转换后的 tensorflow 迁移学习模型在 Tensorflow JS 中总是 returns 相同的结果

My converted tensorflow Transfer Learning model always returns same results in Tensorflow JS

tensorflow

tensorflow.js

transfer-learning

tensorflowjs-converter