docs/guides/examples/fal-ai-realtime.mdx
<Card title="View the project on GitHub" icon="GitHub" href="https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation"
Click here to view the full code for this project in our examples repository on GitHub. You can fork it and use it as a starting point for your own project. </Card>
This video walks through the process of creating this task in a Next.js project.
<iframe width="100%" height="315" src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4" title="Trigger.dev walkthrough" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />This task generates an image from a prompt using Fal.ai.
import * as fal from "@fal-ai/serverless-client";
import { logger, schemaTask } from "@trigger.dev/sdk";
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,
};
},
});
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"
}