Spaces:

Askoscar
/

AskOscar.herbal.ai

Running

App Files Files Community

Askoscar commited on 14 days ago

Commit

b55a14c

verified ·

1 Parent(s): b240fc3

Upload 5 files

Browse files

Files changed (5) hide show

c46cfe98-a47f-4596-a93b-ea93bb8806f3.jpg +0 -0
index.html +310 -19
runtime.yaml +1 -0
script.js +59 -0
style.css +112 -28

c46cfe98-a47f-4596-a93b-ea93bb8806f3.jpg ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,310 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AskOscar Herbal AI 🌿</title>
+  <style>
+    body {
+      font-family: "Garamond", serif;
+      background-image: url("c46cfe98-a47f-4596-a93b-ea93bb8806f3.jpg");
+      background-size: cover;
+      background-position: center;
+      color: #fff;
+      text-align: center;
+      height: 100vh;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      backdrop-filter: brightness(0.4);
+    }
+    h1 {
+      font-size: 2.5em;
+      margin-bottom: 10px;
+      text-shadow: 2px 2px 5px #000;
+    }
+    p {
+      margin-top: 0;
+      font-size: 1.2em;
+      text-shadow: 1px 1px 3px #000;
+    }
+    .container {
+      background-color: rgba(0, 0, 0, 0.6);
+      border-radius: 20px;
+      padding: 30px;
+      max-width: 650px;
+      margin: 0 auto;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      height: 80vh;
+    }
+    #chat-box {
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      padding: 15px;
+      width: 100%;
+      height: 65%;
+      overflow-y: auto;
+      text-align: left;
+      margin-bottom: 15px;
+      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+    .message {
+      margin-bottom: 15px;
+      line-height: 1.4em;
+    }
+    .user {
+      text-align: right;
+      color: #aef7c7;
+    }
+    .bot {
+      text-align: left;
+      color: #fffbe6;
+    }
+    .input-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    input {
+      width: 70%;
+      padding: 12px;
+      border: none;
+      border-radius: 10px;
+      font-size: 1em;
+      margin-top: 10px;
+    }
+    button {
+      background-color: #00b894;
+      border: none;
+      border-radius: 10px;
+      padding: 12px 20px;
+      font-size: 1em;
+      color: white;
+      cursor: pointer;
+      margin-left: 10px;
+      transition: background 0.3s ease;
+    }
+    button:hover {
+      background-color: #019870;
+    }
+    .top-buttons {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      display: flex;
+      gap: 10px;
+      z-index: 1000;
+    }
+    .top-buttons button {
+      background-color: #019870;
+      border-radius: 8px;
+      padding: 8px 14px;
+      font-size: 0.9em;
+    }
+    footer {
+      position: absolute;
+      bottom: 10px;
+      width: 100%;
+      text-align: center;
+      font-size: 0.9em;
+      color: #ccc;
+    }
+    /* Modal Styling */
+    .modal {
+      display: none;
+      position: fixed;
+      z-index: 999;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+    .modal-content {
+      background-color: #222;
+      margin: 15% auto;
+      padding: 20px;
+      border-radius: 10px;
+      width: 80%;
+      max-width: 500px;
+      text-align: left;
+      color: #eee;
+      box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
+    }
+    .close {
+      color: #aaa;
+      float: right;
+      font-size: 22px;
+      cursor: pointer;
+    }
+    .close:hover {
+      color: white;
+    }
+  </style>
+</head>
+<body>
+  <div class="top-buttons">
+    <button id="aboutBtn">About</button>
+    <button id="donateBtn">Donate</button>
+  </div>
+  <div class="container">
+    <h1>🌿 AskOscar Herbal AI 🌿</h1>
+    <p>Ask me anything about medicinal plants, healing herbs, or natural remedies.</p>
+    <div id="chat-box"></div>
+    <div class="input-container">
+      <input id="userInput" placeholder="Ask about any medicinal plant..." />
+      <button id="askButton">Send</button>
+    </div>
+  </div>
+  <footer>Powered by Hugging Face • Herbal Wisdom by Oscar</footer>
+  <!-- About Modal -->
+  <div id="aboutModal" class="modal">
+    <div class="modal-content">
+      <span class="close" id="closeAbout">&times;</span>
+      <h2>About Oscar Teye</h2>
+      <p>
+        Oscar Teye is the visionary founder of <strong>AskOscar.ai</strong> — a digital herbal intelligence
+        created to reconnect humanity with the healing power of nature.
+        Born with a passion for natural medicine and innovation, Oscar blends African herbal wisdom with
+        artificial intelligence to make herbal knowledge accessible, practical, and inspiring for all.
+      </p>
+    </div>
+  </div>
+  <!-- Donate Modal -->
+  <div id="donateModal" class="modal">
+    <div class="modal-content">
+      <span class="close" id="closeDonate">&times;</span>
+      <h2>Support AskOscar.ai</h2>
+      <p>
+        🌿 Every seed of support helps this herbal AI grow stronger!
+        If you believe in natural healing and want to keep AskOscar.ai running,
+        you can support through donations.
+      </p>
+      <p><strong>Ways to Support:</strong></p>
+      <ul>
+        <li>Mobile Money: +233 XXX XXX XXX</li>
+        <li>PayPal: coming soon</li>
+        <li>Share the website with friends 🌍</li>
+      </ul>
+      <p>Thank you for helping sustain a greener, wiser future 🌱</p>
+    </div>
+  </div>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      const API_URL = "https://api-inference.huggingface.co/models/google/gemma-2b-it";
+      const HF_TOKEN = "hf_your_token_here"; // Replace with your actual Hugging Face token
+      async function askOscarAI(question) {
+        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 any cultural facts.
+User's question: ${question}
+`;
+        try {
+          const response = await fetch(API_URL, {
+            method: "POST",
+            headers: {
+              "Authorization": \`Bearer \${HF_TOKEN}\`,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({ inputs: prompt }),
+          });
+          const result = await response.json();
+          if (result.error) return "🌿 The herbal spirits are resting... please try again soon.";
+          return result[0]?.generated_text || "No response received.";
+        } catch (error) {
+          console.error(error);
+          return "⚠️ Unable to connect to the herbal network. Check your internet or token.";
+        }
+      }
+      const chatBox = document.getElementById("chat-box");
+      const input = document.getElementById("userInput");
+      const sendBtn = document.getElementById("askButton");
+      sendBtn.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);
+        const botMsg = document.createElement("div");
+        botMsg.classList.add("message", "bot");
+        botMsg.textContent = "🌿 Thinking...";
+        chatBox.appendChild(botMsg);
+        chatBox.scrollTop = chatBox.scrollHeight;
+        input.value = "";
+        const answer = await askOscarAI(question);
+        botMsg.textContent = "🪴 " + answer;
+        chatBox.scrollTop = chatBox.scrollHeight;
+      });
+      // Handle modals
+      const aboutModal = document.getElementById("aboutModal");
+      const donateModal = document.getElementById("donateModal");
+      const aboutBtn = document.getElementById("aboutBtn");
+      const donateBtn = document.getElementById("donateBtn");
+      const closeAbout = document.getElementById("closeAbout");
+      const closeDonate = document.getElementById("closeDonate");
+      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 = (event) => {
+        if (event.target === aboutModal) aboutModal.style.display = "none";
+        if (event.target === donateModal) donateModal.style.display = "none";
+      };
+    });
+  </script>
+</body>
+</html>

runtime.yaml ADDED Viewed

	@@ -0,0 +1 @@


1	+ sdk: static

script.js ADDED Viewed

	@@ -0,0 +1,59 @@

+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.";
+  }
+});

style.css CHANGED Viewed

@@ -1,28 +1,112 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+body {
+  font-family: Garamond, serif;
+  background-image: url("c46cfe98-a47f-4596-a93b-ea93bb8806f3.jpg");
+  background-size: cover;
+  background-position: center;
+  color: #fff;
+  margin: 0;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  backdrop-filter: brightness(0.4);
+}
+.container {
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  padding: 30px;
+  width: 90%;
+  max-width: 600px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+}
+h1 {
+  font-size: 2.2em;
+  margin: 0 0 10px;
+  text-shadow: 2px 2px 5px #000;
+}
+p { text-shadow: 1px 1px 3px #000; }
+.chat-window {
+  background-color: rgba(255,255,255,0.1);
+  border-radius: 10px;
+  height: 300px;
+  overflow-y: auto;
+  padding: 10px;
+  text-align: left;
+  margin-top: 15px;
+}
+.input-row {
+  display: flex;
+  margin-top: 10px;
+  justify-content: center;
+}
+input {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  border-radius: 8px;
+  font-size: 1em;
+}
+button {
+  background-color: #00b894;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  font-size: 1em;
+  color: white;
+  margin-left: 10px;
+  cursor: pointer;
+}
+button:hover { background-color: #019870; }
+.buttons {
+  margin-top: 15px;
+}
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 10;
+  left: 0; top: 0;
+  width: 100%; height: 100%;
+  background-color: rgba(0,0,0,0.7);
+}
+.modal-content {
+  background-color: #333;
+  margin: 10% auto;
+  padding: 20px;
+  border-radius: 10px;
+  width: 80%;
+  max-width: 400px;
+  color: #fff;
+}
+.close {
+  float: right;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+.message {
+  margin: 8px 0;
+  padding: 6px 10px;
+  border-radius: 10px;
+}
+.user {
+  background: rgba(255,255,255,0.2);
+  align-self: flex-end;
+}
+.bot {
+  background: rgba(0,0,0,0.4);
+}