File size: 4,921 Bytes
065cfda 3c5da9c 065cfda ca40114 3c5da9c ca40114 3c5da9c ca40114 3c5da9c 065cfda 3c5da9c ca40114 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c 065cfda 3c5da9c |
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 – interactive front‑end
---------------------------------------------------------- */
(() => {
/* ---------- 1. MODEL CATALOG -------------------------------- */
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 SHORTCUTS -------------------------------- */
const $ = (q) => document.querySelector(q);
const modelSel = $('#model');
const promptIn = $('#prompt');
const fileIn = $('#reference-file');
const urlIn = $('#website-url');
const langSel = $('#language');
const searchChk = $('#web-search');
const codeOut = $('#code-output');
const previewOut = $('#preview');
const histList = $('#history-list');
const genBtn = $('#generate');
const clearBtn = $('#clear');
/* ---------- 3. INIT MODEL DROPDOWN -------------------------- */
for (const m of AVAILABLE_MODELS) {
const opt = document.createElement('option');
opt.value = m.id;
opt.textContent = m.name;
opt.dataset.provider = m.provider || '';
modelSel.appendChild(opt);
}
/* ---------- 4. TABS ---------------------------------------- */
function activateTab(btn) {
const tabs = btn.parentElement.querySelectorAll('[role="tab"]');
const panels = btn.closest('section').querySelectorAll('[role="tabpanel"]');
tabs.forEach(t => {
const sel = t === btn;
t.setAttribute('aria-selected', sel);
t.tabIndex = sel ? 0 : -1;
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. UTILITIES ----------------------------------- */
const toBase64 = (file) =>
new Promise((res, rej) => {
const reader = new FileReader();
reader.onload = () => res(reader.result.split(',')[1]);
reader.onerror = rej;
reader.readAsDataURL(file);
});
const addHistory = (text) => {
const li = document.createElement('li');
li.textContent = `${new Date().toLocaleTimeString()} — ${text.slice(0, 40)}…`;
histList.prepend(li);
};
const resetUI = () => {
promptIn.value = '';
fileIn.value = '';
urlIn.value = '';
codeOut.textContent = '';
previewOut.srcdoc = '';
histList.innerHTML = '';
};
/* ---------- 6. CLEAR SESSION ------------------------------- */
clearBtn.addEventListener('click', resetUI);
/* ---------- 7. GENERATE (CALL BACK‑END) -------------------- */
genBtn.addEventListener('click', async () => {
const prompt = promptIn.value.trim();
if (!prompt) { alert('Please provide a prompt.'); return; }
genBtn.disabled = true;
genBtn.textContent = 'Generating…';
const payload = {
prompt,
model_name: modelSel.options[modelSel.selectedIndex].textContent,
language: langSel.value,
web_search: searchChk.checked,
website_url: urlIn.value || null
};
/* optional file */
if (fileIn.files.length) {
const file = fileIn.files[0];
payload.file_name = file.name;
payload.file_data = await toBase64(file);
}
try {
const res = await fetch('/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!res.ok) throw new Error(await res.text());
const { code, preview } = await res.json();
codeOut.textContent = code || '// (empty)';
previewOut.srcdoc = preview || `<pre>${code.replace(/</g, '<')}</pre>`;
addHistory(prompt);
} catch (err) {
console.error(err);
alert('Generation failed – see console for details.');
} finally {
genBtn.disabled = false;
genBtn.textContent = 'Generate Code';
}
});
})();
|