Update static/index.js
Browse files- static/index.js +50 -73
static/index.js
CHANGED
@@ -1,78 +1,55 @@
|
|
1 |
-
|
2 |
-
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
{ name: "Qwen3‑235B‑A22B", id: "Qwen/Qwen3‑235B‑A22B" },
|
13 |
-
{ name: "Qwen3‑235B‑A22B‑Instruct‑2507", id: "Qwen/Qwen3‑235B‑A22B‑Instruct‑2507" },
|
14 |
-
{ name: "Qwen3‑Coder‑480B‑A35B", id: "Qwen/Qwen3‑Coder‑480B‑A35B‑Instruct" },
|
15 |
-
{ name: "Qwen3‑32B", id: "Qwen/Qwen3‑32B" },
|
16 |
-
{ name: "SmolLM3‑3B", id: "HuggingFaceTB/SmolLM3‑3B" },
|
17 |
-
{ name: "GLM‑4.1V‑9B‑Thinking", id: "THUDM/GLM‑4.1V‑9B‑Thinking" },
|
18 |
-
{ name: "OpenAI GPT‑4", id: "openai/gpt‑4" },
|
19 |
-
{ name: "Gemini Pro", id: "gemini/pro" },
|
20 |
-
{ name: "Fireworks AI", id: "fireworks‑ai/fireworks‑v1" }
|
21 |
-
];
|
22 |
-
|
23 |
-
const modelSelect = document.getElementById('modelSelect');
|
24 |
-
const analyzeForm = document.getElementById('analyze-form');
|
25 |
-
const inputText = document.getElementById('inputText');
|
26 |
-
const analyzeButton = document.getElementById('analyzeButton');
|
27 |
-
const resultSection = document.getElementById('result');
|
28 |
-
|
29 |
-
let sentimentPipeline = null;
|
30 |
-
|
31 |
-
// Populate the model dropdown
|
32 |
-
AVAILABLE_MODELS.forEach(model => {
|
33 |
-
const option = document.createElement('option');
|
34 |
-
option.value = model.id;
|
35 |
-
option.textContent = model.name;
|
36 |
-
modelSelect.appendChild(option);
|
37 |
-
});
|
38 |
-
|
39 |
-
// Initialize pipeline for the selected model
|
40 |
-
async function initPipeline(modelId) {
|
41 |
-
analyzeButton.disabled = true;
|
42 |
-
analyzeButton.textContent = 'Loading model…';
|
43 |
-
sentimentPipeline = await pipeline('sentiment-analysis', modelId);
|
44 |
-
analyzeButton.textContent = 'Analyze Sentiment';
|
45 |
-
analyzeButton.disabled = false;
|
46 |
}
|
47 |
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
}
|
56 |
-
|
57 |
-
// Handle form submission
|
58 |
-
analyzeForm.addEventListener('submit', async (event) => {
|
59 |
-
event.preventDefault();
|
60 |
-
const text = inputText.value.trim();
|
61 |
-
if (!text) return;
|
62 |
|
63 |
-
|
64 |
-
|
65 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
66 |
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
|
|
75 |
|
76 |
-
|
77 |
-
|
78 |
-
|
|
|
|
|
|
|
|
|
|
1 |
+
/* highlight the active section in the sidebar (if you add one) */
|
2 |
+
section[aria-labelledby] {
|
3 |
+
position: relative;
|
4 |
+
}
|
5 |
+
section[aria-labelledby]::before {
|
6 |
+
content: attr(aria-labelledby);
|
7 |
+
position: absolute;
|
8 |
+
top: -1.2rem;
|
9 |
+
left: 0;
|
10 |
+
font-size: 0.85rem;
|
11 |
+
color: var(--text-muted);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
}
|
13 |
|
14 |
+
/* smooth fade‑in for panels */
|
15 |
+
[role="tabpanel"] {
|
16 |
+
animation: fadeIn 0.3s ease both;
|
17 |
+
}
|
18 |
+
@keyframes fadeIn {
|
19 |
+
from { opacity: 0; transform: translateY(4px); }
|
20 |
+
to { opacity: 1; transform: translateY(0); }
|
21 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
|
23 |
+
/* custom scrollbar for code output */
|
24 |
+
pre::-webkit-scrollbar,
|
25 |
+
code::-webkit-scrollbar {
|
26 |
+
width: 8px;
|
27 |
+
height: 8px;
|
28 |
+
}
|
29 |
+
pre::-webkit-scrollbar-thumb,
|
30 |
+
code::-webkit-scrollbar-thumb {
|
31 |
+
background-color: var(--border);
|
32 |
+
border-radius: var(--radius);
|
33 |
+
}
|
34 |
+
pre::-webkit-scrollbar-track,
|
35 |
+
code::-webkit-scrollbar-track {
|
36 |
+
background: var(--bg-secondary);
|
37 |
+
}
|
38 |
|
39 |
+
/* pulse animation for generate button when disabled/loading */
|
40 |
+
@keyframes pulse {
|
41 |
+
0%,100% { opacity: 1; }
|
42 |
+
50% { opacity: 0.6; }
|
43 |
+
}
|
44 |
+
button:disabled {
|
45 |
+
cursor: wait;
|
46 |
+
animation: pulse 1s infinite;
|
47 |
+
}
|
48 |
|
49 |
+
/* small icon styling (if you add logos) */
|
50 |
+
.icon {
|
51 |
+
width: 1.25rem;
|
52 |
+
height: 1.25rem;
|
53 |
+
vertical-align: middle;
|
54 |
+
margin-right: 0.25rem;
|
55 |
+
}
|