| <!DOCTYPE html>
|
| <html lang="en">
|
|
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>V-VORTEX | AI Detection</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=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
|
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <script>
|
| tailwind.config = {
|
| theme: {
|
| extend: {
|
| fontFamily: {
|
| sans: ['Outfit', 'sans-serif'],
|
| },
|
| colors: {
|
| brand: {
|
| dark: '#02040a',
|
| green: '#00DC82',
|
| gray: '#8899ac'
|
| }
|
| },
|
| backgroundImage: {
|
| 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
| }
|
| }
|
| }
|
| }
|
| </script>
|
|
|
|
|
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
| </head>
|
|
|
| <body
|
| class="bg-brand-dark text-white min-h-screen flex flex-col font-sans overflow-x-hidden selection:bg-brand-green selection:text-brand-dark relative">
|
|
|
|
|
| <div class="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
|
| <canvas id="bg-canvas" class="absolute top-0 left-0 w-full h-full opacity-40"></canvas>
|
| <div class="absolute top-[-20%] left-[-10%] w-[800px] h-[800px] bg-brand-green/5 rounded-full blur-[120px]">
|
| </div>
|
| <div class="absolute bottom-[-10%] right-[-5%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[100px]">
|
| </div>
|
| </div>
|
|
|
|
|
| <header class="relative z-10 w-full max-w-7xl mx-auto px-6 py-8 flex justify-between items-center">
|
| <div class="flex items-center gap-2">
|
| <div class="w-8 h-8 rounded bg-brand-green flex items-center justify-center text-brand-dark font-bold">
|
| <i class="fa-solid fa-coins"></i>
|
| </div>
|
| <span class="font-bold text-lg tracking-wide">COIN TOSS</span>
|
| </div>
|
|
|
| <a href="https://github.com/madhavmullick2025/COIN-TOSS" target="_blank"
|
| class="text-brand-gray hover:text-white transition-colors">
|
| <i class="fa-brands fa-github text-xl"></i>
|
| </a>
|
| </header>
|
|
|
| <main class="relative z-10 flex-1 flex flex-col items-center justify-center px-4 mb-20">
|
|
|
|
|
| <div class="text-center mb-12 animate-fade-in-up">
|
| <div
|
| class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 mb-8 backdrop-blur-sm">
|
| <i class="fa-solid fa-bolt text-brand-green text-xs"></i>
|
| <span class="text-xs font-semibold text-brand-green tracking-wider uppercase">Powered by
|
| UniversalFakeDetect & DIRET</span>
|
| </div>
|
|
|
| <div class="relative">
|
| <h1 class="text-5xl md:text-7xl font-bold mb-4 leading-tight tracking-tight">
|
| See beyond <br>
|
| <span class="bg-gradient-to-r from-brand-green to-emerald-600 bg-clip-text text-transparent">the
|
| pixels.</span>
|
| </h1>
|
| </div>
|
|
|
| <p class="text-brand-gray max-w-xl mx-auto text-lg leading-relaxed">
|
| Detect AI-generated images with precision. Visualize the artifacts that give them away through advanced
|
| attention mapping and forensic analysis.
|
| </p>
|
| </div>
|
|
|
|
|
| <div class="flex items-center gap-4 mb-8">
|
| <button id="tab-detector"
|
| class="px-6 py-2 rounded-full font-medium transition-all duration-300 bg-white text-black shadow-[0_0_20px_-5px_rgba(255,255,255,0.5)]">
|
| AI Detector
|
| </button>
|
| <button id="tab-risk"
|
| class="px-6 py-2 rounded-full font-medium transition-all duration-300 bg-white/5 text-brand-gray hover:bg-white/10 hover:text-white border border-white/10">
|
| Identity Risk
|
| </button>
|
| </div>
|
|
|
|
|
| <div class="w-full max-w-[580px] perspective-1000">
|
| <div
|
| class="relative group bg-white/[0.03] hover:bg-white/[0.05] border border-white/10 rounded-3xl p-2 transition-all duration-300 backdrop-blur-xl shadow-2xl shadow-black/50">
|
|
|
|
|
| <div id="drop-zone"
|
| class="relative rounded-2xl border border-dashed border-white/20 bg-black/20 h-[300px] flex flex-col items-center justify-center transition-all duration-300 group-hover:border-brand-green/30 cursor-pointer overflow-hidden">
|
|
|
| <input type="file" id="file-input" accept="image/*" class="hidden">
|
|
|
| <div
|
| class="upload-content text-center p-8 transition-transform duration-300 group-hover:-translate-y-2">
|
| <div
|
| class="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-6 border border-white/10 group-hover:scale-110 group-hover:border-brand-green/50 transition-all duration-300">
|
| <i class="fa-solid fa-arrow-up-from-bracket text-brand-green text-xl"></i>
|
| </div>
|
| <h3 class="text-white font-semibold text-xl mb-2">Drag & Drop or <span
|
| class="text-brand-green">Browse</span></h3>
|
| <p class="text-brand-gray text-sm">Supported formats: JPG, PNG, WEBP</p>
|
|
|
| <button
|
| class="mt-6 px-6 py-2.5 rounded-full bg-white/10 hover:bg-white/20 text-sm font-medium transition-all text-white border border-white/5">
|
| Choose File
|
| </button>
|
| </div>
|
|
|
|
|
| <div
|
| class="absolute inset-0 bg-brand-green/10 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none flex items-center justify-center">
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="preview-container"
|
| class="hidden relative h-[300px] w-full rounded-2xl overflow-hidden bg-black/40">
|
| <img id="image-preview" src="" alt="Preview" class="w-full h-full object-contain p-4" />
|
| <button id="remove-btn"
|
| class="absolute top-4 right-4 w-8 h-8 rounded-full bg-black/50 hover:bg-red-500/80 text-white flex items-center justify-center backdrop-blur-md transition-colors border border-white/10">
|
| <i class="fa-solid fa-xmark text-sm"></i>
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="mt-8 flex justify-center">
|
| <button id="analyze-btn" disabled
|
| class="group relative px-8 py-4 rounded-full bg-white text-black font-semibold text-lg flex items-center gap-3 transition-all hover:scale-105 disabled:opacity-50 disabled:hover:scale-100 disabled:cursor-not-allowed shadow-[0_0_40px_-10px_rgba(255,255,255,0.3)]">
|
| <span class="btn-text">Analyze Image</span>
|
| <i
|
| class="fa-solid fa-wand-magic-sparkles text-brand-dark group-hover:rotate-12 transition-transform"></i>
|
|
|
|
|
| <span
|
| class="loader hidden w-5 h-5 border-2 border-brand-dark/30 border-t-brand-dark rounded-full animate-spin ml-2"></span>
|
| </button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="result-container" class="hidden mt-12 w-full max-w-[580px] animate-fade-in-up">
|
| <div class="relative bg-white/[0.03] border border-white/10 rounded-2xl p-6 backdrop-blur-md">
|
| <div class="flex items-center justify-between mb-2">
|
| <span class="text-brand-gray text-sm font-medium uppercase tracking-wider">Detection Result</span>
|
| <span id="model-label" class="text-xs text-brand-gray/50">--</span>
|
| </div>
|
|
|
| <div class="flex items-center gap-4">
|
| <div id="result-badge-container" class="flex-1 flex flex-row items-center justify-between gap-2">
|
| <h2 id="result-badge" class="text-3xl font-bold text-white tracking-tight">--</h2>
|
| <div id="qualification-tag"
|
| class="hidden px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border border-white/10 bg-white/5 text-brand-gray/80">
|
| --
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="confidence-wrapper" class="mt-6 mb-2">
|
| <div class="flex justify-between items-center mb-2">
|
| <span class="text-xs font-medium text-brand-gray uppercase tracking-wider">Confidence
|
| Level</span>
|
| <span id="confidence-value" class="text-sm font-bold text-white">0%</span>
|
| </div>
|
| <div class="w-full h-2 bg-white/10 rounded-full overflow-hidden">
|
| <div id="confidence-bar"
|
| class="h-full w-0 rounded-full transition-all duration-1000 ease-out bg-brand-green"></div>
|
| </div>
|
| </div>
|
|
|
| </div>
|
|
|
|
|
| <div id="explanations-section" class="hidden mt-6 pt-6 border-t border-white/10">
|
| <h3 class="text-sm font-semibold text-brand-gray mb-4 uppercase tracking-wider flex items-center gap-2">
|
| <i class="fa-solid fa-microscope text-brand-green"></i> Analysis Insights
|
| </h3>
|
| <ul id="reasons-list" class="space-y-3">
|
|
|
| </ul>
|
| </div>
|
|
|
|
|
| <div id="advanced-toggle-container" class="mt-8 text-center hidden mb-6 relative z-10">
|
| <button id="advanced-btn"
|
| class="text-brand-gray/60 hover:text-white text-xs font-medium tracking-wide transition-colors duration-300 border border-white/10 px-4 py-2 rounded-lg hover:bg-white/5 backdrop-blur-sm">
|
| <i class="fa-solid fa-chart-simple mr-2"></i>View Advanced Frequency Analysis
|
| </button>
|
| </div>
|
|
|
| <div id="advanced-analysis-section"
|
| class="hidden animate-fade-in-up mb-8 relative z-10 w-full max-w-[580px]">
|
|
|
|
|
| <div class="flex items-end px-2 space-x-1 overflow-x-auto">
|
|
|
| <button id="tab-freq"
|
| class="relative px-4 py-2 text-xs font-medium text-white bg-white/10 rounded-t-lg transition-colors border-t border-x border-white/10 hover:bg-white/20 z-10">
|
| <div class="flex items-center gap-2">
|
| <i class="fa-solid fa-wave-square text-purple-400"></i>
|
| Frequency Map
|
| </div>
|
| </button>
|
|
|
| <button id="tab-pattern"
|
| class="relative px-4 py-2 text-xs font-medium text-brand-gray bg-black/40 rounded-t-lg transition-colors border-t border-x border-white/5 hover:bg-white/5 hover:text-white">
|
| <div class="flex items-center gap-2">
|
| <i class="fa-solid fa-border-all text-blue-400"></i>
|
| Noise Pattern
|
| </div>
|
| </button>
|
|
|
| <div class="flex-1 border-b border-white/10 h-full"></div>
|
| </div>
|
|
|
|
|
| <div
|
| class="bg-black/40 rounded-b-xl rounded-tr-xl border border-white/10 p-5 backdrop-blur-md relative -top-[1px] z-0">
|
|
|
|
|
| <div id="panel-freq" class="block">
|
| <div class="flex items-center justify-between mb-4">
|
| <h3 class="text-white text-xs font-semibold">Frequency Spectrum (FFT)</h3>
|
| <span
|
| class="text-[10px] text-brand-gray bg-white/5 px-2 py-1 rounded border border-white/5">Mathematical
|
| Structure</span>
|
| </div>
|
|
|
| <div class="grid grid-cols-1 gap-6">
|
| <div
|
| class="relative group flex justify-center bg-black/50 rounded-lg p-4 border border-white/5">
|
| <img id="frequency-map-img" src="" alt="Frequency Spectrum"
|
| class="w-64 h-64 object-contain rounded-lg shadow-2xl">
|
| </div>
|
|
|
| <div class="grid grid-cols-2 gap-3">
|
| <div
|
| class="p-3 rounded-lg bg-white/5 border border-white/5 flex flex-col items-center text-center">
|
| <div class="w-2 h-2 bg-white rounded-full shadow-[0_0_5px_white] mb-2"></div>
|
| <p class="text-[10px] font-bold text-white mb-1">Authentic</p>
|
| <p class="text-[10px] text-brand-gray/60 leading-tight">Single center starburst.</p>
|
| </div>
|
| <div
|
| class="p-3 rounded-lg bg-white/5 border border-white/5 flex flex-col items-center text-center">
|
| <div class="grid grid-cols-3 gap-0.5 mb-2 opacity-80 scale-75">
|
| <div class="w-0.5 h-0.5 bg-red-400"></div>
|
| <div class="w-0.5 h-0.5"></div>
|
| <div class="w-0.5 h-0.5 bg-red-400"></div>
|
| <div class="w-0.5 h-0.5"></div>
|
| <div class="w-0.5 h-0.5"></div>
|
| <div class="w-0.5 h-0.5"></div>
|
| <div class="w-0.5 h-0.5 bg-red-400"></div>
|
| <div class="w-0.5 h-0.5"></div>
|
| <div class="w-0.5 h-0.5 bg-red-400"></div>
|
| </div>
|
| <p class="text-[10px] font-bold text-red-300 mb-1">Artificial</p>
|
| <p class="text-[10px] text-brand-gray/60 leading-tight">Grid pattern / bright dots.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div id="panel-pattern" class="hidden">
|
| <div class="flex items-center justify-between mb-4">
|
| <h3 class="text-white text-xs font-semibold">High-Frequency Noise Filter</h3>
|
| <span
|
| class="text-[10px] text-brand-gray bg-white/5 px-2 py-1 rounded border border-white/5">Surface
|
| Artifacts</span>
|
| </div>
|
|
|
| <div class="grid grid-cols-1 gap-6">
|
| <div
|
| class="relative group flex justify-center bg-black/50 rounded-lg p-4 border border-white/5">
|
| <img id="pattern-map-img" src="" alt="Noise Pattern"
|
| class="w-64 h-64 object-contain rounded-lg shadow-2xl filter contrast-125 brightness-110">
|
| </div>
|
|
|
| <div class="p-3 rounded-lg bg-white/5 border border-white/5">
|
| <h4 class="text-[10px] text-brand-gray uppercase font-bold mb-2">What to look for</h4>
|
| <ul class="space-y-2">
|
| <li class="flex items-start gap-2 text-[10px] text-gray-300">
|
| <i class="fa-solid fa-check text-brand-green mt-0.5"></i>
|
| <span><b>Real:</b> Random "Tv Static" or organic grain. No straight
|
| lines.</span>
|
| </li>
|
| <li class="flex items-start gap-2 text-[10px] text-gray-300">
|
| <i class="fa-solid fa-xmark text-red-500 mt-0.5"></i>
|
| <span><b>AI:</b> Visible "Checkerboard" grid lines or squares tiles.</span>
|
| </li>
|
| </ul>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| </div>
|
| </div>
|
|
|
|
|
| <div
|
| class="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-brand-green/50 to-transparent">
|
| </div>
|
| </div>
|
| </div>
|
|
|
| </main>
|
|
|
| <script src="{{ url_for('static', filename='bg-animation.js') }}"></script>
|
| <script src="{{ url_for('static', filename='script.js') }}?v=5"></script>
|
| <style>
|
| .animate-fade-in-up {
|
| animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| @keyframes fadeInUp {
|
| from {
|
| opacity: 0;
|
| transform: translateY(20px);
|
| }
|
|
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
| </style>
|
| </body>
|
|
|
| </html> |
