Spaces:
Sleeping
Sleeping
File size: 3,896 Bytes
f7a8d72 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | document.addEventListener('DOMContentLoaded', () => {
const textInput = document.getElementById('text-input');
const analyzeBtn = document.getElementById('analyze-btn');
const loader = document.getElementById('loader');
const resultContainer = document.getElementById('result-container');
const predictionBadge = document.getElementById('prediction-badge');
const predictionProb = document.getElementById('prediction-prob');
const confidenceFill = document.getElementById('confidence-fill');
const classScores = document.getElementById('class-scores');
const modelName = document.getElementById('model-name');
const CLASS_COLORS = {
Appropriate: '#2f855a',
Inappropriate: '#b7791f',
Offensive: '#b83280',
Violent: '#c53030'
};
analyzeBtn.addEventListener('click', async () => {
const text = textInput.value.trim();
if (!text) return;
analyzeBtn.disabled = true;
loader.classList.remove('hidden');
resultContainer.classList.add('hidden');
confidenceFill.style.width = '0%';
classScores.innerHTML = '';
try {
const response = await fetch('/api/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text })
});
const data = await response.json();
if (response.ok) {
displayResult(data);
} else {
alert(`Error: ${data.error || 'Something went wrong.'}`);
}
} catch (error) {
console.error('Error calling prediction API:', error);
alert('Failed to communicate with the server.');
} finally {
analyzeBtn.disabled = false;
loader.classList.add('hidden');
}
});
function displayResult(data) {
const topLabel = data.display_label || data.label;
const probPercentage = (data.probability * 100).toFixed(1);
const topColor = CLASS_COLORS[topLabel] || '#4a5568';
predictionBadge.textContent = topLabel;
predictionBadge.className = 'badge';
predictionBadge.style.backgroundColor = topColor;
predictionProb.textContent = `${probPercentage}%`;
confidenceFill.style.backgroundColor = topColor;
const fullModelName = data.model || '';
const shortModelName = fullModelName.includes('/') ? fullModelName.split('/').pop() : fullModelName;
modelName.textContent = shortModelName || '-';
classScores.innerHTML = '';
(data.classes || []).forEach((item) => {
const row = document.createElement('div');
row.className = 'class-row';
const label = document.createElement('span');
label.className = 'class-label';
label.textContent = item.display_label || item.label;
const barWrap = document.createElement('div');
barWrap.className = 'class-bar';
const barFill = document.createElement('div');
barFill.className = 'class-bar-fill';
barFill.style.backgroundColor = CLASS_COLORS[label.textContent] || '#4a5568';
barFill.style.width = `${(item.score * 100).toFixed(1)}%`;
barWrap.appendChild(barFill);
const score = document.createElement('span');
score.className = 'class-score';
score.textContent = `${(item.score * 100).toFixed(1)}%`;
row.appendChild(label);
row.appendChild(barWrap);
row.appendChild(score);
classScores.appendChild(row);
});
resultContainer.classList.remove('hidden');
setTimeout(() => {
confidenceFill.style.width = `${probPercentage}%`;
}, 50);
}
});
|