Image Annotation

React + Next.js Bounding Box Annotation Tool

A React + Next.js web refactored application for creating bounding box annotations on images with auto-loading, drag-and-drop functionality, and comprehensive data export capabilities.

View Code

Project Gallery

Overview

A comprehensive web-based image annotation tool built with React and Next.js that streamlines the process of creating bounding box annotations. The application features automatic image loading, intuitive drag-and-drop interface, real-time annotation editing, and robust data management with localStorage integration and JSON export functionality.

Key Features

Auto-load random images on startup

Immediate bounding box creation and editing

Drag to move and resize with corner handles

Original coordinate storage with scale factor handling

Window resize handling and responsive design

Submit annotation with validation

Export all data to JSON format

Annotation leaderboard and progress tracking

Grid overlay for validation (keyboard shortcut)

Dark theme with green bounding boxes

Challenges

Real-time coordinate scaling across different display sizes

Maintaining annotation accuracy during window resize

Efficient data storage and retrieval in browser

User-friendly annotation workflow design

Solutions

Implemented scale factor calculation for coordinate accuracy

Built responsive design with automatic resize handling

Created comprehensive localStorage data structure

Designed intuitive keyboard shortcuts and UI controls

Results & Impact

Streamlined annotation workflow with immediate box creation

Accurate coordinate preservation across display changes

Comprehensive data export with metadata

Enhanced user experience with keyboard shortcuts

Project Info

Role

Creator

Timeline

2017 - 2025

8 years

Technologies

ReactNext.jsJavaScriptHTML/CSSlocalStorage APIJSON

Links

github