Error when implementing Tensorflow in React Native

Question

Save! I’m trying to implement the library Tensorflow in my React Native application, based in that and in that tutorials.

But I can’t even run the project, getting the following error:

Unable to resolve module ../assets/graph.pb from C:\aplicativos\myApp\components\Index.js: The module ../assets/graph.pb could not be found.

Error only occurs because of file extension (.pb), because testing with image files in the same directory everything goes well.

I tried then the approach made by that response from Stackoverflow, also without any result and the error persists. Finally, I tried to read the file .pb with the React-Native-Fs, resulting in memory allocation error, as the file in question weighs more than 80Mb.

My code is like this:

import { TfImageRecognition, TensorFlow } from 'react-native-tensorflow';

clickHandle = () => {

    const graph = require('../assets/graph.pb'); //gera erro
    const text = require('../assets/a.txt'); //gera erro

    try {
      const tfImageRecognition = new TfImageRecognition({
        model: graph,
        labels: text
      });

      const results = await tfImageRecognition.recognize({
        image: this.image
      });

      const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`;
      this.setState({texto: resultText});

      await tfImageRecognition.close();
    } catch(err) {
      alert(err);
    }
 }

Folder structure:

root
|--assets
|      |_ a.txt
|      |_ graph.pb
|
|--components
|      |_ Index.js

EDITED:

I made a copy of the files to the folder android/app/src/main/assets and modified the code as follows:

clickHandle = async () => {

    const text = {uri: 'asset:/a.txt'};
    const graph = {uri: 'asset:/graph.pb'};

    try {
      const tfImageRecognition = new TfImageRecognition({
        model: graph,
        labels: text
      });

      const results = await tfImageRecognition.recognize({
        image: require('../assets/YodaWhiteHouse.jpg')
      });

      const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`;
      this.setState({texto: resultText});

      await tfImageRecognition.close();
    } catch(err) {
      alert(err);
    }

Resulting in error:

Answer 1

I was able to solve the problem in question after analyzing the file ResourceManager.java contained in the folder node_modules\react-native-tensorflow\android\src\main\java\com\rntensorflow.

The new code went like this:

clickHandle = async () => {

const text = 'a.txt';
const graph = 'graph.pb';

try {
  const tfImageRecognition = new TfImageRecognition({
    model: graph,
    labels: text
  });

  const results = await tfImageRecognition.recognize({
    image: require('./assets/yodawhitehouse.jpg')
  });

  const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`;
  this.setState({texto: resultText});

  await tfImageRecognition.close();
} catch(err) {
  alert(err);
}

}

with the files txt and pb inside the briefcase android/app/src/main/assets.

Now I get an error related to Graph, but it is for another question, the problem of this has already been solved.