| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>How it Works | TruthCheck</title> |
|
|
| |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap" |
| rel="stylesheet"> |
|
|
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| fontFamily: { |
| sans: ['Inter', 'sans-serif'], |
| display: ['Orbitron', 'sans-serif'], |
| }, |
| colors: { |
| brand: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| 950: '#082f49', |
| }, |
| neon: { |
| cyan: '#00f3ff', |
| purple: '#bc13fe', |
| } |
| }, |
| animation: { |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
| 'fade-in-up': 'fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards', |
| }, |
| keyframes: { |
| fadeInUp: { |
| 'from': { opacity: '0', transform: 'translate3d(0, 20px, 0)' }, |
| 'to': { opacity: '1', transform: 'translate3d(0, 0, 0)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
|
|
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
| |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> |
| </head> |
|
|
| <body |
| class="bg-slate-950 text-white min-h-screen relative overflow-x-hidden selection:bg-brand-500 selection:text-white"> |
|
|
| |
| <div class="fixed inset-0 z-0 opacity-20 pointer-events-none"> |
| <div |
| class="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"> |
| </div> |
| </div> |
|
|
| |
| <nav class="relative z-50 border-b border-white/10 backdrop-blur-md bg-slate-950/50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-20"> |
| <a href="/" class="flex items-center gap-3 group"> |
| <div |
| class="relative w-10 h-10 flex items-center justify-center bg-brand-500/10 rounded-lg border border-brand-500/50 shadow-[0_0_15px_rgba(14,165,233,0.3)] group-hover:shadow-[0_0_25px_rgba(14,165,233,0.5)] transition-shadow"> |
| <i class="fa-solid fa-shield-halved text-brand-400 text-xl"></i> |
| </div> |
| <span |
| class="font-display font-bold text-2xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400"> |
| TRUTH<span class="text-brand-400">CHECK</span> |
| </span> |
| </a> |
| <div class="hidden md:flex gap-8"> |
| <a href="/" |
| class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Analyzer</a> |
| <a href="/dashboard" |
| class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Dashboard</a> |
| <a href="/how-it-works" class="text-sm font-medium text-brand-400 border-b-2 border-brand-400">How |
| it Works</a> |
| <a href="/api-docs" |
| class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">API</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <main class="relative z-10 container mx-auto px-4 py-16"> |
|
|
| <div class="max-w-4xl mx-auto space-y-16 animate-fade-in-up"> |
|
|
| |
| <div class="text-center space-y-4"> |
| <h1 class="font-display text-4xl md:text-5xl font-bold text-white">System Architecture</h1> |
| <p class="text-slate-400 text-lg">Declassified overview of the TruthCheck verification pipeline.</p> |
| </div> |
|
|
| |
| <div class="space-y-12"> |
| |
| <div |
| class="flex flex-col md:flex-row gap-8 items-center bg-slate-900/50 border border-white/5 p-8 rounded-2xl hover:border-brand-500/30 transition-colors"> |
| <div |
| class="flex-shrink-0 w-16 h-16 rounded-full bg-brand-500/10 border border-brand-500/30 flex items-center justify-center text-2xl font-display font-bold text-brand-400"> |
| 01 |
| </div> |
| <div> |
| <h3 class="font-display text-2xl font-bold text-white mb-2">Claim Extraction</h3> |
| <p class="text-slate-400 leading-relaxed"> |
| The system first analyzes your input text using <strong>spaCy</strong> to identify factual |
| claims. It filters out questions, opinions, and personal statements, isolating only |
| verifiable assertions about the real world. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div |
| class="flex flex-col md:flex-row gap-8 items-center bg-slate-900/50 border border-white/5 p-8 rounded-2xl hover:border-neon-cyan/30 transition-colors"> |
| <div |
| class="flex-shrink-0 w-16 h-16 rounded-full bg-neon-cyan/10 border border-neon-cyan/30 flex items-center justify-center text-2xl font-display font-bold text-neon-cyan"> |
| 02 |
| </div> |
| <div> |
| <h3 class="font-display text-2xl font-bold text-white mb-2">Evidence Retrieval</h3> |
| <p class="text-slate-400 leading-relaxed"> |
| Using extracted keywords, TruthCheck scrapes trusted sources (Wikipedia, Government domains, |
| Scientific Journals) via standard search protocols. It specifically prioritizes |
| high-credibility domains like <code>.gov</code>, <code>.edu</code>, and |
| <code>reuters.com</code>. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div |
| class="flex flex-col md:flex-row gap-8 items-center bg-slate-900/50 border border-white/5 p-8 rounded-2xl hover:border-neon-purple/30 transition-colors"> |
| <div |
| class="flex-shrink-0 w-16 h-16 rounded-full bg-neon-purple/10 border border-neon-purple/30 flex items-center justify-center text-2xl font-display font-bold text-neon-purple"> |
| 03 |
| </div> |
| <div> |
| <h3 class="font-display text-2xl font-bold text-white mb-2">NLI Classification</h3> |
| <p class="text-slate-400 leading-relaxed"> |
| The core "brain" uses Large Language Models (RoBERTa & DeBERTa) fine-tuned for |
| <strong>Natural Language Inference (NLI)</strong>. It compares the claim against each piece |
| of evidence to determine if the evidence <em>Entails</em> (supports), <em>Contradicts</em> |
| (refutes), or is <em>Neutral</em> towards the claim. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div |
| class="flex flex-col md:flex-row gap-8 items-center bg-slate-900/50 border border-white/5 p-8 rounded-2xl hover:border-green-500/30 transition-colors"> |
| <div |
| class="flex-shrink-0 w-16 h-16 rounded-full bg-green-500/10 border border-green-500/30 flex items-center justify-center text-2xl font-display font-bold text-green-500"> |
| 04 |
| </div> |
| <div> |
| <h3 class="font-display text-2xl font-bold text-white mb-2">Consensus Voting</h3> |
| <p class="text-slate-400 leading-relaxed"> |
| Finally, all model judgments are aggregated using a weighted voting mechanism. Sources with |
| higher domain authority carry more weight. The system calculates a final confidence score |
| and issues a verdict: <strong>TRUE</strong>, <strong>FALSE</strong>, or <strong>LOW |
| CONFIDENCE</strong>. |
| </p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="text-center pt-8"> |
| <a href="/" |
| class="inline-flex items-center gap-2 px-8 py-3 bg-brand-600 hover:bg-brand-500 text-white rounded-full font-bold font-display transition-all shadow-[0_0_20px_rgba(14,165,233,0.3)] hover:shadow-[0_0_30px_rgba(14,165,233,0.5)]"> |
| <i class="fa-solid fa-play"></i> Try the Analyzer |
| </a> |
| </div> |
|
|
| </div> |
| </main> |
|
|
| |
| <footer class="relative z-10 border-t border-white/5 mt-20 bg-slate-950"> |
| <div |
| class="max-w-7xl mx-auto px-4 py-8 flex flex-col md:flex-row items-center justify-between text-slate-500 text-sm"> |
| <div>© 2025 TruthCheck AI. All Systems Nominal.</div> |
| <div class="flex gap-4 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-brand-400 transition-colors">Privacy</a> |
| <a href="#" class="hover:text-brand-400 transition-colors">Terms</a> |
| <a href="https://github.com/CHRISDANIEL145" class="hover:text-brand-400 transition-colors">Github</a> |
| </div> |
| </div> |
| </footer> |
| </body> |
|
|
| </html> |
