feat: implement CLI pipeline runner and web Pipeline Studio UI

[Ram-sah19]

Description

This PR introduces a comprehensive media preprocessing pipeline system to Reframe, including both a local CLI runner and a visual web-based "Pipeline Studio" interface.

The feature enables users to automate advanced media workflows using YAML or JSON configuration files for operations such as:

• Trimming
• Rotation
• Resizing
• Format conversion
• Frame extraction
• Green-screen removal

---

Changes Made

Core Pipeline Engine

Added:

src/lib/pipeline.ts

Features:

• Lightweight zero-dependency YAML/JSON parser
• Pipeline execution engine
• Browser-based canvas image operations
• FFmpeg-powered video processing pipeline
• Single-pass filter optimization
• Batch frame extraction support

---

CLI Runner

Added:

scripts/pipeline-cli.ts

Features:

• Local pipeline execution using:

  npx ts-node scripts/pipeline-cli.ts run

• Native FFmpeg integration

• YAML and JSON configuration support

• Output directory handling

---

Pipeline Studio UI

Added:

src/components/PipelineStudio.tsx

and integrated into:

src/components/VideoEditor.tsx

Features:

• Interactive pipeline editor
• Visual pipeline preview
• Real-time workflow editing
• Browser-based pipeline management

---

Configuration Templates

Added:

pipeline.yaml

Includes:

• Standard transcoding examples
• ML dataset extraction workflows
• Commented configuration examples
• Beginner-friendly structure

---

Unit Tests

Added:

src/lib/tests/pipeline.test.ts

Test coverage includes:

• YAML parsing
• JSON parsing
• Comment handling
• Invalid configuration handling
• Error boundaries

---

Repository Cleanup

Updated:

.gitignore

Added ignore rules for:

• Local test videos
• Generated output folders
• Temporary processing artifacts
• Unnecessary lockfiles

---

Related Issue

Closes #791

---

Type of Contribution

• Bug fix
• New feature
• Documentation update
• GSSoC contribution

---

Participant Info

• GitHub username: @Ram-sah19
• Contribution level: Advanced

---

Screen Recording

Recording / Loom link: [Paste Loom link or attach recording here]

---

How Has This Been Tested?

Unit Tests

bun run test

Manual Verification

Download sample video:

Invoke-WebRequest -Uri "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" -OutFile "input.mp4"

Run pipeline locally:

npx ts-node scripts/pipeline-cli.ts run pipeline.yaml input.mp4 --out ./processed_dataset

Verified:

• YAML/JSON parsing
• FFmpeg execution
• Pipeline stage execution
• Output generation
• UI integration
• Error handling behavior

---

Checklist

• I have read the contribution guidelines
• My changes follow the project structure
• I have tested my changes in Chrome, Firefox, and Safari
• bun run lint passes (no ESLint errors)
• bunx tsc --noEmit passes (no TypeScript errors)
• New interactive elements have aria-label / accessible names
• No console.log statements left in
• This PR is related to a valid issue
• Screen recording attached above

[vercel]

@Ram-sah19 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✅ PR Format Check Passed — @Ram-sah19

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[github-actions]

👋 Thanks for your PR, @Ram-sah19!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉