TensorFlow迁移学习模型转换为TensorFlow JS后始终返回相同结果如何解决

问题核心原因及修复方案 #

1. 预处理逻辑不一致 #

Python端预处理仅做了像素值/255，输出值域为[0,1]，但JS端多了一步.sub(tf.scalar(1))，输出值域为[-1, 0]，和模型训练时的输入分布完全不匹配，这是预测结果偏差的核心原因之一。
修复：删掉sub(tf.scalar(1))这行逻辑

2. 图片未完成加载就调用预测 #

当前代码中img.src赋值后直接调用predict，没有等待图片加载完成，此时传入模型的图片是空/旧内容，导致所有预测结果固定。
修复：将预测逻辑移到img.onload回调内

3. 代码逻辑错误 #

• predict函数重复加载模型，增加耗时还可能出现时序问题
• predict函数返回未定义的results变量，而非实际得到的predictions
• predict函数定义仅接收image参数，但调用时传入了model和img两个参数
  修复：把模型加载逻辑提到全局只执行一次，修正返回值和参数定义

4. 图片插值方法不匹配 #

Python端PIL的resize默认使用双线性插值，JS端使用最近邻插值resizeNearestNeighbor，会导致输入像素存在细微差异，影响预测精度。
修复：改用resizeBilinear做缩放

修复后完整代码 #

// 全局只加载一次模型
let model;
(async function initModel() {
    model = await tf.loadLayersModel('./TFJs/model.json');
})();

async function predict(image) {
    // 模型未加载完成时等待
    if(!model) await new Promise(resolve => setTimeout(resolve, 100));
    let predictions = model.predict(preprocessImage(image)).dataSync(); 
    console.log(predictions);
    return predictions;
}

function preprocessImage(image) {
    let tensor = tf.browser.fromPixels(image);
    // 改用双线性插值和Python端对齐
    const resizedImage = tensor.resizeBilinear([224,224]);
    const batchedImage = resizedImage.expandDims(0);
    // 删掉减1逻辑，和Python预处理对齐
    return batchedImage.toFloat().div(tf.scalar(255));
}

document.querySelector('input[type="file"]').addEventListener("change", async function () {
    if (this.files && this.files[0]) {
        let img = document.getElementById("uploaded-img");
        img.onload = async () => {
            URL.revokeObjectURL(img.src);
            // 图片加载完成后再调用预测
            let predictionResult = await predict(img);
            displayResult(predictionResult);
        };
        img.src = URL.createObjectURL(this.files[0]);
    }
});

内容的提问来源于stack exchange，提问作者Dhana D.