Skip to main content

​
Overview

The AnnotationBox type represents a single bounding box annotation on an image. Each annotation box has a unique identifier, a label, and position/dimension properties.

​
Type Definition

export type AnnotationBox = {
  id: string
  label: string
  x: number
  y: number
  width: number
  height: number
}

​
Properties

​
id
string
required
Unique identifier for the annotation box. Generated using crypto.randomUUID().
​
label
string
required
The label/class name assigned to this annotation (e.g., “cat”, “dog”, “car”).
​
x
number
required
The x-coordinate of the top-left corner of the bounding box in pixels.
​
y
number
required
The y-coordinate of the top-left corner of the bounding box in pixels.
​
width
number
required
The width of the bounding box in pixels.
​
height
number
required
The height of the bounding box in pixels.

​
Usage Example

Creating a new annotation box when the user finishes drawing: 
const annotation: AnnotationBox = {
  id: crypto.randomUUID(),
  label: activeLabel,
  x,
  y,
  width,
  height,
}

setImages((previous) =>
  previous.map((image) => {
    if (image.id !== currentImage.id) return image
    return {
      ...image,
      annotations: [...image.annotations, annotation],
    }
  }),
)
  • ImageItem - Contains an array of AnnotationBox objects
  • CsvRow - Flattened representation for CSV export