Click segmentPro
Click an object to select it, the way promptable segmenters work: positive points pull an object in, negative points push parts out, the mask follows each click, and a crosshair adds points from the keyboard.
On this page
ProClick anything in the shot to select it. Hover previews the object, Alt click takes a part back out, and arrows with Enter work from the keyboard.
Installation
Usage
import { ClickSegment } from "@/components/ui/chatcn/pro/click-segment"
<ClickSegment
src={image.url}
alt={image.alt}
width={image.width}
height={image.height}
onSegment={async (points) => {
const res = await segment(image.id, points)
return { mask: res.maskUrl, label: res.label }
}}
actions={<Button onClick={useMask}>Use as mask</Button>}
/>Points are fractions of the image with a label, add or subtract, which is what point prompted segmenters take. With onSegment the component runs your segmenter on every change, drops stale answers and handles pending, failure and retry; or pass mask, pending and error yourself. The mask is any MaskSource (a PNG, a canvas, ImageData or a vector path) and shows through MaskLayer from mask-overlay. Pass hoverMask from onHoverChange to preview the object under the cursor before a click.
Examples
States
ProNo points, segmenting, a failed segmenter, a subtract point, ants, disabled and a broken image.
Props
| Prop | Type | Notes |
|---|---|---|
src, alt | string | The surface is named "Select in <alt>" |
width, height, aspectRatio | number | Frame shape before load |
points, defaultPoints, onPointsChange | { x, y, label: "add" | "subtract" }[] | Controlled or uncontrolled, with undo and redo either way |
onSegment | (points) => Promise<MaskSource | { mask, label } | null> | Runs on every change; stale answers are dropped |
mask, maskLabel | MaskSource, string | When you run the segmenter yourself |
pending, error, onRetry | boolean, boolean | string, () => void | A "Segmenting" chip after 300 ms; a failure with Retry |
hoverMask, onHoverChange | MaskSource, (point | null) => void | Preview the object under the pointer or keyboard cursor |
mode, defaultMode, onModeChange | "add" | "subtract" | What a plain click adds |
display, defaultDisplay, onDisplayChange | "tint" | "ants" | "isolate" | "outline" | Default tint |
color, disabled, toolbar, hint, actions | Mask color, lock, hide the toolbar, the empty hint, a slot after the readout |
Keyboard
| Key | Action |
|---|---|
| Arrows on the image | Move the crosshair by 2 %; with Shift, by 10 % |
Enter | Add a point at the crosshair in the current mode |
Shift+Enter | Subtract a point at the crosshair |
A, S | Add or subtract mode |
⌘Z or Ctrl+Z | Undo the last point |
⇧⌘Z, Ctrl+Y | Redo |
Escape, Delete on the image | Clear every point |
Accessibility
- The image is a focusable group with a described hint for the keys, so every point can be placed without a pointer.
- Each point, removal, undo and new mask is announced politely, with where the point is and how much of the image the mask covers.
- Points are green to add and red to subtract, with a plus or minus glyph as the cue that does not depend on color. Under forced colors they draw in system colors.
- Shortcuts never fire while you type in the actions slot.
Motion
- A clicked point pops in over 150 ms from 75 % with a fade; points placed from the keyboard appear instantly.
- The mask swaps the moment the segmenter answers. The hover preview and the status chips fade in 150 ms.
- Under reduced motion the points only fade.