static/index.js

/* static/index.js  — AnyCoder AI front‑end */

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" }
];

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"
];

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

/* ---------- populate dropdowns ---------- */
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);
});

/* ---------- tab logic ---------- */
document.querySelectorAll(".tabs[role=tablist]").forEach(tablist => {
  tablist.addEventListener("click", e => {
    if (e.target.getAttribute("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"));
  });
});

/* ---------- utilities ---------- */
const addHistory = text => {
  const li = document.createElement("li");
  li.textContent = `${new Date().toLocaleTimeString()} – ${text.slice(0,40)}…`;
  histList.prepend(li);
};

/* ---------- clear ---------- */
clearBtn.addEventListener("click", () => {
  promptIn.value = ""; fileIn.value = ""; websiteIn.value = "";
  codeOut.textContent = ""; previewFrame.srcdoc = ""; histList.innerHTML = "";
});

/* ---------- generate ---------- */
genBtn.addEventListener("click", async () => {
  const prompt = promptIn.value.trim();
  if (!prompt) { alert("Please provide a prompt."); return; }

  genBtn.disabled = true; genBtn.textContent = "Generating…";

  const body = {
    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
  };

  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]);
    const up = await fetch("/upload", { method:"POST", body: fd });
    body.file_path = (await up.json()).file;
  }

  try {
    const res  = await fetch("/run/predict", {
      method : "POST",
      headers: { "Content-Type": "application/json" },
      body   : JSON.stringify(body)
    });
    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"
      ? code
      : `<pre style="white-space:pre-wrap">${code.replace(/</g,"&lt;")}</pre>`;
    addHistory(prompt);
  } catch (err) {
    console.error(err);
    alert("Generation failed – check console.");
  } finally {
    genBtn.disabled = false; genBtn.textContent = "Generate code";
  }
});