Update static/index.js

static/index.js

@@ -1,78 +1,55 @@
-// 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;
+/* highlight the active section in the sidebar (if you add one) */
+section[aria-labelledby] {
+  position: relative;
+}
+section[aria-labelledby]::before {
+  content: attr(aria-labelledby);
+  position: absolute;
+  top: -1.2rem;
+  left: 0;
+  font-size: 0.85rem;
+  color: var(--text-muted);
 }
 
-// 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;
+/* smooth fade‑in for panels */
+[role="tabpanel"] {
+  animation: fadeIn 0.3s ease both;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
 
-  analyzeButton.disabled = true;
-  analyzeButton.textContent = 'Analyzing…';
-  resultSection.textContent = '';
+/* custom scrollbar for code output */
+pre::-webkit-scrollbar,
+code::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+pre::-webkit-scrollbar-thumb,
+code::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: var(--radius);
+}
+pre::-webkit-scrollbar-track,
+code::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
 
-  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.';
-  }
+/* pulse animation for generate button when disabled/loading */
+@keyframes pulse {
+  0%,100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+button:disabled {
+  cursor: wait;
+  animation: pulse 1s infinite;
+}
 
-  analyzeButton.textContent = 'Analyze Sentiment';
-  analyzeButton.disabled = false;
-});
+/* small icon styling (if you add logos) */
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: middle;
+  margin-right: 0.25rem;
+}