A creative web application that inverts the concept of tracing. Users draw simple sketches on a realistic digital canvas that are automatically transformed by AI into rich, detailed artwork appearing as a background layer.

• 🖌️ Realistic Canvas Experience: Beautiful canvas/paper-like UI with artistic textures and shadows
• ✨ Auto-Generation: AI generates artwork automatically as you draw - no buttons to press!
• 🎭 True Tracing Experience: Your sketch appears as a semi-transparent overlay on the AI-generated background
• 🔄 Toggle Views: Switch between showing your sketch overlay or the pure AI artwork
• ⚡ Responsive Drawing: Low-latency drawing experience using the Ink API with Pointer Events fallback
• 💾 Modern File Saving: Uses File System Access API with traditional download fallback
• ♿ Accessible Design: Full keyboard navigation and WCAG AA compliance

├── backend/
│   └── index.ts             # Main API endpoint with Gemini integration
├── frontend/
│   ├── index.html           # Main HTML template
│   ├── app.js              # Main application logic
│   ├── components/
│   │   ├── drawing-canvas.js # Drawing canvas Web Component
│   │   └── control-panel.js  # Control panel Web Component
│   └── style.css           # Custom 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. Access the Application: The application will be available at the HTTP endpoint URL provided by Val Town

1. Draw: Use your mouse, finger, or stylus to draw a simple sketch on the canvas
2. Watch: AI automatically generates artwork in the background as you draw (after a 500ms pause)
3. Toggle: Use the "Show AI Only" button to switch between overlay and pure AI views
4. Save: Download your generated image using the save button

• Ctrl/Cmd + N: Clear the canvas
• Ctrl/Cmd + S: Save the generated image
• Delete/Backspace: Clear canvas (when canvas is focused)

• 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