docs: article ready

Author: atinux

docs/content/0.index.yml

@@ -10,8 +10,8 @@ hero:
     light: '/images/landing/hero-light.svg'
     dark: '/images/landing/hero-dark.svg'
   headline:
-    label: NuxtHub AI is out
-    to: /changelog/hub-ai
+    label: Using AI for User Experience
+    to: /blog/cloudflare-ai-for-user-experience
     icon: i-ph-arrow-right
   links:
     - label: Get started

docs/content/5.blog/3.cloudflare-ai-for-user-experience.md

@@ -10,16 +10,15 @@ authors:
     username: atinux
 date: 2024-08-26
 category: Tutorial
-draft: true
 ---
 
 ## Introduction
 
 Let's improve [Atidraw](https://github.com/atinux/atidraw), an open source collaborative drawing app made with Nuxt.
 
 The application has basic features such as:
-- Auth with Google, GitHub or Anonymously based on [`nuxt-auth-utils`](https://github.com/Atinux/nuxt-auth-utils) 
-- Draw with [`signature_pad`](https://github.com/szimek/signature_pad)
+- Authentication with Google, GitHub or login anonymously based on [`nuxt-auth-utils`](https://github.com/Atinux/nuxt-auth-utils) 
+- Drawing with [`signature_pad`](https://github.com/szimek/signature_pad)
 - Upload and store drawings with Cloudflare R2 using [`hubBlob()`](/docs/features/blob)
 
 You can play with it on [draw.nuxt.dev](https://draw.nuxt.dev).
@@ -34,7 +33,7 @@ This is important to know how Cloudflare AI models are billed.
 
 Cloudflare free allocation allows anyone to use a total of 10,000 Neurons per day at no charge.
 
-Neurons are Cloudflare way of measuring AI outputs across different models. To give you a sense of what you can accomplish with 10,000 Neurons, you can generate:
+Neurons are Cloudflare's way of measuring AI outputs across different models. To give you a sense of what you can accomplish with 10,000 Neurons, you can generate one of the following (or an equivalent mix):
 - 100-200 LLM responses
 - 500 translations
 - 500 seconds of speech-to-text audio
@@ -53,7 +52,7 @@ Read more about **Cloudflare AI pricing**.
 
 ## Add AI to Nuxt
 
-To add AI to our Nuxt application, we need to enable the AI feature on our `nuxt.config.ts` file.
+To add AI to our Nuxt application, we need to enable the AI feature in our `nuxt.config.ts` file.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
@@ -78,17 +77,17 @@ This will allow the module to call AI models from your linked Cloudflare account
 That's it! We can now use the AI models from Cloudflare using [`hubAI()`](/docs/features/ai).
 ::
 
-I've been thinking on two features:
+I've been thinking about two features:
 - Generate the alternative text for the user drawings, improving the accessibility of the application & SEO.
-- Generate an image based from the drawing and the alternative text, as a way to make the application more interactive.
+- Generate an image based on the drawing and the alternative text, as a way to make the application more interactive.
 
 Before starting, I took a look at [Cloudflare's multi modal playground](https://multi-modal.ai.cloudflare.com/) and played with some models.
 
 :nuxt-img{alt="Atidraw AI models" dataZoomSrc="/images/blog/atidraw-ai-models.png" height="515" src="/images/blog/atidraw-ai-models.png" width="915"}
 
 This guided me to the following models:
-- [LLaVA](https://developers.cloudflare.com/workers-ai/models/llava-1.5-7b-hf/) for the alternative text
-- [Stable Diffusion IMG2IMG](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-v1-5-img2img/) for the alternative drawing
+- [LLaVA](https://developers.cloudflare.com/workers-ai/models/llava-1.5-7b-hf/) for the alternative text generation
+- [Stable Diffusion IMG2IMG](https://developers.cloudflare.com/workers-ai/models/stable-diffusion-v1-5-img2img/) for the alternative drawing generation
 
 ::note{to="https://developers.cloudflare.com/workers-ai/models/" target="_blank"}
 See all **Cloudflare AI models** available.
@@ -205,11 +204,11 @@ await hubAI().run('@cf/runwayml/stable-diffusion-v1-5-img2img', {
 
 It takes the following inputs:
 - `image` (as `Uint8Array`) to use as a reference for the image generation
-- `prompt` to guides the model in generating the image
+- `prompt` to guide the model in generating the image
 - `guidance` to control how closely the generated image adheres to the given text prompt
-- `strength` to controls how much the model changes the input image, with higher values creating bigger changes.
+- `strength` to control how much the model changes the input image, with higher values creating bigger changes.
 
-Let's update our `/api/upload` route to generate the alternative drawing and store it in the R2 bucket.
+Let's update our `/api/upload` route to generate the alternative drawing and store it our R2 bucket.
 
 ```ts [server/api/upload.post.ts]
 export default eventHandler(async (event) => {
@@ -245,9 +244,9 @@ export default eventHandler(async (event) => {
 })
 ```
 
-As you can see, we store the pathname of the AI generated image in the custom metadata of the drawing.
+As you can see, we store the `pathname` of the AI generated image in the custom metadata of the drawing.
 
-Now, we can display the AI generated image in the listing page when hovering the user's drawing:
+Now, we can display the AI generated image in our listing page when hovering the user's drawing:
 
 ```vue [app/pages/index.vue]
 <script setup lang="ts">
@@ -290,12 +289,12 @@ I am quite happy with the result:
 ::
 
 ::note
-Sometime the AI generated image is black, this is because the model is not able to generate an image from the description, most of the time because it is a sensitive content or misunderstood the description.
+Sometimes the AI generated image is black, this is because the model is not able to generate an image from the description, most of the time because it is sensitive content or it misunderstood the description.
 ::
 
 ## Conclusion
 
-This is the end of this tutorial on how to use Cloudflare AI models in a Nuxt application. I hope you enjoyed it and that it gave you some ideas on how to use AI in your Nuxt application.
+This is the end of this tutorial on how to use Cloudflare AI models in a Nuxt application. I hope you enjoyed it and that it gave you some ideas on how to use AI for improving accessibility, SEO or User Experience.
 
 Feel free to expand on this foundation and add your own unique features to make Atidraw yours!