github-featured/triggerdotdev--trigger.dev
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Adding example projects (#1564)

Browse Source 
* Added new side menu section and updated intro

* Updated the fal ai realtime project

* Copy update

* Added example project

* Swapped walkthrough and repo

* Restore original fal task page

* Added links back to the intro
This commit is contained in:
Dan
2025-01-03 20:00:40 +00:00
committed by GitHub
parent 6a2d033f32
commit 668b34d25e
4 changed files with 79 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/guides/example-projects/realtime-fal-ai.mdx
+42
View File
@@ -0,0 +1,42 @@
---
title: "Generate an image from a prompt using Fal.ai and Trigger.dev Realtime"
sidebarTitle: "Realtime image gen with Fal.ai"
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."
---
## Overview
This full stack Next.js project showcases the following:
- 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)
- 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)
- 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
- Once the task is completed, showing the generated image on the frontend next to the original image
## 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 video
This video walks through the process of creating this task in a Next.js project.
<div className="w-full h-full aspect-video mb-3">
<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
/>
</div>
docs/guides/examples/fal-ai-realtime.mdx
+11 -2
View File
@@ -9,7 +9,16 @@ description: "This example task generates an image from a prompt using Fal.ai an
This video walks through the process of creating this task in a Next.js project.
<div className="w-full h-full aspect-video mb-3">
<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/>
<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
/>
</div>
## Prerequisites
@@ -20,7 +29,7 @@ This video walks through the process of creating this task in a Next.js project.
## Task code
This task converts an image to a cartoon using fal AI, and uploads the result to Cloudflare R2.
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";
docs/guides/introduction.mdx
+9 -1
View File
@@ -33,9 +33,17 @@ Get set up fast using our detailed walk-through guides.
| [Using webhooks in Remix](/guides/frameworks/remix-webhooks) | Trigger tasks from a webhook in Remix |
| [Stripe webhooks](/guides/examples/stripe-webhook) | Trigger tasks from incoming Stripe webhook events |
## Example projects
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.
| Example project | Description | Framework | GitHub Repo |
| :--------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :---------------------------------------------------------------------------------------------------- |
| [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) |
## Example tasks
Tasks you can copy and paste to get started with Trigger.dev. They can all be extended and customized to fit your needs.
Task code you can copy and paste to use in your project. They can all be extended and customized to fit your needs.
| Example task | Description |
| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
docs/mint.json
+17 -49
View File
@@ -1,10 +1,7 @@
{
"$schema": "https://mintlify.com/schema.json",
"name": "Trigger.dev",
"openapi": [
"/openapi.yml",
"/v3-openapi.yaml"
],
"openapi": ["/openapi.yml", "/v3-openapi.yaml"],
"api": {
"playground": {
"mode": "simple"
@@ -140,30 +137,20 @@
"pages": [
{
"group": "Tasks",
"pages": [
"tasks/overview",
"tasks/schemaTask",
"tasks/scheduled"
]
"pages": ["tasks/overview", "tasks/schemaTask", "tasks/scheduled"]
},
"triggering",
"runs",
"apikeys",
{
"group": "Configuration",
"pages": [
"config/config-file",
"config/extensions/overview"
]
"pages": ["config/config-file", "config/extensions/overview"]
}
]
},
{
"group": "Development",
"pages": [
"cli-dev",
"run-tests"
]
"pages": ["cli-dev", "run-tests"]
},
{
"group": "Deployment",
@@ -173,9 +160,7 @@
"github-actions",
{
"group": "Deployment integrations",
"pages": [
"vercel-integration"
]
"pages": ["vercel-integration"]
}
]
},
@@ -187,13 +172,7 @@
"errors-retrying",
{
"group": "Wait",
"pages": [
"wait",
"wait-for",
"wait-until",
"wait-for-event",
"wait-for-request"
]
"pages": ["wait", "wait-for", "wait-until", "wait-for-event", "wait-for-request"]
},
"queue-concurrency",
"versioning",
@@ -238,10 +217,7 @@
"management/overview",
{
"group": "Tasks API",
"pages": [
"management/tasks/trigger",
"management/tasks/batch-trigger"
]
"pages": ["management/tasks/trigger", "management/tasks/batch-trigger"]
},
{
"group": "Runs API",
@@ -280,9 +256,7 @@
},
{
"group": "Projects API",
"pages": [
"management/projects/runs"
]
"pages": ["management/projects/runs"]
}
]
},
@@ -328,17 +302,11 @@
},
{
"group": "Help",
"pages": [
"community",
"help-slack",
"help-email"
]
"pages": ["community", "help-slack", "help-email"]
},
{
"group": "",
"pages": [
"guides/introduction"
]
"pages": ["guides/introduction"]
},
{
"group": "Frameworks",
@@ -378,6 +346,10 @@
}
]
},
{
"group": "Example projects",
"pages": ["guides/example-projects/realtime-fal-ai"]
},
{
"group": "Example tasks",
"pages": [
@@ -404,15 +376,11 @@
},
{
"group": "Dashboard",
"pages": [
"guides/dashboard/creating-a-project"
]
"pages": ["guides/dashboard/creating-a-project"]
},
{
"group": "Migrations",
"pages": [
"guides/use-cases/upgrading-from-v2"
]
"pages": ["guides/use-cases/upgrading-from-v2"]
}
],
"footerSocials": {
@@ -420,4 +388,4 @@
"github": "https://github.com/triggerdotdev",
"linkedin": "https://www.linkedin.com/company/triggerdotdev"
}
}
}