feat(ui): the recipe preview shows one sample and the last step at full strength

Author: JArmandoAnaya

docs/content/ui.md

@@ -267,12 +267,15 @@ it and the footer carries the first one beside a shut *Save recipe*. Those are t
 shape, not a kernel rule the client is mirroring: the server still answers 422 to a body the
 form did not build.
 
-*Preview* renders three sample assets through `POST /projects/{id}/preprocessing-preview`,
-the export's own kernel path over a one-asset manifest: the first three train-fold members
-of the newest release with a split — variants are the train fold's — or the project's first
-three assets when no release has one. Three columns: the asset as it is, after the resize
-step alone, and the first augmented variant; a stage the recipe does not have says so
-(*No resize step*) rather than repeating the original. Each cell is one request keyed on
+*Preview* renders one sample asset through `POST /projects/{id}/preprocessing-preview`,
+the export's own kernel path over a one-asset manifest: the first train-fold member of the
+newest release with a split — variants are the train fold's — or the project's first asset
+when no release has one. Three columns: the asset as it is, after the resize step alone, and
+the last augmentation step ticked, headed by its name (*After horizontal flip*) and asked for
+in `showcase` mode — the draws fixed at the step's declared strength, so the cell shows what
+the step does rather than one seeded draw of it; an export still takes the seeded path. A
+stage the recipe does not have says so (*No resize step*) rather than repeating the
+original. Each cell is one request keyed on
 the spec it renders, and the spec settles for 400 ms before a cell asks, so typing `640`
 does not pay for `6` and `64`. The cell is the member dialog's own picture-with-labels
 mechanism (`patterns/StaticAnnotationOverlay.tsx`): the rendered image, and the response's

frontend/app/cycle/cycle.spec.ts

@@ -1569,8 +1569,9 @@ test("the whole cycle, from opening the app to a downloaded export", async ({ pa
     await expect(page.getByTestId("augment-variants")).toHaveValue("1");
     await expect(page.getByTestId("recipe-step-augment")).toHaveAttribute("data-state", "complete");
 
-    // The preview: three cells of the first row, each one a real render of a
-    // frame this walk ingested — the original, the letterbox, and variant 1.
+    // The preview: three cells of the one row, each one a real render of a
+    // frame this walk ingested — the original, the letterbox, and the flip
+    // shown at full strength.
     // Generous, because the preview debounces the draft and then goes through
     // Pillow three times.
     for (const cell of ["original", "resize", "augment"]) {

frontend/ui-core/src/patterns/RecipeEditor.tsx

@@ -324,7 +324,7 @@ export function RecipeEditor({
           testId="recipe-step-preview"
           aside={
             <span className="text-xs text-muted-foreground" data-testid="preview-aside">
-              3 sample assets · seeded
+              1 sample asset
             </span>
           }
           last

frontend/ui-core/src/screens/PreprocessingTab.tsx

@@ -15,12 +15,14 @@
  *
  * `POST /projects/{id}/preprocessing-preview` renders one asset through a spec
  * on the same kernel path an export takes, so what the cells show is what the
- * archive would hold. Three sample assets, and the choice is the release's: the
- * first three train-fold members of the newest release with a split, because
- * variants are written for the train fold only; without one, the first three
- * assets of the project. The columns are the stages — the asset as it is, after
- * the resize step alone, and the first augmented variant — each a request
- * keyed on the spec it renders, so a keystroke re-renders only what it changed.
+ * archive would hold. One sample asset, and the choice is the release's: the
+ * first train-fold member of the newest release with a split, because variants
+ * are written for the train fold only; without one, the project's first asset.
+ * The columns are the stages — the asset as it is, after the resize step alone,
+ * and the last augmentation step chosen, in `showcase` mode: the draws fixed at
+ * the step's declared strength, so the cell shows what the step does rather
+ * than one seeded draw of it. Each cell is a request keyed on the spec it
+ * renders, so a keystroke re-renders only what it changed.
  *
  * `PreviewCell` hands the rendered image and its placed annotations to the
  * static overlay pattern, so a label is drawn where the export would write it.
@@ -62,11 +64,13 @@ import {
   type Release,
 } from "./queries";
 import {
+  AUGMENT_OPS,
   canonicalSpec,
   draftFromSpec,
   draftToSpec,
   EMPTY_DRAFT,
   sameSpec,
+  type AugmentStepSpec,
   type RecipeDraft,
   type RecipeSpec,
 } from "./recipeDraft";
@@ -366,21 +370,25 @@ function Editor({
   );
 }
 
-/** The asset ids the preview renders: the train fold's first three, or the project's. */
-function useSampleAssets(projectId: string, datasetId: string | undefined): readonly string[] | undefined {
+/**
+ * The asset the preview renders: the train fold's first member, or the
+ * project's first asset; `null` when the project has none, `undefined` while
+ * the choice is still being read.
+ */
+function useSampleAsset(projectId: string, datasetId: string | undefined): string | null | undefined {
   const releases = useReleases(datasetId);
   const newest = newestRelease(releases.data?.items);
   const withSplit = newest !== undefined && newest.split !== null && newest.split !== undefined;
   const assignment = useReleaseAssignment(withSplit ? newest.id : undefined);
-  const project = useProjectAssets(projectId, 3);
+  const project = useProjectAssets(projectId, 1);
   if (datasetId !== undefined && releases.data === undefined && !releases.isError) return undefined;
   if (withSplit) {
     if (assignment.data === undefined && !assignment.isError) return undefined;
-    const train = assignment.data?.train.slice(0, 3) ?? [];
-    if (train.length > 0) return train;
+    const train = assignment.data?.train[0];
+    if (train !== undefined) return train;
   }
   if (project.data === undefined) return undefined;
-  return project.data.items.slice(0, 3).map((asset) => asset.id);
+  return project.data.items[0]?.id ?? null;
 }
 
 function newestRelease(items: readonly Release[] | undefined): Release | undefined {
@@ -416,17 +424,20 @@ function PreviewGrid({
   readonly classes: readonly LabelClass[] | undefined;
   readonly onReady: (ready: boolean) => void;
 }): JSX.Element {
-  const samples = useSampleAssets(projectId, datasetId);
+  const sample = useSampleAsset(projectId, datasetId);
   const settled = useSettledSpec(spec);
+  const resizeSteps = settled === null ? [] : settled.steps.filter((step) => step.kind === "resize");
   const resizeOnly: RecipeSpec | null =
-    settled === null
+    settled === null ? null : { target: settled.target ?? null, steps: resizeSteps, variants_per_asset: 0 };
+  const hasResize = resizeSteps.length > 0;
+  const lastAugment = settled === null ? undefined : lastAugmentStep(settled);
+  const showcase: RecipeSpec | null =
+    settled === null || lastAugment === undefined
       ? null
-      : { target: settled.target ?? null, steps: settled.steps.filter((step) => step.kind === "resize"), variants_per_asset: 0 };
-  const hasResize = resizeOnly !== null && resizeOnly.steps.length > 0;
-  const hasAugment = settled !== null && settled.variants_per_asset > 0;
+      : { target: settled.target ?? null, steps: [...resizeSteps, lastAugment], variants_per_asset: 1 };
 
-  if (samples === undefined) return <LoadingState rows={1} />;
-  if (samples.length === 0) {
+  if (sample === undefined) return <LoadingState rows={1} />;
+  if (sample === null) {
     return (
       <p className="text-sm text-muted-foreground" data-testid="preview-empty">
         Nothing to preview yet — the project has no images. The recipe can still be saved.
@@ -439,54 +450,64 @@ function PreviewGrid({
       <div className="grid grid-cols-3 gap-2 text-xs text-muted-foreground">
         <span>Original</span>
         <span>After resize</span>
-        <span>After augmentation</span>
+        <span data-testid="preview-augment-heading">
+          {lastAugment === undefined ? "After augmentation" : `After ${opLabel(lastAugment.op)}`}
+        </span>
       </div>
-      {samples.map((assetId, index) => (
-        <div
-          key={assetId}
-          className="grid grid-cols-3 items-center gap-2"
-          data-testid={`preview-row-${index}`}
-          title={`Sample ${assetId.slice(0, 8)}`}
-        >
+      <div
+        className="grid grid-cols-3 items-center gap-2"
+        data-testid="preview-row-0"
+        title={`Sample ${sample.slice(0, 8)}`}
+      >
+        <PreviewCell
+          projectId={projectId}
+          assetId={sample}
+          variant={0}
+          spec={NO_TRANSFORM}
+          classes={classes}
+          testId="preview-0-original"
+          onReady={onReady}
+        />
+        {hasResize ? (
           <PreviewCell
             projectId={projectId}
-            assetId={assetId}
+            assetId={sample}
             variant={0}
-            spec={NO_TRANSFORM}
+            spec={resizeOnly}
+            classes={classes}
+            testId="preview-0-resize"
+          />
+        ) : (
+          <Placeholder text="No resize step" testId="preview-0-resize" />
+        )}
+        {showcase !== null ? (
+          <PreviewCell
+            projectId={projectId}
+            assetId={sample}
+            variant={1}
+            spec={showcase}
             classes={classes}
-            testId={`preview-${index}-original`}
-            {...(index === 0 ? { onReady } : {})}
+            testId="preview-0-augment"
+            showcase
           />
-          {hasResize ? (
-            <PreviewCell
-              projectId={projectId}
-              assetId={assetId}
-              variant={0}
-              spec={resizeOnly}
-              classes={classes}
-              testId={`preview-${index}-resize`}
-            />
-          ) : (
-            <Placeholder text="No resize step" testId={`preview-${index}-resize`} />
-          )}
-          {hasAugment ? (
-            <PreviewCell
-              projectId={projectId}
-              assetId={assetId}
-              variant={1}
-              spec={settled}
-              classes={classes}
-              testId={`preview-${index}-augment`}
-            />
-          ) : (
-            <Placeholder text="No augmentation" testId={`preview-${index}-augment`} />
-          )}
-        </div>
-      ))}
+        ) : (
+          <Placeholder text="No augmentation" testId="preview-0-augment" />
+        )}
+      </div>
     </div>
   );
 }
 
+/** The augmentation the preview shows: the last one the draft holds, in the editor's own order. */
+function lastAugmentStep(spec: RecipeSpec): AugmentStepSpec | undefined {
+  const augments = spec.steps.filter((step): step is AugmentStepSpec => step.kind === "augment");
+  return augments[augments.length - 1];
+}
+
+function opLabel(op: AugmentStepSpec["op"]): string {
+  return (AUGMENT_OPS.find((one) => one.op === op)?.label ?? op).toLowerCase();
+}
+
 /**
  * One asset through one spec. The rendered image with its labels drawn where
  * the export would write them, or a placeholder while it has not arrived, or
@@ -507,6 +528,7 @@ function PreviewCell({
   classes,
   testId,
   onReady,
+  showcase = false,
 }: {
   readonly projectId: string;
   readonly assetId: string;
@@ -515,13 +537,15 @@ function PreviewCell({
   readonly classes: readonly LabelClass[] | undefined;
   readonly testId: string;
   readonly onReady?: (ready: boolean) => void;
+  readonly showcase?: boolean;
 }): JSX.Element {
   const preview = usePreprocessingPreview(
     projectId,
     assetId,
     variant,
     spec,
     spec === null ? "" : canonicalSpec(spec),
+    showcase,
   );
   const ready = preview.data !== undefined;
   useEffect(() => {

frontend/ui-core/src/screens/preprocessing.test.tsx

@@ -614,32 +614,44 @@ describe("deleting a recipe", () => {
 });
 
 describe("the preview", () => {
-  it("samples the project's first three assets when no release has a split, and renders each stage", async () => {
+  it("samples the project's first asset when no release has a split, and renders each stage", async () => {
     baseline([recipeRow("yolo-640", LETTERBOX)]);
     render(mount(<PreprocessingTab projectId={PROJECT} datasetId={DATASET} />));
 
     const grid = await screen.findByTestId("preview-grid");
     const rows = within(grid).getAllByTestId(/^preview-row-/);
-    expect(rows).toHaveLength(3);
+    expect(rows).toHaveLength(1);
     // Three cells and nothing else: the row spends its width on the images.
-    for (const row of rows) expect(row.children).toHaveLength(3);
-    expect(screen.getByTestId("preview-aside").textContent).toBe("3 sample assets · seeded");
+    expect(rows[0]?.children).toHaveLength(3);
+    expect(screen.getByTestId("preview-aside").textContent).toBe("1 sample asset");
+    // The third column names the last augmentation the draft holds.
+    expect(screen.getByTestId("preview-augment-heading").textContent).toBe("After brightness and contrast");
 
     await waitFor(() =>
       expect(screen.getByTestId("preview-0-augment").getAttribute("data-state")).toBe("rendered"),
     );
     // The original is the asset through no transform; the resize column the
-    // resize step alone; the augmentation column variant 1 of the whole spec.
+    // resize step alone; the augmentation column the resize and the last
+    // augmentation step only, one variant, shown at its declared strength.
     const previews = sent.filter((r) => r.method === "POST" && pathOf(r).endsWith("/preprocessing-preview"));
-    const forFirst = previews.filter((r) => bodyOf(r)["asset_id"] === ASSET_A).map(bodyOf);
-    const specs = forFirst.map((body) => ({
+    const requests = previews.map(bodyOf).map((body) => ({
       variant: body["variant"],
-      steps: (body["spec"] as RecipeSpec).steps.map((step) => step.kind),
+      showcase: body["showcase"],
+      variants: (body["spec"] as RecipeSpec).variants_per_asset,
+      steps: (body["spec"] as RecipeSpec).steps.map((step) =>
+        step.kind === "augment" ? `augment:${step.op}` : step.kind,
+      ),
     }));
-    expect(specs).toContainEqual({ variant: 0, steps: [] });
-    expect(specs).toContainEqual({ variant: 0, steps: ["resize"] });
-    expect(specs).toContainEqual({ variant: 1, steps: ["resize", "augment", "augment"] });
-    expect(previews.some((r) => bodyOf(r)["asset_id"] === ASSET_D)).toBe(false);
+    expect(requests).toContainEqual({ variant: 0, showcase: false, variants: 0, steps: [] });
+    expect(requests).toContainEqual({ variant: 0, showcase: false, variants: 0, steps: ["resize"] });
+    expect(requests).toContainEqual({
+      variant: 1,
+      showcase: true,
+      variants: 1,
+      steps: ["resize", "augment:brightness_contrast"],
+    });
+    expect(requests).toHaveLength(3);
+    expect(new Set(previews.map((r) => bodyOf(r)["asset_id"]))).toEqual(new Set([ASSET_A]));
     const original = screen.getByTestId("preview-0-original");
     const image = original.querySelector("img");
     expect(image?.getAttribute("src")).toBe("data:image/png;base64,aGVsbG8=");
@@ -650,6 +662,37 @@ describe("the preview", () => {
     expect(screen.getByTestId("recipe-step-preview").getAttribute("data-state")).toBe("complete");
   });
 
+  it("names the step the third column shows, and follows the draft's last augmentation", async () => {
+    baseline([recipeRow("yolo-640", LETTERBOX)]);
+    render(mount(<PreprocessingTab projectId={PROJECT} datasetId={DATASET} />));
+    await screen.findByTestId("preview-grid");
+
+    await userEvent.click(screen.getByTestId("augment-brightness_contrast"));
+    await waitFor(() =>
+      expect(screen.getByTestId("preview-augment-heading").textContent).toBe("After horizontal flip"),
+    );
+    await waitFor(() =>
+      expect(
+        sent
+          .filter((r) => r.method === "POST" && pathOf(r).endsWith("/preprocessing-preview"))
+          .map(bodyOf)
+          .some(
+            (body) =>
+              body["showcase"] === true &&
+              (body["spec"] as RecipeSpec).steps.map((step) => (step.kind === "augment" ? step.op : step.kind)).join(",") ===
+                "resize,hflip",
+          ),
+      ).toBe(true),
+    );
+
+    // The last augmentation unticked: no variant to show, and the column says so.
+    await userEvent.click(screen.getByTestId("augment-hflip"));
+    await waitFor(() =>
+      expect(screen.getByTestId("preview-0-augment").textContent).toContain("No augmentation"),
+    );
+    expect(screen.getByTestId("preview-augment-heading").textContent).toBe("After augmentation");
+  });
+
   it("samples the newest release's train fold when it has a split", async () => {
     on("GET", /\/releases$/, {
       status: 200,
@@ -680,18 +723,19 @@ describe("the preview", () => {
 
     await screen.findByTestId("preview-grid");
     await waitFor(() =>
-      expect(screen.getByTestId("preview-1-original").getAttribute("data-state")).toBe("rendered"),
+      expect(screen.getByTestId("preview-0-original").getAttribute("data-state")).toBe("rendered"),
     );
     const sampled = new Set(
       sent
         .filter((r) => r.method === "POST" && pathOf(r).endsWith("/preprocessing-preview"))
         .map((r) => bodyOf(r)["asset_id"]),
     );
-    expect(sampled).toEqual(new Set([ASSET_C, ASSET_D]));
+    expect(sampled).toEqual(new Set([ASSET_C]));
     // No resize step and no augmentation: the two stages say so rather than
     // repeating the original.
     expect(screen.getByTestId("preview-0-resize").textContent).toContain("No resize step");
     expect(screen.getByTestId("preview-0-augment").textContent).toContain("No augmentation");
+    expect(screen.getByTestId("preview-augment-heading").textContent).toBe("After augmentation");
   });
 
   it("shows a refused rendering as prose in the cell", async () => {