static/index.js

/* static/index.js  – AnyCoder front‑end */

// ───────────────── 1. MODEL REGISTRY ──────────────────
const MODELS = [
  { 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",
  "r","sql","sql-msSQL","sql-mySQL","sql-mariaDB","sql-sqlite",
  "sql-cassandra","sql-plSQL","sql-hive","sql-pgSQL","sql-gql",
  "sql-gpSQL","sql-sparkSQL","sql-esper"
];

// ───────────────── 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")
};

// ───────────────── 4. INITIAL FILL ────────────────────
MODELS.forEach(m => {
  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)));

// ───────────────── 5. TABS HANDLER ────────────────────
document.querySelectorAll(".tabs[role=tablist]").forEach(tablist => {
  tablist.addEventListener("click", e => {
    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")));
  });
});

// ───────────────── 6. HELPERS ─────────────────────────
const addHist = text => {
  const li = document.createElement("li");
  li.textContent = `${new Date().toLocaleTimeString()} – ${text.slice(0,40)}…`;
  els.hist.prepend(li);
};

// ───────────────── 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 = "";
});

// ───────────────── 8. GENERATE CODE ──────────────────
els.gen.addEventListener("click", async () => {
  const prompt = els.prompt.value.trim();
  if (!prompt) { alert("Provide a prompt."); return; }

  els.gen.disabled = true; els.gen.textContent = "Generating…";

  const payload = {
    prompt,
    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 (els.file.files.length) {
    const fd = new FormData(); fd.append("file", els.file.files[0]);
    const up = await fetch("/upload", { method:"POST", body: fd });
    payload.file_path = (await up.json()).file;
  }

  try {
    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]
    els.code.textContent = code;
    els.prev.srcdoc = (els.lang.value === "html")
      ? code
      : `<pre style="white-space:pre-wrap">${code.replace(/</g,"&lt;")}</pre>`;
    addHist(prompt);
  } catch (e) {
    console.error(e); alert("Generation failed – see console.");
  } finally {
    els.gen.disabled = false; els.gen.textContent = "Generate code";
  }
});