react-annotation-tool

A react based video & image annotating tool. See demo.

Quick Start

Installation

Use npm to install the tool into your react project.

npm i react-annotation-tool --save

Usage

Two tools are available now. They are Image Annotation Tool (aka TwoDimensionalImage) and Video Annotation Tool (aka TwoDimensionalVideo) respectively. Import either one into your react component.

import {TwoDimensionalImage, TwoDimensionalVideo} from "react-annotation-tool"

Image Annotation Tool

This tool allows to annotate images with polygons. Users could create new taxonomy if they feel the annotation does not fit into any default options. It is adopted by a CVPR 2019 paper, VizWiz-Priv: A Dataset for Recognizing the Presence and Purpose of Private Visual Information in Images Taken by Blind People.

Data Formats

Name	Description
Annotation	The basic unit of the annotation result
Vertex	Each annotation contains mutiple vertices

Props

Prop	Description	Format	Default
`className`		String	`''`
`url`	Image url	String	`''`
`imageWidth`	Image width	Number	`400`
`defaultAnnotations`	Default annotations. Detail	[Object]	`[]`
`options`	A set of options for classifying annotations. Detail	Object	`{}`
`isDynamicOptionsEnable`	Enable users to add/delete options	Boolean	`false`
`disabledOptionLevels`	The levels which can't be selected. Start from "1". Detail	[String]	`[]`
`isLabelOn`	Show labels of annotaions on the image	Boolean	`false`
`isViewOnlyMode`	View only	Boolean	`false`
`emptyAnnotationReminderText`	Text for warming empty annotaion on the control panel	String	`''`
`hasPreviousButton`	Enable Previous button	Boolean	`false`
`onPreviousClick`	Called when Previous button is clicked	Function	`()=>{}`
`hasNextButton`	Enable Next button	Boolean	`false`
`onNextClick`	Called when Next button is clicked	Function	`()=>{}`
`hasSkipButton`	Enable Skip button	Boolean	`false`
`onSkipClick`	Called when Skip button is clicked	Function	`()=>{}`

`defaultAnnotations`

[
  { id: "jlvnw6az", name: "jlvnw6az", color: "rgba(227,0,255,1)", isClosed: true,
    vertices: [ 
      { id: "jlvnw6az", name: "jlvnw6az", x: 189.5625, y: 201 },
      { id: "jlvnw8qs", name: "jlvnw8qs", x: 309.25, y: 200 },
      { id: "jlvnw9vp", name: "jlvnw9vp", x: 313.25, y: 203 },
      { id: "jlvnwbvk", name: "jlvnwbvk", x: 316.25, y: 288 },
      { id: "jlvnwczb", name: "jlvnwczb", x: 310.25, y: 292 },
      { id: "jlvnwfhm", name: "jlvnwfhm", x: 187.25, y: 294 },
      { id: "jlvnwgoe", name: "jlvnwgoe", x: 181.25, y: 290 },
      { id: "jlvnwidd", name: "jlvnwidd", x: 183.25, y: 205 },
    ],
    selectedOptions: [ 
      { id: "0", value: "root" }, 
      { id: "1", value: "Electronic" }, 
      { id: "1-1", value: "Laptop" }, 
      { id: "1-1-1", value: "Apple" } 
    ],
  },
  { id: "jlvnxa79", name: "jlvnxa79", color: "rgba(0,255,81,1)", isClosed: true,
    vertices: [ 
      { id: "jlvnxa79", name: "jlvnxa79", x: 369.25, y: 350.5 },
      { id: "jlvnxbct", name: "jlvnxbct", x: 372.25, y: 343.5 },
      { id: "jlvnxcg6", name: "jlvnxcg6", x: 387.25, y: 341 },
      { id: "jlvnxdic", name: "jlvnxdic", x: 393.25, y: 343 },
      { id: "jlvnxfp2", name: "jlvnxfp2", x: 424.25, y: 342 },
      { id: "jlvnxgfx", name: "jlvnxgfx", x: 426.25, y: 347 },
      { id: "jlvnxjd8", name: "jlvnxjd8", x: 381.25, y: 350 },
    ],
    selectedOptions: [ 
      { id: "0", value: "root" }, 
      { id: "2", value: "Stationery" }, 
      { id: "2-1", value: "Pen" } 
    ]
  },
]

`options`

Nested array of object. Each object has id, value and children properties. Must start from object with value: "root". e.g.,

{id: "0", value: "root", children: [
   {id: "1", value: "Electronic", children: [
      {id: "1-1", value: "Laptop", children: [
         {id: "1-1-1", value: "Apple", children: []},         
         {id: "1-1-2", value: "Asus", children: []}  
      ]}, 
      {id: "1-2", value: "Charger", children: []},
      {id: "1-3", value: "Watch", children: []}
   ]},
   {id: "2", value: "Stationery", children: [
      {id: "2-1", value: "Pen", children: []},
      {id: "2-2", value: "Eraser", children: []}
   ]}
]}

`disabledOptionLevels`

Array of Integer. Start from "1". e.g.,

[1, 2]

TODO

Refactorize all components.

Video Annotation Tool

Vidoe tool allows you to annotate object in videos via bounding box. The tool originally is designed for annotating cell videos.

Data Formats

Name	Description
Annotation	The basic unit of the annotation result
Incident	Each annotation contains mutiple incidents. Each incident records the time and some information (e.g., position, size, status...) when the annotation is manipulate by the users (e.g., split, move, resize...)
Parent(parentName)	If you enable Split functionality, this property stores the parent who generates current annotation
Children(childrenNames)	If you enable Split functionality, this property store the children belong to current annotation

Props

Prop	Description	Data Type	Default
`className`		String	`''`
`url`	Video url	String	`''`
`defaultAnnotations`	Default annotations. Detail	[Objects]	`[]`
`videoWidth`	Video width	Number	`400`
`isDefaultAnnotationsManipulatable`	Allow users to edit default annotations	Boolean	`false`
`previewHeader`	Header for preview	String	`''`
`previewNoticeList`	Content for preview	[String]	`[]`
`isEmptyCheckEnable`	Force users to annotate at least one object	Boolean	`false`
`isSplitEnable`	Enable Split button for each annotation	Boolean	`false`
`isShowHideEnable`	Enable Show/Hide button for each annotation	Boolean	`false`
`hasReview`	Enable review after users click submit button	Boolean	`false`
`numAnnotationsToBeAdded`	Number of annotations users can be added	Number	`1000`
`onSubmit`	The callback function to handle submitted result	Function	`()=>{}`
`emptyCheckSubmissionWarningText`	Text for warming empty annotaion	String	`''`
`emptyCheckAnnotationItemWarningText`	Text for warming non-incident anntation	String	`''`
`emptyAnnotationReminderText`	Text for warming empty annotaion on the control panel	String	`''`

`defaultAnnotations`

[{
  id: "jwzlwirv",
  name: "jwzlwirv",
  label: "1",
  color: "rgba(255,219,0,1)",
  parentName: "",
  childrenNames: ["jwzlwrh3","jwzlwrh4"],
  incidents:[
   {x:198.25, y:137, width:101, height:99, time:0, status:"Show", id:"jwzlwirv", name:"jwzlwirv", label:""},   
   {x:235.25, y:190, width:73, height:68, time:0.07694, status:"Show", id:"jwzlwlzl", name:"jwzlwlzl", label:""},
   {x:235.25, y:190, width:73, height:68, time:0.11864, status:"Split", id:"jwzlwrh2", name:"jwzlwrh2", label:""}
  ]
 },
 {
   id: "jwzlwrh3",
   name: "jwzlwrh3",
   label: "1-1",
   color: "rgba(0,255,81,1)",
   parentName: "jwzlwirv",
   childrenNames: [],
   incidents: [
    {x:235.25, y:190, width:36.5, height:34, time:0.11864, status:"Show", id:"jwzlwrh2", name:"jwzlwrh2", label:""}, 
    {x:202.25, y:267, width:64.5, height:83, time:0.17467, status:"Show", id:"jwzlwy9h", name:"jwzlwy9h", label:""}
   ]
 },
 { 
   id: "jwzlwrh4",
   name: "jwzlwrh4",
   label: "1-2",
   color: "rgba(0,255,81,1)",
   parentName: "jwzlwirv",
   childrenNames: [],
   incidents: [
    {x:251.75, y:204, width:36.5, height:34, time:0.11864, status:"Show", id:"jwzlwrh2", name:"jwzlwrh2", label:""}, 
    {x:298.75, y:242, width:51.5, height:54, time:0.17467, status:"Show", id:"jwzlwwpj", name:"jwzlwwpj", label:""}
   ]
 }
]

TODO

Makes Split and Hide optional.
Enable other shapes (e.g., circle) to annotate.

Want to talk with me?

I am seeking for any sort of entrepreneurship and crowsourcing research opportunity. Please contact me.

npm