[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_243":244,"_245":246},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_106":87,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":59,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":31,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",31,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/index.ts","latestPath","fileId","3d8644ec-8390-11f0-97cb-0224a6c84d84","name","index.ts","fileType","http","content","import { Hono } from \"https://esm.sh/hono@4.0.10\";\nimport { GoogleGenerativeAI } from \"https://esm.sh/@google/generative-ai@0.21.0\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Initialize Gemini AI\nconst genAI = new GoogleGenerativeAI(Deno.env.get(\"GEMINI_API_KEY\") || \"\");\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API endpoint for AI image generation\napp.post(\"/api/generate\", async (c) => {\n try {\n const { imageData } = await c.req.json();\n\n if (!imageData || !imageData.startsWith(\"data:image/png;base64,\")) {\n return c.json({ error: \"Invalid imageData format\" }, 400);\n }\n\n const model = genAI.getGenerativeModel({\n model: \"gemini-2.5-flash-image-preview\",\n });\n\n const prompt =\n \"Complete this sketch into a playful, colorful, and high-quality artistic image. Transform the simple lines into a rich, detailed artwork while maintaining the essence of the original sketch. Be creative and add vibrant colors, textures, and details that bring the drawing to life. Keep the same minimal line drawing style.\";\n\n const imagePart = {\n inlineData: {\n data: imageData.split(\",\")[1], // Remove the data URI prefix\n mimeType: \"image/png\",\n },\n };\n\n const result = await model.generateContent([prompt, imagePart]);\n const response = result.response;\n\n if (!response.candidates || response.candidates.length === 0) {\n throw new Error(\"No candidates returned from AI model\");\n }\n\n const candidate = response.candidates[0];\n if (\n !candidate.content || !candidate.content.parts ||\n candidate.content.parts.length === 0\n ) {\n throw new Error(\"No content parts in AI response\");\n }\n\n const aiImageResponse = candidate.content.parts[0];\n\n return c.json({ result: aiImageResponse });\n } catch (error) {\n console.error(\"Error in AI image generation:\", error);\n return c.json(\n { error: \"Failed to generate image\", details: error.message },\n 500,\n );\n }\n});\n\n// Health check endpoint\napp.get(\"/api/health\", (c) => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;","import { Hono } from \"https://esm.sh/hono@4.0.10\";\nimport { Content, GoogleGenAI, Modality } from \"https://esm.sh/@google/genai\";\n\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Initialize Gemini AI\nconst genAI = new GoogleGenerativeAI(Deno.env.get(\"GEMINI_API_KEY\") || \"\");\n\n// Serve frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// API endpoint for AI image generation\napp.post(\"/api/generate\", async (c) => {\n try {\n const { imageData } = await c.req.json();\n\n if (!imageData || !imageData.startsWith(\"data:image/png;base64,\")) {\n return c.json({ error: \"Invalid imageData format\" }, 400);\n }\n\n const model = genAI.getGenerativeModel({\n model: \"gemini-2.5-flash-image-preview\",\n });\n\n const prompt =\n \"Complete this sketch into a playful, colorful, and high-quality artistic image. Transform the simple lines into a rich, detailed artwork while maintaining the essence of the original sketch. Be creative and add vibrant colors, textures, and details that bring the drawing to life. Keep the same minimal line drawing style.\";\n\n const imagePart = {\n inlineData: {\n data: imageData.split(\",\")[1], // Remove the data URI prefix\n mimeType: \"image/png\",\n },\n };\n\n const result = await model.generateContent([prompt, imagePart]);\n const response = result.response;\n\n if (!response.candidates || response.candidates.length === 0) {\n throw new Error(\"No candidates returned from AI model\");\n }\n\n const candidate = response.candidates[0];\n if (\n !candidate.content || !candidate.content.parts ||\n candidate.content.parts.length === 0\n ) {\n throw new Error(\"No content parts in AI response\");\n }\n\n const aiImageResponse = candidate.content.parts[0];\n\n return c.json({ result: aiImageResponse });\n } catch (error) {\n console.error(\"Error in AI image generation:\", error);\n return c.json(\n { error: \"Failed to generate image\", details: error.message },\n 500,\n );\n }\n});\n\n// Health check endpoint\napp.get(\"/api/health\", (c) => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;","createdAt",["D",1756333548132],"branchVersion","branchId","3d637076-838f-11f0-b8db-0224a6c84d84","id","3d631a54-838f-11f0-b8db-0224a6c84d84","tracey-mctraceface",["D",1756331168191],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Do a drawing and see it with Gemini Flash 2.5 image gen","imageUrl","25f41957-737e-448b-bae4-dec9937eed5b","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","f5d3fee2-e1c2-4f2b-b60d-716ec388aac8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_105":101},"org",{"_97":96,"_98":99,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",244,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","paulkinlan","handle","displayName","Paul Kinlan","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yWG9oT0R2UTMxam83NXp1d0RRaGJYVTY0aFYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":239,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":31,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":240,"_81":241,"_83":242,"_85":25},"tree",[165,167,174],"files",[165,166,167,168,169,170,171,172,173,174],"counts",{"_155":146,"_156":63,"_157":146,"_158":159,"_160":161},"contents",[128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":149,"_32":150,"_30":151,"_134":-5,"_42":43,"_41":152,"_136":59,"_39":153,"_13":146,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":154},{"_44":142,"_32":143,"_30":144,"_134":-5,"_42":43,"_41":138,"_136":59,"_39":145,"_13":146,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":148},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":25,"_39":137,"_13":138,"_34":20,"_36":139,"_24":25,"_140":-5,"_27":141},"3ad0f92a-8392-11f0-9ef8-0224a6c84d84","README.md","367c7216-8390-11f0-b7a9-0224a6c84d84","parentId",27,"latest",["D",1756332452360],3,"# Trace AI\n\nA creative web application that inverts the concept of tracing. Users draw simple sketches that are automatically transformed by AI into rich, detailed artwork appearing as a background layer.\n\n## Features\n\n- **Auto-Generation**: AI generates artwork automatically as you draw - no buttons to press!\n- **True Tracing Experience**: Your sketch appears as a semi-transparent overlay on the AI-generated background\n- **Responsive Drawing Canvas**: Low-latency drawing experience using the Ink API with Pointer Events fallback\n- **Toggle Views**: Switch between showing your sketch overlay or the pure AI artwork\n- **Modern File Saving**: Uses File System Access API with traditional download fallback\n- **Accessible Design**: Full keyboard navigation and WCAG AA compliance\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main API endpoint with Gemini integration\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── app.js # Main application logic\n│ ├── components/\n│ │ ├── drawing-canvas.js # Drawing canvas Web Component\n│ │ └── control-panel.js # Control panel Web Component\n│ └── style.css # Custom styles\n└── README.md\n```\n\n## Setup\n\n1. **Set the API Key**: Add your Google Gemini API key as an environment variable in Val Town:\n - Go to your Val Town settings\n - Add `GEMINI_API_KEY` with your Google AI Studio API key\n - Get your API key from: https://aistudio.google.com/app/apikey\n\n2. **Access the Application**: The application will be available at the HTTP endpoint URL provided by Val Town\n\n## Usage\n\n1. **Draw**: Use your mouse, finger, or stylus to draw a simple sketch on the canvas\n2. **Watch**: AI automatically generates artwork in the background as you draw (after a 500ms pause)\n3. **Toggle**: Use the \"Show AI Only\" button to switch between overlay and pure AI views\n4. **Save**: Download your generated image using the save button\n\n## Keyboard Shortcuts\n\n- `Ctrl/Cmd + N`: Clear the canvas\n- `Ctrl/Cmd + S`: Save the generated image\n- `Delete/Backspace`: Clear canvas (when canvas is focused)\n\n## Technical Details\n\n- **Frontend**: Vanilla JavaScript with Web Components, Tailwind CSS\n- **Backend**: Deno runtime on Val Town with Hono framework\n- **AI Model**: Google Gemini 2.5 Flash Image Preview\n- **Canvas**: HTML5 Canvas with optimized 2D context for low latency","label",[132],"4830327c-8390-11f0-a8ab-0224a6c84d84","frontend","9dca583b-83a8-4742-871a-2ec562118ff7",["D",1756331615801],0,"directory",[143],"3d8651f8-8390-11f0-97cb-0224a6c84d84","backend","2065d0b7-fa4f-4607-ab7b-13122a493db9",2,["D",1756331597912],[150],"pulls","branches","forks","envVars",{"_162":63,"_164":146},"connections",{"_162":146,"_163":146},"count","unfilledCount","emptyCount",{"_44":149,"_32":150,"_30":151,"_134":-5,"_42":43,"_41":152,"_136":59,"_39":236,"_13":146,"_34":147,"_36":-5,"_24":25,"_140":-5,"_176":237,"_27":238},{"_44":232,"_32":33,"_30":31,"_134":151,"_42":43,"_41":14,"_136":25,"_39":233,"_13":225,"_34":35,"_36":38,"_24":25,"_140":46,"_176":234,"_27":235},{"_44":142,"_32":143,"_30":144,"_134":-5,"_42":43,"_41":138,"_136":59,"_39":229,"_13":146,"_34":147,"_36":-5,"_24":25,"_140":-5,"_176":230,"_27":231},{"_44":224,"_32":214,"_30":207,"_134":144,"_42":43,"_41":225,"_136":59,"_39":226,"_13":146,"_34":147,"_36":-5,"_24":25,"_140":-5,"_176":227,"_27":228},{"_44":215,"_32":216,"_30":217,"_134":207,"_42":43,"_41":218,"_136":25,"_39":219,"_13":220,"_34":200,"_36":221,"_24":25,"_140":-5,"_176":222,"_27":223},{"_44":204,"_32":205,"_30":206,"_134":207,"_42":43,"_41":208,"_136":25,"_39":209,"_13":210,"_34":200,"_36":211,"_24":25,"_140":-5,"_176":212,"_27":213},{"_44":195,"_32":196,"_30":197,"_134":144,"_42":43,"_41":198,"_136":25,"_39":199,"_13":152,"_34":200,"_36":201,"_24":25,"_140":-5,"_176":202,"_27":203},{"_44":187,"_32":188,"_30":189,"_134":144,"_42":43,"_41":190,"_136":25,"_39":191,"_13":63,"_34":20,"_36":192,"_24":25,"_140":-5,"_176":193,"_27":194},{"_44":179,"_32":180,"_30":181,"_134":144,"_42":43,"_41":182,"_136":25,"_39":183,"_13":63,"_34":20,"_36":184,"_24":25,"_140":-5,"_176":185,"_27":186},{"_44":131,"_32":132,"_30":133,"_134":-5,"_42":43,"_41":135,"_136":25,"_39":175,"_13":138,"_34":20,"_36":139,"_24":25,"_140":-5,"_176":177,"_27":178},["D",1756332452360],"children",[],[132],"31313452-8392-11f0-a11d-0224a6c84d84","style.css","4cfcb9f6-8390-11f0-8750-0224a6c84d84",25,["D",1756332436210],"/* Custom styles for Trace AI */\n\n/* Ensure canvas has proper cursor for drawing */\ndrawing-canvas canvas {\n cursor: crosshair;\n touch-action: none; /* Prevent scrolling while drawing */\n}\n\n/* Canvas container for background image overlay */\ndrawing-canvas .relative {\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n border-radius: 0.5rem;\n overflow: hidden;\n}\n\n/* Focus styles for accessibility */\nbutton:focus,\ndrawing-canvas:focus {\n outline: 2px solid #3b82f6;\n outline-offset: 2px;\n}\n\n/* Loading animation */\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n/* Responsive canvas sizing */\ndrawing-canvas {\n display: block;\n width: 100%;\n max-width: 100%;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .border-gray-200 {\n border-color: #000;\n }\n \n .text-gray-600 {\n color: #000;\n }\n \n .bg-gray-50 {\n background-color: #fff;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .animate-spin {\n animation: none;\n }\n \n .transition-colors {\n transition: none;\n }\n}\n\n/* Print styles */\n@media print {\n #loadingModal,\n control-panel,\n #imageActions {\n display: none !important;\n }\n}",[],[143,180],"197549fc-8392-11f0-9a00-0224a6c84d84","index.html","48301986-8390-11f0-a8ab-0224a6c84d84",22,["D",1756332396395],"\n\n\n \n \n Trace AI - Draw with AI\n \n \n \n\n\n

Trace AI

Draw a simple sketch and watch AI transform it into art

\n\n

\n \n

Trace AI Canvas

\n \n

Your browser doesn't support the canvas element. Please use a modern browser to use Trace AI.

\n \n

\n \n \n \n \n

\n \n

\n\n \n

How to use Trace AI:

Draw a simple sketch on the canvas using your mouse, finger, or stylus
AI will automatically generate artwork as you draw (no need to click generate!)
Your sketch will appear as a semi-transparent overlay on the AI artwork
Use the \"Show AI Only\" button to toggle between views
Save your generated image to your device

\n\n \n \n\n \n\n",[],[143,188],"296b7002-8392-11f0-b3b1-0224a6c84d84","app.js","81144e02-8390-11f0-b11d-0224a6c84d84",24,["D",1756332423146],"script","// Import Web Components\nimport './components/drawing-canvas.js';\nimport './components/control-panel.js';\n\nclass TraceAIApp {\n constructor() {\n this.drawingCanvas = null;\n this.controlPanel = null;\n this.init();\n }\n\n init() {\n // Wait for DOM to be fully loaded\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => this.setup());\n } else {\n this.setup();\n }\n }\n\n setup() {\n // Get references to main components\n this.drawingCanvas = document.getElementById('drawingCanvas');\n this.controlPanel = document.getElementById('controlPanel');\n\n // Setup global event listeners\n this.setupGlobalEventListeners();\n \n // Setup keyboard shortcuts\n this.setupKeyboardShortcuts();\n \n // Setup accessibility features\n this.setupAccessibility();\n\n // Log initialization\n console.log('Trace AI initialized successfully');\n \n // Check for required APIs and show warnings if needed\n this.checkBrowserSupport();\n }\n\n setupGlobalEventListeners() {\n // Listen for successful image generation\n document.addEventListener('imageGenerated', (e) => {\n console.log('Image generated successfully', e.detail);\n this.trackEvent('image_generated');\n });\n\n // Listen for canvas clearing\n document.addEventListener('canvasCleared', () => {\n console.log('Canvas cleared');\n this.hideGeneratedImage();\n });\n\n // Handle window resize for responsive canvas\n window.addEventListener('resize', this.debounce(() => {\n this.handleResize();\n }, 250));\n\n // Handle visibility change to pause/resume if needed\n document.addEventListener('visibilitychange', () => {\n if (document.hidden) {\n console.log('App hidden');\n } else {\n console.log('App visible');\n }\n });\n }\n\n setupKeyboardShortcuts() {\n document.addEventListener('keydown', (e) => {\n // Global keyboard shortcuts\n if (e.ctrlKey || e.metaKey) {\n switch (e.key) {\n case 'n':\n // Ctrl/Cmd + N: Clear canvas\n e.preventDefault();\n if (this.drawingCanvas) {\n this.drawingCanvas.clear();\n }\n break;\n case 'Enter':\n // Ctrl/Cmd + Enter: No longer needed since auto-generation\n break;\n case 's':\n // Ctrl/Cmd + S: Save image if available\n e.preventDefault();\n const saveBtn = document.getElementById('saveButton');\n if (saveBtn && !saveBtn.classList.contains('hidden')) {\n saveBtn.click();\n }\n break;\n }\n }\n\n // Escape key to close modals\n if (e.key === 'Escape') {\n const modal = document.getElementById('loadingModal');\n if (modal && !modal.classList.contains('hidden')) {\n // Don't close loading modal with escape - let the process complete\n return;\n }\n }\n });\n }\n\n setupAccessibility() {\n // Add skip link for keyboard navigation\n const skipLink = document.createElement('a');\n skipLink.href = '#drawingCanvas';\n skipLink.textContent = 'Skip to drawing canvas';\n skipLink.className = 'sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-blue-600 text-white px-4 py-2 rounded-lg z-50';\n document.body.insertBefore(skipLink, document.body.firstChild);\n\n // Announce important state changes to screen readers\n this.createAriaLiveRegion();\n\n // Add focus management\n this.setupFocusManagement();\n }\n\n createAriaLiveRegion() {\n const liveRegion = document.createElement('div');\n liveRegion.id = 'ariaLiveRegion';\n liveRegion.setAttribute('aria-live', 'polite');\n liveRegion.setAttribute('aria-atomic', 'true');\n liveRegion.className = 'sr-only';\n document.body.appendChild(liveRegion);\n\n // Listen for events to announce\n document.addEventListener('imageGenerated', () => {\n this.announceToScreenReader('AI artwork has been generated successfully');\n });\n\n document.addEventListener('canvasCleared', () => {\n this.announceToScreenReader('Drawing canvas has been cleared');\n });\n }\n\n setupFocusManagement() {\n // Manage focus when modals open/close\n const loadingModal = document.getElementById('loadingModal');\n if (loadingModal) {\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.attributeName === 'class') {\n const isVisible = !loadingModal.classList.contains('hidden');\n if (isVisible) {\n // Store the currently focused element\n this.previousFocus = document.activeElement;\n // Focus the modal content\n const modalContent = loadingModal.querySelector('.bg-white');\n if (modalContent) {\n modalContent.focus();\n }\n } else if (this.previousFocus) {\n // Restore focus when modal closes\n this.previousFocus.focus();\n this.previousFocus = null;\n }\n }\n });\n });\n\n observer.observe(loadingModal, { attributes: true });\n }\n }\n\n checkBrowserSupport() {\n const warnings = [];\n\n // Check for Canvas support\n const canvas = document.createElement('canvas');\n if (!canvas.getContext) {\n warnings.push('Canvas is not supported in your browser');\n }\n\n // Check for Pointer Events\n if (!('PointerEvent' in window)) {\n warnings.push('Pointer Events are not supported - drawing may be less responsive');\n }\n\n // Check for File System Access API\n if (!('showSaveFilePicker' in window)) {\n console.info('File System Access API not supported - will use traditional download');\n }\n\n // Check for Ink API\n if ('ink' in navigator) {\n console.info('Ink API supported - enhanced drawing experience available');\n }\n\n // Show warnings if any\n if (warnings.length > 0) {\n console.warn('Browser compatibility issues:', warnings);\n this.showBrowserWarning(warnings);\n }\n }\n\n showBrowserWarning(warnings) {\n const warningDiv = document.createElement('div');\n warningDiv.className = 'bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4';\n warningDiv.innerHTML = `\n

\n \n

Browser Compatibility Notice

${warning}

\n `;\n\n const main = document.querySelector('main');\n if (main) {\n main.insertBefore(warningDiv, main.firstChild);\n }\n }\n\n handleResize() {\n // Handle responsive behavior if needed\n console.log('Window resized');\n }\n\n hideGeneratedImage() {\n if (this.drawingCanvas) {\n this.drawingCanvas.clearBackgroundImage();\n }\n \n const imageActions = document.getElementById('imageActions');\n if (imageActions) {\n imageActions.classList.add('hidden');\n }\n }\n\n announceToScreenReader(message) {\n const liveRegion = document.getElementById('ariaLiveRegion');\n if (liveRegion) {\n liveRegion.textContent = message;\n }\n }\n\n trackEvent(eventName, data = {}) {\n // Simple event tracking - could be extended with analytics\n console.log(`Event: ${eventName}`, data);\n }\n\n // Utility function for debouncing\n debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }\n}\n\n// Initialize the application\nnew TraceAIApp();",[],[143,196],"f6758ce6-8391-11f0-b9a4-0224a6c84d84","drawing-canvas.js","5bd0a88e-8390-11f0-ba68-0224a6c84d84","cd94c13a-b9d8-4f61-8b31-d9e22d3b1eef",21,["D",1756332337678],4,"class DrawingCanvas extends HTMLElement {\n constructor() {\n super();\n this.canvas = null;\n this.ctx = null;\n this.isDrawing = false;\n this.lastPoint = null;\n this.supportsInk = false;\n this.inkPresenter = null;\n this.backgroundImage = null;\n this.canvasOpacity = 0.7;\n this.container = null;\n }\n\n connectedCallback() {\n this.innerHTML = `\n

\n `;\n\n this.container = this.querySelector('div');\n this.canvas = this.querySelector('canvas');\n this.setupCanvas();\n this.setupEventListeners();\n this.checkInkSupport();\n }\n\n setupCanvas() {\n // Get 2D context with optimizations for low latency\n this.ctx = this.canvas.getContext('2d', {\n desynchronized: true,\n willReadFrequently: true\n });\n\n // Set drawing properties\n this.ctx.strokeStyle = '#000000';\n this.ctx.lineWidth = 3;\n this.ctx.lineCap = 'round';\n this.ctx.lineJoin = 'round';\n \n // Start with transparent background for overlay effect\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n }\n\n checkInkSupport() {\n // Check for Ink API support\n if ('ink' in navigator && 'requestPresenter' in navigator.ink) {\n this.supportsInk = true;\n this.setupInkAPI();\n }\n }\n\n async setupInkAPI() {\n try {\n this.inkPresenter = await navigator.ink.requestPresenter({\n presentationArea: this.canvas\n });\n console.log('Ink API initialized successfully');\n } catch (error) {\n console.warn('Failed to initialize Ink API:', error);\n this.supportsInk = false;\n }\n }\n\n setupEventListeners() {\n // Pointer events (primary method)\n this.canvas.addEventListener('pointerdown', this.handlePointerDown.bind(this));\n this.canvas.addEventListener('pointermove', this.handlePointerMove.bind(this));\n this.canvas.addEventListener('pointerup', this.handlePointerUp.bind(this));\n this.canvas.addEventListener('pointerleave', this.handlePointerUp.bind(this));\n\n // Keyboard support for accessibility\n this.canvas.addEventListener('keydown', this.handleKeyDown.bind(this));\n\n // Prevent context menu on right click\n this.canvas.addEventListener('contextmenu', e => e.preventDefault());\n\n // Prevent scrolling on touch devices\n this.canvas.addEventListener('touchstart', e => e.preventDefault());\n this.canvas.addEventListener('touchmove', e => e.preventDefault());\n this.canvas.addEventListener('touchend', e => e.preventDefault());\n }\n\n handlePointerDown(e) {\n this.isDrawing = true;\n const rect = this.canvas.getBoundingClientRect();\n const scaleX = this.canvas.width / rect.width;\n const scaleY = this.canvas.height / rect.height;\n \n this.lastPoint = {\n x: (e.clientX - rect.left) * scaleX,\n y: (e.clientY - rect.top) * scaleY\n };\n\n // Start path for Ink API if supported\n if (this.supportsInk && this.inkPresenter) {\n this.inkPresenter.updateInkTrailStartPoint(e, {\n color: this.ctx.strokeStyle,\n diameter: this.ctx.lineWidth\n });\n }\n\n // Set pointer capture for better tracking\n this.canvas.setPointerCapture(e.pointerId);\n }\n\n handlePointerMove(e) {\n if (!this.isDrawing) return;\n\n const rect = this.canvas.getBoundingClientRect();\n const scaleX = this.canvas.width / rect.width;\n const scaleY = this.canvas.height / rect.height;\n \n const currentPoint = {\n x: (e.clientX - rect.left) * scaleX,\n y: (e.clientY - rect.top) * scaleY\n };\n\n // Draw line from last point to current point\n this.ctx.beginPath();\n this.ctx.moveTo(this.lastPoint.x, this.lastPoint.y);\n this.ctx.lineTo(currentPoint.x, currentPoint.y);\n this.ctx.stroke();\n\n // Update Ink API if supported\n if (this.supportsInk && this.inkPresenter) {\n this.inkPresenter.updateInkTrailStartPoint(e, {\n color: this.ctx.strokeStyle,\n diameter: this.ctx.lineWidth\n });\n }\n\n this.lastPoint = currentPoint;\n }\n\n handlePointerUp(e) {\n if (!this.isDrawing) return;\n \n this.isDrawing = false;\n this.lastPoint = null;\n\n // Release pointer capture\n if (this.canvas.hasPointerCapture(e.pointerId)) {\n this.canvas.releasePointerCapture(e.pointerId);\n }\n\n // Dispatch custom event for drawing completion\n this.dispatchEvent(new CustomEvent('drawingComplete', {\n bubbles: true,\n detail: { canvas: this.canvas }\n }));\n }\n\n handleKeyDown(e) {\n // Keyboard shortcuts for accessibility\n switch (e.key) {\n case 'Delete':\n case 'Backspace':\n this.clear();\n e.preventDefault();\n break;\n case 'Enter':\n case ' ':\n // Trigger generate if available\n const generateBtn = document.querySelector('#generateButton');\n if (generateBtn && !generateBtn.disabled) {\n generateBtn.click();\n }\n e.preventDefault();\n break;\n }\n }\n\n clear() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n \n // Dispatch clear event\n this.dispatchEvent(new CustomEvent('canvasCleared', {\n bubbles: true\n }));\n }\n\n getImageData() {\n // Create a temporary canvas with white background for AI processing\n const tempCanvas = document.createElement('canvas');\n tempCanvas.width = this.canvas.width;\n tempCanvas.height = this.canvas.height;\n const tempCtx = tempCanvas.getContext('2d');\n \n // Fill with white background\n tempCtx.fillStyle = '#ffffff';\n tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n \n // Draw the user's sketch on top\n tempCtx.drawImage(this.canvas, 0, 0);\n \n return tempCanvas.toDataURL('image/png');\n }\n\n isEmpty() {\n // Check if canvas is empty (all transparent pixels)\n const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);\n const data = imageData.data;\n \n for (let i = 3; i < data.length; i += 4) {\n // Check alpha channel - if any pixel has alpha > 0, canvas is not empty\n if (data[i] > 0) {\n return false;\n }\n }\n return true;\n }\n\n setBackgroundImage(imageSrc) {\n if (this.container) {\n this.container.style.backgroundImage = `url(${imageSrc})`;\n this.container.style.backgroundSize = 'contain';\n this.container.style.backgroundRepeat = 'no-repeat';\n this.container.style.backgroundPosition = 'center';\n }\n }\n\n clearBackgroundImage() {\n if (this.container) {\n this.container.style.backgroundImage = 'none';\n }\n }\n\n setOpacity(opacity) {\n this.canvasOpacity = opacity;\n if (this.canvas) {\n this.canvas.style.opacity = opacity;\n }\n }\n}\n\ncustomElements.define('drawing-canvas', DrawingCanvas);",[],[143,214,205],"components","e44be7b8-8391-11f0-a879-0224a6c84d84","control-panel.js","6c8b3996-8390-11f0-8935-0224a6c84d84",17,["D",1756332307206],8,"class ControlPanel extends HTMLElement {\n constructor() {\n super();\n this.drawingCanvas = null;\n this.currentRequestId = 0;\n this.isGenerating = false;\n this.showingAIOnly = false;\n this.generationTimeout = null;\n }\n\n connectedCallback() {\n this.innerHTML = `\n

\n \n \n \n

\n \n

💡 Tip: AI generates automatically as you draw. Toggle view to see the full AI image.

\n `;\n\n this.setupEventListeners();\n this.findDrawingCanvas();\n }\n\n findDrawingCanvas() {\n // Find the drawing canvas element\n this.drawingCanvas = document.querySelector('drawing-canvas');\n \n if (this.drawingCanvas) {\n // Listen for drawing events to auto-generate\n this.drawingCanvas.addEventListener('drawingComplete', this.handleDrawingComplete.bind(this));\n this.drawingCanvas.addEventListener('canvasCleared', this.handleCanvasCleared.bind(this));\n }\n }\n\n setupEventListeners() {\n const clearButton = this.querySelector('#clearButton');\n const toggleViewButton = this.querySelector('#toggleViewButton');\n\n clearButton.addEventListener('click', this.handleClear.bind(this));\n toggleViewButton.addEventListener('click', this.handleToggleView.bind(this));\n\n // Initial button state\n this.updateButtonStates();\n }\n\n handleClear() {\n if (this.drawingCanvas) {\n this.drawingCanvas.clear();\n }\n // Cancel any pending generation\n if (this.generationTimeout) {\n clearTimeout(this.generationTimeout);\n this.generationTimeout = null;\n }\n this.currentRequestId++;\n this.hideGeneratedImage();\n }\n\n handleToggleView() {\n this.showingAIOnly = !this.showingAIOnly;\n const toggleButton = this.querySelector('#toggleViewButton');\n \n if (this.drawingCanvas) {\n if (this.showingAIOnly) {\n this.drawingCanvas.setOpacity(0);\n toggleButton.innerHTML = '✏️ Show Sketch';\n toggleButton.setAttribute('aria-label', 'Show sketch overlay on AI image');\n } else {\n this.drawingCanvas.setOpacity(0.7);\n toggleButton.innerHTML = '👁️ Show AI Only';\n toggleButton.setAttribute('aria-label', 'Show only AI generated image');\n }\n }\n }\n\n handleDrawingComplete() {\n // Debounce generation requests - wait 500ms after user stops drawing\n if (this.generationTimeout) {\n clearTimeout(this.generationTimeout);\n }\n \n this.generationTimeout = setTimeout(() => {\n this.handleGenerate();\n }, 500);\n }\n\n handleCanvasCleared() {\n this.hideGeneratedImage();\n this.updateButtonStates();\n }\n\n async handleGenerate() {\n if (!this.drawingCanvas) {\n return;\n }\n\n if (this.drawingCanvas.isEmpty()) {\n return;\n }\n\n // Increment request ID to handle concurrent requests\n const requestId = ++this.currentRequestId;\n \n try {\n this.isGenerating = true;\n this.updateButtonStates();\n\n // Get image data from canvas\n const imageData = this.drawingCanvas.getImageData();\n\n // Send to API\n const response = await fetch('/api/generate', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ imageData })\n });\n\n // Check if this request is still the most recent\n if (requestId !== this.currentRequestId) {\n console.log('Discarding outdated generation request');\n return;\n }\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || `HTTP ${response.status}`);\n }\n\n const data = await response.json();\n \n if (!data.result || !data.result.inlineData) {\n throw new Error('Invalid response format from AI service');\n }\n\n // Only display if this is still the most recent request\n if (requestId === this.currentRequestId) {\n this.displayGeneratedImage(data.result.inlineData);\n }\n\n } catch (error) {\n // Only show error if this is still the most recent request\n if (requestId === this.currentRequestId) {\n console.error('Generation error:', error);\n this.showError(`Failed to generate image: ${error.message}`);\n }\n } finally {\n if (requestId === this.currentRequestId) {\n this.isGenerating = false;\n this.updateButtonStates();\n }\n }\n }\n\n displayGeneratedImage(inlineData) {\n // Set the background image of the drawing canvas container\n if (this.drawingCanvas) {\n this.drawingCanvas.setBackgroundImage(`data:${inlineData.mimeType};base64,${inlineData.data}`);\n }\n \n // Show save button\n const imageActions = document.getElementById('imageActions');\n if (imageActions) {\n imageActions.classList.remove('hidden');\n \n // Setup save functionality\n const saveButton = document.getElementById('saveButton');\n if (saveButton) {\n saveButton.onclick = () => this.saveImage(`data:${inlineData.mimeType};base64,${inlineData.data}`);\n }\n }\n\n // Dispatch event for successful generation\n this.dispatchEvent(new CustomEvent('imageGenerated', {\n bubbles: true,\n detail: { imageData: inlineData }\n }));\n }\n\n async saveImage(imageSrc) {\n try {\n // Try modern File System Access API first\n if ('showSaveFilePicker' in window) {\n const fileHandle = await window.showSaveFilePicker({\n suggestedName: `trace-ai-${Date.now()}.png`,\n types: [{\n description: 'PNG Images',\n accept: { 'image/png': ['.png'] }\n }]\n });\n\n // Convert data URL to blob\n const response = await fetch(imageSrc);\n const blob = await response.blob();\n\n // Write to file\n const writable = await fileHandle.createWritable();\n await writable.write(blob);\n await writable.close();\n\n this.showSuccess('Image saved successfully!');\n } else {\n // Fallback to traditional download\n const link = document.createElement('a');\n link.href = imageSrc;\n link.download = `trace-ai-${Date.now()}.png`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n\n this.showSuccess('Image downloaded successfully!');\n }\n } catch (error) {\n if (error.name === 'AbortError') {\n // User cancelled the save dialog\n return;\n }\n console.error('Save error:', error);\n this.showError('Failed to save image');\n }\n }\n\n updateButtonStates() {\n const clearButton = this.querySelector('#clearButton');\n const toggleViewButton = this.querySelector('#toggleViewButton');\n \n if (!this.drawingCanvas) return;\n\n const isEmpty = this.drawingCanvas.isEmpty();\n \n if (clearButton) {\n clearButton.disabled = isEmpty && !this.isGenerating;\n }\n \n if (toggleViewButton) {\n toggleViewButton.disabled = isEmpty;\n }\n }\n\n hideGeneratedImage() {\n if (this.drawingCanvas) {\n this.drawingCanvas.clearBackgroundImage();\n }\n \n const imageActions = document.getElementById('imageActions');\n if (imageActions) {\n imageActions.classList.add('hidden');\n }\n }\n\n showError(message) {\n // Create temporary error notification\n const notification = document.createElement('div');\n notification.className = 'fixed top-4 right-4 bg-red-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 max-w-sm';\n notification.innerHTML = `\n

\n ❌\n ${message}\n

\n `;\n \n document.body.appendChild(notification);\n \n // Remove after 5 seconds\n setTimeout(() => {\n if (notification.parentNode) {\n notification.parentNode.removeChild(notification);\n }\n }, 5000);\n }\n\n showSuccess(message) {\n // Create temporary success notification\n const notification = document.createElement('div');\n notification.className = 'fixed top-4 right-4 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg z-50 max-w-sm';\n notification.innerHTML = `\n

\n ✅\n ${message}\n

\n `;\n \n document.body.appendChild(notification);\n \n // Remove after 3 seconds\n setTimeout(() => {\n if (notification.parentNode) {\n notification.parentNode.removeChild(notification);\n }\n }, 3000);\n }\n}\n\ncustomElements.define('control-panel', ControlPanel);",[],[143,214,216],"5bd0c210-8390-11f0-ba68-0224a6c84d84",5,["D",1756331648731],[169,170],[143,214],["D",1756331615801],[168,171,172,173],[143],"c7f28218-8394-11f0-9869-0224a6c84d84",["D",1756333548132],[],[150,33],["D",1756331597912],[166],[150],["D",1756331168191],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":56,"_102":103,"_104":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_125":276,"_277":278,"_279":280,"_281":25,"_282":25,"_283":25,"_284":59,"_285":-5,"_286":-7,"_287":-7,"_288":146,"_289":25,"_290":25,"_291":-5,"_292":25,"_293":25,"_294":25,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":87,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Trace AI Canvas

How to use Trace AI:

Generating Art...

Browser Compatibility Notice

Diff · v31