Update static/index.js

static/index.js

@@ -1,94 +1,117 @@
-/* static/index.js – FULL FILE */
+/* 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"}
+  { 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"
+  "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);
+/* ---------- 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 o=document.createElement('option');
-  o.value=o.textContent=l;langSel.appendChild(o);
+LANGS.forEach(l => {
+  const opt = document.createElement("option");
+  opt.value = l; opt.textContent = l.toUpperCase(); langSel.appendChild(opt);
 });
 
-/* ---------- 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='';
-};
+/* ---------- 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"));
+  });
+});
 
-/* ---------- helper ---------- */
-const addHist=p=>{
-  const li=document.createElement('li');
-  li.textContent=`${new Date().toLocaleTimeString()} – ${p.slice(0,40)}…`;
+/* ---------- 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.onclick=async()=>{
-  const prompt=promptIn.value.trim();
-  if(!prompt){alert('Please provide a prompt');return;}
-  genBtn.disabled=true;genBtn.textContent='Generating…';
+genBtn.addEventListener("click", async () => {
+  const prompt = promptIn.value.trim();
+  if (!prompt) { alert("Please provide a prompt."); return; }
 
-  const body={
-    prompt, model_id:modelSel.value, language:langSel.value,
-    web_search:wsCheck.checked, website_url:urlIn.value||null
+  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){
-    body.file_name=fileIn.files[0].name;
-    body.file_data=Array.from(new Uint8Array(await fileIn.files[0].arrayBuffer())); // binary to int[]
+
+  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(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';
-};
+  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";
+  }
+});