Traffic sign object detection

A website to detect traffic signs

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Screenshots
  • Tech Stack
  • Features
  • Color Reference
• Getting Started
  • Prerequisites
  • Run Locally
• Usage
• Training
• Roadmap
• Contributing
  • Code of Conduct
• FAQ
• License
• Contact
• Acknowledgements

🌟 About the Project

📷 Screenshots

👾 Tech Stack

Client

• Javascript
• React.js
• React Router
• Redux Toolkit
• WindiCSS
• Mantine
• ESLint
• Prettier
• Vite
• Iconify

Server

• Express.js
• SocketIO
• FastAPI
• YOLOv5

🎯 Features

• Detect traffic sign objects:
  • Using uploaded images.
  • Using URLs.
• Save the results as a .zip file.

🎨 Color Reference

Color	Hex
Primary Color	#2563EB

🧰 Getting Started

‼️ Prerequisites

• Python: >= 3.9.

• This project uses pnpm as package manager:

  npm install --global pnpm

• This project uses Poetry as package manager:

  Linux, macOS, Windows (WSL)

  curl -sSL https://install.python-poetry.org | python3 -

  Read more about installation on Poetry documentation.

🏃 Run Locally

Clone the project:

git clone https://github.com/DuckyMomo20012/traffic-sign-detection.git

Go to the project directory:

cd traffic-sign-detection

Install dependencies:

• webapp and api:

  pnpm install

• yolo:

  Install dependencies with Poetry:

  poetry install

Start all apps:

Note: Install nx globally to invoke the command directly using nx, or use pnpx nx.

nx run-many --target=serve

Start each app manually:

Note: webapp, api, and yolo needs to be run concurrently.

Note: Install nx globally to invoke the command directly using nx, or use pnpx nx.

• web:

  nx run webapp:serve

• api:

  nx run api:serve

• yolo:

  nx run yolo:serve

👀 Usage

• You can detect traffic sign objects using uploaded images or URLs.

  • Supports .png, .jpg, .jpeg and .webp images.

  • Upload images:

    • Maximum 3 images per request.

    • Drag and drop image files to the Dropzone field.

    • Click on the Dropzone field to open the file browser.

      Note: On Linux, you will have some issues when clicking to open the file browser.

  • Image URLs:

    • Maximum 3 URLs per request.
    • The Textarea field will check for invalid or duplicate URLs.

• It usually takes about 1-2 minutes to detect the traffic signs.

• You can download the results as a .zip file or download each image manually.

• Detect up to 36 traffic signs:

  List

  - Cycle Zone
  - Danger Ahead
  - Deer Zone
  - End of Right Road Go straight
  - Give Way
  - Go Left or Straight
  - Go Right or Straight
  - Go Straight
  - Huddle Road
  - Left Curve Ahead
  - Left Sharp Curve
  - No Entry
  - No Over Taking Trucks
  - No Over Taking
  - No Stopping
  - No Waiting
  - Pedestrian
  - Right Curve Ahead
  - Right Sharp Curve
  - Road Work
  - RoundAbout
  - Slippery Road
  - Snow Warning Sign
  - Speed Limit 100
  - Speed Limit 120
  - Speed Limit 20
  - Speed Limit 30
  - Speed Limit 50
  - Speed Limit 60
  - Speed Limit 70
  - Speed Limit 80
  - Stop
  - Traffic Signals Ahead
  - Truck Sign
  - Turn Left
  - Turn Right
  

Note: If you want to detect using other models, you can rename the model file to best.pt and copy it to the folder apps/yolo/src/model/.

🚀 Training

Please go to folder training and read the README.md file.

🧭 Roadmap

• Fix server writing file problem.
• Fix fixed model and image name problem.
• Fix fixed uploading model problem.
• Update UI.
• Improve model for better detection.
• Optimize image preview render performance.
• Video support.
• Dark mode styling.
• Setup Docker.
• Deploy the app.

👋 Contributing

Contributions are always welcome!

📜 Code of Conduct

Please read the Code of Conduct.

❔ FAQ

• Is this project still maintained?

  • Yes, but we will only update documentation.

• Why do you have to set up an Express server between the client and the YOLOv5 server?

  • This project was first structured using Express as an SSR server, it will open a child_process to run the detection using Python code. We just don't want to change the structure too much.

• Why do you limit the number of images per request to 3 for both image upload and image URLs?

  • We haven't optimized the code for better performance. So, we have to limit the number of images per request to 3.

• Can I upload my model file to the server?

  • No, you can't. Because the model is loaded ONE TIME by the server when the server starts, updating the model might conflict with other users.

• Why does the server only accept .png, .jpg, .jpeg or .webp images?

  • It's about security reasons. We think we should only serve common image extensions. YOLOv5 supports many image extensions: .bmp, .jpg, .jpeg, .png, .tif, .tiff, .dng, .webp, .mpo, so we may extend the list later.

• I have issues when installing yolo dependencies. How can I fix it?

  • DO NOT press CTRL + C when installing dependencies.

  • To fix the issue, you will have to remove the folder .venv and file poetry.lock. Then run these commands and reinstall the dependencies:

    rm -rf ~/.cache/pypoetry/cache/
    rm -rf ~/.cache/pypoetry/artifacts/

⚠️ License

Distributed under Apache-2.0 license. See LICENSE for more information.

🤝 Contact

Duong Vinh - @duckymomo20012 - tienvinh.duong4@gmail.com

Project Link: https://github.com/DuckyMomo20012/traffic-sign-detection.

💎 Acknowledgements

Here are useful resources and libraries that we have used in our projects:

• YOLOv5: YOLOv5 rocket is a family of object detection architectures and models pretrained on the COCO dataset, and represents Ultralytics open-source research into future vision AI methods, incorporating lessons learned and best practices evolved over thousands of hours of research and development.
• Awesome Readme Template: A detailed template to bootstrap your README file quickly.