\
> *We cannot solve our problems with the same thinking we used to create them -Albert Einstein*

\
If you have ever built a Machine Learning model, you've probably felt, **well, this was cool, but how will other people be able to see how cool it is?** Model deployment is a part of Machine Learning which isn't paid as much attention as it should.

\
Well, in this article, I will introduce you to a new tool that will help you generate a web app for your Machine Learning model, which you can, of course, share with other individuals to try out.

\
I will be building a simple neural network model using scikit-learn (not TF, sorry😒) and creating a GUI for the model using Gradio (this is the new cool tool I spoke about).

\
**Let us Begin**

# What is Gradio?

 ![gradio cover.png | image credits: gradio](https://cdn.hackernoon.com/images/ckyw-5-xnag-00090-as-62-ag-6-f-89-n.jpg)

According to the __[Gradio website](https://gradio.app/)__, Gradio allows you to quickly create customizable UI components around your TensorFlow or PyTorch models or even arbitrary Python functions. Not terribly informative ei😅.

\
If you have ever used a python GUI library like Tkinter, Gradio is like that.

\
Gradio is a GUI library that allows you to create customizable GUI components for your Machine Learning model.

## Pre-requisite

For you to successfully work through this tutorial

* You must have python installed

## Let's Get Building

You can check out the GitHub repo for the project __[here](https://github.com/EdemGold/gradio_project)__

**Let us begin**

### Install required packages Packages

Let us install the required packages

\
```python
pip install sklearn
```

\
```python
pip install pandas
```

\
```python
pip install numpy
```

\
```python
pip install gradio
```

### Getting our data

Our data is going to be in the. CSV format.

You can get the data by clicking __[here](https://raw.githubusercontent.com/EdemGold/gradio_project/main/diabetes.csv)__

### Importing Packages

We are going to import the required packages

\
```python
import numpy as np

import pandas as pd

import gradio as gr
```

Next, we are going to filter the warnings so we don't see them.

\
```python
import warnings

warnings.filterwarnings('ignore')
```

### Import the data

Next, we are going to import our data

\
```python
data = pd.read_csv('diabetes.csv')
```

Now let's see a little preview of our dataset.

\
```python
data.head()
```

Let us see the feature columns in our dataset.

\
```python
print (data.columns)
```

### Getting our Variables

Next, we get our X and Y variables

```python
x = data.drop(['Outcome'], axis=1)

y = data['Outcome']
```

### Splitting the data

Now we are going to split our data using the sci-kit-learn's inbuilt *train_test_split* function.

\
```python
from sklearn.model_selection import train_test_split

x_train, x_test, y_train, y_test = train_test_split(x,y)
```

### Scaling our data

Next, we are going to scale our data using sci-kit-learn's inbuilt *StandardScaler* object.

\
```python
from sklearn.preprocessing import StandardScaler

#instantiate StandardScaler object
scaler = StandardScaler()

#scale data
x_train_scaled = scaler.fit_transform(x_train)

x_test_scaled = scaler.fit_transform(x_test)
```

\
In the code above, we scaled our data using the StandardScaler object made available to us through sci-kit-learn. To know more about Scaling and why it is done, click __[here](https://www.analyticsvidhya.com/blog/2020/04/feature-scaling-machine-learning-normalization-standardization/)__

### Instantiating and training the model

In this section, we are going to create and train our model. The model we are going to make us of will be a Multi-Layer Perceptron Classifier, a neural network built into scikit-learn.

\
```python
#import model object
from sklearn.neural_network import MLPClassifier
model =  MLPClassifier(max_iter=1000,  alpha=1)

#train model on training data
model.fit(x_train_scaled, y_train)

#getting model performance on test data
print("accuracy:", model.score(x_test_scaled, y_test))
```

### Creating the function for Gradio

Now is the fun part. Here we are going to create a function that will take in the features of the data set which our model was trained on and pass it as an array to our model to predict. Then we are going to build our gradio web app based on that function.

\
To understand why we have to write a function, you must first understand that gradio builds GUI components for our Machine Learning model based on the function. The function provides a way for gradio to get input from users and pass it on to the ML model, which will then process it and then pass it back to gradio, which then passes the result out.

\
**Let's Write...**

\
First, we will get the feature columns which we will then pass onto our function.

\
```python
#geting our columns

print(data.columns)
```

\
Now we will create our function.

\
```python
def diabetes(Pregnancies, Glucose, Blood_Pressure, SkinThickness, Insulin, BMI, Diabetes_Pedigree, Age):
#turning the arguments into a numpy array  

 x = np.array([Pregnancies,Glucose,Blood_Pressure,SkinThickness,Insulin,BMI,Diabetes_Pedigree,Age])

  prediction = model.predict(x.reshape(1, -1))

  return prediction
```

\
In the code above, we passed the feature columns from our data as arguments into a function we named *diabetes*. Then we turned the arguments into a NumPy array which we then passed onto our model for prediction, and finally, we returned the predicted result of our model.

### Creating our Gradio Interface

Now we are going to create our Web App interface using Gradio.

\
```python
outputs = gr.outputs.Textbox()

app = gr.Interface(fn=diabetes, inputs=['number','number','number','number','number','number','number','number'], outputs=outputs,description="This is a diabetes model")
```

The first thing we did above was to create a variable named outputs, which hold the GUI component for our model result. The result of our model's prediction will be outputted in a text box.

\
Then we instantiated the Gradio interface object and passed in our earlier *diabetes* function. Then we generated our Inputs GUI component, and then we told the radio to expect 8 inputs in form of numbers.

\
The inputs represent the feature columns that are present in our dataset, the same 8 feature column names we passed into our *diabetes* function.

\
Then we passed our earlier output variable into the outputs parameter present in the object.

Finally, we passed in the description of our web app into the description parameter.

### Launching the Gradio Web App

Now we're going to Launch our Gradio web app.

\
```python
app.launch()
```

\

:::warning
**NOTE:** If you are launching the Gradio app as a script from that command line, you will be given a local host link that you will copy and paste in our browser to see your web app.

\
If you are launching the app from a jupyter notebook, you will see a live preview of the app as you run the cell, and you will also be provided with a link.

:::

### Hosting and sharing your Web App

If you want to share your web app, all you have to do is put in *share=True* as a parameter in your launch object.

\
```python
#To provide a shareable link
app.launch(share=True)
```

\
A link will then be provided for you with a .gradio extension. But this shareable link lasts for only 24 hours and will last if only your system is running. Because Gradio just hosts the web app on your system.

\
In simple words, for your link to work, your system has to be on because gradio uses your system to host the web app and once your system is off. The server connection is severed, and you get a 500😅.

\
Luckily for us, Gradio also provides a way for you to permanently host your model. But the service is subscription-based, so you have to pay $7 monthly to access it. Permanent hosting is way out of the scope o this article (partly because the author is broke😅). But if you are interested in it, click __[here](https://www.gradio.app/introducing-hosted).__

## Important Links

* __[Gradio Website](https://gradio.app/)__
* __[Gradio Documentation](https://gradio.app/docs)__
* __[Gradio on GitHub](https://github.com/gradio-app/gradio)__

## Summary

The Gradio Library is really cool, and it helps solve a huge problem plaguing the Machine Learning Community, Model Deployment.

\
About 90% of Machine Learning models built are not deployed, and Gradio is working to fix that.

It also serves as a way for beginners and experts to show off their models and also test the models in real life.

\
You can't go wrong with the Gradio Library.


---

Also Published [Here](https://edemgold.blog/building-gui-for-your-machine-learning-models)

2022 - HackerNoon Contributor of the Year - Creativity

2022 - HackerNoon Contributor of the Year - Machine Learning

2022 - HackerNoon Contributor of the Year - Quantum Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Quantum Computing

Nominated for 2022 - HackerNoon Contributor of the Year - Creativity

Nominated for 2022 - HackerNoon Contributor of the Year - Machine Learning

Too Long; Didn't Read

Get hands-on learning from ML experts on Coursera 

Build a GUI for Your Machine Learning Models

Too Long; Didn't Read

People Mentioned

@edemgold

RELATED STORIES