Image from gradio.app

Machine learning models are increasingly becoming a cornerstone in many industries. After perfecting your model, the natural progression is to make it accessible for the world to see. This, however, can be quite daunting especially if front-end development isn’t your forte. Fortunately, there’s Gradio, a tool designed to help you showcase your model effortlessly.

Gradio is an open-source Python library designed for rapidly building user interfaces for your models. With just a few lines of Python code, Gradio can integrate your model into a user-friendly and sharable UI.

Let’s illustrate this by creating a simple interface for a text summarization model.

To start, import the necessary libraries and set up your API key:

import os
import io
import requests
import json
from IPython.display import Image, display, HTML
from PIL import Image
import base64 
from dotenv import load_dotenv, find_dotenv

_ = load_dotenv(find_dotenv()) # read local .env file
hf_api_key ='YOUR_API_KEY'

Next, set up a helper function that interacts with your model’s endpoint (awe running the model on a server and accesing them with an endpoint), using your API key:

def get_completion(inputs, parameters=None, ENDPOINT_URL='YOUR_ENDPOINT'): 
    headers = {
      "Authorization": f"Bearer {hf_api_key}",
      "Content-Type": "application/json"
    }
    data = { "inputs": inputs }
    if parameters is not None:
        data.update({"parameters": parameters})
    response = requests.request("POST",
                                ENDPOINT_URL, headers=headers,
                                data=json.dumps(data)
                               )
    return json.loads(response.content.decode("utf-8"))

Let’s test our helper function with some sample text:

text = (
    '''Alexander III of Macedon (Ancient Greek: Ἀλέξανδρος, romanized: Alexandros; 20/21 July 356 BC – 10/11 June 323 BC), '''
    '''commonly known as Alexander the Great,[a] was a king of the ancient Greek kingdom of Macedon.[a] '''
    '''He succeeded his father Philip II to the throne in 336 BC at the age of 20, '''
    '''and spent most of his ruling years conducting a lengthy military campaign throughout Western Asia and Egypt. '''
    '''By the age of 30, he had created one of the largest empires in history, stretching from Greece to northwestern India.[2] '''
    '''He was undefeated in battle and is widely considered to be one of history's greatest and most successful military commanders.[3][4]'''
)
get_completion(text)

So far so good! We can proceed to create our user interface using Gradio:

Import Gradio:

import gradio as gr

Define a function named summarize. This function gets the summarized text from our model:

def summarize(input):
    output = get_completion(input)
    return output[0]['summary_text']

Before we proceed, make sure to close any previously open Gradio interfaces using gr.close_all(). This ensures a clean slate for our new UI:

gr.close_all()

Now, we’re ready to set up our Gradio interface:

• fn=summarize sets our summarization function as the core functionality of the interface.
• inputs=[gr.Textbox(label="Text to summarize", lines=6)] defines the input field as a textbox where users can type the text they want to be summarized.
• outputs=[gr.Textbox(label="Result", lines=3)] sets up another textbox where the summarized text will be shown.
• title="Text summarization with distilbart-cnn" and description="Summarize any text using the shleifer/distilbart-cnn-12-6 model under the hood!" give our interface a title and description to make it more user-friendly:

demo = gr.Interface(fn=summarize, 
                    inputs=[gr.Textbox(label="Text to summarize", lines=6)],
                    outputs=[gr.Textbox(label="Result", lines=3)],
                    title="Text summarization with distilbart-cnn",
                    description="Summarize any text using the `shleifer/distilbart-cnn-12-6` model under the hood!"
                   )

Finally, let’s launch our interface:

demo.launch(share=True, server_port=int(os.environ['PORT2']))

This is the result:

And there we have it. By simply using demo.launch(share=True), Gradio equips us with a shareable link, paving the way for anyone to interact with your model. It's clear that Gradio significantly streamlines the process of showcasing machine learning models, regardless of their complexity.

What we’ve demonstrated here is a practical and straightforward approach to making your machine learning models accessible to the world, sidestepping the complexities of front-end development. Don’t be fooled into thinking this method is limited to basic models or text summarization tasks — the same steps can be utilized for much more complex models. Try it out, and witness the simplicity with which you can share your work.