static/index.js

/* static/index.js – FULL FILE */
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 promptIn  = $('#prompt');
const fileIn    = $('#reference-file');
const urlIn     = $('#website-url');
const langSel   = $('#language');
const wsCheck   = $('#web-search');
const codeOut   = $('#code-output');
const preview   = $('#preview');
const histList  = $('#history-list');
const genBtn    = $('#generate');
const clrBtn    = $('#clear');

/* ---------- populate ---------- */
MODELS.forEach(m=>{
  const o=document.createElement('option');
  o.value=m.id;o.textContent=m.name;o.dataset.provider=m.provider||'';modelSel.appendChild(o);
});
LANGS.forEach(l=>{
  const o=document.createElement('option');
  o.value=o.textContent=l;langSel.appendChild(o);
});

/* ---------- tabs ---------- */
document.querySelectorAll('.tabs[role="tablist"] button')
  .forEach(btn=>btn.addEventListener('click',()=>{
    const list=btn.parentElement;
    list.querySelectorAll('[role="tab"]').forEach(t=>{
      const sel=t===btn;t.setAttribute('aria-selected',sel);
      list.parentElement.querySelector(`#${t.getAttribute('aria-controls')}`).hidden=!sel;
    });
  }));

/* ---------- clear ---------- */
clrBtn.onclick=()=>{
  promptIn.value='';fileIn.value='';urlIn.value='';
  codeOut.textContent='';preview.srcdoc='';histList.innerHTML='';
};

/* ---------- helper ---------- */
const addHist=p=>{
  const li=document.createElement('li');
  li.textContent=`${new Date().toLocaleTimeString()} – ${p.slice(0,40)}…`;
  histList.prepend(li);
};

/* ---------- generate ---------- */
genBtn.onclick=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,
    web_search:wsCheck.checked, website_url:urlIn.value||null
  };
  if(fileIn.files.length){
    body.file_name=fileIn.files[0].name;
    body.file_data=Array.from(new Uint8Array(await fileIn.files[0].arrayBuffer())); // binary to int[]
  }

  try{
    const res=await fetch('/run/predict',{
      method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
    if(!res.ok) throw new Error(await res.text());
    const {code}=await res.json();
    codeOut.textContent=code;
    preview.srcdoc=(langSel.value==='html')?code:`<pre>${code.replace(/</g,'&lt;')}</pre>`;
    addHist(prompt);
  }catch(e){console.error(e);alert('Error – see console');}
  genBtn.disabled=false;genBtn.textContent='Generate Code';
};