Update static/index.js

static/index.js

@@ -0,0 +1,78 @@
+// 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;
+});