Add rn integration test app #1874

tafsiri · 2019-08-09T20:21:58Z

To see the logs from the Cloud Build CI, please join either
our discussion
or announcement mailing list.

This adds an app that can serve as an integration testbed for tfjs-react-native. The PR looks somewhat big because there is a fair amount of generated iOS and Android boilerplate. The files that needs review all end in .ts .js and .tsx (and the regular js and ts configuration files we are used to). A few assets that the app uses are also included. The android and ios subfolders are pretty much all autogenerated.

This change is

nsthorat · 2019-08-12T15:41:31Z

Can we avoid checking in the generated files? It would be good to keep the clone time small on slow connections (already a big issue).

tafsiri · 2019-08-12T15:56:17Z

Clarified in person, that by autogenerated I meant boilerplate that we don't need to change, but not code that can be generated on the fly.

However I will look into:

Using a smaller model for the bundleLoader test.

nsthorat

Reviewed 72 of 72 files at r1.
Reviewable status: complete! 1 of 1 approvals obtained (waiting on @dsmilkov, @nsthorat, and @tafsiri)

tfjs-react-native/README.md, line 11 at r1 (raw file):

## Setting up a React Native app with tfjs-react-native

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.

wait, isnt our dep on 0.60?

tfjs-react-native/README.md, line 68 at r1 (raw file):

### Optional Steps

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

nit: period

tfjs-react-native/integration_rn59/android/app/build.gradle, line 1 at r1 (raw file):

apply plugin: "com.android.application"

I feel like we should put licenses at the top of these files

tfjs-react-native/integration_rn59/assets/model/model.json, line 1 at r1 (raw file):

as we spoke about offline, can we either make this smaller or put it on GCP?

tfjs-react-native/integration_rn59/components/MobilenetDemo.tsx, line 27 at r1 (raw file):

  StatusBar,
  Image,
  Text,

remove the comma here and this will format properly

tfjs-react-native/integration_rn59/components/MobilenetDemo.tsx, line 72 at r1 (raw file):

    // Compute a checksum for the image. Useful for debugging.
    const imageTensorSum = imageTensor.sum();
    const imageChecksum = await imageTensorSum.dataSync()[0];

use .data()

tfjs-react-native/integration_rn59/components/MobilenetDemo.tsx, line 84 at r1 (raw file):

      predictionTime: end - start,
      imageChecksum,
    })

semicolon

tfjs-react-native/integration_rn59/components/MobilenetDemo.tsx, line 88 at r1 (raw file):

  }

  imageToTensor(rawImageData: ArrayBuffer) {

return type

tfjs-react-native/integration_rn59/components/MobilenetDemo.tsx, line 89 at r1 (raw file):

  imageToTensor(rawImageData: ArrayBuffer) {
    const { width, height, data } = jpeg.decode(rawImageData, true);

pull true to a named const

tfjs-react-native/integration_rn59/components/MobilenetDemo.tsx, line 92 at r1 (raw file):

    // Drop the alpha channel info for mobilenet
    const buffer = new Uint8Array(width * height * 3);
    let offset = 0; //offset into original data

nit: space after //

tfjs-react-native/integration_rn59/components/ml.ts, line 21 at r1 (raw file):

import * as tf from '@tensorflow/tfjs';
import {asyncStorageIO, bundleResourceIO} from '@tensorflow/tfjs-react-native';

remove blank line

tfjs-react-native/integration_rn59/components/ml.ts, line 28 at r1 (raw file):

export async function simpleOpRunner() {
  return async () => {
    const res = tf.tidy(() => tf.square(3));

tidy() isnt doing anything here

tfjs-react-native/integration_rn59/components/ml.ts, line 29 at r1 (raw file):

  return async () => {
    const res = tf.tidy(() => tf.square(3));
    const data = res.dataSync()[0];

use data()

tfjs-react-native/integration_rn59/components/ml.ts, line 37 at r1 (raw file):

 * Run a simple precision test runner.
 */
export async function precisionTestRunner() {

why do you need to return functions here? just call it directly. if for some reason you need the function, the parent doesnt need to be async

tfjs-react-native/integration_rn59/components/ml.ts, line 42 at r1 (raw file):

    const data = res.dataSync()[0];
    return JSON.stringify(data);
  }

semicolon

tfjs-react-native/integration_rn59/components/ml.ts, line 55 at r1 (raw file):

  await model.classify(input);

  // const pic = tf.tensor(coffeePicData, [1, 24, 24, 3]);

remove this comment

tfjs-react-native/integration_rn59/components/ml.ts, line 66 at r1 (raw file):

 * Runner for a model bundled into the app itself.
 */
const modelJson = require('../assets/model/model.json');

maybe this model should be named?

tafsiri

Reviewable status: complete! 1 of 1 approvals obtained (waiting on @dsmilkov and @nsthorat)

tfjs-react-native/README.md, line 11 at r1 (raw file):