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.
- 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
- React
- TypeScript
- Vite
- Express.js
- HTML5 Canvas
- CSS
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
Clone the repository:
git clone https://github.com/MDMuneerAhmed-creator/traffic-car-colour---object-detection-model.gitNavigate to the project directory:
cd traffic-car-colour---object-detection-modelInstall dependencies:
npm installStart the development server:
npm run devBuild for production:
npm run buildPreview the production build:
npm run preview- Open the application.
- Upload a traffic image.
- Click Detect to analyze the image.
- View the detected vehicles with coloured bounding boxes.
- Check the total number of cars, blue cars, other coloured cars, and pedestrians in the detection summary.
The application is deployed on Render.
- Real-time video stream detection
- Live traffic camera integration
- Enhanced vehicle colour classification
- Improved detection accuracy with larger datasets
- Traffic analytics dashboard
Mohammad Muneer Ahmed