Introduction

A ReactJS & NodeJS based annotation tool that can collect image data.

Acknowledgements

• React Image Annotate
• turktool
• VizWiz-Visual Grounding
• Visual Grounding for VQA

Functionalities

• Drag Image
• Zoom In/Out Image
• Add Rectangles
  • add tag
  • allow comment
• Add Points
  • add tag
  • allow comment
• Add polygons
  • add tag
  • allow comment

UI Components and their Corresponding Folder Names

Configuration

The following properties can be defined on the config.json

Prop	Type	Description
enabledTools	Array<string>	Tools(Add Rectangles/Add Points/Add polygons) allowed to be used.
allow-comments	boolean	Allow user to input text.
tags	Array<string>	Allowed tags for regions.
introduction	string	Introduction text showing on the task overview.
imgUrl	string	Path to the image displayed on the tutorial.
steps	Array<string>	Steps displayed on the tutorial.
development	boolean	AMT Sandbox Development Environment(true) vs. Production Environment(false).

Front-end Development:

Run npm run <SCRIPT_NAME> to run a script. When developing the app, cd to 'client' folder and run "npm run start".

Script	Description
start	Run font-end app on port 3000
build	creates a build directory with a production build of the app

Back-end Development:

Run npm run <SCRIPT_NAME> to run a script. When we are developing the app, cd to 'server' folder and run "npm run start".

Script	Description
start	Run back-end on port 3001
build	creates a build directory with a production build of the app

Full-stack Development:

Run npm run <SCRIPT_NAME> to run a script. When we are developing the app, go to top-level folder and run "npm run dev".

Script	Description
dev	Run front-end app on port 3000 and back-end on port 3001
build	creates a build directory with a production build of the app

File Tree

• client
  • public
    • favicon.ico
    • index.html
  • src
    • config.json
    • index.js
    • pages
      • Home
        • Introduction
          • main_Introduction.js
        • SubmitHIT
          • main_SubmitHIT.js
          • serviceWorker.js
        • Tutorial
          • main_Tutorial.js
        • annotateComponents
          • ImageCanvas
            • background.js
            • colors.js
            • main_ImageCanvas.js
            • regionTools.js
            • styles_ImageCanvas.js
            • useMouse.js
            • useProjectBox.js
          • MainLayout
            • iconDictionary.js
            • main_MainLayout.js
            • styles_MainLayout.js
            • types.js
          • RegionLabel
            • main_RegionLabel.js
            • styles_RegionLabel.js
          • RegionShapes
            • main_RegionShapes.js
          • RegionTags
            • main_RegionTags.js
          • ShortcutsManager
            • main_ShortcutsManager.js
          • TransformBoxes
            • main_TransformBoxes.js
          • main_Annotate.js
          • reducers
            • combineReducers.js
            • generalReducer.js
            • getActiveImage.js
            • historyHandler.js
            • imageReducer.js
        • main_Home.js
        • styles_Home.js
      • ShowResult
        • main_ShowResult.js
    • route.js
    • site.css
• server
  • config.json
  • index.js