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 triple-model forensic analysis...</p>
+                <p class="text-gray-500 mt-2 text-sm">Running forensic analysis with Groq Llama 4 Vision...</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>
@@ -127,6 +127,12 @@
                     <div id="modelBreakdown" class="space-y-4"></div>
                 </div>
 
+                <!-- Groq Reasoning -->
+                <div id="groqReasoningSection" class="hidden mb-10">
+                    <h4 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">AI Reasoning</h4>
+                    <div id="groqReasoning" class="p-4 bg-gray-900/50 rounded-xl border border-gray-700 text-sm text-gray-300 leading-relaxed"></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>
@@ -155,7 +161,6 @@ const uploadArea = document.getElementById('uploadArea');
 const fileInput = document.getElementById('fileInput');
 const analyzeBtn = document.getElementById('analyzeBtn');
 
-// ---------------- DRAG & DROP ----------------
 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
     uploadArea.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); });
 });
@@ -164,7 +169,6 @@ const analyzeBtn = document.getElementById('analyzeBtn');
 uploadArea.addEventListener('drop', e => handleFiles(e.dataTransfer.files));
 fileInput.addEventListener('change', e => handleFiles(e.target.files));
 
-// ---------------- FILE HANDLING ----------------
 function handleFiles(files) {
     if (!files.length) return;
     const file = files[0];
@@ -194,7 +198,6 @@ function formatBytes(bytes) {
     return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
 }
 
-// ---------------- ANALYZE ----------------
 analyzeBtn.addEventListener('click', async () => {
     const file = fileInput.files[0];
     if (!file) return;
@@ -237,7 +240,6 @@ analyzeBtn.addEventListener('click', async () => {
     }
 });
 
-// ---------------- SHOW RESULTS ----------------
 function showResults(data) {
     const section = document.getElementById('resultsSection');
     section.classList.remove('hidden');
@@ -251,7 +253,7 @@ function showResults(data) {
     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.';
+        warningEl.innerHTML = '<i class="fas fa-triangle-exclamation mr-2"></i>Low confidence — model 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';
@@ -271,43 +273,44 @@ function showResults(data) {
         document.getElementById('resultSubtitle').textContent = 'Signs of fabrication detected.';
     }
 
-    // scores
     document.getElementById('scoreReal').textContent = Math.round(data.authenticity) + '%';
     document.getElementById('scoreFake').textContent = Math.round(data.fake) + '%';
-
-    // forensic details
     document.getElementById('hashValue').textContent = data.sha256;
     document.getElementById('metadataRisk').textContent = data.details.metadata_risk;
     document.getElementById('modelsUsed').textContent = (data.models_used || []).join(', ');
 
-    // model breakdown — now 3 models
+    // only Groq in model breakdown
     const modelDiv = document.getElementById('modelBreakdown');
     modelDiv.innerHTML = '';
-    [
-        { 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 ${textColor}">
-                        ${isUnavailable ? 'Unavailable' : pct + '% fake'}
-                    </span>
-                </div>
-                <div class="w-full bg-gray-800 rounded-full h-2">
-                    <div class="${color} h-2 rounded-full transition-all" style="width: ${pct}%"></div>
-                </div>
-            </div>`;
-    });
+    const score = data.details.groq_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">
+                    <i class="fas fa-brain mr-2 text-orange-400"></i>Groq Llama 4 Vision
+                </span>
+                <span class="text-sm font-bold ${textColor}">
+                    ${isUnavailable ? 'Unavailable' : pct + '% fake'}
+                </span>
+            </div>
+            <div class="w-full bg-gray-800 rounded-full h-2">
+                <div class="${color} h-2 rounded-full transition-all" style="width: ${pct}%"></div>
+            </div>
+        </div>`;
+
+    // show groq reasoning if available
+    if (data.details.groq_reasoning) {
+        document.getElementById('groqReasoningSection').classList.remove('hidden');
+        document.getElementById('groqReasoning').textContent = data.details.groq_reasoning;
+    } else {
+        document.getElementById('groqReasoningSection').classList.add('hidden');
+    }
 }
 
-// ---------------- RESET ----------------
 function resetUI() {
     document.getElementById('resultsSection').classList.add('hidden');
     document.getElementById('uploadArea').style.display = 'block';
@@ -318,6 +321,7 @@ function resetUI() {
     document.getElementById('progressBar').style.width = '0%';
     document.getElementById('progressText').textContent = '0%';
     document.getElementById('confidenceWarning').classList.add('hidden');
+    document.getElementById('groqReasoningSection').classList.add('hidden');
     fileInput.value = '';
 }
 </script>