Upload 10 files

llm/agents.py

@@ -1,9 +1,52 @@
 import asyncio
+import httpx
+import os
+
+OPENROUTER_BASE = "https://openrouter.ai/api/v1/chat/completions"
+HEADERS = {
+    "Authorization": f"Bearer {os.getenv('OPENROUTER_API_KEY')}",
+    "Content-Type": "application/json",
+}
+
+ALLOWED_MODELS = [
+    "deepseek/deepseek-chat-v3-0324:free",
+    "google/gemini-2.0-flash-exp:free",
+    "meta-llama/llama-4-maverick:free",
+    "microsoft/mai-ds-r1:free",
+    "meta-llama/llama-4-scout:free",
+    "google/gemma-3-27b-it:free",
+    "qwen/qwq-32b:free",
+    "qwen/qwen2.5-vl-72b-instruct:free",
+    "qwen/qwen-2.5-72b-instruct:free",
+    "google/gemini-2.5-pro-exp-03-25:free",
+    "deepseek/deepseek-r1:free",
+]
+
+async def call_openrouter(model: str, prompt: str) -> str:
+    body = {
+        "model": model,
+        "messages": [{"role": "user", "content": prompt}],
+        "temperature": 0.7,
+    }
+    async with httpx.AsyncClient(timeout=30) as client:
+        response = await client.post(OPENROUTER_BASE, headers=HEADERS, json=body)
+        response.raise_for_status()
+        return response.json()["choices"][0]["message"]["content"]
 
 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
+    selected_model = settings.get("models", {}).get(name)
+
+    if not selected_model:
+        return f"[{name}] No model selected."
+
+    if selected_model not in ALLOWED_MODELS:
+        return f"[{name}] Model '{selected_model}' is not supported."
+
+    try:
+        response = await call_openrouter(selected_model, prompt)
+        return f"[{name}] {response}"
+    except Exception as e:
+        return f"[{name}] Error: {str(e)}"
 
 async def query_all_llms(prompt: str, settings: dict) -> list:
     agents = ["LLM-A", "LLM-B", "LLM-C"]
@@ -11,6 +54,5 @@ async def query_all_llms(prompt: str, settings: dict) -> list:
     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))

static/script.js

@@ -1,8 +1,9 @@
 // === Theme Toggle ===
 const themeToggle = document.getElementById("themeToggle");
+const toggleConfig = document.getElementById("toggleConfig");
+const configPanel = document.getElementById("configPanel");
 const html = document.documentElement;
 
-// Load from localStorage or system preference
 function setInitialTheme() {
   const savedTheme = localStorage.getItem("theme");
   if (savedTheme === "dark") {
@@ -10,7 +11,6 @@ function setInitialTheme() {
   } else if (savedTheme === "light") {
     html.classList.remove("dark");
   } else {
-    // Auto-detect
     const prefersDark = window.matchMedia(
       "(prefers-color-scheme: dark)",
     ).matches;
@@ -21,17 +21,24 @@ function setInitialTheme() {
 
 setInitialTheme();
 
-// Toggle theme
 themeToggle.addEventListener("click", () => {
   const isDark = html.classList.toggle("dark");
   localStorage.setItem("theme", isDark ? "dark" : "light");
 });
 
+toggleConfig.addEventListener("click", () => {
+  configPanel.classList.toggle("hidden");
+});
+
 // === Chat Handling ===
 const chatForm = document.getElementById("chatForm");
 const userInput = document.getElementById("userInput");
 const chatContainer = document.getElementById("chatContainer");
 
+const modelA = document.getElementById("modelA");
+const modelB = document.getElementById("modelB");
+const modelC = document.getElementById("modelC");
+
 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"}`;
@@ -44,15 +51,24 @@ chatForm.addEventListener("submit", async (e) => {
   e.preventDefault();
   const prompt = userInput.value.trim();
   if (!prompt) return;
+
   appendMessage("user", prompt);
   userInput.value = "";
 
   appendMessage("bot", "Thinking...");
 
+  const settings = {
+    models: {
+      "LLM-A": modelA.value,
+      "LLM-B": modelB.value,
+      "LLM-C": modelC.value,
+    },
+  };
+
   const response = await fetch("/chat", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ prompt }),
+    body: JSON.stringify({ prompt, settings }),
   });
 
   chatContainer.lastChild.remove(); // remove 'Thinking...'
@@ -61,6 +77,9 @@ chatForm.addEventListener("submit", async (e) => {
     const data = await response.json();
     appendMessage("bot", data.response);
   } else {
-    appendMessage("bot", "An error occurred. Please try again.");
+    appendMessage(
+      "bot",
+      "An error occurred. Please check your model selections.",
+    );
   }
 });

templates/index.html

@@ -14,14 +14,145 @@
         <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>
+                <div class="space-x-2">
+                    <button
+                        id="toggleConfig"
+                        class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition"
+                    >
+                        Config
+                    </button>
+                    <button
+                        id="themeToggle"
+                        class="bg-blue px-3 py-1 rounded text-fg0 hover:bg-purple transition"
+                    >
+                        Theme
+                    </button>
+                </div>
             </header>
 
+            <div id="configPanel" class="bg1 rounded p-4 mb-4 hidden">
+                <h2 class="text-lg font-semibold mb-2">Model Selection</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div>
+                        <label for="modelA" class="block mb-1">LLM-A</label>
+                        <select
+                            id="modelA"
+                            class="w-full rounded p-2 bg-statusline1"
+                        >
+                            <option value="deepseek/deepseek-chat-v3-0324">
+                                DeepSeek Chat v3
+                            </option>
+                            <option value="google/gemini-2.0-flash-exp">
+                                Gemini 2.0 Flash
+                            </option>
+                            <option value="meta-llama/llama-4-maverick">
+                                LLaMA 4 Maverick
+                            </option>
+                            <option value="microsoft/mai-ds-r1">
+                                MAI DS R1
+                            </option>
+                            <option value="meta-llama/llama-4-scout">
+                                LLaMA 4 Scout
+                            </option>
+                            <option value="google/gemma-3-27b-it">
+                                Gemma 3 27B
+                            </option>
+                            <option value="qwen/qwq-32b">Qwen QWQ 32B</option>
+                            <option value="qwen/qwen2.5-vl-72b-instruct">
+                                Qwen2.5 VL 72B
+                            </option>
+                            <option value="qwen/qwen-2.5-72b-instruct">
+                                Qwen 2.5 72B
+                            </option>
+                            <option value="google/gemini-2.5-pro-exp-03-25">
+                                Gemini 2.5 Pro
+                            </option>
+                            <option value="deepseek/deepseek-r1">
+                                DeepSeek R1
+                            </option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="modelB" class="block mb-1">LLM-B</label>
+                        <select
+                            id="modelB"
+                            class="w-full rounded p-2 bg-statusline1"
+                        >
+                            <option value="deepseek/deepseek-chat-v3-0324">
+                                DeepSeek Chat v3
+                            </option>
+                            <option value="google/gemini-2.0-flash-exp">
+                                Gemini 2.0 Flash
+                            </option>
+                            <option value="meta-llama/llama-4-maverick">
+                                LLaMA 4 Maverick
+                            </option>
+                            <option value="microsoft/mai-ds-r1">
+                                MAI DS R1
+                            </option>
+                            <option value="meta-llama/llama-4-scout">
+                                LLaMA 4 Scout
+                            </option>
+                            <option value="google/gemma-3-27b-it">
+                                Gemma 3 27B
+                            </option>
+                            <option value="qwen/qwq-32b">Qwen QWQ 32B</option>
+                            <option value="qwen/qwen2.5-vl-72b-instruct">
+                                Qwen2.5 VL 72B
+                            </option>
+                            <option value="qwen/qwen-2.5-72b-instruct">
+                                Qwen 2.5 72B
+                            </option>
+                            <option value="google/gemini-2.5-pro-exp-03-25">
+                                Gemini 2.5 Pro
+                            </option>
+                            <option value="deepseek/deepseek-r1">
+                                DeepSeek R1
+                            </option>
+                        </select>
+                    </div>
+                    <div>
+                        <label for="modelC" class="block mb-1">LLM-C</label>
+                        <select
+                            id="modelC"
+                            class="w-full rounded p-2 bg-statusline1"
+                        >
+                            <option value="deepseek/deepseek-chat-v3-0324">
+                                DeepSeek Chat v3
+                            </option>
+                            <option value="google/gemini-2.0-flash-exp">
+                                Gemini 2.0 Flash
+                            </option>
+                            <option value="meta-llama/llama-4-maverick">
+                                LLaMA 4 Maverick
+                            </option>
+                            <option value="microsoft/mai-ds-r1">
+                                MAI DS R1
+                            </option>
+                            <option value="meta-llama/llama-4-scout">
+                                LLaMA 4 Scout
+                            </option>
+                            <option value="google/gemma-3-27b-it">
+                                Gemma 3 27B
+                            </option>
+                            <option value="qwen/qwq-32b">Qwen QWQ 32B</option>
+                            <option value="qwen/qwen2.5-vl-72b-instruct">
+                                Qwen2.5 VL 72B
+                            </option>
+                            <option value="qwen/qwen-2.5-72b-instruct">
+                                Qwen 2.5 72B
+                            </option>
+                            <option value="google/gemini-2.5-pro-exp-03-25">
+                                Gemini 2.5 Pro
+                            </option>
+                            <option value="deepseek/deepseek-r1">
+                                DeepSeek R1
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+
             <main
                 id="chatContainer"
                 class="flex-1 overflow-y-auto bg1 p-4 rounded shadow-md space-y-4"