How to Create a Recipe Generator with Accompanying Pictures

In this video we explore how to generate recipes with just a simple phrase, including step by step images!

Step by step

Start a new project by clicking Build.
Add a Text Input Block.
Change the user prompt text to "What do you want to cook?"
Add an Text Generation Block.
Adjust the parameters of the Text Generation Block with the provided text.
Add a JSON extraction block.
Add JSON fields that match the JSON output indicated in the Text Generation example (system prompt).
Add the a Glif Block and use the below code to use the style provided in the vide as the unique Glif ID. You can also use any image generation block in it's place.
Repeat this step two more times with the additional image prompt json outputs.
Add an HTML Block.
Insert the text below and adjust it to match the correct inputs.
Test and publish!

Code and Content

Text Generation Settings

Prompt

User:{input1} 

AGENT:

Max Token

Model

Claude 3.5 Sonnet

System Prompt

Your job is to create a a 3 step recipe with images for a cottagecore food recipe blog written by a influencer that makes everything from scratch. The user will provide you with a prompt, and you will generate valid json with the different steps. in exactly for format below. You must only ever respond with value json and absolutely nothing else as your output will be fed directly into json parser.

The format: 

{ 

"title": "Title of the dish", 

"1": { 

"title": "title of the step", 

"img": "vivid description of the step 1 image", 

"html": "html friendly description of this step" }, 

"2": { "title": "title of the step", 

"img": "vivid description of the step 2 image", 

"html": "html friendly description of this step" }, 

"3": { "title": "title of the step", 

"img": "vivid description of the step 3 image", 

"html": "html friendly description of this step" } 

}

Inside of the description and html sections, you can include html tags to better format it. For the images, you bust be as vivid as possible as the ai image generator needs to know every detail of what it needs to generate. Remeber to set the scene as this is cooking so it needs to be on a table and maybe have hands mixing it. Be sure to have the images align with that particular step. Step 1 should usually be a list of ingredients. Your recipe must be specific on measurements and cooking times and temps. Return only JSON in the format above. It must be in the format above. Do not get creative with the format. Always use what the user is asking for but elaborate.

Glif Block

GlifID

cm0gk54fy0008edhkboe0dk4l

hf-repo

alvdansen/flux-koda

safetensor

araminta_k_flux_koda.safetensors

clip

flmft style, grainy photo

{json1.1img}

seed

HTML Output

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{json1.title}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .container {
            width: 1024px;
            height: 1325px;
            margin: 0 auto;
            background-color: white;
            overflow: hidden;
        }
        .header {
            padding: 10px;
            text-align: center;
            font-size: 42px;
            font-weight: bold;
            color: #101010;
            margin-bottom: 4px;
        }
        .step {
            display: flex;
            margin-bottom: 12px;
            padding: 0 20px;
        }
        .step-image {
            flex: 1;
            max-width: 40%;
            margin-right: 20px;
        }
        .step-image img {
            width: 100%;
            height: auto;
            border-radius: 8px;
        }
        .step-content {
            flex: 1;
        }
        .step-number {
            font-size: 24px;
            font-weight: bold;
            color: #ce513d;
            margin-bottom: 10px;
        }
        .step-description {
            font-size: 16px;
            line-height: 1.5;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            {json1.title}
        </header>
        <div class="step">
            <div class="step-image">
                <img src="{glif1}" alt="Step 1">
            </div>
            <div class="step-content">
                <div class="step-number">{json1.1title}</div>
                <div class="step-description">{json1.1html}</div>
            </div>
        </div>
        <div class="step">
            <div class="step-image">
                <img src="{glif2}" alt="Step 2">
            </div>
            <div class="step-content">
                <div class="step-number">{json1.2title}</div>
                <div class="step-description">{json1.2html}</div>
            </div>
        </div>
        <div class="step">
            <div class="step-image">
                <img src="{glif3}" alt="Step 3">
            </div>
            <div class="step-content">
                <div class="step-number">{json1.3title}</div>
                <div class="step-description">{json1.3html}</div>
            </div>
        </div>
    </div>
</body>
</html>