Fast and Free Deep Learning Demo with Gradio

Most of of the course materials in machine/deep learning that I consumed revolved in handling the data and training my model. After getting the results from testing on my held out testing set, I sat there quite satisfied but not knowing what to do with my model. If you are building a portfolio, I think the best way to showcase work is in the form something tangible and interactive. In this article, I will discuss how to create a fast and free deep learning demo with Gradio. Then we will host this application in HuggingFace spaces so it can be accessed publicly.

In a previous article, I have written about deploying a deep learning model in HuggingFace spaces using the Streamlit library. Although there are a lot of creative, customization options using Streamlit, if you just want a quick code-light experience, then Gradio works really well.

For this demo, we would create an object detection app that differentiates motorized vehicles from cyclist and pedestrians. We would be using the DETR model that is already hosted in HuggingFace, then use the Object Detection Pipeline from the Transformers library. The pipeline takes in an image and outputs the classes and bounding box coordinates of the detected image. Using the function below, we would be able to draw those bounding boxes into the image.

# Draw bounding box definition
def draw_bounding_box(im, score, label, xmin, ymin, xmax, ymax, index, num_boxes):
    """ Draw a bounding box. """
    # Draw the actual bounding box
    outline = ' '
    if label in ['truck', 'car', 'motorcycle', 'bus']:
      outline = 'red'
    elif label in ['person', 'bicycle']:
      outline = 'green'
    else:
      outline = 'blue'
    im_with_rectangle = ImageDraw.Draw(im)  
    im_with_rectangle.rounded_rectangle((xmin, ymin, xmax, ymax), outline = outline, width = 3, radius = 10)

    # Return the result
    return im

The core of this application will be the function below. It takes in an image, then runs it through the object detection function, then finally draws the bounding boxes using the function discussed above. Take note that the DETR model is trained on the COCO dataset which includes about 70 classes. We only draw bounding boxes for classes of concern.

def detect_image(im):
    # Perform object detection
    bounding_boxes = object_detector(im)

    # Iteration elements
    num_boxes = len(bounding_boxes)
    index = 0

    # Draw bounding box for each result
    for bounding_box in bounding_boxes:
        if bounding_box['label'] in ['person','motorcycle','bicycle', 'truck', 'car','bus']:
            box = bounding_box['box']

            #Draw the bounding box
            output_image = draw_bounding_box(im, bounding_box['score'],
                                  bounding_box['label'],
                                  box['xmin'], box['ymin'],
                                  box['xmax'], box['ymax'],
                                  index, num_boxes)
            index += 1

    return output_image

The final piece of code is the line below that initializes the Gradio application. Take note that it takes the object detection function, and I have set it to have images as input and output. Once ran, it will set up the demo application including the option to upload your own images as input.

TITLE = 'Active Transport Detection'
DESCRIPTION = 'This uses DETR as an object detection model and detects motor vehicles (red) and people and bikes (green). Much fine-tuning and optimization is still needed to make this a practical application'

iface = gr.Interface(detect_image, gr.inputs.Image(type = 'pil'), gr.outputs.Image(), allow_flagging = 'never', title = TITLE, description = DESCRIPTION).launch(debug = True)

To deploy the application to Spaces, log in to HuggingFace and click on your profile picture. Click New Space and fill in the details. Ensure that you choose Gradio as the SDK. This will create a code repository that you can clone to your local machine. Alternatively, you can just edit the app.py file and paste in you code. Finally, create a requirements.txt and add the libraries that must be installed to run the code. In our case, it needed Transformers (pipeline, DETR model), Timm (DETR model dependency), and Pillow (drawing the bounding box). Once the two files have been committed, the spaces app will be built and then can be ran.

timm==0.5.4
transformers
Pillow==9.0.1

We with those few lines of code, you have successfully created a publicly accessible application around a deep learning model. This can be linked in your portfolio such that readers can try out the models.

Other Articles

Address
Quezon City, PH

Work Hours
M-F  07:00-16:00