Gradio Introduction and its application in ML

Hey Reader,

My name is Akshay, and I am working as Senior Developer at Luxoft India. With the hype and demand for application of Machine learning Luxoft provided me ample opportunity to groom myself in ML and its application. Here in this article I will be explaining how we can build a model using Gradio and its application in various advantages.

Gradio

Gradio is an open-source Python package that allows you to quickly create easy-to-use, customizable UI components for your ML model, any API, or even an arbitrary Python function using a few lines of code. Gradio integrates with the most popular Python libraries, including Scikit-learn, PyTorch, NumPy, seaborn, pandas, Tensor Flow, and others. One of its advantages is that it allows you to interact with the web app you are currently developing in your Jupyter or Colab notebook. It has a lot of unique features that can help you construct a web app that users can interact with.

If you have ever used a Python GUI library like Tkinter, then Gradio is like that. Gradio is a GUI library that allows you to create customizable GUI components for your Machine Learning model.

We’ll be using the Gradio library to build demos for our models. Gradio allows you to build, customize, and share web-based demos for any machine learning model, entirely in Python.

The best way to deploy our Deep Learning model is to write a web app with Flask (or Django, though that’s most likely overkill). However, some ML engineers/researchers/data scientists lack familiarity with web development. Still, giving a serious frontend (not a Jupyter Notebook) to our ML tool is a great idea:

• much faster and more productive interaction with your end users (say, doctors using your tool for diagnosis)
• easier data annotation/labeling
• faster debugging: especially in Computer Vision, and unless you’re implementing for the umpteenth time an image classifier, it’s often easier to find subtle bugs by giving a frontend to your application.

For us to successfully work, we will need to have Python installed.

Install the required packages

Let’s install the required packages:

We can run Gradio anywhere, be it from your favourite Python IDE, to Jupyter notebooks or even in Google Colab! So install Gradio wherever you run Python!

Let’s get started with a simple “Hello World” example to get familiar with the Gradio syntax:

• First, we define a function called greet(). In this case, it is a simple function that adds “Hello” before your name, but it can be any Python function in general. For example, in machine learning applications, this function would call a model to make a prediction on an input and return the output.
• Then, we create a Gradio Interface with three arguments, fn, inputs, and outputs. These arguments define the prediction function, as well as the type of input and output components we would like. In our case, both components are simple text boxes.
• We then call the launch() method on the Interface that we created.

Let’s now build a simple interface that allows you to demo a text-generation model like GPT-2.

We’ll load our model using the pipeline() function from Transformers.

First, we define a prediction function that takes in a text prompt and returns the text completion:

This function completes prompts that you provide, and you can run it with your own input prompts to see how it works. Here is an example (you might get a different completion):

Now that we have a function for generating predictions, we can create and launch an Interface in the same way we did earlier:

That’s it! We can now use this interface to generate text using the GPT-2 model as shown below.

Gradio components

Gradio contains pre-built components for various functions. These components range from text and media such as audio, images, and video to charts created using packages like Plotly and Altair.

In this section, we will explore how Gradio displays various components.

Displaying text in Gradio

Text can be displayed using gradio.Text or gradio.Textbox.Each method provides a text area to enter string input or display string output.

#display a text
import gradio as gr

def text_display(text):
    return text

demo = gr.Interface(text_display, gr.Text(), "text")
#alternatively use gr.TextBox()
demo.launch()

Displaying data in Gradio

Data types such as “str”, “number”, “bool”, “date”, and “markdown” can be displayed in Gradio. By default, you will get a Pandas DataFrame.

We can obtain other data types by specifying the desired output type. For instance, a NumPy array can be obtained when numpy is specified, and array for a Python array.

#display a data
import gradio as gr

def data_display(input_img):
    return input_img

demo = gr.Interface(data_display, gr.Dataframe(), "dataframe")
demo.launch()

Displaying media in Gradio

We can display media such as images in Gradio. Besides, we can transform images by applying a filter such as sepia or blue hue filter. We can display media by passing the correct input like Image, Video, Audio, or File.

The example below demonstrates how to visualize an image after applying a blue hue filter.

import numpy as np
import gradio as gr

def blue_hue(input_img):
    blue_hue_filter = np.array([
            [0.272, 0.534, 0.131], 
            [0.349, 0.686, 0.168],
            [0.393, 0.769, 0.189]])
    blue_hue_img = input_img.dot(blue_hue_filter.T)
    blue_hue_img /= blue_hue_img.max()
    return blue_hue_img

demo = gr.Interface(blue_hue, gr.Image(shape=(300, 200)), "image")
demo.launch()