🥞
Glif Docs/Guide
  • Getting Started
    • 👋What is Glif?
    • 💡What can I do with a glif?
      • 🏃Run a glif
      • 🔌Build a glif
      • 🔀Remix a glif
      • 🗣️Comment on a glif
      • 🔳Embed a glif
    • ⚒️How do I build a glif?
      • 📽️Video tutorial: Building a simple image generator
      • 🟰Using variables
    • ⚙️Profile Settings
    • 🪙Credits and Payments
    • ❓FAQs
  • Blocks
    • 🙋Inputs
      • ✍️Text Input Block
      • 🖼️Image Input Block
      • 📋Multipick Block
    • 🪄Generators
      • 📃Text Block
      • 🖼️Image Block
      • ➡️Image to Text Block
        • Florence2Sam2Segmenter
    • 🧰Tools
      • 🔀Text Combiner Block
      • 🔬JSON Extractor Block
    • 💅Styling
      • 🎨HTML Block
      • 🖼️Canvas Block
    • 🧑‍🔬Advanced/Experimental
      • 🎙️Audio Input Block
      • ↔️Glif Block
      • 🌐Web Fetcher Block
      • 🔊Audio Spell
      • 🧱ComfyUI Block
      • 📡Audio to Text Block
      • 🎥Video Input Block
      • 🔧JSON Repair Block
  • Apps
    • 🎨Glif It! Browser Extension
  • Glif University
    • 🎥Video Tutorials
      • 🐲How To: D&D Character Sheet Generator
      • 🧠How To: Expanding Brain Meme Generator
      • 🦑How To: Occult Memelord Generator
      • 🥸How To: InstantID Portrait Restyle Glif
      • 🕺How To: Style and Pose a Character with InstantID + Controlnet
      • 😱How To: Create a Simple Cartoon Portrait Animation Glif (LivePortrait + Custom Blocks)
      • 👗How to Create a Clothing Restyler App (IP Adapter, ControlNet + GPT Vision)
      • 🤡How to Create a 4+ Panel Storyboard/Comic (Flux Schnell)
      • 🎂How to Create a Recipe Generator with Accompanying Pictures
      • How to Use JasperAI Depth Controlnet on Flux Dev
      • 🦸‍♂️How to Make a Consistent Comic Panel Generator
    • 🧑‍🏫Prompt Engineering 101
    • 🖼️ControlNet
    • 📚AI Glossary
  • API - for Developers
    • ⚡Running glifs via the API
    • 🤖Using AI Assistants to build with the Glif API
    • 📙Reading & writing data via the API
    • 🗾Glif Graph JSON Schema
    • 📫Embed player & custom webpages
    • 📫Sample code
    • ❓What can I make with the Glif API?
      • Browser Extensions
      • Discord Bots
      • Games
      • Social Media Bots
      • Experimental Projects
  • Policies
    • 👨‍👩‍👧‍👦Community Guidelines
  • Programs
    • 🖼️Loradex Trainer Program
  • Community Resources
    • 🧑‍🤝‍🧑Resources Created by Glif Community Members
  • Contact Us
    • 📣Send us your feedback
    • 🚔Information for law enforcement
Powered by GitBook
On this page
  1. Glif University
  2. Video Tutorials

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!

PreviousHow to Create a 4+ Panel Storyboard/Comic (Flux Schnell)NextHow to Use JasperAI Depth Controlnet on Flux Dev

Last updated 7 months ago

Step by step

  1. Start a new project by clicking Build.

  2. Add a Text Input Block.

  3. Change the user prompt text to "What do you want to cook?"

  4. Add an Text Generation Block.

  5. Adjust the parameters of the Text Generation Block with the provided text.

  6. Add a JSON extraction block.

  7. Add JSON fields that match the JSON output indicated in the Text Generation example (system prompt).

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

  9. Repeat this step two more times with the additional image prompt json outputs.

  10. Add an HTML Block.

  11. Insert the text below and adjust it to match the correct inputs.

  12. Test and publish!

Prompt

User:{input1}

AGENT:

Max Tokens

3000

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.

GlifID

cm0gk54fy0008edhkboe0dk4l

hf-repo

alvdansen/flux-koda

safetensor

araminta_k_flux_koda.safetensors

clip

flmft style, grainy photo

t5

{json1.1img}

seed

42

<!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>

🎥
🎂
Check out the example glif here!