Machine learning with Django and React.js
Tags: javascript, webdev, beginners, programming
Published: 2023-03-02 05:25:20

This is for begineers guide

First, let's create a Django project and app and install the necessary dependencies. Open your terminal and run the following commands:

```
# Create a new virtual environment (optional)
python -m venv env
source env/bin/activate

# Install Django and other dependencies
pip install django djangorestframework pandas scikit-learn joblib
```

Next, let's create a new Django project and app:


```
django-admin startproject myproject
cd myproject
python manage.py startapp myapp


```

Now, let's create a machine learning model that we want to expose through the API. For this example, we'll create a simple logistic regression model that predicts whether a person is male or female based on their height and weight. Create a new file called `model.py` in the `myapp` directory with the following code:


```
import pandas as pd
from sklearn.linear_model import LogisticRegression
import joblib

# Load the training data
data = pd.read_csv('https://people.sc.fsu.edu/~jburkardt/data/csv/hw_200.csv')

# Train a logistic regression model
X = data[['Height', 'Weight']]
y = data['Gender']
model = LogisticRegression()
model.fit(X, y)

# Save the model to disk
joblib.dump(model, 'model.pkl')
```



This code loads a dataset of height and weight measurements and gender labels, trains a logistic regression model using scikit-learn, and saves the trained model to disk using the joblib library.

Now, let's create a Django view that uses the trained model to make predictions. Create a new file called `views.py` in the `myapp` directory with the following code:


```

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import joblib
import numpy as np

# Load the saved model from disk
model = joblib.load('model.pkl')

# Define a view that takes input data and returns a prediction
@csrf_exempt
def predict(request):
    if request.method == 'POST':
        # Get the input data from the request
        data = request.POST.dict()

        # Convert the input data to a numpy array
        X = np.array([[float(data['height']), float(data['weight'])]])

        # Use the model to make a prediction
        y_pred = model.predict(X)

        # Return the prediction as a JSON response
        return JsonResponse({'prediction': str(y_pred[0])})
    else:
        return JsonResponse({'error': 'Invalid request method'})


```

This code defines a view called `predict` that takes input data (height and weight) from a POST request, converts the input data to a numpy array, uses the trained model to make a prediction, and returns the prediction as a JSON response.

Now, let's create a URL pattern that maps the `predict` view to a URL. Create a new file called `urls.py` in the myapp directory with the following code:


```
from django.urls import path
from .views import predict

urlpatterns = [
    path('predict/', predict, name='predict'),
]

```



This code defines a URL pattern that maps the `/predict/` URL to the predict view.

Finally, let's start the Django development server to test our API. Run the following command:


```
python manage.py runserver


```


Django development server, which will listen for requests on `http://127.0.0.1:8000/`.

Now that we have a functioning backend API, let's move on to the React frontend.





React Frontend



First, let's create a new React app using `create-react-app`. Open your terminal and run the following command:


```
npx create-react-app myapp
cd myapp


```


Now, let's install the necessary dependencies:


```
npm install axios
```

This installs the `axios` library, which we'll use to make requests to the Django backend API.

Next, let's create a form component that allows the user to input their height and weight and make a prediction using the backend API. Create a new file called `PredictionForm.js` in the src directory with the following code:

```
import React, { useState } from 'react';
import axios from 'axios';

function PredictionForm() {
  const [height, setHeight] = useState('');
  const [weight, setWeight] = useState('');
  const [prediction, setPrediction] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const response = await axios.post('/api/predict/', {
        height: height,
        weight: weight,
      });

      setPrediction(response.data.prediction);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Height (cm):
        <input
          type="number"
          value={height}
          onChange={(event) => setHeight(event.target.value)}
        />
      </label>
      <br />
      <label>
        Weight (kg):
        <input
          type="number"
          value={weight}
          onChange={(event) => setWeight(event.target.value)}
        />
      </label>
      <br />
      <button type="submit">Predict</button>
      {prediction && <p>Prediction: {prediction}</p>}
    </form>
  );
}

export default PredictionForm;




```


This code defines a form component that allows the user to input their height and weight and make a prediction using the backend API. The `handleSubmit` function makes a POST request to the `/api/predict/` URL using the `axios` library, passing the height and weight data as JSON. If the request is successful, the `prediction` state is updated with the predicted gender.

Now, let's create a main component that renders the PredictionForm component. In `App.js` in the `src` directory with the following code:

```
import React from 'react';
import PredictionForm from './PredictionForm';

function App() {
  return (
    <div>
      <h1>Gender Predictor</h1>
      <PredictionForm />
    </div>
  );
}

export default App;


```

This code defines a main component that renders the `PredictionForm` component and a header.

Finally, let's start the React development server to test our app. Run the following command:

```
`npm start`

```

This should start the React development server, which will listen for requests on `http://localhost:3000/`.

If you navigate to `http://localhost:3000/` in your web browser, you should see a form that allows you to input your height and weight and make a prediction using the backend API.

That's it! You now have a basic Django backend that exposes a machine learning model through a RESTful API, and a React frontend that communicates with the backend to make predictions using the model.