index.js

// index.js

import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';

// Front‑end copy of the Python AVAILABLE_MODELS list for dropdown population:
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: "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: "SmolLM3‑3B",                     id: "HuggingFaceTB/SmolLM3‑3B" },
  { name: "GLM‑4.1V‑9B‑Thinking",           id: "THUDM/GLM‑4.1V‑9B‑Thinking" },
  { name: "OpenAI GPT‑4",                   id: "openai/gpt‑4" },
  { name: "Gemini Pro",                     id: "gemini/pro" },
  { name: "Fireworks AI",                   id: "fireworks‑ai/fireworks‑v1" }
];

const modelSelect   = document.getElementById('modelSelect');
const analyzeForm   = document.getElementById('analyze-form');
const inputText     = document.getElementById('inputText');
const analyzeButton = document.getElementById('analyzeButton');
const resultSection = document.getElementById('result');

let sentimentPipeline = null;

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

// Initialize pipeline for the selected model
async function initPipeline(modelId) {
  analyzeButton.disabled = true;
  analyzeButton.textContent = 'Loading model…';
  sentimentPipeline = await pipeline('sentiment-analysis', modelId);
  analyzeButton.textContent = 'Analyze Sentiment';
  analyzeButton.disabled = false;
}

// On page load: initialize with the first model
initPipeline(modelSelect.value);

// When user changes model: reinitialize pipeline
modelSelect.addEventListener('change', () => {
  resultSection.textContent = '';
  initPipeline(modelSelect.value);
});

// Handle form submission
analyzeForm.addEventListener('submit', async (event) => {
  event.preventDefault();
  const text = inputText.value.trim();
  if (!text) return;

  analyzeButton.disabled = true;
  analyzeButton.textContent = 'Analyzing…';
  resultSection.textContent = '';

  try {
    const [output] = await sentimentPipeline(text);
    const { label, score } = output;
    resultSection.textContent = `Sentiment: ${label} (Confidence: ${(score * 100).toFixed(2)}%)`;
  } catch (err) {
    console.error(err);
    resultSection.textContent = 'Error analyzing sentiment.';
  }

  analyzeButton.textContent = 'Analyze Sentiment';
  analyzeButton.disabled = false;
});