TensorFlow.js多分类预测如何输出类别名称与对应置信度

你现有代码已经能拿到模型输出的概率数组，只需要补全预处理逻辑、做类别映射匹配、按格式渲染结果即可，具体实现如下：

前置修正 #

你当前的代码有两个会导致结果异常的问题，先修复：

• 直接调用tf.reshape要求输入图片本身尺寸必须是200*200，一旦图片尺寸不符会直接报错，需要先把输入图片resize到模型要求的输入尺寸
• 模型训练时一般会将0-255范围的像素值归一化到0-1区间，你当前没有做这步处理，输出的置信度会完全不符合预期
• 提前引入你存储类别映射的JS文件，保证TARGET_CLASSES_BRAIN对象可正常访问

完整实现代码 #

首先在页面中新增结果展示容器，用来渲染带格式的预测结果：

<div id="predictionResult"></div>

<!-- 替换成你自己的类别映射JS文件实际路径 -->
<script src="./targetClasses.js"></script>
<script>
async function LoadModels(){  
    const model = await tf.loadLayersModel("http://127.0.0.1:5500/modelsBrain/modelBrain.json");
    const imgEl = document.getElementById('photo');
    
    // 图片预处理：和Python端训练逻辑保持一致
    const processedImg = tf.browser.fromPixels(imgEl)
        .resizeNearestNeighbor([200, 200]) // 强制缩放到模型输入尺寸
        .toFloat()
        .div(tf.scalar(255)); // 像素值归一化到0-1区间
    const modelInput = tf.reshape(processedImg, [1, 200, 200, 3]);
    
    // 执行推理
    const prediction = model.predict(modelInput);
    // 得到长度为4的概率数组，索引0-3对应类别映射的0-3
    const probArray = prediction.dataSync();

    // 按要求拼接结果
    let resultContent = '';
    for(let i = 0; i < probArray.length; i++){
        const className = TARGET_CLASSES_BRAIN[i];
        // 置信度保留最多4位小数，自动去掉末尾无意义的0，和示例格式匹配
        const confidence = probArray[i].toFixed(4).replace(/\.?0+$/,'');
        resultContent += `<p><strong>${className}</strong>: ${confidence}</p>`;
    }

    // 渲染到页面
    document.getElementById('predictionResult').innerHTML = resultContent;

    // 释放张量内存，避免页面内存泄漏卡顿
    processedImg.dispose();
    modelInput.dispose();
    prediction.dispose();
}

LoadModels();
</script>

补充说明 #

• 如果你暂时不需要页面渲染，只想用弹窗查看结果，可以把拼接部分替换为纯文本格式，用\n实现换行：

let alertContent = '';
for(let i = 0; i < probArray.length; i++){
    const className = TARGET_CLASSES_BRAIN[i];
    const confidence = probArray[i].toFixed(4).replace(/\.?0+$/,'');
    alertContent += `${className}: ${confidence}\n`;
}
alert(alertContent);

注意alert不支持富文本格式，无法显示加粗效果，要展示加粗的类名必须用页面DOM元素渲染。

• 如果你Python训练时用的是其他归一化规则（比如将像素值归一化到-1~1区间），需要将代码中归一化部分的逻辑修改为和训练时完全一致，否则预测结果会出错。
• 所有张量使用完后调用dispose()方法释放内存，避免页面长时间运行后内存占用过高卡顿。

内容的提问来源于stack exchange，提问作者Elizabeth Grant