Update script.js

script.js

@@ -1,59 +1,83 @@
-document.addEventListener("DOMContentLoaded", () => {
-  const aboutBtn = document.getElementById("aboutBtn");
-  const donateBtn = document.getElementById("donateBtn");
-  const aboutModal = document.getElementById("aboutModal");
-  const donateModal = document.getElementById("donateModal");
-  const closeAbout = document.getElementById("closeAbout");
-  const closeDonate = document.getElementById("closeDonate");
-  const sendBtn = document.getElementById("askButton");
-  const chatBox = document.getElementById("chat-box");
-  const input = document.getElementById("userInput");
-
-  // open / close modals
-  aboutBtn.onclick = () => aboutModal.style.display = "block";
-  donateBtn.onclick = () => donateModal.style.display = "block";
-  closeAbout.onclick = () => aboutModal.style.display = "none";
-  closeDonate.onclick = () => donateModal.style.display = "none";
-  window.onclick = e => {
-    if (e.target === aboutModal) aboutModal.style.display = "none";
-    if (e.target === donateModal) donateModal.style.display = "none";
-  };
-
-  // send message
-  sendBtn.onclick = sendMessage;
-  input.addEventListener("keydown", e => { if (e.key === "Enter") sendMessage(); });
-
-  function appendMessage(who, text) {
-    const div = document.createElement("div");
-    div.classList.add("message", who);
-    div.textContent = (who === "user" ? "🧍 " : "🪴 ") + text;
-    chatBox.appendChild(div);
-    chatBox.scrollTop = chatBox.scrollHeight;
-  }
-
-  function sendMessage() {
-    const q = input.value.trim();
-    if (!q) return;
-    appendMessage("user", q);
-    input.value = "";
-    appendMessage("bot", "🌿 Thinking...");
-    setTimeout(() => {
-      const a = simulateHerbalAnswer(q);
-      replaceLastBotMessage(a);
-    }, 1000);
-  }
-
-  function replaceLastBotMessage(text) {
-    const bots = chatBox.querySelectorAll(".bot");
-    if (bots.length === 0) return appendMessage("bot", text);
-    bots[bots.length - 1].textContent = "🪴 " + text;
-  }
-
-  function simulateHerbalAnswer(q) {
-    const s = q.toLowerCase();
-    if (s.includes("moringa")) return "Moringa oleifera — known locally as Nkruma. Rich in nutrients and supports **anti-inflammatory** and **antioxidant** activity.";
-    if (s.includes("neem")) return "Azadirachta indica (Neem). Locally Nkwanta. Famous for **antimicrobial** and **skin-cleansing** effects.";
-    if (s.includes("hello") || s.includes("hi")) return "Hello 🌿! Ask about any medicinal plant or natural remedy.";
-    return "I’m trained for herbal knowledge. Try asking about a plant, its healing uses, or safe dosage.";
-  }
-});
+const API_URL = "https://api-inference.huggingface.co/models/google/gemma-2b-it";
+
+async function askOscarAI(question) {
+  // Only allow herbal-related questions
+  const herbalWords = ["plant", "herb", "leaves", "roots", "bark", "healing", "natural", "disease", "dosage", "scientific name"];
+  const isHerbal = herbalWords.some(word => question.toLowerCase().includes(word));
+
+  if (!isHerbal) {
+    return "🍃 Sorry, I only answer questions about medicinal plants, natural healing, and herbal remedies.";
+  }
+
+  const prompt = `
+You are AskOscar Herbal AI — an expert in natural and traditional medicine.
+Respond like a warm, intelligent herbalist from Ghana, giving scientific names, local names, healing uses, dosage, and cultural facts.
+User's question: ${question}
+`;
+
+  const response = await fetch(API_URL, {
+    method: "POST",
+    headers: {
+      "Authorization": `Bearer ${process.env.HF_TOKEN}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ inputs: prompt }),
+  });
+
+  const result = await response.json();
+  if (result.error) {
+    console.error(result.error);
+    return "🌿 The herbal spirits are resting right now... please try again soon.";
+  }
+
+  return result[0]?.generated_text || "No response received.";
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const input = document.getElementById("userInput");
+  const button = document.getElementById("askButton");
+  const chatBox = document.getElementById("chat-box");
+
+  // About and Donate modals
+  const aboutModal = document.getElementById("aboutModal");
+  const aboutBtn = document.getElementById("aboutBtn");
+  const closeAbout = document.getElementById("closeAbout");
+
+  const donateModal = document.getElementById("donateModal");
+  const donateBtn = document.getElementById("donateBtn");
+  const closeDonate = document.getElementById("closeDonate");
+
+  aboutBtn.onclick = () => (aboutModal.style.display = "block");
+  closeAbout.onclick = () => (aboutModal.style.display = "none");
+  donateBtn.onclick = () => (donateModal.style.display = "block");
+  closeDonate.onclick = () => (donateModal.style.display = "none");
+
+  window.onclick = e => {
+    if (e.target === aboutModal) aboutModal.style.display = "none";
+    if (e.target === donateModal) donateModal.style.display = "none";
+  };
+
+  // Chat logic
+  button.addEventListener("click", async () => {
+    const question = input.value.trim();
+    if (!question) return;
+
+    const userMsg = document.createElement("div");
+    userMsg.classList.add("message", "user");
+    userMsg.textContent = "🧍‍♂️ " + question;
+    chatBox.appendChild(userMsg);
+
+    chatBox.scrollTop = chatBox.scrollHeight;
+    input.value = "";
+
+    const botMsg = document.createElement("div");
+    botMsg.classList.add("message", "bot");
+    botMsg.textContent = "🌿 Thinking...";
+    chatBox.appendChild(botMsg);
+    chatBox.scrollTop = chatBox.scrollHeight;
+
+    const answer = await askOscarAI(question);
+    botMsg.textContent = "🪴 " + answer;
+    chatBox.scrollTop = chatBox.scrollHeight;
+  });
+});