Update static/script.js

static/script.js

@@ -1,19 +1,21 @@
-// === Global Model List ===
-const MODEL_LIST = [
-  { id: "deepseek/deepseek-chat-v3-0324:free", name: "DeepSeek Chat v3" },
-  { id: "google/gemini-2.0-flash-exp:free", name: "Gemini 2.0 Flash" },
-  { id: "meta-llama/llama-4-maverick:free", name: "LLaMA 4 Maverick" },
-  { id: "microsoft/mai-ds-r1:free", name: "MAI DS R1" },
-  { id: "meta-llama/llama-4-scout:free", name: "LLaMA 4 Scout" },
-  { id: "google/gemma-3-27b-it:free", name: "Gemma 3 27B" },
-  { id: "qwen/qwq-32b:free", name: "Qwen QWQ 32B" },
-  { id: "qwen/qwen2.5-vl-72b-instruct:free", name: "Qwen2.5 VL 72B" },
-  { id: "qwen/qwen-2.5-72b-instruct:free", name: "Qwen 2.5 72B" },
-  { id: "google/gemini-2.5-pro-exp-03-25:free", name: "Gemini 2.5 Pro" },
-  { id: "deepseek/deepseek-r1:free", name: "DeepSeek R1" }
-];
-
-// === Create Custom Dropdowns ===
+// === Dynamic Model Fetching ===
+let MODEL_LIST = [];
+
+async function fetchModelList() {
+  try {
+    const response = await fetch("/models");
+    if (response.ok) {
+      MODEL_LIST = await response.json();
+      initializeDropdowns();
+    } else {
+      console.error("Failed to fetch model list");
+    }
+  } catch (error) {
+    console.error("Error fetching models:", error);
+  }
+}
+
+// === Create Custom Dropdowns Dynamically ===
 function createDropdown(dropdownId) {
   const dropdown = document.getElementById(dropdownId);
   const selected = dropdown.querySelector(".selected");
@@ -42,9 +44,23 @@ function createDropdown(dropdownId) {
     options.classList.toggle("hidden");
   });
 
-  document.addEventListener("click", () => {
+  options.addEventListener("mouseleave", () => {
     options.classList.add("hidden");
   });
+
+  document.addEventListener("click", (e) => {
+    if (!dropdown.contains(e.target)) {
+      options.classList.add("hidden");
+    }
+  });
+}
+
+// === Initialize All Dropdowns After Fetch ===
+function initializeDropdowns() {
+  createDropdown("modelA");
+  createDropdown("modelB");
+  createDropdown("modelC");
+  createDropdown("aggregator");
 }
 
 // === Theme, Config and Docs Buttons ===
@@ -121,11 +137,6 @@ const chatForm = document.getElementById("chatForm");
 const userInput = document.getElementById("userInput");
 const chatContainer = document.getElementById("chatContainer");
 
-createDropdown("modelA");
-createDropdown("modelB");
-createDropdown("modelC");
-createDropdown("aggregator");
-
 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"}`;
@@ -152,9 +163,7 @@ chatForm.addEventListener("submit", async (e) => {
     "LLM-D": document.getElementById("aggregator").dataset.value
   };
 
-  for (const key of Object.keys(selections)) {
-    if (selections[key]) showLoader(key.slice(-1)); // showLoader("A", "B", ...)
-  }
+  ["A", "B", "C"].forEach(id => showLoader(id));
 
   const settings = {
     models: {
@@ -174,15 +183,12 @@ chatForm.addEventListener("submit", async (e) => {
   if (response.ok) {
     const data = await response.json();
     appendMessage("bot", data.response);
-
-    // Simulated per-model delay (optional)
-    for (const key of Object.keys(selections)) {
-      hideLoader(key.slice(-1));
-    }
+    ["A", "B", "C", "D"].forEach(id => hideLoader(id));
   } else {
-    for (const key of Object.keys(selections)) {
-      hideLoader(key.slice(-1));
-    }
+    ["A", "B", "C", "D"].forEach(id => hideLoader(id));
     appendMessage("bot", "An error occurred. Please check your model selections.");
   }
 });
+
+// === Kickstart ===
+fetchModelList();