Update index.js

index.js

@@ -1,8 +1,8 @@
---- index.js ---
-```javascript
+// index.js
+
 import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers';
 
-// Frontend copy of AVAILABLE_MODELS from constants.py
+// 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" },
@@ -16,55 +16,59 @@ const AVAILABLE_MODELS = [
   { name: "Qwen3-Coder-480B-A35B", id: "Qwen/Qwen3-Coder-480B-A35B-Instruct" }
 ];
 
-const modelSelect = document.getElementById('modelSelect');
-const inputText = document.getElementById('inputText');
-const resultSection = document.getElementById('result');
+const modelSelect   = document.getElementById('modelSelect');
+const analyzeForm   = document.getElementById('analyze-form');
+const inputText     = document.getElementById('inputText');
 const analyzeButton = document.getElementById('analyzeButton');
-let sentimentPipeline;
+const resultSection = document.getElementById('result');
+
+let sentimentPipeline = null;
 
-// Populate dropdown
+// Populate the model dropdown
 AVAILABLE_MODELS.forEach(model => {
-  const opt = document.createElement('option');
-  opt.value = model.id;
-  opt.textContent = model.name;
-  modelSelect.appendChild(opt);
+  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...';
+  analyzeButton.textContent = 'Loading model…';
   sentimentPipeline = await pipeline('sentiment-analysis', modelId);
   analyzeButton.textContent = 'Analyze Sentiment';
   analyzeButton.disabled = false;
 }
 
-// Initialize with first model
+// On page load: initialize with the first model
 initPipeline(modelSelect.value);
 
-// Re-init on change
+// When user changes model: reinitialize pipeline
 modelSelect.addEventListener('change', () => {
-  initPipeline(modelSelect.value);
   resultSection.textContent = '';
+  initPipeline(modelSelect.value);
 });
 
 // Handle form submission
-document.getElementById('analyze-form').addEventListener('submit', async event => {
+analyzeForm.addEventListener('submit', async (event) => {
   event.preventDefault();
   const text = inputText.value.trim();
   if (!text) return;
 
   analyzeButton.disabled = true;
-  analyzeButton.textContent = 'Analyzing...';
+  analyzeButton.textContent = 'Analyzing…';
   resultSection.textContent = '';
 
   try {
-    const output = await sentimentPipeline(text);
-    const { label, score } = output[0];
-    resultSection.textContent = `Sentiment: ${label} (Confidence: ${(score*100).toFixed(2)}%)`;
+    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;
-});
+});