Smart Parking System

An end-to-end local-network intelligent parking surveillance and ticket generation system. This system integrates an ESP32-CAM edge client with a FastAPI AI processing backend and a real-time React visualization dashboard.

graph TD
    subgraph ESP32-CAM Client
        A[Trigger Event / Motion / Button] --> B[Capture JPEG Frame]
        B --> C[HTTP POST /api/upload]
    end
    
    subgraph FastAPI Backend
        C --> D{YOLOv8 Detection}
        D -- "Vehicle Detected" --> E[Generate QR Code Ticket]
        E --> F[Save to SQLite Database]
        F --> G[Broadcast ws:// Event NEW_TICKET]
        D -- "No Vehicle" --> H[Broadcast ws:// Event REJECTED]
    end
    
    subgraph React Dashboard
        G --> I[Real-time Ticket UI Update]
        H --> J[Real-time Rejection UI Update]
    end

Loading

---

Repository Structure

• ESP_CAM_32/: PlatformIO project containing ESP32-CAM firmware (C++).
• parking_backend/: FastAPI application featuring YOLOv8 vehicle detection, SQLite database modeling, QR code generation, and WebSocket broadcasts.
• parking_dashboard/: Single Page Application built on React, Vite, and Tailwind CSS.
• CP210x_Universal_Windows_Driver.zip: Essential USB-to-UART Silicon Labs bridge driver for flashing the ESP32-CAM module on Windows.

---

1. Prerequisites and Installation

Hardware Interface Setup (Windows)

1. Extract CP210x_Universal_Windows_Driver.zip.
2. Right-click on silabser.inf and select Install to register the Silicon Labs CP210x USB-to-UART driver.
3. Connect your ESP32-CAM module to your PC via a micro-USB cable or FTDI adapter. It should now map to a valid COM port.

Python Backend Setup

• Environment: Python 3.9 or higher.

1. Navigate to the backend directory:

   cd parking_backend

2. Create and activate a Python virtual environment:

   python -m venv venv
   .\venv\Scripts\Activate.ps1

3. Install dependencies:

   pip install -r requirements.txt

4. Run the FastAPI development server:

   python main.py

   The server starts on http://0.0.0.0:8000. The YOLOv8 model weights yolov8n.pt will download automatically on the first execution.

Frontend Setup

• Environment: Node.js v18 or higher.

1. Navigate to the frontend directory:

   cd parking_dashboard

2. Install the package dependencies:

   npm install

3. Boot up the Vite dev server:

   npm run dev

   Access the web UI at http://localhost:5173.

---

2. API Reference & ESP32 Integration

Photo Upload API

• Endpoint: http://<SERVER_IP>:8000/api/upload
• Method: POST
• Payload Format: multipart/form-data
• Parameter Name: file (must contain image file bytes, filename ending with .jpg, .jpeg, or .png)

HTTP Response Examples

Detection Success (200 OK):

{
  "status": "success",
  "ticket": {
    "id": 12,
    "ticket_id": "PKG-20260525-F3E8A9",
    "vehicle_type": "car",
    "confidence": 0.94,
    "timestamp": "2026-05-25T11:16:00.000",
    "image_path": "/static/images/F3E8A9.jpg",
    "qr_path": "/static/qrs/PKG-20260525-F3E8A9.png"
  }
}

Detection Failure (200 OK):

{
  "status": "rejected",
  "message": "No vehicle detected",
  "image": "F3E8A9.jpg"
}

---

3. How the Processing Pipeline Functions

1. Edge Frame Capture: The ESP32-CAM wakes upon button click or sensor trigger, captures a frame, and transmits an HTTP POST payload to the FastAPI /api/upload endpoint.
2. AI Inference: The FastAPI backend receives the binary stream, runs YOLOv8 deep learning model checks to detect vehicles (car, motorcycle, bus, truck), and evaluates prediction confidence.
3. Database & Generation:
   • If a vehicle is detected, a unique alphanumeric identifier is generated. A ticket entry is saved in SQLite, and a custom QR code is created.
   • If no vehicle is found, the entry is logged as rejected.
4. WebSocket Broadcast: Events (NEW_TICKET or REJECTED) are pushed instantly through active WebSocket channels (ws://<SERVER_IP>:8000/ws).
5. Dashboard Visualization: The React frontend maps incoming WebSocket updates to update the reactive grid display without requiring page refreshes.