TensorFlow转TensorFlow.js时InputLayer输入形状错误的解决方法

问题背景 #

我要在Web应用中使用CNN情感分类算法，通过终端命令：

tensorflowjs_converter --input_format keras models/emotion_model.h5 models/tfjs_model

将TensorFlow的emotion_model.h5模型转换为TensorFlow.js模型。但在Web应用中加载该模型进行情感分类时，控制台报错：

Uncaught (in promise) Error: An InputLayer should be passed either a batchInputShape or an inputShape

训练阶段我已经明确定义了input_shape参数，且TensorFlow模型运行正常，模型层结构如下：

emotion_model = tf.keras.Sequential()

emotion_model.add(tf.keras.layers.Input(shape=(48, 48, 1)))
emotion_model.add(tf.keras.layers.Conv2D(32, kernel_size=(3,3), activation = 'relu'))
emotion_model.add(tf.keras.layers.Conv2D(64, kernel_size=(3,3), activation = 'relu'))
emotion_model.add(tf.keras.layers.MaxPooling2D(pool_size=(2,2)))
emotion_model.add(tf.keras.layers.Dropout(0.25))

emotion_model.add(tf.keras.layers.Conv2D(128, kernel_size=(3,3), activation = 'relu'))
emotion_model.add(tf.keras.layers.MaxPooling2D(pool_size=(2,2)))
emotion_model.add(tf.keras.layers.Conv2D(128, kernel_size=(3,3), activation = 'relu'))
emotion_model.add(tf.keras.layers.MaxPooling2D(pool_size=(2,2)))
emotion_model.add(tf.keras.layers.Dropout(0.25))

emotion_model.add(tf.keras.layers.Flatten())
emotion_model.add(tf.keras.layers.Dense(1024, activation='relu'))
emotion_model.add(tf.keras.layers.Dropout(0.5))
emotion_model.add(tf.keras.layers.Dense(7, activation='relu'))

emotion_model.compile(loss='categorical_crossentropy', optimizer= keras.optimizers.Adam(learning_rate= 0.0001, weight_decay=1e-6), metrics=['accuracy'])

已尝试的无效方法 #

• 将TensorFlow版本从2.16.0降级至2.15.0，问题仍未解决
• 不想在TensorFlow.js中重新训练模型

可行解决方案 #

方案1：重新保存模型并确保输入形状被正确序列化 #

加载已训练的模型，重新构建带有明确输入层的模型后再保存，这样转换时TFJS能正确识别输入形状：

from tensorflow import keras

# 加载原模型
model = keras.models.load_model('models/emotion_model.h5')

# 重新构建模型，显式指定输入层形状
input_layer = keras.layers.Input(shape=(48, 48, 1))
x = input_layer
# 跳过原模型的输入层，复用后续所有层
for layer in model.layers[1:]:
    x = layer(x)

# 创建新模型并保存
fixed_model = keras.Model(inputs=input_layer, outputs=x)
fixed_model.save('models/emotion_model_fixed.h5')

# 再次执行转换命令
# tensorflowjs_converter --input_format keras models/emotion_model_fixed.h5 models/tfjs_model_fixed

方案2：转换模型时指定签名名称 #

部分情况下，模型的签名信息未被正确导出，转换时指定默认签名可解决问题：

tensorflowjs_converter --input_format keras --signature_name serving_default models/emotion_model.h5 models/tfjs_model

方案3：在Web端加载时手动修复模型 #

如果不想重新转换模型，可在TFJS加载后手动重建模型，指定输入形状：

async function loadFixedModel() {
    // 加载转换后的模型
    const originalModel = await tf.loadLayersModel('models/tfjs_model/model.json');
    
    // 创建新的输入层，明确指定形状
    const input = tf.input({ shape: [48, 48, 1] });
    let x = input;
    
    // 跳过原模型的输入层，依次应用后续所有层
    for (const layer of originalModel.layers.slice(1)) {
        x = layer.apply(x);
    }
    
    // 创建修复后的模型
    const fixedModel = tf.model({ inputs: input, outputs: x });
    return fixedModel;
}

// 使用修复后的模型进行预测
loadFixedModel().then(model => {
    // 示例：准备输入数据（48x48单通道灰度图）
    const inputData = tf.randomNormal([1, 48, 48, 1]);
    const prediction = model.predict(inputData);
    prediction.print();
});

问题原因说明 #

这个错误通常是因为Keras模型保存时，输入层的形状元数据没有被完整序列化到h5文件中。虽然训练时通过Input(shape=...)定义了输入形状，但这种Sequential.add(Input)的构建方式，有时会导致保存的模型丢失输入层的形状信息，进而让TFJS转换后无法识别输入维度。

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