A Beginner’s Guide to Building ML Demos in Minutes using Gradio

Chapter-1

Introduction

In the fast-moving world of machine learning, showcasing your model with a working demo is just as important as building the model itself. Whether you're a researcher, student, or engineer, Gradio allows you to turn models into interactive web apps—without needing full-stack development skills.

This article kicks off a comprehensive series exploring Gradio, from beginner-friendly tutorials to advanced case studies. In this first part, we’ll walk you through what Gradio is, why it’s useful, and how to build your very first app.

What is Gradio?

Gradio is an open-source Python library that lets you quickly create customizable UI components for machine learning models or any Python function. You can run the interface locally or host it online—making it ideal for collaboration, demonstrations, or teaching.

Key Features:

• Easy-to-use Python API

• Supports image, text, audio, video, and file inputs

• Integrates with TensorFlow, PyTorch, Hugging Face, etc.

• Public sharing via auto-generated links or Hugging Face Spaces

Step-by-Step: Run a Gradio App on Google Colab

Step 1: Open Google Colab

• Go to: https://colab.research.google.com

• Click "New Notebook" in the bottom-right corner.

Step 2: Install Gradio

In the first cell of your notebook, paste the following and run it:

!pip install gradio

This will install the latest version of Gradio.

Step 3: Write a Simple Gradio App

In the next cell, paste the following minimal code:

import gradio as gr

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

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

This will install the latest version of Gradio.
 Step 4: Run the App
Click the “play” button to run the cell. Gradio will:
Start a temporary server
Show an output link in the cell
You will see something like:
Running on public URL: https://abcd1234.gradio.live
 Step 5: Run the App
On the live app page:
Type a name (e.g., “tech”)
Click Submit
See the result: Hello, tech!

You can also share the app by giving the .gradio.live URL to others.

Line-by-line explanation of your Gradio code:
import gradio as gr
What it does:
This line imports the Gradio library and gives it the alias gr.
Gradio is a Python library that helps you quickly create web-based interfaces for Python 
functions, especially useful for ML models, utilities, or any function you 
want to make interactive.
def greet(name):
    return f"Hello, {name}!"
What it does:
This is a simple Python function named greet that:
Takes one parameter: name
Returns a greeting string like Hello, tech! using an f-string
It's the function that we will "wrap" with Gradio to make it interactive.

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
What it does:
This line creates a Gradio Interface called demo.
Here's what each argument means:
fn=greet: This tells Gradio which function to wrap — in this case, the greet function.
inputs="text": The input to the function will come from a text box.
outputs="text": The output will also be shown as text on the web page.
So, Gradio builds a simple web UI with:
A text box where the user types their name
A "Submit" button
A place to display the output greeting
demo.launch()
What it does:

This line starts a local web server (or gives you a gradio.live URL in Colab), 
launching the interactive UI in your browser.
You’ll see:
A box asking for your name
After typing and clicking “Submit”, you get Hello, <your name>! as output
Translation Device
Machine Learning