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

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Adding example projects #1564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 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
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
39 changes: 32 additions & 7 deletions docs/guides/examples/fal-ai-realtime.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,51 @@
---
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."
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."
---

## Walkthrough

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
## Tech stack

- 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
- Next.js using the App Router for the frontend
- Trigger tasks from the frontend using our [React hooks](/frontend/react-hooks)
- [Trigger.dev Realtime](/realtime/overview) to stream updates to the frontend
- [Trigger.dev](https://cloud.trigger.dev) for task processing
- [Fal.ai](https://fal.ai/) for AI image generation

Comment on lines +26 to +31
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

Tech stack should specify minimum version requirements

Based on the package.json from the reference implementation, here are the minimum version requirements that should be added:

  • Next.js 14.x or later
  • @trigger.dev/react-hooks 3.x
  • @trigger.dev/sdk 3.x
  • @fal-ai/serverless-client 0.15.x or later
🔗 Analysis chain

Tech stack section needs version requirements

The tech stack section should specify minimum version requirements for critical dependencies.

Let's check the package.json in the demo repo for version requirements:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check package.json for dependency versions
gh api repos/triggerdotdev/nextjs-realtime-fal-demo/contents/package.json | jq -r '.content' | base64 -d | jq '.dependencies'

Length of output: 220

Script:

#!/bin/bash
# Let's try searching for package.json files in the repository
fd "package.json" --type f --exec cat {}

Length of output: 62589

Script:

#!/bin/bash
# Let's check the demo repository directly for version requirements
fd "package.json" --type f --exec rg -l "next|@trigger.dev/react-hooks|@trigger.dev/sdk|fal-ai" {}

Length of output: 827

Script:

#!/bin/bash
# Let's examine the nextjs-realtime reference project's package.json for specific versions
rg -A 10 "\"dependencies\":|\"devDependencies\":" "./references/nextjs-realtime/package.json"

Length of output: 810

<Note>You will need all of these services to run this project.</Note>

## GitHub Repo

Check out and fork the full code in our [nextjs-realtime-fal-demo repo
](https://github.com/triggerdotdev/nextjs-realtime-fal-demo).

<Note>
To run the project and tasks locally, add your API keys to an `.env` file, and update the project
ID in the `trigger.config.ts` file to your project ID. To run the project in production, set the
`TRIGGER_API_KEY` environment variable to your project API key, and update the environment
variables in the Trigger.dev dashboard.
</Note>

## Task code

This task converts an image to a cartoon using fal AI, and uploads the result to Cloudflare R2.
This task converts an image to a cartoon using fal AI.

```ts trigger/fal-ai-image-from-prompt-realtime.ts
import * as fal from "@fal-ai/serverless-client";
Expand Down
14 changes: 11 additions & 3 deletions docs/guides/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,24 @@ 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 |
| :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :-------- | :------------------------------------------------------------------------- |
| [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) |
| [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) |
| [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 |

## 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 |
| :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
| [DALL·E 3 image generation](/guides/examples/dall-e3-generate-image) | Use OpenAI's GPT-4o and DALL·E 3 to generate an image and text. |
| [Deepgram audio transcription](/guides/examples/deepgram-transcribe-audio) | Transcribe audio using Deepgram's speech recognition API. |
| [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. |
| [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. |
| [FFmpeg video processing](/guides/examples/ffmpeg-video-processing) | Use FFmpeg to process a video in various ways and save it to Cloudflare R2. |
| [Firecrawl URL crawl](/guides/examples/firecrawl-url-crawl) | Learn how to use Firecrawl to crawl a URL and return LLM-ready markdown. |
| [LibreOffice PDF conversion](/guides/examples/libreoffice-pdf-conversion) | Convert a document to PDF using LibreOffice. |
Expand Down
4 changes: 4 additions & 0 deletions docs/mint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,6 +378,10 @@
}
]
},
{
"group": "Example projects",
"pages": ["guides/examples/fal-ai-image-to-cartoon", "guides/examples/fal-ai-realtime"]
},
Comment on lines +381 to +384
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Remove duplicate entries from "Example tasks" section

The files "fal-ai-image-to-cartoon" and "fal-ai-realtime" appear in both "Example projects" and "Example tasks" sections. They should only appear in "Example projects" since they've been reclassified.

     {
       "group": "Example tasks",
       "pages": [
         "guides/examples/dall-e3-generate-image",
         "guides/examples/deepgram-transcribe-audio",
-        "guides/examples/fal-ai-image-to-cartoon",
-        "guides/examples/fal-ai-realtime",
         "guides/examples/ffmpeg-video-processing",
         "guides/examples/firecrawl-url-crawl",

Committable suggestion skipped: line range outside the PR's diff.

{
"group": "Example tasks",
"pages": [
Expand Down
Loading