Upload 10 files

Dockerfile

@@ -0,0 +1,18 @@
+# Use a slim Python base
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy source code
+COPY . .
+
+# Expose the default Hugging Face Spaces port
+EXPOSE 7860
+
+# Run the app
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,38 @@
+from flask import Flask, render_template, request, jsonify
+from llm.agents import query_all_llms
+from llm.aggregator import aggregate_responses
+import os
+import dotenv
+
+# Load secrets from .env
+dotenv.load_dotenv()
+
+app = Flask(__name__)
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+@app.route("/chat", methods=["POST"])
+def chat():
+    data = request.get_json()
+    user_input = data.get("prompt", "")
+    settings = data.get("settings", {})
+
+    if not user_input:
+        return jsonify({"error": "Empty prompt."}), 400
+
+    try:
+        # Step 1: Query all agents asynchronously
+        agent_outputs = query_all_llms(user_input, settings)
+
+        # Step 2: Aggregate responses
+        final_response = aggregate_responses(agent_outputs)
+
+        return jsonify({"response": final_response})
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, debug=False)  # Hugging Face uses port 7860

llm/agents.py

@@ -0,0 +1,16 @@
+import asyncio
+
+async def query_llm_agent(name: str, prompt: str, settings: dict) -> str:
+    # Placeholder for real LLM API calls (OpenAI, Claude, etc.)
+    await asyncio.sleep(0.5)  # Simulate network latency
+    return f"[{name}] thinks: '{prompt[::-1]}'"  # Reverse input for mock
+
+async def query_all_llms(prompt: str, settings: dict) -> list:
+    agents = ["LLM-A", "LLM-B", "LLM-C"]
+    tasks = [query_llm_agent(agent, prompt, settings) for agent in agents]
+    results = await asyncio.gather(*tasks)
+    return results
+
+# Wrapper for sync Flask usage
+def query_all_llms_sync(prompt: str, settings: dict) -> list:
+    return asyncio.run(query_all_llms(prompt, settings))

llm/aggregator.py

@@ -0,0 +1,7 @@
+def aggregate_responses(responses: list) -> str:
+    if not responses:
+        return "No responses received."
+
+    combined = "\n".join(responses)
+    # In real use, you’d prompt another LLM to summarize/combine them
+    return f"Final synthesized response based on multiple agents:\n{combined}"

requirements.txt

@@ -0,0 +1,3 @@
+flask==2.3.3
+httpx==0.27.0
+python-dotenv==1.0.1

routes/chat.py

@@ -0,0 +1,17 @@
+from flask import Flask, render_template
+from routes.chat import chat_bp
+import os
+import dotenv
+
+# Load secrets from .env
+dotenv.load_dotenv()
+
+app = Flask(__name__, static_url_path='/static')
+app.register_blueprint(chat_bp)
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, debug=False)  # Hugging Face uses port 7860

static/script.js

@@ -0,0 +1,66 @@
+// === Theme Toggle ===
+const themeToggle = document.getElementById("themeToggle");
+const html = document.documentElement;
+
+// Load from localStorage or system preference
+function setInitialTheme() {
+  const savedTheme = localStorage.getItem("theme");
+  if (savedTheme === "dark") {
+    html.classList.add("dark");
+  } else if (savedTheme === "light") {
+    html.classList.remove("dark");
+  } else {
+    // Auto-detect
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    if (prefersDark) html.classList.add("dark");
+    else html.classList.remove("dark");
+  }
+}
+
+setInitialTheme();
+
+// Toggle theme
+themeToggle.addEventListener("click", () => {
+  const isDark = html.classList.toggle("dark");
+  localStorage.setItem("theme", isDark ? "dark" : "light");
+});
+
+// === Chat Handling ===
+const chatForm = document.getElementById("chatForm");
+const userInput = document.getElementById("userInput");
+const chatContainer = document.getElementById("chatContainer");
+
+function appendMessage(role, text) {
+  const div = document.createElement("div");
+  div.className = `p-3 rounded shadow max-w-2xl ${role === "user" ? "bg-blue text-fg0 self-end" : "bg-green text-fg0 self-start"}`;
+  div.innerText = text;
+  chatContainer.appendChild(div);
+  chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+chatForm.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  const prompt = userInput.value.trim();
+  if (!prompt) return;
+  appendMessage("user", prompt);
+  userInput.value = "";
+
+  appendMessage("bot", "Thinking...");
+
+  const response = await fetch("/chat", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ prompt }),
+  });
+
+  chatContainer.lastChild.remove(); // remove 'Thinking...'
+
+  if (response.ok) {
+    const data = await response.json();
+    appendMessage("bot", data.response);
+  } else {
+    appendMessage("bot", "An error occurred. Please try again.");
+  }
+});

static/style.css

@@ -0,0 +1,51 @@
+/* Gruvbox Material Theme: Light & Dark */
+:root {
+    --bg0: #f2e5bc;
+    --bg1: #eddeb5;
+    --bg-statusline1: #ebdbb2;
+    --bg-statusline2: #ebdbb2;
+    --fg0: #654735;
+    --fg1: #4f3829;
+    --blue: #45707a;
+    --green: #6c782e;
+    --purple: #945e80;
+    --visual_green: #d7d9ae;
+}
+
+.dark {
+    --bg0: #32302f;
+    --bg1: #3c3836;
+    --bg-statusline1: #3c3836;
+    --bg-statusline2: #46413e;
+    --fg0: #d4be98;
+    --fg1: #ddc7a1;
+    --blue: #7daea3;
+    --green: #a9b665;
+    --purple: #d3869b;
+    --visual_green: #a9b665;
+}
+
+body {
+    background-color: var(--bg0);
+    color: var(--fg0);
+}
+
+input,
+button,
+#chatContainer {
+    background-color: var(--bg1);
+    color: var(--fg0);
+}
+
+input::placeholder {
+    color: var(--fg1);
+}
+
+button {
+    background-color: var(--green);
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: var(--visual_green);
+}

templates/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en" class="bg0 text-fg0 dark">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>MoA Chat</title>
+        <link
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
+            rel="stylesheet"
+        />
+        <link rel="stylesheet" href="/static/style.css" />
+    </head>
+    <body class="bg0 text-fg0 transition-colors duration-300">
+        <div class="min-h-screen flex flex-col justify-between p-4">
+            <header class="flex items-center justify-between mb-4">
+                <h1 class="text-2xl font-bold">MoA Chat</h1>
+                <button
+                    id="themeToggle"
+                    class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition"
+                >
+                    Toggle Theme
+                </button>
+            </header>
+
+            <main
+                id="chatContainer"
+                class="flex-1 overflow-y-auto bg1 p-4 rounded shadow-md space-y-4"
+            >
+                <!-- Messages injected here -->
+            </main>
+
+            <form id="chatForm" class="mt-4 flex">
+                <input
+                    id="userInput"
+                    type="text"
+                    placeholder="Ask something..."
+                    class="flex-1 px-4 py-2 rounded-l border-none bg-statusline1 text-fg0 placeholder-fg1 focus:outline-none"
+                />
+                <button
+                    type="submit"
+                    class="px-4 py-2 bg-green text-fg0 rounded-r hover:bg-visual_green transition"
+                >
+                    Send
+                </button>
+            </form>
+        </div>
+
+        <script src="/static/script.js"></script>
+    </body>
+</html>