🧠 AI with Python – 🎛️ Gradio ML Demo Interface


Description:

Gradio makes it incredibly easy to turn a machine learning model into an interactive demo that anyone can use through a browser.

Without writing frontend code or managing complex frameworks, you can expose your model’s predictions via clean input widgets and real-time outputs.

In this project, we wrap a trained Iris classification model inside a Gradio interface, allowing users to experiment with predictions instantly.


Understanding the Problem

Machine learning models are often trained and evaluated in notebooks or scripts.

However, sharing these models with others—teammates, stakeholders, or learners—requires a simple and intuitive interface.

Gradio addresses this gap by allowing you to:

  • define inputs and outputs declaratively
  • map UI components directly to Python functions
  • run demos locally or generate shareable links
  • prototype ML applications in minutes

This makes Gradio ideal for demos, tutorials, hackathons, and early-stage ML products.


1. Load the Saved ML Model

We begin by loading the trained Iris classifier saved earlier using joblib.

import joblib
import numpy as np

model = joblib.load("iris_model.joblib")

This ensures the model is reused without retraining.


2. Define the Prediction Function

Next, we define a function that accepts user inputs and returns a readable prediction.

def predict_iris(sepal_length, sepal_width, petal_length, petal_width):
    features = np.array([[sepal_length, sepal_width, petal_length, petal_width]])
    pred = model.predict(features)[0]

    species_map = {0: "Setosa", 1: "Versicolour", 2: "Virginica"}
    return species_map[pred]

This function becomes the backbone of the Gradio interface.


3. Build the Gradio Interface

We define input components, output type, and UI metadata using Gradio’s Interface API.

import gradio as gr

interface = gr.Interface(
    fn=predict_iris,
    inputs=[
        gr.Number(label="Sepal Length"),
        gr.Number(label="Sepal Width"),
        gr.Number(label="Petal Length"),
        gr.Number(label="Petal Width")
    ],
    outputs=gr.Text(label="Predicted Species"),
    title="🌸 Iris Flower Prediction Demo",
    description="Enter flower measurements to predict the Iris species using a trained ML model."
)

Each input widget maps directly to a function argument.


4. Launch the Demo Interface

Finally, we launch the Gradio app.

interface.launch()

Gradio automatically opens a browser window where users can interact with the model in real time.


Key Takeaways

  1. Gradio enables rapid ML demos with minimal code.
  2. Models can be shared interactively without frontend development.
  3. Input widgets are directly connected to prediction functions.
  4. Ideal for demonstrations, tutorials, and quick prototyping.
  5. Gradio complements APIs and Streamlit apps in deployment workflows.

Conclusion

Gradio bridges the gap between machine learning models and real users by providing a simple, interactive interface for predictions.

It allows you to showcase your models, gather feedback, and iterate quickly—making it a powerful tool in any ML deployment toolkit.

As part of the AI with Python – Model Deployment & Real-World Tools track, Gradio serves as a lightweight alternative to full web apps and APIs, perfect for demos and early validation.

Code Snippet:

import joblib
import numpy as np

model = joblib.load("models/iris_model.joblib")


def predict_iris(sepal_length, sepal_width, petal_length, petal_width):
    features = np.array([[sepal_length, sepal_width, petal_length, petal_width]])
    pred = model.predict(features)[0]

    species_map = {0: "Setosa", 1: "Versicolour", 2: "Virginica"}
    return species_map[pred]


import gradio as gr

interface = gr.Interface(
    fn=predict_iris,
    inputs=[
        gr.Number(label="Sepal Length"),
        gr.Number(label="Sepal Width"),
        gr.Number(label="Petal Length"),
        gr.Number(label="Petal Width")
    ],
    outputs=gr.Text(label="Predicted Species"),
    title="🌸 Iris Flower Prediction Demo",
    description="Enter flower measurements to predict the Iris species using a trained ML model."
)

Link copied!

Comments

Add Your Comment

Comment Added!