React Image Annotate (SwitchOn Fork)

A powerful image/video annotation tool for React. Forked from UniversalDataTool/react-image-annotate with additional features and security fixes.

Features

• Simple input/output format
• Bounding Box, Point and Polygon Annotation
• Zooming, Scaling, Panning
• Multiple Images
• Cursor Crosshair
• Classification sidebar with hotkeys
• Configurable overlapping boundary for regions

Installation

npm install react-image-annotate-switchon1

Usage

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

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:

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

Props

| 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 region edit form | | | 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 |

Development

Prerequisites

• Node.js >= 16
• npm >= 8

Setup

git clone https://github.com/switchontech/react-image-annotate-switchon.git
cd react-image-annotate-switchon
npm install --legacy-peer-deps

Scripts

| Command | Description | | -------------------- | ------------------------------------ | | npm start | Start the development server | | npm run build | Build the library for publishing | | npm run storybook | Launch Storybook for component dev | | npm run prettier | Format source files with Prettier | | npm run dist | Build and publish to npm |

Branch Strategy

• master — stable release branch
• develop — active development branch

Icons

Consult these icon repositories:

• Material Icons
• Font Awesome Icons

License

ISC