Tutorial Lengkap Gradio: Buat Demo ML dalam Hitungan Menit

# Tutorial Lengkap Gradio: Buat Demo ML dalam Hitungan Menit Gradio adalah library Python yang memungkinkan Anda membuat web interface untuk model machine learning dengan cepat. Dengan beberapa baris...

By Ruby Abdullah · · tutorial
GradioML DemoWeb InterfacePythonMachine LearningHugging Face

Tutorial Lengkap Gradio: Buat Demo ML dalam Hitungan Menit

Gradio adalah library Python yang memungkinkan Anda membuat web interface untuk model machine learning dengan cepat. Dengan beberapa baris kode saja, Anda bisa membangun demo interaktif, berbagi dengan orang lain, dan bahkan deploy ke Hugging Face Spaces.

Mengapa Gradio?

Keunggulan Gradio:
  • Simple API: Build UI dengan minimal code
  • Tanpa frontend knowledge: Development hanya Python
  • Shareable links: URL publik instan
  • Hugging Face integration: Easy deployment ke Spaces
  • Multiple input/output types: Text, images, audio, video

Use Cases:
  • Demo model ML
  • Prototype data science
  • Internal tools
  • Aplikasi edukasi
  • Interface testing API

Instalasi

pip install gradio


Dengan fitur tambahan


pip install gradio[oauth]  # Untuk authentication



Verify installation


python -c "import gradio; print(gradio.version)"

Quick Start

1. Hello World

import gradio as gr


def greet(name):


    return f"Hello, {name}!"



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


demo.launch()

2. Multiple Inputs/Outputs

import gradio as gr


def process(name, age, isstudent):


    status = "mahasiswa" if isstudent else "profesional"


    return f"{name} adalah {status} berusia {age} tahun.", age  12



demo = gr.Interface(


    fn=process,


    inputs=[


        gr.Textbox(label="Nama"),


        gr.Number(label="Umur"),


        gr.Checkbox(label="Mahasiswa?")


    ],


    outputs=[


        gr.Textbox(label="Deskripsi"),


        gr.Number(label="Umur dalam Bulan")


    ],


    title="Processor Info User",


    description="Masukkan informasi Anda"


)


demo.launch()

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()

2. Numeric Inputs

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()

3. Selection Inputs

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()

4. Media Inputs

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"),

Artikel Terkait