KDnuggets Gradio Crash Course

Photo by Editor

# Introducing Gradio

Gradio is a Python framework that changes the way machine learning professionals create interactive web interfaces for their models. With just a few lines of code, you can create sophisticated applications that accept various inputs (text, images, audio) and display the output intuitively. Whether you're a researcher, data scientist, or developer, Gradio makes modeling accessible to everyone.

Some of the benefits of Gradio include:

• It allows you to go from model to demo in minutes
• You don't need any previous skills, just a pure introduction to Python
• It has support for text, images, audio, and more
• You can easily share and use locally, and you can host publicly for free

# Includes Gradio and Basic Setup

To get started with Gradio, you need to install the package using the pip command.

Now that you have Gradio installed, let's create your first Gradio program. First, create a file and name it gradio_app.py then add this code:

import gradio as gr
def greet(name):
    return f"Hello {name}!"

demo = gr.Interface(
    fn=greet,
    inputs="text",
    outputs="text",
    title="Greeting App"
)

demo.launch()

Run this with python gradio_app.pyand you will have a working web application http://127.0.0.1:7860/. The interface offers text input, a submit button, and text output – all automatically generated from your simple specifications.

Photo by the Author

// Understanding the Gradio Interface

I gr.Interface A class is Gradio's high-level interface that removes complexity. It requires three main components:

• Function (fn): Your Python function that processes the input
• Input: Specification of input types
• Output: Specification of the output type

// Inspects Input and Output Components

While you can use simple strings like "text", "image"or "audio" to specify components, Gradio provides more control with transparent component classes.

import gradio as gr

demo = gr.Interface(
    fn=lambda x: x,
    inputs=gr.Textbox(lines=2, placeholder="Enter text here..."),
    outputs=gr.Textbox(label="Output")
)

Common components include:

• gr.Textbox(): Multi-line text input
• gr.Image(): Image loading/preview
• gr.Audio(): Audio file management
• gr.Checkbox(): Logical input
• gr.Slider(): Numeric range input
• gr.Radio(): Multiple choice
• gr.Dropdown(): Choose from the options

// Handling Multiple Inputs and Outputs

Real-world applications often require a lot of input or produce a lot of output. Gradio handles this well with lists.

import gradio as gr

def process_form(name, is_morning, temperature):
    greeting = "Good morning" if is_morning else "Hello"
    message = f"{greeting}, {name}! Temperature: {temperature}°C"
    return message, temperature * 1.8 + 32  # Convert to Fahrenheit

demo = gr.Interface(
    fn=process_form,
    inputs=[
        gr.Textbox(label="Name"),
        gr.Checkbox(label="Is it morning?"),
        gr.Slider(0, 100, label="Temperature (°C)")
    ],
    outputs=[
        gr.Textbox(label="Greeting"),
        gr.Number(label="Temperature (°F)")
    ]
)

demo.launch()

Output:

Photo by the Author

If you use multiple inputs, your function must accept the same number of parameters. Similarly, multiple outputs require your function to return multiple values.

// Processing Images

Gradio makes image processing models very easy to implement:

import gradio as gr
import numpy as np

def apply_sepia(image):
    # Image comes as numpy array with shape (height, width, channels)
    sepia_filter = np.array([[0.393, 0.769, 0.189],
                             [0.349, 0.686, 0.168],
                             [0.272, 0.534, 0.131]])
    sepia_image = image.dot(sepia_filter.T)
    sepia_image = np.clip(sepia_image, 0, 255).astype(np.uint8)
    return sepia_image

demo = gr.Interface(
    fn=apply_sepia,
    inputs=gr.Image(label="Input Image"),
    outputs=gr.Image(label="Sepia Filtered"),
    title="Sepia Filter App"
)

demo.launch()

Output:

Photo by the Author

I gr.Image The component automatically handles file uploads, previews, and image conversions NumPy processing arrays.

// It handles audio processing

Audio apps are straightforward:

import gradio as gr

def transcribe_audio(audio):
    return "Transcribed text would appear here"

demo = gr.Interface(
    fn=transcribe_audio,
    inputs=gr.Audio(label="Upload Audio", type="filepath"),
    outputs=gr.Textbox(label="Transcription"),
    title="Speech-to-Text Demo"
)
demo.launch()

In a real application, you can call the speech recognition model inside the transcribe_audio(audio) work. To demonstrate, we will return a placeholder.

Output:

Photo by the Author

# Creating Advanced Buildings with Gradio Blocks

While gr.Interface suitable for simple applications, gr.Blocks provides complete control over the structure and flow of data. Think of Blocks as a low-level API that lets you build complex, multi-step applications.

// Using the Basic Blocks Example

import gradio as gr

def greet(name):
    return f"Hello {name}!"

with gr.Blocks() as demo:
    name_input = gr.Textbox(label="Your Name")
    greet_button = gr.Button("Greet")
    output = gr.Textbox(label="Greeting")
    
    greet_button.click(
        fn=greet,
        inputs=name_input,
        outputs=output
    )

demo.launch()

Output:

Photo by the Author

// Building Complex Structures with Rows and Columns

Here's a more complicated example that includes Transformers. Make sure the Transformers The package is installed on your computer.

pip install transformers

import gradio as gr
from transformers import pipeline

# Load a translation model
translator = pipeline("translation_en_to_de", model="t5-small")

def translate_text(text):
    result = translator(text, max_length=40)[0]
    return result['translation_text']

with gr.Blocks(title="English to German Translator") as demo:
    gr.Markdown("# 🌍 English to German Translator")
    
    with gr.Row():
        with gr.Column():
            english_input = gr.Textbox(
                label="English Text",
                placeholder="Enter text to translate...",
                lines=4
            )
            translate_btn = gr.Button("Translate", variant="primary")
        
        with gr.Column():
            german_output = gr.Textbox(
                label="German Translation",
                lines=4
            )

    # Add example prompts
    gr.Examples(
        examples=[
            ["Hello, how are you?"],
            ["The weather is beautiful today"],
            ["Machine learning is fascinating"]
        ],
        inputs=english_input
    )
    
    translate_btn.click(
        fn=translate_text,
        inputs=english_input,
        outputs=german_output
    )

demo.launch()

Output:

Photo by the Author

# Country Management in Gradio Applications

State management is important in interactive systems. Gradio offers two modes: global mode and session mode.

// Managing Session State (User Definition)

For user-specific mode, use Gradio's built-in region management. The following example shows simple chatbot logic using status to store chat history.

import gradio as gr

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(label="Conversation")
    msg = gr.Textbox(label="Your Message")
    clear = gr.Button("Clear")
    
    state = gr.State([])
    
    def user_message(message, history):
        # Update history with user message and placeholder for bot
        return "", history + [[message, None]]
    
    def bot_response(history):
        # Simple echo bot logic
        response = f"I received: {history[-1][0]}"
        history[-1][1] = response
        return history
    
    msg.submit(
        user_message,
        [msg, state],
        [msg, state]
    ).then(
        bot_response,
        state,
        chatbot
    )
    
    clear.click(lambda: (None, []), None, [chatbot, state])

demo.launch()

# Posting and sharing your apps

For quick sharing, Gradio can create a public URL:

This creates a temporary, publicly accessible link that's great for demos and quick sharing with colleagues. It usually works for 72 hours.

Free hosting, forever:

• Create a A Hugging Face account
• Create a new Space with Gradio as a software development kit (SDK)
• Upload your application files: app.py (your main application file) and requirements.txt (Python dependency). An example of what should be requirements.txt file:

git add .
git commit -m "Initial commit"
git push

Your application will be available at https://huggingface.co/spaces/your-username/your-space-name.

Gradio applications can be deployed on any platform that supports Python web applications:

• Use it demo.launch(server_name="0.0.0.0", server_port=7860)
• Deploy your application with all dependencies inside a Docker container
• Deploy on AWS, Google Cloud, Azure, and other platforms

# Creating an Image Classification Dashboard

Putting everything we've learned together, let's build a project. This project is a simple image classification dashboard built with it PyTorch and Gradio. It allows users to upload an image through a web interface and get the top five predicted classes generated by a pre-trained deep learning model.

We will use ResNet-50is a well-known convolutional neural network trained on the ImageNet dataset. Because the model is pre-trained, the project does not require custom training or labeled data. It is intended for demonstration, testing, and educational purposes rather than for production use.

We will use Gradio to provide a lightweight interface so that users can interact with the model directly from the browser.

import gradio as gr
import torch
from torchvision import models, transforms
from PIL import Image

# Load pre-trained model
model = models.resnet50(pretrained=True)
model.eval()

# Preprocessing
preprocess = transforms.Compose([
    transforms.Resize(256),
    transforms.CenterCrop(224),
    transforms.ToTensor(),
    transforms.Normalize(
        mean=[0.485, 0.456, 0.406],
        std=[0.229, 0.224, 0.225]
    )
])

def classify_image(image):
    image = Image.fromarray(image)
    input_tensor = preprocess(image)
    input_batch = input_tensor.unsqueeze(0)
    
    with torch.no_grad():
        output = model(input_batch)

    # Get top 5 predictions
    probabilities = torch.nn.functional.softmax(output[0], dim=0)
    top5_prob, top5_catid = torch.topk(probabilities, 5)
    
    results = []
    for i in range(top5_prob.size(0)):
        results.append(f"Category {top5_catid[i].item()}: {top5_prob[i].item()*100:.2f}%")
    
    return "n".join(results)

demo = gr.Interface(
    fn=classify_image,
    inputs=gr.Image(label="Upload Image"),
    outputs=gr.Textbox(label="Top 5 Predictions"),
    title="Image Classifier"
)

demo.launch()

# Wrapping up

Gradio simplifies machine learning deployment by removing traditional barriers between model development and user interaction. In this crash course, you'll learn the basics of creating a Gradio interface, component-based design for various input/output types, advanced architectures using Gradio Blocks, landscape management of interactive applications, and techniques for sharing your work.

Gradio's true strength lies in its flexibility and versatility. It doesn't matter if you're building a quick prototype for internal testing or a polished application for public use; Gradio provides the tools you need to bring your learning models to life.

Long Shithu is a software engineer and technical writer who likes to use cutting-edge technology to make interesting stories, with a keen eye for detail and the ability to simplify complex concepts. You can also find Shittu Twitter.