Recipe Genie: Powered by AI 🤖

#genai #recipe #nextjs #quira

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:

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;

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.

🧑‍💻 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.