File size: 4,666 Bytes
065cfda ca40114 065cfda ca40114 065cfda ca40114 065cfda da49c48 065cfda da49c48 065cfda ca40114 065cfda da49c48 065cfda |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
/* 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, '<')}</pre>`;
}
addHistoryEntry(prompt);
} catch (err) {
console.error(err);
alert('Error generating code – check console.');
} finally {
genBtn.disabled = false;
genBtn.textContent = 'Generate Code';
}
});
|