add/remotion mnist demo by aliasaria · Pull Request #1510 · transformerlab/transformerlab-app

aliasaria · 2026-03-11T16:04:18Z

Update MNIST demo script: fix row selectors, add smooth scrolling and pauses
Add voiceover narration to MNIST demo script
Add FAST_MODE flag, Apple TTS support, and fix video quality
Add Remotion composition for MNIST demo video

… pauses - Fix run #43 button selectors to use ancestor::tr instead of ancestor::div - Add smooth scroll helper with eased animation for cinematic scrolling - Add 4-second pauses at each UI transition for demo recording - Add dedicated playwright.config.ts for demo scripts - Close W&B tab and return to app after viewing - Update AGENTS.md with browser debugging tool guidance

- Add mnist-demo-script.md with step-by-step voiceover text and timing - Parse markdown script and print narration banners at each step - Pause for estimated speaking duration plus 3s buffer - Support macOS text-to-speech via APPLE_SPEECH=1 env flag - Move login before Step 0 narration to avoid blank screen

- Support FAST_MODE=1 and FAST=1 env vars to skip narration pauses - Reduce all timeouts (transitions, content loads, scrolls) in fast mode - Add APPLE_SPEECH=1 flag for macOS text-to-speech narration - Add RECORD_VIDEO=1 flag for optional video recording - Fix grainy video: match viewport/video at 1920x1080, use 2x scale factor - Add voiceover timing estimates to script markdown

- Browser frame wrapper (macOS chrome with traffic lights + address bar) - Animated cursor overlay following Playwright click coordinates - Lower-third narration text overlay from demo script - Imports the Playwright-recorded video (public/demo.webm, gitignored)

paragon-review · 2026-03-11T16:10:35Z

Paragon Summary

This pull request review identified 3 issues across 2 categories in 16 files. The review analyzed code changes, potential bugs, security vulnerabilities, performance issues, and code quality concerns using automated analysis tools.

This PR adds a Remotion-based video composition for generating an MNIST demo with voiceover narration and Apple TTS support, along with an accompanying Playwright test script to drive the demo.

Key changes:

Added new Remotion project for MNIST demo video with components (BrowserFrame, CursorOverlay, MnistDemo, NarrationOverlay)
Updated MNIST demo Playwright test: fixed row selectors, added smooth scrolling and pauses
Added voiceover narration with Apple TTS support and FAST_MODE flag
Created mnist-demo-script.md with demo script documentation

Confidence score: 4/5

This PR has low-moderate risk with 2 medium-priority issues identified
Score reflects code quality concerns and maintainability issues
Consider addressing medium-priority findings to improve code quality

16 files reviewed, 3 comments

Severity breakdown: Medium: 2, Low: 1

Tip: @paragon-run <instructions> to chat with our agent or push fixes!

Dashboard

paragon-review · 2026-03-11T16:10:36Z

+          position: "absolute",
+          left: x,
+          top: y,
+          transform: `translate(-2px, -2px) scale(${clicking ? 0.85 : 1})`,


Bug: CSS transition won't work in Remotion's frame-by-frame renderer

CSS transition won't work in Remotion's frame-by-frame renderer. Cursor scale animation will snap instead of easing. Use interpolate() like the ripple effect.

View Details

Location: docs/demos/remotion/src/CursorOverlay.tsx (lines 150)

Analysis

CSS transition won't work in Remotion's frame-by-frame renderer

What fails The cursor click scale effect (1.0 → 0.85) hard-snaps between frames in the rendered mp4 instead of easing smoothly. CSS transitions require previous frame state which Remotion doesn't provide.

Result Cursor scale jumps instantly between 1.0 and 0.85 in rendered video, though preview mode appears smooth

Expected Cursor scale should ease smoothly between states in the rendered mp4, matching preview behavior

Impact Demo video quality is degraded — cursor clicks look jerky/glitchy in the final rendered output.

How to reproduce

1. Run `cd docs/demos/remotion && npm run render` 2. Observe the cursor at click keyframes in the output mp4 3. Compare with `npm run preview` in browser

AI Fix Prompt

Fix this issue: CSS transition won't work in Remotion's frame-by-frame renderer. Cursor scale animation will snap instead of easing. Use interpolate() like the ripple effect. Location: docs/demos/remotion/src/CursorOverlay.tsx (lines 150) Problem: The cursor click scale effect (1.0 → 0.85) hard-snaps between frames in the rendered mp4 instead of easing smoothly. CSS transitions require previous frame state which Remotion doesn't provide. Current behavior: Cursor scale jumps instantly between 1.0 and 0.85 in rendered video, though preview mode appears smooth Expected: Cursor scale should ease smoothly between states in the rendered mp4, matching preview behavior Steps to reproduce: 1. Run `cd docs/demos/remotion && npm run render` 2. Observe the cursor at click keyframes in the output mp4 3. Compare with `npm run preview` in browser Provide a code fix.

_{Tip: Reply with @paragon-run to automatically fix this issue}

paragon-review · 2026-03-11T16:10:36Z

 export default defineConfig({
  testDir: '.',
  fullyParallel: false,
  retries: 0,


Bug: Trace set to 'on-first-retry' but retries is 0. Traces will never be captured on failure

Trace set to 'on-first-retry' but retries is 0. Traces will never be captured on failure. Use 'retain-on-failure' instead.

View Details

Location: docs/demos/playwright/playwright.config.ts (lines 8)

Analysis

Trace set to 'on-first-retry' but retries is 0. Traces will never be captured on failure

What fails Playwright traces are configured to record on first retry, but retries are set to 0, so traces are never recorded. This is a regression from the previous config which had trace: 'on'.

Result No trace.zip artifacts are generated on test failure

Expected Trace artifacts should be captured on failure for debugging

Impact When demo tests fail, there are zero trace artifacts for debugging — a regression from prior config.

How to reproduce

1. Run `npx playwright test --config docs/demos/playwright/playwright.config.ts` 2. Let a test fail 3. Check test-results/ for trace files

Patch Details

- trace: 'on-first-retry', + trace: 'retain-on-failure',

AI Fix Prompt

Fix this issue: Trace set to 'on-first-retry' but retries is 0. Traces will never be captured on failure. Use 'retain-on-failure' instead. Location: docs/demos/playwright/playwright.config.ts (lines 8) Problem: Playwright traces are configured to record on first retry, but retries are set to 0, so traces are never recorded. This is a regression from the previous config which had trace: 'on'. Current behavior: No trace.zip artifacts are generated on test failure Expected: Trace artifacts should be captured on failure for debugging Steps to reproduce: 1. Run `npx playwright test --config docs/demos/playwright/playwright.config.ts` 2. Let a test fail 3. Check test-results/ for trace files Provide a code fix.

_{Tip: Reply with @paragon-run to automatically fix this issue}

paragon-review · 2026-03-11T16:10:36Z

@@ -0,0 +1,43 @@
+import React, { useRef } from "react";


Bug: useRef is imported but never used in MnistDemo

useRef is imported but never used in MnistDemo. It triggers lint warnings. Remove the unused import.

View Details

Location: docs/demos/remotion/src/MnistDemo.tsx (lines 1)

Analysis

useRef is imported but never used in MnistDemo. It triggers lint warnings

What fails useRef is imported from React but never referenced in the MnistDemo component body, indicating leftover code from a previous iteration.

Result TypeScript/ESLint reports unused import warning for useRef

Expected All imports should be used or removed

Impact Minor — unused import adds noise and triggers lint warnings.

How to reproduce

1. Open docs/demos/remotion/src/MnistDemo.tsx 2. Search for 'useRef' usage beyond the import line 3. Run `cd docs/demos/remotion && npx tsc --noEmit`

Patch Details

-import React, { useRef } from "react"; +import React from "react";

AI Fix Prompt

Fix this issue: `useRef` is imported but never used in MnistDemo. It triggers lint warnings. Remove the unused import. Location: docs/demos/remotion/src/MnistDemo.tsx (lines 1) Problem: useRef is imported from React but never referenced in the MnistDemo component body, indicating leftover code from a previous iteration. Current behavior: TypeScript/ESLint reports unused import warning for useRef Expected: All imports should be used or removed Steps to reproduce: 1. Open docs/demos/remotion/src/MnistDemo.tsx 2. Search for 'useRef' usage beyond the import line 3. Run `cd docs/demos/remotion && npx tsc --noEmit` Provide a code fix.

_{Tip: Reply with @paragon-run to automatically fix this issue}

aliasaria added 4 commits March 11, 2026 11:15

paragon-review bot reviewed Mar 11, 2026

View reviewed changes

aliasaria merged commit c5adc41 into main Mar 11, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add/remotion mnist demo#1510

add/remotion mnist demo#1510
aliasaria merged 4 commits intomainfrom
add/remotion-mnist-demo

aliasaria commented Mar 11, 2026

Uh oh!

paragon-review bot commented Mar 11, 2026

Uh oh!

paragon-review bot Mar 11, 2026

Uh oh!

paragon-review bot Mar 11, 2026

Uh oh!

paragon-review bot Mar 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant


What fails	The cursor click scale effect (1.0 → 0.85) hard-snaps between frames in the rendered mp4 instead of easing smoothly. CSS transitions require previous frame state which Remotion doesn't provide.
Result	Cursor scale jumps instantly between 1.0 and 0.85 in rendered video, though preview mode appears smooth
Expected	Cursor scale should ease smoothly between states in the rendered mp4, matching preview behavior
Impact	Demo video quality is degraded — cursor clicks look jerky/glitchy in the final rendered output.


What fails	Playwright traces are configured to record on first retry, but retries are set to 0, so traces are never recorded. This is a regression from the previous config which had trace: 'on'.
Result	No trace.zip artifacts are generated on test failure
Expected	Trace artifacts should be captured on failure for debugging
Impact	When demo tests fail, there are zero trace artifacts for debugging — a regression from prior config.


What fails	`useRef` is imported from React but never referenced in the MnistDemo component body, indicating leftover code from a previous iteration.
Result	TypeScript/ESLint reports unused import warning for `useRef`
Expected	All imports should be used or removed
Impact	Minor — unused import adds noise and triggers lint warnings.

Uh oh!

Conversation

aliasaria commented Mar 11, 2026

Uh oh!

paragon-review bot commented Mar 11, 2026

Paragon Summary

Confidence score: 4/5

Uh oh!

paragon-review bot Mar 11, 2026

Choose a reason for hiding this comment

Bug: CSS transition won't work in Remotion's frame-by-frame renderer

Analysis

Uh oh!

paragon-review bot Mar 11, 2026

Choose a reason for hiding this comment

Bug: Trace set to 'on-first-retry' but retries is 0. Traces will never be captured on failure

Analysis

Uh oh!

paragon-review bot Mar 11, 2026

Choose a reason for hiding this comment

Bug: useRef is imported but never used in MnistDemo

Analysis

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Bug: `useRef` is imported but never used in MnistDemo