Generate an image from a prompt using Fal.ai and Trigger.dev Realtime

This example project generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime.

Walkthrough

This video walks through the process of creating this task in a Next.js project.

Tech stack

• Next.js using the App Router for the frontend
• Trigger tasks from the frontend using our React hooks
• Trigger.dev Realtime to stream updates to the frontend
• Trigger.dev for task processing
• Fal.ai for AI image generation

You will need all of these services to run this project.

GitHub Repo

Check out and fork the full code in our nextjs-realtime-fal-demo repo .

To run the project and tasks locally, add your API keys to an .env file, and update the project ID in the trigger.config.ts file to your project ID. To run the project in production, set the TRIGGER_API_KEY environment variable to your project API key, and update the environment variables in the Trigger.dev dashboard.

Task code

This task converts an image to a cartoon using fal AI.

trigger/fal-ai-image-from-prompt-realtime.ts

import * as fal from "@fal-ai/serverless-client";
import { logger, schemaTask } from "@trigger.dev/sdk/v3";
import { z } from "zod";

export const FalResult = z.object({
  images: z.tuple([z.object({ url: z.string() })]),
});

export const payloadSchema = z.object({
  imageUrl: z.string().url(),
  prompt: z.string(),
});

export const realtimeImageGeneration = schemaTask({
  id: "realtime-image-generation",
  schema: payloadSchema,
  run: async (payload) => {
    const result = await fal.subscribe("fal-ai/flux/dev/image-to-image", {
      input: {
        image_url: payload.imageUrl,
        prompt: payload.prompt,
      },
      onQueueUpdate: (update) => {
        logger.info("Fal.ai processing update", { update });
      },
    });

    const $result = FalResult.parse(result);
    const [{ url: cartoonUrl }] = $result.images;

    return {
      imageUrl: cartoonUrl,
    };
  },
});

Testing your task

You can test your task by triggering it from the Trigger.dev dashboard. Here’s an example payload:

{
  "imageUrl": "https://static.vecteezy.com/system/resources/previews/005/857/332/non_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
  "prompt": "Dress this dog for Christmas"
}