CODEWITHSUNDEEP
react-nativetensorflowexpoteachable-machine
ChanHoo Kim
ChanHoo Kim

Reputation: 1

How can I solve React Native Tensorflow error?

This is my App.js:

//expo & react
import * as React from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import { Camera, CameraType } from 'expo-camera';

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

const TensorCamera = cameraWithTensors(Camera);

const OUTPUT_TENSOR_WIDTH = 270;
const OUTPUT_TENSOR_HEIGHT = 480;

const CAM_PREVIEW_WIDTH = Dimensions.get('window').width;
const CAM_PREVIEW_HEIGHT = CAM_PREVIEW_WIDTH / (9 / 16);

export default function App() {
  const [tfReady, setTfReady] = React.useState(false);
  const [model, setModel] = React.useState();

  const rafId = React.useRef(null);

  React.useEffect(() => {
    const prepare = async () => {
      rafId.current = null;
      await Camera.requestCameraPermissionsAsync();
      await tf.ready();

      const modelJson = require('./model/model.json');
      const modelWeights = require('./model/weights.bin');

      const model = await tf.loadLayersModel(
        bundleResourceIO(modelJson, modelWeights)
      );

      setModel(model);

      setTfReady(true);
    };
    prepare();
  }, []);

  React.useEffect(() => {
    return () => {
      if (rafId.current != null && rafId.current != 0) {
        cancelAnimationFrame(rafId.current);
        rafId.current = 0;
      }
    };
  }, []);

  const handleCameraStream = async (images, updatePreview, gl) => {
    const loop = () => {
      if (rafId.current === 0) {
        return;
      }

      tf.tidy(() => {
        const imageTensor = images.next().value.expandDims(0).div(127.5).sub(1);

        const f =
          (OUTPUT_TENSOR_HEIGHT - OUTPUT_TENSOR_WIDTH) /
          2 /
          OUTPUT_TENSOR_HEIGHT;
        const cropped = tf.image.cropAndResize(
          imageTensor,
          tf.tensor2d([f, 0, 1 - f, 1], [1, 4]),
          [0],
          [224, 224]
        );
      });

      rafId.current = requestAnimationFrame(loop);
    };
    loop();
    console.log(images);
  };

  if (!tfReady) {
    return <Loading />;
  } else {
    return (
      <View style={styles.container}>
        <TensorCamera
          style={styles.camera}
          autorender={true}
          type={CameraType.back}
          resizeWidth={OUTPUT_TENSOR_WIDTH}
          resizeHeight={OUTPUT_TENSOR_HEIGHT}
          resizeDepth={3}
          onReady={handleCameraStream}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: CAM_PREVIEW_WIDTH,
    height: CAM_PREVIEW_HEIGHT,
    marginTop: Dimensions.get('window').height / 2 - CAM_PREVIEW_HEIGHT / 2,
    alignItems: 'center',
    justifyContent: 'center',
  },
  camera: {
    width: '80%',
    height: '80%',
    zIndex: 1,
  },
});

I think error come from : const imageTensor = images.next().value.expandDims(0).div(127.5).sub(1); & const model = await tf.loadLayersModel( bundleResourceIO(modelJson, modelWeights) );

I got error : Possible Unhandled Promise Rejection (id: 5): TypeError: undefined is not a function TypeError: undefined is not a function

Upvotes: 0

Views: 257

Answers (1)

bagi2info.com
bagi2info.com

Reputation: 507

I test your code, the code is working fine, except I did comment below code and loading part, cause you're not include some import file included on your code.

const modelJson = require('./model/model.json');
const modelWeights = require('./model/weights.bin');

const model = await tf.loadLayersModel(
    bundleResourceIO(modelJson, modelWeights)
);

setModel(model);

I guess this is where the error you're getting it.

Upvotes: 0

Related Questions