@zityspace/react-annotate

react-annotate

React library for annotating computer vision dataset. Currently it supports annotating points, lines, boxes, segmentation masks.

Status

Still in development.

Install

For production: yarn add @ZitySpace/react-annotate, or npm install @ZitySpace/react-annotate --save. For development: yarn link @ZitySpace/react-annotate.

Simple Example

// import the component and css
import { Annotator } from '@ZitySpace/react-annotate';
import '@ZitySpace/react-annotate/dist/index.css';
...

const App = () => {
  ...
  return (
    <div className='h-screen w-screen'>
      <Annotator imagesList={imagesList} /> // use
    </div>
  );
};

For specific example, visit here

Annotator Props

• ⚠️ imagesList: required
  • type: ImageData[]
  • description: all the image and annotation data required
• initIndex: optional
  • type: number
  • description: first image's index
• onSave: optional
  • type: (curImageData: ImageData, curIndex: number, imagesList: ImageData[]) => void
  • description: will be invoked when the save button was clicked
• onSwitch: optional
  • type: (curImageData: ImageData, curIndex: number, imagesList: ImageData[], type: "prev" | "next") => void
  • description: will be invoked when the prev/next button was clicked

Development in the repo

1. run yarn install under root path to install dependencies.
2. run yarn dev to watch and hot build the library.
3. run yarn install and yarn start under example folder to hot build the example.
4. edit library source code and see changes in the example UI.

Documentation

Keyboard shortcuts

• Backspace / Delete: delete the selected annotation

• R: toggle drawing mode to Rectangle

• O: toggle drawing mode to Point

• L: toggle drawing mode to Line

• P: toggle drawing mode to Polygon

• V: toggle annotations' visibility

• < / ←: switch to previous image

• > / →: switch to next image

• Ctrl+R / Cmd+R: toggle annotation alter history between current and origin state

• Ctrl+Z / Cmd+Z: undo last annotation alter

• Ctrl+Shift+Z / Cmd+Shift+Z: redo last annotation alter

• Ctrl+S / Cmd+S: save annotations

Reference

• controls-customization
• effect of different setting
• line-point-stickman

License

Apache 2.0 © ZitySpace