Prism

See performance through a new lens

A high-performance web application that benchmarks WebAssembly vs JavaScript image processing algorithms in real-time using your webcam feed.

✨ Features

• 🎥 Real-Time Video Processing - Live webcam feed with instant filter application
• ⚡ Multi-Threading - Rayon-based parallelization in WebAssembly for 2-5x speedup
• 📊 Performance Visualization - Real-time FPS and processing time graphs
• 🎨 Modern UI - Glassmorphism design with smooth animations
• ⌨️ Keyboard Shortcuts - Quick access to all features
• 🖼️ Split-Screen Comparison - Side-by-side original vs processed view
• 💾 Export Functionality - Download frames and benchmark data
• 🔪 Preset Filters - Sharpen, Emboss, Edge Enhance, and Custom Kernels

🎯 Algorithms

1. Gaussian Blur - Adjustable blur intensity (σ: 0.5-5.0)
2. Sobel Edge Detection - Real-time edge highlighting
3. Custom Kernel Convolution - 3x3 matrix with live editing

🛠️ Prerequisites

• Rust (nightly) - Required for WebAssembly compilation
• wasm-pack - WebAssembly build tool
• Node.js (optional) - For alternative dev servers
• Modern Browser - Chrome/Edge with WebAssembly support

📦 Installation

1. Clone the Repository

git clone https://github.com/yourusername/prism.git
cd prism

2. Install Rust Nightly

rustup toolchain install nightly
rustup default nightly
rustup component add rust-src
rustup target add wasm32-unknown-unknown

3. Install wasm-pack

cargo install wasm-pack

4. Build the WebAssembly Module

cd wasm-lib
wasm-pack build --target web --out-dir ../client/pkg . -- -Zbuild-std="panic_abort,std"
cd ..

5. Run the Server

cd server
cargo run --release

6. Open in Browser

Navigate to http://127.0.0.1:8080

🎮 Usage

Basic Controls

1. Click ▶ Start Webcam to begin
2. Grant webcam permissions when prompted
3. Select an algorithm from the dropdown
4. Adjust settings using sliders and toggles

Keyboard Shortcuts

Key	Action
Space	Play/Pause webcam
F	Toggle fullscreen
R	Toggle race mode (JS vs Wasm)
S	Toggle split view

Race Mode

Compare JavaScript and WebAssembly performance side-by-side:

1. Enable Race Mode checkbox
2. Both implementations run simultaneously
3. View speedup factor in real-time
4. Export benchmark data for analysis

Preset Filters

Quick-access filters for instant effects:

• 🔪 Sharpen - Enhance image edges
• 🎨 Emboss - 3D embossed effect
• ✨ Edge Enhance - Subtle edge highlighting
• 🔄 Reset - Identity kernel

Export Features

• 📷 Save Frame - Download current processed frame as PNG
• 📊 Export Data - Download benchmark results as JSON

📁 Project Structure

prism/
├── client/                 # Frontend application
│   ├── index.html         # Main HTML file
│   ├── style.css          # Glassmorphism styling (600+ lines)
│   ├── app.jsx            # React component (550+ lines)
│   ├── jsAlgorithms.js    # JavaScript implementations
│   └── pkg/               # Compiled WebAssembly module
├── wasm-lib/              # Rust/WebAssembly library
│   ├── src/
│   │   └── lib.rs         # Image processing algorithms
│   ├── Cargo.toml         # Dependencies (rayon, wasm-bindgen)
│   ├── rust-toolchain.toml # Nightly Rust config
│   └── .cargo/
│       └── config.toml    # Threading build flags
└── server/                # Actix-web server
    ├── src/
    │   └── main.rs        # Server with COOP/COEP headers
    └── Cargo.toml

🔧 How It Works

WebAssembly Implementation

The Rust code uses the image crate and rayon for parallel processing:

// Sobel edge detection with Rayon parallelization
result.par_chunks_mut((width * 4) as usize)
    .enumerate()
    .for_each(|(y, row)| {
        // Process each row in parallel
        for x in 1..width-1 {
            // Sobel kernel calculation
        }
    });

JavaScript Implementation

Pure JavaScript implementations for baseline comparison:

function jsGaussianBlur(data, width, height, sigma) {
    // Separable 2D Gaussian convolution
    // Horizontal and vertical passes
}

Multi-Threading

• Rayon provides work-stealing parallelism
• Threading Flags: Compiled with atomics, bulk-memory, mutable-globals
• Build Command: -Zbuild-std rebuilds standard library with threading support

📊 Performance Benchmarks

Typical performance improvements (WebAssembly vs JavaScript):

Algorithm	Speedup	Notes
Gaussian Blur	2-4x	Depends on sigma value
Sobel Edge	3-5x	Rayon parallelization shines
Custom Kernel	2-4x	Multi-threaded convolution

Tested on: Intel i7 (8 cores), Chrome 120+

🎨 UI Features

Modern Design

• Glassmorphism effects with backdrop blur
• Gradient accents (cyan/purple theme)
• Smooth animations on all interactions
• Responsive layout for mobile/desktop

Performance Graphs

• Real-time FPS chart (60 frames)
• Processing time visualization
• Average/current metrics

User Experience

• Tooltips on all controls
• Loading states with spinner animations
• Error handling with clear messages
• Debounced inputs for smooth performance

🚀 Optimization Techniques

1. Zero-Copy Data Handling - Direct buffer manipulation
2. Debounced Sliders - 100ms delay reduces overhead
3. Canvas Context Options - willReadFrequently: true
4. RequestAnimationFrame - Smooth 60 FPS loop
5. Rayon Par-Iter - CPU core-level parallelization

🔒 Security & Privacy

• All video processing happens locally in your browser
• No data is sent to any server
• Webcam access requires explicit permission
• HTTPS/localhost required for webcam API

🌐 Browser Compatibility

Browser	Support	Notes
Chrome 90+	✅	Full support
Edge 90+	✅	Full support
Firefox 89+	✅	May need COOP/COEP config
Safari 15+	⚠️	Limited threading support

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🐛 Known Issues

• Safari may have limited WebAssembly threading support
• Firefox requires specific COOP/COEP header configuration
• Mobile browsers may have reduced performance

🔮 Future Enhancements

• WebAssembly SIMD - 8x faster pixel operations
• OffscreenCanvas - Worker-thread rendering
• Video Recording - Download processed video clips
• Additional Filters - Median, Canny Edge, Bilateral
• Service Worker - Offline support and caching

🙏 Acknowledgments

• Rust Team - For amazing WebAssembly support
• Rayon - For effortless parallelization
• wasm-bindgen - For seamless JS/Wasm interop
• Actix-web - For the lightweight server

⭐ Star this repo if you find it useful!

Built with ❤️ using Rust 🦀 and WebAssembly 🕸️