Component Demo

Body text — Public Sans / Source Sans Pro, 14px, color: #1b1b1b. Line height 1.6 for readability. This is the default paragraph style used across all TTB-styled pages.

Helper text — 12px, color: #71767a. Used for labels, captions, and secondary information.

Buttons

Button styles and variants

Primary Buttons

Outline / Secondary Buttons

Icon Buttons

Status Badges & Pills

Used throughout the queue and review pages

Validation Status

Pass Fail Warning Info

Queue Statuses

SubmittedIn ReviewApprovedRejectedNeeds Revision

Category Badges

Beer Wine Spirits

Agent Status

ActiveAwayOffline

Card Patterns

Reusable card layouts used across pages

Stat Card

With Icon

98%

Passed

Form Elements

Input styles, selectors, and toggle controls

Text Inputs

Standard Input

With Placeholder

Toggle Buttons (Segmented Control)

Selected: all

Upload Drop Zone

Drag & drop or click to upload

PNG, JPG, or PDF — max 10 MB

Alerts & Notices

Alert banner patterns

Info: This is an informational notice. Used for non-critical information.

Success: Operation completed successfully.

Warning: Please review this information carefully.

Error: Something went wrong. Please try again.

API Endpoints

All REST API routes available in the application

Method	Endpoint	Description
POST	/api/ocr	Extract text from label image via OpenRouter vision model
POST	/api/flatten	AI-powered cylindrical/perspective label flattening (Lambda)
POST	/api/explain	LLM regulatory explanation for failed validation rules
GET	/api/generate-label	List available COLA presets for label generation
POST	/api/generate-label	Generate realistic label image with Gemini AI
GET	/api/queue	List all queue submissions (filterable by status)
POST	/api/queue	Create a new submission
GET	/api/queue/{id}	Get full submission detail
POST	/api/queue/{id}	Add a review (decision + findings + notes)
PATCH	/api/queue/{id}	Update submission status
POST	/api/queue/seed	Re-seed the queue with mock sample data

Features & Capabilities

Core features built into the prototype

Image Upload & Capture

Drag-and-drop, file picker, or camera capture. Supports PNG, JPG, PDF up to 10 MB.

Perspective Correction

Corner-point editor and mesh warp for flattening curved labels. Cylindrical unwrap for bottles/cans.

AI Flatten (Lambda)

Server-side cylindrical/perspective correction via AWS Lambda with OpenCV.

Smart Crop

Auto-detect label bounds within an image and crop to just the label region.

OCR (Two-Tier)

Browser-side Tesseract.js for instant results + Claude 3.5 Sonnet server OCR for higher accuracy.

Validation Engine

Category-aware rules: health warning, ABV format, net contents, class/type TTB lookup, cross-field checks.

Fuzzy Matching

Levenshtein distance comparison between COLA form fields and detected label text.

Review Queue

Full CRUD dashboard — submit, review, approve/reject/escalate with findings and notes.

AI Label Generation

Gemini AI generates photorealistic labels — flat, on-bottle, or on-can rendering styles.

API Test Console

Interactive endpoint tester with sample labels, JSON body editor, and response viewer.

Batch Upload

Process multiple label images at once with CSV export of validation results.

Guided Walkthrough

8-step tutorial panel with element highlighting for first-time users.

Tech Stack

Technologies and libraries powering the prototype

Next.js 14

App Router

TypeScript

Strict mode

React 18

Hooks + SSR

Tailwind CSS

Utility-first

Lucide React

Icons

Vitest

77 unit tests

Gemini AI

Label generation

OpenRouter

OCR + Explain

Tesseract.js

Browser OCR

AWS Lambda

AI flatten

Vercel

Deployment

MermaidJS

Architecture docs