TensorFlowJS模型加载疑问：loadLayersModel/loadGraphModel选择及排障

一、怎么选模型加载方法？ #

直接明确两个函数的适用场景：

• loadLayersModel()：仅支持Keras/TFJS Layers格式模型，这类模型保留层结构、支持微调。你转换的TF Hub模型属于TensorFlow SavedModel格式（计算图形式），用它加载必然报错，属于格式不匹配的正常现象。
• loadGraphModel()：专门加载TensorFlow SavedModel转换的TFJS模型，也就是你现在用的冻结推理模型，只能用于预测、不支持微调。所以你应该用这个函数加载，不用纠结loadLayersModel()的报错。

二、用loadGraphModel预测无效？按这几点排查 #

1. 先确认模型转换是否正确 #

针对TF Hub的食物分类模型，正确的转换命令应该是：

tensorflowjs_converter --input_format=tf_hub https://tfhub.dev/google/aiy/vision/classifier/food_V1/1 ./TFJS

或者先下载模型到本地SavedModel目录，再转换：

tensorflowjs_converter --input_format=tf_saved_model ./saved_model_dir ./TFJS

转换完成后打开model.json，检查inputShape是否为[1,192,192,3]、outputShape是否对应分类数的向量，不符合则说明转换出错。

2. 图像预处理必须和原模型完全匹配 #

这是预测无效的重灾区，严格对齐原模型要求：

• 像素值范围：AIY食物模型要求输入归一化到[0,1]还是保留[0,255]？如果原模型内置了归一化层，你代码里的div(scalar)（除以255）会重复处理，导致输入完全异常，需查原模型文档调整。
• 图像尺寸：resize到192x192是对的，但要和原模型用相同的插值方法——原模型用双线性插值，把你代码里的resizeNearestNeighbor换成resizeBilinear。
• 通道顺序：TF默认要求RGB，React Native读取的图像一般是RGB，但最好确认避免搞成BGR。

3. React Native + Expo的特殊坑 #

• 版本对齐：@tensorflow/tfjs和@tensorflow/tfjs-react-native版本必须完全一致，版本不兼容会引发加载、计算异常。
• 图像读取优化：你用FileSystem.readAsStringAsync多次转换容易出编码问题，换更稳妥的方式：

  const response = await fetch(uri);
  const blob = await response.blob();
  const imgBuffer = await blob.arrayBuffer();
  const raw = new Uint8Array(imgBuffer);
  

• 开启GPU加速：React Native中TFJS默认可能用CPU，不仅慢还易计算错误，在tf.ready()前添加：

  await tf.setBackend('rn-webgl');
  

4. 预测结果解析要正确 #

你用prediction.datasync()[0]是错误的，需用异步方法获取数据，还要搭配模型标签文件：

const predictionTensor = model.predict(tensor_image);
const predictions = await predictionTensor.data();
// 需自行准备labels.json（从原模型文档下载），将输出索引映射为食物名称
const labels = require('./labels.json');
const topIdx = tf.argMax(predictionTensor).dataSync()[0];
console.log("预测结果：", labels[topIdx]);

三、React Native + Expo上的TFJS推荐工作流 #

1. 模型转换
   用上述正确命令转换TF Hub模型，可添加--signature_name=serving_default确保使用正确的推理签名。

2. 模型加载（缓存优化）
   避免每次预测都重新加载模型，全局缓存已加载的模型：

   let cachedModel = null;
   export const loadModel = async () => {
     if (cachedModel) return cachedModel;
     cachedModel = await tf.loadGraphModel(
       bundleResourceIO(modelJSON, modelWeights)
     ).catch(e => console.log("[LOADING ERROR]", e));
     return cachedModel;
   }
   

   同时在app.json中将TFJS模型目录加入资源列表：

   "assets": ["./TFJS/"]
   

3. 图像预处理优化
   严格对齐原模型要求，简化读取逻辑：

   export const transformImageToTensor = async (uri) => {
     const response = await fetch(uri);
     const blob = await response.blob();
     const imgBuffer = await blob.arrayBuffer();
     const raw = new Uint8Array(imgBuffer);
     let imgTensor = decodeJpeg(raw);
     imgTensor = tf.image.resizeBilinear(imgTensor, [192, 192]);
     // 若原模型内置归一化层则删除此行
     const tensorScaled = imgTensor.div(tf.scalar(255));
     const img = tf.reshape(tensorScaled, [1, 192, 192, 3]);
     return img;
   }
   

4. 预测与内存管理
   预测后手动释放张量，避免React Native内存泄漏：

   export const getPredictions = async (image) => {
     await tf.setBackend('rn-webgl');
     await tf.ready();
     const model = await loadModel();
     const tensor_image = await transformImageToTensor(image);
     const predictionTensor = model.predict(tensor_image);
     const predictions = await predictionTensor.data();
     
     // 提取Top3预测结果
     const { indices } = tf.topk(predictionTensor, 3);
     const labels = require('./labels.json');
     const topResults = indices.dataSync().map(idx => labels[idx]);
     
     // 清理张量
     tensor_image.dispose();
     predictionTensor.dispose();
     indices.dispose();
     
     return topResults;
   }
   

5. 调试技巧

   • 打印输入张量的形状和采样值，确认预处理是否正确：

     console.log("输入张量形状：", tensor_image.shape);
     console.log("输入张量采样值：", await tensor_image.slice([0,0,0,0], [1,5,5,3]).data());
     

   • 查看model.json中的signatureDefs字段，确认输入输出的名称、形状是否符合预期。

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