frontend/README.md

Deepfake Forensics Dashboard (Frontend)

This is the React + Vite frontend for the Deepfake Forensics Platform. It provides a sleek, modern, and highly interactive user interface for analysts to upload media, view real-time forensic processing, and review explainable AI (XAI) reports.

Features

• Component Modularization: A clean, maintainable architecture broken down into components (HeroSection, FeaturesGrid, AnalysisTerminal, UploadZone).
• Real-Time SSE Telemetry: Subscribes to Server-Sent Events (/api/status/{job_id}/stream) for low-latency, real-time progress updates instead of interval polling.
• Granular Error Feedback: Enhanced toast notifications provide specific, actionable error messages directly from the backend modules (e.g., rate limits, missing faces).
• Models Overview Dashboard: Displays training metrics, architectures, and ROC-AUC curves for the core ensemble models (EfficientNet-B4 Visual Backbone, Meta-Classifier, Audio CNN, etc.).
• Report Dashboard: Parses the forensic JSON responses from the backend and renders visual evidence, including Grad-CAM heatmaps, bounding boxes, and true SHAP explanations.
• Glassmorphism 2.0 (Deep Slate): Features a breathtaking aesthetic overhaul utilizing a Deep Slate base, inner glass-rim shadows, floating pill UI components, professional typography (Outfit and JetBrains Mono), and advanced CSS micro-animations.

Technologies

• React 18
• Vite
• Recharts (Data Visualization)
• Framer Motion (Micro-Animations & UI Transitions)
• Lucide React (Icons)

Component Architecture

• App.jsx: The main entry point that manages global state, API polling, file upload constraints, and renders the primary navigation.
• ModelsOverview.jsx: A purely informational dashboard displaying deep learning architectures, dataset compositions, and evaluation metrics (ROC-AUC).
• ReportDashboard.jsx: The core analytical view that parses the 15-dimensional forensic JSON response and maps the data to interactive Recharts (Radar, Area, Bar charts). It dynamically updates as background tasks progress.

Installation & Setup

1. Install Dependencies:

   npm install
   

2. Run the Development Server:

   npm run dev
   

The dashboard will be accessible at http://localhost:5173.

Connecting to Backend

Local Development

Ensure that the FastAPI backend is running on http://127.0.0.1:8000. By default, the application will attempt to connect to http://localhost:8000 using the default dev API key.

Production Deployment (Vercel + Hugging Face)

When deploying this frontend to Vercel for production, your backend should be hosted on Hugging Face Spaces. Create a .env file (or set the Vercel Environment Variables in your project dashboard):

# The URL of your Hugging Face Space (e.g. https://username-spacename.hf.space)
VITE_API_URL=https://your-huggingface-space.hf.space
# Your custom API key for security
VITE_API_KEY=your-custom-api-key