• Stars
    star
    400
  • Rank 107,833 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 6 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Create image annotations. Classify, tag images with polygons, bounding boxes or points.

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...

Prop Type (* = required) Description Default
taskDescription *string Markdown 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.
regionTagList Array<string> Allowed "tags" (mutually inclusive classifications) for regions.
regionClsList Array<string> Allowed "classes" (mutually exclusive classifications) for regions.
imageTagList Array<string> Allowed tags for entire image.
imageClsList Array<string> Allowed classes for entire image.
enabledTools Array<string> Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" Everything.
showTags boolean Show tags and allow tags on regions. true
selectedImage string URL of initially selected image.
images Array<Image> Array of images to load into annotator
showPointDistances boolean Show distances between points. false
pointDistancePrecision number Precision on displayed points (e.g. 3 => 0.123)
onExit MainLayoutState => any Called when "Save" is called.
RegionEditLabel Node React Node overriding the form to update the region (see RegionLabel)
allowComments boolean Show a textarea to add comments on each annotation. false
hidePrev boolean Hide Previous Image button from the header bar. false
hideNext boolean Hide Next Image button from the header bar. false
hideClone boolean Hide Clone button from the header bar. false
hideSettings boolean Hide Settings button from the header bar. false
hideFullScreen boolean Hide FullScreen/Window button from the header bar. false
hideSave boolean Hide Save button from the header bar. 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:

More Repositories

1

universal-data-tool

Collaborate & label any type of data, images, text, or documents, in an easy web interface or desktop app.
JavaScript
1,943
star
2

coronavirus-mask-image-dataset

Image dataset from Instagram of people wearing medical masks, no mask, or a non-medical (DIY) mask
Jupyter Notebook
55
star
3

react-nlp-annotate

Interface for making NLP annotations.
JavaScript
46
star
4

udt-format

A simple universal data description format for datasets, tailored for interfacing with humans.
JavaScript
20
star
5

react-time-series

React component for labeling time series data with durations and timestamps. Label audio, video, CSV or JSON formatted time series data.
JavaScript
7
star
6

autoseg

WebAssembly Realtime Image Segmentation
C++
6
star
7

python-universaldatatool

pip module for data labeling based leveraging the Universal Data Tool
Python
5
star
8

collaboration-server

Collaboration Server for use with Universal Data Tool
JavaScript
5
star
9

courseware

Create instructions for labeling datasets using the Universal Data Tool
JavaScript
4
star
10

react-install-render

The simplest way to test a react component library
JavaScript
3
star
11

homepage

Open Human Annotation Project Home Page
JavaScript
2
star
12

udt-to-png

Convert UDT files into PNG images (with masks!)
JavaScript
2
star
13

react-material-workspace-layout

A Material UI workspace layout for React
JavaScript
2
star
14

udt-plugin

Create and Run Universal Data Tool Plugins
JavaScript
1
star
15

automatic-npm-release

Command line program to automatically set up github actions with npm publish releases for a npm module.
JavaScript
1
star
16

awesome-udt

List of things that are compatible with or nice to use with the Universal Data Tool
1
star
17

svg-mask-render

Render SVG masks to pngs consistently, without anti-aliasing or blurry edges!
JavaScript
1
star