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.