File size: 5,011 Bytes
622a0b7 | 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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | document.addEventListener('DOMContentLoaded', () => {
const claimInput = document.getElementById('claimInput');
const verifyBtn = document.getElementById('verifyBtn');
const resultSection = document.getElementById('resultSection');
const loadingOverlay = document.getElementById('loadingOverlay');
const loadingText = document.getElementById('loadingText');
const charCount = document.getElementById('charCount');
// Stats Elements
const resultLabel = document.getElementById('resultLabel');
const confidenceScore = document.getElementById('confidenceScore');
const confidenceCircle = document.getElementById('confidenceCircle');
const evidenceList = document.getElementById('evidenceList');
const resultBar = document.getElementById('resultBar');
// Character Count
claimInput.addEventListener('input', () => {
const len = claimInput.value.length;
charCount.textContent = len;
if (len > 500) {
charCount.classList.add('text-red-500');
verifyBtn.disabled = true;
verifyBtn.classList.add('opacity-50', 'cursor-not-allowed');
} else {
charCount.classList.remove('text-red-500');
verifyBtn.disabled = false;
verifyBtn.classList.remove('opacity-50', 'cursor-not-allowed');
}
});
// Verification Logic
verifyBtn.addEventListener('click', async () => {
const claim = claimInput.value.trim();
if (!claim) {
alert('Please enter a claim to verify.');
return;
}
// Show Loading
loadingOverlay.classList.remove('hidden');
resultSection.classList.add('hidden');
// Animated Loading Text
const steps = [
"Extracting Facutal Claims...",
"Scanning Knowledge Base...",
"Retrieving Global Evidence...",
"Running NLI Models...",
"Calculating Consensus..."
];
let stepIndex = 0;
const interval = setInterval(() => {
if(stepIndex < steps.length) {
loadingText.textContent = steps[stepIndex];
stepIndex++;
}
}, 800);
try {
const response = await fetch('/api/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ claim: claim })
});
clearInterval(interval);
const data = await response.json();
if (data.error) {
throw new Error(data.error);
}
// Update UI with results
displayResults(data);
} catch (error) {
clearInterval(interval);
alert('Error: ' + error.message);
} finally {
loadingOverlay.classList.add('hidden');
}
});
function displayResults(data) {
resultSection.classList.remove('hidden');
// 1. Label
resultLabel.textContent = data.label;
// Color coding
let colorClass = 'text-gray-400';
let barColor = 'bg-gray-400';
let strokeColor = 'text-gray-400';
if (data.label.toLowerCase() === 'true') {
colorClass = 'text-neon-green';
barColor = 'bg-green-500';
strokeColor = 'text-green-500';
resultLabel.style.color = '#4ade80'; // Tailwind green-400
} else if (data.label.toLowerCase() === 'false') {
colorClass = 'text-neon-red';
barColor = 'bg-red-500';
strokeColor = 'text-red-500';
resultLabel.style.color = '#f87171'; // Tailwind red-400
} else {
resultLabel.style.color = '#fbbf24'; // Tailwind amber-400
barColor = 'bg-amber-400';
strokeColor = 'text-amber-400';
}
resultBar.className = `absolute top-0 left-0 w-1 h-full ${barColor}`;
confidenceCircle.setAttribute('class', strokeColor);
// 2. Confidence
const percentage = Math.round(data.confidence * 100);
confidenceScore.textContent = `${percentage}%`;
// Animate Circle
// C = 2 * pi * r = 2 * 3.14159 * 28 ≈ 175.9
const circumference = 175.9;
const offset = circumference - (data.confidence * circumference);
confidenceCircle.style.strokeDasharray = `${circumference} ${circumference}`;
confidenceCircle.style.strokeDashoffset = offset;
// 3. Evidence
// Format markdown-like evidence summary
const formattedEvidence = data.evidence
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\n/g, '<br>');
evidenceList.innerHTML = formattedEvidence;
// Scroll to results
resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
|