React Native中使用TensorFlow.js自定义模型可行吗？求加载方案

完全可以直接使用@tensorflow/tfjs包在React Native CLI项目里加载TensorFlow.js格式的自定义Keras模型并完成预测，以下是具体的可运行方案和代码示例：

一、安装依赖 #

首先安装核心TensorFlow.js包：

npm install @tensorflow/tfjs
# 或使用yarn
yarn add @tensorflow/tfjs

如果需要加载本地assets中的模型，额外安装react-native-fs用于获取文件路径：

npm install react-native-fs
# 或
yarn add react-native-fs

二、本地模型加载与预测示例 #

假设你已将Keras导出的TensorFlow.js模型（包含model.json和对应权重文件）放入项目的assets/models目录，先配置react-native.config.js（无则新建）：

module.exports = {
  assets: ['./assets/models/'],
};

执行npx react-native link（RN 0.60+版本多数可自动链接，若未生效则手动执行）。

组件实现代码：

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import * as tf from '@tensorflow/tfjs';
import RNFS from 'react-native-fs';

const ModelPredictor = () => {
  const [model, setModel] = useState(null);
  const [predictionResult, setPredictionResult] = useState('');

  // 初始化TF环境并加载模型
  useEffect(() => {
    const loadModel = async () => {
      // 等待TensorFlow.js环境初始化完成
      await tf.ready();
      
      // 获取本地模型的绝对路径
      const modelPath = `file://${RNFS.DocumentDirectoryPath}/assets/models/model.json`;
      // 加载Layers模型
      const loadedModel = await tf.loadLayersModel(modelPath);
      setModel(loadedModel);
      console.log('本地模型加载成功');
    };

    loadModel();

    // 组件卸载时清理模型，避免内存泄漏
    return () => {
      model?.dispose();
    };
  }, []);

  // 执行预测逻辑
  const runPrediction = async () => {
    if (!model) {
      setPredictionResult('模型未加载完成');
      return;
    }

    // 构造测试输入（需匹配你的模型输入形状与数据类型）
    const inputTensor = tf.tensor2d([[0.1, 0.2, 0.3, 0.4]], [1, 4]);
    
    // 运行预测
    const prediction = model.predict(inputTensor);
    const resultArray = await prediction.data();
    
    // 更新结果显示
    setPredictionResult(`预测结果：${resultArray.join(', ')}`);
    
    // 清理张量，释放内存
    inputTensor.dispose();
    prediction.dispose();
  };

  return (
    <View style={{ padding: 20, gap: 15 }}>
      <Text>{model ? '模型已加载就绪' : '正在加载模型...'}</Text>
      <Button title="执行预测" onPress={runPrediction} disabled={!model} />
      <Text style={{ marginTop: 10 }}>{predictionResult}</Text>
    </View>
  );
};

export default ModelPredictor;

三、URL加载远程模型的可行方案 #

若要从远程URL加载模型，需先解决两个关键配置问题：

1. 远程服务器需开启CORS跨域权限，否则React Native会请求失败；
2. 测试环境使用HTTP协议时：
   • Android端：在android/app/src/main/AndroidManifest.xml的<application>标签中添加android:usesCleartextTraffic="true"；
   • iOS端：在Info.plist中添加NSAppTransportSecurity配置，允许HTTP请求。

替换后的远程模型加载代码：

// 替换useEffect中的loadModel函数
const loadModel = async () => {
  await tf.ready();
  // 替换为你的远程模型JSON文件URL
  const remoteModelUrl = 'https://your-server-domain.com/models/model.json';
  const loadedModel = await tf.loadLayersModel(remoteModelUrl);
  setModel(loadedModel);
  console.log('远程模型加载成功');
};

常见失败排查点 #

• 先通过浏览器访问model.json和权重文件，确认可正常访问；
• 检查model.json中声明的权重文件路径与实际URL路径一致；
• 确保预测输入的张量形状、数据类型与模型训练时的输入完全匹配。

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