Danielchris145/TruthCheck-AI
0
1<!DOCTYPE html>2<html lang="en" class="scroll-smooth">3 4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>How it Works | TruthCheck</title>8 9 <!-- Fonts -->10 <link rel="preconnect" href="https://fonts.googleapis.com">11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>12 <link13 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&display=swap"14 rel="stylesheet">15 16 <!-- Tailwind CSS -->17 <script src="https://cdn.tailwindcss.com"></script>18 <script>19 tailwind.config = {20 darkMode: 'class',21 theme: {22 extend: {23 fontFamily: {24 sans: ['Inter', 'sans-serif'],25 display: ['Orbitron', 'sans-serif'],26 },27 colors: {28 brand: {29 50: '#f0f9ff',30 100: '#e0f2fe',31 200: '#bae6fd',32 300: '#7dd3fc',33 400: '#38bdf8',34 500: '#0ea5e9',35 600: '#0284c7',36 700: '#0369a1',37 800: '#075985',38 900: '#0c4a6e',39 950: '#082f49',40 },41 neon: {42 cyan: '#00f3ff',43 purple: '#bc13fe',44 }45 },46 animation: {47 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',48 'fade-in-up': 'fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards',49 },50 keyframes: {51 fadeInUp: {52 'from': { opacity: '0', transform: 'translate3d(0, 20px, 0)' },53 'to': { opacity: '1', transform: 'translate3d(0, 0, 0)' }54 }55 }56 }57 }58 }59 </script>60 61 <!-- Icons -->62 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">63 64 <!-- Custom CSS -->65 <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">66</head>67 68<body69 class="bg-slate-950 text-white min-h-screen relative overflow-x-hidden selection:bg-brand-500 selection:text-white">70 71 <!-- Background Grid Effect -->72 <div class="fixed inset-0 z-0 opacity-20 pointer-events-none">73 <div74 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%)]">75 </div>76 </div>77 78 <!-- Navigation -->79 <nav class="relative z-50 border-b border-white/10 backdrop-blur-md bg-slate-950/50">80 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">81 <div class="flex items-center justify-between h-20">82 <a href="/" class="flex items-center gap-3 group">83 <div84 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">85 <i class="fa-solid fa-shield-halved text-brand-400 text-xl"></i>86 </div>87 <span88 class="font-display font-bold text-2xl tracking-wider text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">89 TRUTH<span class="text-brand-400">CHECK</span>90 </span>91 </a>92 <div class="hidden md:flex gap-8">93 <a href="/"94 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Analyzer</a>95 <a href="/dashboard"96 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">Dashboard</a>97 <a href="/how-it-works" class="text-sm font-medium text-brand-400 border-b-2 border-brand-400">How98 it Works</a>99 <a href="/api-docs"100 class="text-sm font-medium text-slate-300 hover:text-brand-400 transition-colors">API</a>101 </div>102 </div>103 </div>104 </nav>105 106 <!-- Main Content -->107 <main class="relative z-10 container mx-auto px-4 py-16">108 109 <div class="max-w-4xl mx-auto space-y-16 animate-fade-in-up">110 111 <!-- Header -->112 <div class="text-center space-y-4">113 <h1 class="font-display text-4xl md:text-5xl font-bold text-white">System Architecture</h1>114 <p class="text-slate-400 text-lg">Declassified overview of the TruthCheck verification pipeline.</p>115 </div>116 117 <!-- Steps -->118 <div class="space-y-12">119 <!-- Step 1 -->120 <div121 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">122 <div123 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">124 01125 </div>126 <div>127 <h3 class="font-display text-2xl font-bold text-white mb-2">Claim Extraction</h3>128 <p class="text-slate-400 leading-relaxed">129 The system first analyzes your input text using <strong>spaCy</strong> to identify factual130 claims. It filters out questions, opinions, and personal statements, isolating only131 verifiable assertions about the real world.132 </p>133 </div>134 </div>135 136 <!-- Step 2 -->137 <div138 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">139 <div140 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">141 02142 </div>143 <div>144 <h3 class="font-display text-2xl font-bold text-white mb-2">Evidence Retrieval</h3>145 <p class="text-slate-400 leading-relaxed">146 Using extracted keywords, TruthCheck scrapes trusted sources (Wikipedia, Government domains,147 Scientific Journals) via standard search protocols. It specifically prioritizes148 high-credibility domains like <code>.gov</code>, <code>.edu</code>, and149 <code>reuters.com</code>.150 </p>151 </div>152 </div>153 154 <!-- Step 3 -->155 <div156 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">157 <div158 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">159 03160 </div>161 <div>162 <h3 class="font-display text-2xl font-bold text-white mb-2">NLI Classification</h3>163 <p class="text-slate-400 leading-relaxed">164 The core "brain" uses Large Language Models (RoBERTa & DeBERTa) fine-tuned for165 <strong>Natural Language Inference (NLI)</strong>. It compares the claim against each piece166 of evidence to determine if the evidence <em>Entails</em> (supports), <em>Contradicts</em>167 (refutes), or is <em>Neutral</em> towards the claim.168 </p>169 </div>170 </div>171 172 <!-- Step 4 -->173 <div174 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">175 <div176 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">177 04178 </div>179 <div>180 <h3 class="font-display text-2xl font-bold text-white mb-2">Consensus Voting</h3>181 <p class="text-slate-400 leading-relaxed">182 Finally, all model judgments are aggregated using a weighted voting mechanism. Sources with183 higher domain authority carry more weight. The system calculates a final confidence score184 and issues a verdict: <strong>TRUE</strong>, <strong>FALSE</strong>, or <strong>LOW185 CONFIDENCE</strong>.186 </p>187 </div>188 </div>189 </div>190 191 <!-- CTA -->192 <div class="text-center pt-8">193 <a href="/"194 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)]">195 <i class="fa-solid fa-play"></i> Try the Analyzer196 </a>197 </div>198 199 </div>200 </main>201 202 <!-- Footer -->203 <footer class="relative z-10 border-t border-white/5 mt-20 bg-slate-950">204 <div205 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">206 <div>© 2025 TruthCheck AI. All Systems Nominal.</div>207 <div class="flex gap-4 mt-4 md:mt-0">208 <a href="#" class="hover:text-brand-400 transition-colors">Privacy</a>209 <a href="#" class="hover:text-brand-400 transition-colors">Terms</a>210 <a href="https://github.com/CHRISDANIEL145" class="hover:text-brand-400 transition-colors">Github</a>211 </div>212 </div>213 </footer>214</body>215 216</html>