static/index.js

/* 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!
];

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"
];

/* ~~~~~~~~~~~~~ 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);
});

LANGUAGES.forEach(lang => {
  const opt = document.createElement('option');
  opt.value = lang;
  opt.textContent = lang;
  langSelect.appendChild(opt);
});

/* ~~~~~~~~~~~~~ 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'); });
  }));

/* ~~~~~~~~~~~~~ 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);
}

/* ~~~~~~~~~~~~~ 7.  GENERATE → BACKEND  ~~~~~~~~~~~~~ */
genBtn.addEventListener('click', async () => {
  const prompt = promptInput.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
  };

  /* optional file */
  if (fileInput.files.length) {
    const file = fileInput.files[0];
    body.file_name = file.name;
    body.file_data = await file.text();
  }

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