Update static/index.js

static/index.js

@@ -1,55 +1,131 @@
-/* highlight the active section in the sidebar (if you add one) */
-section[aria-labelledby] {
-  position: relative;
-}
-section[aria-labelledby]::before {
-  content: attr(aria-labelledby);
-  position: absolute;
-  top: -1.2rem;
-  left: 0;
-  font-size: 0.85rem;
-  color: var(--text-muted);
-}
+/* static/index.js
+   ----------------------------------------------------------
+   AnyCoder AI front‑end logic
+   ---------------------------------------------------------- */
 
-/* smooth fade‑in for panels */
-[role="tabpanel"] {
-  animation: fadeIn 0.3s ease both;
-}
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(4px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
+/* ~~~~~~~~~~~~~~~~~~~~~~~ 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" }
+];
 
-/* custom scrollbar for code output */
-pre::-webkit-scrollbar,
-code::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-pre::-webkit-scrollbar-thumb,
-code::-webkit-scrollbar-thumb {
-  background-color: var(--border);
-  border-radius: var(--radius);
-}
-pre::-webkit-scrollbar-track,
-code::-webkit-scrollbar-track {
-  background: var(--bg-secondary);
-}
+/* ~~~~~~~~~~~~~~~~~~~~~~~ 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');
 
-/* pulse animation for generate button when disabled/loading */
-@keyframes pulse {
-  0%,100% { opacity: 1; }
-  50% { opacity: 0.6; }
+/* ~~~~~~~~~~~~~~~~~~~~~~~ 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);
 }
-button:disabled {
-  cursor: wait;
-  animation: pulse 1s infinite;
+
+/* ~~~~~~~~~~~~~~~~~~~~~~~ 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)));
 
-/* small icon styling (if you add logos) */
-.icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  vertical-align: middle;
-  margin-right: 0.25rem;
+/* ~~~~~~~~~~~~~~~~~~~~~~~ 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';
+  }
+});