File size: 2,937 Bytes
71e0415
 
7794234
b31737a
 
 
 
 
 
 
 
 
 
f70a193
 
7794234
 
b31737a
 
7794234
a2648f3
7794234
 
 
a2648f3
7794234
03bbb65
7794234
 
 
 
 
 
 
 
 
b31737a
7794234
b31737a
7794234
 
 
 
 
03bbb65
 
7794234
 
 
 
03bbb65
7794234
 
 
03bbb65
 
7794234
 
 
 
 
b31737a
a2648f3
7794234
03bbb65
 
7794234
 
 
 
 
 
 
 
 
 
 
 
 
a2648f3
7794234
 
 
 
 
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
import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';

// Front-end copy of the available models for dropdown
const AVAILABLE_MODELS = [
  { name: "Moonshot Kimi-K2", id: "moonshotai/Kimi-K2-Instruct" },
  { 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: "OpenAI GPT-4", id: "openai/gpt-4" },
  { name: "Gemini Pro", id: "gemini/pro" },
  { name: "Fireworks AI", id: "fireworks-ai/fireworks-v1" }
];

// DOM Elements
const modelSelect   = document.getElementById('modelSelect');
const promptInput   = document.getElementById('promptInput');
const generateBtn   = document.getElementById('generateBtn');
const codeOutput    = document.getElementById('codeOutput');

let codePipeline = null;

// Populate model dropdown
function populateModels() {
  AVAILABLE_MODELS.forEach(model => {
    const option = document.createElement('option');
    option.value = model.id;
    option.textContent = model.name;
    modelSelect.appendChild(option);
  });
}

// Initialize pipeline for code generation
async function initPipeline(modelId) {
  generateBtn.disabled = true;
  generateBtn.textContent = 'Loading model…';
  codePipeline = await pipeline('text-generation', modelId, { trustRemoteCode: true });
  generateBtn.textContent = 'Generate Code';
  generateBtn.disabled = false;
}

// Handle generation
async function handleGenerate() {
  const prompt = promptInput.value.trim();
  if (!prompt) return;

  generateBtn.disabled = true;
  generateBtn.textContent = 'Generating…';
  codeOutput.textContent = '';

  try {
    const outputs = await codePipeline(prompt, { max_new_tokens: 512 });
    const generated = Array.isArray(outputs)
      ? outputs.map(o => o.generated_text).join('')
      : outputs.generated_text;
    codeOutput.textContent = generated;
  } catch (err) {
    console.error(err);
    codeOutput.textContent = 'Error generating code.';
  }

  generateBtn.textContent = 'Generate Code';
  generateBtn.disabled = false;
}

// Event bindings
window.addEventListener('DOMContentLoaded', async () => {
  populateModels();
  await initPipeline(modelSelect.value);
});

modelSelect.addEventListener('change', () => {
  codeOutput.textContent = '';
  initPipeline(modelSelect.value);
});

generateBtn.addEventListener('click', handleGenerate);

// Expose functions (for debugging)
window._codeApp = { initPipeline, handleGenerate };