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

@@ -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 }}>

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

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.

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.

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.

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.

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.

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.

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.

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)
+<Stream videoId="db240ef1d351915849151242ec0c5f1c" videoTitle="DevTalk Episode 01 Hono" thumbnailTimeOrURL="5s" />

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

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"
 />

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"
 

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" />

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.
 

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