update FE

.gitignore

@@ -2,7 +2,9 @@
 venv/
 
 # Database ChromaDB lokal (wajib)
+chroma/
 my_chroma_db/
+.chroma/
 
 # File rahasia API keys (wajib)
 .env

app.py

@@ -10,12 +10,12 @@ from dotenv import load_dotenv
 from bson.objectid import ObjectId
 from datetime import datetime
 
-# --- 1. Muat .env dan Inisialisasi ---
+# --- 1. Load .env and Initialize ---
 load_dotenv()
 app = Flask(__name__)
 CORS(app) 
 
-# --- 2. Inisialisasi Klien (Global) ---
+# --- 2. Client Initialization (Global) ---
 hf_token = os.getenv("HF_TOKEN")
 hf_client = InferenceClient(
     "meta-llama/Meta-Llama-3-8B-Instruct",
@@ -26,20 +26,20 @@ mongo_url = os.getenv("MONGO_URL")
 mongo_client = MongoClient(mongo_url)
 db = mongo_client.get_database("chatbot_db")
 chat_history_collection = db.get_collection("conversations")
-print("✅ Berhasil terkoneksi ke MongoDB Atlas.")
+print("✅ Successfully connected to MongoDB Atlas.")
 
-print("Memuat model embedding (ini mungkin butuh waktu)...")
+print("Loading model embedding (this may take a while)...")
 embedding_model = SentenceTransformer('all-MiniLM-L6-v2')
-print("✅ Model embedding ('all-MiniLM-L6-v2') berhasil dimuat.")
+print("✅ The embedding model (‘all-MiniLM-L6-v2’) has been successfully loaded.")
 
 try:
     chroma_client = HttpClient(host='localhost', port=8000)
     knowledge_collection = chroma_client.get_collection(
         name="website_knowledge"
     )
-    print("✅ Berhasil terkoneksi ke ChromaDB (localhost:8000).")
+    print("✅ Successfully connected to ChromaDB (localhost:8000).")
 except Exception as e:
-    print(f"❌ GAGAL terhubung ke ChromaDB. Pastikan server chroma run... berjalan. Error: {e}")
+    print(f"❌ Failed to connect to ChromaDB. Make sure the chroma run... server is running. Error: {e}")
 
 # --- 3. Endpoint Frontend ---
 # @app.route("/")
@@ -48,20 +48,20 @@ except Exception as e:
 
 @app.route("/")
 def home():
-    """Sajikan landing page (index.html)"""
+    """Display the landing page (index.html)"""
     return render_template("index.html")
 
 @app.route("/chat")
 def chat_page():
-    """Sajikan halaman chat utama (chat.html)"""
+    """Display the main chat page (chat.html)"""
     return render_template("chat.html")
 
-# --- 4. Endpoint API - Ambil SEMUA History (untuk F5) ---
+# --- 4. Endpoint API - Take ALL History (untuk F5) ---
 @app.route("/api/conversations", methods=["GET"])
 def get_conversations():
     user_id = request.args.get("userId")
     if not user_id:
-        return jsonify({"error": "userId dibutuhkan"}), 400
+        return jsonify({"error": "userId is required"}), 400
     
     try:
         convos = list(chat_history_collection.find(
@@ -72,58 +72,58 @@ def get_conversations():
         for convo in convos:
             conversations_list.append({
                 "id": str(convo.get('_id')),
-                "title": convo.get("title", "Obrolan Baru"),
+                "title": convo.get("title", "New Chat"),
                 "messages": convo.get("messages", []),
                 "createdAt": convo.get("createdAt")
             })
         return jsonify(conversations_list)
     except Exception as e:
         print(f"Error di /api/conversations GET: {e}")
-        return jsonify({"error": "Gagal mengambil percakapan"}), 500
+        return jsonify({"error": "Failed to retrieve conversation"}), 500
 
-# --- 5. ENDPOINT API BARU (UNTUK "CLEAR ALL") ---
+# --- 5. NEW API ENDPOINT (FOR “CLEAR ALL”) ---
 @app.route("/api/conversations", methods=["DELETE"])
 def clear_conversations():
     """
-    Menghapus SEMUA percakapan untuk satu userId.
+    Delete ALL conversations for one user ID.
     """
     data = request.json
     user_id = data.get("userId")
     if not user_id:
-        return jsonify({"error": "userId dibutuhkan"}), 400
+        return jsonify({"error": "userId is required"}), 400
 
     try:
-        # Hapus semua dokumen di MongoDB yang cocok dengan userId
+        # Delete all documents in MongoDB that match the userId
         result = chat_history_collection.delete_many({"userId": user_id})
         
-        print(f"Berhasil menghapus {result.deleted_count} percakapan untuk userId {user_id}.")
+        print(f"Successfully deleted {result.deleted_count} conversation for userId {user_id}.")
         return jsonify({
-            "message": "History berhasil dihapus", 
+            "message": "History successfully deleted", 
             "deleted_count": result.deleted_count
         })
 
     except Exception as e:
         print(f"Error di /api/conversations DELETE: {e}")
-        return jsonify({"error": "Gagal menghapus history"}), 500
+        return jsonify({"error": "Failed to delete history"}), 500
 
-# --- 6. Endpoint API Chat (Utama) ---
+# --- 6. Endpoint API Chat (Main) ---
 @app.route("/api/chat", methods = ["POST"])
 def handle_chat():
     try:
         data = request.json
         user_message = data.get("message")
         user_id = data.get("userId")
-        conversation_id = data.get("conversationId") # ID chat yang aktif, bisa null
+        conversation_id = data.get("conversationId") # Active chat ID, can be null
 
         if not user_message or not user_id:
-            return jsonify({"error": "Parameter 'message' dan 'userId' dibutuhkan."}), 400
+            return jsonify({"error": "The 'message' dan 'userId' parameters are required."}), 400
         
         history = []
         user_message_doc = {"role": "user", "content": user_message, "timestamp": datetime.now()}
 
-        # --- 1. (CRUD) Ambil/Buat Percakapan ---
+        # --- 1. (CRUD) Retrieve/Create Conversation ---
         if conversation_id:
-            # Ini adalah obrolan yang sudah ada
+            # This is an existing chat
             current_convo = chat_history_collection.find_one({
                 "_id": ObjectId(conversation_id),
                 "userId": user_id
@@ -131,18 +131,17 @@ def handle_chat():
             if current_convo:
                 history = current_convo.get("messages", [])[-6:]
         
-        # --- 2. (RAG) - Lakukan RAG (Sama seperti sebelumnya) ---
-        print(f"Mencari konteks untuk: \"{user_message}\"")
+        # --- 2. (RAG) - Perform RAG (Same as before) ---
+        print(f"Searching for context for: \"{user_message}\"")
         query_embedding = embedding_model.encode(user_message).tolist()
         results = knowledge_collection.query(
             query_embeddings=[query_embedding],
-            n_results=1 # <-- Anda bisa ganti ini ke 1 nanti
+            n_results=1 
         )
         context = "\n\n".join(results['documents'][0])
         print("Konteks ditemukan.")
         
-        # --- 3. (RAG) Buat prompt ---
-        # <-- Anda bisa perketat prompt ini nanti
+        # --- 3. (RAG) For prompt ---
         system_prompt = """You are a precise assistant. Answer *strictly* and *only* based on the context provided. 
                         Do not add any information, pollutants, or applications that are not *explicitly* mentioned in the text. 
                         If the context provides conflicting information (like for different products), only use the information from the *single most relevant* chunk."""
@@ -153,15 +152,15 @@ def handle_chat():
             {"role": "user", "content": user_prompt}
         ]
         
-        # --- 4. (RAG) Panggil API Llama 3 ---
-        print("Memanggil Hugging Face API...")
+        # --- 4. (RAG) Call the Llama 3 API ---
+        print("Calling Hugging Face API...")
         response = hf_client.chat_completion(messages=messages, max_tokens=250, temperature=0.1)
         ai_response = response.choices[0].message.content
         
-        # --- 5. (CRUD) Simpan balasan AI ke MongoDB ---
+        # --- 5. (CRUD) Save the AI response to MongoDB ---
         ai_message_doc = {"role": "assistant", "content": ai_response, "timestamp": datetime.now()}
         
-        if conversation_id: # Obrolan lama
+        if conversation_id: # Existing chat
             chat_history_collection.update_one(
                 {"_id": ObjectId(conversation_id)},
                 {
@@ -169,27 +168,27 @@ def handle_chat():
                     "$set": {"updatedAt": datetime.now()}
                 }
             )
-        else: # Obrolan baru
+        else: # New chat
             title = user_message[:30] + "..." if len(user_message) > 30 else user_message
             new_convo_doc = {
                 "userId": user_id,
                 "title": title,
-                "messages": [user_message_doc, ai_message_doc], # Langsung tambahkan user & AI
+                "messages": [user_message_doc, ai_message_doc], # Directly append user & AI
                 "createdAt": datetime.now(),
                 "updatedAt": datetime.now()
             }
             insert_result = chat_history_collection.insert_one(new_convo_doc)
-            conversation_id = insert_result.inserted_id # Ambil _id baru
+            conversation_id = insert_result.inserted_id # Get the new _id
             
-        print("Percakapan berhasil disimpan ke MongoDB.")
+        print("Conversation successfully saved to MongoDB.")
 
-        # --- 6. Kirim balasan ---
+        # --- 6. Send the response ---
         return jsonify({"answer": ai_response, "conversationId": str(conversation_id)})
 
     except Exception as e:
         print(f"Error di /api/chat: {e}")
-        return jsonify({"error": "Terjadi kesalahan di server"}), 500
+        return jsonify({"error": "Server error occurred"}), 500
 
-# --- 7. Jalankan Server ---
+# --- 7. Run the Server ---
 if __name__ == "__main__":
-    app.run(port=3001, debug=True)
+    app.run(port=5000, debug=True)

contoh_struktur.json

@@ -3,7 +3,7 @@
   "userId": "anon-uuid-12345-abcde", // Anonymous User ID Anda
   "createdAt": "2025-10-28T12:00:00Z",
   "updatedAt": "2025-10-28T12:05:00Z",
-  "title": "Percakapan tentang Air Quality", // (Opsional)
+  "title": "Conversation about Air Quality", // (Opsional)
   "messages": [
     {
       "role": "user",

load_data.py

@@ -3,57 +3,56 @@ from sentence_transformers import SentenceTransformer
 from chromadb import HttpClient
 import sys
 
-# --- 1. Inisialisasi Klien & Model ---
-print("Menghubungkan ke ChromaDB di localhost:8000...")
+# --- 1. Initialize Client & Model ---
+print("Connecting to ChromaDB at localhost:8000...")
 try:
-    # Kita terhubung ke server yang sama dengan app.py
+    # We connect to the same server as app.py
     client = HttpClient(host='localhost', port=8000)
     collection = client.get_or_create_collection(name="website_knowledge")
-    print("✅ Berhasil terhubung ke ChromaDB.")
+    print("✅ Successfully connected to ChromaDB.")
 except Exception as e:
-    print(f"❌ GAGAL terhubung ke ChromaDB. Pastikan server ChromaDB berjalan.")
+    print("❌ FAILED to connect to ChromaDB. Ensure the ChromaDB server is running.")
     print(f"Error: {e}")
     sys.exit(1)
 
-print("Memuat model embedding 'all-MiniLM-L6-v2' (ini mungkin butuh waktu)...")
+print("Loading 'all-MiniLM-L6-v2' embedding model (this might take a moment)...")
 model = SentenceTransformer('all-MiniLM-L6-v2')
-print("✅ Model embedding berhasil dimuat.")
+print("✅ Embedding model successfully loaded.")
 
-# --- 2. Baca File CSV ---
-file_path = "knowledge_base_FINAL_COMBINED.csv" # Pastikan nama file ini benar
+# --- 2. Read CSV File ---
+file_path = "knowledge_base_FINAL_COMBINED.csv"  # Ensure this file name is correct
 try:
     df = pd.read_csv(file_path)
     df = df.fillna('')
-    print(f"✅ Berhasil memuat {len(df)} chunk dari {file_path}.")
+    print(f"✅ Successfully loaded {len(df)} chunks from {file_path}.")
 except FileNotFoundError:
-    print(f"❌ Error: File {file_path} tidak ditemukan.")
+    print(f"❌ Error: File {file_path} not found.")
     sys.exit(1)
 
-# --- 3. Siapkan Data ---
+# --- 3. Prepare Data ---
 documents = df['chunk_text'].tolist()
 metadatas = df[['main_topic', 'chunk_title', 'src_url']].to_dict('records')
 ids = df['chunk_id'].tolist()
 
-# --- 4. BUAT EMBEDDING (Bagian Paling Penting) ---
-# app.py membuat embedding 'on-the-fly' untuk 1 pertanyaan
-# Script ini membuat embedding untuk SEMUA dokumen sekaligus
-print(f"Memulai proses embedding untuk {len(documents)} dokumen...")
+# --- 4. CREATE EMBEDDINGS (The Most Important Part) ---
+# app.py creates embeddings 'on-the-fly' for 1 question
+# This script creates embeddings for ALL documents at once
+print(f"Starting embedding process for {len(documents)} documents...")
 embeddings = model.encode(documents, show_progress_bar=True)
-print("✅ Embedding selesai.")
+print("✅ Embeddings complete.")
 
-# --- 5. Tambahkan ke ChromaDB ---
-# Hapus data lama (jika ada) agar tidak duplikat
+# --- 5. Add to ChromaDB ---
+# Delete old data (if any) to prevent duplication
 try:
     collection.delete(ids=ids)
-    print("Data lama di collection berhasil dihapus.")
+    print("Old data in the collection successfully deleted.")
 except Exception as e:
-    print("Tidak ada data lama untuk dihapus, melanjutkan...")
+    print("No old data to delete, continuing...")
 
-print("Menambahkan data baru ke ChromaDB (dalam batch)...")
+print("Adding new data to ChromaDB (in batches)...")
 batch_size = 100
 for i in range(0, len(ids), batch_size):
-    print(f"  Menambahkan batch {i//batch_size + 1}...")
-    
+    print(f"  Adding batch {i//batch_size + 1}...")
     collection.add(
         embeddings=embeddings[i:i+batch_size].tolist(),
         documents=documents[i:i+batch_size],
@@ -61,4 +60,4 @@ for i in range(0, len(ids), batch_size):
         ids=ids[i:i+batch_size]
     )
 
-print(f"🎉 SEMUA SELESAI! {collection.count()} dokumen berhasil disimpan di ChromaDB.")
+print(f"🎉 ALL DONE! {collection.count()} documents successfully stored in ChromaDB.")

static/script.js

@@ -1,20 +1,20 @@
 document.addEventListener("DOMContentLoaded", () => {
-    // === 1. MENANGKAP ELEMEN DOM ===
+    // === 1. CATCHING DOM ELEMENTS ===
     const sendButton = document.getElementById("send-button");
     const chatInput = document.getElementById("chat-input");
     const historyList = document.getElementById("history-list");
     const chatLog = document.getElementById("chat-log-area");
     const newChatButton = document.querySelector(".new-chat-btn");
-    const clearAllButton = document.querySelector(".clear-all"); // <-- TAMBAHAN BARU
+    const clearAllButton = document.querySelector(".clear-all"); 
 
     const emptyChatPlaceholder = `
         <div class="empty-chat-placeholder">
             <i class="fa-solid fa-robot"></i>
-            <h2>Hello Name</h2>
+            <h2>Hello! I am your Enviro-Edu Assistant. How may I assist you today?</h2>
         </div>
     `;
 
-    // === 2. DATA UTAMA APLIKASI (STATE) ===
+    // === 2. APPLICATION MAIN DATA (STATE) ===
     let conversations = {};
     let currentConversationId = null;
     let currentUserId = getOrCreateUserId();
@@ -39,46 +39,46 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
     
-    // <-- LISTENER BARU UNTUK "CLEAR ALL" ---
+    // <-- NEW LISTENER FOR “CLEAR ALL” ---
     clearAllButton.addEventListener("click", (e) => {
         e.preventDefault();
         clearAllConversations();
     });
 
-    // === 4. FUNGSI-FUNGSI UTAMA ===
+    // === 4. MAIN FUNCTIONS ===
 
     /**
-     * FUNGSI BARU: Menghapus semua percakapan
+     * NEW FEATURE: Delete all conversations
      */
     async function clearAllConversations() {
-        if (!confirm("Apakah Anda yakin ingin menghapus semua percakapan? Tindakan ini tidak bisa dibatalkan.")) {
+        if (!confirm("Are you sure you want to delete all conversations? This action cannot be undone.")) {
             return;
         }
 
         try {
-            const response = await fetch("http://localhost:3001/api/conversations", {
+            const response = await fetch("http://localhost:5000/api/conversations", {
                 method: "DELETE",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ userId: currentUserId }) // Kirim userId untuk dihapus
+                body: JSON.stringify({ userId: currentUserId }) // Send userID to be deleted
             });
 
             if (!response.ok) {
-                throw new Error("Gagal menghapus history di server.");
+                throw new Error("Failed to delete history on the server.");
             }
             
-            // Jika server berhasil, bersihkan state frontend
+            // If the server is successful, clear the frontend state
             conversations = {};
-            startNewChat(); // Ini akan membersihkan UI (merender history & chat log)
+            startNewChat(); // This will clear the UI (render history & chat log).
             
-            console.log("Semua percakapan berhasil dihapus.");
+            console.log("All conversations have been successfully deleted.");
 
         } catch (error) {
             console.error("Error clearing conversations:", error);
-            alert("Terjadi kesalahan saat menghapus history.");
+            alert("An error occurred while deleting history.");
         }
     }
     
-    // ... (Fungsi getOrCreateUserId, startNewChat, sendMessage, dll. tetap sama persis) ...
+    // ... (The functions getOrCreateUserId, startNewChat, sendMessage, etc. remain exactly the same) ...
     
     function getOrCreateUserId() {
         let userId = localStorage.getItem('anonymousUserId');
@@ -127,7 +127,7 @@ document.addEventListener("DOMContentLoaded", () => {
         chatLog.scrollTop = chatLog.scrollHeight;
         
         try {
-            const response = await fetch("http://localhost:3001/api/chat", {
+            const response = await fetch("http://localhost:5000/api/chat", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
@@ -159,7 +159,7 @@ document.addEventListener("DOMContentLoaded", () => {
         } catch (error) {
             console.error("Error sending message:", error);
             const p = loadingDiv.querySelector(".message-content p");
-            p.textContent = "Maaf, terjadi kesalahan. Coba lagi.";
+            p.textContent = "Sorry, an error occurred. Please try again.";
         }
         
         chatLog.scrollTop = chatLog.scrollHeight;
@@ -229,13 +229,13 @@ document.addEventListener("DOMContentLoaded", () => {
         return messageDiv;
     }
 
-    // --- Inisialisasi Aplikasi ---
+    // --- Application Initialization ---
     async function initializeApp() {
         if (!currentUserId) return;
         try {
-            const response = await fetch(`http://localhost:3001/api/conversations?userId=${currentUserId}`);
+            const response = await fetch(`http://localhost:5000/api/conversations?userId=${currentUserId}`);
             if (!response.ok) {
-                throw new Error("Gagal memuat history");
+                throw new Error("Failed to load history");
             }
             const data = await response.json(); 
             conversations = {};

static/style.css

@@ -1,31 +1,31 @@
-/* Reset CSS dasar */
+/* Reset basic CSS */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
-/* 1. STYLE BODY UNIVERSAL (Dasar) */
+/* 1. UNIVERSAL BODY STYLE (Basic) */
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     background-color: #f7f7f8;
     color: #1f2328;
     /* display: flex; */
     /* height: 100vh; */
-    /* overflow: hidden; Mencegah body scroll */
+    /* overflow: hidden; Preventing body scroll */
 }
 
-/* 2. STYLE BODY KHUSUS UNTUK CHAT PAGE */
-/* Selektor ini memastikan style hanya berlaku jika body BUKAN landing-page */
+/* 2. SPECIAL BODY STYLE FOR CHAT PAGE */
+/* This selector ensures that the style only applies if the body is NOT a landing page */
 body:not(.landing-page) { 
     display: flex;
     height: 100vh;
-    overflow: hidden; /* Mencegah body scroll */
+    overflow: hidden; /* Preventing body scroll */
 }
 
-/* --- 3. STYLE UNTUK LANDING PAGE (index.html) --- */
+/* --- 3. STYLE FOR LANDING PAGE (index.html) --- */
 
-.landing-page { /* Menggunakan class yang ditambahkan di index.html */
+.landing-page { /* Using the class added in index.html */
     display: flex;
     align-items: center; 
     justify-content: center; 
@@ -55,10 +55,10 @@ body:not(.landing-page) {
     font-size: 1.1em;
     font-weight: bold;
     border-radius: 8px;
-    /* Tambahkan hover atau style lain yang Anda suka */
+    /* Add hover or other styles if needed */
 }
 
-/* --- 1. Sidebar (Kiri) --- */
+/* --- 1. Sidebar (Left) --- */
 .sidebar {
     width: 260px;
     background-color: #ffffff;
@@ -78,7 +78,7 @@ body:not(.landing-page) {
 .new-chat-btn {
     flex-grow: 1;
     padding: 12px;
-    background-color: #4a4aef; /* Biru seperti di gambar */
+    background-color: #4a4aef; 
     color: white;
     border: none;
     border-radius: 8px;
@@ -86,7 +86,7 @@ body:not(.landing-page) {
     font-weight: 500;
     cursor: pointer;
     text-align: left;
-    text-decoration: none; /* Ditambahkan agar link tidak ada garis bawah */
+    text-decoration: none; /* Added so that the link is not underlined */
 }
 
 .new-chat-btn i {
@@ -102,8 +102,8 @@ body:not(.landing-page) {
 }
 
 .chat-history {
-    flex-grow: 1; /* Membuat history mengisi ruang tersisa */
-    overflow-y: auto; /* Scroll jika history penuh */
+    flex-grow: 1; /* Filling the remaining space with history */
+    overflow-y: auto; /* Scroll if history is full */
 }
 
 .history-header {
@@ -182,9 +182,9 @@ body:not(.landing-page) {
     background-color: #ddd;
 }
 
-/* --- 2. Chat Area (Kanan) --- */
+/* --- 2. Chat Area (Right) --- */
 .chat-area {
-    flex-grow: 1; /* Mengisi sisa ruang */
+    flex-grow: 1; /* Filling the remaining space */
     display: flex;
     flex-direction: column;
     background-color: #ffffff;
@@ -196,21 +196,21 @@ body:not(.landing-page) {
     border-bottom: 1px solid #e0e0e0;
     font-size: 1.1em;
     font-weight: 600;
-    flex-shrink: 0; /* Mencegah header mengecil */
+    flex-shrink: 0; /* Preventing headers from shrinking */
 }
 
 .chat-log {
-    flex-grow: 1; /* Mengisi ruang tengah */
-    overflow-y: auto; /* Ini adalah area chat yang bisa di-scroll */
+    flex-grow: 1; /* Filling the center space */
+    overflow-y: auto; /* This is a scrollable chat area. */
     padding: 24px;
     display: flex;
     flex-direction: column;
-    gap: 20px; /* Jarak antar pesan NANTINYA */
+    gap: 20px; /* Distance between messages */
 }
 
-/* --- STYLE UNTUK EMPTY STATE --- */
+/* --- STYLE FOR EMPTY STATE --- */
 .empty-chat-placeholder {
-    flex-grow: 1; /* Memastikan placeholder mengisi ruang chat-log */
+    flex-grow: 1; /* Ensuring placeholders fill the chat log space */
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -232,11 +232,11 @@ body:not(.landing-page) {
 /* ------------------------------- */
 
 
-/* Styling untuk setiap pesan (Disimpan untuk nanti saat Anda tambahkan chat) */
+/* Styling for each message (Saved for later when you add a chat) */
 .chat-message {
     display: flex;
     gap: 16px;
-    max-width: 90%; /* Agar tidak terlalu lebar */
+    max-width: 90%; /* So that it is not too wide */
 }
 
 .chat-message .avatar {
@@ -263,7 +263,7 @@ body:not(.landing-page) {
     padding-top: 8px;
 }
 
-.message-content strong { /* Untuk nama "CHAT A.I+" */
+.message-content strong { /* For title Enviro Education Tools Chatbot */
     display: block;
     margin-bottom: 4px;
     font-size: 1.05em;
@@ -275,7 +275,7 @@ body:not(.landing-page) {
 }
 
 .message-content ol {
-    padding-left: 20px; /* Indentasi untuk ordered list */
+    padding-left: 20px; /* Indentation for ordered lists */
     margin-top: 10px;
 }
 
@@ -283,24 +283,24 @@ body:not(.landing-page) {
     margin-bottom: 8px;
 }
 
-/* Area Input di Bawah */
+/* Input Area Below */
 .chat-input-area {
     padding: 24px;
     border-top: 1px solid #e0e0e0;
     background-color: #fff;
-    flex-shrink: 0; /* Mencegah input area mengecil */
+    flex-shrink: 0; /* Preventing the input area from shrinking */
 }
 
 .input-wrapper {
     display: flex;
     position: relative;
-    max-width: 900px; /* Batasi lebar input */
-    margin: 0 auto; /* tengahkan */
+    max-width: 900px; /* Limit input width */
+    margin: 0 auto;
 }
 
 .chat-input-area input {
     flex-grow: 1;
-    padding: 16px 50px 16px 20px; /* Beri ruang untuk tombol send */
+    padding: 16px 50px 16px 20px; /* Make space for the send button */
     border: 1px solid #ccc;
     border-radius: 8px;
     font-size: 1em;
@@ -322,7 +322,7 @@ body:not(.landing-page) {
     border: none;
     width: 40px;
     height: 40px;
-    border-radius: 50%; /* Buat jadi lingkaran */
+    border-radius: 50%; /* Make a circle */
     font-size: 1.1em;
     cursor: pointer;
     display: flex;
@@ -330,11 +330,11 @@ body:not(.landing-page) {
     justify-content: center;
 }
 
-/* Tab "Upgrade" di sisi kanan */
+/* The “Upgrade” tab on the right side */
 .upgrade-tab {
     position: fixed;
     top: 50%;
-    right: -60px; /* Atur posisi agar sedikit keluar */
+    right: -60px; /* Adjust the position so that it sticks out slightly. */
     transform: translateY(-50%) rotate(-90deg);
     background-color: #4a4aef;
     color: white;

templates/chat.html

@@ -47,7 +47,7 @@
     <section class="chat-area">
         
         <header class="chat-header">
-            CHAT A.I+
+            Enviro Education Tools Chatbot
         </header>
 
         <div class="chat-log" id="chat-log-area"> <div class="empty-chat-placeholder">
@@ -59,7 +59,7 @@
 
         <footer class="chat-input-area">
             <div class="input-wrapper">
-                <input type="text" id="chat-input" placeholder="What's in your mind...">
+                <input type="text" id="chat-input" placeholder="Type your question...">
                 <button class="send-btn" id="send-button">
                     <i class="fa-solid fa-paper-plane"></i>
                 </button>

templates/index.html

@@ -25,12 +25,12 @@
 </head>
 <body class="landing-page">
     <div class="landing-container">
-        <h1>Selamat Datang di Enviro Education Chatbot</h1>
+        <h1>Welcome to the Enviro Education Chatbot!</h1>
         <p>
-            Asisten AI ini dilatih berdasarkan data produk kami. 
-            Tanyakan apa saja tentang Air, Water, dan Soil Quality Testers.
+            This AI assistant is trained based on our product data. 
+            Ask anything about Air, Water, and Soil Quality Testers.
         </p>
-        <a href="/chat" class="start-chat-btn">Mulai Chat Sekarang</a>
+        <a href="/chat" class="start-chat-btn">Start Chat Now</a>
     </div>
 </body>
 </html>