Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>AI Video Detector – Instant Video Authenticity Check</title> | |
| <meta name="description" content="Instantly detect whether a video is AI-generated or real. Upload and get your result in seconds." /> | |
| <link rel="stylesheet" href="/css/style.css?v=3" /> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔍</text></svg>" /> | |
| </head> | |
| <body> | |
| <!-- Animated background --> | |
| <div class="bg-canvas" aria-hidden="true"> | |
| <div class="bg-orb"></div> | |
| </div> | |
| <!-- Toast container --> | |
| <div class="toast-container" id="toast-container" aria-live="polite"></div> | |
| <!-- SVG Gradient Defs (hidden) --> | |
| <svg width="0" height="0" style="position:absolute"> | |
| <defs> | |
| <linearGradient id="gaugeGradAI" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#f44c6a"/> | |
| <stop offset="100%" stop-color="#f97316"/> | |
| </linearGradient> | |
| <linearGradient id="gaugeGradReal" x1="0%" y1="0%" x2="100%" y2="0%"> | |
| <stop offset="0%" stop-color="#22d3a0"/> | |
| <stop offset="100%" stop-color="#4f8ef7"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <div class="page-wrap"> | |
| <!-- ── Navbar ──────────────────────────────────────────────── --> | |
| <nav class="navbar" role="navigation" aria-label="Main navigation"> | |
| <div class="nav-brand"> | |
| <div class="nav-logo" aria-hidden="true">🔍</div> | |
| <span class="nav-title">AI Video Detector</span> | |
| </div> | |
| <div class="nav-status" id="nav-status" aria-live="polite"> | |
| <div class="status-dot offline" id="status-dot"></div> | |
| <span id="status-text">Connecting…</span> | |
| </div> | |
| </nav> | |
| <!-- ── Hero ────────────────────────────────────────────────── --> | |
| <header class="hero" role="banner"> | |
| <h1 class="hero-title"> | |
| Is this video <span class="gradient-text">AI Generated?</span> | |
| </h1> | |
| <p class="hero-sub"> | |
| Upload any video and get an instant authenticity verdict. | |
| Powered by deep learning — no sign-up required. | |
| </p> | |
| </header> | |
| <!-- ── Detector Card ────────────────────────────────────────── --> | |
| <main class="detector-card" id="detector-main" role="main" aria-label="Video detection interface"> | |
| <!-- Upload Zone --> | |
| <div | |
| class="upload-zone" | |
| id="upload-zone" | |
| role="button" | |
| tabindex="0" | |
| aria-label="Upload video file. Click or drag and drop." | |
| aria-dropeffect="copy" | |
| > | |
| <div class="upload-icon" aria-hidden="true">🎬</div> | |
| <p class="upload-title">Drop your video here</p> | |
| <p class="upload-sub">or click to browse files</p> | |
| <div class="upload-formats" aria-label="Supported formats"> | |
| <span class="fmt-tag">.MP4</span> | |
| <span class="fmt-tag">.AVI</span> | |
| <span class="fmt-tag">.MKV</span> | |
| <span class="fmt-tag">.MOV</span> | |
| <span class="fmt-tag">.WEBM</span> | |
| </div> | |
| </div> | |
| <input | |
| type="file" | |
| id="file-input" | |
| accept=".mp4,.avi,.mkv,.mov,.webm,video/*" | |
| aria-label="Select video file" | |
| /> | |
| <!-- Video Preview --> | |
| <div class="preview-area" id="preview-area" aria-label="Video preview"> | |
| <video id="preview-video" controls preload="metadata" aria-label="Preview of uploaded video"></video> | |
| <div class="preview-info"> | |
| <span class="preview-name" id="preview-name"></span> | |
| <span class="preview-meta" id="preview-meta"></span> | |
| <button class="preview-remove" id="btn-remove" aria-label="Remove selected video">✕ Remove</button> | |
| </div> | |
| </div> | |
| <!-- Analyze Button --> | |
| <button | |
| class="btn-analyze" | |
| id="btn-analyze" | |
| disabled | |
| aria-label="Analyze video for AI generation" | |
| aria-busy="false" | |
| > | |
| <div class="btn-spinner" aria-hidden="true"></div> | |
| <span class="btn-label">⚡ Analyze Video</span> | |
| </button> | |
| <!-- Progress --> | |
| <div class="progress-wrap" id="progress-wrap" aria-label="Analysis progress" aria-live="polite"> | |
| <div class="progress-header"> | |
| <span id="progress-label">Analyzing…</span> | |
| <span id="progress-pct">0%</span> | |
| </div> | |
| <div class="progress-bar-track" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Analysis progress"> | |
| <div class="progress-bar-fill" id="progress-bar"></div> | |
| </div> | |
| <div class="progress-steps"> | |
| <span class="pstep" id="ps-upload">📤 Uploading</span> | |
| <span class="pstep" id="ps-extract">🎞️ Reading Video</span> | |
| <span class="pstep" id="ps-cnn">🧠 Analyzing</span> | |
| <span class="pstep" id="ps-lstm">⏱️ Processing</span> | |
| <span class="pstep" id="ps-verdict">⚖️ Verdict</span> | |
| </div> | |
| </div> | |
| <!-- Results Panel --> | |
| <section class="results-panel" id="results-panel" aria-label="Analysis results" aria-live="polite"> | |
| <div class="result-card" id="result-card"> | |
| <div class="result-layout"> | |
| <!-- Gauge --> | |
| <div class="gauge-wrap" aria-hidden="true"> | |
| <svg class="gauge-svg" viewBox="0 0 160 160" id="gauge-svg"> | |
| <circle class="gauge-track" cx="80" cy="80" r="64" | |
| stroke-dasharray="330" stroke-dashoffset="0" | |
| transform="rotate(-230 80 80)" /> | |
| <circle class="gauge-fill" id="gauge-fill" | |
| cx="80" cy="80" r="64" | |
| stroke-dasharray="330" stroke-dashoffset="330" | |
| transform="rotate(-230 80 80)" /> | |
| <text class="gauge-center" id="gauge-pct-text" | |
| x="80" y="75" text-anchor="middle" dominant-baseline="middle">--</text> | |
| <text class="gauge-label-svg" | |
| x="80" y="95" text-anchor="middle" dominant-baseline="middle">Confidence</text> | |
| </svg> | |
| </div> | |
| <!-- Info --> | |
| <div class="result-info"> | |
| <div class="verdict-badge" id="verdict-badge" role="status" aria-live="polite"> | |
| <span class="verdict-icon" id="verdict-icon"></span> | |
| <span id="verdict-text"></span> | |
| </div> | |
| <div class="result-metrics" role="list"> | |
| <div class="metric-item" role="listitem"> | |
| <div class="metric-label">Confidence Score</div> | |
| <div class="metric-value" id="m-conf"></div> | |
| </div> | |
| <div class="metric-item" role="listitem"> | |
| <div class="metric-label">AI Probability</div> | |
| <div class="metric-value" id="m-prob"></div> | |
| </div> | |
| <div class="metric-item" role="listitem"> | |
| <div class="metric-label">Processing Time</div> | |
| <div class="metric-value blue" id="m-time"></div> | |
| </div> | |
| <div class="metric-item" role="listitem"> | |
| <div class="metric-label">Result</div> | |
| <div class="metric-value" id="m-thresh"></div> | |
| </div> | |
| </div> | |
| <p class="result-desc" id="result-desc" role="note"></p> | |
| <button class="btn-reset" id="btn-reset" aria-label="Analyze another video"> | |
| ↩ Check Another Video | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- ── Footer ───────────────────────────────────────────────── --> | |
| <footer role="contentinfo"> | |
| <span class="footer-brand">AI Video Detector</span> | |
| <span>© 2025 · All rights reserved</span> | |
| </footer> | |
| </div><!-- /page-wrap --> | |
| <script src="/js/app.js?v=3"></script> | |
| </body> | |
| </html> | |