This content originally appeared on DEV Community and was authored by Kom Senapati
I submitted Recipe Genie to Quira Quest 12. But this time in Quest 16 I am supercharging it with more features including AI to make it accessible to users.
Let's take a look at the new features:
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:
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;
See the full source code.
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. Additionally, I implemented a speech-to-text feature for the input field, allowing users to speak their prompt, which is then captured automatically.
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.
This content originally appeared on DEV Community and was authored by Kom Senapati
Kom Senapati | Sciencx (2024-09-15T05:39:36+00:00) Recipe Genie supercharged with AI. Retrieved from https://www.scien.cx/2024/09/15/recipe-genie-supercharged-with-ai/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.