Model klasifikasimu sudah jadi, akurasinya 93%, dan semuanya tampak bagus di notebook. Lalu klien minta demo. Notebook tidak bisa kamu kirim begitu saja — mereka tidak akan menjalankan sel satu per satu, apalagi menginstal semua dependensinya. Di titik ini kebanyakan model mati di dalam Jupyter: tidak pernah dipakai siapa pun.

Gradio menutup celah itu. Kamu tulis satu fungsi Python biasa, lalu Gradio membungkusnya jadi halaman web lengkap dengan input, tombol, dan grafik, sekaligus memberimu link yang bisa dibuka siapa saja lewat browser. Tidak ada HTML, tidak ada JavaScript, tidak ada frontend yang perlu dirawat.

Instalasi dan Demo Pertama

Pasang Gradio lewat pip. Satu baris, selesai.

bash
pip install gradio

Demo paling sederhana cuma butuh satu fungsi. Gradio membaca tipe parameter fungsi dan menebak komponen input yang cocok: str jadi kotak teks, angka jadi slider atau number input, list jadi dropdown.

python
import gradio as gr


def sapa(nama):
    return f"Halo, {nama}!"


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

Jalankan script-nya dan buka alamat yang muncul di terminal, biasanya http://127.0.0.1:7860. Ketik nama, tekan Enter, balasannya langsung tampil. demo.launch() juga membuka tab browser secara otomatis.

Membungkus Model scikit-learn

Contoh yang lebih nyata: bungkus model iris yang dilatih dengan scikit-learn. Kalau kamu belum paham cara melatihnya, baca dulu tutorial klasifikasi scikit-learn — di sini kita fokus ke lapisan antarmukanya.

Perhatikan output gr.Label yang menerima dictionary. Gradio otomatis menggambarnya jadi bar probabilitas per kelas, bukan sekadar teks. Trik kecil ini yang membuat demo langsung terasa profesional.

python
from sklearn.datasets import load_iris
from sklearn.ensemble import RandomForestClassifier
import gradio as gr


X, y = load_iris(return_X_y=True)
model = RandomForestClassifier(n_estimators=100, random_state=42)
model.fit(X, y)

label_kelas = ["Setosa", "Versicolor", "Virginica"]


def prediksi(sepal_panjang, sepal_lebar, petal_panjang, petal_lebar):
    fitur = [[sepal_panjang, sepal_lebar, petal_panjang, petal_lebar]]
    proba = model.predict_proba(fitur)[0]
    return {label_kelas[i]: float(proba[i]) for i in range(3)}


demo = gr.Interface(
    fn=prediksi,
    inputs=[
        gr.Slider(4.0, 8.0, label="Panjang sepal (cm)"),
        gr.Slider(2.0, 4.5, label="Lebar sepal (cm)"),
        gr.Slider(1.0, 7.0, label="Panjang petal (cm)"),
        gr.Slider(0.1, 2.5, label="Lebar petal (cm)"),
    ],
    outputs=gr.Label(num_top_classes=3),
    title="Klasifikasi Bunga Iris",
    description="Geser slider, lihat probabilitas tiap kelas.",
)
demo.launch()

Layout Lebih Rumit dengan gr.Blocks

gr.Interface cocok untuk satu fungsi dengan satu input-output. Begitu butuh beberapa tombol, tab, atau alur multi-langkah, pakai gr.Blocks. Kamu menyusun komponen seperti menyusun layout, lalu menghubungkan event klik ke fungsi lewat .click().

python
import gradio as gr


def hitung(nama, jumlah):
    total = jumlah * 5000
    return f"{nama}, total tagihanmu Rp {total:,}"


with gr.Blocks() as demo:
    gr.Markdown("## Kalkulator Kecil")
    with gr.Row():
        nama = gr.Textbox(label="Nama")
        jumlah = gr.Number(label="Jumlah barang", value=1)
    tombol = gr.Button("Hitung")
    hasil = gr.Textbox(label="Hasil", interactive=False)
    tombol.click(hitung, inputs=[nama, jumlah], outputs=hasil)

demo.launch()

Kalau kebutuhanmu lebih ke dashboard data eksplorasi — grafik yang me-refresh sendiri, filter tabel, laporan harian — Streamlit biasanya lebih nyaman. Gradio unggul untuk demo model yang menerima input dan mengembalikan prediksi.

Model Pre-trained Hugging Face dalam Beberapa Baris

Kamu tidak selalu punya model sendiri. Pustaka Hugging Face Transformers menyediakan ribuan model siap pakai lewat pipeline(), dan Gradio menerimanya langsung.

python
import gradio as gr
from transformers import pipeline


classifier = pipeline(
    "sentiment-analysis",
    model="distilbert-base-uncased-finetuned-sst-2-english",
)


def analisis(teks):
    hasil = classifier(teks)[0]
    return {hasil["label"]: float(hasil["score"])}


demo = gr.Interface(
    fn=analisis,
    inputs=gr.Textbox(lines=3, placeholder="Tulis kalimat bahasa Inggris..."),
    outputs=gr.Label(),
    title="Analisis Sentimen",
)
demo.launch()

Fungsi fn boleh melakukan apa saja: panggil API eksternal, query database, baca file. Selama ia menerima parameter dan mengembalikan nilai, Gradio bisa membungkusnya.

Bagikan dan Deploy Demo

Untuk dibagikan cepat, tambahkan share=True pada launch(). Gradio membuat tunnel publik dan mengembalikan link berakhiran .gradio.live yang bisa dibuka siapa pun.

python
demo.launch(share=True)

Link share=True bersifat sementara, biasanya 72 jam, dan komputermu harus tetap menyala. Untuk demo permanen, deploy ke Hugging Face Spaces — gratis, dan Gradio punya integrasi satu klik dari repo.

Mulai dari yang paling dekat dengan pekerjaanmu: ambil satu model yang sedang kamu kerjakan, bungkus dengan gr.Interface, lalu kirim link-nya ke satu orang. Satu demo yang benar-benar dipakai lebih berharga daripada sepuluh notebook yang cuma numpuk di folder.

Apa bedanya gr.Interface dan gr.Blocks?

gr.Interface untuk satu fungsi dengan satu input-output; gr.Blocks untuk layout bebas dengan banyak komponen dan event. Mulai dari Interface, naik ke Blocks saat demo mulai rumit.

Apakah share=True aman untuk produksi?

Tidak. Link-nya sementara, publik, dan bergantung pada komputermu yang tetap menyala. Untuk produksi, deploy ke Hugging Face Spaces atau jalankan Gradio di belakang server sendiri.

Gradio atau Streamlit?

Gradio kalau fokusnya demo model ML (input menuju prediksi). Streamlit kalau fokusnya dashboard data dan laporan. Keduanya bisa berjalan berdampingan dalam satu tim.