Touch Test

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_285":286,"_287":288},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_107":88,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":60,"_125":-5,"_126":-5,"_127":128},"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":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",182,"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","frontend/components/drawing-canvas.js","latestPath","fileId","5bd0a88e-8390-11f0-ba68-0224a6c84d84","name","drawing-canvas.js","fileType","script","content","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.canvasOpacity = 0.7;\n this.container = null;\n this.canvasSize = 1024;\n }\n\n connectedCallback() {\n this.render();\n this.setupCanvas();\n this.setupEventListeners();\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\n this.dispatchEvent(\n new CustomEvent(\"canvasSizeChanged\", {\n bubbles: true,\n detail: { size: this.canvasSize },\n }),\n );\n }\n\n setupCanvas() {\n this.ctx = this.canvas.getContext(\"2d\");\n this.ctx.strokeStyle = \"#000000\";\n this.ctx.lineWidth = 3;\n this.ctx.lineCap = \"round\";\n this.ctx.lineJoin = \"round\";\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n\n console.log(\"Canvas setup complete\");\n }\n\n setupEventListeners() {\n // Use pointer events - they work on both mobile and desktop\n this.canvas.addEventListener(\"pointerdown\", (e) => {\n e.preventDefault();\n const rect = this.canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) * (this.canvas.width / rect.width);\n const y = (e.clientY - rect.top) * (this.canvas.height / rect.height);\n\n this.isDrawing = true;\n this.lastPoint = { x, y };\n\n // Set pointer capture for better tracking\n this.canvas.setPointerCapture(e.pointerId);\n });\n\n this.canvas.addEventListener(\"pointermove\", (e) => {\n if (!this.isDrawing) return;\n\n e.preventDefault();\n const rect = this.canvas.getBoundingClientRect();\n const x = (e.clientX - rect.left) * (this.canvas.width / rect.width);\n const y = (e.clientY - rect.top) * (this.canvas.height / rect.height);\n\n // Draw line\n this.ctx.strokeStyle = \"black\";\n this.ctx.lineWidth = 3;\n this.ctx.beginPath();\n this.ctx.moveTo(this.lastPoint.x, this.lastPoint.y);\n this.ctx.lineTo(x, y);\n this.ctx.stroke();\n\n this.lastPoint = { x, y };\n });\n\n this.canvas.addEventListener(\"pointerup\", (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 drawing complete event to trigger generation\n this.dispatchEvent(\n new CustomEvent(\"drawingComplete\", {\n bubbles: true,\n detail: { canvas: this.canvas },\n }),\n );\n });\n\n this.canvas.addEventListener(\"pointercancel\", (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\n // Prevent context menu\n this.canvas.addEventListener(\"contextmenu\", (e) => e.preventDefault());\n\n // Keyboard support\n this.canvas.addEventListener(\"keydown\", this.handleKeyDown.bind(this));\n }\n\n clear() {\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n this.dispatchEvent(new CustomEvent(\"canvasCleared\", { bubbles: true }));\n }\n\n async getBlob() {\n return new Promise((resolve, reject) => {\n try {\n this.canvas.toBlob(resolve);\n } catch (error) {\n reject(error);\n }\n });\n }\n\n getImageData() {\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 tempCtx.fillStyle = \"#ffffff\";\n tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);\n tempCtx.drawImage(this.canvas, 0, 0);\n\n return tempCanvas.toDataURL(\"image/png\");\n }\n\n isEmpty() {\n const imageData = this.ctx.getImageData(\n 0,\n 0,\n this.canvas.width,\n this.canvas.height,\n );\n const data = imageData.data;\n\n for (let i = 3; i < data.length; i += 4) {\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 =\n `${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 handleKeyDown(e) {\n switch (e.key) {\n case \"Delete\":\n case \"Backspace\":\n this.clear();\n e.preventDefault();\n break;\n }\n }\n}\n\ncustomElements.define(\"drawing-canvas\", DrawingCanvas);","createdAt",["D",1756757520676],"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",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"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":281,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":282,"_82":283,"_84":284,"_86":25},"tree",[175,177,187,188],"files",[175,176,177,178,179,180,181,182,183,184,185,186,187,188],"counts",{"_165":140,"_166":64,"_167":140,"_168":169,"_170":171},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":159,"_32":160,"_30":161,"_136":-5,"_42":43,"_41":162,"_138":60,"_39":163,"_13":140,"_34":157,"_36":-5,"_24":25,"_142":-5,"_27":164},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":60,"_39":156,"_13":140,"_34":157,"_36":-5,"_24":25,"_142":-5,"_27":158},{"_44":144,"_32":145,"_30":146,"_136":-5,"_42":43,"_41":147,"_138":25,"_39":148,"_13":149,"_34":20,"_36":150,"_24":25,"_142":-5,"_27":151},{"_44":133,"_32":134,"_30":135,"_136":-5,"_42":43,"_41":137,"_138":60,"_39":139,"_13":140,"_34":20,"_36":141,"_24":25,"_142":-5,"_27":143},"66211dec-845c-11f0-a70f-0224a6c84d84","test-touch.html","66211e96-845c-11f0-a70f-0224a6c84d84","parentId",94,"latest",["D",1756419283374],0,"\n\n\n \n \n Touch Test\n \n\n\n

Touch Drawing Test

Touch and drag on the canvas below to test drawing

\n \n

\n \n \n

\n \n

\n\n \n\n","label",[134],"2e1c069e-871f-11f0-98ca-0224a6c84d84","README.md","367c7216-8390-11f0-b7a9-0224a6c84d84",171,["D",1756722843570],19,"# Trace AI\n\nA creative drawing application that uses AI to transform your sketches into vibrant, detailed artwork.\n\n## Features\n\n- **🎯 Canvas-Focused**: Clean, minimal interface focused purely on the drawing experience\n- **🔑 Cookie-Based API Key Management**: Secure client-side storage of your Gemini API key\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- **🔗 Previous Image Integration**: Toggle to use previously generated images as style reference for new creations\n- **💾 Direct Save**: Save the AI-generated artwork directly\n- **⚡ Responsive Drawing**: Low-latency drawing with optimized touch support\n- **🌈 Colorful Generation Feedback**: Beautiful multi-color glow effects when AI is generating new artwork\n\n## Getting Started\n\n### API Key Setup\n\n1. **Get a Gemini API Key**: Visit [Google AI Studio](https://aistudio.google.com/app/apikey) to obtain your free API key\n2. **Enter Your Key**: When you first use the app, you'll be prompted to enter your API key\n3. **Secure Storage**: Your API key is stored securely in your browser using cookies\n\n### Using the App\n\n1. **Draw**: Use your finger or stylus to sketch on the canvas\n2. **Wait**: The AI will automatically start generating after you stop drawing (1-second delay)\n3. **View**: Toggle between showing your sketch, the AI result, or both\n4. **Use Previous**: Enable \"Use Previous Image\" to incorporate the last generated image as style reference for new sketches\n5. **Save**: Download your generated artwork using the save button\n\n### API Key Management\n\n- **🔑 Button**: Click the key icon in the control panel to manage your API key\n- **Change Key**: If you have a key stored, you can update it\n- **Remove Key**: Clear your stored API key if needed\n- **Remember Option**: Choose whether to store the key for 30 days or just for the session\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # API endpoint with Gemini integration and cookie-based auth\n├── frontend/\n│ ├── index.html # Main HTML interface with API key dialog\n│ ├── app.js # Main application logic with API key management\n│ ├── components/\n│ │ ├── drawing-canvas.js # Canvas Web Component with size control\n│ │ └── control-panel.js # Control panel with API key management\n│ ├── utils/\n│ │ ├── api-key-manager.js # Cookie-based API key storage\n│ │ └── dialog-manager.js # API key input dialog\n│ └── style.css # Clean, minimal styles\n└── README.md\n```\n\n## Setup\n\n**No server-side setup required!** The application is ready to use immediately:\n\n1. **Access the Application**: Visit the application URL\n2. **Enter API Key**: When you first try to generate artwork, you'll be prompted to enter your Gemini API key\n3. **Get API Key**: If you don't have one, get your free API key from: https://aistudio.google.com/app/apikey\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- **🔑**: Manage your API key (change or remove)\n- **Use Previous Image**: Toggle to use the last generated image as style reference for new sketches\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 cookie-based API key authentication\n- **AI Model**: Google Gemini 2.5 Flash Image Preview\n- **Canvas**: HTML5 Canvas with optimized 2D context for low latency\n- **API Key Storage**: Secure browser cookies with CookieStore API (fallback to document.cookie)\n- **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\n- **Accessibility**: Respects `prefers-reduced-motion` for users who prefer minimal animations\n\n## Security & Privacy\n\n- **Client-Side Storage**: API keys are stored securely in browser cookies, never on our servers\n- **Direct API Communication**: Your drawings and API key go directly to Google's Gemini API\n- **No Server Storage**: No drawings, generated images, or API keys are stored on our servers\n- **Secure Cookies**: API keys are stored with secure cookie options (Secure, SameSite=Strict)\n\n## Browser Compatibility\n\n- **Modern Browsers**: Full support with CookieStore API\n- **Older Browsers**: Fallback to document.cookie for API key storage\n- **Mobile**: Optimized touch interface for drawing",[145],"4830327c-8390-11f0-a8ab-0224a6c84d84","frontend","9dca583b-83a8-4742-871a-2ec562118ff7",3,["D",1756331615801],"directory",[153],"3d8651f8-8390-11f0-97cb-0224a6c84d84","backend","2065d0b7-fa4f-4607-ab7b-13122a493db9",2,["D",1756331597912],[160],"pulls","branches","forks","envVars",{"_172":64,"_174":140},"connections",{"_172":140,"_173":140},"count","unfilledCount","emptyCount",{"_44":159,"_32":160,"_30":161,"_136":-5,"_42":43,"_41":162,"_138":60,"_39":278,"_13":140,"_34":157,"_36":-5,"_24":25,"_142":-5,"_190":279,"_27":280},{"_44":269,"_32":270,"_30":58,"_136":161,"_42":43,"_41":271,"_138":25,"_39":272,"_13":273,"_34":274,"_36":275,"_24":25,"_142":46,"_190":276,"_27":277},{"_44":152,"_32":153,"_30":154,"_136":-5,"_42":43,"_41":155,"_138":60,"_39":266,"_13":140,"_34":157,"_36":-5,"_24":25,"_142":-5,"_190":267,"_27":268},{"_44":261,"_32":251,"_30":246,"_136":154,"_42":43,"_41":262,"_138":60,"_39":263,"_13":140,"_34":157,"_36":-5,"_24":25,"_142":-5,"_190":264,"_27":265},{"_44":252,"_32":253,"_30":254,"_136":246,"_42":43,"_41":255,"_138":25,"_39":256,"_13":257,"_34":35,"_36":258,"_24":25,"_142":-5,"_190":259,"_27":260},{"_44":245,"_32":33,"_30":31,"_136":246,"_42":43,"_41":14,"_138":25,"_39":247,"_13":248,"_34":35,"_36":38,"_24":25,"_142":-5,"_190":249,"_27":250},{"_44":241,"_32":232,"_30":226,"_136":154,"_42":43,"_41":236,"_138":60,"_39":242,"_13":140,"_34":157,"_36":-5,"_24":25,"_142":-5,"_190":243,"_27":244},{"_44":233,"_32":234,"_30":235,"_136":226,"_42":43,"_41":236,"_138":60,"_39":237,"_13":140,"_34":35,"_36":238,"_24":25,"_142":-5,"_190":239,"_27":240},{"_44":223,"_32":224,"_30":225,"_136":226,"_42":43,"_41":227,"_138":60,"_39":228,"_13":162,"_34":35,"_36":229,"_24":25,"_142":-5,"_190":230,"_27":231},{"_44":214,"_32":215,"_30":216,"_136":154,"_42":43,"_41":217,"_138":25,"_39":218,"_13":219,"_34":35,"_36":220,"_24":25,"_142":-5,"_190":221,"_27":222},{"_44":205,"_32":206,"_30":207,"_136":154,"_42":43,"_41":208,"_138":60,"_39":209,"_13":210,"_34":20,"_36":211,"_24":25,"_142":-5,"_190":212,"_27":213},{"_44":196,"_32":197,"_30":198,"_136":154,"_42":43,"_41":199,"_138":60,"_39":200,"_13":201,"_34":20,"_36":202,"_24":25,"_142":-5,"_190":203,"_27":204},{"_44":144,"_32":145,"_30":146,"_136":-5,"_42":43,"_41":147,"_138":25,"_39":193,"_13":149,"_34":20,"_36":150,"_24":25,"_142":-5,"_190":194,"_27":195},{"_44":133,"_32":134,"_30":135,"_136":-5,"_42":43,"_41":137,"_138":60,"_39":189,"_13":140,"_34":20,"_36":141,"_24":25,"_142":-5,"_190":191,"_27":192},["D",1756419283374],"children",[],[134],["D",1756722843570],[],[145],"2ad1ea3a-8459-11f0-9afa-0224a6c84d84","style.css","4cfcb9f6-8390-11f0-8750-0224a6c84d84",86,["D",1756417895371],13,"/* 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 /* Prevent touch interactions from bubbling up */\n touch-action: none;\n /* Prevent text selection */\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n}\n\n/* Colorful generation state */\ndrawing-canvas .canvas-container.generating {\n animation: colorful-glow 4s ease-in-out infinite, 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 opacity: 0;\n pointer-events: none;\n z-index: 1;\n transition: opacity 0.5s ease;\n border-radius: 8px;\n}\n\ndrawing-canvas .generation-overlay.active {\n opacity: 1;\n animation: rainbow-shimmer 5s 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 /* Prevent text selection and other interactions */\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n /* Prevent image dragging */\n -webkit-user-drag: none;\n -khtml-user-drag: none;\n -moz-user-drag: none;\n -o-user-drag: none;\n user-drag: none;\n /* Prevent tap highlighting on mobile */\n -webkit-tap-highlight-color: transparent;\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@keyframes subtle-pulse {\n 0%, 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.003);\n }\n}\n\n@keyframes colorful-glow {\n 0% {\n box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3), 0 0 0 1px rgba(236, 72, 153, 0.2);\n }\n 16.66% {\n box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3), 0 0 0 1px rgba(168, 85, 247, 0.2);\n }\n 33.33% {\n box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.2);\n }\n 50% {\n box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3), 0 0 0 1px rgba(34, 197, 94, 0.2);\n }\n 66.66% {\n box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3), 0 0 0 1px rgba(251, 191, 36, 0.2);\n }\n 83.33% {\n box-shadow: 0 4px 20px rgba(249, 115, 22, 0.3), 0 0 0 1px rgba(249, 115, 22, 0.2);\n }\n 100% {\n box-shadow: 0 4px 20px rgba(236, 72, 153, 0.3), 0 0 0 1px rgba(236, 72, 153, 0.2);\n }\n}\n\n@keyframes rainbow-shimmer {\n 0% {\n background: linear-gradient(45deg, \n rgba(236, 72, 153, 0.08) 0%, \n rgba(168, 85, 247, 0.06) 25%, \n rgba(59, 130, 246, 0.08) 50%, \n rgba(34, 197, 94, 0.06) 75%, \n rgba(236, 72, 153, 0.08) 100%);\n }\n 25% {\n background: linear-gradient(45deg, \n rgba(168, 85, 247, 0.08) 0%, \n rgba(59, 130, 246, 0.06) 25%, \n rgba(34, 197, 94, 0.08) 50%, \n rgba(251, 191, 36, 0.06) 75%, \n rgba(168, 85, 247, 0.08) 100%);\n }\n 50% {\n background: linear-gradient(45deg, \n rgba(59, 130, 246, 0.08) 0%, \n rgba(34, 197, 94, 0.06) 25%, \n rgba(251, 191, 36, 0.08) 50%, \n rgba(249, 115, 22, 0.06) 75%, \n rgba(59, 130, 246, 0.08) 100%);\n }\n 75% {\n background: linear-gradient(45deg, \n rgba(34, 197, 94, 0.08) 0%, \n rgba(251, 191, 36, 0.06) 25%, \n rgba(249, 115, 22, 0.08) 50%, \n rgba(236, 72, 153, 0.06) 75%, \n rgba(34, 197, 94, 0.08) 100%);\n }\n 100% {\n background: linear-gradient(45deg, \n rgba(236, 72, 153, 0.08) 0%, \n rgba(168, 85, 247, 0.06) 25%, \n rgba(59, 130, 246, 0.08) 50%, \n rgba(34, 197, 94, 0.06) 75%, \n rgba(236, 72, 153, 0.08) 100%);\n }\n}\n\n.animate-spin {\n animation: spin 1s linear infinite;\n}\n\n.colorful-spinner {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: conic-gradient(from 0deg, #ec4899, #a855f7, #3b82f6, #22c55e, #fbbf24, #f97316, #ec4899);\n mask: radial-gradient(circle at center, transparent 30%, black 32%);\n -webkit-mask: radial-gradient(circle at center, transparent 30%, black 32%);\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 /* Ensure canvas fits on mobile screens */\n drawing-canvas .canvas-container {\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 200px);\n }\n \n drawing-canvas canvas {\n max-width: 100%;\n max-height: 100%;\n width: auto;\n height: auto;\n }\n \n /* Adjust body padding for mobile */\n body {\n padding: 1rem;\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 \n drawing-canvas .canvas-container {\n transition: none;\n }\n \n drawing-canvas .canvas-container.generating {\n animation: none;\n box-shadow: 0 4px 20px rgba(168, 85, 247, 0.25), 0 0 0 1px rgba(168, 85, 247, 0.15);\n }\n \n drawing-canvas .generation-overlay {\n transition: none;\n }\n \n drawing-canvas .generation-overlay.active {\n animation: none;\n background: linear-gradient(45deg, \n rgba(168, 85, 247, 0.06) 0%, \n rgba(59, 130, 246, 0.08) 50%, \n rgba(168, 85, 247, 0.06) 100%);\n }\n}",[],[153,197],"16c70012-8462-11f0-81b3-0224a6c84d84","index.html","48301986-8390-11f0-a8ab-0224a6c84d84",132,["D",1756421727215],9,"\n\n\n \n \n Trace AI\n \n \n \n\n\n

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

\n\n \n \n\n \n \n\n \n\n",[],[153,206],"91e5a63a-8463-11f0-a0c5-0224a6c84d84","app.js","81144e02-8390-11f0-b11d-0224a6c84d84",160,["D",1756422363260],8,"// Import Web Components\nimport './components/drawing-canvas.js';\nimport './components/control-panel.js';\n\n// Import API Key Management\nimport ApiKeyManager from './utils/api-key-manager.js';\nimport DialogManager from './utils/dialog-manager.js';\n\nclass TraceAIApp {\n constructor() {\n this.apiKeyManager = new ApiKeyManager();\n this.dialogManager = new DialogManager();\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 async setup() {\n // Setup keyboard shortcuts\n this.setupKeyboardShortcuts();\n \n // Setup API key management\n this.setupApiKeyManagement();\n \n // Check for existing API key on startup\n await this.checkApiKey();\n \n console.log('Trace AI initialized');\n }\n\n setupApiKeyManagement() {\n // Listen for API key events\n window.addEventListener('apiKeySet', (e) => {\n console.log('API key has been set');\n this.showNotification('API key saved successfully! 🎉');\n });\n\n window.addEventListener('apiKeyRemoved', () => {\n console.log('API key has been removed');\n this.showNotification('API key removed 🗑️');\n });\n\n // Add method to window for easy access from components\n window.traceAI = {\n getApiKey: () => this.apiKeyManager.getApiKey(),\n ensureApiKey: () => this.dialogManager.ensureApiKey(),\n getApiKeyIfNeeded: () => this.dialogManager.getApiKeyIfNeeded(),\n removeApiKey: () => this.apiKeyManager.removeApiKey()\n };\n }\n\n showNotification(message) {\n // Show notification in the loading indicator temporarily\n const indicator = document.getElementById(\"loadingIndicator\");\n if (indicator) {\n const originalContent = indicator.innerHTML;\n indicator.innerHTML = `\n

\n ${message}\n

\n `;\n indicator.classList.remove(\"hidden\");\n\n setTimeout(() => {\n indicator.classList.add(\"hidden\");\n indicator.innerHTML = originalContent;\n }, 3000);\n }\n }\n\n async checkApiKey() {\n const apiKey = await this.apiKeyManager.getApiKey();\n if (apiKey) {\n console.log('API key found in cookies');\n } else {\n console.log('No API key found - will prompt when needed');\n }\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();",[],[153,215],"85136b0e-8463-11f0-8e85-0224a6c84d84","dialog-manager.js","2b361cd6-8462-11f0-b1a7-0224a6c84d84","b56a05af-b875-4d62-91be-3a44d846d994",157,["D",1756422341762],"/**\n * Dialog Manager for API Key Input\n * Handles the modal dialog for API key entry with light dismiss\n */\n\nimport ApiKeyManager from './api-key-manager.js';\n\nclass DialogManager {\n constructor() {\n this.apiKeyManager = new ApiKeyManager();\n this.dialog = null;\n this.form = null;\n this.input = null;\n this.cancelButton = null;\n this.rememberCheckbox = null;\n \n this.init();\n }\n\n init() {\n // Wait for DOM to be ready\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', () => this.setupDialog());\n } else {\n this.setupDialog();\n }\n }\n\n setupDialog() {\n this.dialog = document.getElementById('apiKeyDialog');\n this.form = document.getElementById('apiKeyForm');\n this.input = document.getElementById('apiKeyInput');\n this.cancelButton = document.getElementById('cancelApiKey');\n this.rememberCheckbox = document.getElementById('rememberKey');\n\n if (!this.dialog || !this.form || !this.input) {\n console.error('API Key dialog elements not found');\n return;\n }\n\n this.setupEventListeners();\n }\n\n setupEventListeners() {\n // Form submission\n this.form.addEventListener('submit', (e) => this.handleSubmit(e));\n \n // Cancel button\n this.cancelButton?.addEventListener('click', () => this.closeDialog());\n \n // Light dismiss - click outside dialog\n this.dialog.addEventListener('click', (e) => {\n if (e.target === this.dialog) {\n this.closeDialog();\n }\n });\n \n // Escape key to close\n this.dialog.addEventListener('keydown', (e) => {\n if (e.key === 'Escape') {\n this.closeDialog();\n }\n });\n\n // Auto-focus input when dialog opens\n this.dialog.addEventListener('open', () => {\n setTimeout(() => this.input?.focus(), 100);\n });\n }\n\n async handleSubmit(e) {\n e.preventDefault();\n \n const apiKey = this.input.value.trim();\n const remember = this.rememberCheckbox?.checked ?? true;\n\n if (!this.apiKeyManager.isValidApiKey(apiKey)) {\n this.showError('Please enter a valid API key');\n return;\n }\n\n try {\n const success = await this.apiKeyManager.setApiKey(apiKey, remember);\n \n if (success) {\n this.closeDialog();\n // Dispatch custom event to notify other components\n window.dispatchEvent(new CustomEvent('apiKeySet', { \n detail: { apiKey, remember } \n }));\n } else {\n this.showError('Failed to save API key. Please try again.');\n }\n } catch (error) {\n console.error('Error saving API key:', error);\n this.showError('An error occurred while saving the API key.');\n }\n }\n\n showError(message) {\n // Remove existing error\n const existingError = this.form.querySelector('.error-message');\n if (existingError) {\n existingError.remove();\n }\n\n // Create error element\n const errorDiv = document.createElement('div');\n errorDiv.className = 'error-message text-red-600 text-sm mt-2 p-2 bg-red-50 border border-red-200 rounded';\n errorDiv.textContent = message;\n\n // Insert after input\n this.input.parentNode.appendChild(errorDiv);\n\n // Remove error after 5 seconds\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.remove();\n }\n }, 5000);\n }\n\n openDialog() {\n if (this.dialog) {\n this.input.value = ''; // Clear previous input\n this.updateDialogForExistingKey();\n this.dialog.showModal();\n }\n }\n\n async updateDialogForExistingKey() {\n const existingKey = await this.apiKeyManager.getApiKey();\n const form = this.dialog.querySelector('#apiKeyForm');\n \n if (existingKey) {\n // Show that there's an existing key\n this.input.placeholder = 'Enter new API key to replace existing one...';\n \n // Add a status message\n let statusDiv = form.querySelector('.existing-key-status');\n if (!statusDiv) {\n statusDiv = document.createElement('div');\n statusDiv.className = 'existing-key-status bg-green-50 border border-green-200 rounded p-3 mb-4';\n statusDiv.innerHTML = `\n

\n API key is currently stored\n

\n \n

\n `;\n form.insertBefore(statusDiv, form.firstChild);\n \n // Add remove key functionality\n const removeBtn = statusDiv.querySelector('#removeKeyBtn');\n removeBtn.addEventListener('click', async () => {\n await this.apiKeyManager.removeApiKey();\n this.closeDialog();\n window.dispatchEvent(new CustomEvent('apiKeyRemoved'));\n });\n }\n } else {\n // Remove status message if no key exists\n const statusDiv = form.querySelector('.existing-key-status');\n if (statusDiv) {\n statusDiv.remove();\n }\n this.input.placeholder = 'Enter your Gemini API key...';\n }\n }\n\n closeDialog() {\n if (this.dialog) {\n this.dialog.close();\n }\n }\n\n /**\n * Show the API key dialog (always shows, regardless of existing key)\n */\n async ensureApiKey() {\n return new Promise((resolve) => {\n // Show dialog\n this.openDialog();\n \n // Listen for API key set event\n const handleApiKeySet = (e) => {\n window.removeEventListener('apiKeySet', handleApiKeySet);\n window.removeEventListener('apiKeyRemoved', handleApiKeyRemoved);\n resolve(e.detail.apiKey);\n };\n \n // Listen for API key removed event\n const handleApiKeyRemoved = () => {\n window.removeEventListener('apiKeySet', handleApiKeySet);\n window.removeEventListener('apiKeyRemoved', handleApiKeyRemoved);\n resolve(null);\n };\n \n window.addEventListener('apiKeySet', handleApiKeySet);\n window.addEventListener('apiKeyRemoved', handleApiKeyRemoved);\n \n // Handle dialog close without setting key\n const handleDialogClose = () => {\n this.dialog.removeEventListener('close', handleDialogClose);\n // Check if we actually got an API key\n this.apiKeyManager.getApiKey().then(key => {\n // Only resolve if we haven't already resolved via events\n setTimeout(() => {\n window.removeEventListener('apiKeySet', handleApiKeySet);\n window.removeEventListener('apiKeyRemoved', handleApiKeyRemoved);\n resolve(key);\n }, 100);\n });\n };\n \n this.dialog.addEventListener('close', handleDialogClose, { once: true });\n });\n }\n\n /**\n * Get API key, showing dialog if needed\n */\n async getApiKeyIfNeeded() {\n const apiKey = await this.apiKeyManager.getApiKey();\n \n if (!apiKey || !this.apiKeyManager.isValidApiKey(apiKey)) {\n return this.ensureApiKey();\n }\n \n return apiKey;\n }\n}\n\nexport default DialogManager;",[],[153,232,224],"utils","20bd1df4-8462-11f0-a8f1-0224a6c84d84","api-key-manager.js","20bd1ed0-8462-11f0-a8f1-0224a6c84d84",133,["D",1756421743930],"/**\n * API Key Manager using CookieStore API\n * Handles secure storage and retrieval of Gemini API keys\n */\n\nclass ApiKeyManager {\n constructor() {\n this.cookieName = 'gemini_api_key';\n this.cookieOptions = {\n httpOnly: false, // We need to access this from client-side\n secure: true, // Only send over HTTPS\n sameSite: 'strict',\n maxAge: 30 * 24 * 60 * 60 // 30 days in seconds\n };\n }\n\n /**\n * Check if CookieStore API is supported\n */\n isSupported() {\n return 'cookieStore' in window;\n }\n\n /**\n * Get the API key from cookies\n */\n async getApiKey() {\n try {\n if (this.isSupported()) {\n const cookie = await cookieStore.get(this.cookieName);\n return cookie?.value || null;\n } else {\n // Fallback to document.cookie for older browsers\n return this.getApiKeyFallback();\n }\n } catch (error) {\n console.warn('Error getting API key from cookies:', error);\n return this.getApiKeyFallback();\n }\n }\n\n /**\n * Set the API key in cookies\n */\n async setApiKey(apiKey, remember = true) {\n try {\n if (this.isSupported()) {\n const options = remember ? this.cookieOptions : {\n ...this.cookieOptions,\n maxAge: undefined // Session cookie\n };\n \n await cookieStore.set(this.cookieName, apiKey, options);\n return true;\n } else {\n // Fallback to document.cookie\n return this.setApiKeyFallback(apiKey, remember);\n }\n } catch (error) {\n console.warn('Error setting API key in cookies:', error);\n return this.setApiKeyFallback(apiKey, remember);\n }\n }\n\n /**\n * Remove the API key from cookies\n */\n async removeApiKey() {\n try {\n if (this.isSupported()) {\n await cookieStore.delete(this.cookieName);\n return true;\n } else {\n return this.removeApiKeyFallback();\n }\n } catch (error) {\n console.warn('Error removing API key from cookies:', error);\n return this.removeApiKeyFallback();\n }\n }\n\n /**\n * Fallback methods for browsers without CookieStore API\n */\n getApiKeyFallback() {\n const cookies = document.cookie.split(';');\n for (let cookie of cookies) {\n const [name, value] = cookie.trim().split('=');\n if (name === this.cookieName) {\n return decodeURIComponent(value);\n }\n }\n return null;\n }\n\n setApiKeyFallback(apiKey, remember = true) {\n try {\n let cookieString = `${this.cookieName}=${encodeURIComponent(apiKey)}; path=/; SameSite=Strict`;\n \n if (window.location.protocol === 'https:') {\n cookieString += '; Secure';\n }\n \n if (remember) {\n const expiryDate = new Date();\n expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 days\n cookieString += `; expires=${expiryDate.toUTCString()}`;\n }\n \n document.cookie = cookieString;\n return true;\n } catch (error) {\n console.error('Error setting cookie fallback:', error);\n return false;\n }\n }\n\n removeApiKeyFallback() {\n try {\n document.cookie = `${this.cookieName}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT`;\n return true;\n } catch (error) {\n console.error('Error removing cookie fallback:', error);\n return false;\n }\n }\n\n /**\n * Validate API key format (basic check)\n */\n isValidApiKey(apiKey) {\n return typeof apiKey === 'string' && \n apiKey.length > 10 && \n apiKey.trim().length === apiKey.length;\n }\n}\n\nexport default ApiKeyManager;",[],[153,232,234],"20bd319a-8462-11f0-a8f1-0224a6c84d84",["D",1756421743930],[182,183],[153,232],"eb46fe86-876f-11f0-ac0a-0224a6c84d84","cd94c13a-b9d8-4f61-8b31-d9e22d3b1eef",["D",1756757520676],32,[],[153,251,33],"components","4278cfdc-876f-11f0-93cd-0224a6c84d84","control-panel.js","6c8b3996-8390-11f0-8935-0224a6c84d84",180,["D",1756757237471],44,"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 this.currentAbortController = null;\n this.currentImageUrl = null;\n this.previousImageUrl = null;\n this.usePreviousImage = false;\n }\n\n connectedCallback() {\n this.render();\n this.setupEventListeners();\n this.findDrawingCanvas();\n }\n\n render() {\n this.innerHTML = `\n

\n Canvas Size:\n \n \n

\n \n \n \n Use Previous Image\n \n \n

\n \n

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

\n `;\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 = this.querySelector(\"#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 // Previous image toggle\n const usePreviousToggle = this.querySelector(\"#usePreviousToggle\");\n if (usePreviousToggle) {\n usePreviousToggle.addEventListener(\"change\", (e) => {\n this.usePreviousImage = e.target.checked;\n console.log(\"Use previous image:\", this.usePreviousImage);\n });\n }\n\n // Control buttons\n const apiKeyButton = this.querySelector(\"#apiKeyButton\");\n const clearButton = this.querySelector(\"#clearButton\");\n const toggleViewButton = this.querySelector(\"#toggleViewButton\");\n const saveButton = this.querySelector(\"#saveButton\");\n\n if (apiKeyButton) {\n apiKeyButton.addEventListener(\n \"click\",\n this.handleApiKeyManagement.bind(this),\n );\n }\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 // Cancel any ongoing fetch request\n if (this.currentAbortController) {\n this.currentAbortController.abort();\n this.currentAbortController = null;\n }\n\n this.currentRequestId++;\n this.hideGeneratedImage();\n\n // Update toggle state since we may have lost the current image\n this.updateToggleState();\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.textContent = \"Show Sketch\";\n } else {\n this.drawingCanvas.setOpacity(0.7);\n toggleButton.textContent = \"Show AI Only\";\n }\n }\n }\n\n handleSave() {\n // Save the current generated image\n if (this.currentImageUrl) {\n this.saveImage(this.currentImageUrl);\n }\n }\n\n async handleApiKeyManagement() {\n if (!window.traceAI) {\n console.error(\"API key management not available\");\n return;\n }\n\n // Simply open the dialog - it will handle existing keys appropriately\n await window.traceAI.ensureApiKey();\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 // Cancel any ongoing fetch request when canvas size changes\n if (this.currentAbortController) {\n this.currentAbortController.abort();\n this.currentAbortController = null;\n }\n\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 // Ensure we have an API key before proceeding\n let apiKey;\n try {\n if (window.traceAI && window.traceAI.getApiKeyIfNeeded) {\n apiKey = await window.traceAI.getApiKeyIfNeeded();\n if (!apiKey) {\n // User cancelled API key dialog\n return;\n }\n } else {\n console.error(\"API key management not available\");\n this.showError(\"API key management not initialized\");\n return;\n }\n } catch (error) {\n console.error(\"Error getting API key:\", error);\n this.showError(\"Failed to get API key\");\n return;\n }\n\n // Cancel any previous request\n if (this.currentAbortController) {\n this.currentAbortController.abort();\n }\n\n // Create new abort controller for this request\n this.currentAbortController = new AbortController();\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 // Prepare request body\n const requestBody = { imageData };\n\n // Add previous image if toggle is enabled and we have one\n if (this.usePreviousImage && this.previousImageUrl) {\n try {\n // Convert the previous image URL to base64 data\n const response = await fetch(this.previousImageUrl);\n const blob = await response.blob();\n const previousImageData = await this.blobToBase64(blob);\n requestBody.previousImageData = previousImageData;\n console.log(\"Including previous image in generation request\");\n } catch (error) {\n console.warn(\"Failed to include previous image:\", error);\n // Continue without previous image\n }\n }\n\n const response = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify(requestBody),\n signal: this.currentAbortController.signal,\n });\n\n if (requestId !== this.currentRequestId) {\n return; // Outdated request\n }\n\n if (!response.ok) {\n // Try to get error message from JSON response\n let errorMessage = `HTTP ${response.status}`;\n try {\n const errorData = await response.json();\n errorMessage = errorData.error || errorMessage;\n } catch {\n // If response is not JSON, use status text\n errorMessage = response.statusText || errorMessage;\n }\n throw new Error(errorMessage);\n }\n\n // Get the binary image data\n const imageBlob = await response.blob();\n\n // Create object URL for the blob\n const imageUrl = URL.createObjectURL(imageBlob);\n\n if (requestId === this.currentRequestId) {\n this.displayGeneratedImage(imageUrl);\n }\n } catch (error) {\n if (requestId === this.currentRequestId) {\n // Don't show error for aborted requests\n if (error.name !== \"AbortError\") {\n console.error(\"Generation error:\", error);\n this.showError(`Failed to generate image: ${error.message}`);\n }\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 // Clear the abort controller if this was the current request\n if (\n this.currentAbortController &&\n !this.currentAbortController.signal.aborted\n ) {\n this.currentAbortController = null;\n }\n }\n }\n }\n\n displayGeneratedImage(imageUrl) {\n console.log(\"Displaying generated image:\", imageUrl);\n\n // // Store current image as previous before updating\n // if (this.currentImageUrl) {\n // // Clean up old previous image\n // if (this.previousImageUrl) {\n // URL.revokeObjectURL(this.previousImageUrl);\n // }\n // this.previousImageUrl = this.currentImageUrl;\n // console.log('Stored previous image for reuse');\n // }\n\n this.currentImageUrl = imageUrl;\n\n if (this.drawingCanvas) {\n this.drawingCanvas.setBackgroundImage(imageUrl);\n }\n\n const saveButton = document.getElementById(\"saveButton\");\n if (saveButton) {\n saveButton.classList.remove(\"hidden\");\n }\n\n // Update the toggle state since we now have a previous image\n this.updateToggleState();\n\n this.dispatchEvent(\n new CustomEvent(\"imageGenerated\", {\n bubbles: true,\n detail: { imageUrl: imageUrl },\n }),\n );\n }\n\n hideGeneratedImage() {\n // Clean up current image URL to prevent memory leaks\n if (this.currentImageUrl) {\n URL.revokeObjectURL(this.currentImageUrl);\n this.currentImageUrl = null;\n }\n\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 // Helper method to convert blob to base64\n async blobToBase64(blob) {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => resolve(reader.result);\n reader.onerror = reject;\n reader.readAsDataURL(blob);\n });\n }\n\n // Update the toggle state based on available previous image\n updateToggleState() {\n const toggle = this.querySelector(\"#usePreviousToggle\");\n const label = this.querySelector(\"#usePreviousToggle + span\");\n\n if (toggle && label) {\n const hasPreviewImage = !!this.previousImageUrl;\n toggle.disabled = !hasPreviewImage;\n\n console.log(\"Updating toggle state:\", {\n hasPreviewImage,\n previousImageUrl: this.previousImageUrl ? \"exists\" : \"null\",\n toggleDisabled: toggle.disabled,\n });\n\n if (hasPreviewImage) {\n label.classList.remove(\"text-gray-400\");\n label.classList.add(\"text-gray-700\");\n } else {\n label.classList.add(\"text-gray-400\");\n label.classList.remove(\"text-gray-700\");\n toggle.checked = false;\n this.usePreviousImage = false;\n }\n }\n }\n}\n\ncustomElements.define(\"control-panel\", ControlPanel);",[],[153,251,253],"5bd0c210-8390-11f0-ba68-0224a6c84d84",5,["D",1756331648731],[179,180],[153,251],["D",1756331615801],[178,181,184,185,186],[153],"0fc58a76-876f-11f0-b290-0224a6c84d84","index.ts",179,["D",1756757152409],42,"http","import { Content, GoogleGenAI, Modality } from \"https://esm.sh/@google/genai\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// API Key validation helper\nfunction validateApiKey(apiKey: string): boolean {\n // Basic validation - check if it looks like a valid API key\n return typeof apiKey === \"string\" &&\n apiKey.length > 10 &&\n apiKey.trim().length === apiKey.length &&\n !apiKey.includes(\" \");\n}\n\n// Helper to extract API key from cookies\nfunction getApiKeyFromCookies(req: Request): string | null {\n const cookieHeader = req.headers.get(\"Cookie\");\n if (!cookieHeader) return null;\n\n const cookies = cookieHeader.split(\";\").map((c) => c.trim());\n for (const cookie of cookies) {\n const [name, value] = cookie.split(\"=\");\n if (name === \"gemini_api_key\") {\n return decodeURIComponent(value);\n }\n }\n return null;\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n // Normalize pathname to handle double slashes\n const pathname = url.pathname.replace(/\\/+/g, \"/\");\n\n // Health check endpoint (no auth required)\n if (pathname === \"/api/health\") {\n return new Response(\n JSON.stringify({\n status: \"ok\",\n timestamp: new Date().toISOString(),\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Test page for debugging touch events (no auth required)\n if (pathname === \"/test-touch\") {\n try {\n const html = await readFile(\"/test-touch.html\", import.meta.url);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n } catch (error) {\n return new Response(\"Test page not found\", { status: 404 });\n }\n }\n\n // Serve frontend files\n if (pathname.startsWith(\"/frontend/\")) {\n try {\n return await serveFile(pathname, import.meta.url);\n } catch (error) {\n return new Response(\"File not found\", { status: 404 });\n }\n }\n\n // Serve the main page\n if (pathname === \"/\") {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n } catch (error) {\n return new Response(\"Index page not found\", { status: 404 });\n }\n }\n\n // API endpoint for AI image generation\n if (pathname === \"/api/generate\" && req.method === \"POST\") {\n try {\n // Get API key from cookie\n const apiKey = getApiKeyFromCookies(req);\n if (!apiKey || !validateApiKey(apiKey)) {\n return new Response(\n JSON.stringify({\n error: \"Valid API key required\",\n message:\n \"Please provide your Gemini API key. The app will prompt you to enter it.\",\n }),\n {\n status: 401,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n // Initialize Gemini AI with the provided API key\n const ai = new GoogleGenAI({ apiKey });\n\n const { imageData, previousImageData } = await req.json();\n\n if (!imageData || !imageData.startsWith(\"data:image/png;base64,\")) {\n return new Response(\n JSON.stringify({ error: \"Invalid imageData format\" }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n const selectedModel = \"gemini-2.5-flash-image-preview\";\n\n // Base prompt for sketch transformation\n let prompt = `\nThe user has given you a sketch to fill in with a playful, colorful, and high-quality artistic image. Trace these lines, keeping the scale as close as possible to the original image and transform the picture into a rich, detailed artwork. Be creative and add vibrant colors, textures, and details that bring the drawing to life. \n\nKey instructions:\n1. Transform the new sketch in the first image into a rich, detailed artwork while maintaining the structure and sale for the first image\n2. If the user has provided a second image, you must edit that image with the updates from the first image\n4. The new image MUST match the line drawing provided\n5. Be creative while keeping a cohesive artistic 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 let contents: Content[] = [\n {\n role: \"USER\",\n parts: [imagePart],\n },\n ];\n\n // Add previous image if provided\n if (previousImageData && previousImageData.startsWith(\"data:image/\")) {\n const previousImagePart = {\n inlineData: {\n data: previousImageData.split(\",\")[1], // Remove the data URI prefix\n mimeType: previousImageData.includes(\"jpeg\")\n ? \"image/jpeg\"\n : \"image/png\",\n },\n };\n\n contents[0].parts.push(previousImagePart);\n }\n\n // Add the text prompt\n contents.push({\n role: \"USER\",\n parts: [\n {\n text: prompt,\n },\n ],\n });\n\n const response = await ai.models.generateContent({\n model: selectedModel,\n contents,\n config: {\n responseModalities: [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 // Check if we have inline data (base64 image)\n if (!aiImageResponse.inlineData || !aiImageResponse.inlineData.data) {\n throw new Error(\"No image data in AI response\");\n }\n\n // Convert base64 to binary data\n const base64Data = aiImageResponse.inlineData.data;\n const mimeType = aiImageResponse.inlineData.mimeType || \"image/png\";\n\n // Decode base64 to binary\n const binaryData = Uint8Array.from(\n atob(base64Data),\n (c) => c.charCodeAt(0),\n );\n\n // Return binary data with proper content type\n return new Response(binaryData, {\n headers: {\n \"Content-Type\": mimeType,\n \"Content-Length\": binaryData.length.toString(),\n },\n });\n } catch (error) {\n console.error(\"Error in AI image generation:\", error);\n return new Response(\n JSON.stringify({\n error: \"Failed to generate image\",\n details: error.message,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\"Not Found\", { status: 404 });\n}",[],[160,270],["D",1756331597912],[176],[160],["D",1756331168191],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":56,"_103":104,"_105":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"ctx",{"_80":-5,"_126":318,"_319":320,"_321":322,"_323":25,"_324":25,"_325":25,"_326":60,"_327":-5,"_328":-7,"_329":-7,"_330":140,"_331":25,"_332":25,"_333":-5,"_334":25,"_335":25,"_336":25,"_337":-5},"ENV",{"_289":290,"_291":292,"_293":88,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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 · v182