Tugas Memadukan aplikasi KA dan LLMI (LK 4.
2)
A. Bagian FrontEnd (React + Axios)
1. React + Axios adalah kombinasi antara [Link], sebuah library JavaScript
untuk membangun antarmuka pengguna (UI), dan Axios, sebuah library
JavaScript untuk melakukan permintaan HTTP (seperti GET, POST, PUT,
DELETE) ke server atau API.
2. Kode JavaScript
• Fungsi handleSend adalah fungsi asynchronous yang dipanggil ketika user mengirim
pesan.
• [Link]() mengecek apakah input kosong atau hanya spasi. Jika iya, maka proses
berhenti (return).
• Membuat objek pesan baru dari user.
• Menambahkan pesan user ke array messages (state chat).
• Menampilkan pesan user di UI.
• Mengosongkan kolom input setelah pesan dikirim.
• Mengaktifkan status loading untuk memberi tahu UI bahwa sedang memproses
balasan dari AI.
• Mengirimkan input user ke backend melalui endpoint [Link]
dengan metode POST.
• [Link] digunakan untuk komunikasi HTTP.
• Setelah menerima response dari backend, balasan AI ([Link]) ditambahkan ke
dalam daftar messages.
• Peran assistant menunjukkan bahwa pesan berasal dari AI.
• Jika terjadi error saat request ke backend (misalnya server mati, jaringan putus), maka
pesan error default ditampilkan.
• Apapun hasilnya (sukses/gagal), setLoading(false) digunakan untuk menghilangkan
indikator loading di UI.
B. BACKEND PYTHON – PERSIAPAN API REQUEST
1. Groq API adalah Application Programming Interface (API) yang disediakan
oleh perusahaan Groq, yang memungkinkan pengembang untuk mengakses
dan menggunakan Large Language Model (LLM) atau kecerdasan buatan
yang sangat cepat dan efisien, mirip seperti OpenAI, tetapi dengan pendekatan
yang berbeda dalam performa dan arsitektur.
2. Kode Python
• API_KEY: Mengambil API key dari environment variable (GROQ_API).
• LOG_FILE: Nama file untuk menyimpan log jumlah token yang digunakan.
• Fungsi untuk mencatat jumlah token yang digunakan setiap kali mengirim permintaan
ke API.
• get_ai_reply: Fungsi async yang menerima input user (message) dan
mengirimkannya ke GROQ.
• headers: Menyediakan otorisasi API dan metadata header untuk request.
• model: Model LLM yang digunakan (Meta LLaMA 4).
• messages: Daftar pesan yang dikirim ke LLM, terdiri dari:
o system: Untuk memberi instruksi pada model agar menjawab dengan cara
tertentu.
o user: Input asli dari pengguna.
C. BACKEND PYTHON – REQUEST API & ERROR HANDLING
• Menggunakan [Link] untuk mengirimkan POST request secara
asynchronous.
• Response dari GROQ diubah menjadi JSON.
• res.raise_for_status() akan menghasilkan error jika status code bukan 200-an.
• Mengambil jumlah token yang digunakan dari respons (jika ada), lalu dicatat ke log.
• Mengembalikan isi pesan dari AI ke pemanggil fungsi (get_ai_reply).
• choices[0] karena biasanya response dari OpenAI/GROQ berupa array.
• Menangani error HTTP yang spesifik (misalnya 400, 500).
• Menangani error lain di luar HTTP error (misalnya kesalahan parsing, jaringan, dll).
D. Alur Kerja Lengkap
1. User mengetik pesan di UI ➡ klik kirim.
2. Frontend (handleSend) mengirim POST ke backend /chat.
3. Backend (get_ai_reply) mengirim permintaan ke API Groq (LLaMA Meta).
4. API memberikan balasan ➡ dikembalikan ke frontend.
5. Pesan balasan ditampilkan di UI chat.
E. Evaluasi Terhadap Petunjuk Langkah 1-14
“Dikembangkan dengan bahasa pemrograman Python dengan model bahasa besar (LLM)”
Kode diatas sudah sesuai karena:
1. Menggunakan bahasa Python.
2. Mengakses LLM dari Hugging Face (HuggingFaceHub, ChatOpenAI, dan
LLMChain) — ini menandakan penggunaan model LLM seperti GPT, Claude, dll.
3. Menggunakan pustaka langchain, yang biasa digunakan untuk integrasi LLM secara
modular dan fleksibel.
