GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → UniversalDataTool → React Image Annotate

UniversalDataTool / React Image Annotate

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

hacktoberfestbounding-boxes

Projects that are alternatives of or similar to React Image Annotate

Web Term
📺 A fullscreen terminal in your browser.
Stars: ✭ 163 (-1.21%)
Mutual labels:  hacktoberfest
Terrastories
Terrastories is a geostorytelling application built to enable local communities to locate and map their own oral storytelling traditions about places of significant meaning or value to them. Check out our Wiki for open source development information.
Stars: ✭ 158 (-4.24%)
Mutual labels:  hacktoberfest
Matrix Appservice Slack
A Matrix <--> Slack bridge
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Jackson Core
Core part of Jackson that defines Streaming API as well as basic shared abstractions
Stars: ✭ 2,003 (+1113.94%)
Mutual labels:  hacktoberfest
Templates
Tasmota Device Templates Repository. Your one stop shop to get templates for devices running Tasmota!
Stars: ✭ 162 (-1.82%)
Mutual labels:  hacktoberfest
Go Openvswitch
Go packages which enable interacting with Open vSwitch and related tools. Apache 2.0 Licensed.
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Stat.ink
https://stat.ink/
Stars: ✭ 163 (-1.21%)
Mutual labels:  hacktoberfest
Consumerfinance.gov
Django project protecting American consumers
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Rapidbay
Self-hosted torrent video streaming service compatible with Chromecast and AppleTV deployable in the cloud
Stars: ✭ 163 (-1.21%)
Mutual labels:  hacktoberfest
Buttercup Browser Extension
🌏 Buttercup browser extension
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Device Detector
The Universal Device Detection library will parse any User Agent and detect the browser, operating system, device used (desktop, tablet, mobile, tv, cars, console, etc.), brand and model.
Stars: ✭ 2,106 (+1176.36%)
Mutual labels:  hacktoberfest
Rele
Easy to use Google Pub/Sub
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Www Rpcs3
This is a responsive website designed to house and promote the progress of RPCS3, an open-source PlayStation 3 emulator and debugger written in C++. This repository is regularly updated.
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Trango Self Hosted
Host trango and communicate with those around you without the internet!
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Image Png
PNG decoding and encoding library in pure Rust
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Tip4commit
Donate bitcoins to open source projects or make commits and get tips for it.
Stars: ✭ 163 (-1.21%)
Mutual labels:  hacktoberfest
Django Loci
Reusable Django app for storing geographic and indoor coordinates. Maintained by the OpenWISP Project.
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
Polybar Spotify
🎵 Spotify status and controls module for Polybar with text scrolling
Stars: ✭ 162 (-1.82%)
Mutual labels:  hacktoberfest
Supervisor
PHP library for managing Supervisor through XML-RPC API
Stars: ✭ 163 (-1.21%)
Mutual labels:  hacktoberfest
Fuzzinator
Fuzzinator Random Testing Framework
Stars: ✭ 164 (-0.61%)
Mutual labels:  hacktoberfest
View All Similar Projects ➔

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)

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:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].