Hugging Face's logo

Spaces:
ImgAuth
/
app
Running

App Files Community
app / frontend /index.html
Raksha11's picture
Raksha11
Deploy: integrate visual style analysis, remove filename scoring layer
c53fe07
Raw
History Blame Contribute Delete
30 kB
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>ImgAuth AI — Check if an Image is AI-Generated</title>
 <meta name="description" content="Free AI image authenticity checker. Upload any image to instantly find out if it is real or AI-generated. Private, fast, no account needed." />
 <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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
 <link rel="stylesheet" href="/static/css/style.css" />
</head>
<body>
<!-- ── HEADER ─────────────────────────────────────────────────── -->
 <header class="header">
 <div class="header-inner">
 <a class="logo" href="/">
 <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
 <rect width="32" height="32" rx="8" fill="url(#lg1)"/>
 <path d="M8 22L13 12L17 19L20 15L24 22H8Z" fill="white" opacity="0.9"/>
 <circle cx="22" cy="11" r="3" fill="white" opacity="0.75"/>
 <defs>
 <linearGradient id="lg1" x1="0" y1="0" x2="32" y2="32">
 <stop stop-color="#7c3aed"/><stop offset="1" stop-color="#a855f7"/>
 </linearGradient>
 </defs>
 </svg>
 <span>ImgAuth <span class="logo-accent">AI</span></span>
 </a>
 <nav class="nav-links">
 <a href="#how-it-works" class="nav-link">How it works</a>
 <a href="#about" class="nav-link">About</a>
 <a href="#team" class="nav-link">Team</a>
 <button class="theme-btn" data-theme-toggle aria-label="Toggle theme">🌙</button>
 </nav>
 </div>
 </header>
<!-- ── HERO ───────────────────────────────────────────────────── -->
 <section class="hero">
 <div class="hero-eyebrow">
 <svg width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="5" fill="currentColor"/></svg>
 AI Image Authenticity Checker
 </div>
 <h1>Check if an image is<br><span class="grad">AI-generated</span></h1>
 <p class="hero-sub">Upload any image and our AI analyzes visual patterns, metadata, and forensic signals to estimate whether it was AI-generated or authentic.</p>
 <div class="hero-stats">
 <div class="stat"><div class="stat-num">3+</div><div class="stat-label">AI Models</div></div>
 <div class="stat"><div class="stat-num">5+</div><div class="stat-label">Forensic Signals</div></div>
 <div class="stat"><div class="stat-num">100%</div><div class="stat-label">Private</div></div>
 </div>
 </section>
<!-- ── UPLOAD ─────────────────────────────────────────────────── -->
 <section class="upload-section" id="uploadSection">
 <div class="upload-card" id="uploadCard">
 <!-- Drop Zone -->
 <div class="drop-zone" id="dropZone">
 <div class="drop-icon">
 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
 <polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
 </svg>
 </div>
 <p class="drop-title">Drop your image here</p>
 <p class="drop-sub">PNG, JPG, or WEBP · Max 10 MB</p>
 <label class="btn btn-primary" for="fileInput">Select Image</label>
 <input type="file" id="fileInput" accept="image/*" hidden />
 <p class="drop-hint">or drag and drop</p>
 </div>
<!-- Preview Zone -->
 <div class="preview-zone" id="previewZone" style="display:none">
 <div class="preview-img-box">
 <img id="previewImg" src="" alt="Selected image preview" />
 </div>
 <div class="preview-filename" id="previewFilename">—</div>
 <div class="preview-actions">
 <button class="btn btn-primary" id="analyzeBtn">
 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
 Check Image
 </button>
 <button class="btn btn-ghost" id="clearBtn">Choose Different</button>
 </div>
 </div>
 </div>
 </section>
<!-- ── LOADING OVERLAY ────────────────────────────────────────── -->
 <div class="loading-overlay" id="loadingOverlay" style="display:none">
 <div class="loading-card">
 <div class="spinner-ring"></div>
 <p class="loading-title">Analyzing your image</p>
 <p class="loading-sub">This usually takes 10–30 seconds</p>
 <div class="steps-list">
 <div class="step" id="step1">Reading image metadata</div>
 <div class="step" id="step2">Analyzing visual textures</div>
 <div class="step" id="step3">Running AI detection models</div>
 <div class="step" id="step4">Checking camera fingerprint</div>
 <div class="step" id="step5">Mapping pixel irregularities</div>
 <div class="step" id="step6">Calculating authenticity score</div>
 </div>
 </div>
 </div>
<!-- ── RESULT SECTION ─────────────────────────────────────────── -->
 <section class="result-section" id="resultSection" style="display:none">
 <div class="result-wrap">
<!-- Verdict Card -->
 <div class="verdict-card">
 <div class="verdict-layout">
 <div class="result-img-panel">
 <img id="resultImg" src="" alt="Analyzed image" />
 </div>
 <div class="verdict-info">
 <!-- Badge + Confidence -->
 <div>
 <div class="verdict-badge" id="resultBadge">—</div>
 </div>
 <h2 class="verdict-heading" id="resultVerdict">—</h2>
 <p class="confidence-label" id="resultConfidenceLevel">—</p>
<!-- Gauge Bar -->
 <div class="gauge-wrap">
 <div class="gauge-meta">
 <span>Likely Authentic</span>
 <span>Likely AI-Generated</span>
 </div>
 <div class="gauge-track">
 <div class="gauge-fill" id="gaugeFill" style="width:0%"></div>
 <div class="gauge-dot" id="gaugeDot" style="left:0%"></div>
 </div>
 <div class="gauge-vals">
 <span id="realPct">—</span>
 <span id="aiPct">—</span>
 </div>
 </div>
<!-- Summary -->
 <p class="verdict-summary-text" id="resultSummary">—</p>
 </div>
 </div>
 </div>
<!-- Why This Result -->
 <div>
 <p class="result-block-title">Why this result?</p>
 <div class="why-grid">
 <div class="why-card">
 <div class="why-icon purple">🎨</div>
 <h4>Visual Patterns</h4>
 <p id="explainVisual">—</p>
 </div>
 <div class="why-card">
 <div class="why-icon blue">🤖</div>
 <h4>AI Model Analysis</h4>
 <p id="explainModels">—</p>
 </div>
 <div class="why-card">
 <div class="why-icon teal">📷</div>
 <h4>Metadata Check</h4>
 <p id="explainMetadata">—</p>
 </div>
 </div>
 </div>
<!-- AI Focus Areas -->
 <div id="focusAreas" style="display:none">
 <p class="result-block-title">AI Focus Areas</p>
 <div class="focus-grid">
 <div class="focus-card">
 <h4>AI Attention Areas</h4>
 <p>Where our models focused most during analysis.</p>
 <div class="heatmap-box">
 <img id="attentionHeatmapImg" src="" alt="AI Attention Map" />
 </div>
 </div>
 <div class="focus-card" id="dfiCardContainer" style="display:none">
 <h4>Pattern Irregularities</h4>
 <p>Texture inconsistencies detected in pixel patterns.</p>
 <div class="heatmap-box">
 <img id="dfiHeatmapImg" src="" alt="Pattern Irregularities" />
 </div>
 </div>
 </div>
 </div>
<!-- Advanced Technical Analysis (Collapsed) -->
 <div class="verdict-card adv-section" id="advancedDetails">
 <button class="adv-toggle" id="advancedToggle" aria-expanded="false">
 <span>Show Technical Analysis</span>
 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
 <polyline points="6 9 12 15 18 9"/>
 </svg>
 </button>
 <div class="adv-body" id="advancedBody" style="display:none">
 <div class="adv-grid" id="advancedContent"></div>
 </div>
 </div>
<!-- CTA -->
 <div class="result-cta">
 <button class="btn btn-primary" id="newScanBtn">Check Another Image</button>
 </div>
</div>
 </section>
<!-- ── HOW IT WORKS ────────────────────────────────────────────── -->
 <section class="how-section" id="how-it-works">
 <div class="page-wrap">
 <div class="section-header">
 <div class="section-tag">Simple Process</div>
 <h2 class="section-title">How It Works</h2>
 <p class="section-desc">Three simple steps to check any image in seconds.</p>
 </div>
 <div class="how-grid">
 <div class="how-card">
 <div class="how-num">01</div>
 <h3>Upload an image</h3>
 <p>PNG, JPG, or WEBP. Your image is processed instantly in memory and never stored on our servers.</p>
 </div>
 <div class="how-card">
 <div class="how-num">02</div>
 <h3>AI analyzes patterns</h3>
 <p>We run multiple deep learning models and forensic checks on visual textures, metadata, and pixel patterns.</p>
 </div>
 <div class="how-card">
 <div class="how-num">03</div>
 <h3>Get your estimate</h3>
 <p>Receive a clear authenticity score with simple explanations of why the result was reached.</p>
 </div>
 </div>
 </div>
 </section>
<!-- ── ABOUT ───────────────────────────────────────────────────── -->
 <section class="about-section" id="about">
 <div class="page-wrap">
 <div class="about-grid">
 <div class="about-text">
 <div class="section-tag">College Major Project</div>
 <h2>About ImgAuth AI</h2>
 <p>ImgAuth AI is an academic AI and cybersecurity project developed to detect AI-generated or manipulated images using deep learning and forensic analysis techniques.</p>
 <p>The platform combines multiple state-of-the-art AI models and forensic signals to estimate whether an image may be synthetic or authentic — making cutting-edge detection accessible to everyone.</p>
 <p>Built as a college major project focused on AI safety, digital trust, and media authenticity in an age of rapidly advancing generative AI.</p>
 </div>
 <div class="about-visual">
 <div class="about-stat-grid">
 <div class="about-stat">
 <div class="about-stat-num">3</div>
 <div class="about-stat-label">AI Detection Models</div>
 </div>
 <div class="about-stat">
 <div class="about-stat-num">5+</div>
 <div class="about-stat-label">Forensic Analyzers</div>
 </div>
 <div class="about-stat">
 <div class="about-stat-num">0</div>
 <div class="about-stat-label">Images Stored</div>
 </div>
 <div class="about-stat">
 <div class="about-stat-num">4</div>
 <div class="about-stat-label">Team Members</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- ── PROJECT HIGHLIGHTS ─────────────────────────────────────── -->
 <section class="highlights-section" id="highlights">
 <div class="page-wrap">
 <div class="section-header">
 <div class="section-tag">Capabilities</div>
 <h2 class="section-title">Project Highlights</h2>
 <p class="section-desc">What makes ImgAuth AI powerful under the hood.</p>
 </div>
 <div class="highlights-grid">
 <div class="highlight-card">
 <div class="highlight-icon">🧠</div>
 <h4>Multi-Model AI Detection</h4>
 <p>Three independent deep learning models vote on whether an image is AI-generated, increasing accuracy and reducing bias.</p>
 </div>
 <div class="highlight-card">
 <div class="highlight-icon">🔬</div>
 <h4>Visual Forensic Analysis</h4>
 <p>Noise kurtosis, FFT spectral analysis, and deep feature inconsistency mapping expose subtle AI generation artifacts.</p>
 </div>
 <div class="highlight-card">
 <div class="highlight-icon">🗺️</div>
 <h4>Explainable AI Visualization</h4>
 <p>Heatmaps and attention maps highlight exactly which regions of the image influenced the detection result.</p>
 </div>
 <div class="highlight-card">
 <div class="highlight-icon">🔒</div>
 <h4>Privacy-Focused Processing</h4>
 <p>All analysis happens in-memory. Images are never written to disk, stored in databases, or shared with third parties.</p>
 </div>
 <div class="highlight-card">
 <div class="highlight-icon">⚡</div>
 <h4>Real-Time Image Scanning</h4>
 <p>Fast pipeline design minimizes model load time. Results are typically delivered within 10–30 seconds.</p>
 </div>
 <div class="highlight-card">
 <div class="highlight-icon">📊</div>
 <h4>Confidence Scoring System</h4>
 <p>A weighted ensemble scoring engine combines all signals into a single, calibrated authenticity confidence score.</p>
 </div>
 </div>
 </div>
 </section>
<!-- ── TECHNOLOGY STACK ────────────────────────────────────────── -->
 <section class="tech-section" id="tech">
 <div class="page-wrap">
 <div class="section-header">
 <div class="section-tag">Built With</div>
 <h2 class="section-title">Technology Stack</h2>
 <p class="section-desc">Modern tools and frameworks powering the platform.</p>
 </div>
 <div class="tech-grid">
 <div class="tech-group">
 <div class="tech-group-label">Frontend</div>
 <div class="tech-chips">
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#e34c26"></span>HTML5</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#264de4"></span>CSS3</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#f7df1e"></span>JavaScript</span>
 </div>
 </div>
 <div class="tech-group">
 <div class="tech-group-label">Backend</div>
 <div class="tech-chips">
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#009688"></span>FastAPI</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#3776ab"></span>Python 3.11</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#10b981"></span>Uvicorn</span>
 </div>
 </div>
 <div class="tech-group">
 <div class="tech-group-label">AI / ML</div>
 <div class="tech-chips">
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#ee4c2c"></span>PyTorch</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#f59e0b"></span>HuggingFace</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#7c3aed"></span>ViT Model</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#a855f7"></span>CNN Model</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#06b6d4"></span>OpenCV</span>
 </div>
 </div>
 <div class="tech-group">
 <div class="tech-group-label">Deployment</div>
 <div class="tech-chips">
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#ff6b35"></span>HuggingFace Spaces</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#24292e"></span>Docker</span>
 <span class="tech-chip"><span class="tech-chip-dot" style="background:#2563eb"></span>GitHub</span>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- ── MEET THE TEAM ───────────────────────────────────────────── -->
 <section class="team-section" id="team">
 <div class="page-wrap">
 <div class="section-header">
 <div class="section-tag">The Builders</div>
 <h2 class="section-title">Meet the Team</h2>
 <p class="section-desc">Four students building at the intersection of AI, cybersecurity, and design.</p>
 </div>
 <div class="team-grid">
<!-- Vishal -->
 <div class="team-card">
 <div class="team-avatar team-avatar--photo" style="background-image:url('https://raw.githubusercontent.com/Raksha-dev11/ImgAuth/main/frontend/static/images/vishal.jpeg'); background-size: 90%; background-position: center 15%;"></div>
 <div class="team-name">Vishal Chauhan</div>
 <div class="team-role">Project Lead &amp; Detection Logic</div>
 <div class="team-branch">CCS</div>
 <p class="team-desc">Designed overall architecture, coordinated module integration, defined the scoring strategy, and supervised technical direction and core detector logic.</p>
 <div class="team-links">
 <a href="https://github.com/metaexploder" class="team-link" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.509 11.509 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
 </a>
 <a href="https://www.linkedin.com/in/vishal8448" class="team-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
 </a>
 </div>
 </div>
<!-- Prince Mishra -->
 <div class="team-card">
 <div class="team-avatar team-avatar--photo" style="background-image:url('https://raw.githubusercontent.com/Raksha-dev11/ImgAuth/main/frontend/static/images/princemishra.jpeg')"></div>
 <div class="team-name">Prince Mishra</div>
 <div class="team-role">Backend &amp; API Developer</div>
 <div class="team-branch">CSE</div>
 <p class="team-desc">Implemented FastAPI routes, file validation, request handling, backend orchestration, and API-result communication between all system layers.</p>
 <div class="team-links">
 <a href="https://github.com/Prince1605" class="team-link" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.509 11.509 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
 </a>
 <a href="https://www.linkedin.com/in/prince-mishra-86bb8b343/" class="team-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
 </a>
 </div>
 </div>
<!-- Prince Dubey -->
 <div class="team-card">
 <div class="team-avatar team-avatar--photo" style="background-image:url('https://raw.githubusercontent.com/Raksha-dev11/ImgAuth/main/frontend/static/images/princedubey.jpeg')"></div>
 <div class="team-name">Prince Dubey</div>
 <div class="team-role">Security, Testing &amp; Docs</div>
 <div class="team-branch">CSE</div>
 <p class="team-desc">Managed QA workflows, testing strategies, bug tracking, documentation, and security review of file handling and user interactions.</p>
 <div class="team-links">
 <a href="https://github.com/PR1NC3-DUB3Y" class="team-link" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.509 11.509 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
 </a>
 <a href="https://www.linkedin.com/in/prince-dubey-8a0b65271" class="team-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
 </a>
 </div>
 </div>
<!-- Raksha -->
 <div class="team-card">
 <div class="team-avatar team-avatar--photo" style="background-image:url('https://raw.githubusercontent.com/Raksha-dev11/ImgAuth/main/frontend/static/images/raksha.jpeg'); background-size: 90%; background-position: center 15%;"></div>
 <div class="team-name">Raksha</div>
 <div class="team-role">Frontend &amp; UI Developer</div>
 <div class="team-branch">CSE</div>
 <p class="team-desc">Designed the upload interface, result dashboard, theme system, history display, and client-side interaction logic throughout the application.</p>
 <div class="team-links">
 <a href="https://github.com/Raksha-dev11" class="team-link" aria-label="GitHub" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 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.23A11.509 11.509 0 0 1 12 5.803c1.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.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
 </a>
 <a href="https://www.linkedin.com/in/raksha-thakur-ba9316326" class="team-link" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer">
 <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
 </a>
 </div>
 </div>
</div>
 </div>
 </section>
<!-- ── FOOTER ──────────────────────────────────────────────────── -->
 <footer class="footer">
 <div class="footer-inner">
 <div class="footer-top">
 <div>
 <div class="footer-brand-name">ImgAuth <span class="logo-accent">AI</span></div>
 <p class="footer-brand-desc">A college AI &amp; cybersecurity project. Detect AI-generated images using deep learning and forensic analysis.</p>
 <p class="footer-privacy-note">🔒 Images are processed in-memory and never permanently stored.</p>
 </div>
 <div class="footer-col">
 <h5>Product</h5>
 <ul>
 <li><a href="#uploadSection">Check an Image</a></li>
 <li><a href="#how-it-works">How it works</a></li>
 <li><a href="#highlights">Features</a></li>
 </ul>
 </div>
 <div class="footer-col">
 <h5>Project</h5>
 <ul>
 <li><a href="#about">About</a></li>
 <li><a href="#tech">Tech Stack</a></li>
 <li><a href="#team">Meet the Team</a></li>
 </ul>
 </div>
 <div class="footer-col">
 <h5>Resources</h5>
 <ul>
 <li><a href="https://github.com" target="_blank" rel="noopener">GitHub</a></li>
 <li><a href="https://huggingface.co/umm-maybe/AI-image-detector" target="_blank" rel="noopener">umm-maybe Model</a></li>
 <li><a href="https://huggingface.co/dima806/ai_vs_real_image_detection" target="_blank" rel="noopener">dima806 Model</a></li>
 </ul>
 </div>
 </div>
 <div class="footer-bottom">
 <p class="footer-copy">&copy; 2026 ImgAuth AI &mdash; Built by Team VisionGuard</p>
 <p class="footer-attribution">
 Powered by:
 <a href="https://huggingface.co/umm-maybe/AI-image-detector" target="_blank" rel="noopener">umm-maybe/AI-image-detector</a> &middot;
 <a href="https://huggingface.co/dima806/ai_vs_real_image_detection" target="_blank" rel="noopener">dima806/ai_vs_real_image_detection</a> &middot;
 <a href="https://huggingface.co/Organika/sdxl-detector" target="_blank" rel="noopener">Organika/sdxl-detector</a>
 </p>
 </div>
 </div>
 </footer>
<script src="/static/js/app.js"></script>
</body>
</html>