Recipe Portion & Ratio Adjuster

A client side web application designed to simplify home baking and cooking by allowing users to effortlessly scale recipe portion sizes and discover allergen friendly or dietary ingredient substitutions. Users can paste raw recipe text into the application, choose a scaling factor using quick preset buttons or a custom slider, and immediately view dynamically recalculated ingredient amounts alongside preserved cooking instructions. Additionally, the tool identifies key baking staples and presents interactive substitution options (such as replacing eggs with flax eggs or applesauce), automatically adjusting proportions and ratios so home cooks can easily adapt recipes based on dietary preferences or missing pantry items.

Technically, the project is architected as a zero build static application using vanilla HTML5, CSS3, and ES6+ JavaScript, making it instantly deployable on static hosting services like GitHub Pages. Ingredient parsing and portion scaling are powered by client side regex string matching and unit normalization algorithms that handle complex fractions, numerical ranges, and units without external runtime dependencies. For intelligent recommendations, the application features an optional local WebGPU AI engine powered by @mlc-ai/web-llm, which runs lightweight Large Language Models (such as Gemma, Qwen, or SmolLM2) directly inside the user’s browser. This setup provides 100% private, serverless, and local AI driven ingredient substitution suggestions with automatic hardware feature detection (shader-f16 capability checks with Float32 fallback) without relying on backend servers or external API keys.