/react-pixel-annotation-tool

Pixel Annotation Tool Written in React and OpenCV.js

Primary LanguageTypeScriptApache License 2.0Apache-2.0

Pixel Annotation Tool in React

Introduction

It's a React version of PixelAnnotationTool. The implementation borrows ideas from different repos, including:

The tool also uses many excellent packages, such as:

Demo

Try the pixel annotation tool here

UI Overview

alt text

Draw and Generate Mask

Alt Text

How to use

Installation

npm install

Run the App

npm start

Next steps (Roadmap)

I supervised a few engineers in Deltron Intelligence to extend this app for production use. See the figure below:

alt text

Key technical challenges have been addressed in another of my repo: emscripten-vision-react-example

Changelog

  • Solve anti-aliasing issue by using findContours and drawContours to handle pixels at edge.

References

OpenCV related

  1. https://aralroca.com/blog/opencv-in-the-web
  2. https://github.com/echamudi/opencv-wasm

Anti-aliasing related

  1. https://medium.com/@kozo002/how-to-draw-without-antialiasing-on-html5-canvas-cf13294a8e58
  2. konvajs/konva#695

Memory-leak related

  1. opencv/opencv#15060