TensorFlow.js图模型本地保存与加载异常问题

问题根源 #

1. localstorage://协议的保存处理程序未实现Graph Model支持，导致报错"no save handler for this code"。
2. 直接使用本地相对路径会被Metro当作网络请求处理，无法正确访问模型文件。
3. asyncStorageIO仅兼容Sequential/Functional Model，不支持Graph Model的序列化逻辑。

可行解决方案：使用文件系统保存加载Graph Model #

通过react-native-fs提供的本地文件系统存储Graph Model，tfjs-react-native的tf.io.fileSystem支持Graph Model的完整保存与加载。

步骤1：安装依赖

npm install react-native-fs @react-native-async-storage/async-storage
# iOS需额外执行
cd ios && pod install

步骤2：修改代码实现

import * as tf from "@tensorflow/tfjs";
import RNFS from 'react-native-fs';

export const loadModel = async () => {
    await tf.ready();
    // 从远程加载Graph Model
    const model = await tf.loadGraphModel("https://test_model/model.json");
    console.log("远程模型加载完成");

    // 定义本地保存目录（应用私有文档目录，无权限问题）
    const localModelDir = `${RNFS.DocumentDirectoryPath}/my-graph-model`;
    // 确保目录存在，不存在则创建
    if (!(await RNFS.exists(localModelDir))) {
        await RNFS.mkdir(localModelDir);
    }

    // 保存模型到本地文件系统
    await model.save(tf.io.fileSystem(localModelDir));
    console.log("模型已保存到本地");

    // 从本地加载Graph Model
    const loadedModel = await tf.loadGraphModel(`file://${localModelDir}/model.json`);
    console.log("本地模型加载完成");

    return loadedModel;
}

关键说明 #

• 使用RNFS.DocumentDirectoryPath作为存储目录：这是应用的私有文档目录，系统不会自动清理，且无需额外权限配置。
• tf.io.fileSystem专门适配了Graph Model的序列化格式，能完整保存模型结构与权重文件。
• 加载本地模型时必须使用file://前缀，确保TensorFlow.js识别为本地文件路径而非网络地址。

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