Update static/index.js
Browse files- static/index.js +114 -77
static/index.js
CHANGED
@@ -1,95 +1,132 @@
|
|
1 |
-
/* static/index.js
|
|
|
2 |
|
3 |
-
/* 1)
|
4 |
-
const
|
5 |
-
{name:"Moonshot
|
6 |
-
{name:"DeepSeek
|
7 |
-
{name:"DeepSeek
|
8 |
-
{name:"ERNIE‑4.5‑VL",
|
9 |
-
{name:"MiniMax
|
10 |
-
{name:"Qwen3‑235B‑A22B",
|
11 |
-
{name:"
|
12 |
-
{name:"
|
13 |
-
{name:"Qwen3‑
|
14 |
-
{name:"Qwen3‑
|
15 |
-
{name:"
|
16 |
-
{name:"
|
17 |
-
|
18 |
-
{name:"
|
19 |
-
{name:"Gemini Pro", id:"gemini/pro", provider:"gemini"},
|
20 |
-
{name:"Fireworks V1", id:"fireworks-ai/fireworks-v1", provider:"fireworks"}
|
21 |
];
|
22 |
|
23 |
-
|
24 |
-
|
25 |
-
"
|
26 |
-
"
|
27 |
-
"sql-
|
28 |
-
"sql-
|
29 |
];
|
30 |
|
31 |
-
/*
|
32 |
-
const $
|
33 |
-
const
|
34 |
-
|
35 |
-
|
36 |
-
code : $("#code"), prev: $("#preview"), hist: $("#hist"),
|
37 |
-
gen : $("#gen"), clr: $("#clear")
|
38 |
-
};
|
39 |
|
40 |
-
/*
|
41 |
-
|
42 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
43 |
|
44 |
-
/*
|
45 |
-
|
46 |
-
|
47 |
-
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
p.hidden = p.id !==
|
|
|
52 |
});
|
53 |
});
|
54 |
|
55 |
-
/*
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
|
|
|
|
|
|
60 |
|
61 |
-
/*
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
|
|
|
|
|
|
67 |
|
68 |
-
/*
|
69 |
-
|
70 |
-
const prompt =
|
71 |
-
if (!prompt) { alert(
|
72 |
|
73 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
74 |
|
75 |
-
|
76 |
-
|
77 |
-
|
78 |
-
|
79 |
-
const up=await fetch("/upload",{method:"POST", body:fd});
|
80 |
-
file_path=(await up.json()).file;
|
81 |
}
|
82 |
|
83 |
-
|
84 |
-
|
85 |
-
|
86 |
-
language : els.lang.value,
|
87 |
-
enable_search: els.search.checked,
|
88 |
-
website_url : els.url.value || null,
|
89 |
-
file_path
|
90 |
-
};
|
91 |
|
92 |
try {
|
93 |
-
const r = await fetch(
|
94 |
-
method:
|
95 |
-
headers:{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/* /static/index.js – AnyCoder AI front‑end logic
|
2 |
+
------------------------------------------------- */
|
3 |
|
4 |
+
/* 1) MODEL & LANGUAGE LISTS --------------------------------------- */
|
5 |
+
const AVAILABLE_MODELS = [
|
6 |
+
{ name: "Moonshot Kimi‑K2", id: "moonshotai/Kimi-K2-Instruct", provider: "groq" },
|
7 |
+
{ name: "DeepSeek V3", id: "deepseek-ai/DeepSeek-V3-0324" },
|
8 |
+
{ name: "DeepSeek R1", id: "deepseek-ai/DeepSeek-R1-0528" },
|
9 |
+
{ name: "ERNIE‑4.5‑VL", id: "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT" },
|
10 |
+
{ name: "MiniMax M1", id: "MiniMaxAI/MiniMax-M1-80k" },
|
11 |
+
{ name: "Qwen3‑235B‑A22B", id: "Qwen/Qwen3-235B-A22B" },
|
12 |
+
{ name: "SmolLM3‑3B", id: "HuggingFaceTB/SmolLM3-3B" },
|
13 |
+
{ name: "GLM‑4.1V‑9B‑Thinking", id: "THUDM/GLM-4.1V-9B-Thinking" },
|
14 |
+
{ name: "Qwen3‑235B‑A22B‑Instruct‑2507", id: "Qwen/Qwen3-235B-A22B-Instruct-2507" },
|
15 |
+
{ name: "Qwen3‑Coder‑480B‑A35B", id: "Qwen/Qwen3-Coder-480B-A35B-Instruct" },
|
16 |
+
{ name: "Qwen3‑32B", id: "Qwen/Qwen3-32B" },
|
17 |
+
{ name: "OpenAI GPT‑4", id: "openai/gpt-4", provider: "openai" },
|
18 |
+
{ name: "Gemini Pro", id: "gemini/pro", provider: "gemini" },
|
19 |
+
{ name: "Fireworks V1", id: "fireworks-ai/fireworks-v1", provider: "fireworks" }
|
|
|
|
|
20 |
];
|
21 |
|
22 |
+
const TARGET_LANGUAGES = [
|
23 |
+
"python","c","cpp","markdown","latex","json","html","css",
|
24 |
+
"javascript","jinja2","typescript","yaml","dockerfile","shell",
|
25 |
+
"r","sql","sql-msSQL","sql-mySQL","sql-mariaDB","sql-sqlite",
|
26 |
+
"sql-cassandra","sql-plSQL","sql-hive","sql-pgSQL","sql-gql",
|
27 |
+
"sql-gpSQL","sql-sparkSQL","sql-esper","transformers.js"
|
28 |
];
|
29 |
|
30 |
+
/* 2) QUICK DOM HOOKS --------------------------------------------- */
|
31 |
+
const $ = q => document.querySelector(q);
|
32 |
+
const modelSel = $('#model');
|
33 |
+
const langSel = $('#language');
|
34 |
+
const tabs = document.querySelectorAll('.tabs[role="tablist"]');
|
|
|
|
|
|
|
35 |
|
36 |
+
/* 3) POPULATE DROPDOWNS ------------------------------------------ */
|
37 |
+
for (const m of AVAILABLE_MODELS) {
|
38 |
+
const o = document.createElement('option');
|
39 |
+
o.value = m.id;
|
40 |
+
o.textContent = m.name;
|
41 |
+
o.dataset.provider = m.provider || '';
|
42 |
+
modelSel.appendChild(o);
|
43 |
+
}
|
44 |
+
for (const l of TARGET_LANGUAGES) {
|
45 |
+
const o = document.createElement('option');
|
46 |
+
o.value = l;
|
47 |
+
o.textContent = l;
|
48 |
+
langSel.appendChild(o);
|
49 |
+
}
|
50 |
|
51 |
+
/* 4) TABS (generic) ---------------------------------------------- */
|
52 |
+
tabs.forEach(tabList => {
|
53 |
+
tabList.querySelectorAll('[role="tab"]').forEach(btn => {
|
54 |
+
btn.addEventListener('click', () => {
|
55 |
+
tabList.querySelectorAll('[role="tab"]').forEach(t => t.ariaSelected = false);
|
56 |
+
btn.ariaSelected = true;
|
57 |
+
const panels = tabList.parentElement.querySelectorAll('[role="tabpanel"]');
|
58 |
+
panels.forEach(p => p.hidden = p.id !== btn.getAttribute('aria-controls'));
|
59 |
+
});
|
60 |
});
|
61 |
});
|
62 |
|
63 |
+
/* 5) INPUTS ------------------------------------------------------- */
|
64 |
+
const promptInput = $('#prompt');
|
65 |
+
const fileInput = $('#reference‑file');
|
66 |
+
const urlInput = $('#website‑url');
|
67 |
+
const webSearchChk = $('#web‑search');
|
68 |
+
const codeOut = $('#code‑output');
|
69 |
+
const previewFrame = $('#preview');
|
70 |
+
const histList = $('#history‑list');
|
71 |
|
72 |
+
/* 6) CLEAR SESSION ----------------------------------------------- */
|
73 |
+
$('#clear').addEventListener('click', () => {
|
74 |
+
promptInput.value = '';
|
75 |
+
fileInput.value = '';
|
76 |
+
urlInput.value = '';
|
77 |
+
codeOut.textContent = '</>';
|
78 |
+
previewFrame.srcdoc = '';
|
79 |
+
histList.innerHTML = '';
|
80 |
+
});
|
81 |
|
82 |
+
/* 7) GENERATE ----------------------------------------------------- */
|
83 |
+
$('#generate').addEventListener('click', async () => {
|
84 |
+
const prompt = promptInput.value.trim();
|
85 |
+
if (!prompt) { alert('Please provide a prompt.'); return; }
|
86 |
|
87 |
+
// build JSON payload
|
88 |
+
const body = {
|
89 |
+
prompt,
|
90 |
+
model_id: modelSel.value,
|
91 |
+
language: langSel.value,
|
92 |
+
enable_search: webSearchChk.checked,
|
93 |
+
website_url: urlInput.value || null
|
94 |
+
};
|
95 |
|
96 |
+
if (fileInput.files.length) {
|
97 |
+
const f = fileInput.files[0];
|
98 |
+
body.file_name = f.name;
|
99 |
+
body.file_data = await f.text(); // send raw text; backend still trims to 5 000 chars
|
|
|
|
|
100 |
}
|
101 |
|
102 |
+
// UI state
|
103 |
+
const genBtn = $('#generate');
|
104 |
+
genBtn.disabled = true; genBtn.textContent = 'Generating…';
|
|
|
|
|
|
|
|
|
|
|
105 |
|
106 |
try {
|
107 |
+
const r = await fetch('/run/predict', {
|
108 |
+
method : 'POST',
|
109 |
+
headers: { 'Content-Type': 'application/json' },
|
110 |
+
body : JSON.stringify(body)
|
111 |
+
});
|
112 |
+
if (!r.ok) throw new Error(await r.text());
|
113 |
+
const { data } = await r.json(); // ↳ Gradio wraps in {data:[…]}
|
114 |
+
const [code] = data;
|
115 |
+
|
116 |
+
codeOut.textContent = code;
|
117 |
+
previewFrame.srcdoc = langSel.value === 'html'
|
118 |
+
? code
|
119 |
+
: `<pre style="white-space:pre-wrap">${code.replace(/&/g,'&').replace(/</g,'<')}</pre>`;
|
120 |
+
|
121 |
+
// history
|
122 |
+
const li = document.createElement('li');
|
123 |
+
li.textContent = `${new Date().toLocaleTimeString()} – ${prompt.slice(0,40)}…`;
|
124 |
+
histList.prepend(li);
|
125 |
+
|
126 |
+
} catch (err) {
|
127 |
+
console.error(err);
|
128 |
+
alert('Generation failed – check console / backend logs.');
|
129 |
+
} finally {
|
130 |
+
genBtn.disabled = false; genBtn.textContent = 'Generate Code';
|
131 |
+
}
|
132 |
+
});
|