Skip to content

VIN Detection Feature

Overview

The VIN Detection feature uses Google Cloud Vision API to automatically detect and extract Vehicle Identification Numbers (VINs) from images in the Message Center. Users can click a "Find VIN" button in the image preview to highlight and copy VINs.

Features

  • One-click VIN detection: Detect VINs in MMS images with a single button click
  • Visual highlighting: Yellow overlay for valid VINs, orange for potentially invalid check digits
  • Smart caching: Instant re-display of previously detected VINs
  • Copy to clipboard: Click highlighted VIN to copy
  • Transform-aware: Overlay stays aligned during zoom, rotate, and pan
  • Analytics tracking: Usage metrics logged to database

Setup

1. Enable Google Cloud Vision API

# Via gcloud CLI
gcloud services enable vision.googleapis.com

Or manually in GCP Console: 1. Navigate to APIs & Services → Library 2. Search "Cloud Vision API" 3. Click "Enable"

2. Create API Key

  1. Go to APIs & Services → Credentials
  2. Click "Create Credentials" → "API Key"
  3. Recommended: Restrict key to Cloud Vision API only
  4. Copy the API key

3. Add API Key to Supabase

The VISION_API_KEY secret has been added to your Supabase project and is ready to use.

4. Enable Feature Flag

Add to your .env file:

VITE_FEATURE_VIN_OCR=true

For production, add the same variable to your deployment environment variables.

5. Run Database Migration

The analytics table migration has been created. It will be applied automatically on next deployment.

Usage

In ThreadContent (Already Integrated)

import { VinImagePreviewGroup } from '@/components/ui/vin-image-preview-group';

// Wrap Image components
<VinImagePreviewGroup>
  <Image src={image1} />
  <Image src={image2} />
</VinImagePreviewGroup>

User Flow

  1. Click MMS image in message thread → Preview opens
  2. Click "Find VIN" button in toolbar
  3. Wait 1-2 seconds for detection
  4. Yellow/orange polygon appears over detected VIN
  5. Click polygon to copy VIN to clipboard
  6. Click "Hide VIN" to remove overlay

VIN Validation

Format Check

  • Exactly 17 characters
  • Allowed: A-H, J-N, P, R-Z, 0-9 (excludes I, O, Q)
  • Case-insensitive

Check Digit Validation (ISO 3779)

The 9th character is validated using weighted algorithm: - Yellow highlight: Valid check digit - Orange highlight: Invalid check digit (potential OCR error)

Both are shown to user, but orange indicates caution.

Analytics

Usage data is logged to vin_detection_analytics table:

Field Description
image_url URL of processed image
processing_time_ms API response time
vins_found Number of VINs detected (0 or 1)
cache_hit Whether result was cached
valid_check_digit Check digit validation result
user_id User who triggered detection

Example Query

-- Average processing time
SELECT AVG(processing_time_ms) FROM vin_detection_analytics;

-- Cache hit rate
SELECT 
  COUNT(CASE WHEN cache_hit THEN 1 END)::float / COUNT(*) * 100 as cache_hit_rate
FROM vin_detection_analytics;

-- VINs with invalid check digits
SELECT * FROM vin_detection_analytics 
WHERE vins_found > 0 AND valid_check_digit = false;

Cost Estimates

Google Cloud Vision Pricing (2024)

  • First 1,000 requests/month: Free
  • 1,001 - 5,000,000 requests: $1.50 per 1,000 images

Typical Usage

  • Average processing time: 1-2 seconds
  • Caching reduces repeat costs by ~60-80%
  • Expected cost for 10,000 images/month: ~$15

Technical Details

Architecture

User clicks "Find VIN"
  ↓
Frontend calls edge function (ocr-vision)
  ↓
Edge function calls Google Vision API
  ↓
Vision returns word-level bounding polygons
  ↓
Backend validates VINs (format + check digit)
  ↓
Returns largest VIN only
  ↓
Frontend renders SVG overlay
  ↓
Overlay syncs with image transforms

Transform Synchronization

The overlay uses: - ResizeObserver to detect image size changes - MutationObserver to detect style/class changes - Computed styles to mirror transform matrix - Polygon projection from natural pixels to viewport coordinates

Security

  • API key stored as Supabase secret (never exposed to client)
  • Images fetched from public Supabase Storage
  • RLS policies protect analytics data

Troubleshooting

Button Not Appearing

  1. Check VITE_FEATURE_VIN_OCR=true in .env
  2. Rebuild frontend after changing env vars

"Vision API not configured" Error

  1. Verify VISION_API_KEY secret exists in Supabase
  2. Check Cloud Vision API is enabled in GCP
  3. Verify API key has Vision API permissions

No VIN Detected

  • VIN may not be clearly visible in image
  • Text may be too small or blurry
  • OCR works best with high-contrast, well-lit images

Polygon Misaligned

  • Refresh preview (close and reopen)
  • Report issue with specific image URL for investigation

Browser Support

  • Chrome/Edge: Full support
  • Firefox: Full support
  • Safari: Full support (clipboard may require HTTPS)
  • Mobile: Full support (touch interactions)

Future Enhancements

  • Region selection (drag-to-OCR specific area)
  • Multiple VIN display mode
  • License plate detection
  • Export all VINs from thread
  • Persistent caching across sessions