🚗 Traffic Car Colour & Object Detection System

A web-based Traffic Car Colour & Object Detection application built using React, TypeScript, Vite, and Express. The application analyzes traffic images to detect vehicle colours, count the total number of cars, identify pedestrians, and visualize detections using coloured bounding boxes.

Features

• Traffic image upload and analysis
• Vehicle colour detection
• Blue cars highlighted with red bounding boxes
• Other coloured cars highlighted with blue bounding boxes
• Pedestrian detection and counting
• Total vehicle count
• Detection summary dashboard
• Responsive and minimal user interface

Tech Stack

• React
• TypeScript
• Vite
• Express.js
• HTML5 Canvas
• CSS

Project Structure

src/
├── components/
│   ├── Header.tsx
│   ├── ImagePreviewCanvas.tsx
│   ├── DetectionSummary.tsx
│   ├── DatasetInspector.tsx
│   ├── TrainingStudio.tsx
│   └── ReproducibilityCode.tsx
├── assets/
│   └── images/
├── data/
│   └── sampleDataset.ts
├── ml/
│   └── customModel.ts
├── App.tsx
└── main.tsx

server.ts

Installation

Clone the repository:

git clone https://github.com/MDMuneerAhmed-creator/traffic-car-colour---object-detection-model.git

Navigate to the project directory:

cd traffic-car-colour---object-detection-model

Install dependencies:

npm install

Start the development server:

npm run dev

Build for production:

npm run build

Preview the production build:

npm run preview

Usage

1. Open the application.
2. Upload a traffic image.
3. Click Detect to analyze the image.
4. View the detected vehicles with coloured bounding boxes.
5. Check the total number of cars, blue cars, other coloured cars, and pedestrians in the detection summary.

Deployment

The application is deployed on Render.

Future Improvements

• Real-time video stream detection
• Live traffic camera integration
• Enhanced vehicle colour classification
• Improved detection accuracy with larger datasets
• Traffic analytics dashboard

Author

Mohammad Muneer Ahmed

GitHub: https://github.com/MDMuneerAhmed-creator