Skip to content

emka.web.id

menulis pengetahuan – merekam peradaban

Menu
  • Home
  • Tutorial
  • Makalah
  • Ke-NU-an
  • Kabar
  • Search
Menu

Cara Membuat Chatbot Sederhana dengan Deepseek R1 (Python + Serverless)

Posted on January 28, 2025

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.

Terbaru

  • Review WhatsApp Beta: Apakah Aman? Cara Instal dan Cara Keluar
  • Bebong: Makna, Asal Usul, dan Penggunaan dalam Bahasa Indonesia
  • Spinjam dan Spaylater: Apa yang Terjadi Jika Terlambat Membayar dan Bisakah Meminjam Lagi?
  • Cara Download dan Menonton Dood Stream Tanpa Iklan – Doods Pro
  • Cara Menghentikan dan Mengatasi Pinjol Ilegal
  • Kode Bank BRI untuk Transfer ke PayPal
  • Cara Menyadap WhatsApp Tanpa Aplikasi dan Kode QR
  • Apa yang Terjadi Jika Telat Bayar Shopee PayLater?
  • Telat Bayar Listrik 1 Hari: Apa yang Terjadi?
  • Cara Mengunduh Foto Profil WhatsApp Teman di Android, iPhone, dan PC/Mac
  • Rekomendasi Aplikasi Edit Foto Ringan Terbaik untuk PC Windows dan macOS
  • Cara Membeli Diamond Mobile Legends Menggunakan Pulsa Telkomsel
  • Tutorial Menggunakan Aplikasi Dana: Cara Top Up Dana dengan Mudah, Cepat, dan Murah untuk Pemula
  • Website Konverter YouTube ke MP3 Terbaik 2025
  • Cara Mengatasi Otorisasi Kadaluarsa Higgs Domino Tanpa Login Facebook
  • Tips Main E-Football 2024: Strategi Pemilihan Tim dan Pemain Terbaik
  • DramaQ: Situs Nonton Drakor Sub Indo Terbaru dan Lengkap
  • IGLookup: Cara Download APK dan Informasi Lengkap
  • Cara Daftar DrakorID? Apakah DrakorID Streaming Penipu/Ilegal?
  • Cara Login, Register, dan Transfer Data MyKONAMI
  • Website PT Melia Sehat Sejahtera Apakah Penipuan?
  • Alternatif APK Bling2: Alternatif Stylish untuk Ekspresi Diri
  • Contoh Bio IG Keren
  • Apa Arti Best Combo? Definisi dan Contoh Penggunaannya
  • Rakettv 2: Live Streaming Bola & Olahraga Lengkap Gratis (APK & Blog)
  • Apa itu Website SugarDaddy.com? Hati-hati Ilegal!
  • Apa Itu Pekerjaan Clipper Tiktok?
  • Mengenal Situs tiktoklikesgenerator.com
  • Apa itu Ovil App Studio?
  • jimpl.com: Alat Online Gratis untuk Melihat Metadata dan Data EXIF Foto
  • Review WhatsApp Beta: Apakah Aman? Cara Instal dan Cara Keluar
  • Bebong: Makna, Asal Usul, dan Penggunaan dalam Bahasa Indonesia
  • Spinjam dan Spaylater: Apa yang Terjadi Jika Terlambat Membayar dan Bisakah Meminjam Lagi?

©2025 emka.web.id | Design: Newspaperly WordPress Theme