1.4.12 • Published 1 year ago

ai-image-annotator v1.4.12

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 year ago

React Image Annotate

npm version

The best image/video annotation tool ever. Check out the demo here. Or the code sandbox here.

Sponsors

wao.ai sponsorship image

Features

  • Simple input/output format
  • Bounding Box, Point and Polygon Annotation
  • Zooming, Scaling, Panning
  • Multiple Images
  • Cursor Crosshair

Screenshot of Annotator

Usage

npm install react-image-annotate

import React from "react";
import ReactImageAnnotate from "react-image-annotate";

const App = () => (
  <ReactImageAnnotate
    labelImages
    regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
    regionTagList={["tag1", "tag2", "tag3"]}
    images={[
      {
        src: "https://placekitten.com/408/287",
        name: "Image 1",
        regions: []
      }
    ]}
  />
);

export default App;

To get the proper fonts, make sure to import the Inter UI or Roboto font, the following line added to a css file should suffice.

@import url("https://rsms.me/inter/inter.css");

Props

All of the following properties can be defined on the Annotator...

PropType (* = required)DescriptionDefault
taskDescription*stringMarkdown description for what to do in the image.
allowedArea{ x: number, y: number, w: number, h: number }Area that is available for annotation.Entire image.
regionTagListArray<string>Allowed "tags" (mutually inclusive classifications) for regions.
regionClsListArray<string>Allowed "classes" (mutually exclusive classifications) for regions.
imageTagListArray<string>Allowed tags for entire image.
imageClsListArray<string>Allowed classes for entire image.
enabledToolsArray<string>Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon"Everything.
showTagsbooleanShow tags and allow tags on regions.true
selectedImagestringURL of initially selected image.
imagesArray<Image>Array of images to load into annotator
showPointDistancesbooleanShow distances between points.false
pointDistancePrecisionnumberPrecision on displayed points (e.g. 3 => 0.123)
onExitMainLayoutState => anyCalled when "Save" is called.
RegionEditLabelNodeReact Node overriding the form to update the region (see RegionLabel)
allowCommentsbooleanShow a textarea to add comments on each annotation.false

Developers

Development

This project uses react-storybook. To begin developing run the following commands in the cloned repo.

  1. yarn install
  2. yarn storybook

A browser tab will automatically open with the project components.

See more details in the contributing guidelines.

Icons

Consult these icon repositories:

1.4.11

1 year ago

1.4.10

1 year ago

1.4.12

1 year ago

1.4.9

2 years ago

1.4.8

2 years ago

1.4.7

2 years ago

1.4.6

2 years ago

1.4.5

2 years ago

1.4.4

2 years ago

1.4.3

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.3.4

2 years ago

1.3.3

2 years ago

1.3.2

2 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.9

3 years ago

1.2.8

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.9

3 years ago

1.1.8

3 years ago

1.1.7

3 years ago

1.1.6

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago