Skip to content
← Back to work

Menu Marvel

Point your phone at a menu in a language you don't read. Get it back translated, with a picture of every dish.

Role
Design, AI pipeline & full build
Year
2025
Stack
Next.js 16 · TypeScript · Google Gemini · Imagen 4 · Google CSE · Supabase
Live
Visit site
Menu Marvel analysis screen with a country selector and a dish search field

Context

Fast, cheap, accurate: pick three.

You're travelling. The menu is in a language you can't read, there are no pictures, and pointing hopefully at a word is how you end up with tripe. Menu Marvel solves the whole loop: photograph the menu, get each item translated, and see an actual image of what the dish looks like. The engineering challenge is doing that fast enough to feel instant, cheaply enough to be free, and accurately enough to trust. Three goals that pull against each other.

My role: I built the product end-to-end. It started as a Google AI Studio prototype; I rebuilt it into a real Next.js app and designed the multi-stage pipeline that makes it fast and cheap.

Architecture

A staged pipeline behind one endpoint.

A single endpoint runs the pipeline and streams results back as newline-delimited JSON. Gemini handles OCR and translation; the text ships to the client immediately, then image resolution runs per-dish in parallel. Images come first from Google image search (cheap and real), and an LLM grades each candidate before it's shown. Only when search fails does it fall back to generating an image with Imagen 4.

Menu photo Gemini OCR + translate Translated text streamed instantly per dish, in parallel Google image search LLM grades the match Show real photo Imagen 4 generates one match no match
Translation streams the moment it's ready; each dish's image resolves on its own path: real photo when one exists, generated only as a fallback.

Key decisions

Where the senior work lives.

01

Stream the text, fill in the pictures.

Translation is fast; finding a good photo of every dish is not. So the pipeline splits: the moment text is translated it streams to the screen over NDJSON, and each dish's image resolves independently and pops in when ready. The app feels instant because the slow part happens behind an already-useful screen.
02

Search first, generate last.

Generating an image for every dish would be slow and expensive and sometimes uncanny. So the default is a real Google image search, and an LLM scores the top candidates for whether they truly match the dish before one is shown. Imagen only steps in when search comes up empty. Real photos when they exist, generated ones as a safety net.
03

Deterministic where it can be, AI where it must be.

Splitting the pipeline into deterministic stages (search, streaming, fallbacks) and AI stages (OCR, translation, grading) makes it debuggable and controllable: each part can be reasoned about and swapped without touching the rest.
04

From prototype to product.

The original lived in Google AI Studio with secrets on the client. Moving to Next.js was about making it real: server-side keys, a proper streaming endpoint, and a build that deploys.

Results

<2s

to first translated text on screen

2

image sources: real search, generated fallback

1

endpoint runs the whole staged pipeline

Live

running on Vercel

Next case

Arte de Saber Envelhecer

A self-owned website and blog for a real client, with no host lock-in.