feat: VIN Capture Integration #68

New Issue

egullickson · 2026-02-01T18:47:23Z

egullickson commented

2026-02-01 18:47:23 +00:00

Overview

Integrate camera capture and VIN OCR into the VehicleForm, including the review/correct UI before saving.

Parent Issue: #12 (OCR-powered smart capture)
Priority: P1 - VIN OCR
Dependencies: Camera Capture Component, VIN Photo OCR Pipeline

Scope

VehicleForm Enhancement

Add camera button next to VIN input field
Opens CameraCapture component with VIN guidance
Captured image → VIN OCR → NHTSA decode → form population
Review/correct UI before auto-populating fields

User Flow

1. User clicks camera icon next to VIN field
2. CameraCapture opens with VIN aspect-ratio guide
3. User captures photo, optionally crops
4. Loading state: "Extracting VIN..."
5. OCR returns VIN → call existing NHTSA decode
6. Review modal shows:
   - Extracted VIN with confidence indicator
   - Decoded vehicle info (year, make, model, etc.)
   - Comparison with any existing form values
7. User confirms → form fields populated
8. User can edit any field before final save

Review/Correct UI

┌─────────────────────────────────────────────┐
│  VIN Detected                               │
├─────────────────────────────────────────────┤
│  VIN: 1HGBH41JXMN109186  ✓ High Confidence │
│                                             │
│  Decoded Information:                       │
│  ┌─────────────────────────────────────┐   │
│  │ Year:    2021         ●●●○ High     │   │
│  │ Make:    Honda        ●●●○ High     │   │
│  │ Model:   Civic        ●●●○ High     │   │
│  │ Trim:    EX           ●●○○ Medium   │   │
│  │ Engine:  2.0L I4      ●○○○ Low      │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  Fields marked with lower confidence may    │
│  need manual verification.                  │
│                                             │
│  [Retake Photo]  [Edit Manually]  [Accept] │
└─────────────────────────────────────────────┘

Confidence Indicators

High (>90%): Green dot, auto-populated
Medium (70-90%): Yellow dot, auto-populated with highlight
Low (<70%): Orange dot, shown as suggestion only
None: Not shown, user must enter manually

Mobile Design

Full-screen camera capture
Bottom sheet for review modal
Touch-friendly confidence indicators
Swipe to dismiss/confirm

Component Structure

frontend/src/features/vehicles/components/
├── VehicleForm.tsx              # Add camera button
├── VinCameraButton.tsx          # Camera trigger button
├── VinOcrReviewModal.tsx        # Review/correct UI
├── VinConfidenceIndicator.tsx   # Confidence badge
└── hooks/
    └── useVinOcr.ts             # OCR + decode orchestration

useVinOcr Hook

interface UseVinOcrResult {
  captureAndDecode: () => Promise<void>;
  isCapturing: boolean;
  isProcessing: boolean;
  ocrResult: VinOcrResult | null;
  decodedVehicle: DecodedVehicleData | null;
  error: string | null;
  reset: () => void;
}

API Integration

// 1. Upload image to OCR service
const ocrResponse = await ocrApi.extractVin(imageFile);

// 2. If VIN extracted, call existing NHTSA decode
if (ocrResponse.success && ocrResponse.vin) {
  const decoded = await vehiclesApi.decodeVin(ocrResponse.vin);
  // Merge OCR confidence with decode confidence
}

Acceptance Criteria

Camera button appears in VehicleForm (mobile + desktop)
CameraCapture opens with VIN guidance overlay
Captured image sent to VIN OCR endpoint
Extracted VIN passed to existing NHTSA decode
Review modal displays VIN and decoded fields
Confidence indicators show for each field
User can accept, edit, or retake
Accepted values populate form correctly
Form validation still works after population
Mobile-responsive (320px - 768px)
Desktop-responsive (1920px)
Error handling for OCR failures
Error handling for NHTSA decode failures
Loading states clearly communicated

Technical Notes

Leverage existing vehiclesApi.decodeVin() - no changes needed
Combine OCR confidence with NHTSA match confidence
Store original image reference for debugging (optional)
Consider caching successful VIN→decode results

Out of Scope

OCR service implementation (see #12d)
Camera component implementation (see #12c)
Fuel log integration (see #12g)

## Overview Integrate camera capture and VIN OCR into the VehicleForm, including the review/correct UI before saving. **Parent Issue**: #12 (OCR-powered smart capture) **Priority**: P1 - VIN OCR **Dependencies**: Camera Capture Component, VIN Photo OCR Pipeline ## Scope ### VehicleForm Enhancement - Add camera button next to VIN input field - Opens CameraCapture component with VIN guidance - Captured image → VIN OCR → NHTSA decode → form population - Review/correct UI before auto-populating fields ### User Flow ``` 1. User clicks camera icon next to VIN field 2. CameraCapture opens with VIN aspect-ratio guide 3. User captures photo, optionally crops 4. Loading state: "Extracting VIN..." 5. OCR returns VIN → call existing NHTSA decode 6. Review modal shows: - Extracted VIN with confidence indicator - Decoded vehicle info (year, make, model, etc.) - Comparison with any existing form values 7. User confirms → form fields populated 8. User can edit any field before final save ``` ### Review/Correct UI ``` ┌─────────────────────────────────────────────┐ │ VIN Detected │ ├─────────────────────────────────────────────┤ │ VIN: 1HGBH41JXMN109186 ✓ High Confidence │ │ │ │ Decoded Information: │ │ ┌─────────────────────────────────────┐ │ │ │ Year: 2021 ●●●○ High │ │ │ │ Make: Honda ●●●○ High │ │ │ │ Model: Civic ●●●○ High │ │ │ │ Trim: EX ●●○○ Medium │ │ │ │ Engine: 2.0L I4 ●○○○ Low │ │ │ └─────────────────────────────────────┘ │ │ │ │ Fields marked with lower confidence may │ │ need manual verification. │ │ │ │ [Retake Photo] [Edit Manually] [Accept] │ └─────────────────────────────────────────────┘ ``` ### Confidence Indicators - **High** (>90%): Green dot, auto-populated - **Medium** (70-90%): Yellow dot, auto-populated with highlight - **Low** (<70%): Orange dot, shown as suggestion only - **None**: Not shown, user must enter manually ### Mobile Design - Full-screen camera capture - Bottom sheet for review modal - Touch-friendly confidence indicators - Swipe to dismiss/confirm ## Component Structure ``` frontend/src/features/vehicles/components/ ├── VehicleForm.tsx # Add camera button ├── VinCameraButton.tsx # Camera trigger button ├── VinOcrReviewModal.tsx # Review/correct UI ├── VinConfidenceIndicator.tsx # Confidence badge └── hooks/ └── useVinOcr.ts # OCR + decode orchestration ``` ### useVinOcr Hook ```typescript interface UseVinOcrResult { captureAndDecode: () => Promise<void>; isCapturing: boolean; isProcessing: boolean; ocrResult: VinOcrResult | null; decodedVehicle: DecodedVehicleData | null; error: string | null; reset: () => void; } ``` ## API Integration ```typescript // 1. Upload image to OCR service const ocrResponse = await ocrApi.extractVin(imageFile); // 2. If VIN extracted, call existing NHTSA decode if (ocrResponse.success && ocrResponse.vin) { const decoded = await vehiclesApi.decodeVin(ocrResponse.vin); // Merge OCR confidence with decode confidence } ``` ## Acceptance Criteria - [ ] Camera button appears in VehicleForm (mobile + desktop) - [ ] CameraCapture opens with VIN guidance overlay - [ ] Captured image sent to VIN OCR endpoint - [ ] Extracted VIN passed to existing NHTSA decode - [ ] Review modal displays VIN and decoded fields - [ ] Confidence indicators show for each field - [ ] User can accept, edit, or retake - [ ] Accepted values populate form correctly - [ ] Form validation still works after population - [ ] Mobile-responsive (320px - 768px) - [ ] Desktop-responsive (1920px) - [ ] Error handling for OCR failures - [ ] Error handling for NHTSA decode failures - [ ] Loading states clearly communicated ## Technical Notes - Leverage existing `vehiclesApi.decodeVin()` - no changes needed - Combine OCR confidence with NHTSA match confidence - Store original image reference for debugging (optional) - Consider caching successful VIN→decode results ## Out of Scope - OCR service implementation (see #12d) - Camera component implementation (see #12c) - Fuel log integration (see #12g)

egullickson added the

labels 2026-02-01 18:48:37 +00:00

egullickson referenced this issue

2026-02-01 18:49:00 +00:00

feat: OCR-powered smart capture for VIN, receipts, and owner's manuals #12

egullickson added

status

in-progress