James Ritchie
fade22015f
* Adds new features table to top of v4 upgrade guide * Adds wait idempotency to wait-until, wait-for, and wait-for-token pages * Adds new priority docs page and updates the v4 upgrade guide * Adds new task lifecycle hooks * Removes the message about requiring tasks to be exported * Adds new global lifecycle hooks section * Moves sections from upgrade guide into the table * Adds hidden task page * Improves the global lifecycle hooks section * Updates middleware and locals section * Adds new useWaitToken page to the react hooks section * Adds a new ai.tool section * Moves Docker (legacy) page into self-hosting section * Removes known issues from v4 upgrade guide * Replace “toolTask” with “ai.tool” in the Streams page example * Renames guide to “Migrating from v3” and adds redirect * Remove references to v4 * Removes changelog from migration guide * The installation guide now references `@latest update` * Changes all references from `/sdk/v3` to `/sdk` * Updates @v4-beta to @latest * Fixed broken link * Fixes broken link * Adds an upgrade to v4 using AI section * Fixes 2 broken links * Adds an entry for targetting preview branches * Updates the run statuses * Adds boolean helpers section to the runs and realtime pages * Updates the concurrency page * Updates the test page to include the new options * Adds SDK and curl options for the preview branch targeting * Updates new bulk actions page * Remove the releasing concurrency section * Got rid of some more @v4-beta mentions * Improved rate limit docs * Improved migrating docs * Removed commented sections of the docs * useWaitToken hook * Fixed the description * Fix for missing test image --------- Co-authored-by: Matt Aitken <matt@mattaitken.com> Co-authored-by: Dan <8297864+D-K-P@users.noreply.github.com>
90 lines
2.5 KiB
Plaintext
90 lines
2.5 KiB
Plaintext
---
|
|
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
|
|
sidebarTitle: "Fal.ai with Realtime"
|
|
description: "This example task generates an image from a prompt using Fal.ai and shows the progress of the task on the frontend using Trigger.dev Realtime."
|
|
---
|
|
|
|
## GitHub repo
|
|
|
|
<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>
|
|
|
|
## Walkthrough
|
|
|
|
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
|
|
/>
|
|
|
|
## Prerequisites
|
|
|
|
- An existing project
|
|
- A [Trigger.dev account](https://cloud.trigger.dev) with Trigger.dev [initialized in your project](/quick-start)
|
|
- A [Fal.ai](https://fal.ai/) account
|
|
|
|
## Task code
|
|
|
|
This task generates an image from a prompt using Fal.ai.
|
|
|
|
```ts trigger/fal-ai-image-from-prompt-realtime.ts
|
|
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,
|
|
};
|
|
},
|
|
});
|
|
```
|
|
|
|
### Testing your task
|
|
|
|
You can test your task by triggering it from the Trigger.dev dashboard. Here's an example payload:
|
|
|
|
```json
|
|
{
|
|
"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"
|
|
}
|
|
```
|