A creative web application that inverts the concept of tracing. Users draw simple sketches that are transformed by AI into rich, detailed artwork.

• Responsive Drawing Canvas: Low-latency drawing experience using the Ink API with Pointer Events fallback
• AI Image Generation: Powered by Google's Gemini 2.5 Flash Image Preview model
• 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. Generate: Click the "Generate" button to send your sketch to AI
3. Wait: The AI will transform your sketch into detailed artwork
4. Save: Download your generated image using the save button

• Ctrl/Cmd + N: Clear the canvas
• Ctrl/Cmd + Enter: Generate AI artwork
• 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