From ccd56b1a6df8f45dd820013d4bda20390de08743 Mon Sep 17 00:00:00 2001
From: Jason Farber <jason@cloudflare.com>
Date: Thu, 17 Oct 2024 11:55:52 -0400
Subject: [PATCH] Adding a new tutorial about AI Image generation. Updating the
 Stream component so it supports full URL thumbnails. Updating the parameter
 so it's intuitive.

---
 src/components/Stream.astro                   | 22 ++++++++++++------
 .../tutorials/build-a-comments-api/index.mdx  |  2 +-
 .../get-started/video-series/app-frontend.mdx |  2 +-
 .../get-started/video-series/deploy-app.mdx   |  2 +-
 .../video-series/durable-objects.mdx          |  2 +-
 .../get-started/video-series/intro.mdx        |  2 +-
 .../video-series/make-answer-webrtc-calls.mdx |  2 +-
 .../video-series/real-time-messaging.mdx      |  2 +-
 .../video-series/serverless-websocket.mdx     |  2 +-
 .../framework-guides/deploy-a-hono-site.mdx   |  3 +--
 .../index.mdx                                 |  2 +-
 .../docs/style-guide/components/stream.mdx    |  4 ++--
 ...ers-ai-models-using-a-jupyter-notebook.mdx |  2 +-
 .../tutorials/image-generator-flux.mdx        | 23 +++++++++++++++++++
 .../fundamentals/what-is-cloudflare.mdx       |  2 +-
 src/content/videos/index.yaml                 | 15 +++++++++++-
 16 files changed, 66 insertions(+), 23 deletions(-)
 create mode 100644 src/content/docs/workers-ai/tutorials/image-generator-flux.mdx

diff --git a/src/components/Stream.astro b/src/components/Stream.astro
index 415554d9a8e52b..5ff964f85654f5 100644
--- a/src/components/Stream.astro
+++ b/src/components/Stream.astro
@@ -2,10 +2,10 @@
 interface Props {
 	videoId: string;
 	videoTitle: string;
-	thumbnailStartTime: string;
+	thumbnailTimeOrURL: string;
 }
 
-const { videoId, videoTitle, thumbnailStartTime } = Astro.props;
+const { videoId, videoTitle, thumbnailTimeOrURL } = Astro.props;
 
 const customerId = "1mwganm1ma0xgnmj";
 const baseUrl = `https://customer-${customerId}.cloudflarestream.com/`;
@@ -14,11 +14,18 @@ const url = new URL(`${videoId}/iframe`, baseUrl);
 url.searchParams.set("preload", "true");
 url.searchParams.set("letterboxColor", "transparent");
 
-const thumbnailUrl = new URL(`${videoId}/thumbnails/thumbnail.jpg`, baseUrl);
-thumbnailUrl.searchParams.set("fit", "crop");
-thumbnailUrl.searchParams.set("time", thumbnailStartTime);
 
-url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
+// full url option
+if (!thumbnailTimeOrURL.startsWith("http")) {
+	const thumbnailUrl = new URL(`${videoId}/thumbnails/thumbnail.jpg`, baseUrl);
+	thumbnailUrl.searchParams.set("fit", "crop");
+	thumbnailUrl.searchParams.set("time", thumbnailTimeOrURL);
+
+	url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
+} else {
+	url.searchParams.set("poster", thumbnailTimeOrURL);
+}
+
 ---
 
 <div style="position: relative; padding-top: 56.25%">
@@ -28,8 +35,9 @@ url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
 		allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
 		allowfullscreen="true"
 		title={videoTitle}
-		id={videoId}></iframe>
+		id={videoId}></iframe>		
 </div>
+<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank">Watch more videos on our Developer Channel</a>
 <script is:inline src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
 ></script>
 <script is:inline define:vars={{ vidId: videoId, videoTitle }}>
diff --git a/src/content/docs/d1/tutorials/build-a-comments-api/index.mdx b/src/content/docs/d1/tutorials/build-a-comments-api/index.mdx
index aecd315a7a6289..113e93918017b1 100644
--- a/src/content/docs/d1/tutorials/build-a-comments-api/index.mdx
+++ b/src/content/docs/d1/tutorials/build-a-comments-api/index.mdx
@@ -44,7 +44,7 @@ cd d1-example
 <Stream
 	videoId="8d20dd6cf5679f3272ca44a9fa01728c"
 	videoTitle="Build a Comments API with D1"
-	thumbnailStartTime="22s"
+	thumbnailTimeOrURL="22s"
 />
 
 ## 1. Install Hono
diff --git a/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx b/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx
index 9c4a9ad223ed6b..4c700eab62ac02 100644
--- a/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx
@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="efc08fd03da0dfebd2e4402af519acb5"
 	videoTitle="Building the App Frontend and UI"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 Now, we're moving to the frontend. In this video, we'll set up the frontend starter code (the starter code is located in the Veet GitHub repository), connect to Durable Objects using a call room ID, and display a local video preview.
diff --git a/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx b/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx
index 48705cdd2e1517..d527e88abbb8e0 100644
--- a/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx
@@ -15,7 +15,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="aaa652e0e05bc09ac35451d9cbd4b341"
 	videoTitle="Deploy your Video Call app"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 We're almost done with the project, and in this video, we'll add the finishing touches. Learn how to handle call disconnections, wire up essential media controls like muting/unmuting and video toggling, and integrate a TURN server to ensure reliable connections even behind firewalls. By the end of this video, your app will be fully functional and ready for deployment.
diff --git a/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx b/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx
index 892471402008f3..36d3e79181a23e 100644
--- a/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/durable-objects.mdx
@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="fe3a2f97642951e692e86b3af36a4251"
 	videoTitle="What are Durable Objects?"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this video, we will show how Durable Objects work and start building a video call app together.
diff --git a/src/content/docs/durable-objects/get-started/video-series/intro.mdx b/src/content/docs/durable-objects/get-started/video-series/intro.mdx
index bd6fd5b62857a3..2f45db5a629d54 100644
--- a/src/content/docs/durable-objects/get-started/video-series/intro.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/intro.mdx
@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="558cdd841276a1aba1426af6293d6d15"
 	videoTitle="Introduction to Durable Objects"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this episode, we will present an overview of the final project, discuss its underlying architecture, and access resources to set up the project locally.
diff --git a/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx b/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx
index 3fef34c3e69b4a..f407403f6a935b 100644
--- a/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx
@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="3b3a88940d3b1c635dbb6df0516218ab"
 	videoTitle="Make and Answer WebRTC calls"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this video, we'll build on the frontend we set up earlier by adding functionality for making and answering WebRTC video calls. You'll learn how to create peer-to-peer connections, handle ICE candidates, and seamlessly send and receive video streams between users.
diff --git a/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx b/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx
index c2d5ca707f74f0..b6d32518281136 100644
--- a/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx
@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="a02e5f9e58999d96c3ec9dbb0efb9707"
 	videoTitle="Real-time messaging with WebSockets"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 Now, we'll take it a step further by enabling our server to receive and broadcast messages. In this video, you'll learn how to route and broadcast incoming messages from WebSocket connections and implement error handling such as closed WebSocket connections. By the end, you will have completed the backend for our video call app.
diff --git a/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx b/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx
index 0db5aac56e58c9..0d3f5d2cebae51 100644
--- a/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx
+++ b/src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx
@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="86c64a50e0ea53dadd1ea1194bdeda92"
 	videoTitle="Create a Serverless Websocket 'Backend'"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this video, we'll create a WebSocket backend using serverless technology, making the process simpler than ever before. You'll learn how to create your first Durable Object, set up a WebSocket server to coordinate connections, and keep track of connected clients.
diff --git a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx
index 0d957ac1ec385e..12b00473c1f57e 100644
--- a/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx
+++ b/src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx
@@ -161,5 +161,4 @@ For demo applications using Hono and Cloudflare Pages, refer to the following re
 
 ### Creator Interview
 
-<Stream videoId="db240ef1d351915849151242ec0c5f1c" videoTitle="DevTalk Episode 01 Hono" thumbnailStartTime="5s" />
-[Watch more videos on our Developer Channel](https://www.youtube.com/@CloudflareDevelopers)
\ No newline at end of file
+<Stream videoId="db240ef1d351915849151242ec0c5f1c" videoTitle="DevTalk Episode 01 Hono" thumbnailTimeOrURL="5s" />
\ No newline at end of file
diff --git a/src/content/docs/pages/tutorials/build-an-api-with-pages-functions/index.mdx b/src/content/docs/pages/tutorials/build-an-api-with-pages-functions/index.mdx
index 908c1c17427bdc..266345b5c2ebac 100644
--- a/src/content/docs/pages/tutorials/build-an-api-with-pages-functions/index.mdx
+++ b/src/content/docs/pages/tutorials/build-an-api-with-pages-functions/index.mdx
@@ -22,7 +22,7 @@ If you prefer to work with a headless CMS rather than an API to render your blog
 <Stream
 	videoId="2d8bbaa18fbd3ffa859a7fb30e9b3dd1"
 	videoTitle="Build an API With Pages Functions"
-	thumbnailStartTime="29s"
+	thumbnailTimeOrURL="29s"
 />
 
 ## 1. Build your front end
diff --git a/src/content/docs/style-guide/components/stream.mdx b/src/content/docs/style-guide/components/stream.mdx
index 913be95807f10c..ddff5441a84a3d 100644
--- a/src/content/docs/style-guide/components/stream.mdx
+++ b/src/content/docs/style-guide/components/stream.mdx
@@ -8,7 +8,7 @@ import { Stream } from "~/components"
 <Stream
     videoId="3c46281a9b2b84ee6776a53f87580c45"
     videoTitle="Explore Workers AI Models Using a Jupyter Notebook"
-		thumbnailStartTime="2.5s"
+		thumbnailTimeOrURL="2.5s"
 />
 ```
 
@@ -19,5 +19,5 @@ import { Stream } from "~/components"
 <Stream
     videoId="3c46281a9b2b84ee6776a53f87580c45"
     videoTitle="Explore Workers AI Models Using a Jupyter Notebook"
-		thumbnailStartTime="2.5s"
+		thumbnailTimeOrURL="2.5s"
 />
\ No newline at end of file
diff --git a/src/content/docs/workers-ai/tutorials/explore-workers-ai-models-using-a-jupyter-notebook.mdx b/src/content/docs/workers-ai/tutorials/explore-workers-ai-models-using-a-jupyter-notebook.mdx
index 276511993ed32a..b15784913c30af 100644
--- a/src/content/docs/workers-ai/tutorials/explore-workers-ai-models-using-a-jupyter-notebook.mdx
+++ b/src/content/docs/workers-ai/tutorials/explore-workers-ai-models-using-a-jupyter-notebook.mdx
@@ -22,7 +22,7 @@ You can [download the Workers AI notebook](/workers-ai-notebooks/cloudflare-work
 
 Or you can run this on [Google Colab](https://colab.research.google.com/github/craigsdennis/notebooks-cloudflare-workers-ai/blob/main/cloudflare-workers-ai.ipynb)
 
-<Stream videoId="2c60022bea5c8c1b343e76566fed76f2" videoTitle="Explore Workers AI Models Using a Jupyter Notebook" thumbnailStartTime="2.5s" />
+<Stream videoId="2c60022bea5c8c1b343e76566fed76f2" videoTitle="Explore Workers AI Models Using a Jupyter Notebook" thumbnailTimeOrURL="2.5s" />
 
 [comment]: <> "The markdown below is auto-generated from https://github.com/craigsdennis/notebooks-cloudflare-workers-ai the <audio> tag is hard coded"
 
diff --git a/src/content/docs/workers-ai/tutorials/image-generator-flux.mdx b/src/content/docs/workers-ai/tutorials/image-generator-flux.mdx
new file mode 100644
index 00000000000000..4f1def7c6caf4d
--- /dev/null
+++ b/src/content/docs/workers-ai/tutorials/image-generator-flux.mdx
@@ -0,0 +1,23 @@
+---
+updated: 2024-10-17
+difficulty: Beginner
+content_type: 🎥 Video
+pcx_content_type: tutorial
+title: How to build an Image Generator using Workers AI
+products:
+  - Workers
+tags:
+  - AI
+  - Workers
+languages:
+  - Typescript
+
+---
+
+import { Stream } from "~/components"
+
+The new flux models on Workers AI are our most powerful text to image AI models yet. In this video, we show you how to deploy your own Workers AI image playground in just a few minutes.
+
+There are many businesses being built on top of AI image generation models and using Workers AI, you can get access to the best models in the industry without having to worry about inference, ops, or deployment. We provide the API for AI image generation and in a couple of seconds get an image back.
+
+<Stream videoId="aeafae151e84a81be19c52c2348e9bab" videoTitle="How to build an AI Image Generator using Cloudflare Workers AI" thumbnailTimeOrURL="1.95s" />
diff --git a/src/content/partials/fundamentals/what-is-cloudflare.mdx b/src/content/partials/fundamentals/what-is-cloudflare.mdx
index 3613474798dd43..8d82d353fe3897 100644
--- a/src/content/partials/fundamentals/what-is-cloudflare.mdx
+++ b/src/content/partials/fundamentals/what-is-cloudflare.mdx
@@ -5,7 +5,7 @@
 
 import { Stream } from "~/components"
 
-<Stream videoId="bdf5733bed92deded731efee29b2346f" videoTitle="What is Cloudflare?" thumbnailStartTime="38s" />
+<Stream videoId="bdf5733bed92deded731efee29b2346f" videoTitle="What is Cloudflare?" thumbnailTimeOrURL="38s" />
 
 Cloudflare is one of the world’s largest [connectivity cloud networks](https://blog.cloudflare.com/welcome-to-connectivity-cloud). Today, anyone with an Internet presence can have faster and more secure websites and applications thanks to Cloudflare. This includes bloggers, businesses, and even non-profits.
 
diff --git a/src/content/videos/index.yaml b/src/content/videos/index.yaml
index 46d1422b8120dc..c825dc83543b9f 100644
--- a/src/content/videos/index.yaml
+++ b/src/content/videos/index.yaml
@@ -208,7 +208,7 @@ entries:
     difficulty: Beginner
     content_type: 🎥 Video
     pcx_content_type: tutorial    
-  - link: http://localhost:1111/pages/framework-guides/deploy-a-hono-site/#creator-interview
+  - link: https://developers.cloudflare.com/pages/framework-guides/deploy-a-hono-site/#creator-interview
     title: DevTalk | Episode 01 - Yusuke Wada, creator of Hono Framework
     description: In this interview, Yusuke Wada reflects on his journey in developing Hono.
     tags: [Pages, Workers]
@@ -220,3 +220,16 @@ entries:
     difficulty: Beginner
     content_type: 🎥 Video
     pcx_content_type: interview    
+  - link: https://developers.cloudflare.com/workers-ai/tutorials/image-generator-flux/
+    title: How to build an AI Image Generator using Cloudflare Workers AI
+    description: The new flux-schnell models on Workers AI are our most powerful text to image AI models yet. In this video, we show you how to deploy your own Workers AI image playground.
+    tags: [Workers, Workers AI]
+    languages: [TypeScript]
+    stream_id: aeafae151e84a81be19c52c2348e9bab
+    products: [Workers, Workers AI]
+    cloudflare: true
+    author: kristian
+    updated: 2024-10-17
+    difficulty: Intermediate
+    content_type: 🎥 Video
+    pcx_content_type: tutorial