Deploying Machine Learning Models on Hugging Face Hub with Gradio Integration

A Step-by-step guide to deploying your ML Models with Hugging Face

Deploying machine learning models on Hugging Face Spaces provides developers with an easy-to-use platform for sharing, deploying, and showcasing machine learning applications. 

Hugging Face Spaces is a cloud-hosted environment that supports the effortless deployment of machine learning models, allowing users to interact with models through user-friendly interfaces. 

In this blog, we provide a step-by-step guide on how to integrate machine learning models with Gradio, a Python library for building interactive demos, and deploy them on Hugging Face Spaces.

This blog is designed for machine learning engineers, developers, and researchers who want to share their models with a broader audience, whether through public interfaces or secure private access. 

It’s especially beneficial for those looking to leverage Hugging Face Spaces and Gradio to create seamless and interactive model deployment experiences.

Table of Contents:

1. Building Image Captioning Demo Application

2. Deploying to Hugging Face Spaces

3. Make Private Access to Your API

---

---

1. Building Image Captioning Demo Application 

The first step is to build a demo application using Gradio. We will use the image captioning application we built before using the blip model from Salesforce. We will start with installing the packages we will use throughout this article. We will install the transformers, gradio, and gradio_client packages with the following code:

!pip install transformers
!pip install gradio
!pip install gradio_client

Next, we are setting up the necessary imports for deploying a machine learning (ML) model on Hugging Face’s Transformers library and using Gradio to create a user-friendly web interface.

import os
import gradio as gr
from transformers import pipeline

Next, we will set up a pre-trained image captioning model that can take images as input and produce descriptive text as output. This pipeline abstracts all the complexities, so once initialized, you can pass images directly to it to generate captions with minimal effort.

pipe = pipeline("image-to-text",
                model="./models/Salesforce/blip-image-captioning-base")

Now we will define a launch function that takes an input, which is expected to be an image, and passes it to the pipe — the image-to-text pipeline defined earlier. 

The pipeline processes the image and generates a caption or descriptive text. The function then returns the first result from the output, specifically extracting the ‘generated_text’ field, which contains the generated description for the input image. 

This function essentially acts as a wrapper that takes an image input and returns a text output generated by the image captioning model

def launch(input):
    out = pipe(input)
    return out[0]['generated_text']

Next, we will define a Gradio interface that allows users to upload an image, and it displays the generated caption in the output text box.

iface = gr.Interface(launch,
                     inputs=gr.Image(type='pil'),
                     outputs="text")

Next, we will launch the Gardio application using the iface.launch(share=True, server_port=int(os.environ[‘PORT1’])) command. This command starts the Gradio interface for the image-to-text pipeline. The share=True parameter creates a public, shareable link, allowing anyone to access the interface from any location via the web. 

The server_port=int(os.environ[‘PORT1’]) ensures the interface runs on a specific port defined by the PORT1 environment variable, which is often necessary for cloud or containerized environments where the port assignment is controlled externally.

iface.launch(share=True, 
             server_port=int(os.environ['PORT1']))

Finally, we will stop or terminate the Gradio interface that was previously launched using the command below.

iface.close()

Now that we have created the application let's go through the steps to deploy it using the hugging face spaces.