static/index.js

/* static/index.js
   ----------------------------------------------------------
   AnyCoder AI – interactive front‑end
   ---------------------------------------------------------- */

(() => {
  /* ---------- 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 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.  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.  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.  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);
    });

  const addHistory = (text) => {
    const li = document.createElement('li');
    li.textContent = `${new Date().toLocaleTimeString()} — ${text.slice(0, 40)}…`;
    histList.prepend(li);
  };

  const resetUI = () => {
    promptIn.value = '';
    fileIn.value = '';
    urlIn.value = '';
    codeOut.textContent = '';
    previewOut.srcdoc = '';
    histList.innerHTML = '';
  };

  /* ---------- 6.  CLEAR SESSION ------------------------------- */
  clearBtn.addEventListener('click', resetUI);

  /* ---------- 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…';

    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 (fileIn.files.length) {
      const file = fileIn.files[0];
      payload.file_name = file.name;
      payload.file_data = await toBase64(file);
    }

    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';
    }
  });
})();