In Quira Quest 16, I took my project Recipe Genie (earlier submitted to Quira Quest 12) and added more features including AI recipe generation and more to make it accessible to users.

Let's take a look at the new features:

1️⃣ Text to Speech

I created a component text-to-speech that takes some text to be converted to speech and renders buttons like play/resume, pause, and stop to control the audio.

You can take a look at this component here:

constTextToSpeech=({text})=>{const[isPaused,setIsPaused]=useState(false);const[utterance,setUtterance]=useState(null);useEffect(()=>{...},[text]);consthandlePlay=()=>{...};consthandlePause=()=>{...};consthandleStop=()=>{...};return(<divclassName="flex flex-row-reverse gap-5 py-2"><buttononClick={handleStop}><StopIcon/></button><buttononClick={handlePause}><PauseIcon/></button><buttononClick={handlePlay}>{isPaused?<ResumeIcon/>:<PlayIcon/>}</button></div>);};exportdefaultTextToSpeech;

2️⃣ AI-Generated Recipe

For generating recipes with AI, I choose to use Vercel AI SDK as it's easy to use and also gives a lot of features like structured outputs from LLMs(I am using this feature to generate recipes for users) out of the box and GROQ API as it's free.

I created a route/api/generate-recipe which has a POST route which takes in inputs like userPrompt, dishType, and dietaryRestrictions and creates a prompt for passing into LLM.

Then usinggenerateObject() of Vercel AI SDK, it creates the recipe object and returns it as a response.

See the fullsource code for this route.

I integrated this into a form and attached the form, along with the recipe rendering component, to the/ai route of the application.

3️⃣ Ai Recipe Image Generation

I also added AI image generation for these recipes using the recipe name and user prompt. I usedhttps://pollinations.ai/'s free API to do it.

See the fullsource code for this route.

4️⃣ Speech to Text

I implemented a speech-to-text feature for the input field of the above-discussed form, allowing users to speak their prompt, which is then captured automatically.

See the fullsource code for this component.

🧑‍💻 Developer Experience/Findings

• First I started with zod schema without any description then it gave some error that it couldn't generate the recipe object. Then I added a description for the schema usingdescribe() method of zod and it worked. You can see the schemahere.

• I found out that the Meta Llama 3 8B model performs better than the Mixtral 8x7b model.

• Also as I was using Vercel AI SDK, I didn't have to use any external tooling as I had access togenerateObject().

• Groq API is very fast and it works like a charm.
  

If you enjoyed 💖 this project, I’d appreciate your support! You can vote 🗳️ for my submission in the quest and star ⭐ the repo.

Vote 🙏

Star Recipe Genie AI ⭐

That’s all for today—thanks so much for reading! If you have any thoughts or questions, feel free to reach out.

Feel free to connect with me onX as well!