Update index.html

index.html

@@ -85,7 +85,7 @@
             <div class="text-center mb-8">
                 <div class="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin mx-auto mb-6"></div>
                 <p class="text-2xl font-semibold text-gray-100">Analyzing file</p>
-                <p class="text-gray-500 mt-2 text-sm">Running dual-model forensic analysis...</p>
+                <p class="text-gray-500 mt-2 text-sm">Running triple-model forensic analysis...</p>
             </div>
             <div class="w-full bg-gray-800 rounded-lg h-2.5 overflow-hidden">
                 <div id="progressBar" class="progress-bar bg-blue-600 h-2.5 w-0"></div>
@@ -98,7 +98,7 @@
             <div class="result-card rounded-2xl p-8 md:p-12">
 
                 <!-- Verdict -->
-                <div class="flex items-start mb-10">
+                <div class="flex items-start mb-6">
                     <div id="resultIcon" class="w-12 h-12 rounded-lg flex items-center justify-center text-xl mr-4 flex-shrink-0 mt-1"></div>
                     <div>
                         <h3 id="resultTitle" class="text-2xl font-bold text-gray-100"></h3>
@@ -106,6 +106,9 @@
                     </div>
                 </div>
 
+                <!-- Confidence warning -->
+                <div id="confidenceWarning" class="hidden mb-6 p-4 rounded-xl border text-sm font-medium"></div>
+
                 <!-- Authenticity / Fake scores -->
                 <div class="grid grid-cols-2 gap-4 mb-10">
                     <div class="text-center p-5 bg-gray-900/50 rounded-xl border border-gray-700">
@@ -118,18 +121,12 @@
                     </div>
                 </div>
 
-                <!-- ✅ NEW: Per-model breakdown -->
+                <!-- Model Breakdown -->
                 <div class="mb-10">
                     <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Model Breakdown</h4>
                     <div id="modelBreakdown" class="space-y-4"></div>
                 </div>
 
-                <!-- ✅ NEW: Raw label breakdown -->
-                <div class="mb-10">
-                    <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">Label Analysis</h4>
-                    <div id="labelBreakdown" class="space-y-3"></div>
-                </div>
-
                 <!-- Forensic details -->
                 <div class="p-5 bg-gray-900/50 rounded-xl border border-gray-700 mb-10 text-sm text-gray-400 space-y-2">
                     <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">Forensic Details</h4>
@@ -209,7 +206,7 @@ analyzeBtn.addEventListener('click', async () => {
 
     let progress = 0;
     const interval = setInterval(() => {
-        progress += 5;
+        progress += 3;
         if (progress > 90) progress = 90;
         document.getElementById('progressBar').style.width = progress + '%';
         document.getElementById('progressText').textContent = progress + '%';
@@ -247,9 +244,23 @@ function showResults(data) {
     section.scrollIntoView({ behavior: 'smooth' });
 
     const isAuthentic = data.authenticity > 50;
-
-    // Verdict
     const iconEl = document.getElementById('resultIcon');
+
+    // confidence warning
+    const warningEl = document.getElementById('confidenceWarning');
+    if (data.confidence_level === 'low') {
+        warningEl.classList.remove('hidden');
+        warningEl.className = 'mb-6 p-4 rounded-xl border text-sm font-medium bg-yellow-900/30 border-yellow-700 text-yellow-400';
+        warningEl.innerHTML = '<i class="fas fa-triangle-exclamation mr-2"></i>Low confidence — models could not confidently determine authenticity. Result may not be reliable.';
+    } else if (data.confidence_level === 'medium') {
+        warningEl.classList.remove('hidden');
+        warningEl.className = 'mb-6 p-4 rounded-xl border text-sm font-medium bg-blue-900/30 border-blue-700 text-blue-400';
+        warningEl.innerHTML = '<i class="fas fa-circle-info mr-2"></i>Medium confidence — result is moderately reliable.';
+    } else {
+        warningEl.classList.add('hidden');
+    }
+
+    // verdict
     if (isAuthentic) {
         iconEl.innerHTML = '<i class="fas fa-check text-green-500 text-2xl"></i>';
         document.getElementById('resultTitle').textContent = 'Authentic Media Detected';
@@ -260,33 +271,32 @@ function showResults(data) {
         document.getElementById('resultSubtitle').textContent = 'Signs of fabrication detected.';
     }
 
-    // Scores
+    // scores
     document.getElementById('scoreReal').textContent = Math.round(data.authenticity) + '%';
     document.getElementById('scoreFake').textContent = Math.round(data.fake) + '%';
 
-    // Forensic details
+    // forensic details
     document.getElementById('hashValue').textContent = data.sha256;
     document.getElementById('metadataRisk').textContent = data.details.metadata_risk;
     document.getElementById('modelsUsed').textContent = (data.models_used || []).join(', ');
 
-    // ✅ Per-model breakdown
+    // model breakdown — now 3 models
     const modelDiv = document.getElementById('modelBreakdown');
     modelDiv.innerHTML = '';
-    const localScore = data.details.local_score;
-    const cloudScore = data.details.cloud_score;
-
     [
-       { name: 'Ateeqq Detector', score: data.details.model1_score },
-{ name: 'prithivMLmods Detector', score: data.details.model2_score }
+        { name: 'Ateeqq Detector', score: data.details.model1_score },
+        { name: 'prithivMLmods Detector', score: data.details.model2_score },
+        { name: 'Groq Llama 4 Vision', score: data.details.groq_score }
     ].forEach(({ name, score }) => {
         const isUnavailable = score === 'unavailable' || score === null;
         const pct = isUnavailable ? 0 : Math.round(score * 100);
         const color = isUnavailable ? 'bg-gray-600' : score > 0.5 ? 'bg-red-500' : 'bg-green-500';
+        const textColor = isUnavailable ? 'text-gray-500' : score > 0.5 ? 'text-red-400' : 'text-green-400';
         modelDiv.innerHTML += `
             <div class="p-4 bg-gray-900/50 rounded-xl border border-gray-700">
                 <div class="flex justify-between items-center mb-2">
                     <span class="text-sm text-gray-300 font-medium">${name}</span>
-                    <span class="text-sm font-bold ${isUnavailable ? 'text-gray-500' : score > 0.5 ? 'text-red-400' : 'text-green-400'}">
+                    <span class="text-sm font-bold ${textColor}">
                         ${isUnavailable ? 'Unavailable' : pct + '% fake'}
                     </span>
                 </div>
@@ -295,22 +305,6 @@ function showResults(data) {
                 </div>
             </div>`;
     });
-
-    // ✅ Raw label breakdown from local model
-    const labelDiv = document.getElementById('labelBreakdown');
-    labelDiv.innerHTML = '';
-    const labels = data.details.local_model_labels || {};
-    Object.entries(labels).forEach(([label, prob]) => {
-        const pct = Math.round(prob * 100);
-        labelDiv.innerHTML += `
-            <div class="flex items-center gap-3">
-                <span class="text-gray-400 text-sm w-32 flex-shrink-0">${label}</span>
-                <div class="flex-1 bg-gray-800 rounded-full h-2">
-                    <div class="bg-blue-500 h-2 rounded-full" style="width: ${pct}%"></div>
-                </div>
-                <span class="text-gray-300 text-sm w-10 text-right">${pct}%</span>
-            </div>`;
-    });
 }
 
 // ---------------- RESET ----------------
@@ -323,6 +317,7 @@ function resetUI() {
     analyzeBtn.style.display = '';
     document.getElementById('progressBar').style.width = '0%';
     document.getElementById('progressText').textContent = '0%';
+    document.getElementById('confidenceWarning').classList.add('hidden');
     fileInput.value = '';
 }
 </script>