Update index.html

index.html

@@ -19,11 +19,10 @@
             border-color: #3b82f6;
             background: rgba(59, 130, 246, 0.05);
         }
-        .result-card {
-            background: rgba(17, 24, 39, 0.95);
-            backdrop-filter: blur(10px);
-        }
+        .result-card { background: rgba(17, 24, 39, 0.95); backdrop-filter: blur(10px); }
         .progress-bar { transition: width 0.3s ease; }
+        .tab-btn { transition: all 0.2s ease; }
+        .tab-btn.active { background: #2563eb; color: white; }
         main { min-height: calc(100vh - 200px); }
     </style>
 </head>
@@ -46,49 +45,107 @@
 
     <!-- Main Content -->
     <main class="max-w-4xl mx-auto px-4 py-12 pb-24 flex-grow">
-        <div class="text-center mb-16">
+        <div class="text-center mb-12">
             <h2 class="text-3xl md:text-4xl font-bold mb-4 text-gray-100">Deepfake Detection</h2>
             <p class="text-lg text-gray-400 max-w-2xl mx-auto">
-                Upload image or video for forensic analysis using advanced AI models.
+                Forensic analysis of images, videos, text, and documents using advanced AI models.
             </p>
         </div>
 
-        <!-- Upload Section -->
-        <div id="uploadSection" class="result-card rounded-2xl p-8 md:p-12 mb-12 shadow-xl">
-            <div id="uploadArea" class="upload-area rounded-xl p-12 text-center cursor-pointer mb-8 hover:border-gray-400 transition-colors"
-                 onclick="document.getElementById('fileInput').click()">
-                <i class="fas fa-cloud-arrow-up text-4xl text-gray-500 mb-6"></i>
-                <h3 class="text-xl font-semibold mb-3 text-gray-200">Drop file here or click to browse</h3>
-                <p class="text-gray-500 mb-8">Supports JPG, PNG, MP4 (max 50MB)</p>
-                <div class="flex justify-center space-x-6 text-sm text-gray-500">
-                    <span><i class="fas fa-image mr-1"></i> Image</span>
-                    <span><i class="fas fa-video mr-1"></i> Video</span>
+        <!-- Tabs -->
+        <div class="flex gap-2 mb-8 p-1 bg-gray-900/50 rounded-xl border border-gray-800">
+            <button onclick="switchTab('media')" id="tab-media" class="tab-btn active flex-1 py-3 px-4 rounded-lg text-sm font-medium">
+                <i class="fas fa-photo-film mr-2"></i>Image / Video
+            </button>
+            <button onclick="switchTab('text')" id="tab-text" class="tab-btn flex-1 py-3 px-4 rounded-lg text-sm font-medium text-gray-400">
+                <i class="fas fa-align-left mr-2"></i>Text
+            </button>
+            <button onclick="switchTab('pdf')" id="tab-pdf" class="tab-btn flex-1 py-3 px-4 rounded-lg text-sm font-medium text-gray-400">
+                <i class="fas fa-file-pdf mr-2"></i>PDF / Document
+            </button>
+        </div>
+
+        <!-- ======= MEDIA TAB ======= -->
+        <div id="panel-media">
+            <div id="uploadSection" class="result-card rounded-2xl p-8 md:p-12 mb-12 shadow-xl">
+                <div id="uploadArea" class="upload-area rounded-xl p-12 text-center cursor-pointer mb-8 hover:border-gray-400 transition-colors"
+                     onclick="document.getElementById('fileInput').click()">
+                    <i class="fas fa-cloud-arrow-up text-4xl text-gray-500 mb-6"></i>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-200">Drop file here or click to browse</h3>
+                    <p class="text-gray-500 mb-8">Supports JPG, PNG, MP4 (max 50MB)</p>
+                    <div class="flex justify-center space-x-6 text-sm text-gray-500">
+                        <span><i class="fas fa-image mr-1"></i> Image</span>
+                        <span><i class="fas fa-video mr-1"></i> Video</span>
+                    </div>
+                </div>
+                <input type="file" id="fileInput" accept="image/*,video/*" class="hidden">
+
+                <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="hidden flex-1 max-h-80 object-contain rounded-lg shadow-md mx-auto lg:mx-0" alt="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>
+
+                <button id="analyzeBtn" class="hidden w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-4 px-8 rounded-xl text-lg transition-colors">
+                    <i class="fas fa-magnifying-glass mr-2"></i>Analyze for Deepfakes
+                </button>
             </div>
-            <input type="file" id="fileInput" accept="image/*,video/*" class="hidden">
-
-            <!-- 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">
-                    <!-- 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>
+
+        <!-- ======= TEXT TAB ======= -->
+        <div id="panel-text" class="hidden">
+            <div class="result-card rounded-2xl p-8 md:p-12 mb-12 shadow-xl">
+                <h3 class="text-lg font-semibold text-gray-200 mb-2">Paste Text to Analyze</h3>
+                <p class="text-gray-500 text-sm mb-6">Works for news articles, social media posts, government notices, or any written content.</p>
+                <textarea id="textInput" rows="10"
+                    class="w-full bg-gray-900 border border-gray-700 rounded-xl p-4 text-gray-200 text-sm resize-none focus:outline-none focus:border-blue-500 transition-colors"
+                    placeholder="Paste your text here... (news article, government document, social media post, etc.)"></textarea>
+                <div class="flex justify-between items-center mt-3 mb-6">
+                    <span id="charCount" class="text-xs text-gray-500">0 characters</span>
+                    <span class="text-xs text-gray-500">Max 4000 characters analyzed</span>
                 </div>
+                <button id="analyzeTextBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-4 px-8 rounded-xl text-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                    <i class="fas fa-magnifying-glass mr-2"></i>Analyze Text
+                </button>
             </div>
+        </div>
 
-            <button id="analyzeBtn" class="hidden w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-4 px-8 rounded-xl text-lg transition-colors">
-                Analyze for Deepfakes
-            </button>
+        <!-- ======= PDF TAB ======= -->
+        <div id="panel-pdf" class="hidden">
+            <div class="result-card rounded-2xl p-8 md:p-12 mb-12 shadow-xl">
+                <div id="pdfUploadArea" class="upload-area rounded-xl p-12 text-center cursor-pointer mb-8 hover:border-gray-400 transition-colors"
+                     onclick="document.getElementById('pdfInput').click()">
+                    <i class="fas fa-file-pdf text-4xl text-red-400 mb-6"></i>
+                    <h3 class="text-xl font-semibold mb-3 text-gray-200">Upload PDF Document</h3>
+                    <p class="text-gray-500 mb-4">Government docs, news articles, official notices (max 50MB)</p>
+                    <p class="text-xs text-yellow-400"><i class="fas fa-clock mr-1"></i>PDF analysis takes ~30-60s (text + images analyzed)</p>
+                </div>
+                <input type="file" id="pdfInput" accept=".pdf,application/pdf" class="hidden">
+
+                <div id="pdfPreview" class="hidden mb-8 p-4 bg-gray-900/50 rounded-xl border border-gray-700">
+                    <div class="flex items-center gap-3">
+                        <i class="fas fa-file-pdf text-red-400 text-2xl"></i>
+                        <div>
+                            <p id="pdfFileName" class="text-gray-200 font-medium text-sm"></p>
+                            <p id="pdfFileSize" class="text-gray-500 text-xs"></p>
+                        </div>
+                    </div>
+                </div>
+
+                <button id="analyzePdfBtn" class="hidden w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-4 px-8 rounded-xl text-lg transition-colors">
+                    <i class="fas fa-magnifying-glass mr-2"></i>Analyze Document
+                </button>
+            </div>
         </div>
 
-        <!-- Progress Section -->
+        <!-- Progress Section (shared) -->
         <div id="progressSection" class="hidden result-card rounded-2xl p-12 mb-12">
             <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 id="progressLabel" class="text-gray-500 mt-2 text-sm">Running forensic analysis with Groq Llama 4 Vision...</p>
+                <p class="text-2xl font-semibold text-gray-100">Analyzing</p>
+                <p id="progressLabel" class="text-gray-500 mt-2 text-sm"></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>
@@ -96,7 +153,7 @@
             <p id="progressText" class="text-center text-sm text-gray-500 mt-3">0%</p>
         </div>
 
-        <!-- Results Section -->
+        <!-- Results Section (shared) -->
         <div id="resultsSection" class="hidden">
             <div class="result-card rounded-2xl p-8 md:p-12">
 
@@ -112,7 +169,7 @@
                 <!-- Confidence warning -->
                 <div id="confidenceWarning" class="hidden mb-6 p-4 rounded-xl border text-sm font-medium"></div>
 
-                <!-- Authenticity / Fake scores -->
+                <!-- 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">
                         <div id="scoreReal" class="text-3xl font-bold text-green-400 mb-1"></div>
@@ -136,18 +193,16 @@
                     <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 -->
+                <!-- 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>
                     <p><span class="text-gray-500">SHA256:</span> <span id="hashValue" class="font-mono text-xs break-all"></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>
 
-                <!-- Buttons -->
                 <div class="flex flex-col sm:flex-row gap-4">
                     <button onclick="resetUI()" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-medium py-3 px-6 rounded-xl border border-gray-600 transition-colors">
                         <i class="fas fa-redo mr-2"></i> Analyze Another
@@ -157,12 +212,30 @@
         </div>
     </main>
 
-    <!-- Footer -->
     <footer class="border-t border-gray-800 p-8 text-center text-xs text-gray-500 bg-gray-900/50">
         DeepTrust Forensics | Advanced AI Detection | 2026
     </footer>
 
 <script>
+// ===================== TABS =====================
+let currentTab = 'media';
+
+function switchTab(tab) {
+    ['media', 'text', 'pdf'].forEach(t => {
+        document.getElementById(`panel-${t}`).classList.add('hidden');
+        const btn = document.getElementById(`tab-${t}`);
+        btn.classList.remove('active');
+        btn.classList.add('text-gray-400');
+    });
+    document.getElementById(`panel-${tab}`).classList.remove('hidden');
+    const activeBtn = document.getElementById(`tab-${tab}`);
+    activeBtn.classList.add('active');
+    activeBtn.classList.remove('text-gray-400');
+    currentTab = tab;
+    document.getElementById('resultsSection').classList.add('hidden');
+}
+
+// ===================== MEDIA TAB =====================
 const uploadArea = document.getElementById('uploadArea');
 const fileInput = document.getElementById('fileInput');
 const analyzeBtn = document.getElementById('analyzeBtn');
@@ -185,7 +258,6 @@ function handleFiles(files) {
 function showPreview(file) {
     const url = URL.createObjectURL(file);
     const isVideo = file.type.startsWith('video/');
-
     const imgEl = document.getElementById('previewImg');
     const videoEl = document.getElementById('previewVideo');
 
@@ -211,50 +283,115 @@ function showPreview(file) {
 
     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) {
-    if (bytes === 0) return '0 B';
-    const sizes = ['B', 'KB', 'MB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
+    document.getElementById('progressLabel').textContent = isVideo
+        ? 'Analyzing 5 key frames with Groq Llama 4 Vision...'
+        : 'Running forensic analysis with Groq Llama 4 Vision...';
 }
 
 analyzeBtn.addEventListener('click', async () => {
     const file = fileInput.files[0];
     if (!file) return;
+    const isVideo = file.type.startsWith('video/');
 
     document.getElementById('uploadArea').style.display = 'none';
     document.getElementById('previewSection').style.display = 'none';
     analyzeBtn.style.display = 'none';
-    document.getElementById('progressSection').classList.remove('hidden');
+    startProgress(isVideo ? 1 : 3);
 
-    // video takes longer so slower progress
-    const isVideo = file.type.startsWith('video/');
+    const formData = new FormData();
+    formData.append("file", file);
+    await submitAndShow(formData);
+});
+
+// ===================== TEXT TAB =====================
+const textInput = document.getElementById('textInput');
+const charCount = document.getElementById('charCount');
+
+textInput.addEventListener('input', () => {
+    charCount.textContent = textInput.value.length + ' characters';
+});
+
+document.getElementById('analyzeTextBtn').addEventListener('click', async () => {
+    const text = textInput.value.trim();
+    if (!text) { alert('Please paste some text first.'); return; }
+    if (text.length < 50) { alert('Text is too short for analysis. Please paste at least 50 characters.'); return; }
+
+    document.getElementById('panel-text').style.display = 'none';
+    document.getElementById('progressLabel').textContent = 'Analyzing text with RoBERTa + Groq Llama 3...';
+    startProgress(2);
+
+    const formData = new FormData();
+    formData.append("text", text);
+    await submitAndShow(formData);
+});
+
+// ===================== PDF TAB =====================
+const pdfInput = document.getElementById('pdfInput');
+
+pdfInput.addEventListener('change', e => {
+    const file = e.target.files[0];
+    if (!file) return;
+    if (file.size > 50 * 1024 * 1024) { alert('File exceeds 50MB limit.'); return; }
+    document.getElementById('pdfFileName').textContent = file.name;
+    document.getElementById('pdfFileSize').textContent = formatBytes(file.size);
+    document.getElementById('pdfPreview').classList.remove('hidden');
+    document.getElementById('analyzePdfBtn').classList.remove('hidden');
+});
+
+const pdfUploadArea = document.getElementById('pdfUploadArea');
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
+    pdfUploadArea.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); });
+});
+['dragenter', 'dragover'].forEach(e => pdfUploadArea.addEventListener(e, () => pdfUploadArea.classList.add('dragover')));
+['dragleave', 'drop'].forEach(e => pdfUploadArea.addEventListener(e, () => pdfUploadArea.classList.remove('dragover')));
+pdfUploadArea.addEventListener('drop', e => {
+    const file = e.dataTransfer.files[0];
+    if (file && file.type === 'application/pdf') {
+        pdfInput.files = e.dataTransfer.files;
+        document.getElementById('pdfFileName').textContent = file.name;
+        document.getElementById('pdfFileSize').textContent = formatBytes(file.size);
+        document.getElementById('pdfPreview').classList.remove('hidden');
+        document.getElementById('analyzePdfBtn').classList.remove('hidden');
+    }
+});
+
+document.getElementById('analyzePdfBtn').addEventListener('click', async () => {
+    const file = pdfInput.files[0];
+    if (!file) return;
+
+    document.getElementById('pdfUploadArea').style.display = 'none';
+    document.getElementById('pdfPreview').style.display = 'none';
+    document.getElementById('analyzePdfBtn').style.display = 'none';
+    document.getElementById('progressLabel').textContent = 'Extracting text & images from PDF, analyzing with RoBERTa + Groq...';
+    startProgress(1);
+
+    const formData = new FormData();
+    formData.append("file", file);
+    await submitAndShow(formData);
+});
+
+// ===================== SHARED SUBMIT =====================
+let progressInterval = null;
+
+function startProgress(increment) {
+    document.getElementById('resultsSection').classList.add('hidden');
+    document.getElementById('progressSection').classList.remove('hidden');
     let progress = 0;
-    const interval = setInterval(() => {
-        progress += isVideo ? 1 : 3;
+    progressInterval = setInterval(() => {
+        progress += increment;
         if (progress > 90) progress = 90;
         document.getElementById('progressBar').style.width = progress + '%';
         document.getElementById('progressText').textContent = progress + '%';
     }, 400);
+}
 
-    const formData = new FormData();
-    formData.append("file", file);
-
+async function submitAndShow(formData) {
     try {
         const response = await fetch("/analyze", { method: "POST", body: formData });
         if (!response.ok) throw new Error("Server error");
         const data = await response.json();
 
-        clearInterval(interval);
+        clearInterval(progressInterval);
         document.getElementById('progressBar').style.width = '100%';
         document.getElementById('progressText').textContent = '100%';
 
@@ -264,20 +401,21 @@ analyzeBtn.addEventListener('click', async () => {
         }, 400);
 
     } catch (error) {
-        clearInterval(interval);
+        clearInterval(progressInterval);
         document.getElementById('progressSection').classList.add('hidden');
         console.error(error);
         alert("Analysis failed. Check backend.");
     }
-});
+}
 
+// ===================== SHOW RESULTS =====================
 function showResults(data) {
     const section = document.getElementById('resultsSection');
     section.classList.remove('hidden');
     section.scrollIntoView({ behavior: 'smooth' });
 
     const isAuthentic = data.authenticity > 50;
-    const isVideo = data.type === 'video';
+    const type = data.type;
     const iconEl = document.getElementById('resultIcon');
 
     // confidence warning
@@ -294,15 +432,22 @@ function showResults(data) {
         warningEl.classList.add('hidden');
     }
 
-    // verdict
+    // verdict titles based on type
+    const titles = {
+        image: ['Authentic Media Detected', 'Potential Deepfake Detected'],
+        video: ['Authentic Video Detected', 'Potential Deepfake Video Detected'],
+        text: ['Authentic Text Detected', 'Potentially Fake / AI-Generated Text'],
+        pdf: ['Authentic Document Detected', 'Potentially Forged / AI-Generated Document'],
+    };
+
     if (isAuthentic) {
         iconEl.innerHTML = '<i class="fas fa-check text-green-500 text-2xl"></i>';
-        document.getElementById('resultTitle').textContent = isVideo ? 'Authentic Video Detected' : 'Authentic Media Detected';
-        document.getElementById('resultSubtitle').textContent = 'No synthetic manipulation found.';
+        document.getElementById('resultTitle').textContent = titles[type]?.[0] || 'Authentic';
+        document.getElementById('resultSubtitle').textContent = 'No signs of manipulation or AI generation found.';
     } else {
         iconEl.innerHTML = '<i class="fas fa-triangle-exclamation text-orange-500 text-2xl"></i>';
-        document.getElementById('resultTitle').textContent = isVideo ? 'Potential Deepfake Video Detected' : 'Potential Deepfake Detected';
-        document.getElementById('resultSubtitle').textContent = 'Signs of fabrication detected.';
+        document.getElementById('resultTitle').textContent = titles[type]?.[1] || 'Suspicious';
+        document.getElementById('resultSubtitle').textContent = 'Signs of fabrication or AI generation detected.';
     }
 
     document.getElementById('scoreReal').textContent = Math.round(data.authenticity) + '%';
@@ -310,8 +455,8 @@ function showResults(data) {
     document.getElementById('hashValue').textContent = data.sha256;
     document.getElementById('modelsUsed').textContent = (data.models_used || []).join(', ');
 
-    // forensic details — different for video vs image
-    if (isVideo) {
+    // forensic details
+    if (type === 'video') {
         document.getElementById('metadataRiskRow').classList.add('hidden');
         document.getElementById('framesRow').classList.remove('hidden');
         document.getElementById('durationRow').classList.remove('hidden');
@@ -327,26 +472,41 @@ function showResults(data) {
     // model breakdown
     const modelDiv = document.getElementById('modelBreakdown');
     modelDiv.innerHTML = '';
-    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
-                    ${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'}
-                </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>`;
+
+    // build model list based on type
+    let models = [];
+    if (type === 'text' || type === 'pdf') {
+        models = [
+            { name: 'RoBERTa Fake News', icon: 'fa-newspaper', color: 'text-purple-400', score: data.details.roberta_fakenews_score },
+            { name: 'RoBERTa AI Detector', icon: 'fa-robot', color: 'text-blue-400', score: data.details.roberta_aidetector_score },
+            { name: 'Groq Llama 3 (Text)', icon: 'fa-brain', color: 'text-orange-400', score: data.details.groq_score === 'see breakdown' ? 'unavailable' : data.details.groq_score },
+        ];
+    } else {
+        models = [
+            { name: `Groq Llama 4 Vision${type === 'video' ? ' (avg 5 frames)' : ''}`, icon: 'fa-brain', color: 'text-orange-400', score: data.details.groq_score },
+        ];
+    }
+
+    models.forEach(({ name, icon, color, score }) => {
+        const isUnavailable = score === 'unavailable' || score === null;
+        const pct = isUnavailable ? 0 : Math.round(score * 100);
+        const barColor = 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 ${icon} mr-2 ${color}"></i>${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="${barColor} h-2 rounded-full" style="width: ${pct}%"></div>
+                </div>
+            </div>`;
+    });
 
     // AI reasoning
     if (data.details.groq_reasoning) {
@@ -357,20 +517,43 @@ function showResults(data) {
     }
 }
 
+// ===================== UTILS =====================
+function formatBytes(bytes) {
+    if (bytes === 0) return '0 B';
+    const sizes = ['B', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
+}
+
 function resetUI() {
     document.getElementById('resultsSection').classList.add('hidden');
+    document.getElementById('confidenceWarning').classList.add('hidden');
+    document.getElementById('groqReasoningSection').classList.add('hidden');
+    document.getElementById('progressBar').style.width = '0%';
+    document.getElementById('progressText').textContent = '0%';
+
+    // reset media
     document.getElementById('uploadArea').style.display = 'block';
     document.getElementById('previewSection').classList.add('hidden');
     document.getElementById('previewSection').style.display = '';
-    analyzeBtn.classList.remove('hidden');
-    analyzeBtn.style.display = '';
-    document.getElementById('progressBar').style.width = '0%';
-    document.getElementById('progressText').textContent = '0%';
-    document.getElementById('confidenceWarning').classList.add('hidden');
-    document.getElementById('groqReasoningSection').classList.add('hidden');
+    document.getElementById('analyzeBtn').classList.add('hidden');
+    document.getElementById('analyzeBtn').style.display = '';
     document.getElementById('previewImg').classList.add('hidden');
     document.getElementById('previewVideo').classList.add('hidden');
     fileInput.value = '';
+
+    // reset text
+    document.getElementById('panel-text').style.display = '';
+    textInput.value = '';
+    charCount.textContent = '0 characters';
+
+    // reset pdf
+    document.getElementById('pdfUploadArea').style.display = 'block';
+    document.getElementById('pdfPreview').classList.add('hidden');
+    document.getElementById('pdfPreview').style.display = '';
+    document.getElementById('analyzePdfBtn').classList.add('hidden');
+    document.getElementById('analyzePdfBtn').style.display = '';
+    pdfInput.value = '';
 }
 </script>
 </body>