feat: leverage hubAI() (#6)

* feat: leverage AI

* chore: update

* docs: add video for draw with AI button

* chore: lint

* docs: update

* chore: update ci

* chore: update

* chore: up

* Update pnpm-lock.yaml

* up

.env.example

@@ -1,13 +1,10 @@
 # Random 32 characters long string
 NUXT_SESSION_PASSWORD=
 
-# GitHub OAuth
+# GitHub OAuth (optional)
 NUXT_OAUTH_GITHUB_CLIENT_ID=
 NUXT_OAUTH_GITHUB_CLIENT_SECRET=
 
-# Google OAuth
+# Google OAuth (optional)
 NUXT_OAUTH_GOOGLE_CLIENT_ID=
 NUXT_OAUTH_GOOGLE_CLIENT_SECRET=
-
-# Nuxt UI Pro License
-NUXT_UI_PRO_LICENSE=

.github/workflows/ci.yml

@@ -1,7 +1,5 @@
-name: Deploy to Cloudflare with NuxtHub Cli
-on:
-  push:
-    branches: ['main']
+name: Deploy with NuxtHub CLI
+on: push
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
@@ -31,9 +29,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name:  Deploy with nuxt-hub cli
+      - name:  Deploy with nuxthub
         run: npx nuxthub deploy
         env:
           NUXT_HUB_PROJECT_KEY: ${{ secrets.NUXT_HUB_PROJECT_KEY}}
           NUXT_HUB_USER_TOKEN: ${{ secrets.NUXT_HUB_USER_TOKEN }}
-          NUXT_UI_PRO_LICENSE: ${{ secrets.NUXT_UI_PRO_LICENSE }}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sébastien Chopin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,70 +1,133 @@
-# Atidraw
+# Draw and share your Art with Atidraw 🎨✨
 
-Share your drawings with the world with this [Nuxt application](https://nuxt.com) using [NuxtHub Blob storage](https://hub.nuxt.com/docs/storage/blob) (Cloudflare R2) and deployed on the Edge (Cloudflare Pages).
+Atidraw is a web application that lets you to create, enhance, and share your drawings with the world. Harnessing the power of Cloudflare R2 and Cloudflare AI to store and enhance your drawings. 
+
+The application is running with server-side rendering on the edge using Cloudflare Pages.
+
+You can deploy it with zero configuration on your Cloudflare account using NuxtHub:
 
 [![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=atinux/atidraw)
 
-## Links
+### 🚀 Key Features
 
-- [Demo](https://draw.nuxt.dev)
-- [NuxtHub docs](https://hub.nuxt.com)
-- [Nuxt docs](https://nuxt.com)
+- **Intuitive Drawing**: User-friendly interface powered by [`signature_pad`](https://github.com/szimek/signature_pad)
+- **AI-Powered Enhancements**: 
+  - Automatic alt text generation for accessibility & SEO
+  - Generate an image of your drawing with Stable Diffusion
+- **Global Storage**: Your creations are safely stored using [Cloudflare R2](https://www.cloudflare.com/developer-platform/r2/)
+- **Flexible Authentication**: Sign in with Google, GitHub, or stay anonymous (local)
+- **High-Performance**: Deployed on the edge with server-side rendering using Cloudflare Pages
 
-## Too lazy to draw?
+### 🎥 See It in Action
 
 https://github.com/Atinux/atidraw/assets/904724/85f79def-f633-40b7-97c2-3a8579e65af1
 
-Now it's your turn! https://draw.nuxt.dev
+Ready to create? Visit [draw.nuxt.dev](https://draw.nuxt.dev) and share your best drawing!
 
-## Features
+## 🛠 Tech Stack
 
-- Image upload with [`hubBlob()`](https://hub.nuxt.com/docs/storage/blob)
-- Auth with Google & GitHub based on [`nuxt-auth-utils`](https://github.com/Atinux/nuxt-auth-utils)
-- Draw with [`signature_pad`](https://github.com/szimek/signature_pad)
-- Deploy to the Edge with [nuxthub deploy](https://github.com/nuxt-hub/cli) using a [GitHub action](./.github/workflows/deploy.yml)
+- [Nuxt](https://nuxt.com) - The Intuitive Vue Framework
+- [Nuxt UI](https://github.com/nuxt/ui) - Beautiful UI library with TailwindCSS
+- [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) - Simplified Authentication
+- [NuxtHub](https://hub.nuxt.com) - Build & deploy to your Cloudflare account with zero configuration
+  - [`hubBlob()`](https://hub.nuxt.com/docs/features/blob) to store drawing on Cloudflare R2
+  - [`hubAI()`](https://hub.nuxt.com/docs/features/ai) to run Cloudflare AI on user's drawing
+- [`npx nuxthub deploy`](https://github.com/nuxt-hub/cli) - To deploy the app on your Cloudflare account for free
 
-## Setup
+## 🏎️ How does it work?
 
-Make sure to install the dependencies:
+I wrote two articles about how I created Atidraw:
+- [Code, Draw, Deploy: A drawing app with Nuxt & Cloudflare R2](https://hub.nuxt.com/blog/drawing-app-with-nuxt-and-cloudflare-r2)
+- [Using Cloudflare AI Models for User Experience](https://hub.nuxt.com/blog/cloudflare-ai-for-user-experience)
 
-```bash
-pnpm install
-```
+## 🚀 Quick Start
 
-## Development Server
+1. Install dependencies with [pnpm](https://pnpm.io)
+    ```bash
+    pnpm install
+    ```
+2. Set up your environment and fill the env variables
+    ```bash
+    cp .env.example .env
+    ```
+    If you don't set the Google and GitHub credentials, anonymous sign-in will be enabled.
+3. Create & link a NuxtHub project to enable running AI models on your Cloudflare account
+    ```bash
+    npx nuxthub link
+    ```
+4. Launch the dev server
+    ```bash
+    pnpm dev
+    ```
 
-Start the development server on `http://localhost:3000`:
+Visit `http://localhost:3000` and start drawing!
 
-```bash
-pnpm dev
-```
+## 📁 Manage Drawings
+
+You can manage the drawings (local or remote) within the Nuxt DevTools in the Hub Blob tab:
+
+![nuxt-devtools-blob](https://github.com/user-attachments/assets/152b0283-637b-41b3-990e-f25a73183c93)
+
+## 🤖 Experiment with AI
+
+Unlock the full potential of Atidraw by enabling the AI image generation feature:
+
+1. Open `./app/pages/draw.vue`
+2. Uncomment the `<AIDraw>` component:
+   ```diff
+   - <!-- <AIDraw :drawing="drawing" class="mt-4" /> -->
+   + <AIDraw :drawing="drawing" class="mt-4" />
+   ```
+3. Open http://localhost:3000/draw to draw something and click on "Draw with AI"
 
-## Production
+https://github.com/user-attachments/assets/1ff6b3fd-3dbb-45de-8c3a-648aee8b28b0
 
-Build the application for production:
+## 🌐 Deploy to the World for Free
+
+Host your Atidraw instance on a **free Cloudflare account** and **free NuxtHub account**.
+
+Deploy it online in the NuxtHub UI:
+
+[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=atinux/atidraw)
+
+Or locally with the [NuxtHub CLI](https://github.com/nuxt-hub/cli):
 
 ```bash
-pnpm build
+npx nuxthub deploy
 ```
 
-## Environment Variables
+This command will deploy your Atidraw instance to your Cloudflare account and provision a Cloudflare R2 bucket. You will also get a free `<you-app>.nuxt.dev` domain.
 
-Copy the `.env.example` file to `.env` and fill in the required environment variables:
+Once deployed, you can manage your users' masterpieces in the [NuxtHub Admin](https://admin.hub.nuxt.com).
 
 ```bash
-cp .env.example .env
+npx nuxthub manage
 ```
 
-You may want to create Google and GitHub OAuth applications.
+What's included in Cloudflare free plan:
+- 100,000 requests/day
+- 10 GB storage on Cloudflare R2
 
-## Deploy on the Edge
+Read more about the pricing on our [detailed pricing page](https://hub.nuxt.com/pricing).
 
-Deploy the application on the Edge with [NuxtHub](https://hub.nuxt.com):
+You can also deploy using [Cloudflare Pages CI](https://hub.nuxt.com/docs/getting-started/deploy#cloudflare-pages-ci) or [GitHub actions](https://hub.nuxt.com/docs/getting-started/deploy#github-action).
+
+### Remote Storage
+
+Once your project is deployed, you can use [NuxtHub Remote Storage](https://hub.nuxt.com/docs/getting-started/remote-storage) to connect to your preview or production Cloudflare R2 bucket in development using the `--remote` flag:
 
 ```bash
-npx nuxthub deploy
+pnpm dev --remote
 ```
 
-Then manage the drawings of your users in the [NuxtHub Admin](https://admin.hub.nuxt.com).
+## 🔗 Useful Links
+
+- [Live Demo](https://draw.nuxt.dev)
+- [NuxtHub Documentation](https://hub.nuxt.com)
+- [Nuxt UI](https://ui.nuxt.com)
+- [Nuxt Auth Utils](https://github.com/atinux/nuxt-auth-utils)
+- [Nuxt](https://nuxt.com)
+
+## 📝 License
 
-You can also deploy using [Cloudflare Pages CI](https://hub.nuxt.com/docs/getting-started/deploy#cloudflare-pages-ci).
+Published under the [MIT license](./LICENSE).

app/app.config.ts

@@ -2,9 +2,5 @@ export default defineAppConfig({
   ui: {
     primary: 'blue',
     gray: 'neutral',
-    header: {
-      wrapper: 'border-none md:pt-8 md:max-w-2xl mx-auto bg-transparent backdrop-blur-none',
-      container: 'bg-gray-400/5 md:rounded-full border-b md:border dark:border-gray-800 bg-gray-50 dark:bg-gray-950',
-    },
   },
 })

app/app.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 useSeoMeta({
-  title: 'Instadraw',
-  description: 'Create a drawing and share it with the world!',
-  ogTitle: 'Instadraw',
+  title: 'Draw and share your Art with Atidraw',
+  description: 'Atidraw is a web application that lets you to create, enhance, and share your drawings with the world. Harnessing the power of Cloudflare R2 and Cloudflare AI to store and enhance your drawings.',
+  ogTitle: 'Atidraw',
   ogImage: 'https://assets.hub.nuxt.com/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RyYXcubnV4dC5kZXYiLCJpYXQiOjE3MTgwMTc3OTF9.ORrHGOCvTaxN7Lk24swRO7k-mrHmExypBquOA8FUlyg.jpg?theme=light',
   twitterCard: 'summary_large_image',
 })
@@ -16,9 +16,9 @@ useServerHead({
 <template>
   <AppHeader />
   <UContainer>
-    <UMain>
+    <main class="min-h-[calc(100vh-192px)]">
       <NuxtPage />
-    </UMain>
+    </main>
   </UContainer>
   <AppFooter />
   <UNotifications />

app/components/AIDraw.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+const props = defineProps({
+  drawing: String,
+})
+const toast = useToast()
+
+const generating = ref(false)
+const generatedImage = ref()
+const drawingDescription = ref('')
+
+async function generateDrawing() {
+  if (generating.value || !props.drawing) return
+  generating.value = true
+  const blob = await fetch(props.drawing).then(res => res.blob())
+  const form = new FormData()
+  form.append('drawing', new File([blob], `drawing.jpg`, { type: 'image/jpeg' }))
+  $fetch.raw<Blob>('/api/generate', {
+    method: 'POST',
+    body: form,
+  }).then((res) => {
+    drawingDescription.value = res.headers.get('x-description') || ''
+    generatedImage.value = URL.createObjectURL(res._data as Blob)
+    generating.value = false
+  }).catch((err) => {
+    if (!err.status) return
+    generating.value = false
+    toast.add({
+      color: 'red',
+      title: err.data?.message || err.message,
+    })
+  })
+}
+</script>
+
+<template>
+  <div class="max-w-[400px]">
+    <UButton
+      label="Draw with AI"
+      size="md"
+      block
+      color="gray"
+      :loading="generating"
+      :disabled="!drawing"
+      @click="generateDrawing()"
+    />
+    <img
+      v-if="generatedImage"
+      :src="generatedImage"
+      :alt="drawingDescription"
+      class="mt-4 w-full h-auto aspect-[1] rounded"
+      :class="{ 'animate-pulse': generating }"
+    >
+    <USkeleton
+      v-else-if="generating"
+      class="w-full h-auto aspect-[1] mt-4 bg-gray-300 dark:bg-gray-700"
+    />
+    <div
+      v-else
+      class="border dark:border-gray-800 rounded w-full h-auto aspect-[1] mt-4 bg-gray-100 dark:bg-gray-800"
+    />
+    <USkeleton
+      v-if="generating"
+      class="h-6 w-full bg-gray-300 dark:bg-gray-700 mt-4"
+    />
+    <div
+      v-else-if="drawingDescription"
+      class="text-center truncate mt-4"
+    >
+      {{ drawingDescription }}
+    </div>
+  </div>
+</template>