Adds Flux 1 Schnell code examples

Author: craigsdennis

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>

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");