DEV Community

Cover image for sideVibes - PPFast v0.5
Beep Iams
Beep Iams

Posted on

sideVibes - PPFast v0.5

#sidevibes #convex #sam2 #masks

After 15 years in NYC, I moved to the mountains. And, as most of the rest of USA relies on automobiles for transportation, I went through the car-purchasing experience.

In my aftermarket / detailing / protective service research, I found the marketing from these shops were less about the possible options, and more slopcasing autotube...

sideVibes 🚗✨

Test Spin: https://ppfast.netlify.app/

PPFast v0.5 - PPFast is an interactive configurator that lets customers visualize and customize vehicle protection services. Users can select different zones on a car (hood, bumper, doors, etc.) and see real-time pricing for PPF, window tinting, and ceramic coating packages.

Interactive Features

Multi-Service Support:

  • PPF - Body panel protection zones
  • Window Tinting - Window-specific zones with tier-based products
  • Ceramic Coating - Full-vehicle or package-based coverage

Real-Time Pricing:

  • Dynamic calculator with tier-based discounts
  • Automatic package deal detection
  • Volume discounts
  • Service-specific rules (e.g., Colorado hood size variants)

Visual Feedback:

  • Smooth hover states with zone highlighting
  • Selected zone visualization with service-specific colors
  • Preview mode for package deals
  • Framer Motion-powered transitions

IDEALS

For aftermarket shops, this solves real problems:

  • No manual mask creation for every vehicle model
  • Accurate visualization helps customers understand what they're buying
  • Real-time pricing reduces back-and-forth
  • Professional presentation builds trust

v0.6 preview -> 1.0 release

I'm planning to implement the dynamic upload feature next. If you're interested in following along, I'll be sharing updates on:

  • SAM 2 integration challenges (self-host vs. replicate)
  • Mobile-view UX/design enhancements
  • Account betterauth
  • Stripe Integration (testing autumn integration)

The Stack

Frontend

  • React 19 | TypeScript | Vite (Rolldown) | Framer Motion | - Tailwind CSS v4 -

Backend

  • Convex

AI/ML

  • SAM 2 - Meta's image segmentation model
  • Python Pipeline - Custom mask generation script with GPU acceleration support

Current State

Right now, ppfast supports 4 pre-generated vehicle categories:

  • SEDAN/HATCH - Traditional compact vehicles
  • CUV/SUV - Crossover/Sport utility vehicles
  • TRUCK - Pickup trucks
  • SUPER - High-performance sports cars

Each category has:

  • A master wireframe image (3/4 front view)
  • Pre-generated zone masks using SAM 2
  • Category-specific zone definitions
  • JSON metadata with SVG paths and bounding boxes

The Mask Generation Pipeline

SAM 2 to automatically generate masks:

  • Hood (with size variants)
  • Front bumper & cladding
  • Headlights, fenders, mirrors
  • Doors, rocker panels
  • Door handle cups
  • A-pillars, wheel arches
  • Top grill details

The Python script (scripts/generate_masks.py) does the heavy lifting:

# Simplified flow
1. Load category image (e.g., SEDAN.png)
2. For each zone:
   - Use base coordinates as bounding box prompt
   - Add center point as foreground prompt
   - Run SAM 2 segmentation
   - Select best mask from multiple candidates
   - Convert to RGBA mask format
   - Extract SVG paths and bounding boxes
3. Save masks as PNG files
4. Generate zone metadata JSON
Enter fullscreen mode Exit fullscreen mode

The masks are then loaded dynamically in the React app, with mask-based hit detection for precise hover/click interactions (more accurate than coordinate-based detection).

SAM 2 Integration

Meta's SAM 2 (Segment Anything Model 2) automatically generates precise masks for car zones, eliminating the need to manually trace every vehicle model.

  1. Generate masks once per category using SAM 2
  2. Store them as PNG files with alpha channels
  3. Load them dynamically in the React app
  4. Use them for hit detection (checking if a point is inside a mask)
  • GPU acceleration (10-50x faster)
  • CPU fallback
  • Multiple model variants (large/base_plus/tiny)
  • Automatic coordinate scaling

Convex Backend

  • Service definitions and pricing
  • Vehicle catalog
  • Zone metadata
  • Package deal calculations
  • end-to-end type safety schema (TypeScript)

React 19 Features

  • Improved concurrent rendering
  • Better performance with automatic batching
  • Enhanced error boundaries

Mask-Based Hit Detection

check if it's inside the actual mask:

// Simplified version
const getMaskAlpha = (mask: MaskData, x: number, y: number): number => {
  const maskX = Math.floor((x / currentWidth) * mask.width)
  const maskY = Math.floor((y / currentHeight) * mask.height)
  const maskIdx = maskY * mask.width + maskX
  return mask.alpha[maskIdx] || 0
}

// Check if point is in zone
const isInZone = getMaskAlpha(zoneMask, mouseX, mouseY) > 127
Enter fullscreen mode Exit fullscreen mode

This gives us pixel-perfect accuracy, even for irregular shapes like door handle cups or A-pillars.

Next: Dynamic User Uploads 🚀

The current version uses pre-generated masks for the 4 categories.

Universal vehicle support by allowing users to upload their own 3/4 front view car images.

  1. User uploads image of choice
  2. System processes it with SAM 2
  3. Automatically generates zone masks
  4. User can configure and visualize services on their exact vehicle

Technical Approach

Phase 1: Infrastructure

  • Image upload component (drag-and-drop)
  • Convex file storage or S3 integration
  • Image preprocessing pipeline
  • SAM 2 processing endpoint

Phase 2: SAM 2 Integration

  • Adapt mask generation for arbitrary images
  • Template matching (use existing masks as starting points)
  • Zone prompt system that works across vehicle types
  • Mask validation and confidence scoring

Phase 3: Dynamic Zone Loading

  • Modify CarVisualization to handle dynamic masks
  • Mask caching system
  • Fallback to coordinate-based detection
  • Loading states and error handling

Phase 4: UX Polish

  • Image upload UI with preview
  • Processing status indicator
  • Zone review/correction interface
  • Save/load configurations

Challenges & Solutions

Challenge: Processing time (SAM 2 can be slow)
Solution: Show progress, process in parallel, cache results, use smaller model variants

Challenge: Vehicle orientation variations
Solution: Image normalization, SAM 2's robustness, user guidance on optimal angles

Challenge: Cost at scale
Solution: Cache masks for common models, rate limiting, cloud GPU optimization

Architecture Flow 

User Upload → Image Preprocessing → Template Matching 
→ SAM 2 Processing → Mask Validation → Store/Cache 
→ Render in UI
Enter fullscreen mode Exit fullscreen mode

Resources

Top comments (1)

Collapse
 
philip_n_d77e35b33c2249ac profile image
Philip n •

Great work, Beep!