run tfjs on mobile using React Native

[tangtai]

To get help from the community, check out our Google group.

TensorFlow.js version

0.9.1

Browser version

"react": "16.3.1",
"react-native": "0.55.2"

Describe the problem or feature request

just out of curiosity i tried run tfjs on react native, it sort of works, it works on debug mode but when i turn debug mode off there was en error on window.location.search in the file environment.js, since there is not window object when debug mode turned off, the object is created in chrome debugging mode. i wonder if there is a way to get around it or to add react-native support, i think there will be lots possibilities if tfjs can run on mobile app!

Code to reproduce the bug / link to feature request

https://github.com/tangtai/tensorflowJs-rn
here is the code i created

if the code runs the app can train a linear model.

[tafsiri]

@tangtai Interesting! Is this something you'd be interested in looking into further? If so you could try adding a guard at this line https://github.com/tensorflow/tfjs-core/blob/1dd98bb7552d168d4ae4e09b3ef9771dd304cad8/src/environment.ts#L403 to also return early if window.location.search is undefined.

Note that this is in tfjs-core. So an easier way to test it would be to check out that repository, make the change and build it from source and then import just the core library bundle into your react-native app. It would be nice to know if that is the only thing that breaks or if there is other stuff.

Let us know if this is something you'd be interested in. Else i might be able to add that guard myself, but i don't have a react-native setup to try it out on.

[tangtai]

@tafsiri I would be interested in looking into it further, but i only have limited knowledge about things working in the backend if you don't mind working me thought it. so i downloaded the tfjs-core folder and put it in to my project, when i tried to import it, it is giving me errors:

---

error: bundling failed: Error: While trying to resolve module ./tfjs-core from file /Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/App.js, the package /Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/tfjs-core/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/tfjs-core/dist/index.js. Indeed, none of these files exist:

• /Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/tfjs-core/dist/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
• /Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/tfjs-core/dist/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)
  at ResolutionRequest.resolveDependency (/Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:103:15)
  at DependencyGraph.resolveDependency (/Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/node-haste/DependencyGraph.js:272:4579)
  at dependencies.map.relativePath (/Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/DeltaBundler/traverseDependencies.js:376:19)
  at Array.map ()
  at resolveDependencies (/Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/DeltaBundler/traverseDependencies.js:374:16)
  at /Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/DeltaBundler/traverseDependencies.js:212:33
  at Generator.next ()
  at step (/Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:313)
  at /Users/tangtaichen/Desktop/reactNativeProjects/TensorflowRn/node_modules/metro/src/DeltaBundler/traverseDependencies.js:297:473
  at

---

i am able to change the code in the node_modules /@tensorflow directly to fix the issue? but i couldn't find the file environment.ts in the @tensorflow/tfjs-core folder.

[tafsiri]

@tangtai in your downloaded tfjs-core folder could you try running yarn and then yarn build? The yarn build should produce a dist folder with the needed files. If you are not using yarn the equivalent npm commands are npm install and npm run build.

If that works you would need to run yarn build after making changes in tfjs-core

[tangtai]

@tafsiri Yes i tired that i added code:

if (typeof window === 'undefined' || typeof window.location.search === 'undefined') { return features; }

but the error pop up else where in backend_cpu.js, the only thing uses window.location.search is the const urlParams what is the const used for in the tfjs-core?

[manrajgrover]

@tangtai Could you please try logging window.location? It would surely be undefined, and in that case return, ie.

if (typeof window === 'undefined' ||
    typeof window.location === 'undefined') {
    return features;
}

[tangtai]

@manrajgrover Yes it worked (both in not debugging mode and release mode!), but what i changed is in the tfjs-core, how do i access the tfjs-layers API, since tfjs-code is a dependency of tfjs-layers. how do i buddle two packages together into my app? after that i will try to build a demo app to test it out!

[manrajgrover]

@tangtai Awesome, I think we can push this change to Core API and make a release.

cc. @tafsiri @nsthorat @dsmilkov

[dsmilkov]

@manrajgrover want to make the change? Thank you!

[tafsiri]

@tangtai We just released a package for this! https://www.npmjs.com/package/@tensorflow/tfjs-react-native