atidraw

atidraw

Share your drawings with the world. Powered by Cloudflare R2 & AI.

Stars: 134

Visit
 screenshot

Atidraw is a web application that allows users to create, enhance, and share drawings using Cloudflare R2 and Cloudflare AI. It features intuitive drawing with signature_pad, AI-powered enhancements such as alt text generation and image generation with Stable Diffusion, global storage on Cloudflare R2, flexible authentication options, and high-performance server-side rendering on Cloudflare Pages. Users can deploy Atidraw with zero configuration on their Cloudflare account using NuxtHub.

README:

Draw and share your Art with Atidraw 🎨✨

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

πŸš€ Key Features

  • Intuitive Drawing: User-friendly interface powered by 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
  • Flexible Authentication: Sign in with Google, GitHub, or stay anonymous (local)
  • High-Performance: Deployed on the edge with server-side rendering using Cloudflare Pages

πŸŽ₯ See It in Action

https://github.com/Atinux/atidraw/assets/904724/85f79def-f633-40b7-97c2-3a8579e65af1

Ready to create? Visit draw.nuxt.dev and share your best drawing!

πŸ›  Tech Stack

  • Nuxt - The Intuitive Vue Framework
  • Nuxt UI - Beautiful UI library with TailwindCSS
  • Nuxt Auth Utils - Simplified Authentication
  • NuxtHub - Build & deploy to your Cloudflare account with zero configuration
    • hubBlob() to store drawing on Cloudflare R2
    • hubAI() to run Cloudflare AI on user's drawing
  • npx nuxthub deploy - To deploy the app on your Cloudflare account for free

🏎️ How does it work?

I wrote two articles about how I created Atidraw:

πŸš€ Quick Start

  1. Install dependencies with pnpm
    pnpm install
  2. Set up your environment and fill the env variables
    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
    npx nuxthub link
  4. Launch the dev server
    pnpm dev

Visit http://localhost:3000 and start drawing!

πŸ“ Manage Drawings

You can manage the drawings (local or remote) within the Nuxt DevTools in the Hub Blob tab:

nuxt-devtools-blob

πŸ€– 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:
    - <!-- <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"

https://github.com/user-attachments/assets/1ff6b3fd-3dbb-45de-8c3a-648aee8b28b0

🌐 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

Or locally with the NuxtHub CLI:

npx nuxthub deploy

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.

Once deployed, you can manage your users' masterpieces in the NuxtHub Admin.

npx nuxthub manage

What's included in Cloudflare free plan:

  • 100,000 requests/day
  • 10 GB storage on Cloudflare R2

Read more about the pricing on our detailed pricing page.

You can also deploy using Cloudflare Pages CI or GitHub actions.

Remote Storage

Once your project is deployed, you can use NuxtHub Remote Storage to connect to your preview or production Cloudflare R2 bucket in development using the --remote flag:

pnpm dev --remote

πŸ”— Useful Links

πŸ“ License

Published under the MIT license.

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for atidraw

Similar Open Source Tools

For similar tasks

For similar jobs