使用tfjs加载CNN模型报错：An InputLayer需传入batchInputShape或inputShape

你遇到的错误是因为tfjs加载模型时，无法正确识别隐含在Conv2D层中的输入形状定义。尽管你在第一个Conv2D层指定了input_shape，但Keras会自动生成一个隐含的InputLayer，而tfjs对这种隐含定义的兼容性不佳，需要显式定义InputLayer来解决。

解决步骤： #

1. 修改模型架构，显式添加InputLayer
   在Python代码中，移除第一个Conv2D层的input_shape参数，改为先添加一个显式的InputLayer：

   from tensorflow.keras.models import Sequential
   from tensorflow.keras.layers import InputLayer, Conv2D, MaxPooling2D, Dropout, BatchNormalization, GaussianNoise, Flatten, Dense
   
   model = Sequential()
   model.add(InputLayer(input_shape=(28,28,1)))  # 显式定义输入层
   model.add(Conv2D(64,kernel_size=(3,3),activation='relu',padding='same'))
   # 后续层保持原有结构不变
   model.add(Conv2D(64,kernel_size=(3,3),activation='relu',padding='same'))
   model.add(MaxPooling2D(pool_size=(2,2)))
   model.add(Dropout(0.15))
   model.add(BatchNormalization())
   model.add(Conv2D(128,kernel_size=(3,3),activation='relu',padding='same'))
   model.add(Conv2D(128,kernel_size=(3,3),activation='relu',padding='same'))
   model.add(MaxPooling2D(pool_size=(2,2)))
   model.add(Dropout(0.15))
   model.add(BatchNormalization())
   model.add(Conv2D(256,kernel_size=(3,3),activation='relu',padding='same'))
   model.add(Conv2D(256,kernel_size=(3,3),activation='relu',padding='same'))
   model.add(MaxPooling2D(pool_size=(2,2)))
   model.add(Dropout(0.15))
   model.add(BatchNormalization())
   model.add(GaussianNoise(0.25))
   model.add(Flatten())
   model.add(Dense(128,activation='relu'))
   model.add(Dropout(0.15))
   model.add(BatchNormalization())
   model.add(GaussianNoise(0.25))
   model.add(Dense(10,activation='softmax'))
   model.summary()
   

2. 重新保存并转换模型

   • 重新训练或加载权重后，保存模型：

     model.save('my_cnn_model')  # 保存为SavedModel格式
     # 也可以保存为.h5格式
     # model.save('my_cnn_model.h5')
     

   • 使用tfjs-converter重新转换模型为tfjs格式：
     若为SavedModel格式：

     tensorflowjs_converter --input_format=keras_saved_model ./my_cnn_model ./tfjs_cnn_model
     

     若为.h5格式：

     tensorflowjs_converter --input_format=keras ./my_cnn_model.h5 ./tfjs_cnn_model
     

3. 检查tfjs加载代码
   确保在JavaScript中使用正确的加载方式：

   async function loadModel() {
     const model = await tf.loadLayersModel('./tfjs_cnn_model/model.json');
     console.log('模型加载完成');
     return model;
   }
   

4. 版本兼容性检查
   确保Python的TensorFlow版本与tfjs版本尽量匹配，比如TensorFlow 2.10对应tfjs 4.x，避免因版本差异导致的解析问题。

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