Update static/index.js

static/index.js

@@ -1,131 +1,131 @@
 /* static/index.js
    ----------------------------------------------------------
-   AnyCoder AI front‑end logic
+   AnyCoder AI – interactive front‑end
    ---------------------------------------------------------- */
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 1.  MODEL LIST ~~~~~~~~~~~~~~~~~~~~~~~ */
-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 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" }
+  ];
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 2.  DOM HOOKS ~~~~~~~~~~~~~~~~~~~~~~~ */
-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');
+  /* ---------- 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');
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 3.  POPULATE MODELS ~~~~~~~~~~~~~~~~~~ */
-for (const m of AVAILABLE_MODELS) {
-  const opt = document.createElement('option');
-  opt.value = m.id;
-  opt.textContent = m.name;
-  opt.dataset.provider = m.provider || '';
-  modelSelect.appendChild(opt);
-}
+  /* ---------- 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);
+  }
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 4.  TAB HANDLING ~~~~~~~~~~~~~~~~~~~~~ */
-function activateTab(tabBtn) {
-  const tabList = tabBtn.parentElement;
-  const tabs = tabList.querySelectorAll('[role="tab"]');
-  const panels = tabList.parentElement.querySelectorAll('[role="tabpanel"]');
-  tabs.forEach((t) => {
-    const selected = t === tabBtn;
-    t.setAttribute('aria-selected', selected);
-    panels
-      .forEach((p) => (p.hidden = p.id !== t.getAttribute('aria-controls')));
-  });
-}
-document.querySelectorAll('.tabs[role="tablist"] button')
-  .forEach((btn) => btn.addEventListener('click', () => activateTab(btn)));
+  /* ---------- 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)));
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 5.  CLEAR SESSION ~~~~~~~~~~~~~~~~~~~~ */
-clearBtn.addEventListener('click', () => {
-  promptInput.value = '';
-  fileInput.value = '';
-  websiteInput.value = '';
-  codeOut.textContent = '';
-  previewFrame.srcdoc = '';
-  historyList.innerHTML = '';
-});
+  /* ---------- 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);
+    });
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 6.  HELPERS ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
-function addHistoryEntry(prompt) {
-  const li = document.createElement('li');
-  li.textContent =
-    `${new Date().toLocaleTimeString()} – ${prompt.slice(0, 40)}…`;
-  historyList.prepend(li);
-}
+  const addHistory = (text) => {
+    const li = document.createElement('li');
+    li.textContent = `${new Date().toLocaleTimeString()} — ${text.slice(0, 40)}…`;
+    histList.prepend(li);
+  };
 
-/* ~~~~~~~~~~~~~~~~~~~~~~~ 7.  GENERATE (CALL BACKEND) ~~~~~~~~~~ */
-genBtn.addEventListener('click', async () => {
-  const prompt = promptInput.value.trim();
-  if (!prompt) {
-    alert('Please provide a prompt.');
-    return;
-  }
+  const resetUI = () => {
+    promptIn.value = '';
+    fileIn.value = '';
+    urlIn.value = '';
+    codeOut.textContent = '';
+    previewOut.srcdoc = '';
+    histList.innerHTML = '';
+  };
 
-  genBtn.disabled = true;
-  genBtn.textContent = 'Generating…';
+  /* ---------- 6.  CLEAR SESSION ------------------------------- */
+  clearBtn.addEventListener('click', resetUI);
 
-  /* Build request payload */
-  const body = {
-    prompt,
-    model_id: modelSelect.value,
-    language: langSelect.value,
-    web_search: webSearchChk.checked,
-    website_url: websiteInput.value || null
-  };
+  /* ---------- 7.  GENERATE (CALL BACK‑END) -------------------- */
+  genBtn.addEventListener('click', async () => {
+    const prompt = promptIn.value.trim();
+    if (!prompt) { alert('Please provide a prompt.'); return; }
 
-  /* File upload (optional) */
-  if (fileInput.files.length) {
-    const file = fileInput.files[0];
-    body.file_name = file.name;
-    body.file_data = await file.arrayBuffer(); // could base64 if needed
-  }
+    genBtn.disabled = true;
+    genBtn.textContent = 'Generating…';
 
-  try {
-    /* ----  POST to /predict  ---------------------------------- */
-    const res = await fetch('/predict', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(body)
-    });
-    if (!res.ok) throw new Error(res.statusText);
-    const data = await res.json();
+    const payload = {
+      prompt,
+      model_name: modelSel.options[modelSel.selectedIndex].textContent,
+      language: langSel.value,
+      web_search: searchChk.checked,
+      website_url: urlIn.value || null
+    };
 
-    /* ----  Display results  ----------------------------------- */
-    codeOut.textContent = data.code;
-    if (langSelect.value === 'html') {
-      previewFrame.srcdoc = data.code;
-    } else {
-      previewFrame.srcdoc =
-        `<pre style="white-space:pre-wrap">${data.code.replace(/</g, '&lt;')}</pre>`;
+    /* optional file */
+    if (fileIn.files.length) {
+      const file = fileIn.files[0];
+      payload.file_name = file.name;
+      payload.file_data = await toBase64(file);
     }
-    addHistoryEntry(prompt);
-  } catch (err) {
-    console.error(err);
-    alert('Error generating code – check console.');
-  } finally {
-    genBtn.disabled = false;
-    genBtn.textContent = 'Generate Code';
-  }
-});
+
+    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 || '// (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';
+    }
+  });
+})();