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:
See the full source code.Code
const TextToSpeech = ({ text }) => {
const [isPaused, setIsPaused] = useState(false);
const [utterance, setUtterance] = useState(null);
useEffect(() => {...}, [text]);
const handlePlay = () => {...};
const handlePause = () => {...};
const handleStop = () => {...};
return (
<div className="flex flex-row-reverse gap-5 py-2">
<button onClick={handleStop}>
<StopIcon />
</button>
<button onClick={handlePause}>
<PauseIcon />
</button>
<button onClick={handlePlay}>
{isPaused ? <ResumeIcon /> : <PlayIcon />}
</button>
</div>
);
};
export default TextToSpeech;
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 using generateObject()
of Vercel AI SDK, it creates the recipe object and returns it as a response.
See the full source 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 used https://pollinations.ai/'s free API to do it.
See the full source 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 full source 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 using
describe()
method of zod and it worked. You can see the schema here.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 to
generateObject()
.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.
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 on X as well!
Top comments (8)
Nice Project!
Thanks ☺️
Cool project.
Nice project):
Thanks Jennie
Nice one
Keep it up!
Another great project 🚀
Thanks