DEV Community

Cover image for Recipe Genie: Powered by AI 🤖
K Om Senapati
K Om Senapati

Posted on • Updated on

Recipe Genie: Powered by AI 🤖

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.

Enter fullscreen mode Exit fullscreen mode

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:

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;
Enter fullscreen mode Exit fullscreen mode

See the full source code.


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.

Enter fullscreen mode Exit fullscreen mode

🧑‍💻 Developer Experience/Findings

Developer

  • 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.

Enter fullscreen mode Exit fullscreen mode

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 on X as well!

Bye

Top comments (8)

Collapse
 
rohan_sharma profile image
Rohan Sharma

Nice Project!

Collapse
 
komsenapati profile image
Kom Senapati

Thanks ☺️

Collapse
 
audreydev profile image
Audrey Delgado

Cool project.

Collapse
 
jennie_py profile image
Priya Yadav

Nice project):

Collapse
 
komsenapati profile image
Kom Senapati

Thanks Jennie

Collapse
 
aviralgarg05 profile image
Aviral Garg

Nice one

Collapse
 
divya4879 profile image
Divya4879

Keep it up!
Another great project 🚀

Collapse
 
komsenapati profile image
Kom Senapati

Thanks