static/index.js

/* static/index.js — AnyCoder front‑end 2025‑07 */

/* 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"},
  /* premium providers (optional) */
  {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) Language list */
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 helpers */
const $ = s => document.querySelector(s);
const els = {
  model: $("#model"), lang: $("#lang"), prompt: $("#prompt"),
  file : $("#file"),  url: $("#url"), search: $("#search"),
  code : $("#code"),  prev: $("#preview"), hist: $("#hist"),
  gen  : $("#gen"),   clr: $("#clear")
};

/* 4) Populate selects */
MODELS.forEach(m => els.model.add(new Option(m.name, m.id)));
LANGS .forEach(l => els.lang .add(new Option(l.toUpperCase(), l)));

/* 5) Basic tab switcher */
document.querySelectorAll(".tabs[role=tablist]").forEach(tl => {
  tl.addEventListener("click", e => {
    if (e.target.role !== "tab") return;
    tl.querySelectorAll("[role=tab]").forEach(t =>
      t.setAttribute("aria-selected", t===e.target));
    tl.parentElement.querySelectorAll("[role=tabpanel]").forEach(p =>
      p.hidden = p.id !== e.target.getAttribute("aria-controls"));
  });
});

/* 6) Clear */
els.clr.onclick = () => {
  els.prompt.value=""; els.file.value=""; els.url.value="";
  els.code.textContent=""; els.prev.srcdoc=""; els.hist.innerHTML="";
};

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

/* 8) Generate → POST /run/predict */
els.gen.onclick = async () => {
  const prompt = els.prompt.value.trim();
  if (!prompt) { alert("Enter a prompt first."); return; }

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

  // optional file upload
  let file_path=null;
  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});
    file_path=(await up.json()).file;
  }

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

  try {
    const r = await fetch("/run/predict", {
      method:"POST",
      headers:{ "Content-Type":"application/j