| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> |
| <title>DeepGuard - AI-Powered Deepfake Detection System</title> |
| <meta name="description" |
| content="Advanced AI-powered deepfake detection system using cutting-edge machine learning to identify manipulated media with unprecedented accuracy."> |
| <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;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" |
| rel="stylesheet"> |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| <link rel="stylesheet" href="variables.css"> |
| <link rel="stylesheet" href="style.css"> |
| <link rel="stylesheet" href="showcase.css"> |
| <link rel="stylesheet" href="loader.css"> |
| <link rel="stylesheet" href="video_player.css"> |
| <link rel="stylesheet" href="extension.css"> |
| <link rel="stylesheet" href="scroll_indicator.css"> |
| <link rel="stylesheet" href="orbit.css"> |
| <link rel="stylesheet" href="pwa.css"> |
| <link rel="stylesheet" href="responsive-additions.css"> |
|
|
| |
| <link rel="manifest" href="manifest.json"> |
| <meta name="theme-color" content="#E3F514"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> |
| <meta name="apple-mobile-web-app-title" content="DeepGuard"> |
| <link rel="apple-touch-icon" href="logo.ico"> |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> |
| </head> |
|
|
| <body> |
| |
| <div id="loader-wrapper"> |
| |
| <div class="loader-content brutalist"> |
| <p id="loader-quote">IN A WORLD WHERE SEEING IS NO LONGER BELIEVING,<br>OUR SYSTEM EXISTS TO <span |
| class="quote-highlight">PROTECT THE TRUTH</span></p> |
|
|
| |
| <div class="detection-status" id="detectionStatus"> |
| <span class="status-text">ANALYZING...</span> |
| </div> |
| </div> |
|
|
| <div class="counter-wrapper" style="color: #E3F514; opacity: 1; display: block;"> |
| <span id="loader-percent">0</span><span class="percent-symbol">%</span> |
| </div> |
|
|
| |
| <div class="loader-meta"> |
| <span>DeepGuard Mark V</span> |
| <span id="loaderTimestamp">INITIALIZING SYSTEM</span> |
| </div> |
| </div> |
| |
| <div id="canvas-container"></div> |
| <div class="mesh-background"></div> |
| |
| <div class="scroll-progress-container"> |
| <div class="scroll-progress-bar" id="scrollProgress"></div> |
| </div> |
| <div id="particles-js"></div> |
|
|
| |
| <div class="noise-overlay"></div> |
|
|
| |
| <nav class="navbar"> |
| <div class="container"> |
| <div class="nav-content"> |
| <a href="index.html" class="logo"> |
| <img src="logo.svg" alt="DeepGuard Logo" class="logo-img"> |
| <span class="logo-text">Deep<span style="color: var(--accent-yellow);">Guard</span></span> |
| </a> |
|
|
| |
| <button class="hamburger" id="hamburger" aria-label="Toggle navigation menu"> |
| <span></span> |
| <span></span> |
| <span></span> |
| </button> |
|
|
| |
| <div class="nav-menu-wrapper"> |
| <ul class="nav-menu"> |
| <li><a href="index.html" class="active">Home</a></li> |
| <li><a href="analysis.html">Analysis</a></li> |
| <li><a href="history.html">History</a></li> |
| </ul> |
| <a href="analysis.html" class="btn-primary">Get Started</a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section class="hero"> |
| <div class="hero-background"> |
| |
| <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> |
|
|
| <div class="gradient-orb orb-1"></div> |
| <div class="gradient-orb orb-2"></div> |
| <div class="gradient-orb orb-3"></div> |
|
|
| |
| <div class="floating-3d-object floating-cube" id="floatingCube"> |
| <div class="cube-face cube-front"></div> |
| <div class="cube-face cube-back"></div> |
| <div class="cube-face cube-right"></div> |
| <div class="cube-face cube-left"></div> |
| <div class="cube-face cube-top"></div> |
| <div class="cube-face cube-bottom"></div> |
| </div> |
|
|
| <div class="floating-3d-object floating-pyramid" id="floatingPyramid"> |
| <div class="pyramid-face pyramid-front"></div> |
| <div class="pyramid-face pyramid-back"></div> |
| <div class="pyramid-face pyramid-left"></div> |
| <div class="pyramid-face pyramid-right"></div> |
| <div class="pyramid-face pyramid-base"></div> |
| </div> |
|
|
| |
| <div class="hero-reveal-container" id="heroRevealContainer"> |
| |
|
|
| <img src="assets/gemini_reveal.png" alt="AI Detection Foreground" class="reveal-image reveal-top" |
| id="hero-img-reveal" style="display: none;"> |
| <canvas id="revealCanvas" class="reveal-canvas"></canvas> |
| </div> |
| </div> |
| <div class="container"> |
| <div class="hero-content"> |
| <div class="hero-badge"> |
| <span class="badge-dot"></span> |
| <span>AI-Powered Detection</span> |
| </div> |
| <h1 class="hero-title" data-aos="fade-up" data-aos-delay="100"> |
| Protect Reality with |
| <br /> |
| <span class="gradient-text-hero">Advanced AI Detection</span> |
| </h1> |
| <p class="hero-description" data-aos="fade-up" data-aos-delay="200"> |
| Welcome to the future of media authentication. Our cutting-edge deepfake detection system leverages |
| state-of-the-art AI to identify manipulated content with unprecedented accuracy. |
| </p> |
| <div class="hero-actions" data-aos="fade-up" data-aos-delay="300"> |
| <a href="analysis.html" class="btn-hero-primary">Try Detection Now</a> |
| <a href="#live-demo" class="btn-hero-secondary"> |
| <span class="play-icon">▶</span> |
| Watch Demo |
| </a> |
| <a href="#extension" class="btn-hero-white"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg" |
| alt="Chrome" width="20" height="20"> |
| Get Extension |
| </a> |
| </div> |
| <div class="hero-stats" data-aos="zoom-in" data-aos-delay="400" data-speed="0.1"> |
| <div class="stat-item"> |
| <div class="stat-value">97%</div> |
| <div class="stat-label">Accuracy Rate</div> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <div class="stat-value">1.3M</div> |
| <div class="stat-label">Dataset Trained On</div> |
| </div> |
| <div class="stat-divider"></div> |
| <div class="stat-item"> |
| <div class="stat-value">< 2s</div> |
| <div class="stat-label">Detection Time</div> |
| </div> |
| </div> |
|
|
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-indicator" data-speed="-0.2"> |
| <div class="mouse"> |
| <div class="wheel"></div> |
| </div> |
| <div class="arrow-scroll"></div> |
| </div> |
| </section> |
|
|
| |
| <div class="section-divider"> |
| <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"> |
| <path |
| d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" |
| class="shape-fill"></path> |
| </svg> |
| </div> |
|
|
| |
| <section id="live-demo" class="video-demo-section" style="padding: 60px 0; position: relative; z-index: 5;"> |
| <div class="container"> |
| <div class="section-header"> |
| <h2 class="section-title">See It In <span class="gradient-text">Action</span></h2> |
| <p class="section-subtitle">Watch DeepGuard analyze deepfakes in real-time</p> |
| </div> |
|
|
| <div class="video-window-container" data-aos="zoom-in-up"> |
| |
| <div class="window-header"> |
| <div class="window-controls"> |
| <span class="control red"></span> |
| <span class="control yellow"></span> |
| <span class="control green"></span> |
| </div> |
| <div class="window-title">DeepGuard Live Analysis - Mark V</div> |
| </div> |
|
|
| |
| <div class="video-content-wrapper"> |
| <video id="demoVideoPlayer" class="demo-video" muted playsinline preload="metadata" width="100%"> |
| <source src="assets/demo_part1.mov" type="video/mp4"> |
| <source src="assets/demo_part1.mov" type="video/quicktime"> |
| Your browser does not support the video tag. |
| </video> |
|
|
| |
| <div class="play-overlay" id="playOverlay"> |
| <div class="play-button">▶</div> |
| </div> |
|
|
| |
| <div class="video-progress-bar"> |
| <div class="progress-fill" id="videoProgress"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="extension" class="extension-section"> |
| <div class="container"> |
| <div class="extension-container"> |
| <div class="extension-content" data-aos="fade-right"> |
| <div class="extension-badge"> |
| <span>●</span> Available for Chrome |
| </div> |
| <h2 class="extension-title">DeepGuard <span class="gradient-text">Everywhere</span></h2> |
| <p class="extension-description"> |
| Detect deepfakes in real-time while you browse social media. Our browser extension automatically |
| scans images on X, Instagram, and Reddit. |
| </p> |
| <a href="https://github.com/Harshvardhan-Asnade/Deepfake-Model/tree/main/extension" |
| class="chrome-btn" target="_blank"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Google_Chrome_icon_%28February_2022%29.svg" |
| alt="Chrome" class="chrome-icon"> |
| Add to Chrome |
| </a> |
| </div> |
|
|
| <div class="extension-visual" data-aos="fade-left"> |
| <div class="video-window-container" style="max-width: 100%;"> |
| <div class="window-header"> |
| <div class="window-controls"> |
| <span class="control red"></span> |
| <span class="control yellow"></span> |
| <span class="control green"></span> |
| </div> |
| <div class="window-title">DeepGuard Extension Preview</div> |
| </div> |
| <div class="video-content-wrapper"> |
| <video class="demo-video" autoplay muted loop playsinline preload="metadata" width="100%"> |
| <source src="assets/extension_demo.mov" type="video/mp4"> |
| <source src="assets/extension_demo.mov" type="video/quicktime"> |
| </video> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
|
|
|
|
| |
| <section id="technology" class="tech-section"> |
| <div class="container"> |
| <div class="section-header"> |
| <h2 class="section-title">Built with <span class="gradient-text">Advanced Technology</span></h2> |
| <p class="section-subtitle">Enterprise-grade AI infrastructure powering reliable detection</p> |
| </div> |
| <div class="tech-grid"> |
| <div class="tech-card" data-aos="zoom-in" data-aos-delay="100"> |
| <div class="tech-icon">🧠</div> |
| <h3>EfficientNet V2</h3> |
| <p>Spatial Feature Extraction</p> |
| </div> |
| <div class="tech-card" data-aos="zoom-in" data-aos-delay="200"> |
| <div class="tech-icon">🌪️</div> |
| <h3>Swin Transformer</h3> |
| <p>Global Context Attention</p> |
| </div> |
| <div class="tech-card" data-aos="zoom-in" data-aos-delay="300"> |
| <div class="tech-icon">🌊</div> |
| <h3>FFT Analysis</h3> |
| <p>Frequency Domain Inspection</p> |
| </div> |
| <div class="tech-card" data-aos="zoom-in" data-aos-delay="400"> |
| <div class="tech-icon">🐍</div> |
| <h3>Python & PyTorch</h3> |
| <p>Core AI Framework</p> |
| </div> |
| <div class="tech-card" data-aos="zoom-in" data-aos-delay="500"> |
| <div class="tech-icon">🎯</div> |
| <h3>Patch Encoder</h3> |
| <p>Local Artifact Detection</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
|
|
|
|
|
|
|
|
| |
| <section class="how-it-works"> |
| <div class="container"> |
| <div class="section-header"> |
| <h2 class="section-title">How It <span class="gradient-text">Works</span></h2> |
| <p class="section-subtitle">Advanced AI pipeline for accurate deepfake detection</p> |
| </div> |
| <div class="pipeline"> |
| <div class="pipeline-step"> |
| <div class="step-number">01</div> |
| <div class="step-icon">📤</div> |
| <h3 class="step-title">Upload Media</h3> |
| <p class="step-description">Upload your image or video file through our secure platform</p> |
| </div> |
| <div class="pipeline-arrow">→</div> |
| <div class="pipeline-step"> |
| <div class="step-number">02</div> |
| <div class="step-icon">🔍</div> |
| <h3 class="step-title">AI Analysis</h3> |
| <p class="step-description">Deep learning model analyzes pixel patterns and artifacts</p> |
| </div> |
| <div class="pipeline-arrow">→</div> |
| <div class="pipeline-step"> |
| <div class="step-number">03</div> |
| <div class="step-icon">🧮</div> |
| <h3 class="step-title">Multi-Modal Fusion</h3> |
| <p class="step-description">Analyzes frequency (FFT), local patches, and global context |
| simultaneously</p> |
| </div> |
| <div class="pipeline-arrow">→</div> |
| <div class="pipeline-step"> |
| <div class="step-number">04</div> |
| <div class="step-icon">✨</div> |
| <h3 class="step-title">Results</h3> |
| <p class="step-description">Receive detailed report with confidence score and analysis</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| |
|
|
| |
| <section class="cta-section"> |
| <div class="container"> |
| <div class="cta-content"> |
| <h2 class="cta-title">Ready to Protect Against Deepfakes?</h2> |
| <p class="cta-description">Join thousands of users trusting our AI-powered detection system</p> |
| <div class="cta-actions"> |
| <a href="analysis.html" class="btn-cta-primary">Get Started Free</a> |
|
|
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="footer"> |
| <div class="container"> |
| <div class="footer-content-minimal"> |
| |
| <div class="footer-brand"> |
| <div class="logo"> |
| <img src="logo.svg" alt="DeepGuard Logo" class="logo-img"> |
| <span class="logo-text">Deep<span style="color: var(--accent-yellow);">Guard</span></span> |
| </div> |
| </div> |
|
|
| |
| <p class="footer-tagline-premium">Protecting digital truth with AI</p> |
|
|
| |
| <div class="footer-links-premium"> |
| <a href="https://harshasnade-deepfake-detection.hf.space" target="_blank" |
| class="footer-link-premium-item"> |
| <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face"> |
| <span>Models</span> |
| </a> |
| <a href="https://github.com/Harshvardhan-Asnade/Deepfake-Model" target="_blank" |
| class="footer-link-premium-item"> |
| <svg viewBox="0 0 24 24" fill="currentColor"> |
| <path |
| d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" /> |
| </svg> |
| <span>GitHub</span> |
| </a> |
| </div> |
|
|
| |
| <div class="footer-copyright-premium"> |
| <p>© 2024 <span style="color: var(--accent-yellow); font-weight: 700;">DeepGuard</span></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="footer-glow-enhanced"></div> |
| <div class="footer-glow"></div> |
| </footer> |
|
|
| <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| <script src="three_bg.js"></script> |
| <script src="loader.js"></script> |
| <script src="script.js"></script> |
| <script src="hero_reveal.js"></script> |
| <script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script> |
| <script src="motion.js"></script> |
| <script src="orbit_interaction.js"></script> |
| <script src="mobile.js"></script> |
| <script src="pwa.js"></script> |
| </body> |
|
|
| </html> |
