CrAivings

Don't know what to cook? Enter whatever ingredients you have in your kitchen, and CrAIvings will instantly show you delicious recipes with simple steps and beautiful photos of the finished dish!

Comment

CrAivings: AI thinks. You eat. 🍳 Inspiration Every year, millions of tons of edible food are discarded globally, largely driven by planning fatigue and household waste. We’ve all opened the refrigerator, stared at a random collection of ingredients—say, a single chicken breast, a half-used block of cheese, and a bell pepper—and felt the heavy onset of "decision paralysis."

We asked ourselves: Why should cooking feel like a chore?

We wanted to create a whimsical, tactile, and extremely responsive web app that turns pantry auditing into a delightful game. Inspired by retro diners, cozy kitchens, and modern AI capability, CrAivings was born to bridge the gap between leftover items and gourmet meals.

What it does CrAivings takes whatever ingredients you have on hand and uses high-performance generative AI to output three distinct, personalized recipes.

Tag-Based Pantry Entry: Users type ingredients and hit Enter to create tags, or hit the "Random Me!" button to randomize ingredients for spontaneous culinary exploration. Deterministic Recipe Drafting: Clicking "AI, Think!" calls an advanced Large Language Model to compose three tailored recipes using only the specified ingredients. Dynamic Visual Arts: Instead of using dull generic placeholder images, a latent diffusion image generator creates high-resolution, appetizing food photography of each specific recipe title in real-time. Modal Presentation: Clicking on any recipe card opens a rich modal overlay displaying the exact proportions of ingredients and step-by-step instructions. How we built it We designed CrAivings as a lightning-fast, zero-overhead serverless client-side application:

Frontend Architecture: Built using semantic HTML5, custom utility-based Vanilla CSS3, and vanilla ES6+ JavaScript. We opted against bulky frameworks to maintain an instantaneous page load speed. Design & Animations: Created a custom brand identity with a cozy color palette (cream #fdf6e3, charcoal #3a2a1a, amber #f5a623, and pistachio #eaf5e6). We added custom @keyframes animations for a floating mascot, micro-interactions, skeleton loaders, and a glassmorphism modal popup (backdrop-filter). Text Generation Model (Qwen/Qwen2.5-7B-Instruct): Invoked via Hugging Face Serverless Inference API. The system prompt instructs the model to return a structured JSON array of exactly 3 objects matching a strict schema. Image Generation Model (black-forest-labs/FLUX.1-schnell): Invoked asynchronously for each card. While the text loads instantly, FLUX starts generating matching food photography and replaces the card's loading skeleton dynamically. Analytics and Tracking: Integrated Pendo script in the header of each page (index.html, about.html, how-it-works.html) to track user engagement and interactions. The Mathematics Behind CrAivings To understand why a generative model is superior to a classic database lookup, we can model the pantry problem mathematically:

  1. Combinatorial Pantry State Space Let $U$ be the universe of all common culinary ingredients, where $|U| = N$. If a user selects a subset of $k$ ingredients, the total number of unique search keys is represented by the binomial coefficient:

$$\binom{N}{k} = \frac{N!}{k!(N-k)!}$$

For a modest universe of $N = 150$ ingredients and choosing $k = 4$ items:

$$\binom{150}{4} = \frac{150 \times 149 \times 148 \times 147}{24} = 20,482,725 \text{ combinations}$$

Populating a static relational database with recipes covering all possible combinations would require millions of entries. By using a generative LLM, we map this sparse combinatorial space to a dense semantic embedding space, allowing the AI to invent sound recipes on demand.

  1. Creative LLM Text Sampling To ensure our recipes are creative yet structurally logical, we adjust the probability of the model's token selection. Let $z_i$ be the logit for token $w_i$. The probability distribution $P(w_i)$ is computed using a temperature-scaled softmax:

$$P(w_i) = \frac{\exp(z_i / T)}{\sum_j \exp(z_j / T)}$$

By setting the temperature $T = 0.7$, we scale down high-confidence logits slightly, allowing the model to choose secondary, more creative tokens (e.g., adding unexpected spice pairings) while avoiding chaotic or non-sensical outputs (which occur when $T \ge 1.0$).

  1. Latent Flow Matching ODE (FLUX.1-schnell) FLUX.1-schnell uses a rectified flow matching framework to generate food images in very few steps (typically $4$ steps). The trajectories of latents $x_t$ are modeled through a probability flow Ordinary Differential Equation (ODE):

$$\mathrm{d}x_t = v(x_t, t) \mathrm{d}t$$

where $v(x_t, t)$ represents the velocity vector field predicted by the model, shifting the initial Gaussian noise $x_0 \sim \mathcal{N}(0, I)$ toward the target image latent representation $x_1$ under the conditional guidance of our prompt:

$$\text{Prompt} = \text{"Appetizing professional food photography of [Recipe Title], delicious, gourmet..."}$$

Challenges we ran into JSON Parsing Resilience: Large Language Models sometimes wrap their JSON outputs in Markdown code blocks (e.g. json ...) or append conversational preamble. We resolved this by applying robust regular expression cleaning to strip out markdown tags and text wrappers before passing the string to JSON.parse(). API Key Exposure & Security: In a client-side serverless app, API keys are exposed in the JavaScript bundle. While this is acceptable for hackathons and demo projects, we mitigated risk by applying strict CORS origin restrictions on our endpoints and enforcing low rate-limits. Diffusion Latency & Fallbacks: Image diffusion models can take a few seconds to complete execution. To prevent a poor user experience, we implemented a dual-state card system: Instant text rendering with a shimmering CSS skeleton loader. Asynchronous image generation that replaces the skeleton in-place. A robust try-catch handler that falls back to a clean emoji illustration if the image API fails or is rate-limited. Accomplishments that we're proud of Tactile and Responsive UX: We built a fluid UI that is optimized for both desktop viewports and mobile screens. Serverless Parallelization: By invoking the image generation endpoints asynchronously and in parallel, we minimized the total recipe generation time to under 3 seconds. Real-time Image Rendering: Creating bespoke food photography matching the AI's custom recipe titles makes the app feel incredibly magical and premium. What we learned Prompt Structuring: How to write rigorous system prompts that dictate output formatting down to the exact array syntax. Asynchronous JS Coordination: Managing independent HTTP requests for text and media without blocking user interactions or freezing the main thread. CSS Micro-animations: Utilizing floating keyframes and CSS grid alignments to give the interface a polished, premium aesthetic. What's next for CrAivings Smart Camera Recognition: Let users photograph the contents of their fridge and feed the image into a Vision-Language Model to extract the ingredients automatically. Dietary Profiles: Allow users to pre-save dietary profiles (e.g., vegan, gluten-free, keto) which will dynamically inject constraint equations into the LLM system prompt. Community Recipe Book: Enable users to share their generated culinary masterpieces directly to a public feed.

Built With

Share this project:

Updates