Touch Test

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_317":318,"_319":320},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_240":-5,"_20":241,"_22":242,"_243":244,"_245":246,"_26":247,"_24":248,"_249":-5,"_250":-5,"_251":55,"_252":253,"_254":46,"_255":-5,"_256":-5,"_257":258},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","paulkinlan","name","tracey-mctraceface","branchName","main","version","path","backend","project",{"_34":184,"_13":14,"_47":185,"_186":-5,"_187":55,"_188":189,"_190":189,"_191":192,"_193":-5,"_194":195,"_196":38,"_197":46,"_198":46,"_199":-5,"_200":201,"_202":203,"_204":-5,"_205":-5,"_206":-5,"_207":-5,"_208":209,"_210":209,"_211":212,"_213":212,"_214":212,"_215":209,"_216":209,"_217":218,"_219":220,"_221":222,"_223":55},"tree",[64,65,66,67],"file",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":63},"contents",[33],"upstream","pull","ahead","behind","envVars",{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":14,"_18":57},"id","12d1a0e2-87fb-11f0-9ad5-0224a6c84d84","index.ts","fileId","3d8644ec-8390-11f0-97cb-0224a6c84d84","parentId","2065d0b7-fa4f-4607-ab7b-13122a493db9","branchId","3d637076-838f-11f0-b8db-0224a6c84d84","branchVersion",244,"latest",true,"createdAt",["D",1756817287062],58,"fileType","http","content","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 = `\nImage 1 is the sketch provided by the user.\nImage 2 is the image that you must edit if provided.\nThe new image MUST match the line drawing provided.\n\n**Final image requirements**:\n1. Transform the new sketch in Image 1 into a rich, detailed artwork while maintaining the structure and exact scale\n2. If the user has provided Image 2, you must edit that image with the updates from the first image\n4. The new image MUST match the line drawing provided by Image 1.\n5. Be creative while keeping a cohesive artistic style.\n\n`;\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 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}","deleted",false,"label",[19,36],"3d8651f8-8390-11f0-97cb-0224a6c84d84",2,["D",1756331597912],0,"directory",[19],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":177,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":178,"_18":179},{"_34":86,"_13":87,"_37":88,"_39":-5,"_41":42,"_43":89,"_45":46,"_47":90,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":91,"_18":92},{"_34":77,"_13":78,"_37":79,"_39":-5,"_41":42,"_43":80,"_45":46,"_47":81,"_17":82,"_50":24,"_52":83,"_54":55,"_56":-5,"_74":84,"_18":85},{"_34":68,"_13":69,"_37":70,"_39":-5,"_41":42,"_43":71,"_45":46,"_47":72,"_17":61,"_50":24,"_52":73,"_54":55,"_56":-5,"_74":75,"_18":76},"66211dec-845c-11f0-a70f-0224a6c84d84","test-touch.html","66211e96-845c-11f0-a70f-0224a6c84d84",94,["D",1756419283374],"\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","children",[],[69],"b1546cd6-8779-11f0-ac89-0224a6c84d84","README.md","367c7216-8390-11f0-b7a9-0224a6c84d84",230,["D",1756761718423],20,"# 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 (when available)\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",[],[78],"4830327c-8390-11f0-a8ab-0224a6c84d84","frontend","9dca583b-83a8-4742-871a-2ec562118ff7",3,["D",1756331615801],[93,94,95,96,97],[87],{"_34":150,"_13":151,"_37":152,"_39":88,"_41":42,"_43":153,"_45":46,"_47":154,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":155,"_18":156},{"_34":126,"_13":127,"_37":128,"_39":88,"_41":42,"_43":129,"_45":46,"_47":130,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":131,"_18":132},{"_34":116,"_13":117,"_37":118,"_39":88,"_41":42,"_43":119,"_45":46,"_47":120,"_17":121,"_50":122,"_52":123,"_54":55,"_56":-5,"_74":124,"_18":125},{"_34":107,"_13":108,"_37":109,"_39":88,"_41":42,"_43":110,"_45":46,"_47":111,"_17":112,"_50":24,"_52":113,"_54":55,"_56":-5,"_74":114,"_18":115},{"_34":98,"_13":99,"_37":100,"_39":88,"_41":42,"_43":101,"_45":46,"_47":102,"_17":103,"_50":24,"_52":104,"_54":55,"_56":-5,"_74":105,"_18":106},"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}",[],[87,99],"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",[],[87,108],"c02f3bcc-877a-11f0-88ea-0224a6c84d84","app.js","81144e02-8390-11f0-b11d-0224a6c84d84",239,["D",1756762172847],10,"script","// 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 // Find the control panel and trigger clear\n const controlPanel = document.querySelector('control-panel');\n if (controlPanel) {\n const clearBtn = controlPanel.querySelector('#clearButton');\n if (clearBtn && !clearBtn.disabled) {\n clearBtn.click();\n }\n }\n break;\n case 's':\n e.preventDefault();\n // Find the control panel and trigger save\n const controlPanelSave = document.querySelector('control-panel');\n if (controlPanelSave) {\n const saveBtn = controlPanelSave.querySelector('#saveButton');\n if (saveBtn && saveBtn.style.display !== 'none') {\n saveBtn.click();\n }\n }\n break;\n }\n }\n });\n }\n}\n\n// Initialize the application\nnew TraceAIApp();",[],[87,117],"20bd319a-8462-11f0-a8f1-0224a6c84d84","utils","b56a05af-b875-4d62-91be-3a44d846d994",133,["D",1756421743930],[133,134],[87,127],{"_34":143,"_13":144,"_37":145,"_39":128,"_41":42,"_43":129,"_45":46,"_47":146,"_17":61,"_50":122,"_52":147,"_54":55,"_56":-5,"_74":148,"_18":149},{"_34":135,"_13":136,"_37":137,"_39":128,"_41":42,"_43":138,"_45":46,"_47":139,"_17":59,"_50":122,"_52":140,"_54":55,"_56":-5,"_74":141,"_18":142},"85136b0e-8463-11f0-8e85-0224a6c84d84","dialog-manager.js","2b361cd6-8462-11f0-b1a7-0224a6c84d84",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;",[],[87,127,136],"20bd1df4-8462-11f0-a8f1-0224a6c84d84","api-key-manager.js","20bd1ed0-8462-11f0-a8f1-0224a6c84d84",["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;",[],[87,127,144],"5bd0c210-8390-11f0-ba68-0224a6c84d84","components","cd94c13a-b9d8-4f61-8b31-d9e22d3b1eef",5,["D",1756331648731],[157,158],[87,151],{"_34":168,"_13":169,"_37":170,"_39":152,"_41":42,"_43":171,"_45":46,"_47":172,"_17":173,"_50":122,"_52":174,"_54":55,"_56":-5,"_74":175,"_18":176},{"_34":159,"_13":160,"_37":161,"_39":152,"_41":42,"_43":162,"_45":46,"_47":163,"_17":164,"_50":122,"_52":165,"_54":55,"_56":-5,"_74":166,"_18":167},"ff92b7ae-876f-11f0-9463-0224a6c84d84","drawing-canvas.js","5bd0a88e-8390-11f0-ba68-0224a6c84d84",184,["D",1756757554728],34,"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 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);",[],[87,151,160],"090d4064-877b-11f0-b8af-0224a6c84d84","control-panel.js","6c8b3996-8390-11f0-8935-0224a6c84d84",243,["D",1756762295089],83,"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.currentImageGeneration = null;\n this.usePreviousImage = false;\n }\n\n connectedCallback() {\n this.render();\n this.setupEventListeners();\n this.findDrawingCanvas();\n \n // Set initial save button visibility using inline style\n setTimeout(() => {\n const saveButton = this.querySelector(\"#saveButton\");\n if (saveButton) {\n saveButton.style.display = \"none\";\n }\n }, 0);\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.currentImageGeneration) {\n try {\n const previousImageData = await this.blobToBase64(\n this.currentImageGeneration,\n );\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 this.currentImageGeneration = imageBlob;\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 this.currentImageUrl = imageUrl;\n\n if (this.drawingCanvas) {\n this.drawingCanvas.setBackgroundImage(imageUrl);\n }\n\n const saveButton = this.querySelector(\"#saveButton\");\n if (saveButton) {\n console.log(\"Making save button visible\");\n saveButton.style.display = \"inline-block\";\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 = this.querySelector(\"#saveButton\");\n if (saveButton) {\n // Use inline style to hide the button (works regardless of Tailwind hashing)\n saveButton.style.display = \"none\";\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 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 isEmpty = this.drawingCanvas.isEmpty();\n toggle.disabled = isEmpty;\n\n console.log(\"Updating toggle state:\", {\n isEmpty,\n toggleDisabled: toggle.disabled,\n });\n\n if (!isEmpty) {\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);",[],[87,151,169],["D",1756331597912],[180],[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":181,"_17":49,"_50":51,"_52":53,"_54":55,"_56":14,"_74":182,"_18":183},["D",1756817287062],[],[19,36],"3d631a54-838f-11f0-b8db-0224a6c84d84",["D",1756331168191],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Do a drawing and see it with Gemini Flash 2.5 image gen","imageUrl","userId","25f41957-737e-448b-bae4-dec9937eed5b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","f5d3fee2-e1c2-4f2b-b60d-716ec388aac8","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_239":235},"org",{"_11":12,"_232":233,"_234":235,"_194":195,"_236":237,"_238":55},"branch",{"_17":44,"_13":16,"_34":42,"_224":184,"_225":-5,"_226":-5,"_227":-5,"_228":-5,"_229":-5,"_230":14,"_231":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Paul Kinlan","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yWG9oT0R2UTMxam83NXp1d0RRaGJYVTY0aFYifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":184,"_13":14,"_47":313,"_186":-5,"_187":55,"_188":189,"_190":189,"_191":192,"_193":-5,"_194":195,"_196":38,"_197":46,"_198":46,"_199":-5,"_200":201,"_202":203,"_204":-5,"_205":-5,"_206":-5,"_207":-5,"_208":209,"_210":209,"_211":212,"_213":212,"_214":212,"_215":209,"_216":209,"_217":314,"_219":315,"_221":316,"_223":55},[271,273,283,284],"files",[271,272,273,274,275,276,277,278,279,280,281,282,283,284],"counts",{"_262":61,"_263":201,"_264":61,"_32":265,"_266":267},[260],{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":60,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_18":259},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":14,"_18":261},[19,36],"pulls","branches","forks",{"_268":201,"_270":61},"connections",{"_268":61,"_269":61},"count","unfilledCount","emptyCount",{"_34":58,"_13":19,"_37":40,"_39":-5,"_41":42,"_43":59,"_45":46,"_47":177,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":311,"_18":312},{"_34":35,"_13":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":181,"_17":49,"_50":51,"_52":53,"_54":55,"_56":14,"_74":309,"_18":310},{"_34":86,"_13":87,"_37":88,"_39":-5,"_41":42,"_43":89,"_45":46,"_47":90,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":307,"_18":308},{"_34":150,"_13":151,"_37":152,"_39":88,"_41":42,"_43":153,"_45":46,"_47":154,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":305,"_18":306},{"_34":168,"_13":169,"_37":170,"_39":152,"_41":42,"_43":171,"_45":46,"_47":172,"_17":173,"_50":122,"_52":174,"_54":55,"_56":-5,"_74":303,"_18":304},{"_34":159,"_13":160,"_37":161,"_39":152,"_41":42,"_43":162,"_45":46,"_47":163,"_17":164,"_50":122,"_52":165,"_54":55,"_56":-5,"_74":301,"_18":302},{"_34":126,"_13":127,"_37":128,"_39":88,"_41":42,"_43":129,"_45":46,"_47":130,"_17":61,"_50":62,"_52":-5,"_54":55,"_56":-5,"_74":299,"_18":300},{"_34":143,"_13":144,"_37":145,"_39":128,"_41":42,"_43":129,"_45":46,"_47":146,"_17":61,"_50":122,"_52":147,"_54":55,"_56":-5,"_74":297,"_18":298},{"_34":135,"_13":136,"_37":137,"_39":128,"_41":42,"_43":138,"_45":46,"_47":139,"_17":59,"_50":122,"_52":140,"_54":55,"_56":-5,"_74":295,"_18":296},{"_34":116,"_13":117,"_37":118,"_39":88,"_41":42,"_43":119,"_45":46,"_47":120,"_17":121,"_50":122,"_52":123,"_54":55,"_56":-5,"_74":293,"_18":294},{"_34":107,"_13":108,"_37":109,"_39":88,"_41":42,"_43":110,"_45":46,"_47":111,"_17":112,"_50":24,"_52":113,"_54":55,"_56":-5,"_74":291,"_18":292},{"_34":98,"_13":99,"_37":100,"_39":88,"_41":42,"_43":101,"_45":46,"_47":102,"_17":103,"_50":24,"_52":104,"_54":55,"_56":-5,"_74":289,"_18":290},{"_34":77,"_13":78,"_37":79,"_39":-5,"_41":42,"_43":80,"_45":46,"_47":81,"_17":82,"_50":24,"_52":83,"_54":55,"_56":-5,"_74":287,"_18":288},{"_34":68,"_13":69,"_37":70,"_39":-5,"_41":42,"_43":71,"_45":46,"_47":72,"_17":61,"_50":24,"_52":73,"_54":55,"_56":-5,"_74":285,"_18":286},[],[69],[],[78],[],[87,99],[],[87,108],[],[87,117],[],[87,127,136],[],[87,127,144],[278,279],[87,127],[],[87,151,160],[],[87,151,169],[275,276],[87,151],[274,277,280,281,282],[87],[],[19,36],[272],[19],["D",1756331168191],{"_11":12,"_239":235},{"_11":12,"_232":233,"_234":235,"_194":195,"_236":237,"_238":55},{"_17":44,"_13":16,"_34":42,"_224":184,"_225":-5,"_226":-5,"_227":-5,"_228":-5,"_229":-5,"_230":14,"_231":12},"ctx",{"_217":-5,"_256":350,"_351":352,"_353":354,"_355":55,"_356":55,"_357":55,"_358":46,"_359":-5,"_360":-7,"_361":-7,"_362":61,"_363":55,"_364":55,"_365":-5,"_366":55,"_367":55,"_368":55,"_369":-5},"ENV",{"_321":322,"_323":324,"_325":16,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5a709144666c9e69e88140f015c586412f0fd8d3","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"]