mgbam commited on
Commit
be4efb5
·
verified ·
1 Parent(s): c0b43a6

Update static/index.js

Browse files
Files changed (1) hide show
  1. static/index.js +114 -77
static/index.js CHANGED
@@ -1,95 +1,132 @@
1
- /* static/index.jsAnyCoder front‑end 2025‑07 */
 
2
 
3
- /* 1) Model registry */
4
- const MODELS = [
5
- {name:"Moonshot Kimi‑K2", id:"moonshotai/Kimi-K2-Instruct", provider:"groq"},
6
- {name:"DeepSeek V3", id:"deepseek-ai/DeepSeek-V3-0324"},
7
- {name:"DeepSeek R1", id:"deepseek-ai/DeepSeek-R1-0528"},
8
- {name:"ERNIE‑4.5‑VL", id:"baidu/ERNIE-4.5-VL-424B-A47B-Base-PT"},
9
- {name:"MiniMax M1", id:"MiniMaxAI/MiniMax-M1-80k"},
10
- {name:"Qwen3‑235B‑A22B", id:"Qwen/Qwen3-235B-A22B"},
11
- {name:"Qwen3235B‑A22B‑Instruct‑2507", id:"Qwen/Qwen3-235B-A22B-Instruct-2507"},
12
- {name:"Qwen3235BA22B‑Thinking", id:"Qwen/Qwen3-235B-A22B-Thinking"},
13
- {name:"Qwen3‑Coder480BA35B", id:"Qwen/Qwen3-Coder-480B-A35B-Instruct"},
14
- {name:"Qwen3‑32B", id:"Qwen/Qwen3-32B"},
15
- {name:"SmolLM33B", id:"HuggingFaceTB/SmolLM3-3B"},
16
- {name:"GLM‑4.1V‑9B‑Thinking", id:"THUDM/GLM-4.1V-9B-Thinking"},
17
- /* premium providers (optional) */
18
- {name:"OpenAI GPT‑4", id:"openai/gpt-4", provider:"openai"},
19
- {name:"Gemini Pro", id:"gemini/pro", provider:"gemini"},
20
- {name:"Fireworks V1", id:"fireworks-ai/fireworks-v1", provider:"fireworks"}
21
  ];
22
 
23
- /* 2) Language list */
24
- const LANGS = [
25
- "python","c","cpp","markdown","latex","json","html","css","javascript","jinja2",
26
- "typescript","yaml","dockerfile","shell","r","sql","sql-msSQL","sql-mySQL",
27
- "sql-mariaDB","sql-sqlite","sql-cassandra","sql-plSQL","sql-hive","sql-pgSQL",
28
- "sql-gql","sql-gpSQL","sql-sparkSQL","sql-esper"
29
  ];
30
 
31
- /* 3) DOM helpers */
32
- const $ = s => document.querySelector(s);
33
- const els = {
34
- model: $("#model"), lang: $("#lang"), prompt: $("#prompt"),
35
- file : $("#file"), url: $("#url"), search: $("#search"),
36
- code : $("#code"), prev: $("#preview"), hist: $("#hist"),
37
- gen : $("#gen"), clr: $("#clear")
38
- };
39
 
40
- /* 4) Populate selects */
41
- MODELS.forEach(m => els.model.add(new Option(m.name, m.id)));
42
- LANGS .forEach(l => els.lang .add(new Option(l.toUpperCase(), l)));
 
 
 
 
 
 
 
 
 
 
 
43
 
44
- /* 5) Basic tab switcher */
45
- document.querySelectorAll(".tabs[role=tablist]").forEach(tl => {
46
- tl.addEventListener("click", e => {
47
- if (e.target.role !== "tab") return;
48
- tl.querySelectorAll("[role=tab]").forEach(t =>
49
- t.setAttribute("aria-selected", t===e.target));
50
- tl.parentElement.querySelectorAll("[role=tabpanel]").forEach(p =>
51
- p.hidden = p.id !== e.target.getAttribute("aria-controls"));
 
52
  });
53
  });
54
 
55
- /* 6) Clear */
56
- els.clr.onclick = () => {
57
- els.prompt.value=""; els.file.value=""; els.url.value="";
58
- els.code.textContent=""; els.prev.srcdoc=""; els.hist.innerHTML="";
59
- };
 
 
 
60
 
61
- /* 7) History helper */
62
- const addHist = text => {
63
- const li=document.createElement("li");
64
- li.textContent = `${new Date().toLocaleTimeString()} – ${text.slice(0,40)}…`;
65
- els.hist.prepend(li);
66
- };
 
 
 
67
 
68
- /* 8) Generate POST /run/predict */
69
- els.gen.onclick = async () => {
70
- const prompt = els.prompt.value.trim();
71
- if (!prompt) { alert("Enter a prompt first."); return; }
72
 
73
- els.gen.disabled = true; els.gen.textContent = "Generating…";
 
 
 
 
 
 
 
74
 
75
- // optional file upload
76
- let file_path=null;
77
- if (els.file.files.length) {
78
- const fd=new FormData(); fd.append("file", els.file.files[0]);
79
- const up=await fetch("/upload",{method:"POST", body:fd});
80
- file_path=(await up.json()).file;
81
  }
82
 
83
- const payload = {
84
- prompt,
85
- model_id : els.model.value,
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("/run/predict", {
94
- method:"POST",
95
- headers:{ "Content-Type":"application/j
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* /static/index.jsAnyCoder 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: "SmolLM33B", id: "HuggingFaceTB/SmolLM3-3B" },
13
+ { name: "GLM4.1V9B‑Thinking", id: "THUDM/GLM-4.1V-9B-Thinking" },
14
+ { name: "Qwen3‑235BA22BInstruct‑2507", id: "Qwen/Qwen3-235B-A22B-Instruct-2507" },
15
+ { name: "Qwen3‑Coder‑480B‑A35B", id: "Qwen/Qwen3-Coder-480B-A35B-Instruct" },
16
+ { name: "Qwen332B", 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,'&amp;').replace(/</g,'&lt;')}</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
+ });