Update index.html

index.html

@@ -70,7 +70,10 @@
             <!-- Preview -->
             <div id="previewSection" class="hidden mb-8 p-6 bg-gray-900/50 rounded-xl">
                 <div class="flex flex-col lg:flex-row gap-6 items-start">
-                    <img id="previewImg" class="flex-1 max-h-80 object-contain rounded-lg shadow-md mx-auto lg:mx-0" alt="Preview">
+                    <!-- image preview -->
+                    <img id="previewImg" class="hidden flex-1 max-h-80 object-contain rounded-lg shadow-md mx-auto lg:mx-0" alt="Preview">
+                    <!-- video preview -->
+                    <video id="previewVideo" class="hidden flex-1 max-h-80 rounded-lg shadow-md mx-auto lg:mx-0" controls muted></video>
                     <div id="fileInfo" class="flex-1 min-w-0"></div>
                 </div>
             </div>
@@ -85,7 +88,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 forensic analysis with Groq Llama 4 Vision...</p>
+                <p id="progressLabel" 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,7 +130,7 @@
                     <div id="modelBreakdown" class="space-y-4"></div>
                 </div>
 
-                <!-- Groq Reasoning -->
+                <!-- AI 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>
@@ -137,7 +140,10 @@
                 <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>
                     <p><span class="text-gray-500">SHA256:</span> <span id="hashValue" class="font-mono text-xs break-all"></span></p>
-                    <p><span class="text-gray-500">Metadata Risk:</span> <span id="metadataRisk"></span></p>
+                    <p id="metadataRiskRow"><span class="text-gray-500">Metadata Risk:</span> <span id="metadataRisk"></span></p>
+                    <!-- video only -->
+                    <p id="framesRow" class="hidden"><span class="text-gray-500">Frames Analyzed:</span> <span id="framesAnalyzed"></span></p>
+                    <p id="durationRow" class="hidden"><span class="text-gray-500">Video Duration:</span> <span id="videoDuration"></span></p>
                     <p><span class="text-gray-500">Models Used:</span> <span id="modelsUsed"></span></p>
                 </div>
 
@@ -178,17 +184,40 @@ function handleFiles(files) {
 
 function showPreview(file) {
     const url = URL.createObjectURL(file);
-    document.getElementById('previewImg').src = url;
+    const isVideo = file.type.startsWith('video/');
+
+    const imgEl = document.getElementById('previewImg');
+    const videoEl = document.getElementById('previewVideo');
+
+    if (isVideo) {
+        imgEl.classList.add('hidden');
+        videoEl.classList.remove('hidden');
+        videoEl.src = url;
+    } else {
+        videoEl.classList.add('hidden');
+        imgEl.classList.remove('hidden');
+        imgEl.src = url;
+    }
+
     document.getElementById('fileInfo').innerHTML = `
         <div class="space-y-2">
             <div class="flex items-center text-sm">
-                <i class="fas fa-image mr-2 text-blue-400"></i>
+                <i class="fas fa-${isVideo ? 'video' : 'image'} mr-2 text-blue-400"></i>
                 <span class="font-semibold text-gray-200 truncate">${file.name}</span>
             </div>
             <p class="text-gray-500 text-sm">${formatBytes(file.size)}</p>
+            ${isVideo ? '<p class="text-yellow-400 text-xs mt-2"><i class="fas fa-clock mr-1"></i>Video analysis takes ~30-60s (5 frames)</p>' : ''}
         </div>`;
+
     document.getElementById('previewSection').classList.remove('hidden');
     analyzeBtn.classList.remove('hidden');
+
+    // update progress label for video
+    if (isVideo) {
+        document.getElementById('progressLabel').textContent = 'Analyzing 5 key frames with Groq Llama 4 Vision...';
+    } else {
+        document.getElementById('progressLabel').textContent = 'Running forensic analysis with Groq Llama 4 Vision...';
+    }
 }
 
 function formatBytes(bytes) {
@@ -207,9 +236,11 @@ analyzeBtn.addEventListener('click', async () => {
     analyzeBtn.style.display = 'none';
     document.getElementById('progressSection').classList.remove('hidden');
 
+    // video takes longer so slower progress
+    const isVideo = file.type.startsWith('video/');
     let progress = 0;
     const interval = setInterval(() => {
-        progress += 3;
+        progress += isVideo ? 1 : 3;
         if (progress > 90) progress = 90;
         document.getElementById('progressBar').style.width = progress + '%';
         document.getElementById('progressText').textContent = progress + '%';
@@ -246,6 +277,7 @@ function showResults(data) {
     section.scrollIntoView({ behavior: 'smooth' });
 
     const isAuthentic = data.authenticity > 50;
+    const isVideo = data.type === 'video';
     const iconEl = document.getElementById('resultIcon');
 
     // confidence warning
@@ -265,21 +297,34 @@ function showResults(data) {
     // verdict
     if (isAuthentic) {
         iconEl.innerHTML = '<i class="fas fa-check text-green-500 text-2xl"></i>';
-        document.getElementById('resultTitle').textContent = 'Authentic Media Detected';
+        document.getElementById('resultTitle').textContent = isVideo ? 'Authentic Video Detected' : 'Authentic Media Detected';
         document.getElementById('resultSubtitle').textContent = 'No synthetic manipulation found.';
     } else {
         iconEl.innerHTML = '<i class="fas fa-triangle-exclamation text-orange-500 text-2xl"></i>';
-        document.getElementById('resultTitle').textContent = 'Potential Deepfake Detected';
+        document.getElementById('resultTitle').textContent = isVideo ? 'Potential Deepfake Video Detected' : 'Potential Deepfake Detected';
         document.getElementById('resultSubtitle').textContent = 'Signs of fabrication detected.';
     }
 
     document.getElementById('scoreReal').textContent = Math.round(data.authenticity) + '%';
     document.getElementById('scoreFake').textContent = Math.round(data.fake) + '%';
     document.getElementById('hashValue').textContent = data.sha256;
-    document.getElementById('metadataRisk').textContent = data.details.metadata_risk;
     document.getElementById('modelsUsed').textContent = (data.models_used || []).join(', ');
 
-    // only Groq in model breakdown
+    // forensic details — different for video vs image
+    if (isVideo) {
+        document.getElementById('metadataRiskRow').classList.add('hidden');
+        document.getElementById('framesRow').classList.remove('hidden');
+        document.getElementById('durationRow').classList.remove('hidden');
+        document.getElementById('framesAnalyzed').textContent = data.details.frames_analyzed + ' frames';
+        document.getElementById('videoDuration').textContent = data.details.video_duration + 's';
+    } else {
+        document.getElementById('metadataRiskRow').classList.remove('hidden');
+        document.getElementById('framesRow').classList.add('hidden');
+        document.getElementById('durationRow').classList.add('hidden');
+        document.getElementById('metadataRisk').textContent = data.details.metadata_risk;
+    }
+
+    // model breakdown
     const modelDiv = document.getElementById('modelBreakdown');
     modelDiv.innerHTML = '';
     const score = data.details.groq_score;
@@ -292,6 +337,7 @@ function showResults(data) {
             <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
+                    ${isVideo ? '<span class="ml-2 text-xs text-gray-500">(avg of 5 frames)</span>' : ''}
                 </span>
                 <span class="text-sm font-bold ${textColor}">
                     ${isUnavailable ? 'Unavailable' : pct + '% fake'}
@@ -302,7 +348,7 @@ function showResults(data) {
             </div>
         </div>`;
 
-    // show groq reasoning if available
+    // AI reasoning
     if (data.details.groq_reasoning) {
         document.getElementById('groqReasoningSection').classList.remove('hidden');
         document.getElementById('groqReasoning').textContent = data.details.groq_reasoning;
@@ -322,6 +368,8 @@ function resetUI() {
     document.getElementById('progressText').textContent = '0%';
     document.getElementById('confidenceWarning').classList.add('hidden');
     document.getElementById('groqReasoningSection').classList.add('hidden');
+    document.getElementById('previewImg').classList.add('hidden');
+    document.getElementById('previewVideo').classList.add('hidden');
     fileInput.value = '';
 }
 </script>