From 74ec1d356cf926d78f8276ecbc9a8cc83225bf1a Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Wed, 2 Oct 2024 15:26:49 -0500 Subject: [PATCH 1/7] Corrected example --- src/components/models/code/TextToImageCode.astro | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/models/code/TextToImageCode.astro b/src/components/models/code/TextToImageCode.astro index 9dbbfa416e81499..c755c79dbbdd277 100644 --- a/src/components/models/code/TextToImageCode.astro +++ b/src/components/models/code/TextToImageCode.astro @@ -23,14 +23,14 @@ export default { prompt: "cyberpunk cat", }; - const response = await env.AI.run( + const stream = await env.AI.run( "${name}", inputs ); return new Response(response, { headers: { - "content-type": "image/png", + "content-type": "image/jpg", }, }); }, From 7c9b9c0a6893e1dfdfd37dede8eb2cc9aa490c06 Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Wed, 2 Oct 2024 15:27:06 -0500 Subject: [PATCH 2/7] Added upload an image using a Worker --- .../images/upload-images/upload-file-worker.mdx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/content/docs/images/upload-images/upload-file-worker.mdx diff --git a/src/content/docs/images/upload-images/upload-file-worker.mdx b/src/content/docs/images/upload-images/upload-file-worker.mdx new file mode 100644 index 000000000000000..7d25f64971d9cea --- /dev/null +++ b/src/content/docs/images/upload-images/upload-file-worker.mdx @@ -0,0 +1,15 @@ +--- +pcx_content_type: how-to +title: Upload an image using a Worker + +--- + +You can use a Worker to upload your image to Cloudflare Images. + +Refer to the example below or refer to the [Workers documentation](/workers/) for more information. + +```ts +const image = await fetch("./myimage.png"); +const bytes = await image.bytes(); +formData.append('file', new File([bytes], 'myimage.png'); +``` \ No newline at end of file From 021a5f5f0bf71e2d1c23ab7a09957f422bab0167 Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Thu, 3 Oct 2024 11:23:00 -0500 Subject: [PATCH 3/7] Implementing feedback --- .../upload-images/upload-file-worker.mdx | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/src/content/docs/images/upload-images/upload-file-worker.mdx b/src/content/docs/images/upload-images/upload-file-worker.mdx index 7d25f64971d9cea..8f10ed8e3a38553 100644 --- a/src/content/docs/images/upload-images/upload-file-worker.mdx +++ b/src/content/docs/images/upload-images/upload-file-worker.mdx @@ -1,6 +1,6 @@ --- pcx_content_type: how-to -title: Upload an image using a Worker +title: Upload via a Worker --- @@ -9,7 +9,48 @@ You can use a Worker to upload your image to Cloudflare Images. Refer to the example below or refer to the [Workers documentation](/workers/) for more information. ```ts -const image = await fetch("./myimage.png"); +const API_URL = "https://api.cloudflare.com/client/v4/accounts//images/v1"; +const TOKEN = ""; + +const image = await fetch("https://example.com/image.png"); const bytes = await image.bytes(); -formData.append('file', new File([bytes], 'myimage.png'); + +const formData = new FormData(); +formData.append('file', new File([bytes], 'image.png')); + +const response = await fetch(API_URL, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${TOKEN}`, + }, + body: formData, +}); +``` + +## Upload from AI generated images + +To upload an AI generated image, refer to the example below. + +```ts +const API_URL = "https://api.cloudflare.com/client/v4/accounts//images/v1"; +const TOKEN = "YOUR_TOKEN_HERE"; + +const stream = await env.AI.run( + "@cf/bytedance/stable-diffusion-xl-lightning", + { + prompt: YOUR_PROMPT_HERE + } +); +const bytes = await (new Response(stream)).bytes(); + +const formData = new FormData(); +formData.append('file', new File([bytes], 'image.jpg'); + +const response = await fetch(API_URL, { + method: 'POST', + headers: { + 'Authorization': `Bearer ${TOKEN}`, + }, + body: formData, +}); ``` \ No newline at end of file From b000655326ba3376681aae3592dc3065298e32ab Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Fri, 4 Oct 2024 10:03:06 -0500 Subject: [PATCH 4/7] Added more background info to AI image task --- src/content/docs/images/upload-images/upload-file-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/images/upload-images/upload-file-worker.mdx b/src/content/docs/images/upload-images/upload-file-worker.mdx index 8f10ed8e3a38553..e10507960320995 100644 --- a/src/content/docs/images/upload-images/upload-file-worker.mdx +++ b/src/content/docs/images/upload-images/upload-file-worker.mdx @@ -29,7 +29,7 @@ const response = await fetch(API_URL, { ## Upload from AI generated images -To upload an AI generated image, refer to the example below. +You can use an AI Worker to generate an image and then upload that image to store it in Cloudflare Images. For more information about using Workers AI to generate an image, refer to the [SDXL-Lightning Model](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-xl-lightning). ```ts const API_URL = "https://api.cloudflare.com/client/v4/accounts//images/v1"; From 3a2b7682b189ea6ab824715022782a274a13622b Mon Sep 17 00:00:00 2001 From: Denise Pena Date: Fri, 4 Oct 2024 10:14:31 -0500 Subject: [PATCH 5/7] Added more info for uploading AI generated image --- src/content/docs/images/upload-images/upload-file-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/images/upload-images/upload-file-worker.mdx b/src/content/docs/images/upload-images/upload-file-worker.mdx index e10507960320995..f73f52ec36e357a 100644 --- a/src/content/docs/images/upload-images/upload-file-worker.mdx +++ b/src/content/docs/images/upload-images/upload-file-worker.mdx @@ -27,7 +27,7 @@ const response = await fetch(API_URL, { }); ``` -## Upload from AI generated images +## Upload an AI generated image You can use an AI Worker to generate an image and then upload that image to store it in Cloudflare Images. For more information about using Workers AI to generate an image, refer to the [SDXL-Lightning Model](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-xl-lightning). From 9cf0789a7df19dfeb47d7b7f8a78a8591613bb3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denise=20Pe=C3=B1a?= <75506267+dcpena@users.noreply.github.com> Date: Fri, 4 Oct 2024 10:18:00 -0500 Subject: [PATCH 6/7] Update src/content/docs/images/upload-images/upload-file-worker.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> --- src/content/docs/images/upload-images/upload-file-worker.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/images/upload-images/upload-file-worker.mdx b/src/content/docs/images/upload-images/upload-file-worker.mdx index f73f52ec36e357a..51882a696ccc67c 100644 --- a/src/content/docs/images/upload-images/upload-file-worker.mdx +++ b/src/content/docs/images/upload-images/upload-file-worker.mdx @@ -29,7 +29,7 @@ const response = await fetch(API_URL, { ## Upload an AI generated image -You can use an AI Worker to generate an image and then upload that image to store it in Cloudflare Images. For more information about using Workers AI to generate an image, refer to the [SDXL-Lightning Model](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-xl-lightning). +You can use an AI Worker to generate an image and then upload that image to store it in Cloudflare Images. For more information about using Workers AI to generate an image, refer to the [SDXL-Lightning Model](/workers-ai/models/stable-diffusion-xl-lightning). ```ts const API_URL = "https://api.cloudflare.com/client/v4/accounts//images/v1"; From 0d21e2646dd45830646aad3a288167e5eb77a41b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denise=20Pe=C3=B1a?= <75506267+dcpena@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:57:29 -0500 Subject: [PATCH 7/7] Header edit --- src/content/docs/images/upload-images/upload-file-worker.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/images/upload-images/upload-file-worker.mdx b/src/content/docs/images/upload-images/upload-file-worker.mdx index 51882a696ccc67c..65dcfe6333032a1 100644 --- a/src/content/docs/images/upload-images/upload-file-worker.mdx +++ b/src/content/docs/images/upload-images/upload-file-worker.mdx @@ -27,7 +27,7 @@ const response = await fetch(API_URL, { }); ``` -## Upload an AI generated image +## Upload from AI generated images You can use an AI Worker to generate an image and then upload that image to store it in Cloudflare Images. For more information about using Workers AI to generate an image, refer to the [SDXL-Lightning Model](/workers-ai/models/stable-diffusion-xl-lightning). @@ -53,4 +53,4 @@ const response = await fetch(API_URL, { }, body: formData, }); -``` \ No newline at end of file +```