tfjs: tf.loadModel not working in react native

TensorFlow.js version

0.10.3

Browser version

react-native 0.55.3

Problem:

tf.loadModel not working for local folder and remo url in react native, load local model not working for React

Feature request:

tf.loadModel react-native support

Code to reproduce the bug / link to feature request

const path = 'https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json';
const localPath = './tfjsmodel/model.json';

  async loadmodel(p) {
    const model = await this.loadHostedPretrainedModel(p);
    console.log(model);
  }

  async loadHostedPretrainedModel(p) {
    try {
      const model = await tf.loadModel(p);
      return model;
    } catch (err) {
      console.error(err);
    }
  }

this is the demo app i created for running tfjs in react-native, it can train and predict model locally, if you are interested this is the repo: https://github.com/tangtai/tfjsdemo

error i get when try to load model from url, i tried the code on react as well it returns the model successfully:

error i get when try to load model from local folder, for React it returns pending Promise :

the model i got from tensorflowjs file convertor: screen shot 2018-05-04 at 4 59 55 pm

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (2 by maintainers)

Commits related to this issue

Update tfjs-node to 1.2.2. (#266) — committed to tensorflow/tfjs by deleted user 5 years ago

Most upvoted comments

We just released a package for this! https://www.npmjs.com/package/@tensorflow/tfjs-react-native try it out and feel free to re-open this issues if you have trouble with it.

tafsiri on Sep 4, 2019

you can try webpack to import the cdn of tensorflowjs in Reactnative

Ivikassingh on Mar 16, 2019

tf.loadModel() works by

making a request to the specified model.json path. In the JSON response, there is a field called weightsManifest, containing a number of relative paths.
requesting binary weight values from the relative paths.

So he server that serves model.json must be able to work with relative path. This is the case for Google Cloud Storage, as many of our example and demo models are hosted there. Isn’t this also the case for AWS S3 buckets work with relative paths too? It has been a while since I last used S3.

caisq on May 10, 2018

Hi @tangtai, I’m not really familiar with React but I think you need to find a way to serve your model with a http server, moreover, it must allow CORS requests.

Is there a way to do this within the React ecosystem? Otherwise, I described a solution in a similar issue: #257.

tbrnd on May 5, 2018

Managed to make it work by using a custom loader:

const loader = {
  load: async () => {
    return {
      modelTopology: topology,
      weightSpecs: specs
      weightData: data,
    };
  }
}

const model = await tf.loadLayersModel(loader)

pyankoff on Mar 20, 2019

@timotheebernard thanks for your response, i tried to host the model on AWS s3 bucket and turn on CORS request it worked for React(web app), but didn’t work for react native(mobile app), apparently according to https://facebook.github.io/react-native/docs/network.html native apps have not concept of CORS.

how ever i can only fetch the json file from AWS and it returns the model configuration for me: screen shot 2018-05-07 at 12 24 40 pm

I’m wondering if we can somehow bypass the CORS issue and turn the model.json file into a tf.Sequential model we can use in our native app that would be great!

as i was trying to figure out what tf.loadModel does, i think here is what it uses the model.json file to configure the model https://github.com/tensorflow/tfjs-layers/blob/72d82c90619c449548c5e881c64fcc5a299c5cfc/src/models.ts#L200 but im not 100% sure.

and i also tried tfjs examples on chrome on my phone, the model still works offline, once the model is loaded.

tangtai on May 7, 2018