From a4f221f3ad07e682276a6ff3f8d779b960f35c28 Mon Sep 17 00:00:00 2001
From: Craig Dennis <craigsdennis@gmail.com>
Date: Thu, 14 Nov 2024 12:39:32 -0800
Subject: [PATCH 1/2] Typo between stream and response

---
 src/components/models/code/TextToImageCode.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/models/code/TextToImageCode.astro b/src/components/models/code/TextToImageCode.astro
index c755c79dbbdd27..555c0f9de2bac4 100644
--- a/src/components/models/code/TextToImageCode.astro
+++ b/src/components/models/code/TextToImageCode.astro
@@ -23,7 +23,7 @@ export default {
       prompt: "cyberpunk cat",
     };
 
-    const stream = await env.AI.run(
+    const response = await env.AI.run(
       "${name}",
       inputs
     );

From 187ebff52b05ba1ab435d51151d93691e0dc2030 Mon Sep 17 00:00:00 2001
From: Craig Dennis <craigsdennis@gmail.com>
Date: Thu, 14 Nov 2024 12:41:14 -0800
Subject: [PATCH 2/2] Adds Flux 1 Schnell code examples

---
 .../models/code/Flux-1-Schnell.astro          | 73 +++++++++++++++++++
 src/pages/workers-ai/models/[name].astro      |  6 ++
 2 files changed, 79 insertions(+)
 create mode 100644 src/components/models/code/Flux-1-Schnell.astro

diff --git a/src/components/models/code/Flux-1-Schnell.astro b/src/components/models/code/Flux-1-Schnell.astro
new file mode 100644
index 00000000000000..fbc42e1a234ace
--- /dev/null
+++ b/src/components/models/code/Flux-1-Schnell.astro
@@ -0,0 +1,73 @@
+---
+import { z } from "astro:schema";
+import { Code } from "@astrojs/starlight/components";
+import Details from "~/components/Details.astro";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	name: z.string(),
+});
+
+const { name } = props.parse(Astro.props);
+
+const workerReturningDataURI = `
+export interface Env {
+	AI: Ai;
+}
+
+export default {
+	async fetch(request, env): Promise<Response> {
+		const response = await env.AI.run('@cf/black-forest-labs/flux-1-schnell', {
+			prompt: 'a cyberpunk lizard',
+		});
+		// response.image is base64 encoded which can be used directly as an <img src=""> data URI
+		const dataURI = \`data:image/jpeg;charset=utf-8;base64,\${response.image}\`;
+		return Response.json({ dataURI });
+	},
+} satisfies ExportedHandler<Env>;
+
+`;
+
+const workerReturningImage = `
+export interface Env {
+	AI: Ai;
+}
+
+export default {
+	async fetch(request, env): Promise<Response> {
+		const response = await env.AI.run('@cf/black-forest-labs/flux-1-schnell', {
+			prompt: 'a cyberpunk lizard',
+		});
+		// Convert from base64 string
+		const binaryString = atob(response.image);
+		// Create byte representation
+		const img = Uint8Array.from(binaryString, (m) => m.codePointAt(0));
+		return new Response(img, {
+			headers: {
+				'Content-Type': 'image/jpeg',
+			},
+		});
+	},
+} satisfies ExportedHandler<Env>;
+`;
+
+const curl = `
+curl https://api.cloudflare.com/client/v4/accounts/$CLOUDFLARE_ACCOUNT_ID/ai/run/${name}  \\
+  -X POST  \\
+  -H "Authorization: Bearer $CLOUDFLARE_API_TOKEN"  \\
+  -d '{ "prompt": "cyberpunk cat" }'
+`;
+---
+
+<Details header="Workers - Returning a data URI - TypeScript">
+	<Code code={workerReturningDataURI} lang="ts" />
+</Details>
+
+<Details header="Workers - Returning an image - TypeScript">
+	<Code code={workerReturningImage} lang="ts" />
+</Details>
+
+<Details header="curl">
+	<Code code={curl} lang="sh" />
+</Details>
diff --git a/src/pages/workers-ai/models/[name].astro b/src/pages/workers-ai/models/[name].astro
index 362da4bd9ec595..13863fcd60d361 100644
--- a/src/pages/workers-ai/models/[name].astro
+++ b/src/pages/workers-ai/models/[name].astro
@@ -21,6 +21,7 @@ import TextToImageCode from "~/components/models/code/TextToImageCode.astro";
 import TranslationCode from "~/components/models/code/TranslationCode.astro";
 import StableDiffusionV15Img2ImgCode from "~/components/models/code/StableDiffusion-v1-5-img2imgCode.astro";
 import StableDiffusionV15InpaintingCode from "~/components/models/code/StableDiffusion-v1-5-inpaintingCode.astro";
+import Flux1Schnell from "~/components/models/code/Flux-1-Schnell.astro";
 
 import { authorData } from "~/components/models/data";
 
@@ -74,6 +75,7 @@ switch (model.task.name) {
 		break;
 }
 
+// Overrides
 if (model.name === "@cf/runwayml/stable-diffusion-v1-5-img2img") {
 	CodeExamples = StableDiffusionV15Img2ImgCode;
 }
@@ -82,6 +84,10 @@ if (model.name === "@cf/runwayml/stable-diffusion-v1-5-inpainting") {
 	CodeExamples = StableDiffusionV15InpaintingCode;
 }
 
+if (model.name === "@cf/black-forest-labs/flux-1-schnell") {
+	CodeExamples = Flux1Schnell;
+}
+
 const description = model.description;
 const terms = model.properties.find((x) => x.property_id === "terms");