Live Parse Capabilities Features Block for React

Edit EXAMPLES at the top of the file. Each example is an id, a label for the control, an intent, a confidence in tenths of a percent (982 shows as 98.2%) and its spans: the pieces of the sentence in order, where a span with an entity is marked in the sentence and listed under Entities with that label. The entity list is read from the spans, so the sentence and its answer can't disagree.

From CAPABILITIES, a list of labels and values in tenths of a percent. The figure and its bar are drawn from the same number, so they always match. Replace them with your own measurements and say on the page what they were measured on; the defaults are written for a held-out set of English sentences.

No. All three parses are rendered in one grid cell, so the cell is as tall as the tallest, and the ones not shown are invisible, inert and hidden from assistive technology. Only the open parse is read out, and a visually hidden status line says which intent was found and with what confidence.

Yes. The three examples are a segmented control named "Example sentence": Tab reaches it, the arrow keys move between the examples and the choice applies at once. Its focus ring is visible and the selected example is marked by the sliding indicator.

The two halves stack, the parse first and the capability list under it, with a hairline between them. The segmented control scrolls sideways inside its own row if the three labels don't fit, and nothing else scrolls: the sentence wraps and the entities list stays in one column down to 320 px.

The header fades up once when the page loads, and the meter bars ease to their width when an example changes, both with CSS transitions. With reduced motion the transitions are off and everything appears in place.