Mischief

17 / Documents

Bounding Boxes

Selectable regions drawn over a page image from normalized coordinates, for showing an agent exactly where an answer came from.

Live previewSource
Invoice, page 1

Selected: Total due

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

const boxes = [
  { id: "total", label: "Total", x: 0.62, y: 0.71, width: 0.2, height: 0.04 },
]

export function Invoice() {
  return <BoundingBoxes src="/page-1.png" alt="Invoice, page 1" boxes={boxes} />
}

API

src, altstringThe page image and its description.
boxesBoundingBox[]Id, optional label and tone, and x, y, width, height as fractions of the page from 0 to 1.
activeId, defaultActiveIdstring | nullThe selected region, controlled or uncontrolled.
onActiveChange(id: string | null) => voidRuns when a region is selected or cleared.
showLabelsbooleanShows the label tab above each region.
renderImage(props) => ReactNodeUses a framework image component instead of a plain img.

Accessibility

Regions are a labelled list of toggle buttons, so they are reachable by keyboard and announced with their label and pressed state rather than only by colour. The visible label is decorative and hidden from assistive technology to avoid reading it twice. Coordinates are clamped to the page, so bad data cannot push a region off the image or out of the document flow.

Dependencies