# 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:
   ```bash
   npm install
   ```

2. Run the Development Server:
   ```bash
   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):
```env
# 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
```