Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
11 changes: 7 additions & 4 deletions src/components/Stream.astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ interface Props {
videoId: string;
videoTitle: string;
thumbnailTimeOrURL: string;
moreVideosLink: string;
}

const { videoId, videoTitle, thumbnailTimeOrURL } = Astro.props;
const { videoId, videoTitle, thumbnailTimeOrURL, moreVideosLink="true" } = Astro.props;

const customerId = "1mwganm1ma0xgnmj";
const baseUrl = `https://customer-${customerId}.cloudflarestream.com/`;
Expand Down Expand Up @@ -40,9 +41,11 @@ if (thumbnailTimeOrURL !== undefined) {
title={videoTitle}
id={videoId}></iframe>
</div>
<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank"
>Watch more videos on our Developer Channel</a
>

{moreVideosLink=="true" &&
<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 }}>
Expand Down
6 changes: 1 addition & 5 deletions src/content/docs/pages/framework-guides/nextjs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,4 @@ import { DirectoryListing, Stream } from "~/components"

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

<DirectoryListing />

### Video Tutorial

<Stream videoId="0b28fdd5938c4929bd7fdedcd167044d" videoTitle="Deploy NextJS to your Workers Application" thumbnailTimeOrURL="2.5s" />
<DirectoryListing />
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
updated: 2024-10-17
difficulty: Beginner
content_type: 🎥 Video
pcx_content_type: video
title: Add New AI Models to your Playground (Part 2)
sidebar:
order: 2
products:
- Workers
tags:
- AI
- Workers
languages:
- Typescript
prev: true

---

import { Details, DirectoryListing, Stream } from "~/components"

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.

<Stream videoId="167ba3a7a86f966650f3315e6cb02e0d" videoTitle="Add New AI Models to your Playground (Part 2)" thumbnailTimeOrURL="13.5s" moreVideosLink="false" />

Refer to the AI Image Playground [GitHub repository](https://github.com/kristianfreeman/workers-ai-image-playground) to follow along locally.

<Details header="Video series" open>

<DirectoryListing folder="workers-ai/tutorials/image-generation-playground" />

</Details>
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
---
updated: 2024-10-17
difficulty: Beginner
content_type: 🎥 Video
pcx_content_type: video
title: Build an AI Image Generator Playground (Part 1)
tableOfContents: false
sidebar:
order: 1
products:
- Workers
tags:
- AI
- Workers
languages:
- Typescript
next: true

---

import { Details, DirectoryListing, 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. 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="Build an AI Image Generator Playground (Part 1)" thumbnailTimeOrURL="2.5s" moreVideosLink="false" />

Refer to the AI Image Playground [GitHub repository](https://github.com/kristianfreeman/workers-ai-image-playground) to follow along locally.

<Details header="Video series" open>

<DirectoryListing folder="workers-ai/tutorials/image-generation-playground" />

</Details>
10 changes: 6 additions & 4 deletions src/content/docs/workers-ai/tutorials/image-generator-flux.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@ languages:

---

import { Stream } from "~/components"
import { Details, DirectoryListing, 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.
In this series of videos, Kristian Freeman builds an AI Image Playground. To get started, click on part 1 below.

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

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

</Details>
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
InlineBadge,
Render,
PackageManagers,
Stream,
} from "~/components";

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

## Video Tutorial

<Stream videoId="0b28fdd5938c4929bd7fdedcd167044d" videoTitle="Deploy NextJS to Your Workers Application" thumbnailTimeOrURL="2.5s" />

## Existing Next.js apps

:::note[Minimum required Wrangler version: 3.78.10.]
Expand Down
8 changes: 7 additions & 1 deletion src/content/docs/workers/runtime-apis/rpc/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: The built-in, JavaScript-native RPC system built into Workers and

---

import { DirectoryListing, Render } from "~/components"
import { DirectoryListing, Render, Stream } from "~/components"

:::note
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).
Expand Down Expand Up @@ -230,6 +230,12 @@ In this way, the introducer Worker can connect two Workers that did not otherwis

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

## Video Tutorial

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.

<Stream videoId="d506935b6767fd07626adbec46d41e6d" videoTitle="Introduction to Workers RPC" thumbnailTimeOrURL="2.5s" />

## More Details

<DirectoryListing />
Expand Down
2 changes: 2 additions & 0 deletions src/content/docs/workers/static-assets/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import {
Tabs,
Feature,
LinkButton,
Stream,
Flex,
} from "~/components";

<Description>
Expand Down
79 changes: 63 additions & 16 deletions src/content/videos/index.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -220,19 +220,6 @@ 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
- link: https://youtu.be/W45MIi_t_go
title: Building Front-End Applications | Now Supported by Cloudflare Workers
description: You can now build front-end applications, just like you do on Cloudflare Pages, but with the added benefit of Workers.
Expand Down Expand Up @@ -298,8 +285,8 @@ entries:
difficulty: Intermediate
content_type: 🎥 Video
pcx_content_type: tutorial
- link: https://developers.cloudflare.com/pages/framework-guides/nextjs/#video-tutorial
title: Deploy NextJS to your Workers Application
- link: https://developers.cloudflare.com/workers/frameworks/framework-guides/nextjs/#video-tutorial
title: Deploy NextJS to your Workers Application
description: Watch to learn how to easily deploy your NextJS application to the Cloudflare global network.
tags: [NextJS, Workers, Pages]
languages: [TypeScript]
Expand All @@ -323,4 +310,64 @@ entries:
updated: 2024-10-31
difficulty: Intermediate
content_type: 🎥 Video
pcx_content_type: tutorial
pcx_content_type: tutorial
- link: https://youtu.be/RmF05GpLE20
title: DevTalk Episode 02 | Post-Quantum Cryptography
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.
tags: [SSL]
languages: [TypeScript]
products: [SSL]
cloudflare: true
author: bas
updated: 2024-11-14
difficulty: Beginner
content_type: 🎥 Video
pcx_content_type: tutorial
- link: https://youtu.be/xu4Wb-IppmM
title: OpenAI Relay Server on Cloudflare Workers
description: In this video, Craig Dennis walks you through the deployment of OpenAI's relay server to use with their realtime API.
tags: [Workers, Workers AI, Pages]
languages: [TypeScript]
products: [Workers, Workers AI, Pages]
cloudflare: true
author: craig
updated: 2024-11-14
difficulty: Intermediate
content_type: 🎥 Video
pcx_content_type: tutorial
- link: https://developers.cloudflare.com/workers/runtime-apis/rpc/#video-tutorial
title: Workers RPC Tutorial
description: Learn how to implement RPC in your JavaScript applications and build serverless solutions.
tags: [Workers, Pages]
languages: [TypeScript]
products: [Workers, Pages]
cloudflare: true
author: confidence
updated: 2024-11-10
difficulty: Beginner
content_type: 🎥 Video
pcx_content_type: tutorial
- link: https://youtu.be/B2bLUc3iOsI
title: Deploy your React App to Cloudflare Workers
description: Learn how to deploy an existing React application to Cloudflare Workers.
tags: [Workers, Pages]
languages: [TypeScript]
products: [Workers, Pages]
cloudflare: true
author: confidence
updated: 2024-11-05
difficulty: Intermediate
content_type: 🎥 Video
pcx_content_type: tutorial
# - link:
# title:
# description:
# tags: [Workers, Pages]
# languages: [TypeScript]
# products: [Workers, Pages]
# cloudflare: true
# author: confidence
# updated: 2024-11-14
# difficulty: Intermediate
# content_type: 🎥 Video
# pcx_content_type: tutorial
Loading