PikaBooth — AI-Powered Photobooth

A vintage-inspired photobooth experience combining real-time camera capture, client-side AI background removal, image processing, and native desktop capabilities.

Case Study

Overview

PikaBooth is a modern photobooth application designed to recreate the nostalgic experience of traditional photo booths while taking advantage of modern web and AI technologies.

The application allows users to capture photos and short live moments, customize them with filters and backgrounds, compose them into vintage-style photo strips, and export the result as images or animated GIFs.

The project was built with a web-first architecture, while also being packaged as a native desktop application using Tauri 2.

The Problem

Traditional photobooth applications are often tied to dedicated hardware and desktop software. This creates several limitations:

• Users need specialized photobooth equipment.
• Customization options are usually limited.
• Sharing the final result digitally can require additional steps.
• Running AI-powered image processing often requires a backend service.
• Building a native desktop application and a web application separately increases development complexity.

The goal of PikaBooth was to explore whether a browser-based application could provide a complete photobooth workflow, while still offering a native desktop experience when required.

Project Goals

1. Create a simple and engaging photobooth workflow.
2. Perform background removal entirely on the client side.
3. Support both still photos and short live moments.
4. Provide flexible photo customization.
5. Generate photobooth-style compositions programmatically.
6. Export results as images and animated GIFs.
7. Reuse the same application across web and desktop environments.

The Solution

PikaBooth implements the entire workflow as a client-side experience:

Camera
  ↓
Photo / Live Capture
  ↓
Photo Review
  ↓
Background Processing
  ↓
Filters & Adjustments
  ↓
Frame Composition
  ↓
Export
  ├── Image
  └── Animated GIF

The application uses Next.js + React for the UI and processing pipeline, while Tauri 2 provides the native desktop wrapper.

Key Features

1. Photobooth Frame System

Instead of using a single fixed layout, PikaBooth provides 12 configurable frame styles, including:

• Photo strips
• Grid layouts
• Duo layouts
• Different color themes
• Borders and labels
• Film-strip styling

Frame definitions are centralized in lib/frames.ts, making it possible to add new layouts without changing the rendering pipeline.

2. Live Photo Capture

Each capture can contain both a still image and a short motion sequence.

The capture flow uses:

3-second countdown → photo capture → 2 seconds of additional recording

This allows the application to create a short “live moment” that can later be converted into an animated GIF.

The interesting part is that the application needs to coordinate:

• Camera stream
• Countdown state
• Still-frame capture
• Video recording
• Capture timing
• Preview state
• Retake / confirmation flow

This makes the camera experience more than a simple getUserMedia() implementation.

3. Client-Side AI Background Removal

One of the main technical challenges was background removal.

Instead of uploading photos to a server, PikaBooth performs segmentation directly in the browser using:

@imgly/background-removal + ONNX/WASM

Photo
  ↓
ONNX Model
  ↓
Foreground Segmentation
  ↓
Transparent Image
  ↓
Custom Background

This approach provides several advantages:

• No image upload required for background removal
• Better privacy
• No backend inference infrastructure
• Reduced server bandwidth
• Works without a dedicated AI API

However, this also introduces a trade-off: AI inference happens on the user's device, so processing time and memory usage depend heavily on the device.

4. Custom Backgrounds

After removing the original background, users can choose between:

• Original background
• Green-screen style background
• Uploaded image
• Custom composition

This turns the background-removal feature from a standalone AI demo into an actual photobooth editing workflow.

5. Photo Editing Pipeline

PikaBooth provides preset filters as well as manual adjustments.

Presets

• Vintage
• Noir
• Warm
• Cool
• Vivid
• Fade
• Dramatic
• Golden
• Moonlight

Manual Adjustments

• Brightness
• Contrast
• Saturation
• Temperature
• Hue
• Sepia
• Grayscale
• Vignette
• Blur

The editor is designed so that users can quickly apply a preset while still having fine-grained control over the final image.

Photo Strip Rendering

The final photo strip is generated programmatically rather than relying on pre-rendered assets.

The renderer combines:

Photos
+ Frame Layout
+ Borders
+ Labels
+ Film Sprocket Holes
+ Background
        ↓
Final Composite

This makes the frame system flexible and allows the same photos to be rendered into different layouts without recapturing them.

Animated GIF Export

PikaBooth supports two types of animated output:

Photo Slideshow GIF

All captured photos are combined into an animated slideshow.

Live Moment GIF

Each individual live capture can also be converted into a short animated GIF.

GIF encoding is performed using gif.js with Web Workers, preventing the encoding workload from blocking the main UI thread as much as possible.

Web + Native Desktop Architecture

One of the architectural goals was to avoid maintaining separate implementations for web and desktop.

The application uses:

Next.js / React

as the primary application layer.

For desktop deployment:

Tauri 2

wraps the web application inside a native window.

                PikaBooth
                   │
           React / Next.js
                   │
       ┌───────────┴───────────┐
       │                       │
      Web                   Tauri 2
       │                       │
    Browser              Native Desktop
                              │
                       Rust Backend

The desktop application can be distributed for:

• macOS
• Windows
• Linux

Tauri was chosen instead of Electron to keep the native application relatively lightweight while still providing access to native capabilities.

Technical Challenges

Challenge 1 — Running AI in the Browser

Background removal is computationally expensive.

A server-based implementation would make inference easier to control, but would introduce:

• Upload latency
• Server infrastructure
• GPU/CPU costs
• Privacy concerns
• Dependency on network connectivity

The solution was to move inference to the client using ONNX/WASM.

This shifts the computational cost from the server to the user's device.

Challenge 2 — Camera Behavior Across Platforms

Camera APIs behave differently depending on the environment.

The same React application needs to work inside:

• Desktop browsers
• macOS Tauri
• Windows Tauri
• Different camera devices

For the desktop build, additional native configuration was required, including macOS camera/microphone permission descriptions and Tauri entitlements.

Challenge 3 — GIF Encoding Performance

GIF generation can become computationally expensive when processing multiple high-resolution frames.

Running encoding directly on the main thread could cause:

GIF Encoding
     ↓
CPU Intensive Work
     ↓
Main Thread Blocked
     ↓
UI Becomes Unresponsive

PikaBooth therefore uses gif.js Web Workers to move encoding work away from the main UI thread.

Technology Stack

LayerTechnologyFramework | Next.js 16
UI | React 19
Language | TypeScript
Styling | Tailwind CSS 4
AI | @imgly/background-removal
ML Runtime | ONNX / WASM
GIF Encoding | gif.js
Desktop | Tauri 2
Native Backend | Rust
Architecture | Web-first + Native Wrapper

Project Structure

app/
  → Next.js pages and layouts

components/
  → Camera
  → BackgroundSelector
  → FinalStrip
  → FrameSelector
  → PhotoReview

lib/
  → Frame definitions
  → Rendering utilities

src-tauri/
  → Tauri configuration
  → Rust native layer

public/
  → GIF Web Worker

Engineering Highlights

The project demonstrates experience in:

• Client-side AI inference
• Computer vision integration
• Real-time camera APIs
• Image processing
• Video and GIF processing
• Web Workers
• Canvas-based rendering
• Responsive UI development
• Cross-platform desktop development
• Rust + Tauri integration
• Performance optimization for browser workloads

What I Learned

The biggest takeaway from PikaBooth was that building an AI-powered media application is not simply about integrating an AI model.

The real engineering challenge is building the pipeline around it:

capture → process → edit → compose → encode → export

Each stage has different performance characteristics and constraints.

Moving background removal to the client simplified the backend architecture and improved privacy, but transferred computational cost to the user's device. Similarly, moving GIF encoding to Web Workers improved UI responsiveness but introduced additional considerations around memory consumption and worker communication.

The project therefore became an exploration of how far a modern browser can be pushed as a complete multimedia application platform, while still maintaining a native desktop distribution through Tauri.