Getting an error while loading the model

TensorFlow Special Interest Groups TF.js
1

I am trying to make an object detection application using tf.js with React Native. I’m trying to load the model after calling the tf.ready() function and I’m getting an error. I tried locally and using the cocoSsd package.

import React, { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import * as tf from "@tensorflow/tfjs";
import "@tensorflow/tfjs-react-native";
import { bundleResourceIO } from "@tensorflow/tfjs-react-native";
import * as cocoSsd from '@tensorflow-models/coco-ssd';


const modelJson = require('./assets/model.json')
const modelWeight1 = require('./assets/group1-shard1of2.bin')
const modelWeight2 = require('./assets/group1-shard2of2.bin')

export default function App() {
  const [isTfReady, setIsTfReady] = useState(false);
  const [model, setModel] = useState();

  useEffect(() => {
    (async () => {
      // Calling setBackend() method
      // tf.setBackend("webgl");

      // Calling ready() method and
      // Printing output
      await tf
        .ready()
        .then((a) => {
          //console.log(JSON.stringify(tf.getBackend()));
          setIsTfReady(true);
        })
        .catch((e) => console.log("hataa", e));

      const model = await tf.loadGraphModel(bundleResourceIO(modelJson, [modelWeight1, modelWeight2]))
      console.log(model);

      const model2 = await cocoSsd.load();
      console.log(model2);


    })();
  }, []);
  console.log("isTfReady :", isTfReady);
  //console.log("model :", model);

  // if (!model) {
  //   return (<View style={styles.container}><Text>No model</Text></View>)
  // }

  return (
    <View style={styles.container}>
      <Text>Test app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

I’m getting this error ;

 WARN  Possible Unhandled Promise Rejection (id: 0):
TypeError: undefined is not a function
TypeError: undefined is not a function
    at isTypedArray (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:130930:39)
    at inferShape (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:133020:21)
    at tensor (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:133247:35)
    at decodeWeights (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:133447:29)
    at anonymous (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:201901:44)
    at anonymous (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:201881:32)
    at tryCallOne (/Users/kudo/01_Work/Repos/expo/expo/android/versioned-react-native/ReactAndroid/hermes-engine/.cxx/MinSizeRel/5a4n485h/arm64-v8a/lib/InternalBytecode/Intern
alBytecode.js:53:16)
    at anonymous (/Users/kudo/01_Work/Repos/expo/expo/android/versioned-react-native/ReactAndroid/hermes-engine/.cxx/MinSizeRel/5a4n485h/arm64-v8a/lib/InternalBytecode/Interna
lBytecode.js:139:27)
    at apply (native)
    at anonymous (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:29651:26)
    at _callTimer (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:29570:17)
    at _callReactNativeMicrotasksPass (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:29600:17)
    at callReactNativeMicrotasks (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:29763:44)
    at __callReactNativeMicrotasks (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:2793:46)
    at anonymous (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:2605:45)
    at __guard (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:2777:15)
    at flushedQueue (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:2604:21)
    at callFunctionReturnFlushedQueue (http://192.168.0.102:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false:2589:33)
3

I’ve got the same problem using expo. I tried using different versions of tf or cocoSsd but nothing.
The cocoSsd.load() is not working…

On some forum i read that could be tensorflow not loading properly but i don’t really know what’s the problem here.

5

I solved it. There is a problem with package versions. My package.json file looks like this:

{
  "name": "demo-js",
  "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"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@tensorflow-models/coco-ssd": "^2.2.2",
    "@tensorflow/tfjs": "3.18.0",
    "@tensorflow/tfjs-react-native": "^0.8.0",
    "@types/react-native-canvas": "^0.1.9",
    "expo": "~46.0.2",
    "expo-camera": "^12.3.0",
    "expo-gl": "^11.4.0",
    "expo-gl-cpp": "^11.4.0",
    "expo-status-bar": "~1.4.4",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.3",
    "react-native-canvas": "^0.1.38",
    "react-native-fs": "2.14.1",
    "react-native-webview": "^11.26.1"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

But I ran into another problem. The camera does not work fluently and sends an alert.

tf.nonMaxSuppression() in webgl locks the UI thread. Call tf.nonMaxSuppressionAsync() instead
7

Which version packages did you change ?, In my case I have higher version than you do right now