static/index.js

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

/* 1) MODEL & LANGUAGE LISTS --------------------------------------- */
const AVAILABLE_MODELS = [
  { 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: "Qwen3‑235B‑A22B‑Instruct‑2507",       id: "Qwen/Qwen3-235B-A22B-Instruct-2507"                          },
  { name: "Qwen3‑Coder‑480B‑A35B",               id: "Qwen/Qwen3-Coder-480B-A35B-Instruct"                         },
  { name: "Qwen3‑32B",                           id: "Qwen/Qwen3-32B"                                              },
  { 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"       }
];

const TARGET_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","transformers.js"
];

/* 2) QUICK DOM HOOKS --------------------------------------------- */
const $          = q => document.querySelector(q);
const modelSel   = $('#model');
const langSel    = $('#language');
const tabs       = document.querySelectorAll('.tabs[role="tablist"]');

/* 3) POPULATE DROPDOWNS ------------------------------------------ */
for (const m of AVAILABLE_MODELS) {
  const o = document.createElement('option');
  o.value = m.id;
  o.textContent = m.name;
  o.dataset.provider = m.provider || '';
  modelSel.appendChild(o);
}
for (const l of TARGET_LANGUAGES) {
  const o = document.createElement('option');
  o.value = l;
  o.textContent = l;
  langSel.appendChild(o);
}

/* 4) TABS (generic) ---------------------------------------------- */
tabs.forEach(tabList => {
  tabList.querySelectorAll('[role="tab"]').forEach(btn => {
    btn.addEventListener('click', () => {
      tabList.querySelectorAll('[role="tab"]').forEach(t => t.ariaSelected = false);
      btn.ariaSelected = true;
      const panels = tabList.parentElement.querySelectorAll('[role="tabpanel"]');
      panels.forEach(p => p.hidden = p.id !== btn.getAttribute('aria-controls'));
    });
  });
});

/* 5) INPUTS ------------------------------------------------------- */
const promptInput  = $('#prompt');
const fileInput    = $('#reference‑file');
const urlInput     = $('#website‑url');
const webSearchChk = $('#web‑search');
const codeOut      = $('#code‑output');
const previewFrame = $('#preview');
const histList     = $('#history‑list');

/* 6) CLEAR SESSION ----------------------------------------------- */
$('#clear').addEventListener('click', () => {
  promptInput.value = '';
  fileInput.value   = '';
  urlInput.value    = '';
  codeOut.textContent   = '</>';
  previewFrame.srcdoc   = '';
  histList.innerHTML    = '';
});

/* 7) GENERATE ----------------------------------------------------- */
$('#generate').addEventListener('click', async () => {
  const prompt = promptInput.value.trim();
  if (!prompt) { alert('Please provide a prompt.'); return; }

  // build JSON payload
  const body = {
    prompt,
    model_id: modelSel.value,
    language: langSel.value,
    enable_search: webSearchChk.checked,
    website_url: urlInput.value || null
  };

  if (fileInput.files.length) {
    const f = fileInput.files[0];
    body.file_name = f.name;
    body.file_data = await f.text();      // send raw text; backend still trims to 5 000 chars
  }

  // UI state
  const genBtn = $('#generate');
  genBtn.disabled = true; genBtn.textContent = 'Generating…';

  try {
    const r = await fetch('/run/predict', {
      method : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body   : JSON.stringify(body)
    });
    if (!r.ok) throw new Error(await r.text());
    const { data } = await r.json();      // ↳ Gradio wraps in {data:[…]}
    const [code] = data;

    codeOut.textContent = code;
    previewFrame.srcdoc = langSel.value === 'html'
      ? code
      : `<pre style="white-space:pre-wrap">${code.replace(/&/g,'&amp;').replace(/</g,'&lt;')}</pre>`;

    // history
    const li = document.createElement('li');
    li.textContent = `${new Date().toLocaleTimeString()} – ${prompt.slice(0,40)}…`;
    histList.prepend(li);

  } catch (err) {
    console.error(err);
    alert('Generation failed – check console / backend logs.');
  } finally {
    genBtn.disabled = false; genBtn.textContent = 'Generate Code';
  }
});