{"id":14039865,"url":"https://github.com/atinux/atidraw","last_synced_at":"2025-07-27T09:31:32.800Z","repository":{"id":243702042,"uuid":"813175056","full_name":"atinux/atidraw","owner":"atinux","description":"Share your drawings with the world. Powered by Cloudflare R2 \u0026 AI.","archived":false,"fork":false,"pushed_at":"2024-11-04T16:19:13.000Z","size":685,"stargazers_count":144,"open_issues_count":0,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-08T13:38:16.438Z","etag":null,"topics":["auth","cloudflare","cloudflare-ai","cloudflare-r2","nuxt","nuxthub","ssr","vue"],"latest_commit_sha":null,"homepage":"https://draw.nuxt.dev","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atinux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-10T15:57:38.000Z","updated_at":"2024-11-04T16:19:17.000Z","dependencies_parsed_at":"2024-07-22T20:11:35.825Z","dependency_job_id":"31eddd6d-2f36-4a14-88fd-d6bb2512a55a","html_url":"https://github.com/atinux/atidraw","commit_stats":null,"previous_names":["atinux/instadraw","atinux/atidraw"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atinux%2Fatidraw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atinux%2Fatidraw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atinux%2Fatidraw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atinux%2Fatidraw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atinux","download_url":"https://codeload.github.com/atinux/atidraw/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227789439,"owners_count":17820204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auth","cloudflare","cloudflare-ai","cloudflare-r2","nuxt","nuxthub","ssr","vue"],"created_at":"2024-08-12T05:01:58.195Z","updated_at":"2024-12-02T19:30:41.167Z","avatar_url":"https://github.com/atinux.png","language":"Vue","funding_links":[],"categories":["Vue","Starter Kits"],"sub_categories":[],"readme":"# Draw and share your Art with Atidraw 🎨✨\n\nAtidraw 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. \n\nThe application is running with server-side rendering on the edge using Cloudflare Pages.\n\nYou can deploy it with zero configuration on your Cloudflare account using NuxtHub:\n\n[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?template=atidraw)\n\n### 🚀 Key Features\n\n- **Intuitive Drawing**: User-friendly interface powered by [`signature_pad`](https://github.com/szimek/signature_pad)\n- **AI-Powered Enhancements**: \n  - Automatic alt text generation for accessibility \u0026 SEO\n  - Generate an image of your drawing with Stable Diffusion\n- **Global Storage**: Your creations are safely stored using [Cloudflare R2](https://www.cloudflare.com/developer-platform/r2/)\n- **Flexible Authentication**: Sign in with Google, GitHub, or stay anonymous (local)\n- **High-Performance**: Deployed on the edge with server-side rendering using Cloudflare Pages\n\n### 🎥 See It in Action\n\nhttps://github.com/Atinux/atidraw/assets/904724/85f79def-f633-40b7-97c2-3a8579e65af1\n\nReady to create? Visit [draw.nuxt.dev](https://draw.nuxt.dev) and share your best drawing!\n\n## 🛠 Tech Stack\n\n- [Nuxt](https://nuxt.com) - The Intuitive Vue Framework\n- [Nuxt UI](https://github.com/nuxt/ui) - Beautiful UI library with TailwindCSS\n- [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) - Simplified Authentication\n- [NuxtHub](https://hub.nuxt.com) - Build \u0026 deploy to your Cloudflare account with zero configuration\n  - [`hubBlob()`](https://hub.nuxt.com/docs/features/blob) to store drawing on Cloudflare R2\n  - [`hubAI()`](https://hub.nuxt.com/docs/features/ai) to run Cloudflare AI on user's drawing\n- [`npx nuxthub deploy`](https://github.com/nuxt-hub/cli) - To deploy the app on your Cloudflare account for free\n\n## 🏎️ How does it work?\n\nI wrote two articles about how I created Atidraw:\n- [Code, Draw, Deploy: A drawing app with Nuxt \u0026 Cloudflare R2](https://hub.nuxt.com/blog/drawing-app-with-nuxt-and-cloudflare-r2)\n- [Using Cloudflare AI Models for User Experience](https://hub.nuxt.com/blog/cloudflare-ai-for-user-experience)\n\n## 🚀 Quick Start\n\n1. Install dependencies with [pnpm](https://pnpm.io)\n    ```bash\n    pnpm install\n    ```\n2. Set up your environment and fill the env variables\n    ```bash\n    cp .env.example .env\n    ```\n    If you don't set the Google and GitHub credentials, anonymous sign-in will be enabled.\n3. Create \u0026 link a NuxtHub project to enable running AI models on your Cloudflare account\n    ```bash\n    npx nuxthub link\n    ```\n4. Launch the dev server\n    ```bash\n    pnpm dev\n    ```\n\nVisit `http://localhost:3000` and start drawing!\n\n## 📁 Manage Drawings\n\nYou can manage the drawings (local or remote) within the Nuxt DevTools in the Hub Blob tab:\n\n![nuxt-devtools-blob](https://github.com/user-attachments/assets/152b0283-637b-41b3-990e-f25a73183c93)\n\n## 🤖 Experiment with AI\n\nUnlock the full potential of Atidraw by enabling the AI image generation feature:\n\n1. Open `./app/pages/draw.vue`\n2. Uncomment the `\u003cAIDraw\u003e` component:\n   ```diff\n   - \u003c!-- \u003cAIDraw :drawing=\"drawing\" class=\"mt-4\" /\u003e --\u003e\n   + \u003cAIDraw :drawing=\"drawing\" class=\"mt-4\" /\u003e\n   ```\n3. Open http://localhost:3000/draw to draw something and click on \"Draw with AI\"\n\nhttps://github.com/user-attachments/assets/1ff6b3fd-3dbb-45de-8c3a-648aee8b28b0\n\n## 🌐 Deploy to the World for Free\n\nHost your Atidraw instance on a **free Cloudflare account** and **free NuxtHub account**.\n\nDeploy it online in the NuxtHub UI:\n\n[![Deploy to NuxtHub](https://hub.nuxt.com/button.svg)](https://hub.nuxt.com/new?repo=atinux/atidraw)\n\nOr locally with the [NuxtHub CLI](https://github.com/nuxt-hub/cli):\n\n```bash\nnpx nuxthub deploy\n```\n\nThis command will deploy your Atidraw instance to your Cloudflare account and provision a Cloudflare R2 bucket. You will also get a free `\u003cyou-app\u003e.nuxt.dev` domain.\n\nOnce deployed, you can manage your users' masterpieces in the [NuxtHub Admin](https://admin.hub.nuxt.com).\n\n```bash\nnpx nuxthub manage\n```\n\nWhat's included in Cloudflare free plan:\n- 100,000 requests/day\n- 10 GB storage on Cloudflare R2\n\nRead more about the pricing on our [detailed pricing page](https://hub.nuxt.com/pricing).\n\nYou 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).\n\n### Remote Storage\n\nOnce 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:\n\n```bash\npnpm dev --remote\n```\n\n## 🔗 Useful Links\n\n- [Live Demo](https://draw.nuxt.dev)\n- [NuxtHub Documentation](https://hub.nuxt.com)\n- [Nuxt UI](https://ui.nuxt.com)\n- [Nuxt Auth Utils](https://github.com/atinux/nuxt-auth-utils)\n- [Nuxt](https://nuxt.com)\n\n## 📝 License\n\nPublished under the [MIT license](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatinux%2Fatidraw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatinux%2Fatidraw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatinux%2Fatidraw/lists"}