Membuat Antarmuka Chatbot Menggunakan Gradio (bagian 1)

interface chatbot sederhana hanya dengan beberapa baris kode saja

Pada kesempatan kali ini kita akan membuat sebuah antarmuka sederhana menggunakan Gradio, salah satu library yang memungkinkan kita untuk membangun aplikasi web interaktif yang user-friendly dan mudah untuk diimplementasikan.

Berkenalan dengan Gradio: Apa itu Gradio?

Gradio adalah sebuah library open-source yang dikembangkan oleh HuggingFace. Dengan alat ini, kita dapat membuat demo untuk model chatbot berbasis aplikasi web dengan mudah dan cepat melalui fitur built-in sharing. Oh iya, Gradio ini merupakan Python package, jadi kita akan membuat model aplikasi menggunakan bahasa Python.

Instalasi

Untuk bisa menggunakan Gradio kita perlu menginstal python versi 3.10 ke atas. Setelah itu kita dapat menginstal Gradio menggunakan pip. Run kode di bawah ini pada terminal atau command prompt:

pip install --upgrade gradio

Membuat Chatbot Sederhana
Sebagai perkenalan, kita akan membuat sebuah demo aplikasi yang menerima input dari pengguna lalu memberikan respons berdasarkan input tersebut. mari kita mulai!

langkah 1: Impor Gradio
pertama-tama kita mengimpor library yang dibutuhkan:

import gradio as gr

langkah 2: Mendefinisikan Logika Chatbot
Selanjutnya kita definisikan fungsi yang akan menangani input pengguna dan menghasilkan respons. Sebagai contoh, kita akan menggunakan seperangkat aturan dasar berikut:

def chatbot_response(user_input):
    responses = {
        "halo": "Hai! Bagaimana saya bisa membantu Anda hari ini?",
        "apa kabar?": "Saya hanya program, tetapi terima kasih telah bertanya!",
        "selamat tinggal": "Selamat tinggal! Semoga harimu menyenangkan!",
    }
    return responses.get(user_input.lower(), "Maaf, saya tidak mengerti itu.")

langkah 3: Membuat Interface
Sekarang kita buat antarmuka Gradio yang meliputi komponen title, deskripsi, text input, dan output pada aplikasi:

iface = gr.Interface(fn=chatbot_response, 
                     inputs="text", 
                     outputs="text", 
                     title="Chatbot Sederhana",
                     description="Ketik pesan untuk mengobrol dengan bot.")

langkah 4: Launch Aplikasi
Saatnya meluncurkan aplikasi Gradio untuk melihat chatbot kita beraksi

iface.launch()

Kode Lengkap

Berikut adalah kode lengkapnya:

import gradio as gr

def chatbot_response(user_input):
    responses = {
        "halo": "Hai! Bagaimana saya bisa membantu Anda hari ini?",
        "apa kabar?": "Saya hanya program, tetapi terima kasih telah bertanya!",
        "selamat tinggal": "Selamat tinggal! Semoga harimu menyenangkan!",
    }
    return responses.get(user_input.lower(), "Maaf, saya tidak mengerti itu.")

iface = gr.Interface(fn=chatbot_response, 
                     inputs="text", 
                     outputs="text", 
                     title="Chatbot Sederhana",
                     description="Ketik pesan untuk mengobrol dengan bot.")

iface.launch()

Demo di bawah ini akan terbuka pada browser di http://localhost:7860 jika dijalankan dari file. Jika kita menjalankannya di dalam notebook (misalnya, pada contoh ini saya menjalankannya di Google Colab) demo akan muncul di dalam notebook. berikut adalah tampilannya

Kesimpulan

Membuat user-interface chatbot menggunakan Gradio merupakan proses yang sederhana, yang memungkinkan kita membuat prototype dan menampilkan kemampuan chatbot atau model machine learning yang telah kita buat dengan lebih mudah. Hanya dengan beberapa baris kode, kita bisa membuat chatbot fungsional yang siap untuk berinteraksi dengan pengguna. Pada kesempatan berikutnya, kita akan membuat aplikasi yang lebih kompleks lagi, seperti mengintegrasikan model machine learning dengan menambahkan komponen multimodal (menganalisis teks, gambar, audio, dan video). Sampai jumpa dan happy coding!