Update static/index.js

static/index.js

@@ -1,131 +1,133 @@
-/* static/index.js
+/* static/index.js  –  FULL FILE
    ----------------------------------------------------------
-   AnyCoder AI – interactive front‑end
+   AnyCoder AI front‑end logic
    ---------------------------------------------------------- */
 
-(() => {
-  /* ---------- 1.  MODEL CATALOG -------------------------------- */
-  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" }
-  ];
+/* ~~~~~~~~~~~~~ 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!
+];
 
-  /* ---------- 2.  DOM SHORTCUTS -------------------------------- */
-  const $          = (q) => document.querySelector(q);
-  const modelSel   = $('#model');
-  const promptIn   = $('#prompt');
-  const fileIn     = $('#reference-file');
-  const urlIn      = $('#website-url');
-  const langSel    = $('#language');
-  const searchChk  = $('#web-search');
-  const codeOut    = $('#code-output');
-  const previewOut = $('#preview');
-  const histList   = $('#history-list');
-  const genBtn     = $('#generate');
-  const clearBtn   = $('#clear');
+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"
+];
 
-  /* ---------- 3.  INIT MODEL DROPDOWN -------------------------- */
-  for (const m of AVAILABLE_MODELS) {
-    const opt = document.createElement('option');
-    opt.value = m.id;
-    opt.textContent = m.name;
-    opt.dataset.provider = m.provider || '';
-    modelSel.appendChild(opt);
-  }
+/* ~~~~~~~~~~~~~ 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');
 
-  /* ---------- 4.  TABS ---------------------------------------- */
-  function activateTab(btn) {
-    const tabs   = btn.parentElement.querySelectorAll('[role="tab"]');
-    const panels = btn.closest('section').querySelectorAll('[role="tabpanel"]');
-    tabs.forEach(t => {
-      const sel = t === btn;
-      t.setAttribute('aria-selected', sel);
-      t.tabIndex = sel ? 0 : -1;
-      panels.forEach(p => p.hidden = p.id !== t.getAttribute('aria-controls'));
-    });
-  }
-  document
-    .querySelectorAll('.tabs[role="tablist"] button')
-    .forEach(btn => btn.addEventListener('click', () => activateTab(btn)));
+/* ~~~~~~~~~~~~~ 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);
+});
 
-  /* ---------- 5.  UTILITIES ----------------------------------- */
-  const toBase64 = (file) =>
-    new Promise((res, rej) => {
-      const reader = new FileReader();
-      reader.onload = () => res(reader.result.split(',')[1]);
-      reader.onerror = rej;
-      reader.readAsDataURL(file);
-    });
+LANGUAGES.forEach(lang => {
+  const opt = document.createElement('option');
+  opt.value = lang;
+  opt.textContent = lang;
+  langSelect.appendChild(opt);
+});
 
-  const addHistory = (text) => {
-    const li = document.createElement('li');
-    li.textContent = `${new Date().toLocaleTimeString()} — ${text.slice(0, 40)}…`;
-    histList.prepend(li);
-  };
+/* ~~~~~~~~~~~~~ 4.  TAB HANDLING  ~~~~~~~~~~~~~ */
+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'); });
+  }));
 
-  const resetUI = () => {
-    promptIn.value = '';
-    fileIn.value = '';
-    urlIn.value = '';
-    codeOut.textContent = '';
-    previewOut.srcdoc = '';
-    histList.innerHTML = '';
-  };
+/* ~~~~~~~~~~~~~ 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);
+}
 
-  /* ---------- 6.  CLEAR SESSION ------------------------------- */
-  clearBtn.addEventListener('click', resetUI);
+/* ~~~~~~~~~~~~~ 7.  GENERATE → BACKEND  ~~~~~~~~~~~~~ */
+genBtn.addEventListener('click', async () => {
+  const prompt = promptInput.value.trim();
+  if (!prompt) { alert('Please provide a prompt.'); return; }
 
-  /* ---------- 7.  GENERATE (CALL BACK‑END) -------------------- */
-  genBtn.addEventListener('click', async () => {
-    const prompt = promptIn.value.trim();
-    if (!prompt) { alert('Please provide a prompt.'); return; }
+  genBtn.disabled = true; genBtn.textContent = 'Generating…';
 
-    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 payload = {
-      prompt,
-      model_name: modelSel.options[modelSel.selectedIndex].textContent,
-      language: langSel.value,
-      web_search: searchChk.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();
+  }
 
-    /* optional file */
-    if (fileIn.files.length) {
-      const file = fileIn.files[0];
-      payload.file_name = file.name;
-      payload.file_data = await toBase64(file);
-    }
+  /* 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;
 
-    try {
-      const res = await fetch('/predict', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
-      });
-      if (!res.ok) throw new Error(await res.text());
-      const { code, preview } = await res.json();
+    codeOut.textContent = code;
+    previewFrame.srcdoc = langSelect.value === 'html'
+      ? code
+      : `<pre style="white-space:pre-wrap">${code.replace(/</g,'&lt;')}</pre>`;
 
-      codeOut.textContent = code || '// (empty)';
-      previewOut.srcdoc   = preview || `<pre>${code.replace(/</g, '&lt;')}</pre>`;
-      addHistory(prompt);
-    } catch (err) {
-      console.error(err);
-      alert('Generation failed – see console for details.');
-    } finally {
-      genBtn.disabled = false;
-      genBtn.textContent = 'Generate Code';
-    }
-  });
-})();
+    logHistory(prompt);
+  } catch (err) {
+    console.error(err);
+    codeOut.textContent = `/* ERROR: ${err.message} */`;
+  } finally {
+    genBtn.disabled = false; genBtn.textContent = 'Generate Code';
+  }
+});