Skip to content

Commit a7acc43

Browse files
D-K-PD-K-P
committed
Added example project
1 parent b0ba355 commit a7acc43

3 files changed

Lines changed: 57 additions & 55 deletions

File tree

‎docs/guides/example-projects/realtime-fal-ai.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
3+
sidebarTitle: "Realtime image gen with Fal.ai"
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+
---
6+
7+
## Overview
8+
9+
This full stack Next.js project showcases the following:
10+
11+
- A Trigger.dev task which [generates an image from a prompt using Fal.ai](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts)
12+
- When a [form is submitted](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/page.tsx) in the UI, triggering the task using a [server action](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/actions/process-image.ts)
13+
- Showing the [progress of the task](https://github.com/triggerdotdev/examples/blob/main/realtime-fal-ai-image-generation/src/app/processing/%5Bid%5D/ProcessingContent.tsx) on the frontend using Trigger.dev Realtime. This also includes error handling and a fallback UI
14+
- Once the task is completed, showing the generated image on the frontend next to the original image
15+
16+
## Walkthrough
17+
18+
This video walks through the process of creating this task in a Next.js project.
19+
20+
<div className="w-full h-full aspect-video mb-3">
21+
<iframe
22+
width="100%"
23+
height="100%"
24+
src="https://www.youtube.com/embed/BWZqYfUaigg?si=XpqVUEIf1j4bsYZ4"
25+
title="Trigger.dev walkthrough"
26+
frameborder="0"
27+
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
28+
referrerpolicy="strict-origin-when-cross-origin"
29+
allowfullscreen
30+
/>
31+
</div>
32+
33+
<Card
34+
title="View the repo"
35+
icon="GitHub"
36+
href="https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation"
37+
>
38+
Click here to view the full code for this project in our examples repository on GitHub. You can
39+
fork it and use it as a starting point for your own project.
40+
</Card>

‎docs/guides/introduction.mdx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,9 @@ Get set up fast using our detailed walk-through guides.
3737

3838
Example projects are full projects with example repos you can fork and use. These are a great way of learning how to encorporate Trigger.dev into your project.
3939

40-
| Example project | Description | Framework | GitHub Repo |
41-
| :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------- |
42-
| [Vercel AI SDK LLM evaluator with Realtime streaming](/guides/examples/vercel-ai-sdk-llm-evaluator) | A full-stack demo showing off Trigger.dev triggering from the frontend, Batch triggering and Realtime streams. | Next.js | [View the repo](https://github.com/triggerdotdev/batch-llm-evaluator) |
43-
| [Fal.ai with Realtime](/guides/examples/fal-ai-realtime) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/nextjs-realtime-fal-demo) |
44-
| [Fal.ai image to cartoon](/guides/examples/fal-ai-image-to-cartoon) | Convert an image to a cartoon using Fal.ai, and upload the result to Cloudflare R2. | Next.js | Coming soon |
40+
| Example project | Description | Framework | GitHub Repo |
41+
| :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
42+
| [Realtime Fal.ai image generation](/guides/example-projects/realtime-fal-ai) | Generate an image from a prompt using Fal.ai and show the progress of the task on the frontend using Realtime. | Next.js | [View the repo](https://github.com/triggerdotdev/examples/tree/main/realtime-fal-ai-image-generation) |
4543

4644
## Example tasks
4745

‎docs/mint.json‎

Lines changed: 14 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
11
{
22
"$schema": "https://mintlify.com/schema.json",
33
"name": "Trigger.dev",
4-
"openapi": [
5-
"/openapi.yml",
6-
"/v3-openapi.yaml"
7-
],
4+
"openapi": ["/openapi.yml", "/v3-openapi.yaml"],
85
"api": {
96
"playground": {
107
"mode": "simple"
@@ -140,30 +137,20 @@
140137
"pages": [
141138
{
142139
"group": "Tasks",
143-
"pages": [
144-
"tasks/overview",
145-
"tasks/schemaTask",
146-
"tasks/scheduled"
147-
]
140+
"pages": ["tasks/overview", "tasks/schemaTask", "tasks/scheduled"]
148141
},
149142
"triggering",
150143
"runs",
151144
"apikeys",
152145
{
153146
"group": "Configuration",
154-
"pages": [
155-
"config/config-file",
156-
"config/extensions/overview"
157-
]
147+
"pages": ["config/config-file", "config/extensions/overview"]
158148
}
159149
]
160150
},
161151
{
162152
"group": "Development",
163-
"pages": [
164-
"cli-dev",
165-
"run-tests"
166-
]
153+
"pages": ["cli-dev", "run-tests"]
167154
},
168155
{
169156
"group": "Deployment",
@@ -173,9 +160,7 @@
173160
"github-actions",
174161
{
175162
"group": "Deployment integrations",
176-
"pages": [
177-
"vercel-integration"
178-
]
163+
"pages": ["vercel-integration"]
179164
}
180165
]
181166
},
@@ -187,13 +172,7 @@
187172
"errors-retrying",
188173
{
189174
"group": "Wait",
190-
"pages": [
191-
"wait",
192-
"wait-for",
193-
"wait-until",
194-
"wait-for-event",
195-
"wait-for-request"
196-
]
175+
"pages": ["wait", "wait-for", "wait-until", "wait-for-event", "wait-for-request"]
197176
},
198177
"queue-concurrency",
199178
"versioning",
@@ -238,10 +217,7 @@
238217
"management/overview",
239218
{
240219
"group": "Tasks API",
241-
"pages": [
242-
"management/tasks/trigger",
243-
"management/tasks/batch-trigger"
244-
]
220+
"pages": ["management/tasks/trigger", "management/tasks/batch-trigger"]
245221
},
246222
{
247223
"group": "Runs API",
@@ -280,9 +256,7 @@
280256
},
281257
{
282258
"group": "Projects API",
283-
"pages": [
284-
"management/projects/runs"
285-
]
259+
"pages": ["management/projects/runs"]
286260
}
287261
]
288262
},
@@ -328,17 +302,11 @@
328302
},
329303
{
330304
"group": "Help",
331-
"pages": [
332-
"community",
333-
"help-slack",
334-
"help-email"
335-
]
305+
"pages": ["community", "help-slack", "help-email"]
336306
},
337307
{
338308
"group": "",
339-
"pages": [
340-
"guides/introduction"
341-
]
309+
"pages": ["guides/introduction"]
342310
},
343311
{
344312
"group": "Frameworks",
@@ -380,7 +348,7 @@
380348
},
381349
{
382350
"group": "Example projects",
383-
"pages": ["guides/examples/fal-ai-image-to-cartoon", "guides/examples/fal-ai-realtime"]
351+
"pages": ["guides/example-projects/realtime-fal-ai"]
384352
},
385353
{
386354
"group": "Example tasks",
@@ -408,20 +376,16 @@
408376
},
409377
{
410378
"group": "Dashboard",
411-
"pages": [
412-
"guides/dashboard/creating-a-project"
413-
]
379+
"pages": ["guides/dashboard/creating-a-project"]
414380
},
415381
{
416382
"group": "Migrations",
417-
"pages": [
418-
"guides/use-cases/upgrading-from-v2"
419-
]
383+
"pages": ["guides/use-cases/upgrading-from-v2"]
420384
}
421385
],
422386
"footerSocials": {
423387
"twitter": "https://twitter.com/triggerdotdev",
424388
"github": "https://github.com/triggerdotdev",
425389
"linkedin": "https://www.linkedin.com/company/triggerdotdev"
426390
}
427-
}
391+
}

0 commit comments

Comments
 (0)