A creative drawing application that uses AI to transform your sketches into vibrant, detailed artwork.

• 🎯 Canvas-Focused: Clean, minimal interface focused purely on the drawing experience
• 🔑 Cookie-Based API Key Management: Secure client-side storage of your Gemini API key
• 📏 Configurable Canvas Size: Choose from 512x512, 768x768, or 1024x1024 pixels
• ✨ Auto-Generation: AI generates artwork automatically as you draw
• 🎭 Exact Size Matching: Canvas and AI output are exactly the same dimensions
• 🔄 Toggle Views: Switch between sketch overlay and pure AI artwork
• 🔗 Previous Image Integration: Toggle to use previously generated images as style reference for new creations
• 💾 Direct Save: Save the AI-generated artwork directly
• ⚡ Responsive Drawing: Low-latency drawing with optimized touch support
• 🌈 Colorful Generation Feedback: Beautiful multi-color glow effects when AI is generating new artwork

1. Get a Gemini API Key: Visit Google AI Studio to obtain your free API key
2. Enter Your Key: When you first use the app, you'll be prompted to enter your API key
3. Secure Storage: Your API key is stored securely in your browser using cookies

1. Draw: Use your finger or stylus to sketch on the canvas
2. Wait: The AI will automatically start generating after you stop drawing (1-second delay)
3. View: Toggle between showing your sketch, the AI result, or both
4. Use Previous: Enable "Use Previous Image" to incorporate the last generated image as style reference for new sketches
5. Save: Download your generated artwork using the save button

• 🔑 Button: Click the key icon in the control panel to manage your API key
• Change Key: If you have a key stored, you can update it
• Remove Key: Clear your stored API key if needed
• Remember Option: Choose whether to store the key for 30 days or just for the session

├── backend/
│   └── index.ts             # API endpoint with Gemini integration and cookie-based auth
├── frontend/
│   ├── index.html           # Main HTML interface with API key dialog
│   ├── app.js              # Main application logic with API key management
│   ├── components/
│   │   ├── drawing-canvas.js # Canvas Web Component with size control
│   │   └── control-panel.js  # Control panel with API key management
│   ├── utils/
│   │   ├── api-key-manager.js # Cookie-based API key storage
│   │   └── dialog-manager.js  # API key input dialog
│   └── style.css           # Clean, minimal styles
└── README.md

No server-side setup required! The application is ready to use immediately:

1. Access the Application: Visit the application URL
2. Enter API Key: When you first try to generate artwork, you'll be prompted to enter your Gemini API key
3. Get API Key: If you don't have one, get your free API key from: https://aistudio.google.com/app/apikey

1. Select Size: Choose your preferred canvas size (512x512, 768x768, or 1024x1024)
2. Draw: Start sketching - AI automatically generates artwork underneath
3. Toggle: Use "Show AI Only" to see the pure AI artwork or your sketch overlay
4. Save: Click "Save" to download the AI-generated image

• 🔑: Manage your API key (change or remove)
• Use Previous Image: Toggle to use the last generated image as style reference for new sketches
• Clear: Remove all drawing and generated artwork
• Show AI Only / Show Sketch: Toggle between views
• Save: Download the current AI-generated artwork
• Canvas Size: Change the canvas dimensions

• Ctrl/Cmd + N: Clear the canvas
• Ctrl/Cmd + S: Save the generated image (when available)

• Frontend: Vanilla JavaScript with Web Components, Tailwind CSS
• Backend: Deno runtime on Val Town with cookie-based API key authentication
• AI Model: Google Gemini 2.5 Flash Image Preview
• Canvas: HTML5 Canvas with optimized 2D context for low latency
• API Key Storage: Secure browser cookies with CookieStore API (fallback to document.cookie)
• Generation Feedback: Colorful visual effects including rainbow glow cycling through pink, purple, blue, green, yellow, and orange tones, plus a matching colorful spinner in the loading indicator
• Accessibility: Respects prefers-reduced-motion for users who prefer minimal animations

• Client-Side Storage: API keys are stored securely in browser cookies, never on our servers
• Direct API Communication: Your drawings and API key go directly to Google's Gemini API
• No Server Storage: No drawings, generated images, or API keys are stored on our servers
• Secure Cookies: API keys are stored with secure cookie options (Secure, SameSite=Strict)

• Modern Browsers: Full support with CookieStore API
• Older Browsers: Fallback to document.cookie for API key storage
• Mobile: Optimized touch interface for drawing