react-image-annotate-master-custom 0.0.1

package/MainLayout/index.js

@@ -0,0 +1,359 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import React, { useCallback, useRef } from "react";
+import { makeStyles } from "@mui/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
+import ClassSelectionMenu from "../ClassSelectionMenu";
+import DebugBox from "../DebugSidebarBox";
+import HistorySidebarBox from "../HistorySidebarBox";
+import ImageCanvas from "../ImageCanvas";
+import ImageSelector from "../ImageSelectorSidebarBox";
+import KeyframeTimeline from "../KeyframeTimeline";
+import KeyframesSelector from "../KeyframesSelectorSidebarBox";
+import RegionSelector from "../RegionSelectorSidebarBox";
+import SettingsDialog from "../SettingsDialog";
+import TagsSidebarBox from "../TagsSidebarBox";
+import TaskDescription from "../TaskDescriptionSidebarBox";
+import Workspace from "react-material-workspace-layout/Workspace";
+import classnames from "classnames";
+import getActiveImage from "../Annotator/reducers/get-active-image";
+import getHotkeyHelpText from "../utils/get-hotkey-help-text";
+import iconDictionary from "./icon-dictionary";
+import styles from "./styles";
+import { useDispatchHotkeyHandlers } from "../ShortcutsManager";
+import useEventCallback from "use-event-callback";
+import useImpliedVideoRegions from "./use-implied-video-regions";
+import useKey from "use-key-hook";
+import { useSettings } from "../SettingsProvider";
+import { withHotKeys } from "react-hotkeys"; // import Fullscreen from "../Fullscreen"
+
+var emptyArr = [];
+var theme = createTheme();
+var useStyles = makeStyles(function (theme) {
+  return styles;
+});
+var HotkeyDiv = withHotKeys(function (_ref) {
+  var hotKeys = _ref.hotKeys,
+      children = _ref.children,
+      divRef = _ref.divRef,
+      props = _objectWithoutProperties(_ref, ["hotKeys", "children", "divRef"]);
+
+  return React.createElement("div", Object.assign({}, _objectSpread({}, hotKeys, props), {
+    ref: divRef
+  }), children);
+});
+var FullScreenContainer = styled("div")(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: "100%",
+    height: "100%",
+    "& .fullscreen": {
+      width: "100%",
+      height: "100%"
+    }
+  };
+});
+export var MainLayout = function MainLayout(_ref3) {
+  var state = _ref3.state,
+      dispatch = _ref3.dispatch,
+      _ref3$alwaysShowNextB = _ref3.alwaysShowNextButton,
+      alwaysShowNextButton = _ref3$alwaysShowNextB === void 0 ? false : _ref3$alwaysShowNextB,
+      _ref3$alwaysShowPrevB = _ref3.alwaysShowPrevButton,
+      alwaysShowPrevButton = _ref3$alwaysShowPrevB === void 0 ? false : _ref3$alwaysShowPrevB,
+      RegionEditLabel = _ref3.RegionEditLabel,
+      onRegionClassAdded = _ref3.onRegionClassAdded,
+      hideHeader = _ref3.hideHeader,
+      hideHeaderText = _ref3.hideHeaderText,
+      _ref3$hideNext = _ref3.hideNext,
+      hideNext = _ref3$hideNext === void 0 ? false : _ref3$hideNext,
+      _ref3$hidePrev = _ref3.hidePrev,
+      hidePrev = _ref3$hidePrev === void 0 ? false : _ref3$hidePrev,
+      _ref3$hideClone = _ref3.hideClone,
+      hideClone = _ref3$hideClone === void 0 ? false : _ref3$hideClone,
+      _ref3$hideRegionLabel = _ref3.hideRegionLabel,
+      hideRegionLabel = _ref3$hideRegionLabel === void 0 ? false : _ref3$hideRegionLabel,
+      _ref3$hideSettings = _ref3.hideSettings,
+      hideSettings = _ref3$hideSettings === void 0 ? false : _ref3$hideSettings,
+      _ref3$hideFullScreen = _ref3.hideFullScreen,
+      hideFullScreen = _ref3$hideFullScreen === void 0 ? false : _ref3$hideFullScreen,
+      _ref3$hideSave = _ref3.hideSave,
+      hideSave = _ref3$hideSave === void 0 ? false : _ref3$hideSave,
+      _ref3$hideRightSideba = _ref3.hideRightSidebar,
+      hideRightSidebar = _ref3$hideRightSideba === void 0 ? false : _ref3$hideRightSideba,
+      _ref3$hideLeftSidebar = _ref3.hideLeftSidebar,
+      hideLeftSidebar = _ref3$hideLeftSidebar === void 0 ? false : _ref3$hideLeftSidebar;
+  var classes = useStyles();
+  var settings = useSettings();
+  var fullScreenHandle = useFullScreenHandle();
+  var memoizedActionFns = useRef({});
+
+  var action = function action(type) {
+    for (var _len = arguments.length, params = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      params[_key - 1] = arguments[_key];
+    }
+
+    var fnKey = "".concat(type, "(").concat(params.join(","), ")");
+    if (memoizedActionFns.current[fnKey]) return memoizedActionFns.current[fnKey];
+
+    var fn = function fn() {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+
+      return params.length > 0 ? dispatch(_objectSpread({
+        type: type
+      }, params.reduce(function (acc, p, i) {
+        return acc[p] = args[i], acc;
+      }, {}))) : dispatch(_objectSpread({
+        type: type
+      }, args[0]));
+    };
+
+    memoizedActionFns.current[fnKey] = fn;
+    return fn;
+  };
+
+  var _getActiveImage = getActiveImage(state),
+      currentImageIndex = _getActiveImage.currentImageIndex,
+      activeImage = _getActiveImage.activeImage;
+
+  var nextImage;
+
+  if (currentImageIndex !== null) {
+    nextImage = state.images[currentImageIndex + 1];
+  }
+
+  useKey(function () {
+    return dispatch({
+      type: "CANCEL"
+    });
+  }, {
+    detectKeys: [27]
+  });
+  var isAVideoFrame = activeImage && activeImage.frameTime !== undefined;
+  var innerContainerRef = useRef();
+  var hotkeyHandlers = useDispatchHotkeyHandlers({
+    dispatch: dispatch
+  });
+  var impliedVideoRegions = useImpliedVideoRegions(state);
+  var refocusOnMouseEvent = useCallback(function (e) {
+    if (!innerContainerRef.current) return;
+    if (innerContainerRef.current.contains(document.activeElement)) return;
+
+    if (innerContainerRef.current.contains(e.target)) {
+      innerContainerRef.current.focus();
+      e.target.focus();
+    }
+  }, []);
+  var canvas = React.createElement(ImageCanvas, Object.assign({}, settings, {
+    showCrosshairs: settings.showCrosshairs && !["select", "pan", "zoom"].includes(state.selectedTool),
+    key: state.selectedImage,
+    showMask: state.showMask,
+    fullImageSegmentationMode: state.fullImageSegmentationMode,
+    autoSegmentationOptions: state.autoSegmentationOptions,
+    showTags: state.showTags,
+    allowedArea: state.allowedArea,
+    hideRegionLabel: hideRegionLabel,
+    modifyingAllowedArea: state.selectedTool === "modify-allowed-area",
+    regionClsList: state.regionClsList,
+    regionTagList: state.regionTagList,
+    regions: state.annotationType === "image" ? activeImage.regions || [] : impliedVideoRegions,
+    realSize: activeImage ? activeImage.realSize : undefined,
+    videoPlaying: state.videoPlaying,
+    imageSrc: state.annotationType === "image" ? activeImage.src : null,
+    videoSrc: state.annotationType === "video" ? state.videoSrc : null,
+    pointDistancePrecision: state.pointDistancePrecision,
+    createWithPrimary: state.selectedTool.includes("create"),
+    dragWithPrimary: state.selectedTool === "pan",
+    zoomWithPrimary: state.selectedTool === "zoom",
+    showPointDistances: state.showPointDistances,
+    videoTime: state.annotationType === "image" ? state.selectedImageFrameTime : state.currentVideoTime,
+    keypointDefinitions: state.keypointDefinitions,
+    onMouseMove: action("MOUSE_MOVE"),
+    onMouseDown: action("MOUSE_DOWN"),
+    onMouseUp: action("MOUSE_UP"),
+    onChangeRegion: action("CHANGE_REGION", "region"),
+    onBeginRegionEdit: action("OPEN_REGION_EDITOR", "region"),
+    onCloseRegionEdit: action("CLOSE_REGION_EDITOR", "region"),
+    onDeleteRegion: action("DELETE_REGION", "region"),
+    onBeginBoxTransform: action("BEGIN_BOX_TRANSFORM", "box", "directions"),
+    onBeginMovePolygonPoint: action("BEGIN_MOVE_POLYGON_POINT", "polygon", "pointIndex"),
+    onBeginMoveKeypoint: action("BEGIN_MOVE_KEYPOINT", "region", "keypointId"),
+    onAddPolygonPoint: action("ADD_POLYGON_POINT", "polygon", "point", "pointIndex"),
+    onSelectRegion: action("SELECT_REGION", "region"),
+    onBeginMovePoint: action("BEGIN_MOVE_POINT", "point"),
+    onImageLoaded: action("IMAGE_LOADED", "image"),
+    RegionEditLabel: RegionEditLabel,
+    onImageOrVideoLoaded: action("IMAGE_OR_VIDEO_LOADED", "metadata"),
+    onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
+    onChangeVideoPlaying: action("CHANGE_VIDEO_PLAYING", "isPlaying"),
+    onRegionClassAdded: onRegionClassAdded,
+    allowComments: state.allowComments
+  }));
+  var onClickIconSidebarItem = useEventCallback(function (item) {
+    dispatch({
+      type: "SELECT_TOOL",
+      selectedTool: item.name
+    });
+  });
+  var onClickHeaderItem = useEventCallback(function (item) {
+    if (item.name === "Fullscreen") {
+      fullScreenHandle.enter();
+    } else if (item.name === "Window") {
+      fullScreenHandle.exit();
+    }
+
+    dispatch({
+      type: "HEADER_BUTTON_CLICKED",
+      buttonName: item.name
+    });
+  });
+  var debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state);
+  var nextImageHasRegions = !nextImage || nextImage.regions && nextImage.regions.length > 0;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(FullScreenContainer, null, React.createElement(FullScreen, {
+    handle: fullScreenHandle,
+    onChange: function onChange(open) {
+      if (!open) {
+        fullScreenHandle.exit();
+        action("HEADER_BUTTON_CLICKED", "buttonName")("Window");
+      }
+    }
+  }, React.createElement(HotkeyDiv, {
+    tabIndex: -1,
+    divRef: innerContainerRef,
+    onMouseDown: refocusOnMouseEvent,
+    onMouseOver: refocusOnMouseEvent,
+    allowChanges: true,
+    handlers: hotkeyHandlers,
+    className: classnames(classes.container, state.fullScreen && "Fullscreen")
+  }, React.createElement(Workspace, {
+    allowFullscreen: true,
+    iconDictionary: iconDictionary,
+    hideHeader: hideHeader,
+    hideHeaderText: hideHeaderText,
+    headerLeftSide: [state.annotationType === "video" ? React.createElement(KeyframeTimeline, {
+      currentTime: state.currentVideoTime,
+      duration: state.videoDuration,
+      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
+      keyframes: state.keyframes
+    }) : activeImage ? React.createElement("div", {
+      className: classes.headerTitle
+    }, activeImage.name) : null].filter(Boolean),
+    headerItems: [!hidePrev && {
+      name: "Prev"
+    }, !hideNext && {
+      name: "Next"
+    }, state.annotationType !== "video" ? null : !state.videoPlaying ? {
+      name: "Play"
+    } : {
+      name: "Pause"
+    }, !hideClone && !nextImageHasRegions && activeImage.regions && {
+      name: "Clone"
+    }, !hideSettings && {
+      name: "Settings"
+    }, !hideFullScreen && (state.fullScreen ? {
+      name: "Window"
+    } : {
+      name: "Fullscreen"
+    }), !hideSave && {
+      name: "Save"
+    }].filter(Boolean),
+    onClickHeaderItem: onClickHeaderItem,
+    onClickIconSidebarItem: onClickIconSidebarItem,
+    selectedTools: [state.selectedTool, state.showTags && "show-tags", state.showMask && "show-mask"].filter(Boolean),
+    iconSidebarItems: hideLeftSidebar ? [] : [{
+      name: "select",
+      helperText: "Select" + getHotkeyHelpText("select_tool"),
+      alwaysShowing: true
+    }, {
+      name: "pan",
+      helperText: "Drag/Pan (right or middle click)" + getHotkeyHelpText("pan_tool"),
+      alwaysShowing: true
+    }, {
+      name: "zoom",
+      helperText: "Zoom In/Out (scroll)" + getHotkeyHelpText("zoom_tool"),
+      alwaysShowing: false
+    }, {
+      name: "show-tags",
+      helperText: "Show / Hide Tags",
+      alwaysShowing: false
+    }, {
+      name: "create-point",
+      helperText: "Add Point" + getHotkeyHelpText("create_point")
+    }, {
+      name: "create-box",
+      helperText: "Add Bounding Box" + getHotkeyHelpText("create_bounding_box")
+    }, {
+      name: "create-polygon",
+      helperText: "Add Polygon" + getHotkeyHelpText("create_polygon")
+    }, {
+      name: "create-line",
+      helperText: "Add Line"
+    }, {
+      name: "create-expanding-line",
+      helperText: "Add Expanding Line"
+    }, {
+      name: "create-keypoints",
+      helperText: "Add Keypoints (Pose)"
+    }, state.fullImageSegmentationMode && {
+      name: "show-mask",
+      alwaysShowing: true,
+      helperText: "Show / Hide Mask"
+    }, {
+      name: "modify-allowed-area",
+      helperText: "Modify Allowed Area"
+    }].filter(Boolean).filter(function (a) {
+      return a.alwaysShowing || state.enabledTools.includes(a.name);
+    }),
+    rightSidebarItems: hideRightSidebar ? [] : [debugModeOn && React.createElement(DebugBox, {
+      state: debugModeOn,
+      lastAction: state.lastAction
+    }), state.taskDescription && React.createElement(TaskDescription, {
+      description: state.taskDescription
+    }), state.regionClsList && React.createElement(ClassSelectionMenu, {
+      selectedCls: state.selectedCls,
+      regionClsList: state.regionClsList,
+      onSelectCls: action("SELECT_CLASSIFICATION", "cls")
+    }), state.labelImages && React.createElement(TagsSidebarBox, {
+      currentImage: activeImage,
+      imageClsList: state.imageClsList,
+      imageTagList: state.imageTagList,
+      onChangeImage: action("CHANGE_IMAGE", "delta"),
+      expandedByDefault: true
+    }), // (state.images?.length || 0) > 1 && (
+    //   <ImageSelector
+    //     onSelect={action("SELECT_REGION", "region")}
+    //     images={state.images}
+    //   />
+    // ),
+    React.createElement(RegionSelector, {
+      regions: activeImage ? activeImage.regions : emptyArr,
+      onSelectRegion: action("SELECT_REGION", "region"),
+      onDeleteRegion: action("DELETE_REGION", "region"),
+      onChangeRegion: action("CHANGE_REGION", "region")
+    }), state.keyframes && React.createElement(KeyframesSelector, {
+      onChangeVideoTime: action("CHANGE_VIDEO_TIME", "newTime"),
+      onDeleteKeyframe: action("DELETE_KEYFRAME", "time"),
+      onChangeCurrentTime: action("CHANGE_VIDEO_TIME", "newTime"),
+      currentTime: state.currentVideoTime,
+      duration: state.videoDuration,
+      keyframes: state.keyframes
+    }), React.createElement(HistorySidebarBox, {
+      history: state.history,
+      onRestoreHistory: action("RESTORE_HISTORY")
+    })].filter(Boolean)
+  }, canvas), React.createElement(SettingsDialog, {
+    open: state.settingsOpen,
+    onClose: function onClose() {
+      return dispatch({
+        type: "HEADER_BUTTON_CLICKED",
+        buttonName: "Settings"
+      });
+    }
+  })))));
+};
+export default MainLayout;

package/MainLayout/styles.js

@@ -0,0 +1,25 @@
+import { grey } from "@mui/material/colors";
+export default {
+  container: {
+    display: "flex",
+    flexGrow: 1,
+    flexDirection: "column",
+    height: "100%",
+    maxHeight: "100vh",
+    backgroundColor: "#fff",
+    overflow: "hidden",
+    "&.fullscreen": {
+      position: "absolute",
+      zIndex: 99999,
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    }
+  },
+  headerTitle: {
+    fontWeight: "bold",
+    color: grey[700],
+    paddingLeft: 16
+  }
+};

package/MainLayout/use-implied-video-regions.js

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import getImpliedVideoRegions from "../Annotator/reducers/get-implied-video-regions.js";
+var emptyArr = [];
+export default (function (state) {
+  if (state.annotationType !== "video") return emptyArr;
+  var keyframes = state.keyframes,
+      _state$currentVideoTi = state.currentVideoTime,
+      currentVideoTime = _state$currentVideoTi === void 0 ? 0 : _state$currentVideoTi; // TODO memoize
+
+  return useMemo(function () {
+    return getImpliedVideoRegions(keyframes, currentVideoTime);
+  }, [keyframes, currentVideoTime]);
+});

package/PointDistances/index.js

@@ -0,0 +1,73 @@
+import React, { Fragment } from "react";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+var theme = createTheme();
+var Svg = styled("svg")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    pointerEvents: "none",
+    position: "absolute",
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    "& text": {
+      fill: "#fff"
+    },
+    "& path": {
+      vectorEffect: "non-scaling-stroke",
+      strokeWidth: 2,
+      opacity: 0.5,
+      stroke: "#FFF",
+      fill: "none",
+      strokeDasharray: 5,
+      animationDuration: "4s",
+      animationTimingFunction: "linear",
+      animationIterationCount: "infinite",
+      animationPlayState: "running"
+    }
+  };
+});
+export var PointDistances = function PointDistances(_ref2) {
+  var projectRegionBox = _ref2.projectRegionBox,
+      regions = _ref2.regions,
+      pointDistancePrecision = _ref2.pointDistancePrecision,
+      realSize = _ref2.realSize;
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Svg, null, regions.filter(function (r1) {
+    return r1.type === "point";
+  }).flatMap(function (r1, i1) {
+    return regions.filter(function (r2, i2) {
+      return i2 > i1;
+    }).filter(function (r2) {
+      return r2.type === "point";
+    }).map(function (r2) {
+      var pr1 = projectRegionBox(r1);
+      var pr2 = projectRegionBox(r2);
+      var prm = {
+        x: (pr1.x + pr1.w / 2 + pr2.x + pr2.w / 2) / 2,
+        y: (pr1.y + pr1.h / 2 + pr2.y + pr2.h / 2) / 2
+      };
+      var displayDistance;
+
+      if (realSize) {
+        var w = realSize.w,
+            h = realSize.h,
+            unitName = realSize.unitName;
+        displayDistance = Math.sqrt(Math.pow(r1.x * w - r2.x * w, 2) + Math.pow(r1.y * h - r2.y * h, 2)).toFixed(pointDistancePrecision) + unitName;
+      } else {
+        displayDistance = (Math.sqrt(Math.pow(r1.x - r2.x, 2) + Math.pow(r1.y - r2.y, 2)) * 100).toFixed(pointDistancePrecision) + "%";
+      }
+
+      return React.createElement(Fragment, null, React.createElement("path", {
+        d: "M".concat(pr1.x + pr1.w / 2, ",").concat(pr1.y + pr1.h / 2, " L").concat(pr2.x + pr2.w / 2, ",").concat(pr2.y + pr2.h / 2)
+      }), React.createElement("text", {
+        x: prm.x,
+        y: prm.y
+      }, displayDistance));
+    });
+  })));
+};
+export default PointDistances;

package/PreventScrollToParents/index.js

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import React, { useState } from "react";
+import { RemoveScroll } from "react-remove-scroll";
+import { styled } from "@mui/material/styles";
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import useEventCallback from "use-event-callback";
+var theme = createTheme();
+var Container = styled("div")(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    "& > div": {
+      width: "100%",
+      height: "100%"
+    }
+  };
+});
+export var PreventScrollToParents = function PreventScrollToParents(_ref2) {
+  var children = _ref2.children,
+      otherProps = _objectWithoutProperties(_ref2, ["children"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mouseOver = _useState2[0],
+      changeMouseOver = _useState2[1];
+
+  var onMouseMove = useEventCallback(function (e) {
+    if (!mouseOver) changeMouseOver(true);
+
+    if (otherProps.onMouseMove) {
+      otherProps.onMouseMove(e);
+    }
+  });
+  var onMouseLeave = useEventCallback(function (e) {
+    setTimeout(function () {
+      if (mouseOver) {
+        changeMouseOver(false);
+      }
+    }, 100);
+  });
+  return React.createElement(ThemeProvider, {
+    theme: theme
+  }, React.createElement(Container, Object.assign({}, otherProps, {
+    onMouseMove: onMouseMove,
+    onMouseLeave: onMouseLeave
+  }), React.createElement(RemoveScroll, {
+    enabled: mouseOver,
+    removeScrollBar: false
+  }, children)));
+};
+export default PreventScrollToParents;

package/README.md

@@ -0,0 +1,101 @@
+# React Image Annotate
+
+[![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/react-image-annotate)
+
+The best image/video annotation tool ever. [Check out the demo here](https://universaldatatool.github.io/react-image-annotate/). Or the [code sandbox here](https://codesandbox.io/s/react-image-annotate-example-38tsc?file=/src/App.js:0-403).
+
+## Sponsors
+
+[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)
+
+## Features
+
+- Simple input/output format
+- Bounding Box, Point and Polygon Annotation
+- Zooming, Scaling, Panning
+- Multiple Images
+- Cursor Crosshair
+
+![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)
+
+## Usage
+
+`npm install react-image-annotate`
+
+```javascript
+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.
+
+```css
+@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`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js))                                                          |               |
+| `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](https://storybook.js.org/). 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](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development).
+
+### Icons
+
+Consult these icon repositories:
+
+- [Material Icons](https://material.io/tools/icons/)
+- [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&m=free)