| --- index.js --- | |
| ```javascript | |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers'; | |
| // Frontend copy of AVAILABLE_MODELS from constants.py | |
| 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" } | |
| ]; | |
| const modelSelect = document.getElementById('modelSelect'); | |
| const inputText = document.getElementById('inputText'); | |
| const resultSection = document.getElementById('result'); | |
| const analyzeButton = document.getElementById('analyzeButton'); | |
| let sentimentPipeline; | |
| // Populate dropdown | |
| AVAILABLE_MODELS.forEach(model => { | |
| const opt = document.createElement('option'); | |
| opt.value = model.id; | |
| opt.textContent = model.name; | |
| modelSelect.appendChild(opt); | |
| }); | |
| async function initPipeline(modelId) { | |
| analyzeButton.disabled = true; | |
| analyzeButton.textContent = 'Loading model...'; | |
| sentimentPipeline = await pipeline('sentiment-analysis', modelId); | |
| analyzeButton.textContent = 'Analyze Sentiment'; | |
| analyzeButton.disabled = false; | |
| } | |
| // Initialize with first model | |
| initPipeline(modelSelect.value); | |
| // Re-init on change | |
| modelSelect.addEventListener('change', () => { | |
| initPipeline(modelSelect.value); | |
| resultSection.textContent = ''; | |
| }); | |
| // Handle form submission | |
| document.getElementById('analyze-form').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[0]; | |
| resultSection.textContent = `Sentiment: ${label} (Confidence: ${(score*100).toFixed(2)}%)`; | |
| } catch (err) { | |
| resultSection.textContent = 'Error analyzing sentiment.'; | |
| } | |
| analyzeButton.textContent = 'Analyze Sentiment'; | |
| analyzeButton.disabled = false; | |
| }); |