You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: tfjs-react-native/README.md
+122-19
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,21 @@
1
1
# Platform Adapter for React Native
2
2
3
-
Status: __Early development__. This is still an unpublished experimental package.
4
-
5
-
## Adapter Docs
6
-
7
-
TODO
3
+
This package provides a TensorFlow.js platform adapter for react native. It
4
+
provides GPU accelerated execution of TensorFlow.js supporting all major modes
5
+
of tfjs usage, include:
6
+
- Support for both model inference and training
7
+
- GPU support with WebGL via expo-gl.
8
+
- Support for loading models pretrained models (tfjs-models) from the web.
9
+
- IOHandlers to support loading models from asyncStorage and models
10
+
that are compiled into the app bundle.
11
+
12
+
## Status
13
+
This package is currently an **alpha release**. We welcome react native developers
14
+
to try it and give us feedback.
8
15
9
16
## Setting up a React Native app with tfjs-react-native
10
17
11
-
These instructions assume that you are generally familiar with [react native](https://facebook.github.io/react-native/) developement. This library has only been tested with React Native 0.58.X & 0.59.X. React Native 0.60 is not supported.
18
+
These instructions **assume that you are generally familiar with [react native](https://facebook.github.io/react-native/) developement**. This library has only been tested with React Native 0.58.X & 0.59.X. React Native 0.60 is not supported.
12
19
13
20
### Step 1. Create your react native app.
14
21
@@ -28,11 +35,7 @@ Depending on which workflow you used to set up your app you will need to install
28
35
- Expo Managed App
29
36
- Install and configure [expo-gl](https://github.com/expo/expo/tree/master/packages/expo-gl)
30
37
31
-
32
-
Note if in a _managed_ expo application these libraries should be present and you should be able to skip this step.
33
-
34
-
Install and configure [react-native-unimodules](https://github.com/unimodules/react-native-unimodules)
35
-
Install and configure [expo-gl-cpp](https://github.com/expo/expo/tree/master/packages/expo-gl-cpp) and [expo-gl](https://github.com/expo/expo/tree/master/packages/expo-gl)
38
+
> If you are in a _managed_ expo application these libraries should be present and you should be able to skip this step.
36
39
37
40
> After this point, if you are using XCode to build for ios, you should use a ‘.workspace’ file instead of the ‘.xcodeproj’
38
41
@@ -42,7 +45,7 @@ Edit your `metro.config.js` to look like the following. Changes are noted in
### Step 4.5: (Optional) Install and configure async-storage
76
+
77
+
- If you want use `asyncStorageIO` (see below) to save and load models, add [async-storage](https://github.com/react-native-community/async-storage) to your project.
72
78
73
79
### Step 5: Test that it is working
74
80
75
-
TODO: Add some sample code.
81
+
Before using tfjs in a react native app, you need to call `tf.ready()` and wait for it to complete. This is an **async function** so you might want to do this in a `componentDidMount` or before the app is rendered.
82
+
83
+
The example below uses a flag in the App state to indicate that TensorFlow is ready.
84
+
85
+
86
+
```js
87
+
import*astffrom'@tensorflow/tfjs';
88
+
import'@tensorflow/tfjs-react-native';
89
+
90
+
exportclassAppextendsReact.Component {
91
+
constructor(props) {
92
+
super(props);
93
+
this.state= {
94
+
isTfReady:false,
95
+
};
96
+
}
97
+
98
+
asynccomponentDidMount() {
99
+
// Wait for tf to be ready.
100
+
awaittf.ready();
101
+
// Signal to the app that tensorflow.js can now be used.
102
+
this.setState({
103
+
isTfReady:true,
104
+
});
105
+
}
106
+
107
+
108
+
render() {
109
+
//
110
+
}
111
+
}
112
+
113
+
```
114
+
115
+
After gathering feedback in the alpha release we will add an example to the [tensorflow/tfjs-examples](https://github.com/tensorflow/tfjs-examples) repository.
116
+
117
+
For now you can take a look at [`integration_rn59/App.tsx`](integration_rn59/App.tsx) for an example of what using tfjs-react-native looks like.
118
+
The [Webcam demo folder](integration_rn70/components/webcam) has an example of a style transfer app.
119
+
120
+
121
+
122
+
123
+
124
+
125
+
126
+
## API Docs
127
+
128
+
`tfjs-react-native` exports a number of utility functions:
tfjs react native exports a custom fetch function that is able to correctly load binary files into
181
+
`arrayBuffer`'s. The first two parameters are the same as regular [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). The 3rd paramater is an optional custom `options` object, it currently has one option
80
182
81
-
If you want use the `AsyncStorageHandler` to save and load models, add [async-storage](https://github.com/react-native-community/async-storage) to your project.
183
+
- options.isBinary: A boolean indicating if this is request for a binary file.
82
184
185
+
This is needed because the response from `fetch` as currently implemented in React Native does not support the `arrayBuffer()` call.
0 commit comments