|
1 | 1 | ---
|
2 | 2 | title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
|
3 | 3 | sidebarTitle: "Fal.ai with Realtime"
|
4 |
| -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." |
| 4 | +description: "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." |
5 | 5 | ---
|
6 | 6 |
|
7 | 7 | ## Walkthrough
|
8 | 8 |
|
9 | 9 | This video walks through the process of creating this task in a Next.js project.
|
10 | 10 |
|
11 | 11 | <div className="w-full h-full aspect-video mb-3">
|
12 |
| - <iframe width="100%" height="100%" src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4" title="Trigger.dev walkthrough" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen/> |
| 12 | + <iframe |
| 13 | + width="100%" |
| 14 | + height="100%" |
| 15 | + src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4" |
| 16 | + title="Trigger.dev walkthrough" |
| 17 | + frameborder="0" |
| 18 | + allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| 19 | + referrerpolicy="strict-origin-when-cross-origin" |
| 20 | + allowfullscreen |
| 21 | + /> |
13 | 22 | </div>
|
14 | 23 |
|
15 |
| -## Prerequisites |
| 24 | +## Tech stack |
16 | 25 |
|
17 |
| -- An existing project |
18 |
| -- A [Trigger.dev account](https://cloud.trigger.dev) with Trigger.dev [initialized in your project](/quick-start) |
19 |
| -- A [Fal.ai](https://fal.ai/) account |
| 26 | +- Next.js using the App Router for the frontend |
| 27 | +- Trigger tasks from the frontend using our [React hooks](/frontend/react-hooks) |
| 28 | +- [Trigger.dev Realtime](/realtime/overview) to stream updates to the frontend |
| 29 | +- [Trigger.dev](https://cloud.trigger.dev) for task processing |
| 30 | +- [Fal.ai](https://fal.ai/) for AI image generation |
| 31 | +- [Cloudflare R2](https://r2.cloudflarestorage.com/) for storing the generated image |
| 32 | + |
| 33 | +<Note>You will need all of these services to run this project.</Note> |
| 34 | + |
| 35 | +## GitHub Repo |
| 36 | + |
| 37 | +Check out and fork the full code in our [nextjs-realtime-fal-demo repo |
| 38 | +](https://github.com/triggerdotdev/nextjs-realtime-fal-demo). |
| 39 | + |
| 40 | +<Note> |
| 41 | + To run the project and tasks locally, add your API keys to an `.env` file, and update the project |
| 42 | + ID in the `trigger.config.ts` file to your project ID. To run the project in production, set the |
| 43 | + `TRIGGER_API_KEY` environment variable to your project API key, and update the environment |
| 44 | + variables in the Trigger.dev dashboard. |
| 45 | +</Note> |
20 | 46 |
|
21 | 47 | ## Task code
|
22 | 48 |
|
|
0 commit comments