Screen #60 of 60 Batch 10 mobile • 390x844px

Mobile Receipt OCR & Instant Expense Row Scanner (Viewfinder + Auto-Crop)

Specification & Codex Reference Prompt (Click to expand) (Mobile camera receipt scanner with live blue corner polygon boundary detection, perspective de-skewing, and instant CSV expense row export.)

Screen Role: Mobile camera receipt scanner with live blue corner polygon boundary detection, perspective de-skewing, and instant CSV expense row export.

Design Intent: A sleek mobile app UI mockup for receipt scanning and expense digitization at 390x844 resolution (iPhone 15 Pro) in bright Light Mode. Camera scanning viewfinder viewport: In center, a restaurant paper receipt resting on a light wooden table, with an active glowing blue quadrilateral edge-detection bounding polygon snapping perfectly around the receipt corners. Real-time OCR data pill floating above: "Receipt Detected: Blue Bottle Coffee • Date: Oct 26, 2026". Bottom drawer in white: Extracted fields table: - Merchant: Blue Bottle Coffee - Total: $28.45 (Tax: $2.40) - Payment: Visa ending in 4092 Primary full-width button in solid indigo "Add to QuickBooks / Export CSV Row" with vector receipt icon. Clean, tactile mobile financial app design, zero emojis.

Component Architecture: Django Cotton components (<c-file_converter.* />) with Tailwind tokens matching Labb.io design language.

Direct route: /file-converter/studio/receipt-ocr/ Template: file_converter/screens/screen_60.html

Live Django Implementation (mobile)

Isolate →

BLUE BOTTLE COFFEE

Oct 26, 2026 • 08:42 AM

1x New Orleans Iced$6.50

2x Avocado Toast$18.00

Tax (9.5%)$2.40

TOTAL $28.45

Receipt OCR Studio • WebAssembly

Receipt Detected: Blue Bottle Coffee • Oct 26, 2026

Merchant: Blue Bottle Coffee

Total: $28.45 (Tax: $2.40)

Payment: Visa ending in 4092

Original Codex Reference Mockup Full PNG