Input Components

1. Text Inputs

import gradio as gr

def textdemo(text, textarea, password):

    return f"Text: {text}, Area: {textarea[:20]}..., Pass length: {len(password)}"

demo = gr.Interface(
    fn=textdemo,
    inputs=[
        gr.Textbox(label="Short Text", placeholder="Masukkan text..."),
        gr.Textbox(label="Long Text", lines=5, maxlines=10),

        gr.Textbox(label="Password", type="password")
    ],
    outputs="text"
)
demo.launch()

import gradio as gr

def numericdemo(number, slider, rangeval):

    return f"Number: {number}, Slider: {slider}, Range: {rangeval}"

demo = gr.Interface(
    fn=numericdemo,

    inputs=[
        gr.Number(label="Number", value=10),
        gr.Slider(minimum=0, maximum=100, value=50, step=1, label="Slider"),
        gr.Slider(minimum=0, maximum=100, value=[20, 80], label="Range")
    ],
    outputs="text"
)
demo.launch()

import gradio as gr

def selectiondemo(dropdown, radio, checkboxes):
    return f"Dropdown: {dropdown}, Radio: {radio}, Checks: {checkboxes}"

demo = gr.Interface(
    fn=selectiondemo,

    inputs=[
        gr.Dropdown(choices=["Opsi A", "Opsi B", "Opsi C"], label="Dropdown"),
        gr.Radio(choices=["Pilihan 1", "Pilihan 2", "Pilihan 3"], label="Radio"),
        gr.CheckboxGroup(choices=["Item 1", "Item 2", "Item 3"], label="Checkboxes")
    ],
    outputs="text"
)
demo.launch()

import gradio as gr
from PIL import Image
import numpy as np

def mediademo(image, audio, video):
    result = []
    if image is not None:
        result.append(f"Image shape: {np.array(image).shape}")
    if audio is not None:
        sr, data = audio
        result.append(f"Audio: {sr}Hz, {len(data)} samples")
    if video is not None:
        result.append(f"Video diterima")
    return "\n".join(result) if result else "Tidak ada media"

demo = gr.Interface(
    fn=mediademo,

    inputs=[
        gr.Image(label="Upload Image", type="pil"),
        gr.Audio(label="Upload Audio"),
        gr.Video(label="Upload Video")
    ],
    outputs="text"
)
demo.launch()

import gradio as gr

def filedemo(file, files):
    result = []
    if file:
        result.append(f"Single file: {file.name}")
    if files:
        result.append(f"Multiple files: {[f.name for f in files]}")
    return "\n".join(result)

demo = gr.Interface(
    fn=filedemo,

    inputs=[
        gr.File(label="Single File"),
        gr.File(label="Multiple Files", filecount="multiple")
    ],
    outputs="text"
)
demo.launch()

Output Components

1. Text dan Data Outputs

import gradio as gr
import pandas as pd
import json

def outputdemo(text):

    df = pd.DataFrame({
        "Nama": ["Alice", "Bob", "Charlie"],
        "Score": [85, 92, 78]
    })
    jsondata = {"input": text, "length": len(text)}

    return (
        f"Processed: {text.upper()}",
        df,
        jsondata,

        "# Markdown Output\nBold dan italic"

    )

demo = gr.Interface(
    fn=outputdemo,
    inputs="text",
    outputs=[
        gr.Textbox(label="Text Output"),
        gr.Dataframe(label="Table Output"),
        gr.JSON(label="JSON Output"),
        gr.Markdown(label="Markdown Output")
    ]
)
demo.launch()

2. Media Outputs

3. Plot Outputs

import gradio as gr
import matplotlib.pyplot as plt
import numpy as np

def plotdemo(numpoints):
    # Matplotlib plot
    fig, ax = plt.subplots()
    x = np.linspace(0, 10, int(numpoints))

    ax.plot(x, np.sin(x), label='sin(x)')
    ax.plot(x, np.cos(x), label='cos(x)')
    ax.legend()
    ax.settitle("Fungsi Trigonometri")

    return fig

demo = gr.Interface(
    fn=plotdemo,

    inputs=gr.Slider(10, 100, value=50, label="Jumlah Points"),
    outputs=gr.Plot(label="Plot")
)
demo.launch()

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Aplikasi Saya")

    with gr.Row():
        with gr.Column():
            inputtext = gr.Textbox(label="Input")
            submitbtn = gr.Button("Submit")

        with gr.Column():
            outputtext = gr.Textbox(label="Output")

    def process(text):
        return text.upper()

    submitbtn.click(fn=process, inputs=inputtext, outputs=outputtext)


demo.launch()

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Aplikasi Multi-Tab")

    with gr.Tabs():
        with gr.TabItem("Text Processing"):
            textinput = gr.Textbox(label="Masukkan Text")
            textoutput = gr.Textbox(label="Hasil")

            textbtn = gr.Button("Proses")
            textbtn.click(

                fn=lambda x: x.upper(),
                inputs=textinput,
                outputs=textoutput

            )

        with gr.TabItem("Image Processing"):
            imginput = gr.Image(label="Upload Image")
            imgoutput = gr.Image(label="Hasil")

            imgbtn = gr.Button("Proses")
            imgbtn.click(

                fn=lambda x: x,  # Identity untuk demo
                inputs=imginput,
                outputs=imgoutput

            )

    with gr.Accordion("Advanced Settings", open=False):
        gr.Slider(label="Parameter 1")
        gr.Slider(label="Parameter 2")

demo.launch()

import gradio as gr

with gr.Blocks() as demo:
    # State untuk persist across interactions
    history = gr.State([])

    chatbot = gr.Chatbot(label="Chat History")
    msg = gr.Textbox(label="Message")
    clear = gr.Button("Clear")

    def respond(message, chathistory):
        response = f"Anda berkata: {message}"
        chathistory.append((message, response))

        return "", chathistory

    def clearhistory():

        return [], []

    msg.submit(respond, [msg, chatbot], [msg, chatbot])
    clear.click(clearhistory, outputs=[chatbot, history])

demo.launch()

4. Event Handling

import gradio as gr

with gr.Blocks() as demo:
    inputtext = gr.Textbox(label="Ketik sesuatu")

    outputtext = gr.Textbox(label="Output")
    charcount = gr.Number(label="Jumlah Karakter")


    # Multiple event types
    inputtext.change(
        fn=lambda x: (x.upper(), len(x)),
        inputs=inputtext,

        outputs=[outputtext, charcount]

    )

    # Button events
    btn = gr.Button("Klik Saya")
    clickcount = gr.Number(value=0, label="Jumlah Klik")

    btn.click(
        fn=lambda x: x + 1,
        inputs=clickcount,

        outputs=clickcount
    )

demo.launch()

Integrasi Model ML

1. Image Classification

import gradio as gr
from transformers import pipeline

Load model
classifier = pipeline("image-classification", model="google/vit-base-patch16-224")

def classifyimage(image):

    if image is None:
        return {}
    results = classifier(image)
    return {r["label"]: r["score"] for r in results}

demo = gr.Interface(
    fn=classifyimage,
    inputs=gr.Image(type="pil"),
    outputs=gr.Label(numtopclasses=5),
    title="Image Classifier",
    examples=["cat.jpg", "dog.jpg"]  # Tambahkan contoh gambar
)
demo.launch()

2. Text Generation

import gradio as gr
from transformers import pipeline

generator = pipeline("text-generation", model="gpt2")

def generatetext(prompt, maxlength, temperature):
    result = generator(
        prompt,
        maxlength=maxlength,
        temperature=temperature,
        numreturnsequences=1
    )
    return result[0]["generatedtext"]


demo = gr.Interface(
    fn=generatetext,
    inputs=[
        gr.Textbox(label="Prompt", lines=3),
        gr.Slider(50, 200, value=100, label="Max Length"),
        gr.Slider(0.1, 2.0, value=0.7, label="Temperature")
    ],
    outputs=gr.Textbox(label="Generated Text", lines=10),
    title="Text Generator"
)
demo.launch()

3. Chatbot dengan LLM

import gradio as gr
from openai import OpenAI

client = OpenAI()

def chat(message, history):
    messages = [{"role": "system", "content": "Kamu adalah asisten yang membantu."}]
    for h in history:
        messages.append({"role": "user", "content": h[0]})
        messages.append({"role": "assistant", "content": h[1]})
    messages.append({"role": "user", "content": message})

    response = client.chat.completions.create(
        model="gpt-4o-mini",
        messages=messages
    )
    return response.choices[0].message.content

demo = gr.ChatInterface(
    fn=chat,
    title="AI Chatbot",
    description="Chat dengan GPT-4o-mini"
)
demo.launch()

4. Object Detection

import gradio as gr
from transformers import pipeline
from PIL import Image, ImageDraw

detector = pipeline("object-detection", model="facebook/detr-resnet-50")

def detectobjects(image):

    if image is None:
        return None, []

    results = detector(image)

    # Draw bounding boxes
    draw = ImageDraw.Draw(image)
    detections = []

    for result in results:
        box = result["box"]
        label = f"{result['label']}: {result['score']:.2f}"
        draw.rectangle(
            [box["xmin"], box["ymin"], box["xmax"], box["ymax"]],
            outline="red",
            width=2
        )
        draw.text((box["xmin"], box["ymin"]), label, fill="red")
        detections.append(label)

    return image, detections

demo = gr.Interface(
    fn=detectobjects,
    inputs=gr.Image(type="pil"),
    outputs=[
        gr.Image(label="Objek Terdeteksi"),
        gr.JSON(label="Detections")
    ],
    title="Object Detector"
)
demo.launch()

Sharing dan Deployment

1. Share dengan Public Link

import gradio as gr

demo = gr.Interface(fn=lambda x: x, inputs="text", outputs="text")

Membuat public link (valid selama 72 jam)
demo.launch(share=True)

2. Deploy ke Hugging Face Spaces

# app.py
import gradio as gr

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

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

# Buat requirements.txt
echo "gradio" > requirements.txt

Upload ke Hugging Face Spaces via web interface atau CLI
huggingface-cli login
huggingface-cli repo create my-gradio-app --type space --space-sdk gradio
git push

3. Custom Server Configuration

import gradio as gr

demo = gr.Interface(fn=lambda x: x, inputs="text", outputs="text")

demo.launch(
    servername="0.0.0.0",  # Listen on all interfaces

    serverport=7860,
    auth=("admin", "password"),  # Basic auth
    sslkeyfile="key.pem",  # HTTPS

    sslcertfile="cert.pem",
    maxthreads=10

)

from fastapi import FastAPI
import gradio as gr

app = FastAPI()

@app.get("/")
def readroot():
    return {"message": "Hello World"}

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

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
app = gr.mountgradioapp(app, demo, path="/gradio")

Run: uvicorn app:app --reload

Fitur Advanced

1. Flagging

import gradio as gr

def process(text):
    return text.upper()

demo = gr.Interface(
    fn=process,
    inputs="text",
    outputs="text",
    flaggingmode="manual",  # atau "auto", "never"

    flaggingdir="flaggeddata",

    flaggingoptions=["Incorrect", "Offensive", "Other"]
)
demo.launch()

2. Progress Bars

import gradio as gr
import time

def longtask(progress=gr.Progress()):

    progress(0, desc="Memulai...")
    for i in progress.tqdm(range(100)):
        time.sleep(0.05)
    return "Selesai!"

demo = gr.Interface(fn=longtask, inputs=[], outputs="text")
demo.launch()

3. Queuing

import gradio as gr
import time

def slowfunction(x):

    time.sleep(5)
    return x

with gr.Blocks() as demo:
    inputtext = gr.Textbox()
    outputtext = gr.Textbox()

    btn = gr.Button("Submit")
    btn.click(slowfunction, inputtext, outputtext)

demo.queue(maxsize=10)  # Enable queue dengan max 10 pending requests

demo.launch()

import gradio as gr

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

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

Akses API di /api/predict
curl -X POST http://localhost:7860/api/predict -H "Content-Type: application/json" -d '{"data":["World"]}'

# Client usage
from gradioclient import Client

client = Client("http://localhost:7860/")
result = client.predict("World", apiname="/predict")

print(result)  # "Hello, World!"

import gradio as gr

def safeprocess(text):
    try:
        if not text:
            raise gr.Error("Silakan masukkan text!")
        if len(text) > 1000:
            gr.Warning("Text sangat panjang, proses mungkin lambat")
        return text.upper()
    except Exception as e:
        raise gr.Error(f"Proses gagal: {str(e)}")

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

demo.launch()

3. Examples