A React-based image annotation editor for a crowdsourcing platform that allows users to retrieve images, annotate objects, and save labels and coordinates through JWT-authenticated REST APIs.
CROWDANN is an online crowdsourcing platform for image annotation. This repository contains the UI Editor component, which allows authenticated users to retrieve images from a dataset, annotate them using drawing tools, and submit labels and coordinates to the backend database.
The project was built as part of a B.Tech. project at IIT Jodhpur. The editor is designed for computer vision data collection workflows where human-generated annotations are required for downstream tasks such as face recognition, robotics, text recognition, autonomous vehicles, and surveillance analysis.
- User login and registration flow integrated with an identity provider
- JWT-based authentication for secure API communication
- Image retrieval from the application server
- Freehand annotation tool
- Rectangle / bounding box annotation tool
- Undo functionality
- Zoom in and zoom out support
- Submit annotations with labels
- Save annotated image locally
- Next image preloading to reduce latency
- ReactJS
- JavaScript
- HTML5 Canvas
- CSS
- Fetch API
- REST APIs
- JWT authentication
The project is part of a larger crowdsourcing platform with three main components:
-
Accounts / Identity Provider
Handles user registration, login, token generation, and token verification. -
UI Editor
Displays images, provides annotation tools, collects labels and coordinates, and sends annotation data to the backend. -
REST API / Application Server
Serves images to the editor, verifies tokens through the identity server, and stores annotations in the database.
The system runs across three servers:
- Editor server
- Identity server
- Application server
- The user logs in through the editor.
- The identity server verifies credentials and returns a JWT token.
- The editor sends the token to the application server to request an image.
- The image is displayed on the canvas for annotation.
- The user marks objects using freehand or rectangle tools.
- The annotation label and coordinates are submitted to the application server.
- The next image is fetched for annotation.
Stores the path points drawn by the user. To reduce storage, the implementation records the next point only when the coordinate difference exceeds one pixel.
Stores two diagonal points corresponding to the bounding box.
Uses a stack-based approach to revert the latest annotation changes.
Resizes the canvas while adjusting coordinates so saved annotations remain aligned with the original image dimensions.
Allows the user to download a copy of the annotated image.
The editor integrates with backend services using Fetch API and async/await.
- Sends login credentials to the identity server
- Receives a JWT token on successful authentication
- Sends a GET request with the JWT token
- Receives image ID and image source from the application server
- Sends token, coordinates, polygon/shape type, label, and image ID
- Stores the annotation in the backend database
The editor successfully supports annotation and stores coordinates relative to image size along with user-provided labels. The system also implements integrated editor features such as zoom, undo, next image loading, save, and backend-connected submission.
- Integrating the UI editor with the identity server and application server
- Handling zoom while preserving correct annotation coordinates
- Reducing image load latency during annotation workflows
- Add movable points for freehand annotations
- Deploy the editor for public access
- Add tagging support
- Add color selection options
- Improve live collaboration and usability features
Developed as part of the CROWDANN project at IIT Jodhpur.
Contributors:
- Manish Kumar (B17CS032)
- Manisha (B17CS033)
Faculty Advisors:
- Dr. Deepak Mishra
- Dr. Suman Kundu