Active Hackathon

Guide To Gradio – Create Web-Based GUI Applications For Machine Learning

In this article, we will discuss gradio with its implementation. First, we will use it in finding the largest word in a sentence, and then we will implement it to predict the name of apparel.
gradio

While creating ML models, our end goal is the deployment that takes it to the production which can take input and give an output of business models. The easiest form of deployment would be a GUI (Graphical User Interface)

Gradio helps in building a web-based GUI in a few lines of code which is very handy for showing demonstrations of the model performance. It is fast, easy to set up, and ready to use and shareable as the public link which anyone can access remotely and parallelly run the model in your machine. Gradio works with all kinds of media- text, images, video, and audio. Apart from ML models, it can be used as normal python code embeddings.

THE BELAMY

Sign up for your weekly dose of what's up in emerging technology.

Gradio is a customizable UI that is integrated with Tensorflow or Pytorch models. It is free and an open-source framework makes it readily available to anyone.

In this article, we will discuss gradio with its implementation. First, we will use it in finding the largest word in a sentence, and then we will implement it to predict the name of apparel.

Let’s start with installing gradio

In python installing any library is very easy with the command pip

pip install gradio 

This will only take a few seconds to execute.

Building a simple GUI of the largest word in a sentence

Here we design a simple code that predicts the longest word in a sentence and gives the result in the GUI.

import gradio as gr
gr.reset_all()
def longest(text):
    words = text.split(" ")
    lengths = [len(word) for word in words]
    return max(lengths)
ex = "The quick brown fox jumped over the lazy dog."
io = gr.Interface(longest, "textbox", "label", interpretation="default", examples=[[ex]])
io.test_launch()
io.launch()

The word ‘jumped’ is the longest with 6 characters thus it prints 6 as the result.

Apart from example text, users can write their own sentences and see the predictions.

In the code, the Interface function gr.Interface() allows the integration of the function call to be made to longest() containing the text as input here into a textbox,  and output maximum length word in the sentence. The launch function finally allows the GUI to be visible as a UI.

Gradio can handle multiple inputs and outputs. 

Gradio for ML models

I have taken the fashion MNIST dataset which contains 70,000 grayscale images in low resolution into 10 categories, out of which 60000 images are for training and 10000 images for testing.

These images are NumPy arrays of size 28X28, with pixel values ranging from 0 to 255. The class labels are as follows:

0 – T-shirt/top, 1 – Trouser, 2 – Pullover, 3 – Dress, 4 – Coat, 5 – Sandal, 6 – Shirt, 7- Sneaker, 8 – Bag, 9 – Ankle boot.

import tensorflow as tf
import gradio as gr
(x_train, y_train), (x_test, y_test) = tf.keras.datasets.fashion_mnist.load_data()
x_train = x_train / 255.0, 
x_test = x_test / 255.0
model = tf.keras.models.Sequential([
  tf.keras.layers.Flatten(input_shape=(28, 28)),
  tf.keras.layers.Dense(128,activation='relu'),
  tf.keras.layers.Dense(10, activation='softmax')
])
model.compile
(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy'])
model.fit(x_train, y_train, validation_data=(x_test, y_test), epochs=5)
def classify_image(image):
    prediction = model.predict(image.reshape(-1, 28, 28, 1)).tolist()[0]
    return {class_names[i]: prediction[i] for i in range(10)}
class_names = ['T-shirt', 'Trouser', 'Pullover', 'Dress', 'Coat', 
               'Sandal', 'Shirt', 'Sneaker', 'Bag', 'Ankle boot'] 
sketchpad = gr.inputs.Sketchpad()
label = gr.outputs.Label(num_top_classes=4)
gr.Interface(fn=classify_image, 
             inputs=sketchpad,
             outputs=label,
             interpretation="default",
             ).launch()

Conclusion

As we can see Gradio app predicts the sketch image as a T-shirt. In place of the sketch, normal images could also be used provided preprocessing is done as per the model requirements. Gradio could be used by anyone to provide demos to clients. 

You can find the complete notebook of the above implementation in AIM’s GitHub repositories. Please visit this link to find this notebook. 

More Great AIM Stories

Jayita Bhattacharyya
Machine learning and data science enthusiast. Eager to learn new technology advances. A self-taught techie who loves to do cool stuff using technology for fun and worthwhile.

Our Upcoming Events

Conference, in-person (Bangalore)
Machine Learning Developers Summit (MLDS) 2023
19-20th Jan, 2023

Conference, in-person (Bangalore)
Data Engineering Summit (DES) 2023
21st Apr, 2023

Conference, in-person (Bangalore)
MachineCon 2023
23rd Jun, 2023

3 Ways to Join our Community

Discord Server

Stay Connected with a larger ecosystem of data science and ML Professionals

Telegram Channel

Discover special offers, top stories, upcoming events, and more.

Subscribe to our newsletter

Get the latest updates from AIM