Spaces:

Askoscar
/

askoscarai

Build error

App Files Files Community

Askoscar commited on Nov 12, 2025

Commit

ae9a812

verified ·

1 Parent(s): 70ce413

Upload 4 files

Browse files

Files changed (4) hide show

app.py +40 -0
c46cfe98-a47f-4596-a93b-ea93bb8806f3.jpg +0 -0
index.html +277 -0
requirements.txt +16 -0

app.py ADDED Viewed

	@@ -0,0 +1,40 @@

+from flask import Flask, request, jsonify, send_from_directory
+from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline
+import torch
+import os
+app = Flask(__name__)
+# --- Load the model ---
+model_name = "microsoft/phi-2"
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+print("Loading model... this may take a few minutes.")
+tokenizer = AutoTokenizer.from_pretrained(model_name)
+model = AutoModelForCausalLM.from_pretrained(model_name, device_map="auto")
+generator = pipeline("text-generation", model=model, tokenizer=tokenizer, device=0 if torch.cuda.is_available() else -1)
+print("Model loaded.")
+# --- Serve your custom HTML interface ---
+@app.route("/")
+def home():
+    return send_from_directory(os.path.dirname(__file__), "index.html")
+# --- API endpoint for AI ---
+@app.route("/ask", methods=["POST"])
+def ask():
+    data = request.get_json()
+    question = data.get("question", "")
+    if not question:
+        return jsonify({"answer": "Please ask a valid question."})
+    try:
+        response = generator(question, max_length=200, do_sample=True, temperature=0.7)
+        answer = response[0]["generated_text"]
+        return jsonify({"answer": answer})
+    except Exception as e:
+        print(e)
+        return jsonify({"answer": "⚠️ There was an error generating the answer."})
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, debug=True)

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

index.html ADDED Viewed

	@@ -0,0 +1,277 @@

+<!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 {
+      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 worldwide.</p>
+    <div id="chat-box"></div>
+    <div class="input-container">
+      <input id="userInput" placeholder="Ask about any medicinal plant..." />
+      <button id="askButton">Ask</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</h2>
+      <p>
+        Oscar Teye, visionary founder of <strong>AskOscar.ai</strong>, connecting humanity with nature's healing power using intelligence and wisdom.
+      </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!
+        You can contribute via Mobile Money: <strong>0530327720</strong> or share the website with friends 🌍
+      </p>
+    </div>
+  </div>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      // --- Corrected askOscarAI function ---
+      async function askOscarAI(question) {
+        try {
+          const response = await fetch("/ask", {  // ← call local server
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ question })
+          });
+          const data = await response.json();
+          return data.answer;
+        } catch (err) {
+          console.error(err);
+          return "⚠️ Unable to connect to the herbal network.";
+        }
+      }
+      const chatBox = document.getElementById("chat-box");
+      const input = document.getElementById("userInput");
+      const sendBtn = document.getElementById("askButton");
+      async function sendQuestion() {
+        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;
+      }
+      sendBtn.addEventListener("click", sendQuestion);
+      input.addEventListener("keypress", (e) => { if (e.key === "Enter") sendQuestion(); });
+      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>

requirements.txt ADDED Viewed

	@@ -0,0 +1,16 @@

+gradio==5.9.1
+transformers==4.57.1
+torch==2.9.0
+huggingface_hub==0.36.0
+accelerate==1.11.0
+requests==2.32.5
+numpy==2.3.4
+pandas==2.1.1
+ffmpy==0.3.0
+aiofiles==23.1.0
+jinja2==3.1.6
+pillow==10.1.1
+pyyaml==6.0.3
+typing-extensions==4.15.0
+orjson==3.9.2
+semantic-version==2.10.0