Skip to content

Latest commit

 

History

History

meme-generator-human-in-the-loop

README.md

Meme generator with human-in-the-loop approval

ℹ️ Note: This is a v4 project. If you are using v3 and want to upgrade, please refer to our v4 upgrade guide.

This example reference project demonstrates using a human-in-the-loop workflow to approve memes generated using OpenAI's DALL-E 3.

Features

  • A Next.js app, with an endpoint for approving the generated memes
  • Trigger.dev tasks to generate the images and orchestrate the waitpoint workflow
  • OpenAI DALL-E 3 for generating the images
  • A Slack app for the human-in-the-loop step, with the approval buttons linked to the endpoint

slack-meme-approval

Getting started

  1. After cloning the repo, run npm install to install the dependencies.
  2. Copy the .env.example file to .env and fill in the required environment variables:
    • You'll need an OpenAI API key for DALL-E 3. Create a free account at OpenAI.
    • Sign up for a free Trigger.dev account here and create a new project.
    • Create a Slack incoming webhook URL for notifications. You will need to create and install your own Slack app to a specific channel in your workspace. Make sure the app has the relevant permissions to send messages to the channel, the incoming webhook URL details can be found in the Slack app settings.
    • Set your app's public URL for approval callbacks.
  3. Copy the project ref from the Trigger.dev dashboard and add it to the trigger.config.ts file.
  4. Run the Next.js server with npm run dev.
  5. In a separate terminal, run the Trigger.dev dev CLI command with npx trigger@v4-beta dev (it may ask you to authorize the CLI if you haven't already).
  6. To test your workflow, go to the Trigger.dev dashboard test page and trigger the workflow.

Example payload:

{
  "prompt": "A meme with a cat and a dog"
}

Relevant code

  • Meme generator task: View the Trigger.dev task code in the src/trigger/memegenerator.ts file, which:

    • Generates two meme variants using DALL-E 3
    • Uses batchTriggerAndWait to generate multiple meme variants simultaneously (this is because you can only generate 1 image at a time with DALL-E 3)
    • Creates a waitpoint token for human approval
    • Sends the generated images with approval buttons to Slack for review
    • Handles the approval workflow

  • Approval Endpoint: The waitpoint approval handling is in src/app/endpoints/[slug]/page.tsx, which processes:

    • User selections from Slack buttons
    • Waitpoint completion with the chosen meme variant
    • Success/failure feedback to the approver

Learn More

To learn more about the technologies used in this project, check out the following resources: