A state-of-the-art, full-stack, desktop-grade platform for image annotation and dataset preparation. Built with React 19, Vite, Express, and Tailwind CSS, this tool empowers machine learning developers and annotators to create high-quality segmentation masks and bounding box datasets through interactive manual tools and an advanced offline Active Learning Computer Vision Engine.
A professional-grade, desktop-optimized suite of manual and semi-automated tools for pixel-level dataset preparation:
Quick, precise rectangular bounding boxes tailored for object detection and anchoring.
Hand-drawn or point-by-point closed polygon contours to outline highly complex boundaries and irregular shapes.
Smooth, continuous hand-drawn tracing, allowing annotators to naturally follow organic silhouettes.
Seed-based color-threshold boundary extraction. Instantly select and automatically fill coherent visual spaces with a single click.
Local pixel-level manual brush and eraser adjustments to fine-tune, paint, or clear mask segments for flawless edges.
The engine preserves coordinates normalized between 0.0 and 1.0 for full compatibility with YOLO, COCO, and custom ML architectures.
The exported mask images feature a clean, solid black background where the annotated targets are perfectly isolated and rendered in the exact custom colors assigned by the user:
- Offline Computer Vision Active Learning:
- Propagate annotations from a single hand-labeled reference image to multiple unannotated target images in your dataset.
- Select from four distinct, professional-grade computer vision models operating entirely server-side/client-side.
- Clean, Responsive Slate UI:
- Elegant dark dashboard using high-contrast slate tones, styled with Tailwind CSS.
- Dynamic animations powered by Motion (
motion/react) for intuitive transitions. - A dense layout optimizing screen real estate for multi-class labels, image lists, and canvas areas.
The hallmark of this platform is its custom, mathematical Computer Vision Engine located in src/utils/activeLearning.ts. It offers four highly professional models to automate dataset labeling based on visual characteristics:
- SLIC Superpixel & Label Propagation (Heavy-Max)
- How it works: Groups pixels into visually homogeneous superpixels using color & spatial metrics (Simple Linear Iterative Clustering). It models the color-texture profile of your reference annotation, and propagates labels across target superpixel neighborhoods using similarity mapping.
- Best for: Organic shapes, complex objects, varying counts, and natural image datasets.
- Iterative Color GMM Backprojection (Heavy)
- How it works: Builds explicit probability density histograms (acting as Gaussian Mixture Models) representing the foreground of annotated classes and the background. It then projects these probability density functions back onto target images to segment distinct instances.
- Best for: High-contrast objects, complex multi-class labels, and distinct color assets.
- Multi-Instance NCC Matcher & Local Otsu (Medium)
- How it works: Locates multiple repeating occurrences of rigid templates using sliding-window Normalized Cross-Correlation (NCC), then applies a localized, adaptive Otsu's thresholding to extract accurate polygon contours for each detected instance.
- Best for: Repeating parts, industrial/mechanical components, and varying object counts.
- Gradient Vector Flow Contour Snapping (Lightweight)
- How it works: Analyzes localized Canny-like border gradients and diffuses force vectors to snap existing polygon vertices directly onto the physical borders of high-contrast objects.
- Best for: Simple high-contrast geometric objects, boxes, and clean edges.
├── datasets/ # Local directory for input/output dataset directories
├── src/
│ ├── components/
│ │ ├── AutoLabeler.tsx # Panel for selecting Active Learning models & running automation
│ │ ├── ClassList.tsx # Handles defined classes, custom colors, and label selections
│ │ ├── DirectorySettings.tsx # Paths configurations for loading and saving images
│ │ ├── Header.tsx # High-level info, dataset stats, and saving state alerts
│ │ └── ImageList.tsx # Sidebar list of loaded images with mask status indicators
│ ├── utils/
│ │ └── activeLearning.ts # State-of-the-Art Offline Computer Vision Engine algorithms
│ ├── types.ts # Strongly typed interfaces for datasets, annotations, and classes
│ ├── main.tsx # React client entry point
│ └── App.tsx # Primary workspace, canvas layout, tools handlers, and core state
├── server.ts # Full-stack Node.js/Express server (handles fs operations, image streams, and API)
├── package.json # Managed dependencies and build scripts
└── vite.config.ts # Vite compiler configurations
- Frontend: React 19, TypeScript, Tailwind CSS, Motion (
motion/react), Lucide React. - Backend: Node.js, Express, tsx (TypeScript execute).
- Build Tooling: Vite, esbuild (for compiling the backend TypeScript to optimized CommonJS).
Clone the repository and install all required dependencies:
npm installRun the unified development environment (Express Server serving the Vite frontend via middleware mode):
npm run devThe server will boot on http://localhost:3000. Open your browser and navigate to this address.
Build the client static bundles and compile the backend server.ts into a self-contained, optimized file using esbuild:
npm run buildOnce the build completes, start the production application:
npm run start