File size: 5,707 Bytes
be4efb5
 
25bf9bb
be4efb5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3380f8e
25bf9bb
be4efb5
 
 
 
 
 
3380f8e
ca40114
be4efb5
 
 
 
 
25bf9bb
be4efb5
 
 
 
 
 
 
 
 
 
 
 
 
 
065cfda
be4efb5
 
 
 
 
 
 
 
 
25bf9bb
 
065cfda
be4efb5
 
 
 
 
 
 
 
96267f5
be4efb5
 
 
 
 
 
 
 
 
065cfda
be4efb5
 
 
 
065cfda
be4efb5
 
 
 
 
 
 
 
25bf9bb
be4efb5
 
 
 
3380f8e
065cfda
be4efb5
 
 
96267f5
25bf9bb
be4efb5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
133
/* /static/index.js  –  AnyCoder AI front‑end logic
   ------------------------------------------------- */

/* 1) MODEL & LANGUAGE LISTS --------------------------------------- */
const AVAILABLE_MODELS = [
  { 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: "Qwen3‑235B‑A22B‑Instruct‑2507",       id: "Qwen/Qwen3-235B-A22B-Instruct-2507"                          },
  { name: "Qwen3‑Coder‑480B‑A35B",               id: "Qwen/Qwen3-Coder-480B-A35B-Instruct"                         },
  { name: "Qwen3‑32B",                           id: "Qwen/Qwen3-32B"                                              },
  { 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"       }
];

const TARGET_LANGUAGES = [
  "python","c","cpp","markdown","latex","json","html","css",
  "javascript","jinja2","typescript","yaml","dockerfile","shell",
  "r","sql","sql-msSQL","sql-mySQL","sql-mariaDB","sql-sqlite",
  "sql-cassandra","sql-plSQL","sql-hive","sql-pgSQL","sql-gql",
  "sql-gpSQL","sql-sparkSQL","sql-esper","transformers.js"
];

/* 2) QUICK DOM HOOKS --------------------------------------------- */
const $          = q => document.querySelector(q);
const modelSel   = $('#model');
const langSel    = $('#language');
const tabs       = document.querySelectorAll('.tabs[role="tablist"]');

/* 3) POPULATE DROPDOWNS ------------------------------------------ */
for (const m of AVAILABLE_MODELS) {
  const o = document.createElement('option');
  o.value = m.id;
  o.textContent = m.name;
  o.dataset.provider = m.provider || '';
  modelSel.appendChild(o);
}
for (const l of TARGET_LANGUAGES) {
  const o = document.createElement('option');
  o.value = l;
  o.textContent = l;
  langSel.appendChild(o);
}

/* 4) TABS (generic) ---------------------------------------------- */
tabs.forEach(tabList => {
  tabList.querySelectorAll('[role="tab"]').forEach(btn => {
    btn.addEventListener('click', () => {
      tabList.querySelectorAll('[role="tab"]').forEach(t => t.ariaSelected = false);
      btn.ariaSelected = true;
      const panels = tabList.parentElement.querySelectorAll('[role="tabpanel"]');
      panels.forEach(p => p.hidden = p.id !== btn.getAttribute('aria-controls'));
    });
  });
});

/* 5) INPUTS ------------------------------------------------------- */
const promptInput  = $('#prompt');
const fileInput    = $('#reference‑file');
const urlInput     = $('#website‑url');
const webSearchChk = $('#web‑search');
const codeOut      = $('#code‑output');
const previewFrame = $('#preview');
const histList     = $('#history‑list');

/* 6) CLEAR SESSION ----------------------------------------------- */
$('#clear').addEventListener('click', () => {
  promptInput.value = '';
  fileInput.value   = '';
  urlInput.value    = '';
  codeOut.textContent   = '</>';
  previewFrame.srcdoc   = '';
  histList.innerHTML    = '';
});

/* 7) GENERATE ----------------------------------------------------- */
$('#generate').addEventListener('click', async () => {
  const prompt = promptInput.value.trim();
  if (!prompt) { alert('Please provide a prompt.'); return; }

  // build JSON payload
  const body = {
    prompt,
    model_id: modelSel.value,
    language: langSel.value,
    enable_search: webSearchChk.checked,
    website_url: urlInput.value || null
  };

  if (fileInput.files.length) {
    const f = fileInput.files[0];
    body.file_name = f.name;
    body.file_data = await f.text();      // send raw text; backend still trims to 5 000 chars
  }

  // UI state
  const genBtn = $('#generate');
  genBtn.disabled = true; genBtn.textContent = 'Generating…';

  try {
    const r = await fetch('/run/predict', {
      method : 'POST',
      headers: { 'Content-Type': 'application/json' },
      body   : JSON.stringify(body)
    });
    if (!r.ok) throw new Error(await r.text());
    const { data } = await r.json();      // ↳ Gradio wraps in {data:[…]}
    const [code] = data;

    codeOut.textContent = code;
    previewFrame.srcdoc = langSel.value === 'html'
      ? code
      : `<pre style="white-space:pre-wrap">${code.replace(/&/g,'&amp;').replace(/</g,'&lt;')}</pre>`;

    // history
    const li = document.createElement('li');
    li.textContent = `${new Date().toLocaleTimeString()}${prompt.slice(0,40)}…`;
    histList.prepend(li);

  } catch (err) {
    console.error(err);
    alert('Generation failed – check console / backend logs.');
  } finally {
    genBtn.disabled = false; genBtn.textContent = 'Generate Code';
  }
});