React Native with TypeScript tfjs-models/universal-sentence-encoder error on model load

Question

I'm trying to use tfjs-models/universal-sentence-encoder within a React Native app by following these instructions. However, I get the following error when I try to load the model:

ERROR: TypeError: undefined is not an object (evaluating '_universalSentenceEncoder.default.load'

Code:

import React, { useEffect, useState } from 'react';
require('@tensorflow/tfjs');
const use = require('@tensorflow-models/universal-sentence-encoder');

export default function App() {

  useEffect(() => {
    console.log("App is starting...")
    
    const init = async () => {
      // initialize state variables 
      // console.log("App is initializing services...")
      
      // Load the model.
      try {
        use.load().then((model: any) => {
          // Embed an array of sentences.
          const sentences = [
            'Hello.',
            'How are you?'
          ];
          model.embed(sentences).then((embeddings: any) => {
            // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence.
            // So in this example `embeddings` has the shape [2, 512].
            embeddings.print(true /* verbose */);
          });
        });
      }
      catch (err) {
        console.log(`ERROR: ${err}`);
      }
    };
  }, []);

Package versions:

[email protected]
@tensorflow-models/[email protected]
@tensorflow/[email protected]
@tensorflow/[email protected]

yudhiesh · Accepted Answer · 2021-05-13 05:13:29Z

I think it is to do with the way you are importing the universal-sentence-encoder, try this instead:

import React, { useEffect, useState } from 'react';
import * as use from '@tensorflow-models/universal-sentence-encoder';

export default function App() {

  useEffect(() => {
    console.log("App is starting...")
    
    const init = async () => {
      // initialize state variables 
      // console.log("App is initializing services...")
      
      // Load the model.
      try {
        use.load().then((model: any) => {
          // Embed an array of sentences.
          const sentences = [
            'Hello.',
            'How are you?'
          ];
          model.embed(sentences).then((embeddings: any) => {
            // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence.
            // So in this example `embeddings` has the shape [2, 512].
            embeddings.print(true /* verbose */);
          });
        });
      }
      catch (err) {
        console.log(`ERROR: ${err}`);
      }
    };
  }, []);

nimbus · Accepted Answer · 2021-05-13 14:12:47Z

The answer yudhiesh provided fixes the cited error but produces another. A couple more changes need to be made to the code, and @tensorflow/tfjs needs to be downgraded from 3.3.0 to 3.0.0 (following this post).

Here's the updated code:

import React, { useEffect, useState } from 'react';
import "@tensorflow/tfjs-react-native";
import * as tf from '@tensorflow/tfjs';
import * as use from '@tensorflow-models/universal-sentence-encoder';

export default function App() {

  useEffect(() => {
    console.log("App is starting...")
    
    const init = async () => {
      // initialize state variables 
      // console.log("App is initializing services...")
      
      await tf.ready();
      
      // Load the model.
      try {
        use.load().then((model: any) => {
          // Embed an array of sentences.
          const sentences = [
            'Hello.',
            'How are you?'
          ];
          model.embed(sentences).then((embeddings: any) => {
            // `embeddings` is a 2D tensor consisting of the 512-dimensional embeddings for each sentence.
            // So in this example `embeddings` has the shape [2, 512].
            embeddings.print(true /* verbose */);
          });
        });
      }
      catch (err) {
        console.log(`ERROR: ${err}`);
      }
    };
  }, []);

Notice the import of @tensorflow/tfjs-react-native, the changes in how to import @tensorflow/tfjs, @tensorflow-models/universal-sentence-encoder, and the addition of calling await tf.ready() to ensure the tensorflow is initialized before attempting to load the use model.

This code produces the embeddings as expected when running on an iOS emulator, but it produces an embeddings vector full of NaNs when run on my physical iPhone. This is likely a separate issue, so consider this issue solved.

Problem solved, just needed to ensure all peer-dependencies of @tensorflow-models/universal-sentence-encoder, @tensorflow/tfjs-react-native, and @tensorflow/tfjswere met and correct

Collectives™ on Stack Overflow

React Native with TypeScript tfjs-models/universal-sentence-encoder error on model load

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related