1.2 Gradio Basics.ipynb

Kernel: Python (TensorFlow 3.10)

Gradio is a Python library used to quickly build interactive web UIs for ML models or functions. It wraps your Python function into a browser-based app with inputs and outputs.

A Gradio app = Function (logic) + Inputs + Outputs + Interface wrapper

Step-by-Step Implementation

1. Import a install Gradio App

### pip install gradio
import gradio as gr

2. Define a Function

This is your core logic.

Example: Simple Addition

def add_numbers(a, b):
    return a + b

3. Create Interface

interface = gr.Interface(
    fn=add_numbers,        # Function
    inputs=["number", "number"],  # Input types
    outputs="number"       # Output type
)

4. Launch App

interface.launch()

* Running on local URL:  http://127.0.0.1:7864
* To create a public link, set `share=True` in `launch()`.

Key Parameters of gr.Interface

• fn (Function) The backend logic Must accept inputs → return outputs

Inputs : Defines UI components:

Type	Example
"text"	Text input
"number"	Numeric input
"slider"	Range input
"image"	Image upload

inputs=["text"]

outputs: Defines output display

Type	Example
"text"	Text result
"number"	Numeric output
"label"	Classification
"image"	Image output

title & description

gr.Interface(
    fn=add_numbers,
    inputs=["number", "number"],
    outputs="number",
    title="Addition App",
    description="Enter two numbers"
)

Gradio Interface for: add_numbers
---------------------------------
inputs:
|-<gradio.components.number.Number object at 0x000002AD52E0FC10>
|-<gradio.components.number.Number object at 0x000002AD515AB050>
outputs:
|-<gradio.components.number.Number object at 0x000002AD52E8A050>

Example: ML Model (Churn Prediction)

def predict_churn(age, purchase_freq, avg_spend):
    score = age * 0.1 + purchase_freq * -0.5 + avg_spend * 0.01
    return "Churn" if score > 5 else "No Churn"

app = gr.Interface(
    fn=predict_churn,
    inputs=["number", "number", "number"],
    outputs="text",
    title="Customer Churn Predictor"
)

app.launch()

* Running on local URL:  http://127.0.0.1:7865
* To create a public link, set `share=True` in `launch()`.

Advanced Components

Using Sliders

inputs=[
    gr.Slider(18, 60),
    gr.Slider(1, 10),
    gr.Slider(100, 1000)
]

Using Dropdown

gr.Dropdown(["Low", "Medium", "High"])

<gradio.components.dropdown.Dropdown at 0x2ad52ff7cd0>

Using Image Input

gr.Interface(
    fn=process_image,
    inputs="image",
    outputs="image"
)

Using gr.Blocks (Advanced UI)

with gr.Blocks() as demo:
    num1 = gr.Number()
    num2 = gr.Number()
    output = gr.Number()

    btn = gr.Button("Add")
    btn.click(fn=add_numbers, inputs=[num1, num2], outputs=output)

demo.launch()

* Running on local URL:  http://127.0.0.1:7866
* To create a public link, set `share=True` in `launch()`.

Deployment Options

• Local (launch())

• Shareable link (launch(share=True))

Deploy on:

• Hugging Face Spaces

• Cloud (AWS / Azure / GCP)

Summary

• gr.Interface → Quick UI wrapper

• fn → Logic

• inputs/outputs → UI structure

• launch() → Run app