Using a Python trained ML Model in React.js Project

TensorFlow.js is a JavaScript library for training and deploying machine learning models in the browser and on the server. In this article, we will discuss how to use TensorFlow.js to incorporate pre-trained machine learning models into your React project. We will go over the basics of TensorFlow.js, including how to install and import the library, and how to load a pre-trained model from Python and use it to make predictions in your React project. By the end of this article, you should have a good understanding of how to use TensorFlow.js to integrate pre-trained machine learning models into your React project.

Now, to start with asimple machine learning project, I am choosing the Salary_Data.csv file. We’ll build a artificial neural network model in python and later use it in React, without creating any backend server.

Building the model in python

Importing the libraries

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
from tensorflow.keras.models import Sequential
from tensorflow.keras.layers import Dense
import tensorflowjs as tfjs

Preparing the data

data = pd.read_csv("Salary_Data.csv")
X = data.iloc[:,0].values
Y = data.iloc[:,1].values

Scaling the data

As we’re using deep-learning model, it’s required to scale the data. I am using the logic of min-max scaling. Note that, the scaling will be required in the later stages to be used in the website.

X_scales = [max(X), min(X)]
X_data = (X-X_scales[1])/(X_scales[0]-X_scales[1])
Y_scales = [max(Y), min(Y)]
Y_data = (Y-Y_scales[1])/(Y_scales[0]-Y_scales[1])

Build the model

You may build the model your way.

regressor = Sequential()
regressor.add(Dense(units = 10, input_shape=(1,), activation="relu"))
regressor.add(Dense(units = 50, activation="relu"))
regressor.add(Dense(units = 500, activation="relu"))
regressor.add(Dense(units = 50, activation="relu"))
regressor.add(Dense(units = 10, activation="relu"))
regressor.add(Dense(units = 1))
regressor.compile(optimizer = 'adam', loss = 'mean_squared_error')
regressor.summary()

Fitting the model

history = regressor.fit(X_data, Y_data, epochs = 30, validation_split=0.1)
plt.title('Model Loss')
plt.ylabel('Loss')
plt.xlabel('Epochs')
plt.plot(history.history['loss'])
plt.legend(['Train'])
plt.show()

Plotting the prediction

predicted_y_data = regressor.predict(X_data)
predicted_y = predicted_y_data*(Y_scales[0]-Y_scales[1]) + Y_scales[1]
plt.scatter(X,Y)
plt.plot(X,predicted_y.reshape(-1,1))

Save the model and print the scales

Now tensorflowjs will come into play, it’ll create the bridge between python nd javascript

tfjs.converters.save_keras_model(regressor, "model")
print(X_scales, Y_scales)

[10.5, 1.1] [122391.0, 37731.0]

There will be a folder has been created named model containing a .json and a .bin file. Save those for use in the React project.

Using the model in React project

Create a react app using create-react-app or any other way you like.

$ npx create-react-app salary-predictor
$ cd salary-predictor

Now upload the .json and .bin file in the public directory. Also create a custom hook named useSalaryModel.js to use the model.

useSalaryModel.js

import { useEffect, useState } from "react";
import * as tf from "@tensorflow/tfjs";
export default function useSalaryModel() {
  const [model, setModel] = useState(null);
  const loadModel = async () => {
    const model = await tf.loadLayersModel("/model.json");
    setModel(model);
  };
  const predict = async (experience) => {
    if (!model) return 0;
    const X_scales = [10.5, 1.1];
    const Y_scales = [122391.0, 37731.0];
    const exp_scaled = (experience - X_scales[1]) / (X_scales[0] - X_scales[1]);
    const exp_scaled_tensor = tf.tensor1d([exp_scaled]);
    const sal_scaled = await model.predict(exp_scaled_tensor).array();
    const salary = sal_scaled * (Y_scales[0] - Y_scales[1]) + Y_scales[1];
    return salary;
  };
  useEffect(() => {
    loadModel();
  }, []);
  return { model, predict };
}

App.js

import { useEffect, useState } from "react";
import "./styles.css";
import useSalaryModel from "./useSalaryModel";

export default function App() {
  const { model, predict } = useSalaryModel();
  const [givenExp, setGivenExp] = useState(0);
  const [expectedSal, setExpectedSal] = useState(0);
  useEffect(() => {
    if (!model) return;
    predict(givenExp).then((res) => {
      setExpectedSal(res);
    });
  }, [model, predict, givenExp]);
  return (
    <div className="App">
      {!model && <>Loading the model...</>}
      {model && (
        <div>
          <div>
            <input
              type="number"
              value={givenExp}
              onChange={(e) => {
                setGivenExp(e.target.value);
              }}
            />
          </div>
          <div>{expectedSal}</div>
        </div>
      )}
    </div>
  );
}

The whole react project can be found in the sandbox.

Here are some screenshots of the website.

Thank you for reading till the end. Make sure you subscribe to the newsletter to get new updates from my side.