Update static/index.js

static/index.js

@@ -1,20 +1,25 @@
-/* static/index.js  — AnyCoder AI front‑end */
+/* static/index.js  – AnyCoder front‑end */
 
+// ───────────────── 1. MODEL REGISTRY ──────────────────
 const MODELS = [
-  { name: "Qwen/Qwen3‑32B",            id: "Qwen/Qwen3-32B" },
-  { name: "Moonshot Kimi‑K2",         id: "moonshotai/Kimi-K2-Instruct", provider: "groq" },
-  { name: "DeepSeek V3",              id: "deepseek-ai/DeepSeek-V3-0324" },
-  { name: "DeepSeek R1",              id: "deepseek-ai/DeepSeek-R1-0528" },
-  { name: "ERNIE‑4.5‑VL",            id: "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT" },
-  { name: "MiniMax M1",               id: "MiniMaxAI/MiniMax-M1-80k" },
-  { name: "Qwen3‑235B‑A22B",          id: "Qwen/Qwen3-235B-A22B" },
-  { name: "SmolLM3‑3B",               id: "HuggingFaceTB/SmolLM3-3B" },
-  { name: "GLM‑4.1V‑9B‑Thinking",     id: "THUDM/GLM-4.1V-9B-Thinking" },
-  { name: "OpenAI GPT‑4",             id: "openai/gpt-4",                provider: "openai" },
-  { name: "Gemini Pro",               id: "gemini/pro",                  provider: "gemini" },
-  { name: "Fireworks V1",             id: "fireworks-ai/fireworks-v1",   provider: "fireworks" }
+  { name: "Moonshot Kimi‑K2",                   id: "moonshotai/Kimi-K2-Instruct", provider: "groq" },
+  { name: "DeepSeek V3",                        id: "deepseek-ai/DeepSeek-V3-0324" },
+  { name: "DeepSeek R1",                        id: "deepseek-ai/DeepSeek-R1-0528" },
+  { name: "ERNIE‑4.5‑VL",                      id: "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT" },
+  { name: "MiniMax M1",                         id: "MiniMaxAI/MiniMax-M1-80k" },
+  { name: "Qwen3‑235B‑A22B",                    id: "Qwen/Qwen3-235B-A22B" },
+  { name: "Qwen3‑235B‑A22B‑Instruct‑2507",      id: "Qwen/Qwen3-235B-A22B-Instruct-2507" },
+  { name: "Qwen3‑235B‑A22B‑Thinking",           id: "Qwen/Qwen3-235B-A22B-Thinking" },
+  { name: "Qwen3‑Coder‑480B‑A35B",              id: "Qwen/Qwen3-Coder-480B-A35B-Instruct" },
+  { name: "Qwen3‑32B",                          id: "Qwen/Qwen3-32B" },
+  { name: "SmolLM3‑3B",                         id: "HuggingFaceTB/SmolLM3-3B" },
+  { name: "GLM‑4.1V‑9B‑Thinking",               id: "THUDM/GLM-4.1V-9B-Thinking" },
+  { name: "OpenAI GPT‑4",                       id: "openai/gpt-4",               provider: "openai" },
+  { name: "Gemini Pro",                         id: "gemini/pro",                 provider: "gemini" },
+  { name: "Fireworks V1",                       id: "fireworks-ai/fireworks-v1",  provider: "fireworks" }
 ];
 
+// ───────────────── 2. LANGUAGES ───────────────────────
 const LANGS = [
   "python","c","cpp","markdown","latex","json","html","css",
   "javascript","jinja2","typescript","yaml","dockerfile","shell",
@@ -23,95 +28,91 @@ const LANGS = [
   "sql-gpSQL","sql-sparkSQL","sql-esper"
 ];
 
-/* ---------- DOM ---------- */
-const $              = q => document.querySelector(q);
-const modelSel       = $("#model");
-const langSel        = $("#language");
-const promptIn       = $("#prompt");
-const fileIn         = $("#reference‑file");
-const websiteIn      = $("#website‑url");
-const searchChk      = $("#web‑search");
-const codeOut        = $("#code‑out");
-const previewFrame   = $("#preview");
-const histList       = $("#history‑list");
-const genBtn         = $("#generate");
-const clearBtn       = $("#clear");
+// ───────────────── 3. DOM HOOKS ───────────────────────
+const $ = sel => document.querySelector(sel);
+const els = {
+  model   : $("#model"),
+  lang    : $("#lang"),
+  prompt  : $("#prompt"),
+  file    : $("#file"),
+  url     : $("#url"),
+  search  : $("#search"),
+  code    : $("#code"),
+  prev    : $("#preview"),
+  hist    : $("#hist"),
+  gen     : $("#gen"),
+  clear   : $("#clear")
+};
 
-/* ---------- populate dropdowns ---------- */
+// ───────────────── 4. INITIAL FILL ────────────────────
 MODELS.forEach(m => {
-  const opt = document.createElement("option");
-  opt.value = m.id; opt.textContent = m.name; modelSel.appendChild(opt);
-});
-LANGS.forEach(l => {
-  const opt = document.createElement("option");
-  opt.value = l; opt.textContent = l.toUpperCase(); langSel.appendChild(opt);
+  const opt = new Option(m.name, m.id); opt.dataset.provider = m.provider || "";
+  els.model.append(opt);
 });
+LANGS.forEach(l => els.lang.append(new Option(l.toUpperCase(), l)));
 
-/* ---------- tab logic ---------- */
+// ───────────────── 5. TABS HANDLER ────────────────────
 document.querySelectorAll(".tabs[role=tablist]").forEach(tablist => {
   tablist.addEventListener("click", e => {
-    if (e.target.getAttribute("role") !== "tab") return;
+    if (e.target.role !== "tab") return;
     const tabs   = tablist.querySelectorAll("[role=tab]");
     const panels = tablist.parentElement.querySelectorAll("[role=tabpanel]");
     tabs.forEach(t => t.setAttribute("aria-selected", t === e.target));
-    panels.forEach(p => p.hidden = p.id !== e.target.getAttribute("aria-controls"));
+    panels.forEach(p => p.hidden = (p.id !== e.target.getAttribute("aria-controls")));
   });
 });
 
-/* ---------- utilities ---------- */
-const addHistory = text => {
+// ───────────────── 6. HELPERS ─────────────────────────
+const addHist = text => {
   const li = document.createElement("li");
   li.textContent = `${new Date().toLocaleTimeString()} – ${text.slice(0,40)}…`;
-  histList.prepend(li);
+  els.hist.prepend(li);
 };
 
-/* ---------- clear ---------- */
-clearBtn.addEventListener("click", () => {
-  promptIn.value = ""; fileIn.value = ""; websiteIn.value = "";
-  codeOut.textContent = ""; previewFrame.srcdoc = ""; histList.innerHTML = "";
+// ───────────────── 7. CLEAR BUTTON ───────────────────
+els.clear.addEventListener("click", () => {
+  els.prompt.value = ""; els.file.value = ""; els.url.value = "";
+  els.code.textContent = ""; els.prev.srcdoc = ""; els.hist.innerHTML = "";
 });
 
-/* ---------- generate ---------- */
-genBtn.addEventListener("click", async () => {
-  const prompt = promptIn.value.trim();
-  if (!prompt) { alert("Please provide a prompt."); return; }
+// ───────────────── 8. GENERATE CODE ──────────────────
+els.gen.addEventListener("click", async () => {
+  const prompt = els.prompt.value.trim();
+  if (!prompt) { alert("Provide a prompt."); return; }
 
-  genBtn.disabled = true; genBtn.textContent = "Generating…";
+  els.gen.disabled = true; els.gen.textContent = "Generating…";
 
-  const body = {
+  const payload = {
     prompt,
-    model_id    : modelSel.value,
-    language    : langSel.value,
-    enable_search : searchChk.checked,
-    website_url : websiteIn.value || null,
-    file_path   : null   // will be set below if file selected
+    model_id      : els.model.value,
+    language      : els.lang.value,
+    enable_search : els.search.checked,
+    website_url   : els.url.value || null,
+    file_path     : null   // will be set after upload
   };
 
-  if (fileIn.files.length) {
-    // upload file via FormData so Gradio saves it and passes path
-    const fd = new FormData();
-    fd.append("file", fileIn.files[0]);
+  if (els.file.files.length) {
+    const fd = new FormData(); fd.append("file", els.file.files[0]);
     const up = await fetch("/upload", { method:"POST", body: fd });
-    body.file_path = (await up.json()).file;
+    payload.file_path = (await up.json()).file;
   }
 
   try {
-    const res  = await fetch("/run/predict", {
-      method : "POST",
-      headers: { "Content-Type": "application/json" },
-      body   : JSON.stringify(body)
+    const res = await fetch("/run/predict", {
+      method  : "POST",
+      headers : { "Content-Type":"application/json" },
+      body    : JSON.stringify(payload)
     });
     if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const [code] = await res.json();              // ← Gradio returns [code, history]
-    codeOut.textContent = code;
-    previewFrame.srcdoc = langSel.value === "html"
+    const [code] = await res.json();          // Gradio returns [code, history]
+    els.code.textContent = code;
+    els.prev.srcdoc = (els.lang.value === "html")
       ? code
       : `<pre style="white-space:pre-wrap">${code.replace(/</g,"&lt;")}</pre>`;
-    addHistory(prompt);
-  } catch (err) {
-    console.error(err);
-    alert("Generation failed – check console.");
+    addHist(prompt);
+  } catch (e) {
+    console.error(e); alert("Generation failed – see console.");
   } finally {
-    genBtn.disabled = false; genBtn.textContent = "Generate code";
+    els.gen.disabled = false; els.gen.textContent = "Generate code";
   }
 });