project scaffolding

.gitattributes

@@ -32,4 +32,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.xz filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,2 @@
+docker-compose.yaml
+__pycache__/

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.12-slim
+
+# Create non-root user (recommended for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+# Install dependencies
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy app code
+COPY --chown=user . /app
+
+# Expose FastAPI app on port 7860 (required by HF Spaces)
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,13 +1,58 @@
 ---
 title: AgriBot
-emoji: 💻
+emoji: 🌱
 colorFrom: green
-colorTo: pink
-sdk: gradio
-sdk_version: 6.0.1
-app_file: app.py
+colorTo: green
+sdk: docker
+app_port: 7860
 pinned: false
 license: mit
 ---
+# 🌱 Agricash Chatbot Overlay
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This project provides a fully customizable chatbot overlay that sits on top of the Agricash web application.  
+It includes:
+
+### ✔ Custom HTML/CSS/JS Chat Widget  
+The chat widget is styled with an agriculture theme and appears as a floating assistant on the page.
+
+### ✔ FastAPI Backend  
+The backend is implemented using FastAPI and runs inside a Hugging Face Docker Space.  
+Endpoint structure:
+
+- `GET /` → Serves the chat UI (index.html)  
+- `POST /chat` → Handles chatbot messages (currently placeholder logic)
+
+### ✔ Iframe Integration  
+The chatbot overlay loads the Agricash website inside an iframe while keeping the chat widget on top.
+
+### ✔ Ready for LLM Integration  
+The backend is designed so the `/chat` endpoint can easily be updated to use any Hugging Face-supported LLM (e.g., Llama 3, Mixtral, Phi-3).
+
+---
+
+## 🚀 Local Development
+
+Build the Docker image:
+
+```bash
+docker build -t agricash-chatbot .
+````
+
+Run it locally:
+
+```bash
+docker run -p 7860:7860 agricash-chatbot
+```
+
+Open in browser:
+
+```
+http://localhost:7860/
+```
+
+---
+
+## 📞 Contact
+
+For improvements or future integration with real LLM models, feel free to reach out.

app.py

@@ -0,0 +1,58 @@
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from pathlib import Path
+
+app = FastAPI()
+
+# CORS – allow embedding and external calls if needed
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],      # you can restrict this later
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Serve static files (we use it mainly for index.html now)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+# ----------------- MODELS -----------------
+
+class ChatRequest(BaseModel):
+    message: str
+
+
+# ----------------- ROUTES -----------------
+
+@app.get("/", response_class=HTMLResponse)
+def serve_html():
+    """
+    Serve the chat overlay HTML as the root page.
+    """
+    index_path = Path("static/index.html")
+    return index_path.read_text(encoding="utf-8")
+
+
+@app.post("/chat")
+def chat_endpoint(req: ChatRequest):
+    """
+    Chat endpoint.
+    For now it returns a placeholder response.
+    Later you will plug in your LLM here.
+    """
+    user_message = req.message.strip()
+
+    # Placeholder logic – replace with real model call later
+    if not user_message:
+        reply = "Please type a message to start the conversation."
+    else:
+        reply = (
+            "This is a placeholder response. "
+            "The AI model will be integrated here later.\n\n"
+            f"You said: \"{user_message}\""
+        )
+
+    return {"response": reply}

requirements.txt

@@ -0,0 +1,2 @@
+fastapi
+uvicorn[standard]

static/index.html

@@ -0,0 +1,287 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8" />
+  <title>مساعد أجريكاش</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: "Tahoma", "Cairo", sans-serif;
+    }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: #f4f7f2;
+    }
+
+    /* موقع أجريكاش */
+    .background-app {
+      position: fixed;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+      z-index: 1;
+    }
+
+    /* زر فتح الشات */
+    .chat-toggle {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      width: 65px;
+      height: 65px;
+      border-radius: 50%;
+      border: none;
+      cursor: pointer;
+      background: linear-gradient(135deg, #3b7f3b, #6abf4b);
+      color: #fff;
+      font-size: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
+      z-index: 3;
+    }
+
+    /* صندوق الشات */
+    .chat-container {
+      position: fixed;
+      bottom: 120px;
+      right: 30px;
+      width: 420px;
+      max-height: 75vh;
+      background: #ffffff;
+      border-radius: 20px;
+      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      z-index: 3;
+      border: 1px solid #d8e6d2;
+      display: none; /* سيتم فتحه تلقائياً من الجافاسكربت */
+    }
+
+    /* هيدر الشات */
+    .chat-header {
+      background: linear-gradient(135deg, #2f6f2f, #4fa953);
+      color: #fff;
+      padding: 14px 16px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 18px;
+    }
+
+    .chat-header-icon {
+      font-size: 26px;
+    }
+
+    /* الرسائل */
+    .chat-messages {
+      padding: 14px;
+      background: #f4f9f2;
+      flex: 1;
+      overflow-y: auto;
+      font-size: 16px;
+    }
+
+    .message-row {
+      margin-bottom: 12px;
+      display: flex;
+    }
+
+    .message-row.user {
+      justify-content: flex-end;
+    }
+
+    .message-row.bot {
+      justify-content: flex-start;
+    }
+
+    .message-bubble {
+      max-width: 80%;
+      padding: 10px 14px;
+      border-radius: 14px;
+      white-space: pre-wrap;
+      line-height: 1.5;
+    }
+
+    .message-row.user .message-bubble {
+      background: #e6f5da;
+      border: 1px solid #cde6bc;
+      border-bottom-right-radius: 4px;
+    }
+
+    .message-row.bot .message-bubble {
+      background: #ffffff;
+      border: 1px solid #d9e1d3;
+      border-bottom-left-radius: 4px;
+    }
+
+    /* حقل الإدخال */
+    .chat-input-area {
+      border-top: 1px solid #dfe8d8;
+      background: #fdfefb;
+      padding: 10px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .chat-input {
+      flex: 1;
+      border-radius: 999px;
+      border: 1px solid #cddac4;
+      padding: 10px 16px;
+      font-size: 16px;
+      outline: none;
+    }
+
+    .chat-send-btn {
+      border-radius: 999px;
+      border: none;
+      background: #6abf4b;
+      color: #ffffff;
+      padding: 10px 14px;
+      font-size: 18px;
+      cursor: pointer;
+    }
+
+    @media (max-width: 480px) {
+      .chat-container {
+        right: 10px;
+        left: 10px;
+        width: auto;
+        max-height: 75vh;
+      }
+
+      .chat-toggle {
+        right: 16px;
+        bottom: 16px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+
+  <!-- موقع أجريكاش -->
+  <iframe
+    src="https://agricash.app/"
+    class="background-app"
+    title="Agricash App"
+  ></iframe>
+
+  <!-- زر الشات -->
+  <button class="chat-toggle" id="chatToggle">💬</button>
+
+  <!-- صندوق الشات -->
+  <div class="chat-container" id="chatContainer">
+    <div class="chat-header">
+      <div class="chat-header-icon">🌱</div>
+      <div>مساعد أجريكاش الذكي</div>
+    </div>
+
+    <div class="chat-messages" id="chatMessages"></div>
+
+    <div class="chat-input-area">
+      <input
+        id="chatInput"
+        type="text"
+        class="chat-input"
+        placeholder="اكتب رسالتك هنا..."
+      />
+      <button class="chat-send-btn" id="chatSendBtn">➤</button>
+    </div>
+  </div>
+
+  <script>
+    const chatToggle = document.getElementById("chatToggle");
+    const chatContainer = document.getElementById("chatContainer");
+    const chatMessages = document.getElementById("chatMessages");
+    const chatInput = document.getElementById("chatInput");
+    const chatSendBtn = document.getElementById("chatSendBtn");
+
+    let isOpen = false;
+    let isSending = false;
+
+    function toggleChat(forceOpen = false) {
+      isOpen = forceOpen ? true : !isOpen;
+      chatContainer.style.display = isOpen ? "flex" : "none";
+    }
+
+    chatToggle.addEventListener("click", () => toggleChat());
+
+    function appendMessage(role, text) {
+      const row = document.createElement("div");
+      row.className = "message-row " + role;
+
+      const bubble = document.createElement("div");
+      bubble.className = "message-bubble";
+      bubble.textContent = text;
+
+      row.appendChild(bubble);
+      chatMessages.appendChild(row);
+      chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    async function sendMessage() {
+      const text = chatInput.value.trim();
+      if (!text || isSending) return;
+
+      appendMessage("user", text);
+      chatInput.value = "";
+      chatInput.focus();
+
+      isSending = true;
+      chatSendBtn.disabled = true;
+
+      // thinking placeholder
+      const thinkingRow = document.createElement("div");
+      thinkingRow.className = "message-row bot";
+      const thinkingBubble = document.createElement("div");
+      thinkingBubble.className = "message-bubble";
+      thinkingBubble.textContent = "🤖 جاري التفكير...";
+      thinkingRow.appendChild(thinkingBubble);
+      chatMessages.appendChild(thinkingRow);
+
+      try {
+        const res = await fetch("/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: text }),
+        });
+
+        const data = await res.json();
+        thinkingBubble.textContent = data.response || "لا توجد إجابة.";
+      } catch (err) {
+        thinkingBubble.textContent = "خطأ في الاتصال بالخادم.";
+      }
+
+      isSending = false;
+      chatSendBtn.disabled = false;
+    }
+
+    chatSendBtn.addEventListener("click", sendMessage);
+
+    chatInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+
+    // ⚡ OPEN CHAT AUTOMATICALLY ON PAGE LOAD
+    window.onload = () => {
+      toggleChat(true);
+    };
+  </script>
+</body>
+</html>