A minimal drawing application where AI automatically generates artwork beneath your sketches as you draw.

• 🎯 Canvas-Focused: Clean, minimal interface focused purely on the drawing experience
• 🔐 Basic Auth Protected: Secure access with username/password authentication
• 📏 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 Ink API support
• 🌈 Colorful Generation Feedback: Beautiful multi-color glow effects when AI is generating new artwork

├── 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