What I built
Built a browser-based app which takes audio input from the microphone and transcribes it into recipe notes/memo.
Building for a Friend
Made it for my friend, Arnesh. He is very passionate about cooking and I built this app so that he can note down recipe notes/memoes hands-free when his hands are occupied while cooking.
Demo
https://boisterous-gnome-e40fb5.netlify.app/
Code
https://github.com/XDut/recipe-keeper
How I Built It
The app runs the experience directly in the browser. It uses the browser's microphone APIs to capture audio, then uses Transformers.js with the open Xenova/whisper-tiny model for speech-to-text. The transcribed text is parsed into structured recipe information such as ingredients, steps, timing, and other useful details.
I organized the project into separate modules for audio recording, transcription, recipe parsing, recipe storage, rendering, UI state, and utilities. This keeps the application easier to understand and extend than the original single-file implementation.
The overall flow is:
Microphone → Audio → Whisper Model → Transcribing → Recipe Memo
Recipes can then be viewed in the browser, downloaded as JSON, or printed. The app also includes sample audio so the experience can be tested without having to record something yourself.
Why open mattered here
Cooking instructions are often personal, messy, and surprisingly sensitive. A recipe might contain a family's traditional method, a voice recording from someone you know, or simply something you don't want uploaded to another company's servers. That made a local, browser-based approach particularly valuable.
Using an open model through Transformers.js means the core transcription capability can download and run locally in the user's browser rather than requiring a proprietary speech-to-text API. There is no need to build a separate backend just to send someone's cooking audio to a server and wait for a transcription.
Most importantly, the project demonstrates that useful AI experiences don't always need to be built as a cloud service. A small open model running in the browser can be enough to turn something as simple as a voice recording into a useful application.
Note: The app is hosted in netlify for ease of use, but the model downloads, ingests, runs and transcibes locally.
Top comments (0)