Next.js · OCR · banner specs

Upload banners and turn them into usable implementation briefs.

This app reads image dimensions in the browser, runs OCR with Tesseract.js, and sends the reviewed banner brief to a Route Handler for validation and save. Video and audio files are supported too — dimensions and duration are extracted automatically.

Width
—
Height
—
Aspect ratio
—
Duration
—

Upload and analyze

Pick a banner, add details, then analyze and save the final brief.

Drag and drop a banner filePNG, JPG, WEBP, GIF, MP4, or MP3No file chosen yet

Brief preview

This is the payload prepared for save.

{ "placement": "Homepage hero", "priority": "Standard", "cta": "", "notes": "", "dimensions": "Not analyzed", "aspectRatio": "Not analyzed", "duration": "N/A", "fileName": "Not analyzed", "extractedText": "" }

Saved response

Response returned by the Route Handler.

Nothing saved yet.

Request queue ideas

Good next pieces for a real production version.

  • Save to Prisma or PostgreSQLReal persistence
  • Add auth and team ownershipMulti-user workflow
  • Store uploaded originals in cloud storageS3 or UploadThing
  • Show OCR confidence blocksBetter review step