| import { useState } from "react"; |
| import { Clock3, Layers3 } from "lucide-react"; |
|
|
| const types = [ |
| "Subtasks", |
| "Plans", |
| "Memory", |
| "Task rephrasings", |
| "Interjections & speech", |
| "Visual questions", |
| ]; |
| const phases = [ |
| { |
| title: "Pick up a cup and place it on a tray", |
| duration: "8.0 s", |
| rows: [ |
| ["0.0–1.4 s", "Reach the right gripper toward the cup", 1.4], |
| ["1.4–2.5 s", "Grasp the cup with the right gripper", 1.1], |
| ["2.5–5.6 s", "Move the cup over the tray", 3.1], |
| ["5.6–8.0 s", "Place the cup on the tray and release it", 2.4], |
| ] as [string, string, number][], |
| }, |
| { |
| title: "Wipe a section of the counter", |
| duration: "18.0 s", |
| rows: [ |
| ["0.0–2.0 s", "Pick up the sponge", 2], |
| ["2.0–15.5 s", "Wipe the counter with the sponge", 13.5], |
| ["15.5–18.0 s", "Place the sponge beside the sink", 2.5], |
| ] as [string, string, number][], |
| }, |
| ]; |
| const examples: Record<string, { label: string; text: string }[]> = { |
| Plans: [ |
| { |
| label: "At 2.5 s · after grasping the cup", |
| text: "1. Move the cup over the tray.\n2. Place the cup on the tray and release it.", |
| }, |
| { |
| label: "At 5.6 s · after moving the cup", |
| text: "1. Place the cup on the tray and release it.", |
| }, |
| ], |
| Memory: [ |
| { label: "At 2.5 s · completed action", text: "I picked up the cup." }, |
| { |
| label: "At 15.5 s · after the wiping phase", |
| text: "I picked up the sponge and wiped the counter.", |
| }, |
| ], |
| "Task rephrasings": [ |
| { |
| label: "Original task · place the cup on the tray", |
| text: "Move the cup onto the tray.", |
| }, |
| { |
| label: "Same objects, action and destination", |
| text: "Could you put the cup on the tray, please?", |
| }, |
| ], |
| "Interjections & speech": [ |
| { |
| label: "At 2.5 s · before transporting the cup", |
| text: "User: “Now move the cup over the tray, please.”\nRobot: “On it.”", |
| }, |
| { |
| label: "At 15.5 s · before putting down the sponge", |
| text: "User: “Place the sponge beside the sink.”\nRobot: “Okay.”", |
| }, |
| ], |
| "Visual questions": [ |
| { |
| label: "At 2.5 s · object state", |
| text: 'Q: What is the state of the cup?\nA: {"label":"cup","attribute":"state","value":"held by the right gripper"}', |
| }, |
| { |
| label: "At 8.0 s · spatial relation", |
| text: 'Q: Where is the cup relative to the tray?\nA: {"subject":"cup","relation":"on","object":"tray"}', |
| }, |
| ], |
| }; |
| const explanations: Record<string, string> = { |
| Subtasks: |
| "One meaningful action phase per segment. Reach, grasp, move and release can have separate boundaries; a sustained action stays together while its purpose is unchanged.", |
| Plans: |
| "A plan lists the remaining subtasks at each boundary. Completed actions disappear as the episode progresses.", |
| Memory: |
| "Short first-person summaries of completed work, updated at subtask boundaries. Keep useful outcomes rather than replaying every motion.", |
| "Task rephrasings": |
| "Different wording for the same episode-level instruction. These do not create new temporal segments or change the task.", |
| "Interjections & speech": |
| "A short user cue and paired robot acknowledgement at a subtask transition. The request matches what the recorded robot does next.", |
| "Visual questions": |
| "A question and a structured answer grounded in a sampled frame. These are point-in-time annotations, not action spans.", |
| }; |
|
|
| export default function AnnotationExamples({ custom }: { custom: boolean }) { |
| const [type, setType] = useState("Subtasks"); |
| return ( |
| <section className="annotation-examples" aria-labelledby="examples-title"> |
| <div className="examples-heading"> |
| <Layers3 size={16} /> |
| <h3 id="examples-title">What will the annotations look like?</h3> |
| <span>Illustrative examples</span> |
| </div> |
| <div className="example-tabs" aria-label="Example annotation type"> |
| {types.map((t) => ( |
| <button |
| key={t} |
| className={t === type ? "active" : ""} |
| aria-pressed={t === type} |
| onClick={() => setType(t)} |
| > |
| {t} |
| </button> |
| ))} |
| </div> |
| <p className="examples-explanation">{explanations[type]}</p> |
| <div className="example-pair"> |
| {type === "Subtasks" |
| ? phases.map((example, index) => ( |
| <article className="example-card" key={example.title}> |
| <div className="example-kicker"> |
| EXAMPLE {index + 1} |
| <span> |
| <Clock3 size={11} /> |
| {example.duration} |
| </span> |
| </div> |
| <h4>{example.title}</h4> |
| <div |
| className="example-timeline" |
| aria-label={`Illustrated timeline: ${example.rows.length} action phases`} |
| > |
| {example.rows.map(([time, text, seconds], i) => ( |
| <span |
| key={time} |
| style={{ flex: seconds }} |
| className={`phase-${i}`} |
| title={`${time}: ${text}`} |
| /> |
| ))} |
| </div> |
| <div className="example-rows"> |
| {example.rows.map(([time, text], i) => ( |
| <div key={time}> |
| <span className={`phase-dot phase-${i}`} /> |
| <code>{time}</code> |
| <span>{text}</span> |
| </div> |
| ))} |
| </div> |
| </article> |
| )) |
| : examples[type].map((example, index) => ( |
| <article className="example-card" key={example.label}> |
| <div className="example-kicker">EXAMPLE {index + 1}</div> |
| <h4>{example.label}</h4> |
| <p className="example-output">{example.text}</p> |
| </article> |
| ))} |
| </div> |
| <p className="example-footnote"> |
| Illustrations of the default style, not predictions for your dataset. |
| Boundaries depend on the visible action. |
| {custom |
| ? " Your custom prompts may change the wording and granularity." |
| : ""} |
| </p> |
| </section> |
| ); |
| } |
|
|
