Trace AI

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_246":247,"_248":249},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_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",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_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",61,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/style.css","latestPath","fileId","4cfcb9f6-8390-11f0-8750-0224a6c84d84","name","style.css","fileType","content","/* Minimal Canvas-focused styles */\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.canvas-workspace {\n max-width: 100%;\n max-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.canvas-controls {\n background: white;\n padding: 12px 16px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n}\n\n/* Canvas container */\ndrawing-canvas {\n display: block;\n position: relative;\n}\n\ndrawing-canvas .canvas-container {\n position: relative;\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n overflow: hidden;\n}\n\n/* Canvas element */\ndrawing-canvas canvas {\n display: block;\n cursor: crosshair;\n touch-action: none;\n position: relative;\n z-index: 2;\n}\n\n/* Focus styles */\nbutton:focus,\nselect: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 */\n@media (max-width: 768px) {\n .canvas-controls {\n flex-direction: column;\n gap: 12px;\n }\n \n .canvas-controls .flex {\n justify-content: center;\n }\n \n .canvas-controls .ml-auto {\n margin-left: 0;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .canvas-controls {\n border: 2px solid #000;\n }\n \n drawing-canvas .canvas-container {\n border: 2px solid #000;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .animate-spin {\n animation: none;\n }\n \n button {\n transition: none;\n }\n}","/* Minimal Canvas-focused styles */\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.canvas-workspace {\n max-width: 100%;\n max-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.canvas-controls {\n background: white;\n padding: 12px 16px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n}\n\n/* Canvas container */\ndrawing-canvas {\n display: block;\n position: relative;\n}\n\ndrawing-canvas .canvas-container {\n position: relative;\n background: white;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n border: 1px solid #e5e7eb;\n overflow: hidden;\n transition: box-shadow 0.3s ease, transform 0.3s ease;\n}\n\n/* Subtle generation state */\ndrawing-canvas .canvas-container.generating {\n box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1);\n animation: subtle-pulse 2s ease-in-out infinite;\n}\n\n/* Generation overlay */\ndrawing-canvas .generation-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, \n rgba(59, 130, 246, 0.02) 0%, \n rgba(147, 197, 253, 0.03) 50%, \n rgba(59, 130, 246, 0.02) 100%);\n opacity: 0;\n pointer-events: none;\n z-index: 1;\n transition: opacity 0.5s ease;\n}\n\ndrawing-canvas .generation-overlay.active {\n opacity: 1;\n animation: gentle-shimmer 3s ease-in-out infinite;\n}\n\n/* Canvas element */\ndrawing-canvas canvas {\n display: block;\n cursor: crosshair;\n touch-action: none;\n position: relative;\n z-index: 2;\n}\n\n/* Focus styles */\nbutton:focus,\nselect: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 */\n@media (max-width: 768px) {\n .canvas-controls {\n flex-direction: column;\n gap: 12px;\n }\n \n .canvas-controls .flex {\n justify-content: center;\n }\n \n .canvas-controls .ml-auto {\n margin-left: 0;\n }\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n .canvas-controls {\n border: 2px solid #000;\n }\n \n drawing-canvas .canvas-container {\n border: 2px solid #000;\n }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .animate-spin {\n animation: none;\n }\n \n button {\n transition: none;\n }\n}","createdAt",["D",1756335760430],"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","3d8644ec-8390-11f0-97cb-0224a6c84d84","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":55,"_102":103,"_104":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_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",{"_43":44,"_32":45,"_38":242,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_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":243,"_81":244,"_83":245,"_85":25},"tree",[166,168,175],"files",[166,167,168,169,170,171,172,173,174,175],"counts",{"_156":147,"_157":63,"_158":147,"_159":160,"_161":162},"contents",[128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":150,"_32":151,"_30":152,"_134":-5,"_41":42,"_40":153,"_136":59,"_38":154,"_13":147,"_34":148,"_35":-5,"_24":25,"_140":-5,"_27":155},{"_43":142,"_32":143,"_30":144,"_134":-5,"_41":42,"_40":145,"_136":59,"_38":146,"_13":147,"_34":148,"_35":-5,"_24":25,"_140":-5,"_27":149},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":137,"_13":138,"_34":20,"_35":139,"_24":25,"_140":-5,"_27":141},"d268af04-8396-11f0-b02f-0224a6c84d84","README.md","367c7216-8390-11f0-b7a9-0224a6c84d84","parentId",52,"latest",["D",1756334424678],7,"# Trace AI\n\nA minimal drawing application where AI automatically generates artwork beneath your sketches as you draw.\n\n## Features\n\n- **🎯 Canvas-Focused**: Clean, minimal interface focused purely on the drawing experience\n- **📏 Configurable Canvas Size**: Choose from 512x512, 768x768, or 1024x1024 pixels\n- **✨ Auto-Generation**: AI generates artwork automatically as you draw\n- **🎭 Exact Size Matching**: Canvas and AI output are exactly the same dimensions\n- **🔄 Toggle Views**: Switch between sketch overlay and pure AI artwork\n- **💾 Direct Save**: Save the AI-generated artwork directly\n- **⚡ Responsive Drawing**: Low-latency drawing with Ink API support\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # API endpoint with Gemini integration\n├── frontend/\n│ ├── index.html # Minimal HTML interface\n│ ├── app.js # Main application logic\n│ ├── components/\n│ │ ├── drawing-canvas.js # Canvas Web Component with size control\n│ │ └── control-panel.js # Minimal control panel\n│ └── style.css # Clean, minimal 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. **Select Size**: Choose your preferred canvas size (512x512, 768x768, or 1024x1024)\n2. **Draw**: Start sketching - AI automatically generates artwork underneath\n3. **Toggle**: Use \"Show AI Only\" to see the pure AI artwork or your sketch overlay\n4. **Save**: Click \"Save\" to download the AI-generated image\n\n## Controls\n\n- **Clear**: Remove all drawing and generated artwork\n- **Show AI Only / Show Sketch**: Toggle between views\n- **Save**: Download the current AI-generated artwork\n- **Canvas Size**: Change the canvas dimensions\n\n## Keyboard Shortcuts\n\n- `Ctrl/Cmd + N`: Clear the canvas\n- `Ctrl/Cmd + S`: Save the generated image\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",3,["D",1756331615801],0,"directory",[143],"3d8651f8-8390-11f0-97cb-0224a6c84d84","backend","2065d0b7-fa4f-4607-ab7b-13122a493db9",2,["D",1756331597912],[151],"pulls","branches","forks","envVars",{"_163":63,"_165":147},"connections",{"_163":147,"_164":147},"count","unfilledCount","emptyCount",{"_43":150,"_32":151,"_30":152,"_134":-5,"_41":42,"_40":153,"_136":59,"_38":239,"_13":147,"_34":148,"_35":-5,"_24":25,"_140":-5,"_177":240,"_27":241},{"_43":230,"_32":231,"_30":57,"_134":152,"_41":42,"_40":232,"_136":25,"_38":233,"_13":234,"_34":235,"_35":236,"_24":25,"_140":45,"_177":237,"_27":238},{"_43":142,"_32":143,"_30":144,"_134":-5,"_41":42,"_40":145,"_136":59,"_38":227,"_13":147,"_34":148,"_35":-5,"_24":25,"_140":-5,"_177":228,"_27":229},{"_43":222,"_32":212,"_30":205,"_134":144,"_41":42,"_40":223,"_136":59,"_38":224,"_13":147,"_34":148,"_35":-5,"_24":25,"_140":-5,"_177":225,"_27":226},{"_43":213,"_32":214,"_30":215,"_134":205,"_41":42,"_40":216,"_136":25,"_38":217,"_13":218,"_34":198,"_35":219,"_24":25,"_140":-5,"_177":220,"_27":221},{"_43":202,"_32":203,"_30":204,"_134":205,"_41":42,"_40":206,"_136":25,"_38":207,"_13":208,"_34":198,"_35":209,"_24":25,"_140":-5,"_177":210,"_27":211},{"_43":193,"_32":194,"_30":195,"_134":144,"_41":42,"_40":196,"_136":25,"_38":197,"_13":145,"_34":198,"_35":199,"_24":25,"_140":-5,"_177":200,"_27":201},{"_43":185,"_32":186,"_30":187,"_134":144,"_41":42,"_40":188,"_136":25,"_38":189,"_13":145,"_34":20,"_35":190,"_24":25,"_140":-5,"_177":191,"_27":192},{"_43":180,"_32":33,"_30":31,"_134":144,"_41":42,"_40":14,"_136":25,"_38":181,"_13":182,"_34":20,"_35":37,"_24":25,"_140":-5,"_177":183,"_27":184},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":176,"_13":138,"_34":20,"_35":139,"_24":25,"_140":-5,"_177":178,"_27":179},["D",1756334424678],"children",[],[132],"ee937454-8399-11f0-93d1-0224a6c84d84",["D",1756335760430],4,[],[143,33],"97c232bc-8396-11f0-a738-0224a6c84d84","index.html","48301986-8390-11f0-a8ab-0224a6c84d84",44,["D",1756334326280],"\n\n\n \n \n Trace AI\n \n \n \n\n\n

\n \n

\n Canvas Size:\n \n \n

\n \n \n \n \n \n

\n\n \n \n \n

\n\n \n

\n Generating...\n

\n\n \n\n",[],[143,186],"bf34adca-8396-11f0-b1cf-0224a6c84d84","app.js","81144e02-8390-11f0-b11d-0224a6c84d84",49,["D",1756334392458],"script","// Import Web Components\nimport './components/drawing-canvas.js';\nimport './components/control-panel.js';\n\nclass TraceAIApp {\n constructor() {\n this.init();\n }\n\n init() {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => this.setup());\n } else {\n this.setup();\n }\n }\n\n setup() {\n // Initialize control panel\n const controlPanel = document.createElement('control-panel');\n document.body.appendChild(controlPanel);\n\n // Setup keyboard shortcuts\n this.setupKeyboardShortcuts();\n \n console.log('Trace AI initialized');\n }\n\n setupKeyboardShortcuts() {\n document.addEventListener('keydown', (e) => {\n if (e.ctrlKey || e.metaKey) {\n switch (e.key) {\n case 'n':\n e.preventDefault();\n const clearBtn = document.getElementById('clearButton');\n if (clearBtn && !clearBtn.disabled) {\n clearBtn.click();\n }\n break;\n case 's':\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 }\n}\n\n// Initialize the application\nnew TraceAIApp();",[],[143,194],"de58e786-8399-11f0-8545-0224a6c84d84","drawing-canvas.js","5bd0a88e-8390-11f0-ba68-0224a6c84d84","cd94c13a-b9d8-4f61-8b31-d9e22d3b1eef",58,["D",1756335733201],8,"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 this.canvasSize = 1024; // Default size\n }\n\n connectedCallback() {\n this.render();\n this.setupCanvas();\n this.setupEventListeners();\n this.checkInkSupport();\n }\n\n render() {\n this.innerHTML = `\n

\n `;\n\n this.container = this.querySelector('.canvas-container');\n this.canvas = this.querySelector('canvas');\n this.overlay = this.querySelector('.generation-overlay');\n }\n\n setCanvasSize(size) {\n this.canvasSize = parseInt(size);\n this.render();\n this.setupCanvas();\n this.setupEventListeners();\n this.checkInkSupport();\n \n // Dispatch event for size change\n this.dispatchEvent(new CustomEvent('canvasSizeChanged', {\n bubbles: true,\n detail: { size: this.canvasSize }\n }));\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 = `${this.canvasSize}px ${this.canvasSize}px`;\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 showGenerationState(isGenerating) {\n if (this.container && this.overlay) {\n if (isGenerating) {\n this.container.classList.add('generating');\n this.overlay.classList.add('active');\n } else {\n this.container.classList.remove('generating');\n this.overlay.classList.remove('active');\n }\n }\n }\n}\n\ncustomElements.define('drawing-canvas', DrawingCanvas);",[],[143,212,203],"components","e3f3d110-8399-11f0-912d-0224a6c84d84","control-panel.js","6c8b3996-8390-11f0-8935-0224a6c84d84",60,["D",1756335742602],13,"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.setupEventListeners();\n this.findDrawingCanvas();\n }\n\n findDrawingCanvas() {\n this.drawingCanvas = document.querySelector(\"drawing-canvas\");\n\n if (this.drawingCanvas) {\n this.drawingCanvas.addEventListener(\n \"drawingComplete\",\n this.handleDrawingComplete.bind(this),\n );\n this.drawingCanvas.addEventListener(\n \"canvasCleared\",\n this.handleCanvasCleared.bind(this),\n );\n this.drawingCanvas.addEventListener(\n \"canvasSizeChanged\",\n this.handleCanvasSizeChanged.bind(this),\n );\n }\n }\n\n setupEventListeners() {\n // Canvas size selector\n const canvasSizeSelect = document.getElementById(\"canvasSize\");\n if (canvasSizeSelect) {\n canvasSizeSelect.addEventListener(\"change\", (e) => {\n if (this.drawingCanvas) {\n this.drawingCanvas.setCanvasSize(e.target.value);\n }\n });\n }\n\n // Control buttons\n const clearButton = document.getElementById(\"clearButton\");\n const toggleViewButton = document.getElementById(\"toggleViewButton\");\n const saveButton = document.getElementById(\"saveButton\");\n\n if (clearButton) {\n clearButton.addEventListener(\"click\", this.handleClear.bind(this));\n }\n\n if (toggleViewButton) {\n toggleViewButton.addEventListener(\n \"click\",\n this.handleToggleView.bind(this),\n );\n }\n\n if (saveButton) {\n saveButton.addEventListener(\"click\", this.handleSave.bind(this));\n }\n\n this.updateButtonStates();\n }\n\n handleClear() {\n if (this.drawingCanvas) {\n this.drawingCanvas.clear();\n }\n\n if (this.generationTimeout) {\n clearTimeout(this.generationTimeout);\n this.generationTimeout = null;\n }\n\n this.currentRequestId++;\n this.hideGeneratedImage();\n }\n\n handleToggleView() {\n this.showingAIOnly = !this.showingAIOnly;\n const toggleButton = document.getElementById(\"toggleViewButton\");\n\n if (this.drawingCanvas) {\n if (this.showingAIOnly) {\n this.drawingCanvas.setOpacity(0);\n toggleButton.textContent = \"Show Sketch\";\n } else {\n this.drawingCanvas.setOpacity(0.7);\n toggleButton.textContent = \"Show AI Only\";\n }\n }\n }\n\n handleSave() {\n // Get the current background image and save it\n if (this.drawingCanvas && this.drawingCanvas.container) {\n const bgImage = this.drawingCanvas.container.style.backgroundImage;\n if (bgImage && bgImage !== \"none\") {\n const imageUrl = bgImage.slice(5, -2); // Remove 'url(\"' and '\")'\n this.saveImage(imageUrl);\n }\n }\n }\n\n handleDrawingComplete() {\n if (this.generationTimeout) {\n clearTimeout(this.generationTimeout);\n }\n\n this.generationTimeout = setTimeout(() => {\n this.handleGenerate();\n }, 1000);\n }\n\n handleCanvasCleared() {\n this.hideGeneratedImage();\n this.updateButtonStates();\n }\n\n handleCanvasSizeChanged() {\n // Clear any existing background when size changes\n this.hideGeneratedImage();\n this.updateButtonStates();\n }\n\n async handleGenerate() {\n if (!this.drawingCanvas || this.drawingCanvas.isEmpty()) {\n return;\n }\n\n const requestId = ++this.currentRequestId;\n\n try {\n this.isGenerating = true;\n this.showLoadingIndicator(true);\n this.updateButtonStates();\n \n // Show subtle generation state on canvas\n if (this.drawingCanvas) {\n this.drawingCanvas.showGenerationState(true);\n }\n\n const imageData = this.drawingCanvas.getImageData();\n\n const response = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ imageData }),\n });\n\n if (requestId !== this.currentRequestId) {\n return; // Outdated request\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 if (requestId === this.currentRequestId) {\n this.displayGeneratedImage(data.result.inlineData);\n }\n } catch (error) {\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.showLoadingIndicator(false);\n this.updateButtonStates();\n \n // Hide generation state on canvas\n if (this.drawingCanvas) {\n this.drawingCanvas.showGenerationState(false);\n }\n }\n }\n }\n\n displayGeneratedImage(inlineData) {\n if (this.drawingCanvas) {\n this.drawingCanvas.setBackgroundImage(\n `data:${inlineData.mimeType};base64,${inlineData.data}`,\n );\n }\n\n const saveButton = document.getElementById(\"saveButton\");\n if (saveButton) {\n saveButton.classList.remove(\"hidden\");\n }\n\n this.dispatchEvent(\n new CustomEvent(\"imageGenerated\", {\n bubbles: true,\n detail: { imageData: inlineData },\n }),\n );\n }\n\n hideGeneratedImage() {\n if (this.drawingCanvas) {\n this.drawingCanvas.clearBackgroundImage();\n }\n\n const saveButton = document.getElementById(\"saveButton\");\n if (saveButton) {\n saveButton.classList.add(\"hidden\");\n }\n }\n\n updateButtonStates() {\n const clearButton = document.getElementById(\"clearButton\");\n const toggleViewButton = document.getElementById(\"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 showLoadingIndicator(show) {\n const indicator = document.getElementById(\"loadingIndicator\");\n if (indicator) {\n if (show) {\n indicator.classList.remove(\"hidden\");\n } else {\n indicator.classList.add(\"hidden\");\n }\n }\n }\n\n async saveImage(imageSrc) {\n try {\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 const response = await fetch(imageSrc);\n const blob = await response.blob();\n\n const writable = await fileHandle.createWritable();\n await writable.write(blob);\n await writable.close();\n } else {\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 } catch (error) {\n if (error.name !== \"AbortError\") {\n console.error(\"Save error:\", error);\n }\n }\n }\n\n showError(message) {\n const indicator = document.getElementById(\"loadingIndicator\");\n if (indicator) {\n indicator.innerHTML = `\n

\n Error: ${message}\n

\n `;\n indicator.classList.remove(\"hidden\");\n\n setTimeout(() => {\n indicator.classList.add(\"hidden\");\n indicator.innerHTML = `\n

\n Generating...\n

\n `;\n }, 3000);\n }\n }\n}\n\ncustomElements.define(\"control-panel\", ControlPanel);",[],[143,212,214],"5bd0c210-8390-11f0-ba68-0224a6c84d84",5,["D",1756331648731],[170,171],[143,212],["D",1756331615801],[169,172,173,174],[143],"c8cbce8e-8398-11f0-bc3a-0224a6c84d84","index.ts",56,["D",1756335267543],16,"http","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 ai = new GoogleGenAI({ apiKey: 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 selectedModel = \"gemini-2.5-flash-image-preview\";\n const prompt = `\nThe user has given you a sketch to fill in with a playful, colorful, and high-quality artistic image. Transform the simple lines into a rich, detailed artwork while maintaining the structure of the original sketch. Be creative and add vibrant colors, textures, and details that bring the drawing to life. \n \nThe image MUST match the line drawing.`;\n\n const imagePart = {\n inlineData: {\n data: imageData.split(\",\")[1], // Remove the data URI prefix\n mimeType: \"image/png\",\n },\n };\n\n let contents: Content[] = [\n {\n role: \"USER\",\n parts: [\n {\n text: prompt,\n },\n ],\n },\n ];\n\n if (imagePart) {\n contents = [\n {\n role: \"USER\",\n parts: [imagePart],\n },\n {\n role: \"USER\",\n parts: [\n {\n text: `${prompt}`,\n },\n ],\n },\n ];\n }\n\n const response = await ai.models.generateContent({\n model: selectedModel,\n contents,\n config: {\n responseModalities: [Modality.TEXT, Modality.IMAGE],\n },\n });\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;",[],[151,231],["D",1756331597912],[167],[151],["D",1756331168191],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_125":279,"_280":281,"_282":283,"_284":25,"_285":25,"_286":25,"_287":59,"_288":-5,"_289":-7,"_290":-7,"_291":147,"_292":25,"_293":25,"_294":-5,"_295":25,"_296":25,"_297":25,"_298":-5},"ENV",{"_250":251,"_252":253,"_254":87,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278},"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"]

Diff · v61