static/index.js

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

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

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

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

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

/* ~~~~~~~~~~~~~~~~~~~~~~~ 5.  CLEAR SESSION ~~~~~~~~~~~~~~~~~~~~ */
clearBtn.addEventListener('click', () => {
  promptInput.value = '';
  fileInput.value = '';
  websiteInput.value = '';
  codeOut.textContent = '';
  previewFrame.srcdoc = '';
  historyList.innerHTML = '';
});

/* ~~~~~~~~~~~~~~~~~~~~~~~ 6.  HELPERS ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
function addHistoryEntry(prompt) {
  const li = document.createElement('li');
  li.textContent =
    `${new Date().toLocaleTimeString()} – ${prompt.slice(0, 40)}…`;
  historyList.prepend(li);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~ 7.  GENERATE (CALL BACKEND) ~~~~~~~~~~ */
genBtn.addEventListener('click', async () => {
  const prompt = promptInput.value.trim();
  if (!prompt) {
    alert('Please provide a prompt.');
    return;
  }

  genBtn.disabled = true;
  genBtn.textContent = 'Generating…';

  /* Build request payload */
  const body = {
    prompt,
    model_id: modelSelect.value,
    language: langSelect.value,
    web_search: webSearchChk.checked,
    website_url: websiteInput.value || null
  };

  /* 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
  }

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

    /* ----  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>`;
    }
    addHistoryEntry(prompt);
  } catch (err) {
    console.error(err);
    alert('Error generating code – check console.');
  } finally {
    genBtn.disabled = false;
    genBtn.textContent = 'Generate Code';
  }
});