Importing your own tensorflow model to react native

Question

I have a model which I trained and is stored as h5 file, I used tensorflowJs converter to convert it to json file and weights. I'm using expo, and I want to load that model, I understand that bundleResourceIO doesn't work with exp and I'm suppose to load it from a webserver, but I cannot find any tutorial or guide, is that even possible?

Answer 1

You can use bundleResourceIO.

If you have multiple bin files then reconvert it again and set --weight_shard_size_bytes 60000000 this sets the maximum size of the weight_shard_size_bytes file to 60Mb.

import {bundleResourceIO} from "@tensorflow/tfjs-react-native";


 //Loading model from models folder
  const modelJSON = require("../model/model.json");
  const modelWeights = require("../model/group1-shard1of1.bin");


// Load the model from the models folder
  const loadModel = async () => {
    const model = await tf
      .loadLayersModel(bundleResourceIO(modelJSON, modelWeights))
      .catch(e => console.log(e));
    console.log("Model loaded!");
    return model;
  };

Dependencies:

"dependencies": {
    "@react-native-community/async-storage": "^1.12.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "@tensorflow-models/blazeface": "^0.0.5",
    "@tensorflow/tfjs": "^2.0.0",
    "@tensorflow/tfjs-backend-webgl": "2.0.0",
    "@tensorflow/tfjs-converter": "^1.5.2",
    "@tensorflow/tfjs-core": "2.0.0",
    "@tensorflow/tfjs-react-native": "^0.3.0",
    "expo": "~38.0.8",
    "expo-camera": "~8.3.1",
    "expo-gl": "^8.4.0",
    "expo-gl-cpp": "~8.3.1",
    "expo-status-bar": "^1.0.2",
    "jpeg-js": "^0.4.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-canvas": "^0.1.37",
    "react-native-fs": "^2.16.6",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.9.0",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-web": "~0.11.7"
  },

Answer 2

I have resolved the issue by adding a metro.config.js file. Add the follow code into the file so that it is able to read the bin file.

const { getDefaultConfig } = require('metro-config');
module.exports = (async () => {
  const defaultConfig = await getDefaultConfig();
  const { assetExts } = defaultConfig.resolver;
  return {
    resolver: {
      // Add bin to assetExts
      assetExts: [...assetExts, 'bin'],
    }
  };
})();

If you need a video guide watch this: https://www.youtube.com/watch?v=pC7mCEHiYQw