Update static/index.js

static/index.js

@@ -1,133 +1,94 @@
-/* static/index.js  –  FULL FILE
-   ----------------------------------------------------------
-   AnyCoder AI front‑end logic
-   ---------------------------------------------------------- */
-
-/* ~~~~~~~~~~~~~ 1.  MODEL & LANGUAGE LISTS  ~~~~~~~~~~~~~ */
-export const AVAILABLE_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" },
-  // keep this array in sync with models.py if you add more!
+/* 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 LANGUAGES = [
-  "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"
+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');
 
-/* ~~~~~~~~~~~~~ 2.  DOM REFERENCES  ~~~~~~~~~~~~~ */
-const $ = (q) => document.querySelector(q);
-const modelSelect  = $('#model');
-const promptInput  = $('#prompt');
-const fileInput    = $('#reference-file');
-const websiteInput = $('#website-url');
-const langSelect   = $('#language');
-const webSearchChk = $('#web-search');
-const codeOut      = $('#code-output');
-const previewFrame = $('#preview');
-const historyList  = $('#history-list');
-const genBtn       = $('#generate');
-const clearBtn     = $('#clear');
-
-/* ~~~~~~~~~~~~~ 3.  POPULATE SELECTS  ~~~~~~~~~~~~~ */
-AVAILABLE_MODELS.forEach(m => {
-  const opt = document.createElement('option');
-  opt.value = m.id;
-  opt.textContent = m.name;
-  opt.dataset.provider = m.provider || '';
-  modelSelect.appendChild(opt);
+/* ---------- 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);
 });
-
-LANGUAGES.forEach(lang => {
-  const opt = document.createElement('option');
-  opt.value = lang;
-  opt.textContent = lang;
-  langSelect.appendChild(opt);
+LANGS.forEach(l=>{
+  const o=document.createElement('option');
+  o.value=o.textContent=l;langSel.appendChild(o);
 });
 
-/* ~~~~~~~~~~~~~ 4.  TAB HANDLING  ~~~~~~~~~~~~~ */
+/* ---------- tabs ---------- */
 document.querySelectorAll('.tabs[role="tablist"] button')
-  .forEach(btn => btn.addEventListener('click', () => {
-    const tabs   = btn.parentElement.querySelectorAll('[role="tab"]');
-    const panels = btn.parentElement.parentElement.querySelectorAll('[role="tabpanel"]');
-    tabs.forEach(t => { t.setAttribute('aria-selected', t === btn); });
-    panels.forEach(p => { p.hidden = p.id !== btn.getAttribute('aria-controls'); });
+  .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;
+    });
   }));
 
-/* ~~~~~~~~~~~~~ 5.  CLEAR SESSION  ~~~~~~~~~~~~~ */
-clearBtn.addEventListener('click', () => {
-  promptInput.value = '';
-  fileInput.value = '';
-  websiteInput.value = '';
-  codeOut.textContent = '';
-  previewFrame.srcdoc = '';
-  historyList.innerHTML = '';
-});
-
-/* ~~~~~~~~~~~~~ 6.  HISTORY HELPER  ~~~~~~~~~~~~~ */
-function logHistory(text) {
-  const li = document.createElement('li');
-  li.textContent = `${new Date().toLocaleTimeString()} – ${text.slice(0,40)}…`;
-  historyList.prepend(li);
-}
+/* ---------- clear ---------- */
+clrBtn.onclick=()=>{
+  promptIn.value='';fileIn.value='';urlIn.value='';
+  codeOut.textContent='';preview.srcdoc='';histList.innerHTML='';
+};
 
-/* ~~~~~~~~~~~~~ 7.  GENERATE → BACKEND  ~~~~~~~~~~~~~ */
-genBtn.addEventListener('click', async () => {
-  const prompt = promptInput.value.trim();
-  if (!prompt) { alert('Please provide a prompt.'); return; }
+/* ---------- helper ---------- */
+const addHist=p=>{
+  const li=document.createElement('li');
+  li.textContent=`${new Date().toLocaleTimeString()} – ${p.slice(0,40)}…`;
+  histList.prepend(li);
+};
 
-  genBtn.disabled = true; genBtn.textContent = 'Generating…';
+/* ---------- generate ---------- */
+genBtn.onclick=async()=>{
+  const prompt=promptIn.value.trim();
+  if(!prompt){alert('Please provide a prompt');return;}
+  genBtn.disabled=true;genBtn.textContent='Generating…';
 
-  /* assemble payload */
-  const body = {
-    prompt,
-    model_id: modelSelect.value,
-    language: langSelect.value,
-    web_search: webSearchChk.checked,
-    website_url: websiteInput.value || null
+  const body={
+    prompt, model_id:modelSel.value, language:langSel.value,
+    web_search:wsCheck.checked, website_url:urlIn.value||null
   };
-
-  /* optional file */
-  if (fileInput.files.length) {
-    const file = fileInput.files[0];
-    body.file_name = file.name;
-    body.file_data = await file.text();
+  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[]
   }
 
-  /* post to Gradio back‑end */
-  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 { data } = await res.json();  // Gradio wraps result in {data:[...]}
-    const [code]  = data;
-
-    codeOut.textContent = code;
-    previewFrame.srcdoc = langSelect.value === 'html'
-      ? code
-      : `<pre style="white-space:pre-wrap">${code.replace(/</g,'&lt;')}</pre>`;
-
-    logHistory(prompt);
-  } catch (err) {
-    console.error(err);
-    codeOut.textContent = `/* ERROR: ${err.message} */`;
-  } finally {
-    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(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';
+};