How to run TensorFlow js with react and react native

TensorFlow is a popular open-source machine learning framework developed by Google that allows developers to create complex models for tasks like image and speech recognition, natural language processing, and predictive analytics. React is a popular JavaScript library used for building user interfaces. These two technologies can create powerful applications that leverage machine learning capabilities.

This article will explore how to run TensorFlow in React and build a simple image classification application.

Getting Started

To get started, we need to install TensorFlow and React. You can do this using npm or yarn, package managers for Node.js. If you don’t have Node.js installed on your machine, you must download and install it first.

To install TensorFlow, run the following command in your terminal:

npm install @tensorflow/tfjs

Next, we need to install React. You can do this by running the following command:

npm install react react-dom

Creating the Application

Once we have installed TensorFlow and React, we can create a new React application. You can do this by running the following command in your terminal:

npx create-react-app tensorflow-react

This will create a new TensorFlow-react directory with all the files we need to get started.

Next, we must create a new file called ImageClassifier.js in the src directory. This file will contain our image classification code.

In ImageClassifier.js, we need to import TensorFlow and React using the following code:

import * as tf from '@tensorflow/tfjs';
import React, { useState } from 'react';

Next, we need to define our image classification function. This function will take an image and return a prediction. We can use the pre-trained MobileNet model, which is included in TensorFlow.js, to classify the image.

async function classifyImage(image) {
  const model = await tf.loadLayersModel(
    '<https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json>'
  );

  const tensor = tf.browser.fromPixels(image)
    .resizeNearestNeighbor([224, 224])
    .toFloat()
    .expandDims();

  const predictions = await model.predict(tensor).data();

  model.dispose();

  return predictions;
}

This code loads the MobileNet model, resizes the image to 224×224 pixels, converts it to a tensor, and then makes a prediction. We then dispose of the model to free up memory.

Next, we need to create our React component. This component will allow the user to upload an image and display the prediction.

function ImageClassifier() {
  const [prediction, setPrediction] = useState(null);

  async function handleImageUpload(event) {
    const file = event.target.files[0];
    const image = new Image();
    const reader = new FileReader();

    reader.onload = async function () {
      image.src = reader.result;
      image.onload = async function () {
        const predictions = await classifyImage(image);
        setPrediction(predictions);
      };
    };

    reader.readAsDataURL(file);
  }

  return (
    <div>
      <input type="file" onChange={handleImageUpload} />
      {prediction && <p>Prediction: {prediction}</p>}
    </div>
  );
}

This code defines a state variable called prediction to store the image classification result. It also defines a function called handleImageUpload, when the user uploads an image. This function reads the image file, converts it to an image object, and then calls the classifyImage function to make a prediction. Finally, it sets the prediction state variable.

The input element allows the user to upload an image and display the prediction if it exists.

return (
  <div>
    <input type="file" onChange={handleImageUpload} />
    {prediction && <p>Prediction: {prediction}</p>}
  </div>
);

Using the Component

To use the ImageClassifier component in our application, we need to import it into the App.js file and render it.

import React from 'react';
import ImageClassifier from './ImageClassifier';

function App() {
  return (
    <div>
      <ImageClassifier />
    </div>
  );
}

export default App;

When we run the application using the npm start command, we should see a screen that allows us to upload an image and see the prediction.

Conclusion

In this article, we have explored how to run TensorFlow in React to build a simple image classification application. We have learned how to use the MobileNet pre-trained model to classify images and create a React component that allows the user to upload an image and see the prediction. With TensorFlow and React, we can create powerful machine-learning applications that leverage both technologies’ strengths.