Skip to content

Commit 95ecf20

Browse files
jason-cfhyperlint-ai[bot]Oxyjun
authored
Video updates (#18204)
* adding open ai relay and devtalk episode 2 to tutorial list * adding workers rpc to docs * add support for removing text beneath each video pointing to YT * moving nextjs video to static asset frameworks * image generation updates * static assets home page update * updating video list. adding back the react video that was removed from the pages frameworks page * Update src/content/docs/workers-ai/tutorials/image-generation-playground/image-generator-flux-newmodels.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * Update src/content/docs/workers/runtime-apis/rpc/index.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * Update src/content/docs/workers-ai/tutorials/image-generation-playground/image-generator-flux.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Jun Lee <[email protected]> * updating thumbnail timestamps * conflict resolution * removing duplicate listing --------- Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> Co-authored-by: Jun Lee <[email protected]>
1 parent 236fffb commit 95ecf20

File tree

9 files changed

+158
-30
lines changed

9 files changed

+158
-30
lines changed

‎src/components/Stream.astro‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ interface Props {
33
videoId: string;
44
videoTitle: string;
55
thumbnailTimeOrURL: string;
6+
moreVideosLink: string;
67
}
78
8-
const { videoId, videoTitle, thumbnailTimeOrURL } = Astro.props;
9+
const { videoId, videoTitle, thumbnailTimeOrURL, moreVideosLink="true" } = Astro.props;
910
1011
const customerId = "1mwganm1ma0xgnmj";
1112
const baseUrl = `https://customer-${customerId}.cloudflarestream.com/`;
@@ -40,9 +41,11 @@ if (thumbnailTimeOrURL !== undefined) {
4041
title={videoTitle}
4142
id={videoId}></iframe>
4243
</div>
43-
<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank"
44-
>Watch more videos on our Developer Channel</a
45-
>
44+
45+
{moreVideosLink=="true" &&
46+
<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank">Watch more videos on our Developer Channel</a>
47+
}
48+
4649
<script is:inline src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
4750
></script>
4851
<script is:inline define:vars={{ vidId: videoId, videoTitle }}>

‎src/content/docs/pages/framework-guides/nextjs/index.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,4 @@ import { DirectoryListing, Stream } from "~/components"
1111

1212
[Next.js](https://nextjs.org) is an open-source React framework for creating websites and applications.
1313

14-
<DirectoryListing />
15-
16-
### Video Tutorial
17-
18-
<Stream videoId="0b28fdd5938c4929bd7fdedcd167044d" videoTitle="Deploy NextJS to your Workers Application" thumbnailTimeOrURL="2.5s" />
14+
<DirectoryListing />

‎src/content/docs/workers-ai/tutorials/image-generation-playground/image-generator-flux-newmodels.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
updated: 2024-10-17
3+
difficulty: Beginner
4+
content_type: 🎥 Video
5+
pcx_content_type: video
6+
title: Add New AI Models to your Playground (Part 2)
7+
sidebar:
8+
order: 2
9+
products:
10+
- Workers
11+
tags:
12+
- AI
13+
- Workers
14+
languages:
15+
- Typescript
16+
prev: true
17+
18+
---
19+
20+
import { Details, DirectoryListing, Stream } from "~/components"
21+
22+
In part 2, Kristian expands upon the existing environment built in part 1, by showing you how to integrate new AI models and introduce new parameters that allow you to customize how images are generated.
23+
24+
<Stream videoId="167ba3a7a86f966650f3315e6cb02e0d" videoTitle="Add New AI Models to your Playground (Part 2)" thumbnailTimeOrURL="13.5s" moreVideosLink="false" />
25+
26+
Refer to the AI Image Playground [GitHub repository](https://github.com/kristianfreeman/workers-ai-image-playground) to follow along locally.
27+
28+
<Details header="Video series" open>
29+
30+
<DirectoryListing folder="workers-ai/tutorials/image-generation-playground" />
31+
32+
</Details>

‎src/content/docs/workers-ai/tutorials/image-generation-playground/image-generator-flux.mdx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
updated: 2024-10-17
3+
difficulty: Beginner
4+
content_type: 🎥 Video
5+
pcx_content_type: video
6+
title: Build an AI Image Generator Playground (Part 1)
7+
tableOfContents: false
8+
sidebar:
9+
order: 1
10+
products:
11+
- Workers
12+
tags:
13+
- AI
14+
- Workers
15+
languages:
16+
- Typescript
17+
next: true
18+
19+
---
20+
21+
import { Details, DirectoryListing, Stream } from "~/components"
22+
23+
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.
24+
25+
There are many businesses being built on top of AI image generation models. 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.
26+
27+
<Stream videoId="aeafae151e84a81be19c52c2348e9bab" videoTitle="Build an AI Image Generator Playground (Part 1)" thumbnailTimeOrURL="2.5s" moreVideosLink="false" />
28+
29+
Refer to the AI Image Playground [GitHub repository](https://github.com/kristianfreeman/workers-ai-image-playground) to follow along locally.
30+
31+
<Details header="Video series" open>
32+
33+
<DirectoryListing folder="workers-ai/tutorials/image-generation-playground" />
34+
35+
</Details>

‎src/content/docs/workers-ai/tutorials/image-generator-flux.mdx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ languages:
1414

1515
---
1616

17-
import { Stream } from "~/components"
17+
import { Details, DirectoryListing, Stream } from "~/components"
1818

19-
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.
19+
In this series of videos, Kristian Freeman builds an AI Image Playground. To get started, click on part 1 below.
2020

21-
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.
21+
<Details header="Video Series" open>
2222

23-
<Stream videoId="aeafae151e84a81be19c52c2348e9bab" videoTitle="How to build an AI Image Generator using Cloudflare Workers AI" thumbnailTimeOrURL="1.95s" />
23+
<DirectoryListing folder="workers-ai/tutorials/image-generation-playground" />
24+
25+
</Details>

‎src/content/docs/workers/frameworks/framework-guides/nextjs.mdx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
InlineBadge,
1212
Render,
1313
PackageManagers,
14+
Stream,
1415
} from "~/components";
1516

1617
## New apps
@@ -32,6 +33,10 @@ To create a new Next.js app, pre-configured to run on Cloudflare using [`@openne
3233
}}
3334
/>
3435

36+
## Video Tutorial
37+
38+
<Stream videoId="0b28fdd5938c4929bd7fdedcd167044d" videoTitle="Deploy NextJS to Your Workers Application" thumbnailTimeOrURL="2.5s" />
39+
3540
## Existing Next.js apps
3641

3742
:::note[Minimum required Wrangler version: 3.78.10.]

‎src/content/docs/workers/runtime-apis/rpc/index.mdx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ description: The built-in, JavaScript-native RPC system built into Workers and
77

88
---
99

10-
import { DirectoryListing, Render } from "~/components"
10+
import { DirectoryListing, Render, Stream } from "~/components"
1111

1212
:::note
1313
To use RPC, [define a compatibility date](/workers/configuration/compatibility-dates) of `2024-04-03` or higher, or include `rpc` in your [compatibility flags](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag).
@@ -230,6 +230,12 @@ In this way, the introducer Worker can connect two Workers that did not otherwis
230230

231231
Currently, this proxying only lasts until the end of the Workers' execution contexts. A proxy connection cannot be persisted for later use.
232232

233+
## Video Tutorial
234+
235+
In this video, we explore how Cloudflare Workers support Remote Procedure Calls (RPC) to simplify communication between Workers. Learn how to implement RPC in your JavaScript applications and build serverless solutions with ease. Whether you're managing microservices or optimizing web architecture, this tutorial will show you how to quickly set up and use Cloudflare Workers for RPC calls. By the end of this video, you'll understand how to call functions between Workers, pass functions as arguments, and implement user authentication with Cloudflare Workers.
236+
237+
<Stream videoId="d506935b6767fd07626adbec46d41e6d" videoTitle="Introduction to Workers RPC" thumbnailTimeOrURL="2.5s" />
238+
233239
## More Details
234240

235241
<DirectoryListing />

‎src/content/docs/workers/static-assets/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ import {
1919
Tabs,
2020
Feature,
2121
LinkButton,
22+
Stream,
23+
Flex,
2224
} from "~/components";
2325

2426
<Description>

‎src/content/videos/index.yaml‎

Lines changed: 63 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -220,19 +220,6 @@ entries:
220220
difficulty: Beginner
221221
content_type: 🎥 Video
222222
pcx_content_type: interview
223-
- link: https://developers.cloudflare.com/workers-ai/tutorials/image-generator-flux/
224-
title: How to build an AI Image Generator using Cloudflare Workers AI
225-
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.
226-
tags: [Workers, Workers AI]
227-
languages: [TypeScript]
228-
stream_id: aeafae151e84a81be19c52c2348e9bab
229-
products: [Workers, Workers AI]
230-
cloudflare: true
231-
author: kristian
232-
updated: 2024-10-17
233-
difficulty: Intermediate
234-
content_type: 🎥 Video
235-
pcx_content_type: tutorial
236223
- link: https://youtu.be/W45MIi_t_go
237224
title: Building Front-End Applications | Now Supported by Cloudflare Workers
238225
description: You can now build front-end applications, just like you do on Cloudflare Pages, but with the added benefit of Workers.
@@ -298,8 +285,8 @@ entries:
298285
difficulty: Intermediate
299286
content_type: 🎥 Video
300287
pcx_content_type: tutorial
301-
- link: https://developers.cloudflare.com/pages/framework-guides/nextjs/#video-tutorial
302-
title: Deploy NextJS to your Workers Application
288+
- link: https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs/#video-tutorial
289+
title: Deploy NextJS to your Workers Application
303290
description: Watch to learn how to easily deploy your NextJS application to the Cloudflare global network.
304291
tags: [NextJS, Workers, Pages]
305292
languages: [TypeScript]
@@ -323,4 +310,64 @@ entries:
323310
updated: 2024-10-31
324311
difficulty: Intermediate
325312
content_type: 🎥 Video
326-
pcx_content_type: tutorial
313+
pcx_content_type: tutorial
314+
- link: https://youtu.be/RmF05GpLE20
315+
title: DevTalk Episode 02 | Post-Quantum Cryptography
316+
description: Bas Westerbaan is Cloudflare’s Research Lead on Post-Quantum efforts. His work ranges from cryptographic implementation and standardization, to driving large-scale experiment and subsequent deployment.
317+
tags: [SSL]
318+
languages: [TypeScript]
319+
products: [SSL]
320+
cloudflare: true
321+
author: bas
322+
updated: 2024-11-14
323+
difficulty: Beginner
324+
content_type: 🎥 Video
325+
pcx_content_type: tutorial
326+
- link: https://youtu.be/xu4Wb-IppmM
327+
title: OpenAI Relay Server on Cloudflare Workers
328+
description: In this video, Craig Dennis walks you through the deployment of OpenAI's relay server to use with their realtime API.
329+
tags: [Workers, Workers AI, Pages]
330+
languages: [TypeScript]
331+
products: [Workers, Workers AI, Pages]
332+
cloudflare: true
333+
author: craig
334+
updated: 2024-11-14
335+
difficulty: Intermediate
336+
content_type: 🎥 Video
337+
pcx_content_type: tutorial
338+
- link: https://developers.cloudflare.com/workers/runtime-apis/rpc/#video-tutorial
339+
title: Workers RPC Tutorial
340+
description: Learn how to implement RPC in your JavaScript applications and build serverless solutions.
341+
tags: [Workers, Pages]
342+
languages: [TypeScript]
343+
products: [Workers, Pages]
344+
cloudflare: true
345+
author: confidence
346+
updated: 2024-11-10
347+
difficulty: Beginner
348+
content_type: 🎥 Video
349+
pcx_content_type: tutorial
350+
- link: https://youtu.be/B2bLUc3iOsI
351+
title: Deploy your React App to Cloudflare Workers
352+
description: Learn how to deploy an existing React application to Cloudflare Workers.
353+
tags: [Workers, Pages]
354+
languages: [TypeScript]
355+
products: [Workers, Pages]
356+
cloudflare: true
357+
author: confidence
358+
updated: 2024-11-05
359+
difficulty: Intermediate
360+
content_type: 🎥 Video
361+
pcx_content_type: tutorial
362+
# - link:
363+
# title:
364+
# description:
365+
# tags: [Workers, Pages]
366+
# languages: [TypeScript]
367+
# products: [Workers, Pages]
368+
# cloudflare: true
369+
# author: confidence
370+
# updated: 2024-11-14
371+
# difficulty: Intermediate
372+
# content_type: 🎥 Video
373+
# pcx_content_type: tutorial

0 commit comments

Comments
 (0)