CoolFace
Apppublic

Siddharthk1/Drone-Detection-Tracking

sourceHugging Faceupdated 5mo agoView on Hugging Face
0likes
App README

๐Ÿš Drone Tracking Web Application

A full-stack real-time drone detection and tracking system built with FastAPI backend and React frontend.

Features

  • โ€”Real-time Video Feed: Live camera stream with drone detection overlay
  • โ€”YOLO + DeepSORT Integration: Advanced object detection and tracking
  • โ€”Real-time Notifications: WebSocket-based instant alerts for new detections
  • โ€”Interactive Dashboard: Modern React UI with Material-UI components
  • โ€”Detection Database: SQLite storage for all detection records
  • โ€”Interactive Map: Leaflet map showing drone detection locations
  • โ€”Statistics Tracking: Daily detection counts and analytics

System Requirements

  • โ€”Python 3.8+
  • โ€”Node.js 16+
  • โ€”Camera/Webcam
  • โ€”YOLO model file (best.pt)

Quick Start

1. Clone and Setup Backend

bash
# Navigate to backend directory
cd backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# On Windows:
venv\Scripts\activate
# On macOS/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

2. Add Your YOLO Model

Place your trained YOLO model file (best.pt) in the backend directory, or update the MODEL_PATH in main.py:

python
MODEL_PATH = "path/to/your/model.pt"

3. Start Backend Server

bash
# Start FastAPI server
uvicorn main:app --reload --host 0.0.0.0 --port 8000

The backend will be available at: http://localhost:8000

4. Setup Frontend

bash
# Navigate to frontend directory
cd ../frontend

# Install dependencies
npm install

# Start development server
npm run dev

The frontend will be available at: http://localhost:3000

Usage

  1. 1.Start the Application: Open http://localhost:3000 in your browser
  2. 2.Start Camera: Click the "Start Camera" button to begin detection
  3. 3.View Live Feed: Watch the real-time video with detection overlays
  4. 4.Monitor Detections: See new drone alerts and view detection statistics
  5. 5.Check Map: View detection locations on the interactive map
  6. 6.Review Data: Browse today's detections in the data table

API Endpoints

Camera Control

  • โ€”POST /camera/start - Start camera tracking
  • โ€”POST /camera/stop - Stop camera tracking
  • โ€”GET /camera/status - Get camera status

Detections

  • โ€”GET /detections/today - Get today's detections
  • โ€”GET /detections/ - Get all detections (with pagination)
  • โ€”GET /detections/date/{date} - Get detections for specific date
  • โ€”DELETE /detections/{id} - Delete detection

Real-time

  • โ€”GET /video - Video stream endpoint
  • โ€”WebSocket /ws - Real-time updates

System

  • โ€”GET /health - Health check
  • โ€”GET / - API documentation

Project Structure

drone-tracking/
โ”œโ”€โ”€ backend/
โ”‚   โ”œโ”€โ”€ main.py              # FastAPI application
โ”‚   โ”œโ”€โ”€ tracker.py           # DroneTracker class
โ”‚   โ”œโ”€โ”€ models.py            # Database models
โ”‚   โ”œโ”€โ”€ database.py          # Database configuration
โ”‚   โ”œโ”€โ”€ requirements.txt     # Python dependencies
โ”‚   โ””โ”€โ”€ static/
โ”‚       โ””โ”€โ”€ index.html       # Backend test page
โ””โ”€โ”€ frontend/
    โ”œโ”€โ”€ src/
    โ”‚   โ”œโ”€โ”€ components/      # React components
    โ”‚   โ”œโ”€โ”€ hooks/          # Custom hooks
    โ”‚   โ”œโ”€โ”€ services/       # API services
    โ”‚   โ”œโ”€โ”€ utils/          # Utilities
    โ”‚   โ”œโ”€โ”€ App.jsx         # Main app component
    โ”‚   โ””โ”€โ”€ main.jsx        # React entry point
    โ”œโ”€โ”€ package.json        # Node dependencies
    โ””โ”€โ”€ vite.config.js      # Vite configuration

Deploying to Hugging Face Spaces

This repo is set up for a Docker Space (sdk: docker in the README header). Typical failures were:

  1. 1.Docker build error โ€” libgl1-mesa-glx is not available on current Debian images. The Dockerfile uses libgl1 and related runtime libraries instead.
  2. 2.Runtime: no weights โ€” backend/best.pt is not in the repository (often too large for Git). Use one of:
  3. 3.Space / container variables (Settings โ†’ Variables and secrets):
  4. 4.HF_MODEL_REPO โ€” Hugging Face model repo id, e.g. your-username/your-drone-yolo
  5. 5.HF_MODEL_FILE โ€” optional, defaults to best.pt
  6. 6.HF_TOKEN โ€” only if the model repo is private or gated
  7. 7.Or `MODEL_PATH` โ€” absolute path to a weights file inside the container if you bake it into the image.
  8. 8.Or add best.pt under backend/ and ensure it is included in what you push to the Space.

GitHub โ†’ Hugging Face sync (optional)

If you use `.github/workflows/sync-to-hub.yml`, add repository secrets (Settings โ†’ Secrets and variables โ†’ Actions). Do not paste line breaks inside secret values (a trailing Enter is a common cause of Repo id must use alphanumeric chars errors).

Recommended (one id):

  • โ€”HF_TOKEN โ€” Hugging Face token with write access
  • โ€”HF_SPACE_REPO_ID โ€” exactly YourUsername/YourSpaceName (same as in https://huggingface.co/spaces/YourUsername/YourSpaceName)

Alternative (two parts):

  • โ€”HF_TOKEN
  • โ€”HF_USERNAME โ€” namespace only (e.g. SIDDk1)
  • โ€”SPACE_NAME โ€” Space slug only (e.g. Drone-Detection-Tracking), no slash

Create the Space on Hugging Face first (Docker). After a successful sync, the Space rebuilds from the uploaded files.

Configuration

Backend Configuration

Edit backend/main.py to configure:

  • โ€”Model path: MODEL_PATH = "your-model.pt"
  • โ€”Confidence threshold: confidence_threshold=0.5
  • โ€”Database URL: Set DATABASE_URL environment variable

Frontend Configuration

Edit frontend/src/utils/constants.js to configure:

  • โ€”API base URL
  • โ€”WebSocket URL
  • โ€”Map settings
  • โ€”Notification settings

Troubleshooting

Common Issues

Camera not working:

  • โ€”Check camera permissions
  • โ€”Verify camera is not in use by another application
  • โ€”Try different camera index in tracker.py

Model not found:

  • โ€”Ensure best.pt file exists in backend directory
  • โ€”Check file permissions
  • โ€”Verify model format is compatible

Connection issues:

  • โ€”Check if backend is running on port 8000
  • โ€”Verify frontend proxy configuration in vite.config.js
  • โ€”Check firewall settings

WebSocket connection failed:

  • โ€”Ensure both frontend and backend are running
  • โ€”Check browser console for connection errors
  • โ€”Verify WebSocket URL in constants

Performance Tips

  1. 1.Reduce video resolution in tracker.py for better performance
  2. 2.Adjust confidence threshold to reduce false positives
  3. 3.Limit frame rate for lower CPU usage
  4. 4.Use GPU acceleration if available with CUDA

Development

Adding New Features

  1. 1.Backend: Add new endpoints in main.py
  2. 2.Frontend: Create new components in src/components/
  3. 3.Database: Update models in models.py
  4. 4.Real-time: Extend WebSocket handlers

Testing

bash
# Backend tests
cd backend
python -m pytest

# Frontend tests  
cd frontend
npm test

Building for Production

bash
# Build frontend
cd frontend
npm run build

# Deploy backend
cd backend
pip install gunicorn
gunicorn main:app --workers 4 --worker-class uvicorn.workers.UvicornWorker

License

This project is licensed under the MIT License.

Contributing

  1. 1.Fork the repository
  2. 2.Create feature branch
  3. 3.Commit changes
  4. 4.Push to branch
  5. 5.Create Pull Request

Support

For issues and questions:

  • โ€”Check the troubleshooting section
  • โ€”Review API documentation at http://localhost:8000/docs
  • โ€”Create an issue on GitHub

Note: Make sure to replace best.pt with your actual YOLO model file trained for drone detection.