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.

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. 

Download our Mobile App

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.

Subscribe to our newsletter

Join our editors every weekday evening as they steer you through the most significant news of the day.
Your newsletter subscriptions are subject to AIM Privacy Policy and Terms and Conditions.

Our Recent Stories

Our Upcoming Events

3 Ways to Join our Community

Telegram group

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

Discord Server

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

Subscribe to our Daily newsletter

Get our daily awesome stories & videos in your inbox
MOST POPULAR

Can OpenAI Save SoftBank? 

After a tumultuous investment spree with significant losses, will SoftBank’s plans to invest in OpenAI and other AI companies provide the boost it needs?

Oracle’s Grand Multicloud Gamble

“Cloud Should be Open,” says Larry at Oracle CloudWorld 2023, Las Vegas, recollecting his discussions with Microsoft chief Satya Nadella last week. 

How Generative AI is Revolutionising Data Science Tools

How Generative AI is Revolutionising Data Science Tools

Einblick Prompt enables users to create complete data workflows using natural language, accelerating various stages of data science and analytics. Einblick has effectively combined the capabilities of a Jupyter notebook with the user-friendliness of ChatGPT.