Gradio & Hugging Face for Rapid Deep Learning App Development

A useful deep learning model must be appreciated by a wider community of potential end users. Most of the time, GitHub, Jupyter Notebook or Google Colab is used but these methods are not intuitive especially for our target audience who do not code. Most of the time, people just wanted to try it themselves to see how a model works.

Gradio and Hugging Face are some of the best tools around that can be used to prototype a deep learning app. Gradio is for building a user-interface for a machine learning web application. Meanwhile, Hugging Face provides the pre-trained models and inference APIs, data processing APIs and hosting services. Roughly, Gradio is like the front-end while Hugging Face runs in the back-end.

Both are designed to work together and have easy to use and well-documented Python APIs.

Let us build a deep learning model app. In our development environment, install Gradio and Hugging Face via pip :

pip install gradio transformers

An image classifier can be built with just 2 lines of code. Let us name the Python script app.py :

import gradio as gr
from transformers import pipelinepipe = pipeline(task="image-classification",
                # model for 22k-category classification
                model="microsoft/beit-base-patch16-224-pt22k-ft22k")gr.Interface.from_pipeline(pipe,
                           title="22k Image Classification",              
                           description="Object Recognition ...",
                           examples = ['wonder_cat.jpg',
                                       'aki_dog.jpg',],
                           ).launch(inbrowser=True)

Assuming we have 2 sample images in the filesystem with app.pynamed wonder_cat.jpg and aki_dog.jpg,running the app opens a new browser tab:

To see how it works, this app is already on Hugging Face Spaces:

Let us rewind a bit to see what does each line of code represent. In this example, we use Hugging Face Pipeline. Recall that Hugging Face takes care of the back-end: 1) Input pre-processing, 2) Model repository and inference and 3) Output post-processing.

When we call the first line pipeline() , we want to create a pipeline that will take care of the required input and output processing stages for image-classification . We also want to use a pre-trained Microsoft BEIT model for inference from the Model Hub.

The second line gr.Interface.from_pipeline() builds the interface for an image classification task and launches it on a new browser tab. For better user experience, example images are also provided. After testing the app, we can deploy it on a permanent free hosting site called Spaces that is also provided by Hugging Face. In this example, after creating a Spaces app, upload app.py (the entry point), the cat and dog example images named above and requirements.txt — Spaces need know what are the module dependencies. In our case, the modules are transformers and torch. If Gradio is the chosen SDK for the Spaces app, no need to include gradio in the required modules.

Gradio interface also provides load() method that creates a pipeline and interface and links a pre-trained model in one step. For example, a Text-to-Speech (TTS) system can be built with 1 line of code:

import gradio as grgr.Interface.load("huggingface/facebook/fastspeech2-en-ljspeech",   
                  description="TTS using FastSpeech2",
                  title="Text to Speech (TTS)",
                  examples=[["The quick brown fox jumps."]]     
                  ).launch(inbrowser=True)

Try it here:

Additional information about Gradio and Hugging Face can be found here: