Membangun Antarmuka Pengguna untuk Aplikasi AI dengan Gradio di Python

Kegunaan model AI saat ini sangat berkurang tanpa antarmuka pengguna yang mudah diakses. Dengan Gradio, pustaka UI web Python sumber terbuka, Anda dapat menjembatani kesenjangan antara LLM dan pengguna akhir non-teknis. Ini memungkinkan Anda membuat prototipe cepat untuk proyek AI Anda dan menyederhanakan penerapannya ke audiens yang lebih luas.

Tutorial ini ditujukan untuk insinyur pembelajaran mesin yang umumnya tidak memiliki pengalaman pengembangan web. Materi mencakup dasar-dasar dan konsep inti Gradio, pembuatan antarmuka untuk berbagai tipe model AI, fitur lanjutan untuk UX dan interaktivitas, serta praktik terbaik untuk penerapan dan berbagi.

Mari mulai.

Mulai Menggunakan Gradio

Instalasi

Kita akan mulai dengan membuat lingkungan virtual (sebaiknya Conda):

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

Lalu, Anda dapat menggunakan PIP untuk memasang Gradio dan dependensinya:

$ pip install gradio ipykernel

Kita juga memasang paket ipykernel agar dapat menampilkan antarmuka Gradio langsung di dalam notebook Jupyter. Proses ini mengharuskan Anda menambahkan lingkungan virtual yang dibuat sebagai kernel ke Jupyter Lab. Berikut perintahnya:

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

Ini akan memungkinkan Anda membuat notebook dengan kernel yang memiliki Gradio terpasang. Untuk memverifikasi, impor dengan alias standarnya dan cetak versinya:

import gradio as gr
print(gr.__version__)
4.37.1

Konsep dasar dan terminologi

Kita akan mendalami Gradio dengan mempelajari konsep kunci dan terminologinya melalui contoh “Hello World”:

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

Saat Anda menjalankan kode di atas dalam sebuah sel, keluarannya akan berupa antarmuka interaktif kecil yang mengembalikan pesan sapaan kustom:

Gradio berpusat pada beberapa konsep kunci:

1. Interface: kelas inti untuk membuat UI.
2. Components: Elemen input dan output seperti kotak teks, gambar, dan audio. Saat ini ada lebih dari 30 komponen bawaan.
3. Functions: Fungsi Python yang memproses informasi dari komponen input dan mengembalikan hasil untuk ditampilkan dengan komponen output.
4. Launch: Metode untuk memulai aplikasi Gradio Anda.

Di atas, kita membuat fungsi greet yang menerima dan mengembalikan input teks. Karena itu, komponen input dan output ditentukan sebagai text di dalam kelas Interface.

Terakhir, kita memanggil metode launch, yang memulai server lokal. Untuk membuat UI tersedia bagi siapa pun, Anda dapat mengatur parameter share ke True. Ini akan memulai terowongan SSH dan menerapkan aplikasi Gradio ke halaman web yang dapat dibagikan secara publik:

demo.launch(share=True)
Running on public URL: https://d638ed5f2ce0044296.gradio.live
This share link expires in 72 hours. For free permanent hosting and GPU upgrades, run gradio deploy from Terminal to deploy to Spaces (https://huggingface.co/spaces)

Komponen Gradio

Sebagian besar waktu Anda akan dihabiskan untuk bereksperimen dengan berbagai komponen dan bagaimana menempatkannya di halaman saat membangun aplikasi Gradio. Jadi, mari kita lihat lebih dekat apa saja yang Anda miliki.

Komponen input dan output

Gradio menawarkan beragam komponen untuk membangun antarmuka interaktif. Komponen ini umumnya dibagi menjadi dua kategori: input dan output.

Komponen input memungkinkan pengguna memberikan data ke pemroses yang mendasarinya (ini dapat berupa fungsi Python apa pun). Beberapa input umum adalah:

• Textbox
• Image
• Audio
• Slider
• Dropdown

Berikut antarmuka contoh yang menggunakan beberapa komponen di atas:

def process_inputs(text, image, audio, number, option):
   # Process inputs and return results
   return f"Processed: {text}, {number}, {option}"
demo = gr.Interface(
   fn=process_inputs,
   inputs=[
       gr.Textbox(label="Enter text"),
       gr.Image(label="Upload image"),
       gr.Audio(label="Upload audio"),  # Uncomment this line to add audio input
       gr.Slider(0, 100, label="Choose a number"),
       gr.Dropdown(["Streamlit", "Taipy", "Gradio"], label="Select a UI library"),
   ],
   outputs="text",
)
demo.launch()

Pada contoh ini, fungsi process_inputs memerlukan lima parameter. Karena itu, kita perlu membuat lima komponen input dan meneruskannya ke inputs. Walaupun jumlah komponen input sebaiknya sesuai dengan jumlah parameter fungsi yang dibutuhkan, ini bukan aturan kaku. Untuk menghindari error dan peringatan, tetapkan nilai default untuk parameter yang tidak memerlukan masukan pengguna dari UI.

Perhatikan bagaimana kita menggunakan kelas Textbox untuk menentukan komponen input alih-alih string biasa text seperti contoh pertama. Selalu disarankan menggunakan kelas khusus untuk menentukan komponen input dan output agar dapat dikustomisasi. Misalnya, semua kelas komponen memiliki atribut label yang berguna, sementara Slider dan Dropdown memiliki argumen untuk menentukan rentang dan opsi yang tersedia.

Banyak komponen input juga dapat digunakan untuk menampilkan output. Berikut beberapa skenario umum:

• Label: Untuk menampilkan teks atau hasil klasifikasi
• Image: Untuk menampilkan gambar yang diproses atau dihasilkan
• Audio: Untuk memutar audio yang diproses atau dihasilkan
• Plot: Untuk menampilkan grafik atau bagan

Sama seperti input, jumlah komponen output harus sesuai dengan jumlah nilai yang dikembalikan dari fungsi pemrosesan.

Kustomisasi tampilan komponen

Gradio memungkinkan Anda mengkustomisasi tampilan komponen sesuai kebutuhan. Berikut contoh yang menggunakan kotak teks yang dikustomisasi:

demo = gr.Interface(
   fn=lambda x: int(x) ** 7,
   inputs=gr.Textbox(
       lines=5,
       placeholder="Enter any number...",
       label="Custom textbox",
       info="This is a customized textbox component to raise any number to the power of 7.",
   ),
   outputs=gr.Textbox(label="And the number is...", show_copy_button=True),
)
demo.launch()

Pada contoh ini, kita mengkustomisasi komponen Textbox dengan menentukan jumlah baris, menambahkan placeholder dan teks info, serta menyertakan tombol salin untuk output.

Eksperimenlah dengan berbagai komponen dan propertinya untuk membuat antarmuka yang paling sesuai dengan kebutuhan aplikasi AI Anda. Untuk mengetahui properti apa saja yang dapat diubah untuk komponen Anda, Anda dapat mengunjungi dokumentasinya, atau yang lebih praktis, gunakan operand ? di Jupyter Lab setelah nama kelasnya:

Membangun Antarmuka untuk LLM

Mari gabungkan semua yang telah kita pelajari dengan membuat dua antarmuka berbasis teks dan gambar yang digunakan di dunia nyata dan didukung oleh LLM.

Pertama, kita akan membangun penerjemah bahasa dari bahasa Inggris ke Turki, Spanyol, atau Tionghoa:

import openai  # pip install openai
def translate_text(api_key, text, target_language):
  
   openai.api_key = api_key  # Set openai API key
  
   language_map = {
       "Turkish": "Turkish",
       "Spanish": "Spanish",
       "Chinese": "Chinese (Simplified)",
   }
   prompt = f"Translate the following English text to {language_map[target_language]}:\n\nEnglish: {text}\n\n{target_language} translation:"
   try:
       response = openai.chat.completions.create(
           model="gpt-4",
           messages=[
               {"role": "system", "content": "You are a professional translator."},
               {"role": "user", "content": prompt},
           ],
       )
       translation = response.choices[0].message.content.strip()
       return translation
   except Exception as e:
       return f"Error: {str(e)}"

Mula-mula, kita mendefinisikan fungsi translate_text. Di dalamnya, kita menetapkan kunci API OpenAI dan membuat peta bahasa. Lalu, kita menyusun prompt untuk penerjemahan. Kemudian, di dalam blok try-except, kita mengirim permintaan ke endpoint ChatCompletion dengan system prompt. Terakhir, kita mengembalikan pilihan pertama.

Sekarang, kita dapat membangun antarmukanya:

iface = gr.Interface(
   fn=translate_text,
   inputs=[
       gr.Textbox(
           placeholder="Enter your OpenAI API key",
           type="password",
           label="OpenAI API Key",
       ),
       gr.Textbox(
           lines=4,
           placeholder="Enter English text to translate...",
           label="English Text",
       ),
       gr.Dropdown(choices=["Turkish", "Spanish", "Chinese"], label="Target Language"),
   ],
   outputs=gr.Textbox(label="Translation", show_copy_button=True),
   title="English to Turkish/Spanish/Chinese Translator",
   description="Translate English text to Turkish, Spanish, or Chinese using OpenAI's GPT-4 model. Enter your OpenAI API key, the text you want to translate, and select the target language.",
)
iface.launch(share=True)

Kodenya sederhana, seperti antarmuka sebelumnya, tetapi kita memperkenalkan beberapa properti baru:

• Argumen type pada kotak teks mengubah bidang input teks biasa menjadi input sandi, sehingga teks tersembunyi.
• Argumen title dan description dari kelas Interface menambahkan judul H1 dan subjudul di bagian atas tengah halaman.

Berikut hasilnya:

Anda mungkin bertanya-tanya mengapa kita meminta kunci API pengguna sebagai bagian dari aplikasi alih-alih menyediakannya sendiri. Alasannya terkait dengan cara Gradio menerapkan UI.

Jika kita menyediakan kunci API kita sendiri sebagai variabel lingkungan (yang merupakan praktik standar), versi aplikasi yang dapat dibagikan secara publik tidak akan berfungsi karena tidak memiliki akses ke variabel lingkungan kita. Pada bagian penerapan, kita akan melihat cara memperbaikinya dengan menerapkan aplikasi kita ke HuggingFace Spaces.

Mari kita bangun UI lain untuk menghasilkan gambar:

def generate_surrealist_art(api_key, prompt):
   surrealist_prompt = f"Create a surrealist artwork based on the following concept: {prompt}. The artwork should be dreamlike, with unexpected juxtapositions and a sense of the uncanny."
   client = OpenAI(api_key=api_key)
   response = client.images.generate(
       model="dall-e-3",
       prompt=surrealist_prompt,
       size="1024x1024",
   )
   image_url = response.data[0].url
   return image_url

Kita membuat fungsi bernama generate_surrealist_art yang mengirim permintaan ke dall-e-3 dan mengembalikan URL gambar yang dihasilkan menggunakan prompt surealis. Lalu, kita akan memasukkan fungsi ini ke dalam kelas Interface lagi:

iface = gr.Interface(
   fn=generate_surrealist_art,
   inputs=[
       gr.Textbox(
           placeholder="Enter your OpenAI API key",
           type="password",
           label="OpenAI API Key",
       ),
       gr.Textbox(
           lines=2,
           placeholder="Describe your surrealist concept...",
           label="Concept Description",
       ),
   ],
   outputs=gr.Image(value="str"),
   title="Surrealist Artwork Generator",
   description="Generate surrealist artwork based on your prompts using DALL-E. Enter your OpenAI API key and describe your concept.",
)
iface.launch(share=True)

Kita menentukan dua input untuk kunci API dan konsep yang ingin kita tangkap dalam gambar surealis. Lalu, kita membuat satu komponen output untuk gambar yang dihasilkan dengan kelas Image. Jika Anda menetapkan argumen value menjadi str, komponen dapat mengunduh dan menampilkan gambar dari URL, yang memang kita perlukan.

Dan berikut hasilnya:

Membangun Antarmuka untuk Model ML Klasik

Sekarang, mari membangun antarmuka untuk model regresi tabular klasik. Kita akan menggunakan dataset Diamonds yang tersedia di Seaborn.

Mulailah dengan membuat direktori kerja baru dan skrip baru bernama app.py di dalamnya. Lalu, tempelkan kode dari GitHub gist ini yang memuat data, memprosesnya menggunakan Pipeline Scikit-learn dan melatih model RandomForestRegression.

Langkah berikutnya adalah membuat fungsi pemrosesan yang menerima jumlah input yang sama dengan banyaknya fitur pada dataset Diamonds:

# Create the Gradio interface
def predict_price(carat, cut, color, clarity, depth, table, x, y, z):
  
   input_data = pd.DataFrame(
       {
           "carat": [carat],
           "cut": [cut],
           "color": [color],
           "clarity": [clarity],
           "depth": [depth],
           "table": [table],
           "x": [x],
           "y": [y],
           "z": [z],
       }
   )
  
   prediction = model.predict(input_data)[0]
   return f"Predicted Price: ${prediction:.2f}"

Fungsi ini mengonversi input tersebut ke DataFrame dan meneruskannya ke metode .predict() dari pipeline model yang telah dilatih. Terakhir, fungsi mengembalikan string dengan harga prediksi.

Sekarang, kelas Interface harus sesuai dengan tanda tangan fungsi ini: sembilan komponen input untuk memproses fitur dan satu output untuk menampilkan harga prediksi:

iface = gr.Interface(
   fn=predict_price,
   inputs=[
       gr.Slider(
           minimum=diamonds["carat"].min(),
           maximum=diamonds["carat"].max(),
           label="Carat",
       ),
       gr.Dropdown(["Fair", "Good", "Very Good", "Premium", "Ideal"], label="Cut"),
       gr.Dropdown(["D", "E", "F", "G", "H", "I", "J"], label="Color"),
       gr.Dropdown(
           ["I1", "SI2", "SI1", "VS2", "VS1", "VVS2", "VVS1", "IF"], label="Clarity"
       ),
       gr.Slider(
           minimum=diamonds["depth"].min(),
           maximum=diamonds["depth"].max(),
           label="Depth",
       ),
       gr.Slider(
           minimum=diamonds["table"].min(),
           maximum=diamonds["table"].max(),
           label="Table",
       ),
       gr.Slider(minimum=diamonds["x"].min(), maximum=diamonds["x"].max(), label="X"),
       gr.Slider(minimum=diamonds["y"].min(), maximum=diamonds["y"].max(), label="Y"),
       gr.Slider(minimum=diamonds["z"].min(), maximum=diamonds["z"].max(), label="Z"),
   ],
   outputs="text",
   title="Diamond Price Predictor",
   description="Enter the characteristics of a diamond to predict its price.",
)
iface.launch(share=True)

Di dalam kelas, kita membuat tiga dropdown untuk fitur kategorikal. Opsi diisi dengan kategori unik di setiap fitur. Kita juga membuat enam komponen slider untuk menerima fitur numerik. Rentang slider ditentukan oleh nilai minimum dan maksimum setiap fitur.

Sekarang yang perlu kita lakukan hanyalah mengeksekusi skrip untuk menjalankan dan menerapkan aplikasi:

$ python app.py

Berikut hasilnya:

Untuk praktik terbaik dan kiat optimasi, lompat ke bagian Praktik Terbaik di bawah ini.

Menerapkan Aplikasi Gradio

Kita sudah melihat betapa mudahnya menerapkan aplikasi Gradio dengan mengaktifkan satu argumen. Tentu, kelemahan metode ini adalah demo kedaluwarsa dalam 72 jam. Jadi, metode yang direkomendasikan untuk menerapkan Gradio adalah melalui HuggingFace Spaces. HuggingFace mengakuisisi Gradio pada 2021, sehingga integrasi antara kedua platform menjadi mulus.

Jadi, untuk tutorial ini atau aplikasi apa pun yang Anda buat dengan Gradio di masa mendatang, daftar akun gratis di huggingface.co dan buka Settings > Tokens untuk menghasilkan access token:

Token hanya ditampilkan sekali, jadi pastikan menyimpannya di tempat yang aman.

Dengan token ini, Anda dapat menerapkan sebanyak mungkin aplikasi Gradio dengan hosting permanen di Spaces. Sebagai contoh, kita akan menerapkan model Prediksi Harga Berlian dari bagian sebelumnya, dan Anda akan mendapati prosesnya sangat mudah.

Yang perlu Anda lakukan hanyalah masuk ke direktori yang berisi skrip UI dan memanggil gradio deploy di terminal:

Terminal memandu Anda mengonversi skrip menjadi HuggingFace Space yang berfungsi. Terminal menanyakan detail seperti:

• Access token yang Anda buat
• Judul Space: ini akan menjadi bagian dari URL Space setelah penerapan
• Nama skrip yang berisi kode UI Gradio (default app.py)
• Perangkat keras Space; biarkan kosong untuk hanya menggunakan CPU (gratis)
• Variabel lingkungan apa pun yang digunakan skrip (di sinilah Anda menyimpan kunci API dan rahasia pengguna dengan aman)
• Dependensi — masukkan satu per satu dengan menekan ENTER

Dan terminal menampilkan tautan Space yang telah diterapkan. Berikut tampilannya:

Hal hebat lainnya dari metode penerapan ini adalah Gradio secara otomatis mengonversi demo menjadi REST API yang berfungsi. Instruksi untuk mengakses dan melakukan kueri selalu berada di bagian bawah:

Jadi, sekali jalan, Anda mendapatkan hosting UI permanen untuk aplikasi Anda bagi pengguna non-teknis dan REST API untuk rekan kerja serta teman pengembang Anda.

Untuk opsi penerapan dan berbagi lainnya, seperti menyematkan demo ke halaman web, menambahkan autentikasi Google ke aplikasi, dll., kunjungi bagian “Sharing Your App” pada dokumentasi Gradio.

Praktik Terbaik dan Kiat Gradio

Saat mengembangkan antarmuka pengguna dengan Gradio, mengikuti praktik terbaik dapat meningkatkan pengalaman pengguna dan keterpeliharaan aplikasi Anda secara signifikan. Berikut beberapa rekomendasi kunci:

1. Gunakan skrip untuk organisasi dan keterpeliharaan

Atur aplikasi Gradio dalam skrip Python untuk kontrol versi, kolaborasi, dan penerapan yang lebih baik.

2. Optimalkan alokasi ruang untuk komponen

Gunakan ukuran dan alat tata letak yang sesuai (mis., gr.Column(), gr.Row()) untuk memastikan antarmuka yang seimbang dan responsif.

3. Berikan informasi yang komprehensif

Manfaatkan atribut ‘info’ dan ‘label’ untuk memberikan instruksi dan konteks yang jelas bagi setiap komponen.

4. Tangani himpunan fitur besar secara efisien

Untuk model dengan banyak fitur, gunakan input berkas (CSV, JSON) untuk memungkinkan prediksi batch dan menyederhanakan antarmuka.

5. Kelola variabel lingkungan dengan benar

Gunakan python-dotenv untuk pengembangan lokal dan tetapkan variabel di Hugging Face Spaces untuk penerapan.

6. Terapkan penanganan error dan validasi

Validasi input, berikan pesan error yang jelas, dan gunakan blok try-except untuk penanganan error yang baik.

7. Optimalkan performa

Terapkan caching, pemuatan malas untuk model besar, dan gunakan gr.LoadingStatus() untuk tugas yang berjalan lama.

8. Rancang untuk aksesibilitas

Pastikan kontras tinggi, sediakan teks alt untuk gambar, dan aktifkan navigasi keyboard untuk semua elemen interaktif.

9. Terapkan pengungkapan progresif

Gunakan akordeon atau tab untuk mengatur antarmuka yang kompleks, menampilkan opsi lanjutan sesuai kebutuhan.

10. Perbarui dan pelihara secara berkala

Tetap perbarui dependensi, pantau bug, dan terus tingkatkan berdasarkan masukan pengguna.

11. Manfaatkan sumber daya HuggingFace

Manfaatkan alat dan sumber daya HuggingFace untuk integrasi mulus dengan Gradio, termasuk repositori model dan dataset.

12. Hosting model besar di HuggingFace Hub

Untuk model tabular besar, unggah ke HuggingFace Hub dan muat langsung di skrip Gradio Anda guna meningkatkan performa dan mengurangi kebutuhan penyimpanan lokal.

13. Gunakan dataset HuggingFace

Untuk dataset besar, unggah ke HuggingFace Hub dan akses langsung di aplikasi Gradio Anda untuk merampingkan manajemen data dan meningkatkan waktu pemuatan.

Kesimpulan dan Sumber Daya Lanjutan

Dalam artikel ini, kita telah mempelajari dasar-dasar membangun antarmuka pengguna untuk aplikasi AI menggunakan Gradio. Kita baru menyentuh permukaan karena Gradio menawarkan lebih banyak fitur untuk membangun antarmuka yang kompleks. Misalnya, interface state memungkinkan aplikasi Anda mengingat output dari satu pemanggilan fungsi ke pemanggilan berikutnya. Reactive interfaces secara dinamis mengubah UI segera setelah input pengguna berubah. Dengan Blocks, Anda dapat membangun aplikasi dengan tata letak dan desain kustom.

Demikian pula, lihat sumber daya terkait berikut untuk konten lebih lanjut:

• 10 Paket Python untuk Menambah Tumpukan Data Science Anda
• 7 Alat Generative AI Esensial untuk Membangun Aplikasi AI yang Unggul
• 5 Proyek yang Dapat Anda Bangun dengan Model Gen AI
• Kursus CI/CD untuk Machine Learning