feat: Add Dockerfile for multi-stage build and Nginx serving for Hugging Face Spaces, and update INSTRUCTIONS.md to guide Spaces deployment.

Dockerfile

@@ -0,0 +1,97 @@
+# Multi-stage Dockerfile for Hugging Face Spaces
+# This Dockerfile builds the React frontend and serves it alongside the Flask backend
+# It automatically fixes the localhost:5000 URLs to work in the Space environment
+
+# ---------------------------------------
+# Stage 1: Build Frontend
+# ---------------------------------------
+FROM node:18-alpine as frontend-build
+WORKDIR /app/frontend
+
+# Install dependencies
+COPY frontend/package*.json ./
+RUN npm ci
+
+# Copy source code
+COPY frontend/ .
+
+# MAGIC FIX: Replace hardcoded localhost:5000 with empty string (relative paths)
+# This allows the frontend to talk to the backend on the same domain/port via Nginx
+RUN sed -i 's|http://localhost:5000||g' src/App.tsx
+RUN sed -i 's|http://localhost:5000||g' src/components/StatusPage.tsx
+
+# Build React app
+RUN npm run build
+
+# ---------------------------------------
+# Stage 2: Production Image (Python + Nginx)
+# ---------------------------------------
+FROM python:3.10-slim
+WORKDIR /app
+
+# Install Nginx and system dependencies for OpenCV
+RUN apt-get update && apt-get install -y \
+    nginx \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY backend/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy Backend Code
+COPY backend/ .
+
+# Copy Frontend Build from Stage 1
+COPY --from=frontend-build /app/frontend/build /app/frontend_build
+
+# Configure Nginx
+# We configure it to listen on port 7860 (Hugging Face default)
+# It serves the React app static files
+# And proxies API requests to the Flask backend on port 5000
+RUN echo 'server { \
+    listen 7860; \
+    server_name localhost; \
+    \
+    # Increase body size for video uploads \
+    client_max_body_size 100M; \
+    \
+    location / { \
+    root /app/frontend_build; \
+    index index.html; \
+    try_files $uri $uri/ /index.html; \
+    } \
+    \
+    # Proxy API endpoints to Flask \
+    location /analyze { \
+    proxy_pass http://127.0.0.1:5000; \
+    proxy_read_timeout 300; \
+    } \
+    location /upload { \
+    proxy_pass http://127.0.0.1:5000; \
+    } \
+    location /health { \
+    proxy_pass http://127.0.0.1:5000; \
+    } \
+    location /debug-model { \
+    proxy_pass http://127.0.0.1:5000; \
+    proxy_read_timeout 300; \
+    } \
+    }' > /etc/nginx/sites-available/default
+
+# Create model cache directory with permissions
+RUN mkdir -p model_cache && chmod 777 model_cache
+
+# Create startup script
+RUN echo '#!/bin/bash\n\
+    # Start Flask in background\n\
+    python app.py &\n\
+    # Start Nginx in foreground\n\
+    nginx -g "daemon off;"' > /app/start.sh && chmod +x /app/start.sh
+
+# Expose Hugging Face Space port
+EXPOSE 7860
+
+# Run the startup script
+CMD ["/app/start.sh"]

INSTRUCTIONS.md

@@ -1,112 +1,67 @@
-# Deepfake Detector - Setup Guide
+# Deepfake Detector - Deployment Guide
 
-This project is a full-stack application for detecting deepfakes in videos using a custom Hugging Face model. It consists of a React frontend and a Flask backend.
+## 🌍 Deploying to Hugging Face Spaces
 
-## 🚀 Quick Start with Docker (Recommended)
+This project is configured to be deployed easily to Hugging Face Spaces using Docker.
 
-The easiest way to run the project is using Docker. This ensures all dependencies (including system libraries for video processing) are correctly installed.
+### 1. Create a New Space
+1.  Go to [huggingface.co/spaces](https://huggingface.co/spaces) and click **Create new Space**.
+2.  **Name**: `deepfake-detector` (or anything you like).
+3.  **License**: MIT (or your choice).
+4.  **SDK**: Select **Docker**.
+5.  **Template**: Leave as "Blank".
+6.  **Visibility**: Public.
 
-### Prerequisites
-- [Docker](https://www.docker.com/products/docker-desktop/) installed on your machine.
-- [Git](https://git-scm.com/downloads) installed.
-- A **Hugging Face Token** (Read access). Get one [here](https://huggingface.co/settings/tokens).
+### 2. Upload Code
+You can upload the code directly via the web interface or using Git.
 
-### Steps
+**Using Git (Recommended):**
+```bash
+# Clone your Space
+git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
 
-1.  **Clone the repository:**
-    ```bash
-    git clone https://github.com/namandhakad712/Deepfake-detector.git
-    cd Deepfake-detector
-    ```
-
-2.  **Set up Environment Variables:**
-    Create a `.env` file in the root directory (or just set the variable in your terminal) to store your Hugging Face token.
-    
-    **Option A: Create a .env file**
-    Create a file named `.env` in the root folder and add:
-    ```env
-    HUGGINGFACE_TOKEN=your_hf_token_here
-    ```
-
-    **Option B: Pass it directly (Linux/Mac/PowerShell)**
-    ```bash
-    export HUGGINGFACE_TOKEN=your_hf_token_here
-    ```
-
-3.  **Run with Docker Compose:**
-    ```bash
-    docker-compose up --build
-    ```
+# Copy all files from this project into the Space folder
+cp -r Deepfake-detector/* YOUR_SPACE_NAME/
 
-4.  **Access the App:**
-    - **Frontend:** Open [http://localhost:3000](http://localhost:3000) in your browser.
-    - **Backend API:** Running at [http://localhost:5000](http://localhost:5000).
+# Push to Hugging Face
+cd YOUR_SPACE_NAME
+git add .
+git commit -m "Initial deploy"
+git push
+```
 
----
+### 3. Configure Secrets (CRITICAL)
+For the model to load, you need to provide your Hugging Face token.
 
-## 🛠️ Manual Installation (Without Docker)
+1.  Go to your Space's **Settings** tab.
+2.  Scroll to **Variables and secrets**.
+3.  Click **New secret**.
+    *   **Name**: `HUGGINGFACE_TOKEN`
+    *   **Value**: Your Hugging Face Access Token (get it [here](https://huggingface.co/settings/tokens)).
 
-If you prefer to run it manually, you'll need two terminal windows.
+### 4. Wait for Build
+The Space will start building. It may take a few minutes to:
+1.  Build the React frontend.
+2.  Install Python dependencies.
+3.  Download the model (on first run).
 
-### Backend Setup
-
-1.  Navigate to the backend folder:
-    ```bash
-    cd backend
-    ```
-
-2.  Create and activate a virtual environment (optional but recommended):
-    ```bash
-    python -m venv venv
-    # Windows:
-    .\venv\Scripts\activate
-    # Mac/Linux:
-    source venv/bin/activate
-    ```
+Once "Running", your app is live! 🚀
 
-3.  Install dependencies:
-    ```bash
-    pip install -r requirements.txt
-    ```
+---
 
-4.  Create a `.env` file in the `backend` folder:
-    ```env
-    HUGGINGFACE_TOKEN=your_hf_token_here
-    ```
+## 🐳 Running Locally with Docker
 
-5.  Run the server:
-    ```bash
-    python app.py
-    ```
-
-### Frontend Setup
+If you just want to run it on your machine:
 
-1.  Navigate to the frontend folder:
+1.  **Set your token:**
     ```bash
-    cd frontend
+    # PowerShell
+    $env:HUGGINGFACE_TOKEN="your_token_here"
     ```
 
-2.  Install dependencies:
+2.  **Run:**
     ```bash
-    npm install
-    ```
-
-3.  Start the development server:
-    ```bash
-    npm start
+    docker-compose up --build
     ```
 
-4.  Open [http://localhost:3000](http://localhost:3000).
-
----
-
-## 🏗️ Project Structure
-
-- **frontend/**: React application (TypeScript, Styled Components).
-- **backend/**: Flask API (PyTorch, Transformers, OpenCV).
-- **docker-compose.yml**: Orchestrates the multi-container setup.
-
-## ⚠️ Troubleshooting
-
-- **Model Loading Error:** Ensure your `HUGGINGFACE_TOKEN` is valid and has read permissions. The first run will take some time to download the model (~500MB).
-- **CORS Errors:** If the frontend cannot talk to the backend, ensure both are running and the backend allows requests from `http://localhost:3000`.
+3.  **Open:** [http://localhost:3000](http://localhost:3000)