Update static/script.js

static/script.js

@@ -1,3 +1,50 @@
+// === 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" }
+];
+
+// === Populate Custom Dropdowns ===
+function createDropdown(dropdownId) {
+  const dropdown = document.getElementById(dropdownId);
+  const selected = dropdown.querySelector(".selected");
+  const options = dropdown.querySelector(".options");
+
+  MODEL_LIST.forEach(model => {
+    const option = document.createElement("div");
+    option.className = "p-2 hover:bg-visual_green rounded cursor-pointer";
+    option.textContent = model.name;
+    option.dataset.value = model.id;
+    options.appendChild(option);
+
+    option.addEventListener("click", (e) => {
+      e.stopPropagation();
+      selected.textContent = model.name;
+      dropdown.dataset.value = model.id;
+      options.classList.add("hidden");
+    });
+  });
+
+  selected.addEventListener("click", (e) => {
+    e.stopPropagation();
+    options.classList.toggle("hidden");
+  });
+
+  // Close dropdowns if clicking outside
+  document.addEventListener("click", () => {
+    options.classList.add("hidden");
+  });
+}
+
 // === Theme Toggle ===
 const themeToggle = document.getElementById("themeToggle");
 const toggleConfig = document.getElementById("toggleConfig");
@@ -11,9 +58,7 @@ function setInitialTheme() {
   } else if (savedTheme === "light") {
     html.classList.remove("dark");
   } else {
-    const prefersDark = window.matchMedia(
-      "(prefers-color-scheme: dark)",
-    ).matches;
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     if (prefersDark) html.classList.add("dark");
     else html.classList.remove("dark");
   }
@@ -35,9 +80,9 @@ 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");
+createDropdown("modelA");
+createDropdown("modelB");
+createDropdown("modelC");
 
 function appendMessage(role, text) {
   const div = document.createElement("div");
@@ -59,16 +104,16 @@ chatForm.addEventListener("submit", async (e) => {
 
   const settings = {
     models: {
-      "LLM-A": modelA.value,
-      "LLM-B": modelB.value,
-      "LLM-C": modelC.value,
-    },
+      "LLM-A": document.getElementById("modelA").dataset.value,
+      "LLM-B": document.getElementById("modelB").dataset.value,
+      "LLM-C": document.getElementById("modelC").dataset.value,
+    }
   };
 
   const response = await fetch("/chat", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ prompt, settings }),
+    body: JSON.stringify({ prompt, settings })
   });
 
   chatContainer.lastChild.remove(); // remove 'Thinking...'
@@ -77,9 +122,6 @@ chatForm.addEventListener("submit", async (e) => {
     const data = await response.json();
     appendMessage("bot", data.response);
   } else {
-    appendMessage(
-      "bot",
-      "An error occurred. Please check your model selections.",
-    );
+    appendMessage("bot", "An error occurred. Please check your model selections.");
   }
 });