@zityspace/react-annotate NPM

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

run yarn install under root path to install dependencies.
run yarn dev to watch and hot build the library.
run yarn install and yarn start under example folder to hot build the example.
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