Expo React Native调用预测函数时出现网络请求失败报错及崩溃问题

核心问题点 #

• 重复加载模型：每次调用predict都重新加载模型，极大消耗内存，是崩溃的主要诱因。
• 图像处理逻辑错误：ImageManipulator.manipulateAsync返回的是含uri的对象，直接fetch该对象会触发「Network request failed」错误。
• API环境不匹配：tf.node.decodeImage是Node.js环境API，不适用于React Native。
• 无错误捕获机制：异步操作未加try/catch，导致未处理的Promise拒绝警告。
• Tensor内存泄漏：使用后的Tensor未手动清理，长期运行会耗尽内存引发崩溃。

修复后的代码示例 #

import React, { useState, useEffect } from 'react';
import * as tf from '@tensorflow/tfjs';
import { bundleResourceIO } from '@tensorflow/tfjs-react-native';
import * as ImageManipulator from 'expo-image-manipulator';

const modelJSON = require("../../assets/wheatDiseaseModel/model.json");
const modelWeights = require("../../assets/wheatDiseaseModel/group1-shard.bin");

export default function YourComponent() {
  const [selectedImage, setSelectedImage] = useState(null);
  const [model, setModel] = useState(null);
  const [modelPrediction, setModelPrediction] = useState(null);

  // 组件挂载时仅加载一次模型
  useEffect(() => {
    const loadModel = async () => {
      await tf.ready(); // 确保TensorFlow环境初始化完成
      const loadedModel = await tf.loadLayersModel(bundleResourceIO(modelJSON, modelWeights));
      setModel(loadedModel);
    };
    loadModel();
  }, []);

  const predict = async () => {
    if (!model || !selectedImage) return;

    try {
      // 调整图片尺寸并获取base64编码
      const resizedImage = await ImageManipulator.manipulateAsync(
        selectedImage,
        [{ resize: { width: 224, height: 224 } }],
        { compress: 1, format: ImageManipulator.SaveFormat.PNG, base64: true }
      );

      // 将base64转换为Tensor并预处理
      const imageBuffer = tf.util.encodeString(resizedImage.base64, 'base64').buffer;
      const imageTensor = tf.browser.decodeImage(new Uint8Array(imageBuffer), 3)
        .resizeNearestNeighbor([224, 224])
        .expandDims(0) // 添加batch维度，匹配模型输入格式
        .toFloat()
        .div(tf.scalar(255)); // 归一化至0-1区间，与训练逻辑对齐

      // 执行预测并转换为可使用的数组
      const prediction = model.predict(imageTensor);
      const predictionArray = await prediction.data();
      setModelPrediction(predictionArray);
      console.log('预测结果:', predictionArray);

      // 清理Tensor释放内存
      imageTensor.dispose();
      prediction.dispose();
    } catch (error) {
      console.error('预测出错:', error);
    }
  };

  // 你的UI渲染代码
  return (
    // ...
  );
}

关键修复说明 #

• 模型预加载：通过useEffect在组件初始化时仅加载一次模型，避免重复加载浪费资源。
• 图像数据获取优化：利用ImageManipulator的base64选项直接获取图像编码，无需错误的fetch操作。
• API替换：用React Native兼容的tf.browser.decodeImage替代Node.js专属API。
• 输入格式适配：添加batch维度、归一化处理，确保输入与模型训练时的格式一致。
• 内存管理：手动调用dispose()清理不再使用的Tensor，防止内存泄漏。
• 错误捕获：用try/catch包裹异步流程，捕获并处理异常，避免未处理的Promise拒绝。

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