Spaces:

Jdp-08
/

deep

Sleeping

File size: 28,532 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepTrust - Deepfake Detection</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
        .bg-dark { background: linear-gradient(135deg, #0a0a0f 0%, #111827 100%); }
        .upload-area {
            transition: border-color 0.2s ease;
            border: 2px dashed #4b5563;
        }
        .upload-area:focus-within,
        .upload-area.dragover {
            border-color: #3b82f6;
            background: rgba(59, 130, 246, 0.05);
        }
        .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>
<body class="bg-dark text-white min-h-screen">

    <!-- Header -->
    <header class="p-6 border-b border-gray-800">
        <nav class="max-w-6xl mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <i class="fas fa-shield-halved text-xl text-blue-500"></i>
                <h1 class="text-xl font-semibold">DeepTrust</h1>
                <span class="text-xs bg-blue-900/50 px-2 py-0.5 rounded text-blue-200 font-medium">Forensics AI</span>
            </div>
            <div class="hidden md:flex space-x-6 text-sm text-gray-400">
                <a href="#" class="hover:text-white transition-colors">Documentation</a>
                <a href="#" class="hover:text-white transition-colors">API</a>
            </div>
        </nav>
    </header>

    <!-- Main Content -->
    <main class="max-w-4xl mx-auto px-4 py-12 pb-24 flex-grow">
        <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">
                Forensic analysis of images, videos, text, and documents using advanced AI models.
            </p>
        </div>

        <!-- 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>
        </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>

        <!-- ======= 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 (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</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>
            </div>
            <p id="progressText" class="text-center text-sm text-gray-500 mt-3">0%</p>
        </div>

        <!-- Results Section (shared) -->
        <div id="resultsSection" class="hidden">
            <div class="result-card rounded-2xl p-8 md:p-12">

                <!-- Verdict -->
                <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>
                        <p id="resultSubtitle" class="text-gray-400 mt-1"></p>
                    </div>
                </div>

                <!-- Confidence warning -->
                <div id="confidenceWarning" class="hidden mb-6 p-4 rounded-xl border text-sm font-medium"></div>

                <!-- 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>
                        <p class="text-gray-500 text-sm">Authentic</p>
                    </div>
                    <div class="text-center p-5 bg-gray-900/50 rounded-xl border border-gray-700">
                        <div id="scoreFake" class="text-3xl font-bold text-red-400 mb-1"></div>
                        <p class="text-gray-500 text-sm">Fabricated</p>
                    </div>
                </div>

                <!-- 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>

                <!-- 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>
                </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>
                    <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>
                    <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>

                <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
                    </button>
                </div>
            </div>
        </div>
    </main>

    <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');

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(e => {
    uploadArea.addEventListener(e, ev => { ev.preventDefault(); ev.stopPropagation(); });
});
['dragenter', 'dragover'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.add('dragover')));
['dragleave', 'drop'].forEach(e => uploadArea.addEventListener(e, () => uploadArea.classList.remove('dragover')));
uploadArea.addEventListener('drop', e => handleFiles(e.dataTransfer.files));
fileInput.addEventListener('change', e => handleFiles(e.target.files));

function handleFiles(files) {
    if (!files.length) return;
    const file = files[0];
    if (file.size > 50 * 1024 * 1024) { alert('File exceeds 50MB limit.'); return; }
    showPreview(file);
}

function showPreview(file) {
    const url = URL.createObjectURL(file);
    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-${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');
    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';
    startProgress(isVideo ? 1 : 3);

    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;
    progressInterval = setInterval(() => {
        progress += increment;
        if (progress > 90) progress = 90;
        document.getElementById('progressBar').style.width = progress + '%';
        document.getElementById('progressText').textContent = progress + '%';
    }, 400);
}

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(progressInterval);
        document.getElementById('progressBar').style.width = '100%';
        document.getElementById('progressText').textContent = '100%';

        setTimeout(() => {
            document.getElementById('progressSection').classList.add('hidden');
            showResults(data);
        }, 400);

    } catch (error) {
        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 type = data.type;
    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 — 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';
        warningEl.innerHTML = '<i class="fas fa-circle-info mr-2"></i>Medium confidence — result is moderately reliable.';
    } else {
        warningEl.classList.add('hidden');
    }

    // 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 = 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 = titles[type]?.[1] || 'Suspicious';
        document.getElementById('resultSubtitle').textContent = 'Signs of fabrication or AI generation 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('modelsUsed').textContent = (data.models_used || []).join(', ');

    // forensic details
    if (type === 'video') {
        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 = '';

    // 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) {
        document.getElementById('groqReasoningSection').classList.remove('hidden');
        document.getElementById('groqReasoning').textContent = data.details.groq_reasoning;
    } else {
        document.getElementById('groqReasoningSection').classList.add('hidden');
    }
}

// ===================== 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 = '';
    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>
</html>