Create 'integration' demo for react native using expo

tfjs-react-native/integration/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

tfjs-react-native/integration_rn59/App.tsx → tfjs-react-native/integration/App.tsx

@@ -36,7 +36,7 @@ interface AppState {
   currentScreen: Screen;
 }
 
-export class App extends React.Component<{}, AppState> {
+export default class App extends React.Component<{}, AppState> {
   constructor(props: {}) {
     super(props);
     this.state = {

tfjs-react-native/integration/app.json

@@ -0,0 +1,33 @@
+{
+  "expo": {
+    "name": "integration",
+    "slug": "integration",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

tfjs-react-native/integration/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

tfjs-react-native/integration_rn59/components/webcam/realtime_demo.tsx → tfjs-react-native/integration/components/webcam/realtime_demo.tsx

@@ -19,8 +19,7 @@ import React from 'react';
 import {ActivityIndicator, Button, StyleSheet, View, Platform } from 'react-native';
 import Svg, { Circle, Rect, G, Line} from 'react-native-svg';
 
-import * as Permissions from 'expo-permissions';
-import { Camera } from 'expo-camera';
+import { Camera, CameraType } from 'expo-camera';
 import { ExpoWebGLRenderingContext } from 'expo-gl';
 
 import * as tf from '@tensorflow/tfjs';
@@ -60,7 +59,7 @@ export class RealtimeDemo extends React.Component<ScreenProps,ScreenState> {
     super(props);
     this.state = {
       isLoading: true,
-      cameraType: Camera.Constants.Type.front,
+      cameraType: CameraType.front,
       modelName: 'posenet',
     };
     this.handleImageTensorReady = this.handleImageTensorReady.bind(this);
@@ -85,6 +84,7 @@ export class RealtimeDemo extends React.Component<ScreenProps,ScreenState> {
   async handleImageTensorReady(
     images: IterableIterator<tf.Tensor3D>,
     updatePreview: () => void, gl: ExpoWebGLRenderingContext) {
+    console.log('tensor camera is ready');
     const loop = async () => {
       const {modelName} = this.state;
       if(!AUTORENDER) {
@@ -128,8 +128,8 @@ export class RealtimeDemo extends React.Component<ScreenProps,ScreenState> {
   }
 
   async componentDidMount() {
-    const { status } = await Permissions.askAsync(Permissions.CAMERA);
-
+    const {status} = await Camera.requestCameraPermissionsAsync();
+    console.log(status);
     const [blazefaceModel, posenetModel] =
       await Promise.all([this.loadBlazefaceModel(), this.loadPosenetModel()]);
 
@@ -255,7 +255,7 @@ export class RealtimeDemo extends React.Component<ScreenProps,ScreenState> {
         resizeHeight={inputTensorHeight}
         resizeWidth={inputTensorWidth}
         resizeDepth={3}
-        onReady={this.handleImageTensorReady}
+        onReady={this.handleImageTensorReady.bind(this)}
         autorender={AUTORENDER}
       />
       <View style={styles.modelResults}>

tfjs-react-native/integration_rn59/components/webcam/webcam_demo.tsx → tfjs-react-native/integration/components/webcam/webcam_demo.tsx

@@ -17,8 +17,7 @@
 
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View, Image, Text, TouchableHighlight } from 'react-native';
-import * as Permissions from 'expo-permissions';
-import { Camera } from 'expo-camera';
+import { Camera, CameraType } from 'expo-camera';
 import {StyleTranfer} from './style_transfer';
 import {base64ImageToTensor, tensorToImageUrl, resizeImage, toDataUri} from './image_utils';
 import * as tf from '@tensorflow/tfjs';
@@ -46,15 +45,16 @@ export class WebcamDemo extends React.Component<ScreenProps,ScreenState> {
     super(props);
     this.state = {
       mode: 'results',
-      cameraType: Camera.Constants.Type.back,
+      cameraType: CameraType.back,
       isLoading: true,
     };
     this.styler = new StyleTranfer();
   }
 
   async componentDidMount() {
     await this.styler.init();
-    const { status } = await Permissions.askAsync(Permissions.CAMERA);
+    const {status} = await Camera.requestCameraPermissionsAsync();
+
     this.setState({
       hasCameraPermission: status === 'granted',
       isLoading: false

tfjs-react-native/integration/metro.config.js

@@ -0,0 +1,8 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+config.resolver.assetExts.push('bin');
+
+module.exports = config;

tfjs-react-native/integration/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "integration",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "copy-rn": "rsync -a ../ node_modules/@tensorflow/tfjs-react-native --exclude=integration* --exclude=node_modules --delete"
+  },
+  "dependencies": {
+    "@expo/webpack-config": "^0.17.2",
+    "@react-native-async-storage/async-storage": "^1.13.0",
+    "@tensorflow-models/blazeface": "^0.0.2",
+    "@tensorflow-models/mobilenet": "^2.0.4",
+    "@tensorflow-models/posenet": "^2.2.1",
+    "@tensorflow/tfjs": "3.7.0",
+    "expo": "~47.0.12",
+    "expo-camera": "~13.1.0",
+    "expo-gl": "~12.0.1",
+    "expo-gl-cpp": "^7.0.0",
+    "expo-image-manipulator": "~11.0.0",
+    "expo-status-bar": "~1.4.2",
+    "jasmine-core": "^3.4.0",
+    "jpeg-js": "^0.4.4",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-fs": "2.14.1",
+    "react-native-svg": "13.4.0",
+    "react-native-web": "~0.18.9",
+    "rn-fetch-blob": "^0.10.15"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "~18.0.14",
+    "@types/react-native": "~0.70.6",
+    "typescript": "^4.6.3"
+  },
+  "private": true
+}

tfjs-react-native/integration_rn59/tsconfig.json → tfjs-react-native/integration/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig",
+  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -10,9 +10,5 @@
     "noEmit": true,
     "strict": true,
     "target": "esnext",
-    "skipLibCheck": true,
-    "types": ["node", "webdriverio", "jasmine"]
-  },
-  "include": ["./"],
-  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
+  }
 }