Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding example projects #1564

Merged
merged 8 commits into from
Jan 3, 2025
Merged

Adding example projects #1564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0fa7277
Added new side menu section and updated intro
D-K-P Dec 13, 2024
039e703
Updated the fal ai realtime project
D-K-P Dec 13, 2024
008ab68
Copy update
D-K-P Dec 13, 2024
b0ba355
Merge branch 'main' into docs/example-projects
D-K-P Jan 3, 2025
a7acc43
Added example project
D-K-P Jan 3, 2025
13e3ec4
Swapped walkthrough and repo
D-K-P Jan 3, 2025
d50d4f4
Restore original fal task page
D-K-P Jan 3, 2025
c11c8a4
Added links back to the intro
D-K-P Jan 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions docs/guides/example-projects/realtime-fal-ai.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Comment on lines +11 to +13
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Based on the verification results, I can now provide the final response:

Documentation links need to be updated - referenced example files not found

The documentation references code files in the examples repository that appear to be missing. None of the following referenced files could be found:

  • realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts
  • realtime-fal-ai-image-generation/src/app/page.tsx
  • realtime-fal-ai-image-generation/src/app/actions/process-image.ts
  • realtime-fal-ai-image-generation/src/app/processing/[id]/ProcessingContent.tsx

Please either:

  1. Update the documentation to point to the correct file locations, or
  2. Add the missing example files to the examples repository
🔗 Analysis chain

Verify the existence of referenced code files

Let's ensure all the linked files exist in the examples repository:

Let me try a different approach to verify the files using fd command which is available in the sandbox environment.

Let me try one more verification with a slightly different approach:

Let me try one more verification by checking the actual repository content:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify that all referenced code files exist in the examples repository

# Clone the examples repository to a temporary directory
git clone https://github.com/triggerdotdev/examples.git /tmp/examples
cd /tmp/examples

# Check each referenced file
files=(
  "realtime-fal-ai-image-generation/src/trigger/realtime-generate-image.ts"
  "realtime-fal-ai-image-generation/src/app/page.tsx"
  "realtime-fal-ai-image-generation/src/app/actions/process-image.ts"
  "realtime-fal-ai-image-generation/src/app/processing/[id]/ProcessingContent.tsx"
)

for file in "${files[@]}"; do
  if [ ! -f "$file" ]; then
    echo "Missing file: $file"
  fi
done

Length of output: 918

Script:

#!/bin/bash
# Search for the specific files in the repository
echo "Searching for realtime-generate-image.ts:"
fd "realtime-generate-image.ts$" --type f

echo -e "\nSearching for page.tsx in realtime-fal-ai-image-generation:"
fd "page.tsx$" --type f --glob "*realtime-fal-ai*"

echo -e "\nSearching for process-image.ts:"
fd "process-image.ts$" --type f

echo -e "\nSearching for ProcessingContent.tsx:"
fd "ProcessingContent.tsx$" --type f

Length of output: 670

Script:

#!/bin/bash
# List all files in the repository to understand the structure
echo "Listing all TypeScript/TSX files:"
fd -e ts -e tsx

Length of output: 73556

Script:

#!/bin/bash
# Check the content of the repository to find the example files
echo "Checking repository content:"
fd -t f -p "realtime-fal-ai-image-generation"

Length of output: 112

- 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>
13 changes: 11 additions & 2 deletions docs/guides/examples/fal-ai-realtime.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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";
Expand Down
10 changes: 9 additions & 1 deletion docs/guides/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down
66 changes: 17 additions & 49 deletions docs/mint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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",
Expand All @@ -173,9 +160,7 @@
"github-actions",
{
"group": "Deployment integrations",
"pages": [
"vercel-integration"
]
"pages": ["vercel-integration"]
}
]
},
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -280,9 +256,7 @@
},
{
"group": "Projects API",
"pages": [
"management/projects/runs"
]
"pages": ["management/projects/runs"]
}
]
},
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -378,6 +346,10 @@
}
]
},
{
"group": "Example projects",
"pages": ["guides/example-projects/realtime-fal-ai"]
},
{
"group": "Example tasks",
"pages": [
Expand All @@ -404,20 +376,16 @@
},
{
"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": {
"twitter": "https://twitter.com/triggerdotdev",
"github": "https://github.com/triggerdotdev",
"linkedin": "https://www.linkedin.com/company/triggerdotdev"
}
}
}
Loading