index.js

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 };