Chatbot, program komputer yang dirancang untuk mensimulasikan percakapan manusia, kini telah menjadi bagian integral dari berbagai aplikasi, mulai dari layanan pelanggan hingga asisten pribadi.
Tutorial ini akan membuat chatbot yang interaktif. Integrasi dengan Fireworks AI, sebuah platform yang menyediakan model bahasa canggih, memungkinkan chatbot untuk memahami dan merespon berbagai jenis pertanyaan dan permintaan pengguna dengan akurat dan natural. Flask, sebuah microframework web Python yang populer, dipilih karena kemudahan penggunaannya dan kemampuannya untuk menangani permintaan HTTP dengan efisien. Penggunaan HTML, CSS, dan JavaScript di sisi frontend memastikan pengalaman pengguna yang seamless dan menarik.
Kode backend Python, yang ditulis dengan Flask, bertindak sebagai jembatan antara antarmuka pengguna dan API Fireworks AI. Kode ini menerima pesan dari pengguna, mengirimkan pesan tersebut ke API Fireworks AI, dan kemudian menerima serta menampilkan respons dari API tersebut kepada pengguna. Berikut adalah penjelasan rinci kode backend (backend.py):
from flask import Flask, request, jsonify
from flask_cors import CORS
import requests
import json
import os
app = Flask(__name__)
CORS(app) # Enable CORS for cross-origin requests
FIREWORKS_API_KEY = os.getenv("API_KEY", "your-api-key-here")
@app.route('/chat', methods=['POST'])
def chat():
try:
user_message = request.json.get('message')
url = "https://api.fireworks.ai/inference/v1/chat/completions"
payload = {
"model": "accounts/fireworks/models/deepseek-r1",
"max_tokens": 20480,
"top_p": 1,
"top_k": 40,
"presence_penalty": 0,
"frequency_penalty": 0,
"temperature": 0.6,
"messages": [{"role": "user", "content": user_message}]
}
headers = {
"Accept": "application/json",
"Content-Type": "application/json",
"Authorization": f"Bearer {FIREWORKS_API_KEY}"
}
response = requests.post(url, headers=headers, data=json.dumps(payload))
response_data = response.json()
if response.status_code == 200:
return jsonify({
"response": response_data['choices'][0]['message']['content']
})
else:
return jsonify({"error": "API request failed", "details": response_data}), 500
except Exception as e:
return jsonify({"error": str(e)}), 500
if __name__ == '__main__':
app.run(debug=True)
Kode di atas mendefinisikan sebuah endpoint /chat yang menerima permintaan POST. Permintaan ini berisi pesan dari pengguna. Kode kemudian mengirimkan pesan tersebut ke API Fireworks AI menggunakan library requests. Parameter payload menentukan berbagai pengaturan untuk model AI, termasuk model yang digunakan (deepseek-r1), jumlah token maksimum (max_tokens), dan parameter lainnya seperti top_p, top_k, presence_penalty, frequency_penalty, dan temperature yang berpengaruh pada kualitas dan keragaman respons. FIREWORKS_API_KEY berisi kunci API dari Fireworks AI, yang diperlukan untuk mengakses API. Kode ini juga menangani kesalahan dan mengembalikan respons yang sesuai. Penggunaan os.getenv untuk membaca API KEY dari file .env memastikan keamanan kunci API.
Antarmuka pengguna (UI) dibangun menggunakan HTML, CSS, dan JavaScript. Berikut adalah kode HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek Chat Interface</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
}
.chat-container {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#chat-history {
height: 400px;
overflow-y: auto;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
}
.message {
margin-bottom: 15px;
padding: 8px;
border-radius: 5px;
}
.user-message {
background-color: #e3f2fd;
margin-left: 20%;
}
.bot-message {
background-color: #f5f5f5;
margin-right: 20%;
}
#input-container {
display: flex;
gap: 10px;
}
#user-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="chat-container">
<h1>DeepSeek Chat</h1>
<div id="chat-history"></div>
<div id="input-container">
<input type="text" id="user-input" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
</div>
</div>
<script>
const chatHistory = document.getElementById('chat-history');
const userInput = document.getElementById('user-input');
function addMessage(message, isUser) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
messageDiv.textContent = message;
chatHistory.appendChild(messageDiv);
chatHistory.scrollTop = chatHistory.scrollHeight;
}
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
addMessage(message, true);
userInput.value = '';
try {
const response = await fetch('http://localhost:5000/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ message })
});
const data = await response.json();
if (data.error) {
addMessage(`Error: ${data.error}`, false);
} else {
addMessage(data.response, false);
}
} catch (error) {
addMessage(`Error: ${error.message}`, false);
}
}
// Allow Enter key to send message
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>
Kode HTML ini menampilkan antarmuka sederhana yang terdiri dari kotak input teks untuk memasukkan pesan, tombol “Send” untuk mengirim pesan, dan area untuk menampilkan riwayat percakapan. CSS yang disertakan menyediakan gaya dasar untuk antarmuka. JavaScript menangani pengiriman pesan ke backend dan menampilkan respons dari backend. Fungsi sendMessage mengirimkan pesan ke endpoint /chat menggunakan fetch API, dan fungsi addMessage menambahkan pesan ke riwayat percakapan. Penggunaan async/await memastikan bahwa kode berjalan secara asynchronous, sehingga antarmuka tetap responsif.
Untuk menjalankan aplikasi ini, Anda perlu menginstal paket Python yang dibutuhkan: flask, flask-cors, requests, dan python-dotenv. Kemudian, buat file .env dan masukkan API KEY Anda. Setelah itu, jalankan backend menggunakan perintah flask run, dan buka index.html di browser Anda.
Meskipun implementasi ini sederhana, ia menunjukkan bagaimana menggabungkan teknologi modern untuk membuat chatbot yang fungsional. Untuk aplikasi produksi, perlu dilakukan peningkatan seperti penggunaan HTTPS, penanganan kesalahan yang lebih robust, penggunaan static file melalui Flask, implementasi rate limiting, dan autentikasi yang aman. Penting juga untuk selalu menyimpan API KEY secara aman dan tidak pernah menyimpannya langsung di dalam kode yang di-commit ke sistem kontrol versi. Selain itu, penambahan fitur-fitur seperti indikator loading dan peningkatan antarmuka pengguna akan meningkatkan pengalaman pengguna secara signifikan.