TensorFlow.js加载重训练Coco-SSD模型浏览器运行失败问题

我之前也踩过类似的坑，自定义训练的Object Detection模型转TFJS时，经常会因为张量类型、输入尺寸不兼容触发奇怪的错误，下面是一步步的解决思路：

1. 先排查SavedModel的输出节点类型 #

问题的根源大概率是自定义训练模型的输出节点数据类型和TFJS预期的不匹配。先用TensorFlow的SavedModel CLI工具确认输出类型：

saved_model_cli show --dir ./saved_model --all

重点看detection_boxes、detection_classes、detection_scores、num_detections这几个节点的dtype。官方Coco-SSD的num_detections通常是float32，但自定义训练的模型往往会输出int32，这就是触发TensorArray dtype不匹配错误的原因。

2. 修正模型转换命令与输出类型 #

方法一：转换前调整模型输出类型 #

如果发现num_detections是int32，可以用一段简单的TF代码包装原SavedModel，把输出转成TFJS兼容的float32：

import tensorflow as tf

# 加载原训练好的SavedModel
loaded_model = tf.saved_model.load('./saved_model')
infer_func = loaded_model.signatures['serving_default']

# 包装模型，调整输出类型
@tf.function(input_signature=infer_func.input_signature)
def wrapped_infer(input_tensor):
    outputs = infer_func(input_tensor)
    # 将num_detections转为float32
    outputs['num_detections'] = tf.cast(outputs['num_detections'], tf.float32)
    # 可选：detection_classes也转成float32，避免后续类型问题
    outputs['detection_classes'] = tf.cast(outputs['detection_classes'], tf.float32)
    return outputs

# 保存修改后的模型
tf.saved_model.save(loaded_model, './saved_model_fixed', signatures={'serving_default': wrapped_infer})

然后用修改后的模型重新执行转换命令：

tensorflowjs_converter --input_format=tf_saved_model --output_format=tensorflowjs --output_node_names='detection_boxes,detection_classes,detection_scores,num_detections' --saved_model_tags=serve ./saved_model_fixed ./web_model

方法二：补充转换命令参数 #

有时候默认的签名名称可能不是serving_default，可以在转换时明确指定，避免节点匹配错误：

tensorflowjs_converter --input_format=tf_saved_model --output_format=tensorflowjs --output_node_names='detection_boxes,detection_classes,detection_scores,num_detections' --saved_model_tags=serve --signature_name=serving_default ./saved_model ./web_model

3. 修正前端代码的输入预处理 #

你的前端代码里用了224x224的输入，但Coco-SSD默认的输入尺寸是300x300（取决于你训练时的配置），输入尺寸不匹配也会触发奇怪的错误。修改预处理逻辑：

image.src = imageURL;
var img;
const runButton = document.getElementById('run');
// 替换成你训练模型时设置的输入尺寸，这里以300x300为例
const INPUT_SIZE = 300;

runButton.onclick = async () => {
    console.log('model start');
    const model = await modelPromise;
    console.log('model loaded');
    
    const batched = tf.tidy(() => {
        if (!(image instanceof tf.Tensor)) {
            img = tf.fromPixels(image)
                // 调整到模型预期的输入尺寸
                .resizeNearestNeighbor([INPUT_SIZE, INPUT_SIZE])
                // 归一化（匹配训练时的预处理逻辑，这里是0-1范围）
                .toFloat()
                .div(tf.scalar(255.0));
        }
        return img.expandDims(0);
    });
    
    console.log('starting prediction');
    const result = await model.executeAsync(batched);
    
    // 可选：打印结果类型，确认是否符合预期
    console.log('num detections dtype:', result[3].dtype);
    
    batched.dispose();
    tf.dispose(result);
}

4. 解决官方demo的字节长度错误 #

如果替换官方demo的模型路径后出现byte length of float32Array should be a multiple of 4错误，大概率是：

• 转换后的模型权重文件（.bin）损坏，重新用修正后的命令转换
• 模型输入尺寸和demo的预处理逻辑不匹配，把demo里的输入尺寸改成你训练时的数值
• 确保web_model文件夹里的model.json和所有.bin文件完整

按这些步骤处理后，应该能解决你遇到的两个错误。

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