Vintage Cooks

GIF
Demonstration of the application

Inspiration

We opened the fridge, stared at feta, spinach, and three eggs, and thought — surely someone in ancient Greece already figured this out.

What it does

It is a web app that lets you rediscover forgotten historical recipes based on what you already have at home.

Ingredient Search — type ingredients one by one; each appears as a labelled emoji pill. Hit Find Recipes and the engine matches your pantry against 77 archived dishes, ranked by how many of your ingredients they use.
World Map Explorer — an interactive D3.js globe lets you click any continent or region to browse recipes from that part of the world.
Recipe Detail — matched ingredients are highlighted, and the full method is displayed alongside a two-column layout.
AI Flavour Enhancer — powered by Hugging Face's Zephyr-7B model, this feature lets you request personalised modifications and receive AI-generated spice suggestions, flavour balancing tips, a drink pairing, and a chef's secret. It falls back gracefully to a curated rule-based engine when offline.

How we built it

Ingredient matching is handled by search.js, a client-side engine. It uses a two-pass normalisation strategy:

A canonical alias table maps raw ingredient strings (e.g. "3 oz Feta Cheese, crumbled") to a normalised keyword ("feta") by stripping quantities, units, and adjectives via regex.
If normalisation fails, a raw substring fallback catches anything missed.

Scoring is tag-level. For n user tags and m matched tags, the match percentage is: $$\text{matchPct} = \left\lfloor \frac{m}{n} \times 100 \right\rfloor$$ Results are sorted by m descending, then by $|\text{missing}|$ ascending, giving a ranking where the most relevant recipes always surface first.

The world map uses D3.js with the Natural Earth projection and TopoJSON country boundaries from the world-atlas dataset. Each of the 249 countries is mapped to one of 7 regions via an ISO numeric lookup table, and clicking any country (or its legend pill) selects the whole region.

The AI module (flavour-ai.js) calls the Hugging Face Inference Providers API using the OpenAI-compatible chat completions format. It sends a structured prompt and parses the model's response into four sections: spice suggestions, flavour balance, drink pairing, and chef's secret.

Recipe data lives in data.js — 77 dishes from the community cookbook, cleaned, normalised, and distributed across all 7 world regions.

Challenges we ran into

Merging two codebases was one of the biggest challenges. The ingredient matching bug took the most debugging time. Another hurdle was finding the right endpoint when integrating the API key

Accomplishments that we're proud of

A normalisation engine sophisticated enough to match "3 Cloves Garlic, finely minced" to a user typing "garlic", handling plurals, aliases, quantities, and units.
A genuinely useful AI Enhancer. The prompt engineering was carefully designed to extract four specific, consistently formatted sections from the model (spice suggestions, flavour balancing, drink pairing, and chef's secret), each grounded in the recipe's actual ingredients, classification, and historical era.
An interactive world map built from real geospatial data with hover effects, tooltips, and click-to-select regions.

What we learned

Progressive enhancement, debugging, AI integration

What's next for Vintage Cooks

Expand the archive — we want to ingest digitised cookbooks from other cultures and time periods. The region tagging system is already in place; we just need the data.

Built With

css3
d3.js
html5
huggingfaceapi
javascript
openaimodelforapi
python
topojson
world-atlas
zephyr-7b-beta

Submitted to

birmingHack 2.0

Created by

My role covered three main areas: API integration, LLM prompt engineering, and merging my teammates' separate codebases into a single working product.

On the API side, I integrated the Hugging Face Inference Providers API using the Zephyr-7B model. This was harder than expected - finding the correct endpoint, scoping the token permissions correctly, and working around CORS issues when running from the filesystem all had to be solved before a single AI response could come through. I also built a full rule-based fallback engine so the feature never shows a broken state regardless of API availability.

For prompt engineering, I designed the structured prompt that reliably extracts four consistently formatted sections from the model — spice suggestions, flavour balancing, a drink pairing, and a chef's secret — each grounded in the recipe's actual ingredients and era. Getting an LLM to produce parseable structured output rather than freeform prose required significant iteration.

The third part of my role was compilation. My frontend teammate had built three HTML pages with a clean vintage aesthetic, and my backend teammate had written a sophisticated Python ingredient-matching engine. I then built out the remaining features on top of that foundation: the world map, the recipe card grid with photos, and the AI Enhancer panel.

Shokhrukh Ruziboev
Dahamsa Sethumlee
Roman
Hunter Q