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 (9)
Keep it up!
Another great project ๐
Thanks
Nice Project!
Thanks โบ๏ธ
Nice project):
Thanks Jennie
Cool project.
Nice one
This is interesting