A react based video & image annotating tool. See demo.
Use npm to install the tool into your react project.
npm i react-annotation-tool --save
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"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.
| Name | Description |
|---|---|
| Annotation | The basic unit of the annotation result |
| Vertex | Each annotation contains mutiple vertices |
| 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 | ()=>{} |
[{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"}]},]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: []}]}]}Array of Integer. Start from "1". e.g.,
[1,2]- Refactorize all components.
Vidoe tool allows you to annotate object in videos via bounding box. The tool originally is designed for annotating cell videos.
| 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 |
| 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 | '' |
[{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:""}]}]- Makes Split and Hide optional.
- Enable other shapes (e.g., circle) to annotate.
I am seeking for any sort of entrepreneurship and crowsourcing research opportunity. Please contact me.