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
• 💾 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. 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
├── frontend/
│   ├── index.html           # Minimal HTML interface
│   ├── app.js              # Main application logic
│   ├── components/
│   │   ├── drawing-canvas.js # Canvas Web Component with size control
│   │   └── control-panel.js  # Minimal control panel
│   └── style.css           # Clean, minimal styles
└── README.md

1. Set the API Key: Add your Google Gemini API key as an environment variable in Val Town:

   • Go to your Val Town settings
   • Add GEMINI_API_KEY with your Google AI Studio API key
   • Get your API key from: https://aistudio.google.com/app/apikey

2. Set Basic Auth Credentials: Add Basic Auth environment variables in Val Town:

   • Add BASIC_AUTH_USERNAME with your desired username
   • Add BASIC_AUTH_PASSWORD with your desired password
   • These credentials will be required to access the application and API

3. Access the Application: The application will be available at the HTTP endpoint URL provided by Val Town

   • You'll be prompted for username and password when accessing the site

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

• 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

• Frontend: Vanilla JavaScript with Web Components, Tailwind CSS
• Backend: Deno runtime on Val Town with Hono framework
• AI Model: Google Gemini 2.5 Flash Image Preview
• Canvas: HTML5 Canvas with optimized 2D context for low latency
• 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