From 5d303ce6f2b96e0f2f151c72d5eba64db04cd8e9 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Wed, 13 Nov 2024 13:45:47 +0000
Subject: [PATCH] New Realtime example added to docs

---
 .../examples/fal-ai-image-to-cartoon.mdx      | 25 ++++---
 docs/guides/examples/fal-ai-realtime.mdx      | 72 +++++++++++++++++++
 docs/mint.json                                |  1 +
 docs/video-walkthrough.mdx                    |  4 +-
 4 files changed, 90 insertions(+), 12 deletions(-)
 create mode 100644 docs/guides/examples/fal-ai-realtime.mdx

diff --git a/docs/guides/examples/fal-ai-image-to-cartoon.mdx b/docs/guides/examples/fal-ai-image-to-cartoon.mdx
index 12794e42c..681fbefd9 100644
--- a/docs/guides/examples/fal-ai-image-to-cartoon.mdx
+++ b/docs/guides/examples/fal-ai-image-to-cartoon.mdx
@@ -1,22 +1,27 @@
 ---
-title: "Convert an image to a cartoon using fal AI"
-sidebarTitle: "fal AI image to cartoon"
-description: "This example demonstrates how to convert an image to a cartoon using fal AI with Trigger.dev."
+title: "Convert an image to a cartoon using Fal.ai"
+sidebarTitle: "Fal.ai image to cartoon"
+description: "This example task generates an image from a URL using Fal.ai and uploads it to Cloudflare R2."
 ---
 
-## Overview
+## Walkthrough
 
-Fal AI is a platform that provides access to advanced AI models for tasks such as image generation, text summarization, and hyperparameter tuning.
+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/AyRT4X8dHK0?si=ugA172V_3TMjik9h" 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
 
-- A project with [Trigger.dev initialized](/quick-start)
-- A [fal AI](https://fal.ai/) account
-- A [Cloudflare](https://developers.cloudflare.com/r2/) account and bucket
+- 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
+- A [Cloudflare](https://developers.cloudflare.com/r2/) account with an R2 bucket setup
 
 ## 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, and uploads the result to Cloudflare R2.
 
 ```ts trigger/fal-ai-image-to-cartoon.ts
 import { logger, task } from "@trigger.dev/sdk/v3";
@@ -27,7 +32,7 @@ import { z } from "zod";
 
 // Initialize fal.ai client
 fal.config({
-  credentials: process.env.FAL_KEY, // Get this from your fal AI dashboard
+  credentials: process.env.FAL_KEY, // Get this from your fal.ai dashboard
 });
 
 // Initialize S3-compatible client for Cloudflare R2
diff --git a/docs/guides/examples/fal-ai-realtime.mdx b/docs/guides/examples/fal-ai-realtime.mdx
new file mode 100644
index 000000000..45af7eaf5
--- /dev/null
+++ b/docs/guides/examples/fal-ai-realtime.mdx
@@ -0,0 +1,72 @@
+---
+title: "Convert an image to a cartoon using Fal.ai and Trigger.dev Realtime"
+sidebarTitle: "Fal.ai with Realtime"
+description: "This example demonstrates how to convert an image to a cartoon 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/>
+</div>
+
+## Prerequisites
+
+- 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
+
+## Task code
+
+This task converts an image to a cartoon using fal AI, and uploads the result to Cloudflare R2.
+
+```ts trigger/fal-ai-image-from-prompt-realtime.ts
+import * as fal from "@fal-ai/serverless-client";
+import { logger, schemaTask } from "@trigger.dev/sdk/v3";
+import { z } from "zod";
+
+export const FalResult = z.object({
+  images: z.tuple([z.object({ url: z.string() })]),
+});
+
+export const payloadSchema = z.object({
+  imageUrl: z.string().url(),
+  prompt: z.string(),
+});
+
+export const realtimeImageGeneration = schemaTask({
+  id: "realtime-image-generation",
+  schema: payloadSchema,
+  run: async (payload) => {
+    const result = await fal.subscribe("fal-ai/flux/dev/image-to-image", {
+      input: {
+        image_url: payload.imageUrl,
+        prompt: payload.prompt,
+      },
+      onQueueUpdate: (update) => {
+        logger.info("Fal.ai processing update", { update });
+      },
+    });
+
+    const $result = FalResult.parse(result);
+    const [{ url: cartoonUrl }] = $result.images;
+
+    return {
+      imageUrl: cartoonUrl,
+    };
+  },
+});
+```
+
+### Testing your task
+
+You can test your task by triggering it from the Trigger.dev dashboard. Here's an example payload:
+
+```json
+{
+  "imageUrl": "https://static.vecteezy.com/system/resources/previews/005/857/332/non_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
+  "prompt": "Dress this dog for Christmas"
+}
+```
diff --git a/docs/mint.json b/docs/mint.json
index ce247ea8f..364ff188e 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -337,6 +337,7 @@
         "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",
         "guides/examples/open-ai-with-retrying",
diff --git a/docs/video-walkthrough.mdx b/docs/video-walkthrough.mdx
index c90f66af2..c26e08f25 100644
--- a/docs/video-walkthrough.mdx
+++ b/docs/video-walkthrough.mdx
@@ -11,6 +11,6 @@ description: "Go from zero to a working task in your Next.js app in 10 minutes."
 
 - [0:00](https://youtu.be/YH_4c0K7fGM?si=J8svVzotZtyTXDap&t=0) – [Install Trigger.dev](/quick-start) in an existing Next.js project
 - [1:44](https://youtu.be/YH_4c0K7fGM?si=J8svVzotZtyTXDap&t=104) – [Run and test](/run-tests) the "Hello, world!" example project
-- [2:09](https://youtu.be/YH_4c0K7fGM?si=FMTP8ep_cDBCU0_x&t=128) – Create and run an AI image generation task that uses [Fal.ai](https://fal.ai)
-- [6:25](https://youtu.be/YH_4c0K7fGM?si=pPc8iLI2Y9FGD3yo&t=385) – Create and run a [Trigger.dev Realtime](/realtime/overview) example using [Trigger.dev React hooks](/frontend/react-hooks)
+- [2:09](https://youtu.be/YH_4c0K7fGM?si=FMTP8ep_cDBCU0_x&t=128) – Create and run an AI image generation task that uses [Fal.ai](https://fal.ai) – ([View the code](/guides/examples/fal-ai-image-to-cartoon))
+- [6:25](https://youtu.be/YH_4c0K7fGM?si=pPc8iLI2Y9FGD3yo&t=385) – Create and run a [Realtime](/realtime/overview) example using [React hooks](/frontend/react-hooks) – ([View the code](/guides/examples/fal-ai-image-to-cartoon-realtime))
 - [11:10](https://youtu.be/YH_4c0K7fGM?si=Mjd0EvvNsNlVouvY&t=670) – [Deploy your task](/cli-deploy) to the Trigger.dev Cloud