Initial commit with proper LFS tracking

.gitattributes

@@ -0,0 +1,36 @@
+# Auto detect text files and perform LF normalization
+* text=auto
+# Binary formats tracked with LFS
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.pdf filter=lfs diff=lfs merge=lfs -text
+# Fonts
+*.ttf filter=lfs diff=lfs merge=lfs -text
+*.otf filter=lfs diff=lfs merge=lfs -text
+*.woff filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+# Archives
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tar.gz filter=lfs diff=lfs merge=lfs -text
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+# Models and binary data
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+# Video/audio
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.mov filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+# Mac specific
+.DS_Store filter=lfs diff=lfs merge=lfs -text
+public/**/* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,37 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js build outputs
+/.next/
+/out/
+
+# production build outputs
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# Large archive folders
+/.next/cache/webpack/

Dockerfile

@@ -0,0 +1,61 @@
+# Stage 1: Dependencies and Build
+FROM node:18-alpine AS builder
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy application code
+COPY . .
+
+# Ensure next.config.js has output: 'standalone' setting 
+RUN if [ -f next.config.js ]; then \
+      # Check if next.config.js exists but doesn't have 'output: standalone'
+      if ! grep -q "output: 'standalone'" next.config.js && ! grep -q 'output: "standalone"' next.config.js; then \
+        # If it's a module
+        if grep -q "export" next.config.js; then \
+          echo "Updating module-type next.config.js with standalone output"; \
+          sed -i 's/export default/const nextConfig = /g' next.config.js && \
+          echo "nextConfig.output = 'standalone';\nexport default nextConfig;" >> next.config.js; \
+        else \
+          # If it's CommonJS
+          echo "Updating CommonJS next.config.js with standalone output"; \
+          sed -i 's/module.exports =/const nextConfig =/g' next.config.js && \
+          echo "nextConfig.output = 'standalone';\nmodule.exports = nextConfig;" >> next.config.js; \
+        fi; \
+      fi; \
+    else \
+      # Create next.config.js if it doesn't exist
+      echo "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  output: 'standalone'\n};\n\nmodule.exports = nextConfig;" > next.config.js; \
+    fi
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Production
+FROM node:18-alpine AS runner
+WORKDIR /app
+
+# Set to production environment
+ENV NODE_ENV production
+
+# Create a non-root user to run the app and own app files
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+# Copy only necessary files from the builder stage
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Switch to non-root user
+USER nextjs
+
+# Expose the port the app will run on
+EXPOSE 3000
+
+# Set the command to start the app
+CMD ["node", "server.js"] 

README.md

@@ -0,0 +1,36 @@
+---
+title: Gemini 3D Co-Drawing
+emoji: 🌖
+colorFrom: yellow
+colorTo: indigo
+sdk: docker
+pinned: false
+license: apache-2.0
+app_port: 3000
+short_description: 'Gemini native image for 3D co-drawing'
+---
+
+# Gemini 3D Co-Drawing
+
+A collaborative drawing application powered by Google's Gemini 2.0 API for image generation. This app allows users to create drawings and have Gemini enhance or add to them based on text prompts.
+
+## API Key Setup
+
+To use this application, you'll need a Google AI Studio API key:
+
+1. Visit [Google AI Studio](https://aistudio.google.com/app/apikey)
+2. Create a new API key or use an existing one
+3. Put your API key in a `.env` file. 
+
+```
+GEMINI_API_KEY={your_key}
+```
+
+The free tier includes generous usage limits, but you can also upgrade for additional capacity.
+
+## Technology Stack
+
+This is a [Next.js](https://nextjs.org) project that uses:
+- Next.js for the frontend and API routes
+- Google's Gemini 2.0 API for image generation
+- Canvas API for drawing functionality

components/ActionBar.js

@@ -0,0 +1,61 @@
+import { Download, RefreshCw, History } from 'lucide-react';
+
+const ActionBar = ({ handleSaveImage, handleRegenerate, onOpenHistory, hasGeneratedContent = false }) => {
+  return (
+    <div className="fixed bottom-4 right-4 flex gap-2">
+      <button
+        type="button"
+        onClick={handleRegenerate}
+        disabled={!hasGeneratedContent}
+        className={`group flex flex-col w-20 border border-gray-200 overflow-hidden rounded-xl transition-colors bg-gray-50 ${
+          hasGeneratedContent
+            ? 'hover:border-gray-300 hover:bg-white'
+            : 'opacity-50 cursor-not-allowed'
+        }`}
+        aria-label="Regenerate"
+      >
+        <div className="w-full relative flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
+          <RefreshCw className={`w-6 h-6 text-gray-400 ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`} />
+        </div>
+        <div className={`px-1 py-1 text-center text-xs font-medium text-gray-400 w-full ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`}>
+          <div className="truncate">Regenerate</div>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={onOpenHistory}
+        className="group flex flex-col w-20 border border-gray-200 overflow-hidden rounded-xl transition-colors bg-gray-50 hover:border-gray-300 hover:bg-white"
+        aria-label="View History"
+      >
+        <div className="w-full relative flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
+          <History className="w-6 h-6 text-gray-400 group-hover:text-gray-600" />
+        </div>
+        <div className="px-1 py-1 text-center text-xs font-medium text-gray-400 w-full group-hover:text-gray-600">
+          <div className="truncate">History</div>
+        </div>
+      </button>
+
+      <button
+        type="button"
+        onClick={handleSaveImage}
+        disabled={!hasGeneratedContent}
+        className={`group flex flex-col w-20 border border-gray-200 overflow-hidden rounded-xl transition-colors bg-gray-50 ${
+          hasGeneratedContent
+            ? 'hover:border-gray-300 hover:bg-white'
+            : 'opacity-50 cursor-not-allowed'
+        }`}
+        aria-label="Save Image"
+      >
+        <div className="w-full relative flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
+          <Download className={`w-6 h-6 text-gray-400 ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`} />
+        </div>
+        <div className={`px-1 py-1 text-center text-xs font-medium text-gray-400 w-full ${hasGeneratedContent ? 'group-hover:text-gray-600' : ''}`}>
+          <div className="truncate">Save</div>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default ActionBar; 

components/AddMaterialModal.js

@@ -0,0 +1,484 @@
+import { useRef, useState, useMemo } from 'react';
+import { Upload, Edit, RefreshCw, RefreshCcw, Sparkles, ImageIcon, Plus, Check } from 'lucide-react';
+import { addMaterialToLibrary } from './StyleSelector';
+
+const AddMaterialModal = ({ 
+  showModal, 
+  onClose, 
+  onAddMaterial, 
+  newMaterialName, 
+  setNewMaterialName,
+  generatedMaterialName,
+  setGeneratedMaterialName,
+  generatedPrompt,
+  setGeneratedPrompt,
+  customPrompt,
+  setCustomPrompt,
+  previewThumbnail,
+  customImagePreview,
+  useCustomImage,
+  isGeneratingPreview,
+  isGeneratingText,
+  showMaterialNameEdit,
+  setShowMaterialNameEdit,
+  showCustomPrompt,
+  setShowCustomPrompt,
+  handleRefreshThumbnail,
+  handleReferenceImageUpload,
+  handleNewMaterialDescription,
+  onStyleSelected,
+  materials
+}) => {
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [inputValue, setInputValue] = useState(newMaterialName);
+  const [hoveredMaterial, setHoveredMaterial] = useState(null);
+
+  // Sample materials for the library
+  const sampleMaterials = [
+    {
+      name: 'Topographic',
+      image: '/samples/topographic.jpeg',
+      prompt: "Transform this sketch into a sculptural form composed of precisely stacked, thin metallic rings or layers. Render it with warm copper/bronze tones with each layer maintaining equal spacing from adjacent layers, creating a topographic map effect. The form should appear to flow and undulate while maintaining the precise parallel structure. Use dramatic studio lighting against a pure black background to highlight the metallic luster and dimensional quality. Render it in a high-end 3D visualization style with perfect definition between each ring layer."
+    },
+    {
+      name: 'Glow Jelly',
+      image: '/samples/glowjelly.png',
+      prompt: "Transform this sketch into a boobly material. Render it in a high-end 3D visualization style with professional studio lighting against a pure black background. Make it look like an elegant Cinema 4D and Octane rendering with detailed material properties and characteristics. The final result should be an elegant visualization with perfect studio lighting, crisp shadows, and high-end material definition. Specifically, the boobly material should exhibit noticeable internal light scattering and a high degree of dynamic deformation on impact. To achieve the boobly effect, use a combination of Octane's Subsurface Scattering (SSS) and a Dynamic Mesh simulation in Cinema 4D, feeding the displacement output into the Octane material via an Octane Displacement node. The SSS should be tuned for a soft, fleshy translucency with a slight color shift towards red in thinner areas. Implement a high-frequency, low-amplitude noise pattern within the SSS radius to simulate subcutaneous textures. The material's surface should possess a subtle sheen, achieved through a thin-film interference effect in the Octane Glossy material, adding a rainbow iridescence that shifts with the viewing angle. The Dynamic Mesh should simulate realistic jiggle physics; consider using Cinema 4D's Soft Body Dynamics with carefully tuned spring and dampening values. Optimize the Octane scene for render efficiency, focusing on minimizing noise in the SSS and glossy reflections with adequate sample counts and kernel settings. The boobly material possesses a unique combination of squishiness and internal illumination, resulting in a captivating visual texture reminiscent of soft, organic forms. Rendering requires careful balancing of SSS settings and dynamic mesh calculations to achieve a realistic and visually appealing final result."
+    },
+    {
+      name: 'Gold',
+      image: '/samples/gold.png',
+      prompt: "Transform this sketch into a sculptural form composed of precisely stacked, thin metallic rings or layers. Render it with warm copper/bronze tones with each layer maintaining equal spacing from adjacent layers, creating a topographic map effect. The form should appear to flow and undulate while maintaining the precise parallel structure. Use dramatic studio lighting against a pure black background to highlight the metallic luster and dimensional quality. Render it in a high-end 3D visualization style with perfect definition between each ring layer."
+    },
+    {
+      name: 'Chinese Porcelain',
+      image: '/samples/porcelain.png',
+      prompt: "Transform this sketch into a ceramic vase featuring traditional blue and white Chinese porcelain designs, including dragons and cloud motifs. Pay close attention to the subtle variations in the blue pigment, creating a hand-painted effect with soft edges and intricate details. The vase should have a slightly glossy surface with gentle reflections. Render in Cinema 4D with Octane, using professional studio lighting to showcase the form and texture against a pure black background. Simulate subtle imperfections and surface irregularities typical of hand-crafted porcelain."
+    },
+    {
+      name: 'Voxels',
+      image: '/samples/voxels.png',
+      prompt: "Transform this sketch into a physical manifestation of 8-bit voxel art. The rendering should capture the distinct, blocky nature of the medium, with each 'voxel' clearly defined and possessing a matte, slightly rough surface texture. Render the object as if constructed from these individual, quantized blocks, highlighting the stepped edges and discrete color transitions inherent to the 8-bit aesthetic. The professional studio lighting should emphasize the geometric forms and reveal subtle variations in tone across the voxel surfaces. Use Cinema 4D and Octane to create a high-resolution visualization that showcases the material's unique properties against a pure black background, ensuring crisp shadows and a clear definition of each individual voxel. The final result should be an elegant visualization that celebrates the charm and simplicity of 8-bit graphics in a physical form."
+    },
+    {
+      name: 'Studio Ghibli',
+      image: '/samples/ghibli.png',
+      prompt: "Render the specific subject/scene/character detailed in the provided drawing/text. Faithfully interpret the core elements, composition, and figures present in the input. THEN, apply the following Studio Ghibli stylistic treatment: Aesthetic: Convert the rendering into the characteristic hand-painted look of Studio Ghibli films. Backgrounds: Use lush, painterly backgrounds that complement the subject (if the input lacks a background, create one in the Ghibli style; if it has one, render that background in the Ghibli style). Linework: Employ soft, expressive linework, avoiding harsh digital lines. Color: Utilize a warm, evocative, and harmonious color palette. Atmosphere: Infuse the scene with a Ghibli sense of wonder, nostalgia, or gentle melancholy, appropriate to the subject matter drawn. Details: Add subtle environmental details like wind, detailed foliage, or atmospheric effects typical of Ghibli, where suitable for the depicted scene. Lighting: Implement soft, natural, and atmospheric lighting (dappled sunlight, golden hour, overcast) integrated into the painted style. Goal: The final image must look like a high-quality Ghibli keyframe or background plate that is a clear and recognizable interpretation of the original provided drawing/text, not a generic Ghibli scene."
+    },
+    {
+      name: 'Purple Fur',
+      image: '/samples/purplefur.png',
+      prompt: "Transform this sketch into a 3D model with a stylized fur material, featuring long, soft, vibrant purple strands with subtle dark grey roots. Pay close attention to the direction and clumping of the fur to mimic the animal form's texture. Render it in Cinema 4D with Octane, using professional studio lighting against a pure black background to accentuate the texture and color depth of the fur, creating soft shadows and highlights."
+    },
+    {
+      name: 'Water',
+      image: '/samples/water.png',
+      prompt: "Transform this sketch into a dynamic water sculpture. Render it in a high-end 3D visualization style with professional studio lighting against a pure black background. Make it look like an elegant Cinema 4D and Octane rendering with detailed material properties and characteristics, capturing the essence of flowing water. The final result should be an elegant visualization with perfect studio lighting, crisp shadows, and high-end material definition, showcasing the water's transparency, refractive index, and subtle surface ripples. Emphasize the interplay of light and shadow as it passes through the water, highlighting its fluid and dynamic nature."
+    },
+    {
+      name: 'Shrek',
+      image: '/samples/shrek.png',
+      prompt: "Transform this sketch into a Shrek-like material, capturing the essence of his green, slightly bumpy skin texture. Render it in a high-end 3D visualization style with professional studio lighting against a pure black background. Emphasize the subtle variations in skin tone, the slight translucency that allows for subsurface scattering, and the almost mossy, organic feel. Make it look like an elegant Cinema 4D and Octane rendering with detailed material properties and characteristics, highlighting the way light interacts with the unique surface. The final result should be an elegant visualization with perfect studio lighting, crisp shadows, and high-end material definition, showcasing the Shrek-like skin properties."
+    },
+  ];
+
+  // Create a memoized list of already added material names
+  const addedMaterialNames = useMemo(() => {
+    if (!materials) return [];
+    
+    // Extract all material names (convert to lowercase for case-insensitive comparison)
+    return Object.values(materials)
+      .map(material => material.name?.toLowerCase())
+      .filter(Boolean); // Filter out undefined/null
+  }, [materials]);
+
+  // Check if a material is already in the user's library
+  const isMaterialAlreadyAdded = (materialName) => {
+    return addedMaterialNames.includes(materialName.toLowerCase());
+  };
+
+  // Handle clicking outside of the modal to close it
+  const handleClickOutsideModal = (e) => {
+    if (e.target.classList.contains('modalBackdrop')) {
+      onClose();
+    }
+  };
+
+  // Handle selecting a material from the library
+  const handleAddMaterialFromLibrary = (material) => {
+    // Skip if already added
+    if (isMaterialAlreadyAdded(material.name)) {
+      return;
+    }
+    
+    // Create a material object for the library
+    const materialObj = {
+      name: material.name,
+      prompt: material.prompt,
+      image: material.image
+    };
+    
+    // Add material to library and get the key
+    const materialKey = addMaterialToLibrary(materialObj);
+    
+    // Notify parent to select this material if the callback exists
+    if (onStyleSelected && typeof onStyleSelected === 'function') {
+      onStyleSelected(materialKey);
+    }
+    
+    // Close the modal
+    onClose();
+  };
+
+  // Handle drag and drop events
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+      const file = files[0];
+      if (file.type.startsWith('image/')) {
+        // Create a synthetic event to pass to handleReferenceImageUpload
+        const syntheticEvent = {
+          target: {
+            files: [file]
+          }
+        };
+        handleReferenceImageUpload(syntheticEvent);
+      } else {
+        alert('Please drop an image file');
+      }
+    }
+  };
+
+  // Create a debounced version of the material description handler
+  const handleSafeMaterialDescription = (description) => {
+    // Don't process if already generating
+    if (isGeneratingText || isGeneratingPreview) {
+      return;
+    }
+    
+    // Update the name and generate material - this should trigger just one workflow
+    setNewMaterialName(description);
+    handleNewMaterialDescription(description);
+  };
+
+  if (!showModal) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-30 h-screen flex items-center justify-center z-50 modalBackdrop overflow-y-auto p-0"
+      onClick={handleClickOutsideModal}
+      onKeyDown={(e) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      }}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className="bg-white rounded-xl shadow-medium w-full max-w-6xl mx-auto my-auto flex flex-col md:flex-row">
+        {/* Material Library Section */}
+        <div className="p-4 md:p-6 border-b md:border-b-0 md:border-r border-gray-100 w-full md:w-1/2 max-h-[50vh] md:max-h-none overflow-auto">
+          <div className="mb-3 md:mb-4">
+            <h2 className="text-lg md:text-xl font-medium text-gray-800" style={{ fontFamily: "'Google Sans Text', sans-serif" }}>Material Library</h2>
+          </div>
+          
+          <div className="grid grid-cols-3 md:grid-cols-5 gap-2">
+            {sampleMaterials.map((material, index) => {
+              const isAlreadyAdded = isMaterialAlreadyAdded(material.name);
+              return (
+                <button
+                  key={index}
+                  onClick={() => handleAddMaterialFromLibrary(material)}
+                  type="button" 
+                  aria-label={`Add ${material.name} material`}
+                  className={`focus:outline-none group ${isAlreadyAdded ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  disabled={isAlreadyAdded}
+                >
+                  <div className={`w-full border overflow-hidden rounded-xl ${isAlreadyAdded ? 'bg-gray-100 border-gray-200' : 'bg-gray-50 border-gray-200 group-hover:bg-white group-hover:border-gray-300'}`}>
+                    <div className="w-full relative" style={{ aspectRatio: '1/1' }}>
+                      <img 
+                        src={material.image}
+                        alt={`${material.name} style example`}
+                        className={`w-full h-full object-cover ${isAlreadyAdded ? 'opacity-70' : ''}`}
+                        onError={(e) => {
+                          console.error(`Error loading thumbnail for ${material.name}`);
+                          e.target.src = '/samples/chrome.jpeg';
+                        }}
+                      />
+                      <div className="absolute inset-0">
+                        {isAlreadyAdded ? (
+                          <div className="absolute inset-0 flex items-center justify-center">
+                            <div className="flex items-center gap-1 bg-gray-500 px-2.5 py-1.5 text-white rounded-full text-xs font-medium">
+                              <Check className="w-3 h-3" />
+                              <span>Added</span>
+                            </div>
+                          </div>
+                        ) : (
+                          <div className="opacity-0 group-hover:opacity-100 hover:cursor-pointer transition-opacity">
+                            <div className="absolute inset-0 bg-gray-500 bg-opacity-60 flex items-center justify-center">
+                              <div className="flex items-center gap-1 bg-blue-500 px-2.5 py-1.5 text-white rounded-full text-xs font-medium">
+                                <Plus className="w-3 h-3" />
+                                <span>Add</span>
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={`px-1 py-1 text-left text-xs font-medium ${isAlreadyAdded ? 'bg-gray-100 text-gray-400' : 'bg-gray-50 text-gray-500 group-hover:bg-white group-hover:text-gray-600'}`}>
+                      <div className="truncate">
+                        {material.name}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+        
+        {/* Add Material Form Section */}
+        <div className="p-4 md:p-6 w-full md:w-1/2">
+          <div className="flex items-center justify-between mb-4 md:mb-6">
+            <h2 className="text-lg md:text-xl font-medium text-gray-800" style={{ fontFamily: "'Google Sans Text', sans-serif" }}>Add Material</h2>
+          </div>
+
+          {/* Input Section */}
+          <div className="mb-6 md:mb-8 pb-6 md:pb-8 border-b border-gray-100">
+            <div className="space-y-4">
+              {/* Text input */}
+              <div>
+                <label htmlFor="materialDescription" className="block text-sm font-medium text-gray-700 mb-1">
+                  Describe your material
+                </label>
+                <div className="relative flex items-center">
+                  <input
+                    id="materialDescription"
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => {
+                      setInputValue(e.target.value);
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' && inputValue.trim()) {
+                        e.preventDefault();
+                        handleSafeMaterialDescription(inputValue);
+                      }
+                    }}
+                    className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-black pr-10"
+                    placeholder="Eg. Bubbles, glass etc"
+                    disabled={isGeneratingText || isGeneratingPreview}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (inputValue.trim() && !isGeneratingText && !isGeneratingPreview) {
+                        handleSafeMaterialDescription(inputValue);
+                      }
+                    }}
+                    className="absolute right-2 p-1.5 bg-blue-500 rounded-md hover:bg-blue-400 transition-colors"
+                    title="Generate material preview"
+                    disabled={isGeneratingText || isGeneratingPreview}
+                  >
+                    {isGeneratingText || isGeneratingPreview ? (
+                      <RefreshCw className="w-5 h-5 text-white animate-spin" />
+                    ) : (
+                      <div className="flex text-sm text-white items-center gap-1">
+                         <Sparkles className="w-4 h-4 text-white " /> Generate
+                      </div>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Divider with "or" */}
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-200"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-white text-gray-500">Or upload a reference image</span>
+                </div>
+              </div>
+
+              {/* Image upload */}
+              <div>
+                <div 
+                  className={`border-2 border-dashed rounded-lg p-4 flex flex-col items-center justify-center cursor-pointer transition-colors ${
+                    isDragging 
+                      ? 'border-blue-500 bg-blue-50' 
+                      : 'border-gray-300 hover:bg-gray-50'
+                  } ${isGeneratingText && useCustomImage ? 'opacity-70 pointer-events-none' : ''}`}
+                  onClick={() => !isGeneratingText && fileInputRef.current?.click()}
+                  onKeyDown={(e) => {
+                    if (!isGeneratingText && (e.key === 'Enter' || e.key === ' ')) {
+                      e.preventDefault();
+                      fileInputRef.current?.click();
+                    }
+                  }}
+                  onDragEnter={handleDragEnter}
+                  onDragLeave={handleDragLeave}
+                  onDragOver={handleDragOver}
+                  onDrop={handleDrop}
+                  style={{ minHeight: "100px" }}
+                  role="button"
+                  tabIndex={0}
+                >
+                  {isGeneratingText && useCustomImage ? (
+                    <div className="flex flex-col items-center gap-2 py-2">
+                      <RefreshCw className="w-6 h-6 text-blue-500 animate-spin" />
+                      <p className="text-sm text-blue-500 font-medium">Analyzing image...</p>
+                    </div>
+                  ) : (
+                    <>
+                      <div className="flex flex-col items-center gap-2">
+                        <ImageIcon className={`w-6 h-6 ${isDragging ? 'text-blue-500' : 'text-gray-400'}`} />
+                        <p className={`text-sm ${isDragging ? 'text-blue-500' : 'text-gray-500'} text-center font-medium`}>
+                          {isDragging ? 'Drop your image here' : 'Upload your reference image here'}
+                        </p>
+                      </div>
+                      <input
+                        id="referenceImage"
+                        ref={fileInputRef}
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={handleReferenceImageUpload}
+                        disabled={isGeneratingText && useCustomImage}
+                      />
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Review Section */}
+          {(generatedMaterialName || previewThumbnail) && (
+            <div className="mb-6 md:mb-8">
+              <div className="flex gap-4">
+                {/* Left column: Name and Prompt */}
+                <div className="flex-1 space-y-3">
+                  {/* Material Name - smaller and lighter text */}
+                  <div className="group relative">
+                    <input
+                      type="text"
+                      value={generatedMaterialName}
+                      onChange={(e) => setGeneratedMaterialName(e.target.value)}
+                      className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg 
+                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white 
+                        transition-all text-gray-900 focus:text-gray-900 text-sm focus:text-base
+                        placeholder-gray-400"
+                      placeholder="Material Name"
+                    />
+                  </div>
+
+                  {/* Prompt - smaller and lighter text */}
+                  <div className="group relative">
+                    <textarea
+                      value={customPrompt || generatedPrompt}
+                      onChange={(e) => setCustomPrompt(e.target.value)}
+                      className="w-full px-3 py-2 bg-white border border-gray-200 rounded-lg 
+                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white 
+                        transition-all text-gray-900 text-sm
+                        h-[100px] md:h-[180px] resize-none placeholder-gray-400 leading-relaxed"
+                      placeholder="Prompt"
+                    />
+                  </div>
+                </div>
+
+                {/* Right column: Preview */}
+                <div className="w-28 md:w-36">
+                  <div className="w-28 h-28 md:w-36 md:h-36 bg-gray-50 border border-gray-200 rounded-lg overflow-hidden relative flex items-center justify-center">
+                    {/* Preview content */}
+                    {((previewThumbnail || customImagePreview) && !isGeneratingPreview) ? (
+                      <img 
+                        src={useCustomImage ? customImagePreview : previewThumbnail} 
+                        alt="Material preview"
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full bg-white flex flex-col items-center justify-center">
+                        {isGeneratingPreview ? (
+                          <>
+                            <RefreshCw className="w-6 h-6 md:w-8 md:h-8 text-blue-500 animate-spin mb-2" />
+                            <p className="text-xs md:text-sm text-blue-500 text-center px-2 md:px-4">
+                              Generating preview...
+                            </p>
+                          </>
+                        ) : (
+                          <p className="text-xs md:text-sm text-gray-400 text-center px-2 md:px-4">
+                            Preview
+                          </p>
+                        )}
+                      </div>
+                    )}
+                    
+                    {/* Refresh button */}
+                    {(previewThumbnail || customImagePreview) && !isGeneratingPreview && !useCustomImage && (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          if (!isGeneratingPreview) {
+                            handleRefreshThumbnail(customPrompt);
+                          }
+                        }}
+                        className="absolute top-2 right-2 bg-white/80 rounded-full p-1 hover:bg-white transition-colors"
+                        title="Refresh thumbnail"
+                      >
+                        <RefreshCcw className="w-3 h-3 md:w-4 md:h-4 text-gray-600" />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          
+          {/* Action buttons */}
+          <div className="flex justify-end gap-3 mt-4 md:mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-2 border border-gray-200 rounded-lg text-gray-600 hover:border-gray-300 hover:bg-gray-50 text-sm font-medium transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onAddMaterial}
+              disabled={isGeneratingPreview || !newMaterialName.trim()}
+              className="px-3 py-2 border border-blue-500 rounded-lg text-white bg-blue-500 hover:bg-blue-400 hover:cursor-pointer disabled:opacity-50 text-sm font-medium transition-colors"
+            >
+              + Add Material
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddMaterialModal; 

components/ApiKeyModal.js

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+
+const ApiKeyModal = ({ isOpen, onClose, onSubmit, initialValue = '' }) => {
+  const [apiKey, setApiKey] = useState(initialValue);
+  
+  if (!isOpen) return null;
+  
+  return (
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50 modalBackdrop"
+      onClick={(e) => {
+        if (e.target.classList.contains('modalBackdrop')) {
+          onClose();
+        }
+      }}
+    >
+      <div className="bg-white p-6 rounded-xl shadow-medium max-w-md w-full">
+        <h2 className="text-xl font-medium text-gray-800 mb-4">API Key Required</h2>
+        
+        <p className="text-sm text-gray-600 mb-6">
+          You've reached the limit of free Gemini API calls. To continue using this feature, please enter your own Gemini API key below.
+          You can get a free API key from <a href="https://ai.google.dev/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Google AI Studio</a>.
+        </p>
+        
+        <form onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit(apiKey);
+        }}>
+          <div className="mb-4">
+            <label htmlFor="apiKey" className="block text-sm font-medium text-gray-700 mb-1">
+              Gemini API Key
+            </label>
+            <input
+              id="apiKey"
+              type="text"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="AIza..."
+              required
+            />
+          </div>
+          
+          <div className="flex justify-end gap-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-2 border border-gray-200 rounded-lg text-gray-600 hover:border-gray-300 hover:bg-gray-50 text-sm font-medium"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={!apiKey.trim()}
+              className="px-3 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 text-sm font-medium"
+            >
+              Save API Key
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default ApiKeyModal; 

components/BottomToolBar.js

@@ -0,0 +1,25 @@
+import { Plus, HelpCircle } from 'lucide-react';
+
+const BottomToolBar = () => {
+  const tools = [
+    { id: 'add', icon: Plus, label: 'Add' },
+    { id: 'help', icon: HelpCircle, label: 'Help' }
+  ];
+
+  return (
+    <div className="flex flex-col gap-2 rounded-xl p-2 opacity-0">
+      {tools.map((tool) => (
+        <div key={tool.id} className="relative">
+          <button
+            className="p-2 rounded-lg"
+            title={tool.label}
+          >
+            <tool.icon className="w-5 h-5" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BottomToolBar; 

components/Canvas.js

@@ -0,0 +1,1099 @@
+  import { useRef, useEffect, useState, forwardRef, useImperativeHandle, useCallback } from 'react';
+import { 
+  getCoordinates, 
+  drawBezierCurve, 
+  drawBezierGuides, 
+  createAnchorPoint,
+  isNearHandle,
+  updateHandle
+} from './utils/canvasUtils';
+import { PencilLine, Upload, ImagePlus, LoaderCircle, Brush } from 'lucide-react';
+import ToolBar from './ToolBar';
+import StyleSelector from './StyleSelector';
+
+const Canvas = forwardRef(({
+  canvasRef,
+  currentTool,
+  isDrawing,
+  startDrawing,
+  draw,
+  stopDrawing,
+  handleCanvasClick,
+  handlePenClick,
+  handleGeneration,
+  tempPoints,
+  setTempPoints,
+  handleUndo,
+  clearCanvas,
+  setCurrentTool,
+  currentDimension,
+  onImageUpload,
+  onGenerate,
+  isGenerating,
+  setIsGenerating,
+  currentColor,
+  currentWidth,
+  handleStrokeWidth,
+  saveCanvasState,
+  onDrawingChange,
+  styleMode,
+  setStyleMode,
+  isSendingToDoodle,
+}, ref) => {
+  const [showBezierGuides, setShowBezierGuides] = useState(true);
+  const [activePoint, setActivePoint] = useState(-1);
+  const [activeHandle, setActiveHandle] = useState(null);
+  const [symmetric, setSymmetric] = useState(true);
+  const [lastMousePos, setLastMousePos] = useState({ x: 0, y: 0 });
+  const [hasDrawing, setHasDrawing] = useState(false);
+  const [strokeCount, setStrokeCount] = useState(0);
+  const fileInputRef = useRef(null);
+  const [shapeStartPos, setShapeStartPos] = useState(null);
+  const [previewCanvas, setPreviewCanvas] = useState(null);
+  const [isDoodleConverting, setIsDoodleConverting] = useState(false);
+  const [uploadedImages, setUploadedImages] = useState([]);
+  const [draggingImage, setDraggingImage] = useState(null);
+  const [resizingImage, setResizingImage] = useState(null);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [isDraggingFile, setIsDraggingFile] = useState(false);
+  const canvasContainerRef = useRef(null);
+
+  // Create a ref to track the previous style mode
+  const prevStyleModeRef = useRef(styleMode);
+  
+  // Stable callback reference for handleGeneration
+  const handleGenerationRef = useRef(handleGeneration);
+  useEffect(() => {
+    handleGenerationRef.current = handleGeneration;
+  }, [handleGeneration]);
+  
+  // Add effect to watch for styleMode changes and trigger generation
+  useEffect(() => {
+    // Skip the first render
+    if (prevStyleModeRef.current === styleMode) {
+      return;
+    }
+    
+    // Update the ref to current value
+    prevStyleModeRef.current = styleMode;
+    
+    // When styleMode changes, trigger generation
+    if (typeof handleGenerationRef.current === 'function') {
+      handleGenerationRef.current();
+    }
+  }, [styleMode]);
+
+  // Add touch event prevention function
+  useEffect(() => {
+    // Function to prevent default touch behavior on canvas
+    const preventTouchDefault = (e) => {
+      if (isDrawing) {
+        e.preventDefault();
+      }
+    };
+
+    // Add event listener when component mounts
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.addEventListener('touchstart', preventTouchDefault, { passive: false });
+      canvas.addEventListener('touchmove', preventTouchDefault, { passive: false });
+    }
+
+    // Remove event listener when component unmounts
+    return () => {
+      if (canvas) {
+        canvas.removeEventListener('touchstart', preventTouchDefault);
+        canvas.removeEventListener('touchmove', preventTouchDefault);
+      }
+    };
+  }, [isDrawing, canvasRef]);
+
+  // Add debugging info to console
+  useEffect(() => {
+    console.log('Canvas tool changed or isDrawing changed:', { currentTool, isDrawing });
+  }, [currentTool, isDrawing]);
+
+  // Add effect to rerender when uploadedImages change
+  useEffect(() => {
+    if (uploadedImages.length > 0) {
+      renderCanvas();
+    }
+  }, [uploadedImages]);
+
+  // Redraw bezier guides and control points when tempPoints change
+  useEffect(() => {
+    if (currentTool === 'pen' && tempPoints.length > 0 && showBezierGuides) {
+      redrawBezierGuides();
+    }
+  }, [tempPoints, showBezierGuides, currentTool]);
+
+  // Add useEffect to check if canvas has content
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    
+    // Check if canvas has any non-white pixels (i.e., has a drawing)
+    const hasNonWhitePixels = Array.from(imageData.data).some((pixel, index) => {
+      // Check only RGB values (skip alpha)
+      return index % 4 !== 3 && pixel !== 255;
+    });
+    
+    setHasDrawing(hasNonWhitePixels);
+  }, [canvasRef]);
+
+  // Add this near your other useEffects
+  useEffect(() => {
+    // When isDoodleConverting becomes true, also set hasDrawing to true
+    if (isDoodleConverting) {
+      setHasDrawing(true);
+    }
+  }, [isDoodleConverting]);
+
+  // Create a stable ref for handleFileChange to avoid dependency cycles
+  const handleFileChangeRef = useRef(null);
+  
+  // Update handleFileChange function
+  const handleFileChange = useCallback(async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Store the current tool
+    const previousTool = currentTool;
+    
+    // Hide the placeholder immediately when upload begins
+    if (typeof onDrawingChange === 'function') {
+      onDrawingChange(true);
+    }
+    
+    // Show loading state
+    setIsDoodleConverting(true);
+
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      const imageDataUrl = e.target.result;
+      
+      try {
+        // Compress the image before sending
+        const compressedImage = await compressImage(imageDataUrl);
+        
+        const response = await fetch('/api/convert-to-doodle', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            imageData: compressedImage.split(",")[1],
+          }),
+        });
+
+        const data = await response.json();
+        
+        if (data.success && data.imageData) {
+          const img = new Image();
+          img.onload = () => {
+            const ctx = canvasRef.current.getContext('2d');
+            
+            // Clear canvas
+            ctx.fillStyle = '#FFFFFF';
+            ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+            
+            // Calculate dimensions
+            const scale = Math.min(
+              canvasRef.current.width / img.width,
+              canvasRef.current.height / img.height
+            );
+            const x = (canvasRef.current.width - img.width * scale) / 2;
+            const y = (canvasRef.current.height - img.height * scale) / 2;
+            
+            // Draw doodle
+            ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
+            
+            // Save canvas state
+            saveCanvasState();
+            
+            // Hide loading state
+            setIsDoodleConverting(false);
+
+            // Ensure placeholder is hidden
+            if (typeof onDrawingChange === 'function') {
+              onDrawingChange(true);
+            }
+
+            // Automatically trigger generation
+            handleGenerationRef.current();
+          };
+          
+          img.src = `data:image/png;base64,${data.imageData}`;
+        }
+      } catch (error) {
+        console.error('Error processing image:', error);
+        setIsDoodleConverting(false);
+        alert('Error processing image. Please try a different image or a smaller file size.');
+        
+        // Restore previous tool even if there's an error
+        setCurrentTool(previousTool);
+      }
+    };
+
+    reader.readAsDataURL(file);
+  }, [canvasRef, currentTool, onDrawingChange, saveCanvasState, setCurrentTool, setIsDoodleConverting]);
+
+  // Keep the ref updated
+  useEffect(() => {
+    handleFileChangeRef.current = handleFileChange;
+  }, [handleFileChange]);
+
+  // Add drag and drop event handlers
+  useEffect(() => {
+    const container = canvasContainerRef.current;
+    if (!container) return;
+
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDraggingFile(true);
+    };
+
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!isDraggingFile) setIsDraggingFile(true);
+    };
+
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      // Only set to false if we're leaving the container (not entering a child)
+      if (e.currentTarget === container && !container.contains(e.relatedTarget)) {
+        setIsDraggingFile(false);
+      }
+    };
+
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDraggingFile(false);
+      
+      const files = e.dataTransfer.files;
+      if (files.length > 0) {
+        const file = files[0];
+        
+        // Check if it's an image
+        if (file.type.startsWith('image/')) {
+          // Create a fake event object to reuse the existing handleFileChange function
+          const fakeEvent = { target: { files: [file] } };
+          if (handleFileChangeRef.current) {
+            handleFileChangeRef.current(fakeEvent);
+          }
+        }
+      }
+    };
+
+    container.addEventListener('dragenter', handleDragEnter);
+    container.addEventListener('dragover', handleDragOver);
+    container.addEventListener('dragleave', handleDragLeave);
+    container.addEventListener('drop', handleDrop);
+
+    return () => {
+      container.removeEventListener('dragenter', handleDragEnter);
+      container.removeEventListener('dragover', handleDragOver);
+      container.removeEventListener('dragleave', handleDragLeave);
+      container.removeEventListener('drop', handleDrop);
+    };
+  }, [isDraggingFile]);
+
+  const handleKeyDown = (e) => {
+    // Add keyboard accessibility
+    if (e.key === 'Enter' || e.key === ' ') {
+      handleCanvasClick(e);
+    }
+    
+    // Toggle symmetric handles with Shift key
+    if (e.key === 'Shift') {
+      setSymmetric(!symmetric);
+    }
+  };
+
+  // Draw bezier control points and guide lines
+  const redrawBezierGuides = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    // Get the canvas context
+    const ctx = canvas.getContext('2d');
+    
+    // Save the current canvas state to redraw later
+    const canvasImage = new Image();
+    canvasImage.src = canvas.toDataURL();
+    
+    canvasImage.onload = () => {
+      // Clear canvas
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      
+      // Redraw the canvas content
+      ctx.drawImage(canvasImage, 0, 0);
+      
+      // Draw the control points and guide lines
+      drawBezierGuides(ctx, tempPoints);
+    };
+  };
+
+  // Function to draw a star shape
+  const drawStar = (ctx, x, y, radius, points = 5) => {
+    ctx.beginPath();
+    for (let i = 0; i <= points * 2; i++) {
+      const r = i % 2 === 0 ? radius : radius / 2;
+      const angle = (i * Math.PI) / points;
+      const xPos = x + r * Math.sin(angle);
+      const yPos = y + r * Math.cos(angle);
+      if (i === 0) ctx.moveTo(xPos, yPos);
+      else ctx.lineTo(xPos, yPos);
+    }
+    ctx.closePath();
+  };
+
+  // Function to draw shapes
+  const drawShape = (ctx, startPos, endPos, shape, isPreview = false) => {
+    if (!startPos || !endPos) return;
+
+    const width = endPos.x - startPos.x;
+    const height = endPos.y - startPos.y;
+    const radius = Math.sqrt(width * width + height * height) / 2;
+
+    ctx.strokeStyle = currentColor || '#000000';
+    ctx.fillStyle = currentColor || '#000000';
+    ctx.lineWidth = currentWidth || 2;
+
+    switch (shape) {
+      case 'rect':
+        if (isPreview) {
+          ctx.strokeRect(startPos.x, startPos.y, width, height);
+        } else {
+          ctx.fillRect(startPos.x, startPos.y, width, height);
+        }
+        break;
+      case 'circle':
+        ctx.beginPath();
+        ctx.ellipse(
+          startPos.x + width / 2,
+          startPos.y + height / 2,
+          Math.abs(width / 2),
+          Math.abs(height / 2),
+          0,
+          0,
+          2 * Math.PI
+        );
+        if (isPreview) {
+          ctx.stroke();
+        } else {
+          ctx.fill();
+        }
+        break;
+      case 'line':
+        ctx.beginPath();
+        ctx.lineCap = 'round';
+        ctx.lineWidth = currentWidth * 2 || 4; // Make lines thicker
+        ctx.moveTo(startPos.x, startPos.y);
+        ctx.lineTo(endPos.x, endPos.y);
+        ctx.stroke();
+        break;
+      case 'star': {
+        const centerX = startPos.x + width / 2;
+        const centerY = startPos.y + height / 2;
+        drawStar(ctx, centerX, centerY, radius);
+        if (isPreview) {
+          ctx.stroke();
+        } else {
+          ctx.fill();
+        }
+        break;
+      }
+    }
+  };
+
+  // Add this new renderCanvas function after handleFileChange
+  const renderCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    
+    // Store current canvas state in a temporary canvas to preserve drawings
+    const tempCanvas = document.createElement('canvas');
+    tempCanvas.width = canvas.width;
+    tempCanvas.height = canvas.height;
+    const tempCtx = tempCanvas.getContext('2d');
+    tempCtx.drawImage(canvas, 0, 0);
+    
+    // Clear canvas
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Redraw original content
+    ctx.drawImage(tempCanvas, 0, 0);
+    
+    // Draw all uploaded images
+    for (const img of uploadedImages) {
+      const imageObj = new Image();
+      imageObj.src = img.src;
+      ctx.drawImage(imageObj, img.x, img.y, img.width, img.height);
+      
+      // Draw selection handles if dragging or resizing this image
+      if (draggingImage === img.id || resizingImage === img.id) {
+        // Draw border
+        ctx.strokeStyle = '#0080ff';
+        ctx.lineWidth = 2;
+        ctx.strokeRect(img.x, img.y, img.width, img.height);
+        
+        // Draw corner resize handles
+        ctx.fillStyle = '#0080ff';
+        const handleSize = 8;
+        
+        // Top-left
+        ctx.fillRect(img.x - handleSize/2, img.y - handleSize/2, handleSize, handleSize);
+        // Top-right
+        ctx.fillRect(img.x + img.width - handleSize/2, img.y - handleSize/2, handleSize, handleSize);
+        // Bottom-left
+        ctx.fillRect(img.x - handleSize/2, img.y + img.height - handleSize/2, handleSize, handleSize);
+        // Bottom-right
+        ctx.fillRect(img.x + img.width - handleSize/2, img.y + img.height - handleSize/2, handleSize, handleSize);
+      }
+    }
+  }, [canvasRef, uploadedImages, draggingImage, resizingImage]);
+  
+  // Handle mouse down for image interaction
+  const handleImageMouseDown = (e) => {
+    if (currentTool !== 'selection') return false;
+    
+    const { x, y } = getCoordinates(e, canvasRef.current);
+    const handleSize = 8;
+    
+    // Check if clicked on any image handle first (for resizing)
+    for (let i = uploadedImages.length - 1; i >= 0; i--) {
+      const img = uploadedImages[i];
+      
+      // Check if clicked on bottom-right resize handle
+      if (
+        x >= img.x + img.width - handleSize/2 - 5 &&
+        x <= img.x + img.width + handleSize/2 + 5 &&
+        y >= img.y + img.height - handleSize/2 - 5 &&
+        y <= img.y + img.height + handleSize/2 + 5
+      ) {
+        setResizingImage(img.id);
+        setDragOffset({ x: x - (img.x + img.width), y: y - (img.y + img.height) });
+        return true;
+      }
+    }
+    
+    // If not resizing, check if clicked on any image (for dragging)
+    for (let i = uploadedImages.length - 1; i >= 0; i--) {
+      const img = uploadedImages[i];
+      if (
+        x >= img.x && 
+        x <= img.x + img.width && 
+        y >= img.y && 
+        y <= img.y + img.height
+      ) {
+        setDraggingImage(img.id);
+        setDragOffset({ x: x - img.x, y: y - img.y });
+        return true;
+      }
+    }
+    
+    return false;
+  };
+  
+  // Handle mouse move for image interaction
+  const handleImageMouseMove = (e) => {
+    if (!draggingImage && !resizingImage) return false;
+    
+    const { x, y } = getCoordinates(e, canvasRef.current);
+    
+    if (draggingImage) {
+      // Update position of dragged image
+      setUploadedImages(prev => prev.map(img => {
+        if (img.id === draggingImage) {
+          return {
+            ...img,
+            x: x - dragOffset.x,
+            y: y - dragOffset.y
+          };
+        }
+        return img;
+      }));
+      
+      renderCanvas();
+      return true;
+    }
+    
+    if (resizingImage) {
+      // Update size of resized image
+      setUploadedImages(prev => prev.map(img => {
+        if (img.id === resizingImage) {
+          // Calculate new width and height
+          const newWidth = Math.max(20, x - img.x - dragOffset.x + 10);
+          const newHeight = Math.max(20, y - img.y - dragOffset.y + 10);
+          
+          // Option 1: Free resize
+          return {
+            ...img,
+            width: newWidth,
+            height: newHeight
+          };
+          
+          // Option 2: Maintain aspect ratio (uncomment if needed)
+          /*
+          const aspectRatio = img.originalWidth / img.originalHeight;
+          const newHeight = newWidth / aspectRatio;
+          return {
+            ...img,
+            width: newWidth,
+            height: newHeight
+          };
+          */
+        }
+        return img;
+      }));
+      
+      renderCanvas();
+      return true;
+    }
+    
+    return false;
+  };
+  
+  // Handle mouse up for image interaction
+  const handleImageMouseUp = () => {
+    if (draggingImage || resizingImage) {
+      setDraggingImage(null);
+      setResizingImage(null);
+      saveCanvasState();
+      return true;
+    }
+    return false;
+  };
+
+  // Function to delete the selected image
+  const deleteSelectedImage = useCallback(() => {
+    if (draggingImage) {
+      setUploadedImages(prev => prev.filter(img => img.id !== draggingImage));
+      setDraggingImage(null);
+      renderCanvas();
+      saveCanvasState();
+    }
+  }, [draggingImage, renderCanvas, saveCanvasState]);
+
+  // Modify existing startDrawing to check for image interaction first
+  const handleStartDrawing = (e) => {
+    console.log('Canvas onMouseDown', { currentTool, isDrawing });
+    
+    // Check if we're interacting with an image first
+    if (handleImageMouseDown(e)) {
+      return;
+    }
+    
+    if (currentTool === 'pen') {
+      if (!checkForPointOrHandle(e)) {
+        handlePenToolClick(e);
+      }
+      return;
+    }
+    
+    const { x, y } = getCoordinates(e, canvasRef.current);
+    
+    if (['rect', 'circle', 'line', 'star'].includes(currentTool)) {
+      setShapeStartPos({ x, y });
+      
+      // Create preview canvas if it doesn't exist
+      if (!previewCanvas) {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasRef.current.width;
+        canvas.height = canvasRef.current.height;
+        setPreviewCanvas(canvas);
+      }
+    }
+    
+    startDrawing(e);
+    setHasDrawing(true);
+  };
+
+  // Modify existing draw to handle image interaction
+  const handleDraw = (e) => {
+    // Handle image dragging/resizing first
+    if (handleImageMouseMove(e)) {
+      return;
+    }
+    
+    if (currentTool === 'pen' && handleBezierMouseMove(e)) {
+      return;
+    }
+
+    if (!isDrawing) return;
+    
+    const canvas = canvasRef.current;
+    const { x, y } = getCoordinates(e, canvas);
+    
+    draw(e);
+  };
+
+  // Modify existing stopDrawing to handle image interaction
+  const handleStopDrawing = (e) => {
+    // Handle image release first
+    if (handleImageMouseUp()) {
+      return;
+    }
+    
+    console.log('handleStopDrawing called', { 
+      eventType: e?.type, 
+      currentTool, 
+      isDrawing, 
+      activePoint, 
+      activeHandle
+    });
+    
+    // If we're using the pen tool with active point or handle
+    if (currentTool === 'pen') {
+      // If we were dragging a handle, just release it
+      if (activeHandle) {
+        setActiveHandle(null);
+        return;
+      }
+      
+      // If we were dragging an anchor point, just release it
+      if (activePoint !== -1) {
+        setActivePoint(-1);
+        return;
+      }
+    }
+
+    stopDrawing(e);
+
+    // If using the pencil tool and we've just finished a drag, trigger generation
+    if (currentTool === 'pencil' && isDrawing && !isGenerating) {
+      console.log(`${currentTool} tool condition met, will try to trigger generation`);
+      
+      // Set generating flag to prevent multiple calls
+      if (typeof setIsGenerating === 'function') {
+        setIsGenerating(true);
+      }
+      
+      // Generate immediately - no timeout needed
+      console.log('Calling handleGeneration function');
+      if (typeof handleGenerationRef.current === 'function') {
+        handleGenerationRef.current();
+      } else {
+        console.error('handleGeneration is not a function:', handleGenerationRef.current);
+      }
+    } else {
+      console.log('Generation not triggered because:', { 
+        isPencilTool: currentTool === 'pencil',
+        wasDrawing: isDrawing,
+        isGenerating
+      });
+    }
+  };
+
+  // Handle keyboard events for image deletion
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if ((e.key === 'Delete' || e.key === 'Backspace') && draggingImage) {
+        deleteSelectedImage();
+      }
+    };
+    
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [draggingImage, deleteSelectedImage]);
+
+  // Check if we clicked on an existing point or handle
+  const checkForPointOrHandle = (e) => {
+    if (currentTool !== 'pen' || !showBezierGuides || tempPoints.length === 0) {
+      return false;
+    }
+    
+    const canvas = canvasRef.current;
+    const { x, y } = getCoordinates(e, canvas);
+    setLastMousePos({ x, y });
+    
+    // Check if we clicked on a handle
+    for (let i = 0; i < tempPoints.length; i++) {
+      const point = tempPoints[i];
+      
+      // Check for handleIn
+      if (isNearHandle(point, 'handleIn', x, y)) {
+        setActivePoint(i);
+        setActiveHandle('handleIn');
+        return true;
+      }
+      
+      // Check for handleOut
+      if (isNearHandle(point, 'handleOut', x, y)) {
+        setActivePoint(i);
+        setActiveHandle('handleOut');
+        return true;
+      }
+      
+      // Check for the anchor point itself
+      const distance = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2);
+      if (distance <= 10) {
+        setActivePoint(i);
+        setActiveHandle(null);
+        return true;
+      }
+    }
+    
+    return false;
+  };
+  
+  // Handle mouse move for bezier control point or handle dragging
+  const handleBezierMouseMove = (e) => {
+    if (currentTool !== 'pen') {
+      return false;
+    }
+    
+    const canvas = canvasRef.current;
+    const { x, y } = getCoordinates(e, canvas);
+    const dx = x - lastMousePos.x;
+    const dy = y - lastMousePos.y;
+    
+    // If we're dragging a handle
+    if (activePoint !== -1 && activeHandle) {
+      const newPoints = [...tempPoints];
+      updateHandle(newPoints[activePoint], activeHandle, dx, dy, symmetric);
+      setTempPoints(newPoints);
+      setLastMousePos({ x, y });
+      return true;
+    }
+    
+    // If we're dragging an anchor point
+    if (activePoint !== -1) {
+      const newPoints = [...tempPoints];
+      newPoints[activePoint].x += dx;
+      newPoints[activePoint].y += dy;
+      
+      // If this point has handles, move them with the point
+      if (newPoints[activePoint].handleIn) {
+        // No need to change the handle's offset, just move with the point
+      }
+      
+      if (newPoints[activePoint].handleOut) {
+        // No need to change the handle's offset, just move with the point
+      }
+      
+      setTempPoints(newPoints);
+      setLastMousePos({ x, y });
+      return true;
+    }
+    
+    return false;
+  };
+
+  // Handle clicks for bezier curve tool
+  const handlePenToolClick = (e) => {
+    const canvas = canvasRef.current;
+    const { x, y } = getCoordinates(e, canvas);
+    
+    // Add a new point
+    if (tempPoints.length === 0) {
+      // First point has no handles initially
+      const newPoint = { x, y, handleIn: null, handleOut: null };
+      setTempPoints([newPoint]);
+    } else {
+      // Create a new point with handles relative to the last point
+      const newPoint = createAnchorPoint(x, y, tempPoints[tempPoints.length - 1]);
+      setTempPoints([...tempPoints, newPoint]);
+    }
+    
+    // Always show guides when adding points
+    setShowBezierGuides(true);
+  };
+  
+  // Toggle bezier guide visibility
+  const toggleBezierGuides = () => {
+    setShowBezierGuides(!showBezierGuides);
+    if (showBezierGuides) {
+      redrawBezierGuides();
+    }
+  };
+
+  // Draw the final bezier curve and clear control points
+  const finalizeBezierCurve = () => {
+    if (tempPoints.length < 2) {
+      // Need at least 2 points for a path
+      console.log('Need at least 2 control points to draw a path');
+      return;
+    }
+    
+    const canvas = canvasRef.current;
+    
+    // Draw the actual bezier curve
+    drawBezierCurve(canvas, tempPoints);
+    
+    // Hide guides and reset control points
+    setShowBezierGuides(false);
+    setTempPoints([]);
+    
+    // Trigger generation only if not already generating
+    if (!isGenerating) {
+      // Set generating flag to prevent multiple calls
+      if (typeof setIsGenerating === 'function') {
+        setIsGenerating(true);
+      }
+      
+      if (typeof handleGenerationRef.current === 'function') {
+        handleGenerationRef.current();
+      }
+    }
+  };
+
+  // Add control point to segment
+  const addControlPoint = (e) => {
+    if (currentTool !== 'pen' || tempPoints.length < 2) return;
+    
+    const canvas = canvasRef.current;
+    const { x, y } = getCoordinates(e, canvas);
+    
+    // Find the closest segment to add a point to
+    let closestDistance = Number.POSITIVE_INFINITY;
+    let insertIndex = -1;
+    
+    for (let i = 0; i < tempPoints.length - 1; i++) {
+      const p1 = tempPoints[i];
+      const p2 = tempPoints[i + 1];
+      
+      // Calculate distance from click to line between points
+      // This is a simplified distance calculation for demo purposes
+      const lineLength = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
+      if (lineLength === 0) continue;
+      
+      // Project point onto line
+      const t = ((x - p1.x) * (p2.x - p1.x) + (y - p1.y) * (p2.y - p1.y)) / (lineLength * lineLength);
+      
+      // If projection is outside the line segment, skip
+      if (t < 0 || t > 1) continue;
+      
+      // Calculate closest point on line
+      const closestX = p1.x + t * (p2.x - p1.x);
+      const closestY = p1.y + t * (p2.y - p1.y);
+      
+      // Calculate distance to closest point
+      const distance = Math.sqrt((x - closestX) ** 2 + (y - closestY) ** 2);
+      
+      if (distance < closestDistance && distance < 20) {
+        closestDistance = distance;
+        insertIndex = i + 1;
+      }
+    }
+    
+    if (insertIndex > 0) {
+      // Create a new array with the new point inserted
+      const newPoints = [...tempPoints];
+      const prevPoint = newPoints[insertIndex - 1];
+      const nextPoint = newPoints[insertIndex];
+      
+      // Create a new point at the click position with automatically calculated handles
+      const newPoint = { 
+        x, 
+        y,
+        // Calculate handles based on the positions of adjacent points
+        handleIn: { 
+          x: (prevPoint.x - x) * 0.25, 
+          y: (prevPoint.y - y) * 0.25 
+        },
+        handleOut: { 
+          x: (nextPoint.x - x) * 0.25, 
+          y: (nextPoint.y - y) * 0.25 
+        }
+      };
+      
+      // Insert the new point
+      newPoints.splice(insertIndex, 0, newPoint);
+      setTempPoints(newPoints);
+    }
+  };
+
+  // Add image compression utility
+  const compressImage = async (dataUrl) => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        let width = img.width;
+        let height = img.height;
+        
+        // Calculate new dimensions while maintaining aspect ratio
+        const MAX_DIMENSION = 1200;
+        if (width > height && width > MAX_DIMENSION) {
+          height *= MAX_DIMENSION / width;
+          width = MAX_DIMENSION;
+        } else if (height > MAX_DIMENSION) {
+          width *= MAX_DIMENSION / height;
+          height = MAX_DIMENSION;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+        
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, width, height);
+        ctx.drawImage(img, 0, 0, width, height);
+        
+        // Compress as JPEG with 0.8 quality
+        resolve(canvas.toDataURL('image/jpeg', 0.8));
+      };
+      img.onerror = reject;
+      img.src = dataUrl;
+    });
+  };
+
+  const handleGenerate = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    
+    // Use the ref to ensure we have the latest handler
+    if (typeof handleGenerationRef.current === 'function') {
+      handleGenerationRef.current();
+    }
+  };
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  // Add custom clearCanvas implementation
+  const handleClearCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    
+    // Clear the canvas with white background
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Reset states
+    setTempPoints([]);
+    setHasDrawing(false);
+    setUploadedImages([]);
+    
+    // Save the cleared state
+    saveCanvasState();
+    
+    // Notify about drawing change
+    if (typeof onDrawingChange === 'function') {
+      onDrawingChange(false);
+    }
+  }, [saveCanvasState, onDrawingChange]);
+
+  useImperativeHandle(ref, () => ({
+    canvas: canvasRef.current,
+    clear: () => clearCanvas(true),
+    setHasDrawing: setHasDrawing,
+  }), [clearCanvas, setHasDrawing]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Canvas container with fixed aspect ratio */}
+      <div 
+        ref={canvasContainerRef}
+        className={`relative w-full ${isDraggingFile ? 'bg-gray-100 border-2 border-dashed border-gray-400' : ''}`} 
+        style={{ aspectRatio: `${currentDimension.width} / ${currentDimension.height}` }}
+      >
+        <canvas
+          ref={canvasRef}
+          width={currentDimension.width}
+          height={currentDimension.height}
+          className="absolute inset-0 w-full h-full border border-gray-300 bg-white rounded-xl shadow-soft"
+          style={{
+            touchAction: 'none'
+          }}
+          onMouseDown={handleStartDrawing}
+          onMouseMove={handleDraw}
+          onMouseUp={handleStopDrawing}
+          onMouseLeave={handleStopDrawing}
+          onTouchStart={handleStartDrawing}
+          onTouchMove={handleDraw}
+          onTouchEnd={handleStopDrawing}
+          onClick={handleCanvasClick}
+          onKeyDown={handleKeyDown}
+          tabIndex="0"
+          aria-label="Drawing canvas"
+        />
+        
+        {/* Floating upload button */}
+        <button 
+          type="button"
+          onClick={handleUploadClick}
+          className={`absolute bottom-2.5 right-2.5 z-10 bg-white border border-gray-200 text-gray-600 rounded-lg p-4 sm:p-3 flex items-center justify-center shadow-soft hover:bg-gray-100 transition-colors ${isDrawing ? 'pointer-events-none' : ''}`}
+          aria-label="Upload image"
+          title="Upload image"
+        >
+          <ImagePlus className="w-6 h-6 sm:w-5 sm:h-5" />
+          <input 
+            type="file" 
+            ref={fileInputRef} 
+            onChange={handleFileChange} 
+            className="hidden" 
+            accept="image/*"
+          />
+        </button>
+        
+        {/* Doodle conversion loading overlay */}
+        {isDoodleConverting && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-400/80 rounded-xl z-50">
+            <div className="bg-white shadow-lg rounded-xl p-6 flex flex-col items-center">
+              <LoaderCircle className="w-12 h-12 text-gray-700 animate-spin mb-4" />
+              <p className="text-gray-900 font-medium text-lg">Converting to doodle...</p>
+              <p className="text-gray-500 text-sm mt-2">This may take a moment</p>
+            </div>
+          </div>
+        )}
+        
+        {/* Sending back to doodle loading overlay */}
+        {isSendingToDoodle && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-400/80 rounded-xl z-50">
+            <div className="bg-white shadow-lg rounded-xl p-6 flex flex-col items-center">
+              <LoaderCircle className="w-12 h-12 text-gray-700 animate-spin mb-4" />
+              <p className="text-gray-900 font-medium text-lg">Sending back to doodle...</p>
+              <p className="text-gray-500 text-sm mt-2">Converting and loading...</p>
+            </div>
+          </div>
+        )}
+        
+        {/* Draw here placeholder */}
+        {!hasDrawing && !isDoodleConverting && !isSendingToDoodle && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+            <PencilLine className="w-8 h-8 text-gray-400 mb-2" />
+            <p className="text-gray-400 text-lg font-medium">Draw here</p>
+          </div>
+        )}
+        
+        {/* Drag and drop indicator */}
+        {isDraggingFile && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-100/80 border-2 border-dashed border-gray-400 rounded-xl z-40 pointer-events-none">
+            <ImagePlus className="w-12 h-12 text-gray-500 mb-4" />
+            <p className="text-gray-600 text-lg font-medium">Drop image to convert to doodle</p>
+          </div>
+        )}
+      </div>
+
+      {/* Style selector - positioned below canvas */}
+      <div className="w-full">
+        <StyleSelector 
+          styleMode={styleMode}
+          setStyleMode={setStyleMode}
+          handleGenerate={handleGeneration}
+        />
+      </div>
+    </div>
+  );
+});
+
+Canvas.displayName = 'Canvas';
+
+export default Canvas; 

components/CanvasContainer.js

@@ -0,0 +1,1651 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import Canvas from "./Canvas";
+import DisplayCanvas from "./DisplayCanvas";
+import ToolBar from "./ToolBar";
+import StyleSelector from "./StyleSelector";
+import { getPromptForStyle, styleOptions, addMaterialToLibrary } from "./StyleSelector";
+import ActionBar from "./ActionBar";
+import ErrorModal from "./ErrorModal";
+import TextInput from "./TextInput";
+import Header from "./Header";
+import DimensionSelector from "./DimensionSelector";
+import HistoryModal from "./HistoryModal";
+import BottomToolBar from "./BottomToolBar";
+import LibraryPage from "./LibraryPage";
+import {
+  getCoordinates,
+  initializeCanvas,
+  drawImageToCanvas,
+  drawBezierCurve,
+} from "./utils/canvasUtils";
+import { toast } from "react-hot-toast";
+import { Download, History as HistoryIcon, RefreshCw as RefreshIcon, Library as LibraryIcon, LoaderCircle } from "lucide-react";
+import OutputOptionsBar from "./OutputOptionsBar";
+import ApiKeyModal from "./ApiKeyModal";
+import HeaderButtons from "./HeaderButtons";
+
+const CanvasContainer = () => {
+  // Check if the device is mobile based on screen width
+  const isMobileDevice = () => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < 768; // Common breakpoint for mobile devices
+    }
+    return false; // Default to desktop on server-side
+  };
+
+  // Get default dimensions based on device type
+  const getDefaultDimension = () => {
+    if (isMobileDevice()) {
+      // Square (1:1) for mobile
+      return {
+        id: "square",
+        label: "1:1",
+        width: 1000,
+        height: 1000,
+      };
+    } else {
+      // Landscape (3:2) for desktop
+      return {
+        id: "landscape",
+        label: "3:2",
+        width: 1500,
+        height: 1000,
+      };
+    }
+  };
+
+  const canvasRef = useRef(null);
+  const canvasComponentRef = useRef(null);
+  const displayCanvasRef = useRef(null);
+  const backgroundImageRef = useRef(null);
+  const [currentDimension, setCurrentDimension] = useState(getDefaultDimension());
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [penColor, setPenColor] = useState("#000000");
+  const [penWidth, setPenWidth] = useState(2);
+  const colorInputRef = useRef(null);
+  const [prompt, setPrompt] = useState("");
+  const [generatedImage, setGeneratedImage] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showErrorModal, setShowErrorModal] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [customApiKey, setCustomApiKey] = useState("");
+  const [styleMode, setStyleMode] = useState("material");
+  const [strokeCount, setStrokeCount] = useState(0);
+  const strokeTimeoutRef = useRef(null);
+  const [lastRequestTime, setLastRequestTime] = useState(0);
+  const MIN_REQUEST_INTERVAL = 2000; // Minimum 2 seconds between requests
+  const [currentTool, setCurrentTool] = useState("pencil"); // 'pencil', 'pen', 'eraser', 'text', 'rect', 'circle', 'line', 'star'
+  const [isTyping, setIsTyping] = useState(false);
+  const [undoStack, setUndoStack] = useState([]);
+  const [bezierPoints, setBezierPoints] = useState([]);
+  const [textInput, setTextInput] = useState("");
+  const [textPosition, setTextPosition] = useState({ x: 0, y: 0 });
+  const textInputRef = useRef(null);
+  const [isPenDrawing, setIsPenDrawing] = useState(false);
+  const [currentBezierPath, setCurrentBezierPath] = useState([]);
+  const [tempPoints, setTempPoints] = useState([]);
+  const [hasGeneratedContent, setHasGeneratedContent] = useState(false);
+  const [imageHistory, setImageHistory] = useState([]);
+  const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false);
+  const [hasDrawing, setHasDrawing] = useState(false);
+  // Add a ref to track style changes that need regeneration
+  const needsRegenerationRef = useRef(false);
+  // Add a ref to track if regeneration was manually triggered
+  const isManualRegenerationRef = useRef(false);
+  const [isSendingToDoodle, setIsSendingToDoodle] = useState(false);
+  // Add state for API key modal
+  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
+  const [showLibrary, setShowLibrary] = useState(false);
+  // Add state for template loading 
+  const [isTemplateLoading, setIsTemplateLoading] = useState(false);
+  const [templateLoadingMessage, setTemplateLoadingMessage] = useState("");
+
+  // Load saved API key from localStorage on component mount
+  useEffect(() => {
+    const savedApiKey = localStorage.getItem("geminiApiKey");
+    if (savedApiKey) {
+      setCustomApiKey(savedApiKey);
+      // Validate the API key silently
+      validateApiKey(savedApiKey);
+    }
+  }, []);
+
+  // Add a function to validate the API key
+  const validateApiKey = async (apiKey) => {
+    if (!apiKey) return;
+    
+    try {
+      const response = await fetch("/api/validate-key", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ apiKey }),
+      });
+      
+      const data = await response.json();
+      
+      if (!data.valid) {
+        console.warn("Invalid API key detected, will be cleared");
+        // Clear the invalid key
+        localStorage.removeItem("geminiApiKey");
+        setCustomApiKey("");
+        // Don't show error to user for now - they'll see it when trying to use the app
+      }
+    } catch (error) {
+      console.error("Error validating API key:", error);
+      // Don't clear the key on connection errors
+    }
+  };
+
+  // Load background image when generatedImage changes
+  useEffect(() => {
+    if (generatedImage && canvasRef.current) {
+      // Use the window.Image constructor to avoid conflict with Next.js Image component
+      const img = new window.Image();
+      img.onload = () => {
+        backgroundImageRef.current = img;
+        drawImageToCanvas(canvasRef.current, backgroundImageRef.current);
+      };
+      img.src = generatedImage;
+    }
+  }, [generatedImage]);
+
+  // Initialize canvas with white background when component mounts
+  useEffect(() => {
+    if (canvasRef.current) {
+      initializeCanvas(canvasRef.current);
+    }
+
+    // Also initialize the display canvas
+    if (displayCanvasRef.current) {
+      const displayCtx = displayCanvasRef.current.getContext("2d");
+      displayCtx.fillStyle = "#FFFFFF";
+      displayCtx.fillRect(
+        0,
+        0,
+        displayCanvasRef.current.width,
+        displayCanvasRef.current.height
+      );
+    }
+  }, []);
+
+  // Add resize listener to update dimensions when switching between mobile and desktop
+  useEffect(() => {
+    let isMobile = isMobileDevice();
+    
+    const handleResize = () => {
+      const newIsMobile = isMobileDevice();
+      // Only update dimensions if the device type changed (mobile <-> desktop)
+      if (newIsMobile !== isMobile) {
+        isMobile = newIsMobile;
+        
+        // Only update dimensions if the canvas is empty (no drawing)
+        if (canvasRef.current && !hasDrawing && !hasGeneratedContent) {
+          setCurrentDimension(getDefaultDimension());
+        }
+      }
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [hasDrawing, hasGeneratedContent]);
+
+  // Add an effect to sync canvas dimensions when they change
+  useEffect(() => {
+    if (canvasRef.current && displayCanvasRef.current) {
+      // Ensure both canvases have the same dimensions
+      canvasRef.current.width = currentDimension.width;
+      canvasRef.current.height = currentDimension.height;
+      displayCanvasRef.current.width = currentDimension.width;
+      displayCanvasRef.current.height = currentDimension.height;
+
+      // Initialize both canvases with white backgrounds
+      initializeCanvas(canvasRef.current);
+
+      const displayCtx = displayCanvasRef.current.getContext("2d");
+      displayCtx.fillStyle = "#FFFFFF";
+      displayCtx.fillRect(
+        0,
+        0,
+        displayCanvasRef.current.width,
+        displayCanvasRef.current.height
+      );
+    }
+  }, [currentDimension]);
+
+  const startDrawing = (e) => {
+    const { x, y } = getCoordinates(e, canvasRef.current);
+
+    if (e.type === "touchstart") {
+      e.preventDefault();
+    }
+
+    console.log("startDrawing called", { currentTool, x, y });
+
+    const ctx = canvasRef.current.getContext("2d");
+
+    // Set up the line style at the start of drawing
+    ctx.lineWidth = currentTool === "eraser" ? 20 : penWidth;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = currentTool === "eraser" ? "#FFFFFF" : penColor;
+
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    setIsDrawing(true);
+    setStrokeCount((prev) => prev + 1);
+
+    // Save canvas state before drawing
+    saveCanvasState();
+  };
+
+  const draw = (e) => {
+    if (!isDrawing) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const { x, y } = getCoordinates(e, canvas);
+
+    // Occasionally log drawing activity
+    if (Math.random() < 0.05) {
+      // Only log ~5% of move events to avoid console spam
+      console.log("draw called", { currentTool, isDrawing, x, y });
+    }
+
+    // Set up the line style before drawing
+    ctx.lineWidth = currentTool === "eraser" ? 60 : penWidth * 4; // Pen width now 4x original size
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+
+    if (currentTool === "eraser") {
+      ctx.strokeStyle = "#FFFFFF";
+    } else {
+      ctx.strokeStyle = penColor;
+    }
+
+    if (currentTool === "pen") {
+      // Show preview line while moving
+      if (tempPoints.length > 0) {
+        const lastPoint = tempPoints[tempPoints.length - 1];
+        ctx.beginPath();
+        ctx.moveTo(lastPoint.x, lastPoint.y);
+        ctx.lineTo(x, y);
+        ctx.stroke();
+      }
+    } else {
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    }
+  };
+
+  const stopDrawing = async (e) => {
+    console.log("stopDrawing called in CanvasContainer", {
+      isDrawing,
+      currentTool,
+      hasEvent: !!e,
+      eventType: e ? e.type : "none",
+    });
+
+    if (!isDrawing) return;
+    setIsDrawing(false);
+
+    // Remove the timeout-based generation
+    if (strokeTimeoutRef.current) {
+      clearTimeout(strokeTimeoutRef.current);
+      strokeTimeoutRef.current = null;
+    }
+
+    // The Canvas component will handle generation for pen and pencil tools directly
+    // This function now primarily handles stroke counting for other tools
+
+    // Only generate on mouse/touch up events when not using the pen or pencil tool
+    // (since those are handled by the Canvas component)
+    if (
+      e &&
+      (e.type === "mouseup" || e.type === "touchend") &&
+      currentTool !== "pen" &&
+      currentTool !== "pencil"
+    ) {
+      console.log("stopDrawing: detected mouseup/touchend event", {
+        strokeCount,
+      });
+      // Check if we have enough strokes to generate (increased to 10 from 3)
+      if (strokeCount >= 10) {
+        console.log(
+          "stopDrawing: calling handleGeneration due to stroke count"
+        );
+        await handleGeneration();
+        setStrokeCount(0);
+      }
+    }
+  };
+
+  const clearCanvas = () => {
+    // If we have a ref to our Canvas component, use its custom clear method
+    if (canvasComponentRef.current?.handleClearCanvas) {
+      canvasComponentRef.current.handleClearCanvas();
+      return;
+    }
+
+    // Fallback to original implementation
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    initializeCanvas(canvas);
+
+    setGeneratedImage(null);
+    backgroundImageRef.current = null;
+
+    // Also clear the display canvas and reset generated content flag
+    if (displayCanvasRef.current) {
+      const displayCtx = displayCanvasRef.current.getContext("2d");
+      displayCtx.clearRect(
+        0,
+        0,
+        displayCanvasRef.current.width,
+        displayCanvasRef.current.height
+      );
+      displayCtx.fillStyle = "#FFFFFF";
+      displayCtx.fillRect(
+        0,
+        0,
+        displayCanvasRef.current.width,
+        displayCanvasRef.current.height
+      );
+      setHasGeneratedContent(false);
+    }
+
+    // Save empty canvas state
+    saveCanvasState();
+  };
+
+  const handleGeneration = useCallback(
+    async (isManualRegeneration = false) => {
+      console.log("handleGeneration called", { isManualRegeneration });
+
+      // Set our ref if this is a manual regeneration
+      if (isManualRegeneration) {
+        isManualRegenerationRef.current = true;
+      }
+
+      // Remove the time throttling for automatic generation after doodle conversion
+      // but keep it for manual generations
+      const isAutoGeneration = !lastRequestTime && !isManualRegeneration;
+      if (!isAutoGeneration) {
+        const now = Date.now();
+        if (now - lastRequestTime < MIN_REQUEST_INTERVAL) {
+          console.log("Request throttled - too soon after last request");
+          return;
+        }
+        setLastRequestTime(now);
+      }
+
+      if (!canvasRef.current) return;
+
+      console.log("Starting generation process");
+
+      // Check if we're already in a loading state before setting it
+      if (!isLoading) {
+        setIsLoading(true);
+      }
+
+      try {
+        const canvas = canvasRef.current;
+        const tempCanvas = document.createElement("canvas");
+        tempCanvas.width = canvas.width;
+        tempCanvas.height = canvas.height;
+        const tempCtx = tempCanvas.getContext("2d");
+
+        tempCtx.fillStyle = "#FFFFFF";
+        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+        tempCtx.drawImage(canvas, 0, 0);
+
+        const drawingData = tempCanvas.toDataURL("image/png").split(",")[1];
+
+        const materialPrompt = getPromptForStyle(styleMode);
+
+        const requestPayload = {
+          prompt: materialPrompt,
+          drawingData,
+          customApiKey,
+        };
+
+        console.log("Making API request with style:", styleMode);
+        console.log(`Using prompt: ${materialPrompt.substring(0, 100)}...`);
+
+        const response = await fetch("/api/generate", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(requestPayload),
+        });
+
+        console.log("API response received, status:", response.status);
+
+        const data = await response.json();
+
+        if (data.success && data.imageData) {
+          console.log("Image generated successfully");
+          const imageUrl = `data:image/png;base64,${data.imageData}`;
+
+          // Draw the generated image to the display canvas
+          const displayCanvas = displayCanvasRef.current;
+          if (!displayCanvas) {
+            console.error("Display canvas ref is null");
+            return;
+          }
+
+          const displayCtx = displayCanvas.getContext("2d");
+
+          // Clear the display canvas first
+          displayCtx.clearRect(0, 0, displayCanvas.width, displayCanvas.height);
+          displayCtx.fillStyle = "#FFFFFF";
+          displayCtx.fillRect(0, 0, displayCanvas.width, displayCanvas.height);
+
+          // Create and load the new image
+          const img = new Image();
+
+          // Set up the onload handler before setting the src
+          img.onload = () => {
+            console.log("Generated image loaded, drawing to display canvas");
+
+            // Clear the canvas first
+            displayCtx.clearRect(
+              0,
+              0,
+              displayCanvas.width,
+              displayCanvas.height
+            );
+
+            // Fill with black background for letterboxing
+            displayCtx.fillStyle = "#000000";
+            displayCtx.fillRect(
+              0,
+              0,
+              displayCanvas.width,
+              displayCanvas.height
+            );
+
+            // Calculate aspect ratios
+            const imgRatio = img.width / img.height;
+            const canvasRatio = displayCanvas.width / displayCanvas.height;
+
+            let drawWidth, drawHeight, x, y;
+
+            if (imgRatio > canvasRatio) {
+              // Image is wider than canvas (relative to height)
+              drawWidth = displayCanvas.width;
+              drawHeight = displayCanvas.width / imgRatio;
+              x = 0;
+              y = (displayCanvas.height - drawHeight) / 2;
+            } else {
+              // Image is taller than canvas (relative to width)
+              drawHeight = displayCanvas.height;
+              drawWidth = displayCanvas.height * imgRatio;
+              x = (displayCanvas.width - drawWidth) / 2;
+              y = 0;
+            }
+
+            // Draw the image with letterboxing
+            displayCtx.drawImage(img, x, y, drawWidth, drawHeight);
+
+            // Update our state to indicate we have generated content
+            setHasGeneratedContent(true);
+
+            // Add to history
+            setImageHistory((prev) => [
+              ...prev,
+              {
+                imageUrl,
+                timestamp: Date.now(),
+                drawingData: canvas.toDataURL(),
+                styleMode,
+                dimensions: currentDimension,
+              },
+            ]);
+          };
+
+          // Set the src to trigger loading
+          img.src = imageUrl;
+        } else {
+          console.error("Failed to generate image:", data.error);
+
+          // When generation fails, ensure display canvas is cleared
+          if (displayCanvasRef.current) {
+            const displayCtx = displayCanvasRef.current.getContext("2d");
+            displayCtx.clearRect(
+              0,
+              0,
+              displayCanvasRef.current.width,
+              displayCanvasRef.current.height
+            );
+            displayCtx.fillStyle = "#FFFFFF";
+            displayCtx.fillRect(
+              0,
+              0,
+              displayCanvasRef.current.width,
+              displayCanvasRef.current.height
+            );
+          }
+
+          // Make sure we mark that we don't have generated content
+          setHasGeneratedContent(false);
+
+          // Check for quota or API key errors
+          if (
+            data.error &&
+            (data.error.includes("Resource has been exhausted") ||
+              data.error.includes("quota") ||
+              data.error.includes("exceeded") ||
+              response.status === 429)
+          ) {
+            // Show API key modal instead of error modal for quota issues
+            setShowApiKeyModal(true);
+          } else if (response.status === 500) {
+            // Show regular error modal for other server errors
+            setErrorMessage(data.error);
+            setShowErrorModal(true);
+          }
+        }
+      } catch (error) {
+        console.error("Error generating image:", error);
+        
+        // Check for quota-related errors in the catch block too
+        if (
+          error.message &&
+          (error.message.includes("Resource has been exhausted") ||
+           error.message.includes("quota") ||
+           error.message.includes("exceeded") ||
+           error.message.includes("429"))
+        ) {
+          // Show API key modal for quota issues
+          setShowApiKeyModal(true);
+        } else {
+          // Show regular error modal for other errors
+          setErrorMessage(error.message || "An unexpected error occurred.");
+          setShowErrorModal(true);
+        }
+
+        // When generation errors, ensure display canvas is cleared
+        if (displayCanvasRef.current) {
+          const displayCtx = displayCanvasRef.current.getContext("2d");
+          displayCtx.clearRect(
+            0,
+            0,
+            displayCanvasRef.current.width,
+            displayCanvasRef.current.height
+          );
+          displayCtx.fillStyle = "#FFFFFF";
+          displayCtx.fillRect(
+            0,
+            0,
+            displayCanvasRef.current.width,
+            displayCanvasRef.current.height
+          );
+        }
+
+        // Make sure we mark that we don't have generated content
+        setHasGeneratedContent(false);
+      } finally {
+        setIsLoading(false);
+        console.log("Generation process completed");
+      }
+    },
+    [canvasRef, isLoading, styleMode, customApiKey, lastRequestTime]
+  );
+
+  // Close the error modal
+  const closeErrorModal = () => {
+    setShowErrorModal(false);
+  };
+
+  // Handle the custom API key submission
+  const handleApiKeySubmit = (apiKey) => {
+    setCustomApiKey(apiKey);
+    // Save to localStorage for persistence
+    localStorage.setItem("geminiApiKey", apiKey);
+    // Close the API key modal
+    setShowApiKeyModal(false);
+    // Also close error modal if it was open
+    setShowErrorModal(false);
+    // Show confirmation toast
+    toast.success("API key saved successfully");
+  };
+
+  // Add this function to handle undo
+  const handleUndo = () => {
+    if (undoStack.length > 0) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      const previousState = undoStack[undoStack.length - 2]; // Get second to last state
+
+      if (previousState) {
+        const img = new Image();
+        img.onload = () => {
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(img, 0, 0);
+        };
+        img.src = previousState;
+      } else {
+        // If no previous state, clear to white
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+
+      setUndoStack((prev) => prev.slice(0, -1));
+    }
+  };
+
+  // Add this function to save canvas state
+  const saveCanvasState = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const dataURL = canvas.toDataURL();
+    setUndoStack((prev) => [...prev, dataURL]);
+  };
+
+  // Add this function to handle text input
+  const handleTextInput = (e) => {
+    if (e.key === "Enter") {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      ctx.font = "24px Arial";
+      ctx.fillStyle = "#000000";
+      ctx.fillText(textInput, textPosition.x, textPosition.y);
+      setTextInput("");
+      setIsTyping(false);
+      saveCanvasState();
+    }
+  };
+
+  // Modify the canvas click handler to handle text placement
+  const handleCanvasClick = (e) => {
+    if (currentTool === "text") {
+      const { x, y } = getCoordinates(e, canvasRef.current);
+      setTextPosition({ x, y });
+      setIsTyping(true);
+      if (textInputRef.current) {
+        textInputRef.current.focus();
+      }
+    }
+  };
+
+  // Handle pen click for bezier curve tool
+  const handlePenClick = (e) => {
+    if (currentTool !== "pen") return;
+
+    // Note: Actual point creation is now handled in the Canvas component
+    // This function is primarily used as a callback to inform the CanvasContainer
+    // that a pen action happened
+
+    console.log("handlePenClick called in CanvasContainer");
+
+    // Set isDrawing flag to true when using pen tool
+    // This ensures handleStopDrawing knows we're in drawing mode with the pen
+    setIsDrawing(true);
+
+    // Save canvas state when adding new points
+    saveCanvasState();
+  };
+
+  // Add this new function near your other utility functions
+  const handleSaveImage = useCallback(() => {
+    if (displayCanvasRef.current && hasGeneratedContent) {
+      const canvas = displayCanvasRef.current;
+      const link = document.createElement('a');
+      
+      // Create timestamp in format: YYYYMMDD_HHMM
+      const now = new Date();
+      const timestamp = now.toISOString()
+        .replace(/[-:T]/g, '')  // Remove all separators
+        .slice(0, 12);         // Keep only YYYYMMDDHHMM
+      
+      // Get the actual material name from styleOptions
+      const materialName = styleOptions[styleMode]?.name || styleMode;
+      
+      // Create filename: timestamp_materialname.png
+      const filename = `${timestamp}_${materialName}.png`;
+      
+      link.download = filename;
+      link.href = canvas.toDataURL('image/png');
+      link.click();
+      toast.success(`Saved as "${filename}"`);
+    } else {
+      toast.error("No generated image to save.");
+    }
+  }, [displayCanvasRef, hasGeneratedContent, styleMode]);
+
+  // Add this function to handle regeneration
+  const handleRegenerate = async () => {
+    if (canvasRef.current) {
+      // Set flag to prevent useEffect hooks from triggering additional generations
+      isManualRegenerationRef.current = true;
+      await handleGeneration(true);
+    }
+  };
+
+  // Add useEffect to watch for styleMode changes and regenerate
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    // Skip if this was triggered by a manual regeneration
+    if (isManualRegenerationRef.current) {
+      console.log("Skipping automatic generation due to manual regeneration");
+      return;
+    }
+
+    // Only trigger if we have something drawn (check if canvas is not empty)
+    // Note: handleGeneration is intentionally omitted from dependencies to prevent infinite loops
+    const checkCanvasAndGenerate = async () => {
+      if (!canvasRef.current) return;
+
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+      // Check if canvas has any non-white pixels
+      const hasDrawing = Array.from(imageData.data).some((pixel, index) => {
+        // Check only RGB values (skip alpha)
+        return index % 4 !== 3 && pixel !== 255;
+      });
+
+      // Only generate if there's a drawing AND we don't already have generated content
+      if (hasDrawing && !hasGeneratedContent) {
+        await handleGeneration();
+      } else if (hasDrawing) {
+        // Mark that regeneration is needed when style changes but we already have content
+        needsRegenerationRef.current = true;
+      }
+    };
+
+    // Skip on first render
+    if (styleMode) {
+      checkCanvasAndGenerate();
+    }
+  }, [styleMode, hasGeneratedContent]); // Removed handleGeneration from dependencies to prevent loop
+
+  // Add new useEffect to handle regeneration when hasGeneratedContent changes to false
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    // Skip if this was triggered by a manual regeneration
+    if (isManualRegenerationRef.current) {
+      console.log("Skipping automatic generation due to manual regeneration");
+      // Reset the flag after the first render with it set
+      isManualRegenerationRef.current = false;
+      return;
+    }
+
+    // Note: handleGeneration is intentionally omitted from dependencies to prevent infinite loops
+    // If we need regeneration and the generated content was cleared
+    if (needsRegenerationRef.current && !hasGeneratedContent) {
+      const checkDrawingAndRegenerate = async () => {
+        if (!canvasRef.current) return;
+
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+        // Check if canvas has any non-white pixels
+        const hasDrawing = Array.from(imageData.data).some((pixel, index) => {
+          // Check only RGB values (skip alpha)
+          return index % 4 !== 3 && pixel !== 255;
+        });
+
+        if (hasDrawing) {
+          needsRegenerationRef.current = false;
+          await handleGeneration();
+        }
+      };
+
+      checkDrawingAndRegenerate();
+    }
+  }, [hasGeneratedContent]);
+
+  // Cleanup function - keep this to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      if (strokeTimeoutRef.current) {
+        clearTimeout(strokeTimeoutRef.current);
+        strokeTimeoutRef.current = null;
+      }
+    };
+  }, []);
+
+  // Handle dimension change
+  const handleDimensionChange = (newDimension) => {
+    console.log("Changing dimensions to:", newDimension);
+
+    // Clear both canvases
+    if (canvasRef.current) {
+      const canvas = canvasRef.current;
+      canvas.width = newDimension.width;
+      canvas.height = newDimension.height;
+      initializeCanvas(canvas);
+    }
+
+    if (displayCanvasRef.current) {
+      const displayCanvas = displayCanvasRef.current;
+      displayCanvas.width = newDimension.width;
+      displayCanvas.height = newDimension.height;
+      const ctx = displayCanvas.getContext("2d");
+      ctx.fillStyle = "#FFFFFF";
+      ctx.fillRect(0, 0, displayCanvas.width, displayCanvas.height);
+    }
+
+    // Reset generation state
+    setHasGeneratedContent(false);
+    setGeneratedImage(null);
+    backgroundImageRef.current = null;
+
+    // Update dimension state AFTER canvas dimensions are updated
+    setCurrentDimension(newDimension);
+  };
+
+  // Add new function to handle selecting a historical image
+  const handleSelectHistoricalImage = (historyItem) => {
+    // First set the dimensions and wait for canvases to update
+    if (historyItem.dimensions) {
+      // Update canvas dimensions first
+      if (canvasRef.current) {
+        canvasRef.current.width = historyItem.dimensions.width;
+        canvasRef.current.height = historyItem.dimensions.height;
+      }
+      if (displayCanvasRef.current) {
+        displayCanvasRef.current.width = historyItem.dimensions.width;
+        displayCanvasRef.current.height = historyItem.dimensions.height;
+      }
+      // Then update the dimension state
+      setCurrentDimension(historyItem.dimensions);
+    }
+
+    // Use Promise to ensure images are loaded after dimensions are set
+    Promise.resolve().then(() => {
+      // Draw the original drawing to the canvas
+      const drawingImg = new Image();
+      drawingImg.onload = () => {
+        const canvas = canvasRef.current;
+        if (canvas) {
+          const ctx = canvas.getContext("2d");
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+          ctx.drawImage(drawingImg, 0, 0, canvas.width, canvas.height);
+        }
+      };
+      drawingImg.src = historyItem.drawingData;
+
+      // Draw the generated image to the display canvas
+      const generatedImg = new Image();
+      generatedImg.onload = () => {
+        const displayCanvas = displayCanvasRef.current;
+        if (displayCanvas) {
+          const ctx = displayCanvas.getContext("2d");
+          ctx.fillStyle = "#000000"; // Black background for letterboxing
+          ctx.fillRect(0, 0, displayCanvas.width, displayCanvas.height);
+          
+          // Calculate aspect ratios
+          const imgRatio = generatedImg.width / generatedImg.height;
+          const canvasRatio = displayCanvas.width / displayCanvas.height;
+          
+          let drawWidth, drawHeight, x, y;
+          
+          if (imgRatio > canvasRatio) {
+            // Image is wider than canvas
+            drawWidth = displayCanvas.width;
+            drawHeight = displayCanvas.width / imgRatio;
+            x = 0;
+            y = (displayCanvas.height - drawHeight) / 2;
+          } else {
+            // Image is taller than canvas
+            drawHeight = displayCanvas.height;
+            drawWidth = displayCanvas.height * imgRatio;
+            x = (displayCanvas.width - drawWidth) / 2;
+            y = 0;
+          }
+          
+          // Draw the image with letterboxing
+          ctx.drawImage(generatedImg, x, y, drawWidth, drawHeight);
+          setHasGeneratedContent(true);
+        }
+      };
+      generatedImg.src = historyItem.imageUrl;
+    });
+
+    // Close the history modal
+    setIsHistoryModalOpen(false);
+  };
+
+  // Add new function to handle image refinement
+  const handleImageRefinement = async (refinementPrompt) => {
+    if (!displayCanvasRef.current || !hasGeneratedContent) return;
+
+    console.log("Starting image refinement with prompt:", refinementPrompt);
+    setIsLoading(true);
+
+    try {
+      // Get the current image data
+      const displayCanvas = displayCanvasRef.current;
+      const imageData = displayCanvas.toDataURL("image/png").split(",")[1];
+
+      const requestPayload = {
+        prompt: refinementPrompt,
+        imageData,
+        customApiKey,
+      };
+
+      console.log("Making refinement API request");
+
+      const response = await fetch("/api/refine", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(requestPayload),
+      });
+
+      console.log("Refinement API response received, status:", response.status);
+
+      const data = await response.json();
+
+      if (data.success && data.imageData) {
+        console.log("Image refined successfully");
+        const imageUrl = `data:image/png;base64,${data.imageData}`;
+
+        // Draw the refined image to the display canvas
+        const displayCtx = displayCanvas.getContext("2d");
+        const img = new Image();
+
+        img.onload = () => {
+          console.log("Refined image loaded, drawing to display canvas");
+
+          // Clear the canvas
+          displayCtx.clearRect(0, 0, displayCanvas.width, displayCanvas.height);
+
+          // Fill with black background for letterboxing
+          displayCtx.fillStyle = "#000000";
+          displayCtx.fillRect(0, 0, displayCanvas.width, displayCanvas.height);
+
+          // Calculate aspect ratios
+          const imgRatio = img.width / img.height;
+          const canvasRatio = displayCanvas.width / displayCanvas.height;
+
+          let drawWidth, drawHeight, x, y;
+
+          if (imgRatio > canvasRatio) {
+            // Image is wider than canvas (relative to height)
+            drawWidth = displayCanvas.width;
+            drawHeight = displayCanvas.width / imgRatio;
+            x = 0;
+            y = (displayCanvas.height - drawHeight) / 2;
+          } else {
+            // Image is taller than canvas (relative to width)
+            drawHeight = displayCanvas.height;
+            drawWidth = displayCanvas.height * imgRatio;
+            x = (displayCanvas.width - drawWidth) / 2;
+            y = 0;
+          }
+
+          // Draw the image with letterboxing
+          displayCtx.drawImage(img, x, y, drawWidth, drawHeight);
+
+          // Add to history
+          setImageHistory((prev) => [
+            ...prev,
+            {
+              imageUrl,
+              timestamp: Date.now(),
+              drawingData: canvasRef.current.toDataURL(),
+              styleMode,
+              dimensions: currentDimension,
+            },
+          ]);
+        };
+
+        img.src = imageUrl;
+      } else {
+        console.error("Failed to refine image:", data.error);
+        
+        // Check for quota or API key errors
+        if (
+          data.error && 
+          (data.error.includes("Resource has been exhausted") ||
+           data.error.includes("quota") ||
+           data.error.includes("exceeded") ||
+           response.status === 429)
+        ) {
+          // Show API key modal instead of error modal for quota issues
+          setShowApiKeyModal(true);
+        } else {
+          // Show regular error modal for other errors
+          setErrorMessage(data.error || "Failed to refine image. Please try again.");
+          setShowErrorModal(true);
+        }
+      }
+    } catch (error) {
+      console.error("Error during refinement:", error);
+      
+      // Check for quota-related errors in the catch block
+      if (
+        error.message &&
+        (error.message.includes("Resource has been exhausted") ||
+         error.message.includes("quota") ||
+         error.message.includes("exceeded") ||
+         error.message.includes("429"))
+      ) {
+        // Show API key modal for quota issues
+        setShowApiKeyModal(true);
+      } else {
+        // Show regular error modal for other errors
+        setErrorMessage("An error occurred during refinement. Please try again.");
+        setShowErrorModal(true);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Add onImageUpload function
+  const handleImageUpload = (imageDataUrl) => {
+    if (!canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    const img = new Image();
+
+    img.onload = () => {
+      // Clear the canvas
+      ctx.fillStyle = "#FFFFFF";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Calculate dimensions to maintain aspect ratio and fit within canvas
+      const scale = Math.min(
+        canvas.width / img.width,
+        canvas.height / img.height
+      );
+      const x = (canvas.width - img.width * scale) / 2;
+      const y = (canvas.height - img.height * scale) / 2;
+
+      // Draw the image centered and scaled
+      ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
+
+      // Save canvas state after uploading image
+      saveCanvasState();
+      setHasGeneratedContent(true);
+    };
+
+    img.src = imageDataUrl;
+  };
+
+  // Add stroke width handler
+  const handleStrokeWidth = (width) => {
+    setPenWidth(width);
+  };
+
+  // Function to handle sending the generated image back to the doodle canvas
+  const handleSendToDoodle = useCallback(
+    async (imageDataUrl) => {
+      if (!imageDataUrl || isSendingToDoodle) return;
+
+      console.log("Sending image back to doodle canvas...");
+      setIsSendingToDoodle(true);
+
+      let response; // Define response outside try
+      try {
+        const base64Data = imageDataUrl.split(",")[1];
+
+        response = await fetch("/api/convert-to-doodle", {
+          // Assign to outer scope variable
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ 
+            imageData: base64Data,
+            customApiKey // Pass the custom API key
+          }),
+        });
+
+        // Check for non-OK HTTP status first
+        if (!response.ok) {
+          let errorBody = await response.text(); // Get raw text first
+          let errorMessage = `API Error: ${response.status}`;
+          try {
+            // Try parsing error response as JSON
+            const errorData = JSON.parse(errorBody);
+            errorMessage = errorData.error || errorMessage;
+          } catch (parseError) {
+            // If response wasn't JSON (like the "Body exceeded" error)
+            console.error("API response was not valid JSON:", errorBody);
+            // Use truncated raw text in the error message
+            errorMessage = `${errorMessage}. Response: ${errorBody.substring(
+              0,
+              100
+            )}${errorBody.length > 100 ? "..." : ""}`;
+          }
+          
+          // Check if this is a quota error
+          if (
+            errorMessage.includes("quota") ||
+            errorMessage.includes("exceeded") || 
+            errorMessage.includes("Resource has been exhausted") ||
+            response.status === 429
+          ) {
+            // Show API key modal for quota issues
+            setShowApiKeyModal(true);
+            setIsSendingToDoodle(false);
+            return;
+          }
+          
+          throw new Error(errorMessage); // Throw error to be caught below
+        }
+
+        // If response.ok, proceed to parse the JSON body
+        const result = await response.json();
+
+        if (result.success && result.imageData) {
+          const mainCtx = canvasRef.current?.getContext("2d");
+          if (mainCtx && canvasRef.current) {
+            const img = new Image();
+            img.onload = () => {
+              // Clear canvas without triggering state updates
+              mainCtx.fillStyle = '#FFFFFF';
+              mainCtx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+              
+              // Draw the new image
+              mainCtx.drawImage(
+                img,
+                0,
+                0,
+                canvasRef.current.width,
+                canvasRef.current.height
+              );
+              
+              // Batch our state updates
+              Promise.resolve().then(() => {
+                setTempPoints([]);
+                if (canvasRef.current.setHasDrawing) {
+                  canvasRef.current.setHasDrawing(true);
+                }
+                // Save canvas state after all state updates are complete
+                requestAnimationFrame(() => {
+                  saveCanvasState();
+                  toast.success("Image sent back to doodle canvas!");
+                  setIsSendingToDoodle(false);
+                });
+              });
+            };
+            img.onerror = (err) => {
+              console.error("Error loading converted doodle image:", err);
+              toast.error("Failed to load the converted doodle.");
+              setIsSendingToDoodle(false); // Turn off loading on image load error
+            };
+            img.src = `data:image/png;base64,${result.imageData}`;
+          } else {
+            throw new Error("Main canvas context not available.");
+          }
+        } else {
+          // Handle cases where API returns success: false or missing imageData
+          throw new Error(
+            result.error || "API returned success:false or missing data."
+          );
+        }
+      } catch (error) {
+        // This catches errors from fetch, response.ok check, response.json(), or explicit throws
+        console.error("Error sending image back to doodle:", error);
+        
+        // Check for quota errors in catch block
+        if (
+          error.message && 
+          (error.message.includes("quota") || 
+           error.message.includes("exceeded") ||
+           error.message.includes("Resource has been exhausted") ||
+           error.message.includes("429"))
+        ) {
+          // Show API key modal for quota issues
+          setShowApiKeyModal(true);
+        } else {
+          toast.error(`Error: ${error.message || "An unknown error occurred."}`);
+        }
+        
+        // Ensure loading state is turned off in *any* error scenario
+        setIsSendingToDoodle(false);
+      }
+    },
+    [isSendingToDoodle, clearCanvas, saveCanvasState, setTempPoints, toast, customApiKey]
+  );
+
+  // Function to open history modal
+  const openHistoryModal = () => {
+    setIsHistoryModalOpen(true);
+  };
+
+  // Updated function for library button
+  const toggleLibrary = () => {
+    setShowLibrary(prev => !prev);
+  };
+
+  // Calculate if history exists
+  const hasHistory = imageHistory && imageHistory.length > 0;
+
+  // Add this helper function for image compression
+  const compressImage = useCallback(async (dataUrl, maxWidth = 1200) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        // Create a canvas to resize the image
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Calculate new dimensions
+        let width = img.width;
+        let height = img.height;
+        
+        if (width > maxWidth) {
+          height = (height * maxWidth) / width;
+          width = maxWidth;
+        }
+        
+        canvas.width = width;
+        canvas.height = height;
+        
+        // Draw and export as JPEG with lower quality
+        ctx.fillStyle = '#FFFFFF';
+        ctx.fillRect(0, 0, width, height);
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/jpeg', 0.85));
+      };
+      img.src = dataUrl;
+    });
+  }, []);
+
+  // Add this new function to handle using a library image as template
+  const handleUseAsTemplate = useCallback(async (imageUrl) => {
+    console.log('Using library image as template:', imageUrl);
+    
+    // Show loading state with specific messages for each step
+    setTemplateLoadingMessage("Preparing template...");
+    setIsTemplateLoading(true);
+    
+    try {
+      // 1. Create a material from the image
+      // First, fetch the image and convert to base64
+      const response = await fetch(imageUrl);
+      const blob = await response.blob();
+      
+      // Convert blob to base64
+      const reader = new FileReader();
+      const imageDataPromise = new Promise((resolve) => {
+        reader.onloadend = () => resolve(reader.result);
+        reader.readAsDataURL(blob);
+      });
+      
+      const imageDataUrl = await imageDataPromise;
+      
+      // Process with visual-enhance-prompt API (compress the image first)
+      setTemplateLoadingMessage("Analyzing image...");
+      const compressedImage = await compressImage(imageDataUrl, 1200);
+      
+      // Get custom API key if it exists
+      const customApiKey = localStorage.getItem("geminiApiKey");
+      
+      // Call the visual-enhance-prompt API
+      const promptResponse = await fetch('/api/visual-enhance-prompt', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          image: compressedImage,
+          customApiKey,
+          basePrompt: 'Transform this sketch into a material with professional studio lighting against a pure black background. Render it in Cinema 4D with Octane for a high-end 3D visualization.'
+        }),
+      });
+      
+      if (!promptResponse.ok) {
+        throw new Error(`API returned ${promptResponse.status}`);
+      }
+      
+      const promptData = await promptResponse.json();
+      
+      // 2. Add material to StyleSelector
+      if (promptData.enhancedPrompt && promptData.suggestedName) {
+        setTemplateLoadingMessage("Creating material...");
+        // Create material object - use a smaller compressed image for thumbnail
+        const thumbnailImage = await compressImage(imageDataUrl, 300);
+        
+        const materialObj = {
+          name: promptData.suggestedName,
+          prompt: promptData.enhancedPrompt,
+          image: thumbnailImage // Use compressed thumbnail
+        };
+        
+        // Add material to library and get the key
+        const materialKey = addMaterialToLibrary(materialObj);
+        
+        // Select this new material
+        setStyleMode(materialKey);
+        
+        // 3. Convert the library image to a doodle and render in Canvas
+        setTemplateLoadingMessage("Converting to doodle...");
+        const doodleResponse = await fetch('/api/convert-to-doodle', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            imageData: compressedImage.split(',')[1],
+            customApiKey
+          }),
+        });
+        
+        if (!doodleResponse.ok) {
+          throw new Error(`Doodle conversion API returned ${doodleResponse.status}`);
+        }
+        
+        const doodleData = await doodleResponse.json();
+        
+        if (doodleData.success && doodleData.imageData) {
+          // Render the doodle on the canvas
+          const mainCtx = canvasRef.current?.getContext("2d");
+          if (mainCtx && canvasRef.current) {
+            const img = new Image();
+            img.onload = () => {
+              // Clear canvas 
+              mainCtx.fillStyle = '#FFFFFF';
+              mainCtx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+              
+              // Calculate appropriate dimensions while maintaining aspect ratio
+              // and respecting the current canvas dimensions
+              const canvasWidth = canvasRef.current.width;
+              const canvasHeight = canvasRef.current.height;
+              
+              const imgRatio = img.width / img.height;
+              const canvasRatio = canvasWidth / canvasHeight;
+              
+              // Declare variables separately to fix linter warning
+              let drawWidth = 0;
+              let drawHeight = 0;
+              let x = 0;
+              let y = 0;
+              
+              if (imgRatio > canvasRatio) {
+                // Image is wider relative to canvas
+                drawWidth = canvasWidth * 0.8;
+                drawHeight = drawWidth / imgRatio;
+                x = canvasWidth * 0.1;
+                y = (canvasHeight - drawHeight) / 2;
+              } else {
+                // Image is taller relative to canvas
+                drawHeight = canvasHeight * 0.8;
+                drawWidth = drawHeight * imgRatio;
+                x = (canvasWidth - drawWidth) / 2;
+                y = canvasHeight * 0.1;
+              }
+              
+              // Draw doodle
+              mainCtx.drawImage(img, x, y, drawWidth, drawHeight);
+              
+              // Save canvas state
+              if (typeof saveCanvasState === 'function') {
+                saveCanvasState();
+              }
+              
+              // Mark as having drawing
+              setHasDrawing(true);
+              
+              // 4. Show the original image in the display canvas first
+              setTemplateLoadingMessage("Generating material preview...");
+              
+              // Draw the original image to the display canvas
+              if (displayCanvasRef.current) {
+                const displayCtx = displayCanvasRef.current.getContext("2d");
+                if (displayCtx) {
+                  // Create a new image for the display canvas
+                  const displayImg = new Image();
+                  displayImg.onload = () => {
+                    // Clear display canvas first
+                    displayCtx.clearRect(0, 0, displayCanvasRef.current.width, displayCanvasRef.current.height);
+                    
+                    // Fill with black background for letterboxing
+                    displayCtx.fillStyle = "#000000";
+                    displayCtx.fillRect(0, 0, displayCanvasRef.current.width, displayCanvasRef.current.height);
+                    
+                    // Calculate aspect ratios for display canvas
+                    const imgRatio = displayImg.width / displayImg.height;
+                    const canvasRatio = displayCanvasRef.current.width / displayCanvasRef.current.height;
+                    
+                    // Declare variables separately
+                    let dispDrawWidth = 0;
+                    let dispDrawHeight = 0;
+                    let dispX = 0;
+                    let dispY = 0;
+                    
+                    if (imgRatio > canvasRatio) {
+                      // Image is wider than canvas
+                      dispDrawWidth = displayCanvasRef.current.width;
+                      dispDrawHeight = displayCanvasRef.current.width / imgRatio;
+                      dispX = 0;
+                      dispY = (displayCanvasRef.current.height - dispDrawHeight) / 2;
+                    } else {
+                      // Image is taller than canvas
+                      dispDrawHeight = displayCanvasRef.current.height;
+                      dispDrawWidth = displayCanvasRef.current.height * imgRatio;
+                      dispX = (displayCanvasRef.current.width - dispDrawWidth) / 2;
+                      dispY = 0;
+                    }
+                    
+                    // Draw the image with letterboxing
+                    displayCtx.drawImage(displayImg, dispX, dispY, dispDrawWidth, dispDrawHeight);
+                    
+                    // Set flag to indicate we have generated content
+                    setHasGeneratedContent(true);
+                    
+                    // 5. Finally, trigger generation to show the styled version
+                    // Close the library view and finish the template process
+                    setShowLibrary(false);
+                    
+                    // Slight delay before starting generation
+                    setTimeout(() => {
+                      handleGeneration();
+                      
+                      // Turn off template loading
+                      setIsTemplateLoading(false);
+                      setTemplateLoadingMessage("");
+                    }, 500);
+                  };
+                  
+                  // Load the original image for display
+                  displayImg.src = imageUrl;
+                }
+              } else {
+                // If no display canvas, just trigger generation and finish
+                handleGeneration();
+                setShowLibrary(false);
+                setIsTemplateLoading(false);
+                setTemplateLoadingMessage("");
+              }
+            };
+            
+            img.src = `data:image/png;base64,${doodleData.imageData}`;
+          } else {
+            throw new Error("Canvas context unavailable");
+          }
+        } else {
+          throw new Error("Failed to convert to doodle");
+        }
+      } else {
+        throw new Error("Failed to analyze image");
+      }
+    } catch (error) {
+      console.error('Error using image as template:', error);
+      toast.error('Failed to use image as template');
+      setIsTemplateLoading(false);
+      setTemplateLoadingMessage("");
+    }
+  }, [compressImage, handleGeneration]);
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-start bg-gray-50 p-2 md:p-4 overflow-y-auto">
+      {showLibrary ? (
+        <LibraryPage onBack={toggleLibrary} onUseAsTemplate={handleUseAsTemplate} />
+      ) : (
+        <div className="w-full max-w-[1800px] mx-auto pb-4">
+          <div className="space-y-1">
+            <div className="flex flex-col sm:flex-row items-start justify-between gap-2">
+              <div className="flex-shrink-0">
+                <Header />
+              </div>
+              {/* Header Buttons Section - only visible on desktop */}
+              <div className="hidden md:flex items-center gap-2 mt-auto sm:mt-8">
+                <HeaderButtons 
+                  hasHistory={hasHistory}
+                  openHistoryModal={openHistoryModal}
+                  toggleLibrary={toggleLibrary}
+                  handleSaveImage={handleSaveImage}
+                  isLoading={isLoading}
+                  hasGeneratedContent={hasGeneratedContent}
+                />
+              </div>
+            </div>
+
+            {/* New single row layout */}
+            <div className="flex flex-col md:flex-row items-stretch gap-4 w-full md:mt-4">
+              {/* Toolbar - fixed width on desktop, full width horizontal on mobile */}
+              <div className="w-full md:w-[60px] md:flex-shrink-0">
+                {/* Mobile toolbar (horizontal) */}
+                <div className="block md:hidden w-fit">
+                  <ToolBar
+                    currentTool={currentTool}
+                    setCurrentTool={setCurrentTool}
+                    handleUndo={handleUndo}
+                    clearCanvas={clearCanvas}
+                    orientation="horizontal"
+                    currentWidth={penWidth}
+                    setStrokeWidth={handleStrokeWidth}
+                    currentDimension={currentDimension}
+                    onDimensionChange={handleDimensionChange}
+                  />
+                </div>
+
+                {/* Desktop toolbar (vertical) */}
+                <div className="hidden md:block">
+                  <ToolBar
+                    currentTool={currentTool}
+                    setCurrentTool={setCurrentTool}
+                    handleUndo={handleUndo}
+                    clearCanvas={clearCanvas}
+                    orientation="vertical"
+                    currentWidth={penWidth}
+                    setStrokeWidth={handleStrokeWidth}
+                    currentDimension={currentDimension}
+                    onDimensionChange={handleDimensionChange}
+                  />
+                </div>
+              </div>
+
+              {/* Main content area */}
+              <div className="flex-1 flex flex-col gap-4">
+                {/* Canvas row */}
+                <div className="flex flex-col md:flex-row gap-2">
+                  {/* Canvas */}
+                  <div className="flex-1 w-full relative">
+                    <Canvas
+                      ref={canvasComponentRef}
+                      canvasRef={canvasRef}
+                      currentTool={currentTool}
+                      isDrawing={isDrawing}
+                      startDrawing={startDrawing}
+                      draw={draw}
+                      stopDrawing={stopDrawing}
+                      handleCanvasClick={handleCanvasClick}
+                      handlePenClick={handlePenClick}
+                      handleGeneration={handleGeneration}
+                      tempPoints={tempPoints}
+                      setTempPoints={setTempPoints}
+                      handleUndo={handleUndo}
+                      clearCanvas={clearCanvas}
+                      setCurrentTool={setCurrentTool}
+                      currentDimension={currentDimension}
+                      currentColor={penColor}
+                      currentWidth={penWidth}
+                      onImageUpload={handleImageUpload}
+                      onGenerate={handleGeneration}
+                      isGenerating={isLoading}
+                      setIsGenerating={setIsLoading}
+                      saveCanvasState={saveCanvasState}
+                      onDrawingChange={setHasDrawing}
+                      styleMode={styleMode}
+                      setStyleMode={setStyleMode}
+                      isSendingToDoodle={isSendingToDoodle}
+                    />
+                  </div>
+
+                  {/* Display Canvas */}
+                  <div className="flex-1 w-full">
+                    <DisplayCanvas
+                      displayCanvasRef={displayCanvasRef}
+                      isLoading={isLoading}
+                      handleRegenerate={handleRegenerate}
+                      hasGeneratedContent={hasGeneratedContent}
+                      currentDimension={currentDimension}
+                      onOpenHistory={openHistoryModal}
+                      onRefineImage={handleImageRefinement}
+                      onSendToDoodle={handleSendToDoodle}
+                      hasHistory={hasHistory}
+                      openHistoryModal={openHistoryModal}
+                      toggleLibrary={toggleLibrary}
+                      handleSaveImage={handleSaveImage}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <ErrorModal
+        showErrorModal={showErrorModal}
+        closeErrorModal={closeErrorModal}
+        customApiKey={customApiKey}
+        setCustomApiKey={setCustomApiKey}
+        handleApiKeySubmit={handleApiKeySubmit}
+      />
+
+      <ApiKeyModal
+        isOpen={showApiKeyModal}
+        onClose={() => setShowApiKeyModal(false)}
+        onSubmit={handleApiKeySubmit}
+        initialValue={customApiKey}
+      />
+
+      <TextInput
+        isTyping={isTyping}
+        textInputRef={textInputRef}
+        textInput={textInput}
+        setTextInput={setTextInput}
+        handleTextInput={handleTextInput}
+        textPosition={textPosition}
+      />
+
+      <HistoryModal
+        isOpen={isHistoryModalOpen}
+        onClose={() => setIsHistoryModalOpen(false)}
+        history={imageHistory}
+        onSelectImage={handleSelectHistoricalImage}
+        currentDimension={currentDimension}
+      />
+
+      {/* Template loading overlay */}
+      {isTemplateLoading && (
+        <div className="fixed inset-0 flex flex-col items-center justify-center bg-black/50 z-50">
+          <div className="bg-white shadow-lg rounded-xl p-6 flex flex-col items-center max-w-md">
+            <LoaderCircle className="w-12 h-12 text-blue-600 animate-spin mb-4" />
+            <p className="text-gray-900 font-medium text-lg">{templateLoadingMessage || "Processing template..."}</p>
+            <p className="text-gray-500 text-sm mt-2">This may take a moment</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CanvasContainer;

components/DimensionSelector.js

@@ -0,0 +1,130 @@
+import { Square, RectangleVertical, RectangleHorizontal, ChevronDown } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+
+const dimensions = [
+  {
+    id: 'landscape',
+    label: '3:2',
+    width: 1500,
+    height: 1000,
+    icon: RectangleHorizontal
+  },
+  {
+    id: 'square',
+    label: '1:1',
+    width: 1000,
+    height: 1000,
+    icon: Square
+  },
+  {
+    id: 'portrait',
+    label: '4:5',
+    width: 1000,
+    height: 1250,
+    icon: RectangleVertical
+  }
+ 
+];
+
+const DimensionSelector = ({ currentDimension = dimensions[0], onDimensionChange }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  
+  // Handle both click and hover for better mobile and desktop experience
+  const handleToggle = () => setIsOpen(!isOpen);
+  
+  // We don't want to close on mouse leave immediately
+  const timeoutRef = useRef(null);
+  
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    setIsOpen(true);
+  };
+  
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 100);
+  };
+  
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  // Find current dimension
+  const current = dimensions.find(d => d.id === currentDimension.id) || dimensions[0];
+  const Icon = current.icon;
+
+  return (
+    <div 
+      className="relative z-50" 
+      ref={dropdownRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Current selection */}
+      <button
+        type="button"
+        className="w-full flex flex-row md:flex-col items-center justify-center md:p-2 md:py-4 px-2 py-2 rounded-lg transition-colors hover:bg-gray-50"
+        onClick={handleToggle}
+        style={{ opacity: isOpen ? 1 : 0.7 }}
+      >
+        <Icon className="w-5 h-5 text-gray-900 mr-2 md:mr-0 md:mb-1" />
+        <span className="text-sm text-gray-900">{current.label}</span>
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && (
+        <>
+          {/* Invisible bridge element that extends to the dropdown */}
+          <div className="hidden md:block absolute left-[calc(100%-4px)] top-0 h-full w-8" 
+               onMouseEnter={handleMouseEnter}
+               style={{ pointerEvents: 'auto' }} />
+          
+          <div className="absolute left-0 md:left-[calc(100%+4px)] top-0 bg-white rounded-xl shadow-soft 
+                      border border-gray-200 z-10 min-w-[80px]"
+               onMouseEnter={handleMouseEnter}
+               onMouseLeave={handleMouseLeave}>
+            <div className="py-1">
+              {dimensions.map((dim) => {
+                const Icon = dim.icon;
+                return (
+                  <button
+                    type="button"
+                    key={dim.id}
+                    onClick={() => {
+                      onDimensionChange(dim);
+                      setIsOpen(false);
+                    }}
+                    className={`w-full p-2 flex items-center gap-2 hover:bg-gray-50 transition-colors whitespace-nowrap ${
+                      currentDimension.id === dim.id ? 'bg-gray-100 text-gray-900' : 'text-gray-600'
+                    } ${dim.id === dimensions[0].id ? 'rounded-t-lg' : ''} ${dim.id === dimensions[dimensions.length-1].id ? 'rounded-b-lg' : ''}`}
+                  >
+                    <Icon className="w-4 h-4" />
+                    <span className="text-sm">{dim.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default DimensionSelector;

components/DisplayCanvas.js

@@ -0,0 +1,325 @@
+import { LoaderCircle, ImageIcon, Send, RotateCw, Maximize, Wand2, Sun, Plus, Palette, Image as ImageLucide, Brush, SendToBack, Download, ArrowLeftRight } from 'lucide-react';
+import { useEffect, useState, useCallback } from 'react';
+import ImageRefiner from './ImageRefiner';
+import HeaderButtons from './HeaderButtons';
+
+// Update REFINEMENT_SUGGESTIONS with cleaner labels and full prompts
+const REFINEMENT_SUGGESTIONS = [
+  { label: 'Rotate', prompt: 'Can you rotate this by ', icon: RotateCw },
+  { label: 'Add light', prompt: 'Can you add a light from the ', icon: Sun },
+  { label: 'Add object', prompt: 'Can you add a ', icon: Plus },
+  { label: 'Background', prompt: 'Can you change the background to ', icon: ImageLucide },
+  { label: 'Color', prompt: 'Can you make the color more ', icon: Palette },
+  { label: 'Scale', prompt: 'Can you make this ', icon: Maximize },
+  { label: 'Lighting', prompt: 'Can you make the lighting more ', icon: Sun },
+  { label: 'Style', prompt: 'Can you make it look more ', icon: Wand2 },
+  { label: 'Material', prompt: 'Can you change the material to ', icon: Wand2 },
+  // Add more suggestions as needed...
+];
+
+// Update SURPRISE_REFINEMENTS with more fun, bonkers prompts
+const SURPRISE_REFINEMENTS = [
+  // Open-ended prompts (higher probability)
+  "Do something cool with this. I leave it up to you!",
+  "Surprise me! Take this image somewhere unexpected.",
+  "Transform this however you want. Be creative!",
+  "Do something wild with this image. No limits!",
+  "Make this image magical in your own way.",
+  "Take creative freedom with this image. Surprise me!",
+  "Show me what you can do with this. Go crazy!",
+  "Transform this in a way I wouldn't expect.",
+  "Have fun with this and do whatever inspires you.",
+  "Go wild with this image! Show me something amazing.",
+  "Put your own creative spin on this image.",
+  "Reimagine this image however you want. Be bold!",
+  "Do something unexpected with this. Totally up to you!",
+  "Surprise me with your creativity. Anything goes!",
+  "Make this extraordinary in whatever way you choose.",
+  "Show off your creative abilities with this image!",
+  "Take this in any direction that excites you!",
+  "Transform this however your imagination guides you.",
+  "Make this magical in your own unique way.",
+  "Do something fun and unexpected with this!",
+  "Surprise me! Show me your creativity.",
+  "Make this more beautiful <3",
+  "Put your artistic spin on this image!",
+  "Let your imagination run wild with this!",
+  "Take this image to a whole new level of awesome!",
+  "Make this image extraordinary in your own way.",
+  "Do something fantastic with this. Full creative freedom!",
+  "Surprise me with a totally unexpected transformation!",
+  "Go nuts with this! Show me something incredible!",
+  "Add your own wild twist to this image!",
+  "Make this image come alive however you want!",
+  "Transform this in the most creative way possible!",
+  "Go crazy with this. I want to be wowed :))",
+  "Do whatever magical things you want with this image!",
+  "Reinvent this image however inspires you!",
+  
+  // Specific wild ideas (lower probability)
+  "Can you add this to outer space with aliens having a BBQ?",
+  "Can you add a giraffe wearing a tuxedo to this?",
+  "Can you make tiny vikings invade this image?",
+  "Can you turn this into an ice cream sundae being eaten by robots?",
+  "Can you make this float in a sea of rainbow soup?",
+  "Can you add dancing pickles to this image?",
+  "Can you make this the centerpiece of an alien museum?",
+  "Can you add this to a cereal bowl being eaten by a giant?",
+  "Can you make this the star of a bizarre music video?",
+  "Can you add tiny dinosaurs having a tea party?",
+  "Can you turn this into something from a fever dream?",
+  "Can you make this the main character in a surreal fairytale?",
+  "Can you put this in the middle of a candy landscape?",
+  "Can you add this to a world where physics works backwards?",
+  "Can you make this the prize in a cosmic game show?",
+  "Can you add tiny people worshipping this as a deity?",
+  "Can you put this in the paws of a giant cosmic cat?",
+  "Can you make this wearing sunglasses and surfing?",
+  "Can you add this to a world made entirely of cheese?",
+  "Can you make this the centerpiece of a goblin birthday party?",
+  "Can you transform this into a cloud creature floating in the sky?",
+  "Can you add this to a world where everything is made of pasta?",
+  "Can you turn this into a piñata at a monster celebration?",
+  "Can you add this to outer space?",
+  "Can you add this to a landscape made of breakfast foods?",
+  "Can you make this the conductor of an orchestra of unusual animals?",
+  "Can you turn this into a strange plant growing in an alien garden?",
+  "Can you add this to a world inside a snow globe?",
+  "Can you make this the secret ingredient in a witch's cauldron?",
+  "Can you turn this into a superhero with an unusual power?",
+  "Can you make this swimming in a sea of jelly beans?",
+  "Can you add this to a planet where everything is upside down?",
+  "Can you make this the treasure in a dragon's unusual collection?",
+  "Can you transform this into a character in a bizarre cartoon?",
+  "Can you add this to a world where shadows come to life?"
+];
+
+const DisplayCanvas = ({ 
+  displayCanvasRef, 
+  isLoading,
+  handleSaveImage,
+  handleRegenerate,
+  hasGeneratedContent = false,
+  currentDimension,
+  onOpenHistory,
+  onRefineImage,
+  onSendToDoodle,
+  hasHistory,
+  openHistoryModal,
+  toggleLibrary
+}) => {
+  const [showPlaceholder, setShowPlaceholder] = useState(true);
+  const [inputValue, setInputValue] = useState('');
+  const [showDoodleTooltip, setShowDoodleTooltip] = useState(false);
+  const [showSaveTooltip, setShowSaveTooltip] = useState(false);
+  const [isHoveringCanvas, setIsHoveringCanvas] = useState(false);
+  
+  // Update placeholder visibility when loading or content prop changes
+  useEffect(() => {
+    if (hasGeneratedContent) {
+      setShowPlaceholder(false);
+    } else if (isLoading) {
+      setShowPlaceholder(true);
+    }
+  }, [isLoading, hasGeneratedContent]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!inputValue.trim()) return;
+    onRefineImage(inputValue);
+    setInputValue('');
+  };
+
+  const handleSuggestionClick = (suggestion) => {
+    setInputValue(suggestion.prompt);
+    document.querySelector('input[name="refiner"]').focus();
+  };
+
+  const handleSurpriseMe = () => {
+    const randomPrompt = SURPRISE_REFINEMENTS[Math.floor(Math.random() * SURPRISE_REFINEMENTS.length)];
+    setInputValue(randomPrompt);
+    document.querySelector('input[name="refiner"]').focus();
+  };
+
+  const handleSendToDoodle = useCallback(() => {
+    if (displayCanvasRef.current && onSendToDoodle) {
+      const imageDataUrl = displayCanvasRef.current.toDataURL('image/png');
+      onSendToDoodle(imageDataUrl);
+    }
+  }, [displayCanvasRef, onSendToDoodle]);
+
+  // Function to handle clicking the canvas for regeneration
+  const handleCanvasClickForRegenerate = () => {
+    if (hasGeneratedContent && !isLoading) {
+      handleRegenerate();
+    }
+  };
+
+  // Placeholder function for fullscreen action
+  const handleFullscreen = (e) => {
+    e.stopPropagation(); // Prevent triggering the refresh
+    alert('Fullscreen action triggered!'); 
+    // TODO: Implement actual fullscreen logic (e.g., using Fullscreen API or opening image in new tab)
+  };
+
+  return (
+    <div className="flex flex-col">
+      {/* Canvas container with fixed aspect ratio */}
+      <div 
+        className="relative w-full"
+        style={{ aspectRatio: `${currentDimension.width} / ${currentDimension.height}` }}
+      >
+        <button
+          type="button"
+          className="w-full h-full absolute inset-0 z-10 cursor-pointer appearance-none bg-transparent border-0 group" 
+          onMouseEnter={() => setIsHoveringCanvas(true)}
+          onMouseLeave={() => setIsHoveringCanvas(false)}
+          onClick={handleCanvasClickForRegenerate}
+          disabled={!hasGeneratedContent || isLoading}
+          aria-label="Regenerate image"
+        />
+        <canvas
+          ref={displayCanvasRef}
+          width={currentDimension.width}
+          height={currentDimension.height}
+          className="absolute inset-0 w-full h-full border border-gray-300 bg-white rounded-xl shadow-soft"
+          aria-label="Generated image canvas"
+        />
+        
+        {/* Loading overlay */}
+        {isLoading && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black/5 rounded-xl">
+            <div className="bg-white/90 rounded-full p-3 shadow-medium">
+              <LoaderCircle className="w-8 h-8 animate-spin text-gray-700" />
+            </div>
+          </div>
+        )}
+        
+        {/* Placeholder overlay */}
+        {showPlaceholder && !isLoading && !hasGeneratedContent && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+            <ImageIcon className="w-7 h-7 text-gray-400 mb-2" />
+            <p className="text-gray-400 text-lg font-medium">Generation will appear here</p>
+          </div>
+        )}
+
+        {/* Hover-to-Refresh Overlay */}        
+        {isHoveringCanvas && hasGeneratedContent && !isLoading && (
+          // Added transition classes for smoother appearance
+          // Changed bg-black/20 to bg-black/10 for a gentler overlay
+          <div className="absolute inset-0 flex items-center justify-center bg-black/0 rounded-xl pointer-events-none transition-opacity duration-300 ease-in-out">
+            {/* Container for icon - allows separate click handling */}
+            {/* Removed Maximize icon */}
+            <div className="flex items-center gap-4 bg-white/90 rounded-full p-3 shadow-medium pointer-events-auto"> 
+              {/* Refresh Icon (clickable via parent div onClick) */}
+              <RotateCw className="w-8 h-8 text-gray-700" title="Click canvas to regenerate"/> 
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Action bar and refiner section - Combined layout */}
+      <div className="mt-4 flex items-stretch justify-between gap-2 max-w-full">
+        {/* Left side wrapper for Refiner and action buttons */}
+        <div className="flex items-stretch gap-2 flex-1 min-w-0">
+          {/* Refiner input - only shown when there's generated content */}
+          {hasGeneratedContent ? (
+            <>
+              <form onSubmit={handleSubmit} className="flex-1 min-w-0">
+                <div className="group flex items-center bg-gray-50 focus-within:bg-white rounded-xl shadow-soft p-2 border border-gray-200 focus-within:border-gray-300 h-14 transition-colors">
+                  <input
+                    name="refiner"
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    placeholder="Type to refine the image..."
+                    disabled={isLoading}
+                    className="flex-1 px-2 bg-transparent border-none text-sm text-gray-400 placeholder-gray-300 group-focus-within:text-gray-600 group-focus-within:placeholder-gray-400 focus:outline-none transition-colors"
+                  />
+                  <button
+                    type="submit"
+                    disabled={isLoading || !inputValue.trim()}
+                    className="p-2 rounded-lg text-gray-400 group-focus-within:text-gray-700 hover:bg-gray-100 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                    aria-label="Send refinement"
+                  >
+                    <Send className="w-5 h-5" />
+                  </button>
+                </div>
+              </form>
+              {/* Action buttons wrapper */}
+              <div className="flex gap-2">
+                {/* "Send to Doodle" button with tooltip */}
+                <div className="relative">
+                  <button
+                    type="button"
+                    onClick={handleSendToDoodle}
+                    disabled={isLoading}
+                    onMouseEnter={() => setShowDoodleTooltip(true)}
+                    onMouseLeave={() => setShowDoodleTooltip(false)}
+                    className="group w-14 h-14 p-2 rounded-lg bg-gray-50 border border-gray-200 shadow-soft hover:bg-white hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                    aria-label="Send image back to doodle canvas"
+                  >
+                    <ArrowLeftRight className="w-5 h-5 text-gray-400 group-hover:text-gray-700 transition-colors" />
+                  </button>
+                  {/* Custom Tooltip - Right aligned */}
+                  {showDoodleTooltip && (
+                    <div className="absolute bottom-full right-0 mb-2 px-3 py-1.5 bg-white border border-gray-200 text-gray-700 text-xs rounded-lg shadow-soft whitespace-nowrap pointer-events-none">
+                      Send Back to Doodle Canvas
+                    </div>
+                  )}
+                </div>
+              </div>
+            </>
+          ) : (
+            // Placeholder div to maintain layout when no content
+            <div className="flex-1 h-0" />
+          )}
+        </div>
+      </div>
+
+      {/* Refined suggestion chips */}
+      {hasGeneratedContent && (
+        <div className="mt-4 flex flex-wrap gap-2 text-xs mb-4">
+          {/* Surprise Me button with updated styling */}
+          <button
+            type="button"
+            onClick={handleSurpriseMe}
+            className="group flex items-center gap-2 px-3 py-1  bg-gray-50 hover:bg-white rounded-full border border-gray-200 text-gray-400 hover:border-gray-300 transition-all focus:outline-none focus:ring-2 focus:ring-gray-200"
+          >
+            <Wand2 className="w-4 h-4 group-hover:text-gray-600" />
+            <span className="group-hover:text-gray-600">Surprise Me</span>
+          </button>
+
+          {/* Regular suggestion buttons with updated styling */}
+          {REFINEMENT_SUGGESTIONS.map((suggestion) => (
+            <button
+              key={`suggestion-${suggestion.label}`}
+              type="button"
+              onClick={() => handleSuggestionClick(suggestion)}
+              className="group flex items-center gap-2 px-3 py-1 bg-gray-50 hover:bg-white rounded-full border border-gray-200 text-gray-400 hover:border-gray-300 transition-all focus:outline-none focus:ring-2 focus:ring-gray-200"
+            >
+              <suggestion.icon className="w-4 h-4 group-hover:text-gray-600" />
+              <span className="group-hover:text-gray-600">{suggestion.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      
+      {/* Header buttons - Mobile only, appearing below refinement options */}
+      <div className="md:hidden flex flex-wrap justify-between items-center gap-2 mt-6 mb-2 w-full">
+        <div className="grid grid-cols-3 w-full gap-2">
+          <HeaderButtons 
+            hasHistory={hasHistory}
+            openHistoryModal={openHistoryModal}
+            toggleLibrary={toggleLibrary}
+            handleSaveImage={handleSaveImage}
+            isLoading={isLoading}
+            hasGeneratedContent={hasGeneratedContent}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DisplayCanvas; 

components/ErrorModal.js

@@ -0,0 +1,100 @@
+import { X } from 'lucide-react';
+import { useState, useEffect } from 'react';
+
+const ErrorModal = ({ 
+  showErrorModal, 
+  closeErrorModal, 
+  customApiKey, 
+  setCustomApiKey, 
+  handleApiKeySubmit 
+}) => {
+  const [localApiKey, setLocalApiKey] = useState(customApiKey);
+  
+  // Update local API key when prop changes
+  useEffect(() => {
+    setLocalApiKey(customApiKey);
+  }, [customApiKey]);
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    handleApiKeySubmit(localApiKey);
+  };
+
+  return (
+    <>
+      {showErrorModal && (
+        <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 overflow-y-auto modalBackdrop"
+          onClick={(e) => {
+            if (e.target.classList.contains('modalBackdrop')) {
+              closeErrorModal();
+            }
+          }}
+        >
+          <div className="bg-white p-6 rounded-xl shadow-medium max-w-md w-full mx-4 my-8">
+            <div className="flex flex-col gap-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-medium text-gray-800">API Quota Exceeded</h2>
+                <button 
+                  type="button"
+                  onClick={closeErrorModal}
+                  className="text-gray-500 hover:text-gray-700"
+                  aria-label="Close"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              
+              <div className="text-gray-600">
+                <p className="mb-2">
+                  You've exceeded your API quota. You can:
+                </p>
+                <ul className="list-disc ml-5 mb-4 space-y-1 text-gray-600">
+                  <li>Wait for your quota to reset</li>
+                  <li>Use your own API key from <a href="https://ai.google.dev/" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">Google AI Studio</a></li>
+                </ul>
+              </div>
+              
+              <form onSubmit={handleSubmit} className="space-y-3">
+                <div>
+                  <label 
+                    htmlFor="apiKey" 
+                    className="block text-sm font-medium text-gray-700 mb-1"
+                  >
+                    Your Gemini API Key
+                  </label>
+                  <input
+                    id="apiKey"
+                    type="text"
+                    placeholder="Enter your Gemini API key"
+                    value={localApiKey}
+                    onChange={(e) => setLocalApiKey(e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  />
+                  <p className="text-xs text-gray-500 mt-1">Your API key will be saved locally and never sent to our servers.</p>
+                </div>
+                <div className="flex justify-end gap-3 pt-2">
+                  <button
+                    type="button"
+                    onClick={closeErrorModal}
+                    className="px-4 py-2 border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition-colors text-sm font-medium"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={!localApiKey.trim()}
+                    className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 transition-colors text-sm font-medium"
+                  >
+                    Save API Key
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ErrorModal; 

components/Header.js

@@ -0,0 +1,26 @@
+const Header = () => {
+  return (
+    <header className="w-full pt-2">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 pb-0">
+        <div className="flex flex-col gap-0">
+          <h1 className="text-lg tracking-[-0.1px] text-gray-800" 
+          style={{ fontFamily: "'Google Sans', sans-serif" }}>GEMINI 3D DRAWING</h1>
+          <p className="text-sm text-gray-400">
+            <span>By</span>{" "}
+            <a href="https://x.com/dev_valladares" target="_blank" rel="noreferrer" className="hover:text-gray-600 underline transition-colors">Dev Valladares</a> 
+            {" "}&{" "}
+            <a href="https://x.com/trudypainter" target="_blank" rel="noreferrer" className="hover:text-gray-600 underline transition-colors">Trudy Painter</a>
+            {" "}
+
+            
+          </p>
+          <span className="inline-flex items-center rounded-full mt-1.5 border border-gray-200 px-1.5 py-1 text-xs font-mono text-gray-400">
+          ⟡ Gemini 2.0 Native Image Generation ⟡
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header; 

components/HeaderButtons.js

@@ -0,0 +1,47 @@
+import { Download, History as HistoryIcon, Library as LibraryIcon } from "lucide-react";
+
+const HeaderButtons = ({ 
+  hasHistory, 
+  openHistoryModal, 
+  toggleLibrary, 
+  handleSaveImage, 
+  isLoading, 
+  hasGeneratedContent 
+}) => {
+  return (
+    <>
+      <button
+        type="button"
+        onClick={openHistoryModal}
+        disabled={!hasHistory}
+        className={`group flex items-center justify-center gap-2 md:gap-2.5 px-2 md:px-5 h-14 rounded-full border text-sm shadow-soft transition-all focus:outline-none w-full md:w-auto ${
+          !hasHistory
+            ? 'bg-gray-50 border-gray-200 text-gray-300 cursor-not-allowed opacity-70'
+            : 'bg-gray-50 border-gray-200 text-gray-400 hover:bg-white hover:border-gray-300'
+        }`}
+      >
+        <HistoryIcon className={`w-5 h-5 ${!hasHistory ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-600'}`} />
+        <span className={`font-medium md:inline ${!hasHistory ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-600'}`}>History</span>
+      </button>
+      <button
+        type="button"
+        onClick={toggleLibrary}
+        className="group flex items-center justify-center gap-2 md:gap-2.5 px-2 md:px-5 h-14 bg-gray-50 hover:bg-white rounded-full border border-gray-200 text-gray-400 hover:border-gray-300 transition-all focus:outline-none focus:ring-2 focus:ring-gray-200 text-sm shadow-soft w-full md:w-auto"
+      >
+        <LibraryIcon className="w-5 h-5 group-hover:text-gray-600" />
+        <span className="group-hover:text-gray-600 font-medium">Gallery</span>
+      </button>
+      <button
+        type="button"
+        onClick={handleSaveImage}
+        disabled={isLoading || !hasGeneratedContent}
+        className="group flex items-center justify-center gap-2 md:gap-2.5 px-2 md:px-5 h-14 rounded-full border text-sm shadow-soft transition-all focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed bg-gray-50 border-gray-200 text-gray-400 hover:bg-white hover:border-gray-300 w-full md:w-auto"
+      >
+        <Download className={`w-5 h-5 ${isLoading || !hasGeneratedContent ? 'text-gray-400' : 'group-hover:text-gray-600'}`} />
+        <span className={isLoading || !hasGeneratedContent ? 'text-gray-400' : 'group-hover:text-gray-600 font-medium'}>Save</span>
+      </button>
+    </>
+  );
+};
+
+export default HeaderButtons; 

components/HistoryModal.js

@@ -0,0 +1,113 @@
+import { X, Calendar } from 'lucide-react';
+import { useRef, useEffect } from 'react';
+
+const HistoryModal = ({ 
+  isOpen, 
+  onClose, 
+  history,
+  onSelectImage,
+  currentDimension
+}) => {
+  if (!isOpen) return null;
+  
+  const modalContentRef = useRef(null);
+  
+  // Handle click outside to close
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (modalContentRef.current && !modalContentRef.current.contains(event.target)) {
+        onClose();
+      }
+    }
+    
+    // Add event listener when modal is open
+    document.addEventListener('mousedown', handleClickOutside);
+    
+    // Clean up the event listener
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose]);
+
+  // Format date nicely
+  const formatDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    
+    // Check if it's today
+    if (date.toDateString() === today.toDateString()) {
+      return `Today, ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+    }
+    
+    // Check if it's yesterday
+    if (date.toDateString() === yesterday.toDateString()) {
+      return `Yesterday, ${date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+    }
+    
+    // Otherwise show full date
+    return date.toLocaleDateString([], { 
+      month: 'short', 
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 overflow-y-auto p-4">
+      <div 
+        ref={modalContentRef}
+        className="bg-white p-4 rounded-xl shadow-medium max-w-5xl w-full mx-auto my-4 max-h-[85vh] flex flex-col border border-gray-200"
+      >
+        <div className="flex items-center justify-between mb-4 px-1">
+          <h2 className="text-xl font-medium text-gray-800" style={{ fontFamily: "'Google Sans', sans-serif" }}>Drawing History</h2>
+          <button 
+            type="button"
+            onClick={onClose}
+            className="text-gray-500 hover:text-gray-700 p-2 rounded-full hover:bg-gray-50 transition-colors"
+            aria-label="Close"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {!history || history.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center text-gray-500 py-12">
+            No history available yet. Start drawing to create some!
+          </div>
+        ) : (
+          <div className="flex-1 overflow-y-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 px-1 pb-6">
+            {history.map((item, index) => (
+              <div key={item.timestamp} className="flex flex-col justify-center h-full">
+                <button 
+                  className="w-full h-auto relative group cursor-pointer rounded-lg overflow-hidden border border-gray-200 hover:border-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-300"
+                  onClick={() => onSelectImage(item)}
+                  type="button"
+                  aria-label={`Select drawing from ${new Date(item.timestamp).toLocaleString()}`}
+                >
+                  <div className="w-full" style={{ aspectRatio: `${item.dimensions?.width || 1} / ${item.dimensions?.height || 1}` }}>
+                    <div className="relative bg-black w-full h-full">
+                      <img 
+                        src={item.imageUrl} 
+                        alt={`Drawing history ${index + 1}`}
+                        className="w-full h-full object-contain"
+                      />
+                    </div>
+                    <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-black/30 backdrop-blur-[2px] text-xs py-2 px-3 opacity-0 group-hover:opacity-100 transition-opacity border-t border-gray-800/10 flex items-center gap-1.5">
+                      <Calendar className="w-3 h-3 text-gray-300" />
+                      <span className="text-white/90">{formatDate(item.timestamp)}</span>
+                    </div>
+                  </div>
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default HistoryModal; 

components/ImageRefiner.js

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { Send } from 'lucide-react';
+
+const ImageRefiner = ({ 
+  onRefine,
+  isLoading,
+  hasGeneratedContent
+}) => {
+  const [inputValue, setInputValue] = useState('');
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!inputValue.trim()) return;
+    onRefine(inputValue);
+    setInputValue('');
+  };
+
+  if (!hasGeneratedContent) return null;
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2">
+      <input
+        type="text"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        placeholder="Type to refine the image..."
+        disabled={isLoading}
+        className="flex-1 px-4 py-2 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 disabled:opacity-50 disabled:cursor-not-allowed"
+      />
+      <button
+        type="submit"
+        disabled={isLoading || !inputValue.trim()}
+        className="p-2 bg-gray-900 text-white rounded-xl hover:bg-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        <Send className="w-5 h-5" />
+      </button>
+    </form>
+  );
+};
+
+export default ImageRefiner; 

components/LibraryPage.js

@@ -0,0 +1,233 @@
+import { useState, useEffect } from 'react';
+import { X, ArrowLeft, Wand2 } from 'lucide-react';
+import Masonry from 'react-masonry-css';
+
+// Function to get last modified date from filename for sorting
+const getDateFromFilename = (filename) => {
+  // Extract date if it's in the format "chrome-study - YYYY-MM-DDTHHMMSS"
+  const dateMatch = filename.match(/chrome-study - (\d{4}-\d{2}-\d{2}T\d{6})/);
+  if (dateMatch) {
+    return new Date(dateMatch[1].replace('T', 'T').slice(0, 19));
+  }
+  
+  // Extract number if it's in the format "chrome-study (XX)" or "chrome-study-XX"
+  const numMatch = filename.match(/chrome-study[- ]\(?(\d+)/);
+  if (numMatch) {
+    return Number.parseInt(numMatch[1], 10);
+  }
+  
+  return 0; // Default value for sorting
+};
+
+const LibraryPage = ({ onBack, onUseAsTemplate }) => {
+  const [images, setImages] = useState([]);
+  const [fullscreenImage, setFullscreenImage] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hoveredImage, setHoveredImage] = useState(null);
+  
+  // Breakpoint columns configuration for the masonry layout
+  const breakpointColumnsObj = {
+    default: 4,
+    1100: 3,
+    700: 2,
+    500: 1
+  };
+  
+  useEffect(() => {
+    // Function to get all images from the library folder
+    const fetchImages = async () => {
+      try {
+        // Simulate fetching the list of images
+        // In a real app, you would fetch this from an API
+        const imageFiles = [
+          "chrome-study (17).png",
+          "chrome-study (19).png",
+          "chrome-study (27).png",
+          "chrome-study (43).png",
+          "chrome-study (47).png",
+          "chrome-study (48).png",
+          "chrome-study (55).png",
+          "chrome-study (56).png",
+          "chrome-study (58).png",
+          "chrome-study (62).png",
+          "chrome-study (64).png",
+          "chrome-study (72).png",
+          "chrome-study (76).png",
+          "chrome-study (77).png",
+          "chrome-study (78).png",
+          "chrome-study (79).png",
+          "chrome-study (81).png",
+          "chrome-study (83).png",
+          "chrome-study (84).png",
+          "chrome-study (86).png",
+          "chrome-study (87).png",
+          "chrome-study (92).png",
+          "chrome-study (94).png",
+          "chrome-study (95).png",
+          "chrome-study (98).png",
+          "chrome-study (99).png",
+          "chrome-study - 2025-03-29T231111.407.png",
+          "chrome-study - 2025-03-29T231628.676.png",
+          "chrome-study - 2025-03-29T231852.687.png",
+          "chrome-study - 2025-03-29T232157.263.png",
+          "chrome-study - 2025-03-29T232601.690.png",
+          "chrome-study - 2025-03-29T235802.886.png",
+          "chrome-study - 2025-03-30T000256.137.png",
+          "chrome-study - 2025-03-30T000847.148.png",
+          "chrome-study - 2025-03-30T001126.978.png",
+          "chrome-study - 2025-03-30T001518.410.png",
+          "chrome-study - 2025-03-30T002129.834.png",
+          "chrome-study - 2025-03-30T002928.187.png",
+          "chrome-study - 2025-03-30T003503.053.png",
+          "chrome-study - 2025-03-30T003713.255.png",
+          "chrome-study - 2025-03-30T003942.300.png",
+          "chrome-study - 2025-03-30T011127.402.png",
+          "chrome-study-11.png",
+          "chrome-study-6.png"
+        ];
+        
+        // Sort images by "newest" (using filename to guess date/order)
+        // In a real app, you would have actual metadata
+        const sortedImages = imageFiles.sort((a, b) => {
+          const dateA = getDateFromFilename(a);
+          const dateB = getDateFromFilename(b);
+          return dateB - dateA; // Descending order
+        });
+        
+        setImages(sortedImages);
+        setIsLoading(false);
+      } catch (error) {
+        console.error("Error fetching library images:", error);
+        setIsLoading(false);
+      }
+    };
+    
+    fetchImages();
+  }, []);
+  
+  const handleImageClick = (imagePath) => {
+    setFullscreenImage(imagePath);
+  };
+  
+  const handleKeyDown = (event, imagePath) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      setFullscreenImage(imagePath);
+    }
+  };
+  
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-start bg-gray-50 p-2 md:p-4 overflow-y-auto">
+      <div className="w-full max-w-[1800px] mx-auto pb-32">
+        {/* Fixed header section */}
+        <div className="fixed top-0 left-0 right-0 bg-gray-50 z-10 px-2 md:px-4 pt-2 md:pt-4 pb-3">
+          <div className="w-full max-w-[1800px] mx-auto">
+            {/* Simple Header */}
+            <div className="flex items-center justify-between mt-4 mx-1">
+              <button 
+                type="button"
+                onClick={onBack}
+                className="flex items-center text-gray-800 hover:text-gray-600 hover:cursor-pointer transition-colors text-lg font-medium"
+                aria-label="Go back to gallery"
+              >
+                <ArrowLeft className="w-5 h-5 mr-1" />
+                Gallery
+              </button>
+
+              <div>
+                <span className="inline-flex items-center rounded-full border px-5 py-2 border-gray-200 bg-gray-100 text-base text-gray-500">
+                  Submit by replying to this{" "}<a href="https://x.com/dev_valladares/status/1799888888888888888" target="_blank" rel="noreferrer" className="underline ml-1">tweet</a>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        {/* Content with padding to account for fixed header */}
+        <div className="space-y-4 mt-28">
+          {/* Loading state */}
+          {isLoading && (
+            <div className="flex items-center justify-center h-64">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-400" />
+            </div>
+          )}
+          
+          {/* Masonry grid of images */}
+          <Masonry
+            breakpointCols={breakpointColumnsObj}
+            className="flex w-auto -ml-4"
+            columnClassName="pl-4 bg-clip-padding"
+          >
+            {images.map((image, index) => (
+              <button 
+                key={image}
+                className="mb-4 cursor-pointer transform transition-transform hover:scale-[1.01] text-left block w-full p-0 border-0 bg-transparent"
+                onClick={() => handleImageClick(`/library/${image}`)}
+                onMouseEnter={() => setHoveredImage(image)}
+                onMouseLeave={() => setHoveredImage(null)}
+                type="button"
+                aria-label={`Screenshot ${index + 1}`}
+              >
+                <div className="relative rounded-xl overflow-hidden border border-gray-200 shadow-sm bg-white">
+                  <img 
+                    src={`/library/${image}`} 
+                    alt={`Screenshot ${index + 1}`}
+                    className="w-full h-auto object-cover"
+                    loading="lazy"
+                  />
+                  
+                  {/* Use as template button */}
+                  {hoveredImage === image && onUseAsTemplate && (
+                    <div className="absolute bottom-2 right-2 z-10">
+                      <button 
+                        onClick={(e) => {
+                          e.stopPropagation(); // Prevent opening the fullscreen view
+                          onUseAsTemplate(`/library/${image}`);
+                        }}
+                        className="flex items-center gap-1 bg-white/90 hover:bg-white text-gray-800 px-3 py-1.5 rounded-full text-xs font-medium shadow-md transition-all"
+                        type="button"
+                      >
+                        <Wand2 className="w-3 h-3" />
+                        Use as template
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </button>
+            ))}
+          </Masonry>
+          
+          {/* No images state */}
+          {!isLoading && images.length === 0 && (
+            <div className="flex flex-col items-center justify-center h-64 text-gray-500">
+              <p className="text-lg mb-2">No images in library</p>
+              <p className="text-sm">Create some images to see them here</p>
+            </div>
+          )}
+        </div>
+      </div>
+      
+      {/* Fullscreen image modal */}
+      {fullscreenImage && (
+        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
+          <div className="relative max-w-4xl w-full max-h-[90vh]">
+            <button
+              type="button"
+              onClick={() => setFullscreenImage(null)}
+              className="absolute -top-12 right-0 p-2 text-white hover:text-gray-300 transition-colors"
+              aria-label="Close fullscreen view"
+            >
+              <X className="w-6 h-6" />
+            </button>
+            <img 
+              src={fullscreenImage} 
+              alt="Fullscreen view"
+              className="w-full h-auto object-contain max-h-[90vh] rounded-lg"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LibraryPage; 

components/MaterialLibrary.tsx

@@ -0,0 +1,65 @@
+import { Plus } from 'lucide-react';
+
+// Define the type for material object
+interface Material {
+  name: string;
+  file: string;
+  prompt: string;
+}
+
+interface MaterialLibraryProps {
+  onSelectMaterial: (material: Material) => void;
+}
+
+// Only keep the Topographic material from the actual materials bar
+const libraryMaterials: Record<string, Material> = {
+  topographic: {
+    name: "Topographic",
+    file: "topographic.jpeg",
+    prompt: "Transform this sketch into a sculptural form composed of precisely stacked, thin metallic rings or layers. Render it with warm copper/bronze tones with each layer maintaining equal spacing from adjacent layers, creating a topographic map effect. The form should appear to flow and undulate while maintaining the precise parallel structure. Use dramatic studio lighting against a pure black background to highlight the metallic luster and dimensional quality. Render it in a high-end 3D visualization style with perfect definition between each ring layer."
+  }
+};
+
+const MaterialLibrary: React.FC<MaterialLibraryProps> = ({ onSelectMaterial }) => {
+  return (
+    <div className="bg-white p-6 rounded-xl shadow-medium w-full">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-medium text-gray-800" style={{ fontFamily: "'Google Sans Text', sans-serif" }}>Material Library</h2>
+        <button
+          className="text-blue-500 bg-blue-50 hover:bg-blue-100 px-3 py-1 rounded-full text-sm font-medium"
+        >
+          +Add your own Material
+        </button>
+      </div>
+
+      <div className="grid grid-cols-3 gap-3">
+        {Object.entries(libraryMaterials).map(([key, material]) => (
+          <div key={key} className="relative group">
+            <div className="border border-gray-200 overflow-hidden rounded-lg bg-white">
+              <div className="w-full relative" style={{ aspectRatio: '1/1' }}>
+                <img 
+                  src={`/samples/${material.file}`}
+                  alt={`${material.name} material`}
+                  className="w-full h-full object-cover"
+                />
+                <button
+                  onClick={() => onSelectMaterial(material)}
+                  className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 flex items-center justify-center transition-all duration-200"
+                >
+                  <div className="opacity-0 group-hover:opacity-100 bg-white rounded-full p-1 transform translate-y-2 group-hover:translate-y-0 transition-all duration-200">
+                    <Plus className="w-5 h-5 text-blue-500" />
+                  </div>
+                </button>
+              </div>
+              <div className="px-2 py-1 text-center text-sm font-medium border-t border-gray-200">
+                {material.name}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default MaterialLibrary; 

components/OutputOptionsBar.js

@@ -0,0 +1,67 @@
+import { Brush, Download, History, RefreshCw } from 'lucide-react';
+import { useState } from 'react';
+
+// Mini component for consistent button styling
+const ActionButton = ({ icon: Icon, label, onClick, disabled, ariaLabel, onMouseEnter, onMouseLeave }) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className="focus:outline-none group relative flex-shrink-0"
+      aria-label={ariaLabel}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className={`w-16 md:w-14 border overflow-hidden rounded-lg ${
+        disabled
+          ? 'bg-gray-50 border-gray-200 opacity-50 cursor-not-allowed'
+          : 'bg-gray-50 border-gray-200 group-hover:bg-white group-hover:border-gray-300 transition-colors'
+      }`}>
+        {/* Icon container */}
+        <div className="w-full relative flex items-center justify-center py-3 md:py-2"> 
+          <Icon className={`w-5 h-5 ${
+            disabled
+              ? 'text-gray-400'
+              : 'text-gray-400 group-hover:text-gray-700 transition-colors'
+          }`} />
+        </div>
+      </div>
+    </button>
+  );
+};
+
+const OutputOptionsBar = ({ 
+  isLoading, 
+  hasGeneratedContent,
+  onSendToDoodle,
+}) => {
+  const [showDoodleTooltip, setShowDoodleTooltip] = useState(false);
+
+  return (
+    <div className="flex items-center gap-2">
+        
+        {/* "Send to Doodle" button with tooltip */}
+        <div className="relative">
+          <ActionButton
+            icon={Brush}
+            label="Doodle"
+            onClick={onSendToDoodle}
+            disabled={isLoading || !hasGeneratedContent}
+            ariaLabel="Send image back to doodle canvas"
+            onMouseEnter={() => setShowDoodleTooltip(true)}
+            onMouseLeave={() => setShowDoodleTooltip(false)}
+          />
+          {/* Custom Tooltip - Right aligned */}
+          {showDoodleTooltip && (
+            <div className="absolute bottom-full right-0 mb-2 px-3 py-1.5 bg-white border border-gray-200 text-gray-700 text-xs rounded-lg shadow-soft whitespace-nowrap pointer-events-none z-10">
+              Send to Doodle Canvas
+            </div>
+          )}
+        </div>
+        
+    </div>
+  );
+};
+
+export default OutputOptionsBar;

components/StyleSelector.js

@@ -0,0 +1,1571 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { RefreshCw, Plus, Upload, Edit, Trash2, RefreshCcw, HelpCircle, Sparkles, Info, Check, X } from 'lucide-react';
+import AddMaterialModal from './AddMaterialModal.js';
+import { createPortal } from 'react-dom';
+
+// Add custom scrollbar hiding styles
+const scrollbarHideStyles = `
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+  
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .scrollbar-hide {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+`;
+
+// Define default style options with display names and prompts
+const defaultStyleOptions = {
+  material: {
+    name: "Chrome",
+    file: "chrome.jpeg",
+    prompt: "Recreate this doodle as a physical, floating chrome sculpture made of a chromium metal tubes or pipes in a professional studio setting. If it is typography, render it accordingly, but always always have a black background and studio lighting. Render it using Cinema 4D with Octane, using studio lighting against a pure black background. Make it look like a high-end elegant rendering of a sculptural piece. Flat Black background always"
+  },
+  honey: {
+    name: "Honey",
+    file: "honey.jpeg",
+    prompt: "Transform this sketch into a honey. Render it as if made entirely of translucent, golden honey with characteristic viscous drips and flows. Add realistic liquid properties including surface tension, reflections, and light refraction. Render it in Cinema 4D with Octane, using studio lighting against a pure black background. Flat Black background always"
+  },
+  softbody: {
+    name: "Soft Body",
+    file: "softbody.jpeg",
+    prompt: "Convert this drawing / text into a soft body physics render. Render it as if made of a soft, jelly-like material that responds to gravity and motion. Add realistic deformation, bounce, and squash effects typical of soft body dynamics. Use dramatic lighting against a black background to emphasize the material's translucency and surface properties. Render it in Cinema 4D with Octane, using studio lighting against a pure black background. Make it look like a high-end 3D animation frame."
+  },
+  testMaterial: {
+    name: "Surprise Me!",
+    file: "test-material.jpeg",
+    prompt: "Transform this sketch into an experimental material with unique and unexpected properties. Each generation should be different and surprising - it could be crystalline, liquid, gaseous, organic, metallic, or something completely unexpected. Use dramatic studio lighting against a pure black background to showcase the material's unique characteristics. Render it in a high-end 3D style with professional lighting and composition, emphasizing the most interesting and unexpected qualities of the chosen material."
+  }
+};
+
+// Create a mutable copy that will include user-added materials
+export let styleOptions = { ...defaultStyleOptions };
+
+// Define the base prompt template
+const BASE_PROMPT = (materialName) =>
+  `Transform this sketch into a ${materialName.toLowerCase()} material. Render it in a high-end 3D visualization style with professional studio lighting against a pure black background. Make it look like an elegant Cinema 4D and Octane rendering with detailed material properties and characteristics. The final result should be an elegant visualization with perfect studio lighting, crisp shadows, and high-end material definition.`;
+
+// Function to add a material directly to the library
+export const addMaterialToLibrary = (material) => {
+  // Create a unique key for the material based on its name and timestamp
+  const materialKey = `${material.name.toLowerCase().replace(/\s+/g, '_')}_${Date.now()}`;
+  
+  // Create the material object
+  const newMaterial = {
+    name: material.name,
+    prompt: material.prompt || BASE_PROMPT(material.name),
+    thumbnail: material.image || material.thumbnail,
+    originalDescription: material.name,
+    isCustom: true
+  };
+  
+  // Add to styleOptions
+  styleOptions[materialKey] = newMaterial;
+  
+  // Save to localStorage
+  try {
+    const savedMaterials = localStorage.getItem('customMaterials') || '{}';
+    const customMaterials = JSON.parse(savedMaterials);
+    customMaterials[materialKey] = newMaterial;
+    localStorage.setItem('customMaterials', JSON.stringify(customMaterials));
+  } catch (error) {
+    console.error('Error saving material to localStorage:', error);
+  }
+  
+  // Return the key so it can be selected
+  return materialKey;
+};
+
+// --- Updated function to use /api/enhance-prompt ---
+const enhanceMaterialDetails = async (materialDescription) => {
+  console.log("Enhancing prompt for:", materialDescription);
+  const basePrompt = BASE_PROMPT(materialDescription); // Generate the base prompt to send
+
+  try {
+    const response = await fetch("/api/enhance-prompt", { // Call the correct API endpoint
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        materialName: materialDescription, // Send the user's input as materialName
+        basePrompt: basePrompt             // Send the generated base prompt
+      })
+    });
+
+    if (!response.ok) {
+      // Handle API errors (like 500)
+      throw new Error(`API responded with status ${response.status}`);
+    }
+
+    const data = await response.json();
+    console.log("Enhanced prompt data:", data);
+
+    // Use the response from /api/enhance-prompt
+    // The API itself has fallback logic if JSON parsing fails,
+    // returning { enhancedPrompt: basePrompt, suggestedName: materialName }
+    if (data.enhancedPrompt && data.suggestedName) {
+      return {
+        name: data.suggestedName,
+        prompt: data.enhancedPrompt
+      };
+    } else {
+      // This case might occur if the API returns unexpected JSON structure
+      throw new Error('Invalid enhancement data received from /api/enhance-prompt');
+    }
+
+  } catch (error) {
+    console.error("Error enhancing prompt:", error);
+
+    // Fallback if the fetch fails or response is totally invalid
+    const capitalizedName = materialDescription
+      .split(' ')
+      .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+      .join(' ');
+
+    return {
+      name: `${capitalizedName} Style`, // Slightly different fallback name
+      prompt: basePrompt // Use the original base prompt as fallback
+    };
+  }
+};
+// --- End of updated function ---
+
+// Function to get prompt based on style mode
+export const getPromptForStyle = (styleMode) => {
+  if (!styleMode || !styleOptions[styleMode]) {
+    return styleOptions.material.prompt;
+  }
+  return styleOptions[styleMode].prompt || styleOptions.material.prompt;
+};
+
+// Replace with a simpler generatePromptForMaterial function
+export const generatePromptForMaterial = (materialName) => {
+  return `Transform this sketch into a ${materialName.toLowerCase()} material. Render it in a high-end 3D visualization style with professional studio lighting against a pure black background. Make it look like a elegant Cinema 4D and octane rendering with detailed material properties and characteristics.`;
+};
+
+const StyleSelector = ({ styleMode, setStyleMode, handleGenerate }) => {
+  const [showAddMaterialModal, setShowAddMaterialModal] = useState(false);
+  const [newMaterialName, setNewMaterialName] = useState('');
+  const [isGeneratingThumbnail, setIsGeneratingThumbnail] = useState(false);
+  const [useCustomImage, setUseCustomImage] = useState(false);
+  const [customImagePreview, setCustomImagePreview] = useState('');
+  const [customImageFile, setCustomImageFile] = useState(null);
+  const fileInputRef = useRef(null);
+  const [recentlyAdded, setRecentlyAdded] = useState(null);
+  const [customPrompt, setCustomPrompt] = useState('');
+  const [showCustomPrompt, setShowCustomPrompt] = useState(false);
+  const [previewThumbnail, setPreviewThumbnail] = useState('');
+  const [isGeneratingPreview, setIsGeneratingPreview] = useState(false);
+  const [materials, setMaterials] = useState(defaultStyleOptions);
+  const [generatedMaterialName, setGeneratedMaterialName] = useState('');
+  const [generatedPrompt, setGeneratedPrompt] = useState('');
+  const [isGeneratingText, setIsGeneratingText] = useState(false);
+  const [showMaterialNameEdit, setShowMaterialNameEdit] = useState(false);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [showPromptInfo, setShowPromptInfo] = useState(null);
+  const [promptPopoverPosition, setPromptPopoverPosition] = useState({ top: 0, left: 0 });
+  const styleSelectorRef = useRef(null);
+  const [editingPrompt, setEditingPrompt] = useState(null);
+  const [editedPromptText, setEditedPromptText] = useState('');
+  const [hasPromptChanged, setHasPromptChanged] = useState(false);
+  const [generatedThumbnail, setGeneratedThumbnail] = useState(null);
+  const [thumbnailError, setThumbnailError] = useState(null);
+
+  // Load custom materials from local storage on component mount
+  useEffect(() => {
+    loadCustomMaterials();
+  }, []);
+
+  // Add effect to update materials state when styleOptions changes
+  useEffect(() => {
+    // This ensures the UI reflects changes to styleOptions made from outside this component
+    setMaterials({...styleOptions});
+  }, [styleOptions]);
+  
+  // Extract loadCustomMaterials into its own named function
+  const loadCustomMaterials = () => {
+    try {
+      const savedMaterials = localStorage.getItem('customMaterials');
+      if (savedMaterials) {
+        const parsedMaterials = JSON.parse(savedMaterials);
+        // Update both the styleOptions and the state
+        const updatedMaterials = { ...defaultStyleOptions, ...parsedMaterials };
+        styleOptions = updatedMaterials;
+        setMaterials(updatedMaterials);
+        console.log('Loaded custom materials from local storage');
+      }
+    } catch (error) {
+      console.error('Error loading custom materials:', error);
+    }
+  };
+
+  // Modify the useEffect that handles material descriptions
+  useEffect(() => {
+    const delayedGeneration = async () => {
+      // Skip if no material name or if we're in edit mode
+      if (!newMaterialName.trim() || recentlyAdded) return;
+
+      // ONLY set text generation loading state
+      setIsGeneratingText(true);
+
+      try {
+        // Use our updated enhanceMaterialDetails function (which now calls /api/enhance-prompt)
+        const enhanced = await enhanceMaterialDetails(newMaterialName);
+        console.log("Received enhanced data in useEffect:", enhanced);
+        setGeneratedMaterialName(enhanced.name);
+        setGeneratedPrompt(enhanced.prompt);
+
+        // DO NOT generate thumbnail here
+      } catch (error) {
+        console.error('Error in material generation (useEffect):', error);
+
+        // Fall back to basic generation if enhanceMaterialDetails fails catastrophically
+        // (This shouldn't happen often as enhanceMaterialDetails has its own internal fallback)
+        const capitalizedName = newMaterialName
+          .split(' ')
+          .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+          .join(' ');
+        setGeneratedMaterialName(`${capitalizedName} Style`);
+        setGeneratedPrompt(BASE_PROMPT(newMaterialName));
+      } finally {
+        setIsGeneratingText(false);
+      }
+    };
+
+    // Delay generation to avoid too many API calls while typing
+    const timeoutId = setTimeout(delayedGeneration, 1500);
+    return () => clearTimeout(timeoutId);
+  }, [newMaterialName, recentlyAdded]); // Dependencies remain the same
+
+  // Helper function to resize and compress image data
+  const compressImage = (dataUrl, maxWidth = 200) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        // Create a canvas to resize the image
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Calculate new dimensions
+        let width = img.width;
+        let height = img.height;
+        
+        if (width > maxWidth) {
+          height = (height * maxWidth) / width;
+          width = maxWidth;
+        }
+        
+        canvas.width = width;
+        canvas.height = height;
+        
+        // Draw and export as JPEG with lower quality
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/jpeg', 0.7));
+      };
+      img.src = dataUrl;
+    });
+  };
+
+  // Function to debug storage usage
+  const checkStorageUsage = () => {
+    let totalSize = 0;
+    let itemCount = 0;
+    
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      const value = localStorage.getItem(key);
+      const size = (key.length + value.length) * 2; // Approximate size in bytes (UTF-16)
+      totalSize += size;
+      itemCount++;
+      console.log(`Item: ${key}, Size: ${(size / 1024).toFixed(2)}KB`);
+    }
+    
+    console.log(`Total localStorage usage: ${(totalSize / 1024 / 1024).toFixed(2)}MB, Items: ${itemCount}`);
+    return totalSize;
+  };
+
+  const handleAddMaterial = () => {
+    resetMaterialForm();
+    setRecentlyAdded(null);
+    setShowAddMaterialModal(true);
+  };
+
+  const handleCloseModal = () => {
+    setShowAddMaterialModal(false);
+    setNewMaterialName('');
+    setUseCustomImage(false);
+    setCustomImagePreview('');
+    setCustomImageFile(null);
+    setCustomPrompt('');
+    setShowCustomPrompt(false);
+    setPreviewThumbnail('');
+  };
+
+  // Handle clicking outside of the modal to close it
+  const handleClickOutsideModal = (e) => {
+    // If the clicked element is the backdrop (has the modalBackdrop class)
+    if (e.target.classList.contains('modalBackdrop')) {
+      handleCloseModal();
+    }
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    if (!file.type.startsWith('image/')) {
+      alert('Please select an image file');
+      return;
+    }
+    
+    const reader = new FileReader();
+    reader.onload = () => {
+      // When the file is loaded, create a temporary image to extract a square crop
+      const img = new Image();
+      img.onload = () => {
+        // Create a canvas element to crop the image to a square
+        const canvas = document.createElement('canvas');
+        // Determine the size of the square (min of width and height)
+        const size = Math.min(img.width, img.height);
+        canvas.width = size;
+        canvas.height = size;
+        
+        // Calculate the position to start drawing to center the crop
+        const offsetX = (img.width - size) / 2;
+        const offsetY = (img.height - size) / 2;
+        
+        // Draw the cropped image to the canvas
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, offsetX, offsetY, size, size, 0, 0, size, size);
+        
+        // Convert the canvas to a data URL
+        const croppedImageDataUrl = canvas.toDataURL(file.type);
+        setCustomImagePreview(croppedImageDataUrl);
+        setCustomImageFile(file);
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const triggerFileInput = () => {
+    fileInputRef.current.click();
+  };
+
+  const handleGenerateDefaultPrompt = () => {
+    if (!newMaterialName.trim()) return;
+    
+    // Generate default prompt based on material name
+    const defaultPrompt = generatePromptForMaterial(newMaterialName);
+    setCustomPrompt(defaultPrompt);
+    
+    // Clear the preview so it will regenerate with the new prompt
+    setPreviewThumbnail('');
+  };
+
+  // Add a helper function to read file as data URL
+  const readFileAsDataURL = (file) => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  };
+
+  // Option 1: Add function to compress images more aggressively before storage
+  const compressImageForStorage = async (dataUrl) => {
+    // Use a smaller max width for storage
+    const maxWidth = 100; // Reduce from 200 to 100
+    const quality = 0.5; // Reduce quality from 0.7 to 0.5
+    
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        let width = img.width;
+        let height = img.height;
+        
+        if (width > maxWidth) {
+          height = (height * maxWidth) / width;
+          width = maxWidth;
+        }
+        
+        canvas.width = width;
+        canvas.height = height;
+        
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/jpeg', quality));
+      };
+      img.src = dataUrl;
+    });
+  };
+
+  // Option 2: Add function to manage storage limits
+  const manageStorageLimit = async (newMaterial) => {
+    try {
+      // Get current materials
+      const savedMaterials = localStorage.getItem('customMaterials');
+      if (!savedMaterials) return;
+      
+      const parsedMaterials = JSON.parse(savedMaterials);
+      const customKeys = Object.keys(parsedMaterials).filter(key => 
+        !Object.keys(defaultStyleOptions).includes(key));
+      
+      // If we have too many custom materials, remove the oldest ones
+      if (customKeys.length > 4) { // Limit to 5 custom materials
+        // Sort by creation time (if you have that data) or just take the first ones
+        const keysToRemove = customKeys.slice(0, customKeys.length - 4);
+        
+        keysToRemove.forEach(key => {
+          delete parsedMaterials[key];
+        });
+        
+        // Save the reduced set back to localStorage
+        localStorage.setItem('customMaterials', JSON.stringify(parsedMaterials));
+      }
+    } catch (error) {
+      console.error('Error managing storage limit:', error);
+    }
+  };
+
+  // Add a function to reset the form fields
+  const resetMaterialForm = () => {
+    setNewMaterialName('');
+    setGeneratedMaterialName('');
+    setGeneratedPrompt('');
+    setCustomPrompt('');
+    setPreviewThumbnail('');
+    setUseCustomImage(false);
+    setCustomImagePreview('');
+    setShowCustomPrompt(false);
+  };
+
+  // Update the openAddMaterialModal function to reset form on open
+  const openAddMaterialModal = () => {
+    resetMaterialForm();
+    setRecentlyAdded(null);
+    setShowAddMaterialModal(true);
+  };
+
+  // Modify handleEditMaterial to handle all material properties
+  const handleEditMaterial = (materialId) => {
+    const material = materials[materialId];
+    if (!material) return;
+    
+    // Set form fields with existing data
+    setNewMaterialName(material.originalDescription || material.name); // Fallback to name if no original description
+    setGeneratedMaterialName(material.name || '');
+    
+    // Set prompt
+    const materialPrompt = material.prompt || '';
+    setGeneratedPrompt(materialPrompt);
+    setCustomPrompt(materialPrompt);
+    setShowCustomPrompt(true); // Show the editable prompt by default
+    
+    // Set thumbnail
+    if (material.thumbnail) {
+      setPreviewThumbnail(material.thumbnail);
+      setUseCustomImage(true); // Mark as custom image to prevent regeneration
+    } else if (material.file) {
+      setPreviewThumbnail(`/samples/${material.file}`);
+      setUseCustomImage(true);
+    }
+    
+    // Enable name editing by default
+    setShowMaterialNameEdit(true);
+    
+    setRecentlyAdded(materialId);
+    setShowAddMaterialModal(true);
+  };
+
+  // Add a function to manually refresh the thumbnail
+  const handleRefreshThumbnail = async (prompt) => {
+    if (!newMaterialName.trim() || useCustomImage) {
+      console.log('Skipping thumbnail refresh: No material name or using custom image');
+      return;
+    }
+    
+    setIsGeneratingPreview(true);
+    
+    try {
+      const promptToUse = showCustomPrompt && customPrompt.trim()
+        ? customPrompt
+        : generatePromptForMaterial(newMaterialName);
+      
+      // Use the dedicated thumbnail endpoint instead
+      const response = await fetch("/api/generate-thumbnail", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          prompt: promptToUse,
+          referenceImageData: DEFAULT_SHAPE_DATA_URL
+        }),
+      });
+      
+      if (!response.ok) {
+        throw new Error(`API error: ${response.status} ${response.statusText}`);
+      }
+      
+      const data = await response.json();
+      console.log('Thumbnail API response:', {
+        success: data.success,
+        hasImageData: !!data.imageData,
+        error: data.error
+      });
+      
+      if (data.success && data.imageData) {
+        // Set the preview thumbnail
+        setPreviewThumbnail(`data:image/jpeg;base64,${data.imageData}`);
+        console.log('Successfully set new thumbnail');
+      } else {
+        throw new Error(data.error || 'No image data received');
+      }
+    } catch (error) {
+      console.error("Error generating preview thumbnail:", error);
+      
+      // If we have a previous thumbnail, keep it
+      if (previewThumbnail) {
+        console.log('Keeping previous thumbnail after error');
+      } else {
+        // Otherwise generate a fallback
+        console.log('Using fallback thumbnail after API error');
+        const fallbackThumbnail = createFallbackThumbnail(newMaterialName);
+        setPreviewThumbnail(fallbackThumbnail);
+      }
+      
+      // Show a brief notification about the error
+      const errorToast = document.createElement('div');
+      errorToast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
+      errorToast.innerText = 'Thumbnail generation failed. Using fallback.';
+      document.body.appendChild(errorToast);
+      
+      // Remove the notification after 3 seconds
+      setTimeout(() => {
+        if (document.body.contains(errorToast)) {
+          document.body.removeChild(errorToast);
+        }
+      }, 3000);
+      
+    } finally {
+      setIsGeneratingPreview(false);
+    }
+  };
+
+  // Add a function to manually refresh the text
+  const handleRefreshText = async () => {
+    if (!newMaterialName.trim()) return;
+    
+    setIsGeneratingText(true);
+    
+    try {
+      // ... existing code for text generation ...
+      // This can reuse the same code from the useEffect
+    } catch (error) {
+      console.error("Error generating material name and prompt:", error);
+    } finally {
+      setIsGeneratingText(false);
+    }
+  };
+
+  // Modify handleNewMaterialDescription to only handle preview generation
+  const handleNewMaterialDescription = async (description) => {
+    if (!description.trim()) return;
+    
+    setIsGeneratingText(true);
+    setIsGeneratingPreview(true);
+    
+    // Keep track of whether we've set a thumbnail yet
+    let thumbnailSet = false;
+    
+    try {
+      // First, get the enhanced description
+      console.log(`Generating enhanced description for: "${description}"`);
+      const enhanced = await enhanceMaterialDetails(description);
+      setGeneratedMaterialName(enhanced.name);
+      setGeneratedPrompt(enhanced.prompt);
+      
+      // Generate thumbnail with the enhanced prompt
+      if (!useCustomImage) {
+        try {
+          console.log(`Generating thumbnail with prompt: "${enhanced.prompt.substring(0, 100)}..."`);
+          
+          // Set a timeout to ensure we don't wait too long for the API
+          const thumbnailPromise = fetch("/api/generate", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              prompt: enhanced.prompt,
+            }),
+          });
+          
+          // Add a timeout to the thumbnail generation
+          const timeoutPromise = new Promise((_, reject) => 
+            setTimeout(() => reject(new Error('Thumbnail generation timed out')), 12000)
+          );
+          
+          // Race the thumbnail generation against the timeout
+          const response = await Promise.race([thumbnailPromise, timeoutPromise]);
+          
+          if (!response.ok) {
+            throw new Error(`API returned status ${response.status}`);
+          }
+          
+          const data = await response.json();
+          
+          if (data.success && data.imageData) {
+            console.log('Successfully received thumbnail data');
+            setPreviewThumbnail(`data:image/jpeg;base64,${data.imageData}`);
+            thumbnailSet = true;
+          } else {
+            throw new Error(data.error || 'No image data received');
+          }
+        } catch (thumbnailError) {
+          console.error("Error generating thumbnail:", thumbnailError);
+          
+          // Fall back to a static thumbnail if we couldn't generate one
+          console.log('Using fallback static thumbnail');
+          
+          // Create a colored square as a fallback thumbnail
+          const fallbackThumbnail = createFallbackThumbnail(description);
+          setPreviewThumbnail(fallbackThumbnail);
+          thumbnailSet = true;
+        }
+      }
+    } catch (error) {
+      console.error("Error in material generation:", error);
+      
+      // Set fallback values if we failed to generate enhanced content
+      const capitalizedName = description
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+        
+      setGeneratedMaterialName(`${capitalizedName} Material`);
+      setGeneratedPrompt(generatePromptForMaterial(description));
+      
+      // If we haven't set a thumbnail yet, create a fallback one
+      if (!thumbnailSet && !useCustomImage) {
+        console.log('Using fallback static thumbnail after error');
+        const fallbackThumbnail = createFallbackThumbnail(description);
+        setPreviewThumbnail(fallbackThumbnail);
+      }
+    } finally {
+      setIsGeneratingText(false);
+      setIsGeneratingPreview(false);
+    }
+  };
+
+  // Add a function to create a fallback thumbnail
+  const createFallbackThumbnail = (text) => {
+    // Generate a consistent color from the text
+    let hash = 0;
+    for (let i = 0; i < text.length; i++) {
+      hash = text.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    
+    // Convert hash to RGB color
+    const r = (hash & 0xFF0000) >> 16;
+    const g = (hash & 0x00FF00) >> 8;
+    const b = hash & 0x0000FF;
+    
+    // Create a small canvas to generate the thumbnail
+    const canvas = document.createElement('canvas');
+    canvas.width = 100;
+    canvas.height = 100;
+    const ctx = canvas.getContext('2d');
+    
+    // Create gradient background
+    const gradient = ctx.createLinearGradient(0, 0, 100, 100);
+    gradient.addColorStop(0, `rgb(${r}, ${g}, ${b})`);
+    gradient.addColorStop(1, `rgb(${b}, ${r}, ${g})`);
+    
+    // Fill the background
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, 100, 100);
+    
+    // Add text first letter
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.font = 'bold 48px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(text.charAt(0).toUpperCase(), 50, 50);
+    
+    // Return as data URL
+    return canvas.toDataURL('image/jpeg', 0.9);
+  };
+
+  const handleCreateMaterial = async () => {
+    if (!newMaterialName.trim()) return;
+    
+    // Generate a unique ID for the material
+    const materialId = recentlyAdded || `custom_${Date.now()}`;
+    
+    // Use the generated material name instead of the description
+    const displayName = generatedMaterialName || `${newMaterialName} Material`;
+    
+    // Use the generated or custom prompt
+    const materialPrompt = showCustomPrompt ? customPrompt : (generatedPrompt || generatePromptForMaterial(newMaterialName));
+    
+    // Create the new material object
+    const newMaterial = {
+      name: displayName,
+      prompt: materialPrompt,
+      thumbnail: useCustomImage ? customImagePreview : previewThumbnail,
+      originalDescription: newMaterialName,
+      isCustom: true
+    };
+    
+    // Update both our state and storage references
+    const updatedMaterials = { ...materials, [materialId]: newMaterial };
+    
+    try {
+      // Apply compression and save to localStorage
+      if (useCustomImage && customImagePreview) {
+        newMaterial.thumbnail = await compressImageForStorage(customImagePreview);
+      } else if (previewThumbnail) {
+        newMaterial.thumbnail = await compressImageForStorage(previewThumbnail);
+      }
+      
+      await manageStorageLimit(newMaterial);
+      localStorage.setItem('customMaterials', JSON.stringify(updatedMaterials));
+      
+      // Update state and global reference
+      styleOptions = updatedMaterials;
+      setMaterials(updatedMaterials);
+      
+      // Close the modal
+      setShowAddMaterialModal(false);
+      
+      // Reset form
+      resetMaterialForm();
+      
+      // Auto-select the newly created material
+      setStyleMode(materialId);
+      
+      // Trigger generation with the new material
+      if (handleGenerate && typeof handleGenerate === 'function') {
+        setTimeout(() => handleGenerate(), 100); // Small delay to ensure styleMode is updated
+      }
+      
+      console.log("Material created successfully:", materialId);
+    } catch (error) {
+      console.error('Storage error:', error);
+      alert("Couldn't save your material. Please try clearing some browser data.");
+    }
+  };
+
+  const handleDeleteMaterial = (event, key) => {
+    event.stopPropagation(); // Prevent triggering the parent button's onClick
+    
+    // Only allow deleting custom materials
+    if (styleOptions[key]?.isCustom) {
+      if (window.confirm(`Are you sure you want to delete the "${styleOptions[key].name}" material?`)) {
+        // If currently selected, switch to default material
+        if (styleMode === key) {
+          setStyleMode('material');
+        }
+        
+        // Delete the material
+        const { [key]: deleted, ...remaining } = styleOptions;
+        const updatedMaterials = { ...defaultStyleOptions, ...remaining };
+        styleOptions = updatedMaterials;
+        setMaterials(updatedMaterials);
+        
+        // Save the updated materials
+        const customMaterials = {};
+        Object.entries(remaining).forEach(([k, v]) => {
+          if (!defaultStyleOptions[k]) {
+            customMaterials[k] = v;
+          }
+        });
+        localStorage.setItem('customMaterials', JSON.stringify(customMaterials));
+      }
+    }
+  };
+
+  // Add a function to sort materials in the desired order
+  const getSortedMaterials = (materials) => {
+    // For mobile view, we'll handle the order in the render function
+    // This function now only handles desktop order
+    
+    // 1. Get original materials (excluding Test Material)
+    const originalMaterials = Object.entries(defaultStyleOptions)
+      .filter(([key]) => key !== 'testMaterial')
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+    // 2. Get custom/locally saved materials (excluding Test Material)
+    const customMaterials = Object.entries(materials)
+      .filter(([key]) => !defaultStyleOptions[key] && key !== 'testMaterial')
+      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+
+    // 3. Get Test Material
+    const testMaterial = materials.testMaterial ? { testMaterial: materials.testMaterial } : {};
+
+    // Combine in desired order
+    return {
+      ...originalMaterials,
+      ...customMaterials,
+      ...testMaterial
+    };
+  };
+
+  // New function to separate materials for mobile view
+  const getMobileSortedElements = (materials, styleMode, handleAddMaterial, handleGenerate) => {
+    // 1. Extract all materials except testMaterial (Surprise Me)
+    const regularMaterials = Object.entries(materials)
+      .filter(([key]) => key !== 'testMaterial')
+      .map(([key, material]) => ({ key, material }));
+    
+    // 2. Get the Surprise Me button if it exists
+    const testMaterial = materials.testMaterial ? { key: 'testMaterial', material: materials.testMaterial } : null;
+    
+    return {
+      addButton: handleAddMaterial,
+      materials: regularMaterials,
+      surpriseButton: testMaterial
+    };
+  };
+
+  // Add near your existing compression functions
+  const compressImageForAPI = async (dataUrl) => {
+    // Use a moderate size to ensure API can handle it
+    const maxWidth = 800;
+    const quality = 0.7;
+    
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        let width = img.width;
+        let height = img.height;
+        
+        if (width > maxWidth) {
+          height = (height * maxWidth) / width;
+          width = maxWidth;
+        }
+        
+        canvas.width = width;
+        canvas.height = height;
+        
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL('image/jpeg', quality));
+      };
+      img.src = dataUrl;
+    });
+  };
+
+  // Fix the reference image upload function
+  const handleReferenceImageUpload = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    
+    // Clear recentlyAdded to ensure we're not in edit mode
+    setRecentlyAdded(null);
+    
+    // Set loading states
+    setIsGeneratingText(true);
+    setIsGeneratingPreview(true);
+    
+    try {
+      // Process the image for preview
+      const reader = new FileReader();
+      reader.onloadend = async (event) => {
+        const imageDataUrl = event.target.result;
+        
+        // Set UI state for image
+        setCustomImagePreview(imageDataUrl);
+        setUseCustomImage(true);
+        
+        // Get custom API key if it exists
+        const customApiKey = localStorage.getItem('customApiKey');
+        
+        // Call the visual-enhance-prompt API
+        try {
+          const compressedImage = await compressImageForAPI(imageDataUrl);
+          
+          const response = await fetch('/api/visual-enhance-prompt', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ 
+              image: compressedImage,
+              customApiKey,
+              basePrompt: 'Transform this sketch into a material with professional studio lighting against a pure black background. Render it in Cinema 4D with Octane for a high-end 3D visualization.'
+            }),
+          });
+          
+          console.log('API response status:', response.status);
+          
+          if (!response.ok) {
+            const errorText = await response.text().catch(() => '');
+            console.error('API error details:', errorText);
+            console.error(`API returned ${response.status}`);
+            
+            // Set fallback values right here when the API response is not OK
+            setGeneratedMaterialName('Reference Material');
+            setNewMaterialName('Reference Material');
+            setGeneratedPrompt('Transform this reference into a 3D rendering with dramatic lighting on a black background.');
+            setCustomPrompt('Transform this reference into a 3D rendering with dramatic lighting on a black background.');
+            setShowCustomPrompt(true);
+          } else {
+            const data = await response.json();
+            
+            if (data.enhancedPrompt && data.suggestedName) {
+              // Update the material information
+              setGeneratedMaterialName(data.suggestedName);
+              setNewMaterialName(data.suggestedName);
+              setGeneratedPrompt(data.enhancedPrompt);
+              setCustomPrompt(data.enhancedPrompt);
+              setShowCustomPrompt(true);
+              
+              // If we have imageData from the API, use it as the preview
+              if (data.imageData) {
+                setPreviewThumbnail(`data:image/jpeg;base64,${data.imageData}`);
+                setUseCustomImage(false); // Use the generated thumbnail instead of the raw image
+              }
+            } else {
+              // Handle case where API returns success but missing data
+              console.error('API response missing enhancedPrompt or suggestedName fields');
+              setGeneratedMaterialName('Reference Material');
+              setNewMaterialName('Reference Material');
+              setGeneratedPrompt('Transform this reference into a 3D rendering with dramatic lighting on a black background.');
+              setCustomPrompt('Transform this reference into a 3D rendering with dramatic lighting on a black background.');
+              setShowCustomPrompt(true);
+            }
+          }
+        } catch (error) {
+          console.error('Error analyzing reference image:', error);
+          
+          // Show specific error message for quota exceeded
+          if (error.message?.includes('429')) {
+            alert('API quota exceeded. Please try again later or add your own API key in settings.');
+          }
+          
+          // Set fallback values
+          setGeneratedMaterialName('Reference Material');
+          setNewMaterialName('Reference Material');
+          setGeneratedPrompt('Transform this reference into a 3D rendering with dramatic lighting on a black background.');
+          setCustomPrompt('Transform this reference into a 3D rendering with dramatic lighting on a black background.');
+          setShowCustomPrompt(true);
+        } finally {
+          setIsGeneratingText(false);
+          setIsGeneratingPreview(false);
+        }
+      };
+      
+      reader.readAsDataURL(file);
+    } catch (error) {
+      console.error('Error processing image:', error);
+      setIsGeneratingText(false);
+      setIsGeneratingPreview(false);
+    }
+  };
+
+  // Add this near the top of the component
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      // Close if clicking outside the popover and the style selector
+      if (showPromptInfo && 
+          !event.target.closest('.prompt-popover') && 
+          !event.target.closest('.material-edit-button')) {
+        setShowPromptInfo(null);
+        setEditingPrompt(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showPromptInfo]);
+
+  // Update the calculatePopoverPosition function
+  const calculatePopoverPosition = (buttonElement, materialKey) => {
+    if (!buttonElement) return;
+    
+    // If clicking the same material that's already open, close it
+    if (showPromptInfo === materialKey) {
+      setShowPromptInfo(null);
+      setEditingPrompt(null);
+      setEditedPromptText('');
+      setHasPromptChanged(false);
+      return;
+    }
+
+    const rect = buttonElement.getBoundingClientRect();
+    const popoverWidth = 300;
+
+    setPromptPopoverPosition({
+      top: rect.top - 10,
+      left: rect.left + (rect.width / 2) - (popoverWidth / 2)
+    });
+    
+    // Set which material's prompt to show
+    setShowPromptInfo(materialKey);
+    
+    // Reset editing state
+    setEditingPrompt(null);
+    setEditedPromptText(materials[materialKey]?.prompt || '');
+    setHasPromptChanged(false);
+  };
+
+  // Add function to handle text changes in the textarea
+  const handlePromptTextChange = (e) => {
+    const newText = e.target.value;
+    setEditedPromptText(newText);
+    
+    // Check if the text has changed from the original
+    if (editingPrompt && materials[editingPrompt]) {
+      const originalPrompt = materials[editingPrompt].prompt || '';
+      setHasPromptChanged(newText !== originalPrompt);
+    }
+  };
+
+  // Add function to save edited prompt
+  const saveEditedPrompt = () => {
+    if (!editingPrompt || !editedPromptText.trim() || !hasPromptChanged) return;
+    
+    try {
+      // Create updated material with new prompt
+      const updatedMaterial = {
+        ...materials[editingPrompt],
+        prompt: editedPromptText.trim()
+      };
+      
+      // Update materials state and styleOptions
+      const updatedMaterials = {
+        ...materials,
+        [editingPrompt]: updatedMaterial
+      };
+      
+      setMaterials(updatedMaterials);
+      styleOptions = updatedMaterials;
+      
+      // Save to localStorage (only custom materials)
+      const customMaterials = {};
+      for (const [k, v] of Object.entries(updatedMaterials)) {
+        if (v.isCustom) {
+          customMaterials[k] = v;
+        }
+      }
+      
+      localStorage.setItem('customMaterials', JSON.stringify(customMaterials));
+      
+      // Close edit mode
+      setEditingPrompt(null);
+      setShowPromptInfo(null);
+      setHasPromptChanged(false);
+    } catch (error) {
+      console.error('Error saving edited prompt:', error);
+    }
+  };
+
+  // Add function to cancel editing
+  const cancelEditing = () => {
+    setEditingPrompt(null);
+    setEditedPromptText('');
+    setHasPromptChanged(false);
+  };
+
+  const handleGenerateThumbnail = useCallback(async () => {
+    // Prevent generation if text is still generating or already previewing
+    if (isGeneratingText || isGeneratingPreview || !generatedPrompt) return;
+
+    console.log('Starting thumbnail generation...');
+    setIsGeneratingPreview(true);
+    setThumbnailError(null); // Clear previous errors
+
+    // --- CONFIRM THE PROMPT BEING USED ---
+    console.log('Using prompt for thumbnail:', generatedPrompt.substring(0, 100) + '...');
+    // --- You can check this log in your browser console ---
+
+    try {
+      // Fetch the thumbnail from the API endpoint
+      const response = await fetch("/api/generate-thumbnail", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        // Send the CURRENT generatedPrompt and the default shape
+        body: JSON.stringify({
+          prompt: generatedPrompt, // <-- Uses the state variable!
+          referenceImageData: DEFAULT_SHAPE_DATA_URL // Base shape image
+        }),
+      });
+
+      if (!response.ok) {
+        // Handle HTTP errors from the API
+        const errorData = await response.json().catch(() => ({ error: 'Failed to parse error response' }));
+        throw new Error(`API Error (${response.status}): ${errorData.error || 'Unknown error'}`);
+      }
+
+      const data = await response.json();
+
+      if (data.success && data.imageData) {
+        // Update state with the new thumbnail data
+        setGeneratedThumbnail(`data:image/png;base64,${data.imageData}`);
+        console.log('Thumbnail generated successfully.');
+      } else {
+        // Handle cases where API reports success=false or missing data
+        throw new Error(data.error || 'Thumbnail generation failed: No image data received.');
+      }
+    } catch (error) {
+      console.error("Error generating thumbnail:", error);
+      setThumbnailError(error.message || 'An unexpected error occurred during thumbnail generation.');
+      setGeneratedThumbnail(null); // Clear any previous thumbnail on error
+    } finally {
+      setIsGeneratingPreview(false); // Ensure loading state is turned off
+    }
+  }, [generatedPrompt, isGeneratingText, isGeneratingPreview]); // Dependencies
+
+  return (
+    <div className="w-full" ref={styleSelectorRef}>
+      {/* Inject scrollbar hiding CSS */}
+      <style dangerouslySetInnerHTML={{ __html: scrollbarHideStyles }} />
+      
+      {/* Mobile View */}
+      <div className="md:hidden w-full">
+        <div className="overflow-x-auto pb-2 scrollbar-hide">
+          <div className="flex flex-nowrap gap-2 pr-2" style={{ minWidth: 'min-content' }}>
+            {/* Add Material Button (First) */}
+            <button
+              onClick={handleAddMaterial}
+              type="button"
+              aria-label="Add new material"
+              className="focus:outline-none group flex-shrink-0"
+              style={{ scrollSnapAlign: 'start' }}
+            >
+              <div className="w-20 border border-dashed border-gray-200 overflow-hidden rounded-xl bg-gray-50 flex flex-col group-hover:bg-white group-hover:border-gray-300">
+                <div className="w-full relative flex-1 flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
+                  <Plus className="w-6 h-6 text-gray-500 group-hover:text-gray-600" />
+                </div>
+                <div className="px-1 py-1 text-left text-xs font-medium bg-gray-50 text-gray-500 w-full group-hover:bg-white group-hover:text-gray-600">
+                  <div className="truncate">
+                    Add Material
+                  </div>
+                </div>
+              </div>
+            </button>
+            
+            {/* Regular Materials (Middle) */}
+            {Object.entries(materials)
+              .filter(([key]) => key !== 'testMaterial')
+              .map(([key, { name, file, imageData, thumbnail, isCustom, prompt }]) => (
+                <button
+                  key={key}
+                  onClick={async () => {
+                    const isSameMaterial = styleMode === key;
+                    if (!isSameMaterial) {
+                      setStyleMode(key);
+                    } else {
+                      handleGenerate();
+                    }
+                  }}
+                  type="button"
+                  aria-label={`Select ${name} style`}
+                  aria-pressed={styleMode === key}
+                  className="focus:outline-none relative group flex-shrink-0"
+                  style={{ scrollSnapAlign: 'start' }}
+                >
+                  <div className={`w-20 border overflow-hidden rounded-xl ${
+                    styleMode === key
+                      ? 'border-blue-500 bg-white'
+                      : 'bg-gray-50 border-gray-200 group-hover:bg-white group-hover:border-gray-300'
+                  }`}>
+                    <div className="w-full relative" style={{ aspectRatio: '1/1' }}>
+                      <img 
+                        src={imageData ? `data:image/jpeg;base64,${imageData}` : (file ? `/samples/${file}` : thumbnail || '')}
+                        alt={`${name} style example`}
+                        className="w-full h-full object-cover"
+                        onError={(e) => {
+                          console.error(`Error loading thumbnail for ${name} from ${e.target.src}`);
+                          // Provide a base64 encoded 1x1 transparent PNG as fallback
+                          e.target.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+                        }}
+                      />
+                      <div className="absolute inset-0">
+                        <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              calculatePopoverPosition(e.currentTarget, key);
+                            }}
+                            className="material-edit-button absolute top-1 right-1 bg-gray-800 bg-opacity-70 hover:bg-opacity-90 text-white rounded-full w-5 h-5 flex items-center justify-center transition-opacity"
+                            aria-label={isCustom ? `Edit ${name} material` : `View ${name} prompt`}
+                          >
+                            <Info className="w-2.5 h-2.5" />
+                          </button>
+                          
+                          {isCustom && (
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDeleteMaterial(e, key);
+                              }}
+                              className="absolute top-1 left-1 bg-gray-800 bg-opacity-70 hover:bg-opacity-90 text-white rounded-full w-5 h-5 flex items-center justify-center transition-opacity"
+                              aria-label={`Delete ${name} material`}
+                            >
+                              <Trash2 className="w-2.5 h-2.5" />
+                            </button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                    <div className={`px-1 py-1 text-left text-xs font-medium ${
+                      styleMode === key
+                        ? 'bg-blue-50 text-blue-600'
+                        : 'bg-gray-50 text-gray-500 group-hover:bg-white group-hover:text-gray-600'
+                    }`}>
+                      <div className="truncate">
+                        {name}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            
+            {/* Surprise Me Button (Last) */}
+            {materials.testMaterial && (
+              <button
+                key="testMaterial"
+                onClick={async () => {
+                  const isSameMaterial = styleMode === 'testMaterial';
+                  if (!isSameMaterial) {
+                    setStyleMode('testMaterial');
+                  } else {
+                    handleGenerate();
+                  }
+                }}
+                type="button"
+                aria-label={`Select ${materials.testMaterial.name} style`}
+                aria-pressed={styleMode === 'testMaterial'}
+                className="focus:outline-none relative group flex-shrink-0"
+                style={{ scrollSnapAlign: 'end' }}
+              >
+                <div className={`w-20 border overflow-hidden rounded-xl ${
+                  styleMode === 'testMaterial' 
+                    ? 'border-blue-500 bg-white' 
+                    : 'bg-gray-50 border-gray-200 border-dashed group-hover:bg-white group-hover:border-gray-300'
+                }`}>
+                  <div className="w-full relative" style={{ aspectRatio: '1/1' }}>
+                    <div className={`w-full h-full flex items-center justify-center ${
+                      styleMode === 'testMaterial' ? 'bg-white' : 'bg-gray-50 group-hover:bg-white'
+                    }`}>
+                      <HelpCircle className={`w-8 h-8 ${
+                        styleMode === 'testMaterial' ? 'text-blue-600' : 'text-gray-500 group-hover:text-gray-600'
+                      }`} />
+                    </div>
+                  </div>
+                  <div className={`px-1 py-1 text-left text-xs font-medium ${
+                    styleMode === 'testMaterial'
+                      ? 'bg-blue-50 text-blue-600'
+                      : 'bg-gray-50 text-gray-500 group-hover:bg-white group-hover:text-gray-600'
+                  }`}>
+                    <div className="truncate">
+                      {materials.testMaterial.name}
+                    </div>
+                  </div>
+                </div>
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* Desktop View */}
+      <div className="hidden md:block">
+        <div className="overflow-x-auto">
+          <div className="flex flex-wrap gap-2 overflow-y-auto max-h-[35vh] pr-2">
+            {/* 1. Original + 2. Local + 3. Test Material */}
+            {Object.entries(getSortedMaterials(materials)).map(([key, { name, file, imageData, thumbnail, isCustom, prompt }]) => (
+              <button
+                key={key}
+                onClick={async () => {
+                  const isSameMaterial = styleMode === key;
+                  if (!isSameMaterial) {
+                    setStyleMode(key);
+                  } else {
+                    handleGenerate();
+                  }
+                }}
+                type="button"
+                aria-label={`Select ${name} style`}
+                aria-pressed={styleMode === key}
+                className="focus:outline-none relative group"
+              >
+                <div className={`w-20 border overflow-hidden rounded-xl ${
+                  styleMode === key
+                    ? key === 'testMaterial' ? 'border-blue-500 bg-white' : 'border-blue-500 bg-white'
+                    : key === 'testMaterial'
+                      ? 'bg-gray-50 border-gray-200 border-dashed group-hover:bg-white group-hover:border-gray-300'
+                      : 'bg-gray-50 border-gray-200 group-hover:bg-white group-hover:border-gray-300'
+                }`}>
+                  <div className="w-full relative" style={{ aspectRatio: '1/1' }}>
+                    {key === 'testMaterial' ? (
+                      <div className={`w-full h-full flex items-center justify-center ${
+                        styleMode === key ? 'bg-white' : 'bg-gray-50 group-hover:bg-white'
+                      }`}>
+                        <HelpCircle className={`w-8 h-8 ${
+                          styleMode === key ? 'text-blue-600' : 'text-gray-500 group-hover:text-gray-600'
+                        }`} />
+                      </div>
+                    ) : (
+                      <img 
+                        src={imageData ? `data:image/jpeg;base64,${imageData}` : (file ? `/samples/${file}` : thumbnail || '')}
+                        alt={`${name} style example`}
+                        className="w-full h-full object-cover"
+                        onError={(e) => {
+                          console.error(`Error loading thumbnail for ${name} from ${e.target.src}`);
+                          // Provide a base64 encoded 1x1 transparent PNG as fallback
+                          e.target.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+                        }}
+                      />
+                    )}
+                    <div className="absolute inset-0">
+                      <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            calculatePopoverPosition(e.currentTarget, key);
+                          }}
+                          className="material-edit-button absolute top-1 right-1 bg-gray-800 bg-opacity-70 hover:bg-opacity-90 text-white rounded-full w-5 h-5 flex items-center justify-center transition-opacity"
+                          aria-label={isCustom ? `Edit ${name} material` : `View ${name} prompt`}
+                        >
+                          <Info className="w-2.5 h-2.5" />
+                        </button>
+                        
+                        {isCustom && (
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              handleDeleteMaterial(e, key);
+                            }}
+                            className="absolute top-1 left-1 bg-gray-800 bg-opacity-70 hover:bg-opacity-90 text-white rounded-full w-5 h-5 flex items-center justify-center transition-opacity"
+                            aria-label={`Delete ${name} material`}
+                          >
+                            <Trash2 className="w-2.5 h-2.5" />
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                  <div className={`px-1 py-1 text-left text-xs font-medium ${
+                    styleMode === key
+                      ? 'bg-blue-50 text-blue-600'
+                      : 'bg-gray-50 text-gray-500 group-hover:bg-white group-hover:text-gray-600'
+                  }`}>
+                    <div className="truncate">
+                      {name}
+                    </div>
+                  </div>
+                </div>
+              </button>
+            ))}
+            
+            <button
+              onClick={handleAddMaterial}
+              type="button"
+              aria-label="Add new material"
+              className="focus:outline-none group"
+            >
+              <div className="w-20 border border-dashed border-gray-200 overflow-hidden rounded-xl bg-gray-50 flex flex-col group-hover:bg-white group-hover:border-gray-300">
+                <div className="w-full relative flex-1 flex items-center justify-center" style={{ aspectRatio: '1/1' }}>
+                  <Plus className="w-6 h-6 text-gray-500 group-hover:text-gray-600" />
+                </div>
+                <div className="px-1 py-1 text-left text-xs font-medium bg-gray-50 text-gray-500 w-full group-hover:bg-white group-hover:text-gray-600">
+                  <div className="truncate">
+                    Add Material
+                  </div>
+                </div>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {showPromptInfo && typeof document !== 'undefined' && createPortal(
+        <div 
+          className="prompt-popover fixed z-[9999] bg-white border border-gray-200 text-gray-900 rounded-lg shadow-lg p-4 text-xs"
+          style={{
+            top: `${promptPopoverPosition.top}px`,
+            left: `${promptPopoverPosition.left}px`,
+            width: '300px',
+            transform: 'translateY(-100%)',
+            maxHeight: '60vh',
+          }}
+        >
+          <button
+            type="button"
+            className="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
+            onClick={() => {
+              setShowPromptInfo(null);
+              setEditingPrompt(null);
+            }}
+            aria-label="Close prompt info"
+          >
+            ×
+          </button>
+
+          <div className="text-sm font-medium mb-2 text-gray-700">
+            {materials[showPromptInfo]?.name || ''}
+          </div>
+          
+          {materials[showPromptInfo]?.isCustom ? (
+            <>
+              <textarea
+                className={`font-mono text-xs w-full h-60 bg-gray-50 border ${editingPrompt ? 'border-blue-300 focus:border-blue-500' : 'border-gray-200'} rounded p-2 text-gray-900`}
+                value={editingPrompt ? editedPromptText : (materials[showPromptInfo]?.prompt || '')}
+                onChange={handlePromptTextChange}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (!editingPrompt) {
+                    setEditingPrompt(showPromptInfo);
+                    setEditedPromptText(materials[showPromptInfo]?.prompt || '');
+                  }
+                }}
+                onFocus={(e) => {
+                  if (!editingPrompt) {
+                    setEditingPrompt(showPromptInfo);
+                    setEditedPromptText(materials[showPromptInfo]?.prompt || '');
+                    // Place cursor at end of text
+                    const val = e.target.value;
+                    e.target.value = '';
+                    e.target.value = val;
+                  }
+                }}
+                onKeyDown={(e) => {
+                  // Save changes on Ctrl+Enter or Cmd+Enter
+                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    if (editingPrompt && hasPromptChanged) {
+                      saveEditedPrompt();
+                    }
+                  }
+                  e.stopPropagation();
+                }}
+                placeholder="Edit prompt here..."
+                readOnly={!editingPrompt}
+              />
+              {/* {editingPrompt && (
+                <div className="text-xs text-gray-500 mt-1 mb-2 flex items-center">
+                  <span className="mr-1">Pro tip:</span> 
+                  <kbd className="px-1 py-0.5 border border-gray-300 rounded text-xs bg-gray-50 mr-1">
+                    {navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
+                  </kbd>
+                  <span className="mr-1">+</span>
+                  <kbd className="px-1 py-0.5 border border-gray-300 rounded text-xs bg-gray-50">
+                    Enter
+                  </kbd>
+                  <span className="ml-1">to save</span>
+                </div>
+              )} */}
+              <div className="flex justify-between mt-2">
+                <button
+                  type="button"
+                  className="flex items-center bg-red-500 hover:bg-red-600 text-white rounded px-2 py-1 text-xs"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDeleteMaterial(e, showPromptInfo);
+                    setShowPromptInfo(null);
+                  }}
+                >
+                  <Trash2 className="w-3 h-3 mr-1" />
+                  Delete
+                </button>
+                <button
+                  type="button"
+                  className={`flex items-center ${
+                    editingPrompt 
+                      ? hasPromptChanged 
+                        ? 'bg-blue-500 hover:bg-blue-600'
+                        : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+                      : 'bg-blue-500 hover:bg-blue-600'
+                  } text-white rounded px-2 py-1 text-xs`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (editingPrompt) {
+                      if (hasPromptChanged) {
+                        saveEditedPrompt();
+                      }
+                    } else {
+                      setEditingPrompt(showPromptInfo);
+                      setEditedPromptText(materials[showPromptInfo]?.prompt || '');
+                    }
+                  }}
+                  disabled={editingPrompt && !hasPromptChanged}
+                >
+                  {editingPrompt 
+                    ? <><Check className="w-3 h-3 mr-1" />Save Changes</>
+                    : <><Edit className="w-3 h-3 mr-1" />Edit Prompt</>
+                  }
+                </button>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="font-mono text-xs overflow-y-auto max-h-60 border border-gray-200 rounded p-2 bg-gray-50 mb-3">
+                {materials[showPromptInfo]?.prompt || 'No prompt available'}
+              </div>
+            </>
+          )}
+          
+          <div className="absolute bottom-0 left-1/2 w-3 h-3 bg-white border-b border-r border-gray-200 transform translate-y-1/2 rotate-45 -translate-x-1/2" />
+        </div>,
+        document.body
+      )}
+
+      <AddMaterialModal
+        showModal={showAddMaterialModal}
+        onClose={() => setShowAddMaterialModal(false)}
+        onAddMaterial={handleCreateMaterial}
+        newMaterialName={newMaterialName}
+        setNewMaterialName={setNewMaterialName}
+        generatedMaterialName={generatedMaterialName}
+        setGeneratedMaterialName={setGeneratedMaterialName}
+        generatedPrompt={generatedPrompt}
+        setGeneratedPrompt={setGeneratedPrompt}
+        customPrompt={customPrompt}
+        setCustomPrompt={setCustomPrompt}
+        previewThumbnail={previewThumbnail}
+        customImagePreview={customImagePreview}
+        useCustomImage={useCustomImage}
+        isGeneratingPreview={isGeneratingPreview}
+        isGeneratingText={isGeneratingText}
+        showMaterialNameEdit={showMaterialNameEdit}
+        setShowMaterialNameEdit={setShowMaterialNameEdit}
+        showCustomPrompt={showCustomPrompt}
+        setShowCustomPrompt={setShowCustomPrompt}
+        handleRefreshThumbnail={handleRefreshThumbnail}
+        handleReferenceImageUpload={handleReferenceImageUpload}
+        handleNewMaterialDescription={handleNewMaterialDescription}
+        onStyleSelected={(materialKey) => {
+          // Update the styleMode to select the new material
+          setStyleMode(materialKey);
+          // Update the materials state to reflect the change
+          setMaterials({...styleOptions});
+        }}
+        materials={materials}
+      />
+    </div>
+  );
+};
+
+export default StyleSelector; 

components/TextInput.js

@@ -0,0 +1,38 @@
+import { useEffect, useRef } from 'react';
+
+const TextInput = ({ 
+  isTyping, 
+  textInputRef, 
+  textInput, 
+  setTextInput, 
+  handleTextInput, 
+  textPosition 
+}) => {
+  if (!isTyping) {
+    return null;
+  }
+  
+  return (
+    <div
+      className="absolute z-50 bg-white border border-gray-300 rounded-lg shadow-medium p-2"
+      style={{
+        top: textPosition.y,
+        left: textPosition.x,
+        transform: 'translateY(-100%)'
+      }}
+    >
+      <input
+        ref={textInputRef}
+        type="text"
+        value={textInput}
+        onChange={(e) => setTextInput(e.target.value)}
+        onKeyDown={handleTextInput}
+        placeholder="Type text..."
+        className="w-full p-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-400"
+        aria-label="Text input for canvas"
+      />
+    </div>
+  );
+};
+
+export default TextInput; 

components/ToolBar.js

@@ -0,0 +1,96 @@
+import { Pencil, Eraser, Type, Undo, Trash2, PenLine, MousePointer } from 'lucide-react';
+import { PenTool } from 'lucide-react';
+import { Undo2 } from 'lucide-react';
+import { useState } from 'react';
+import DimensionSelector from './DimensionSelector';
+
+const ToolBar = ({ 
+  currentTool, 
+  setCurrentTool, 
+  handleUndo, 
+  clearCanvas, 
+  orientation = 'horizontal',
+  currentWidth,
+  setStrokeWidth,
+  currentDimension,
+  onDimensionChange
+}) => {
+  const mainTools = [
+    // { id: 'selection', icon: MousePointer, label: 'Selection' },
+    { id: 'pencil', icon: Pencil, label: 'Pencil' },
+    // { id: 'pen', icon: PenTool, label: 'Pen' },
+    { id: 'eraser', icon: Eraser, label: 'Eraser' },
+    // { id: 'text', icon: Type, label: 'Text' }
+  ];
+
+  const actions = [
+    { id: 'undo', icon: Undo2, label: 'Undo', onClick: handleUndo },
+    { id: 'clear', icon: Trash2, label: 'Clear', onClick: clearCanvas }
+  ];
+
+  const containerClasses = orientation === 'vertical' 
+    ? 'flex flex-col gap-2 bg-white rounded-xl shadow-soft p-2 border border-gray-200'
+    : 'flex gap-2 bg-white rounded-xl shadow-soft p-2 border border-gray-200';
+
+  return (
+    <div className={orientation === 'vertical' ? 'flex flex-col gap-2' : 'flex flex-col gap-3 mt-1'}>
+      {/* Main toolbar container - includes dimension selector in horizontal mode */}
+      <div className={orientation === 'horizontal' ? 'flex items-center justify-between' : ''}>
+        {/* Main toolbar */}
+        <div className={containerClasses}>
+          {mainTools.map((tool) => (
+            <div key={tool.id} className="relative">
+              <button
+                onClick={() => setCurrentTool(tool.id)}
+                className={`p-2.5 rounded-lg transition-colors flex items-center justify-center ${
+                  currentTool === tool.id
+                    ? 'bg-gray-100 text-gray-900'
+                    : 'text-gray-600 hover:bg-gray-50'
+                }`}
+                title={tool.label}
+              >
+                <tool.icon className="w-5 h-5" />
+              </button>
+            </div>
+          ))}
+          
+          {orientation === 'vertical' && <div className="h-px bg-gray-200 my-2" />}
+          {orientation === 'horizontal' && <div className="w-px bg-gray-200 mx-0" />}
+          
+          {actions.map((action) => (
+            <button
+              key={action.id}
+              onClick={action.onClick}
+              className="p-2 rounded-lg text-gray-600 hover:bg-gray-50 text-center flex items-center justify-center transition-colors"
+              title={action.label}
+            >
+              <action.icon className="w-5 h-5" />
+            </button>
+          ))}
+        </div>
+
+        {/* Dimension selector - show inline in horizontal layout */}
+        {orientation === 'horizontal' && currentDimension && onDimensionChange && (
+          <div className="ml-2 bg-white rounded-xl shadow-soft p-2 border border-gray-200">
+            <DimensionSelector 
+              currentDimension={currentDimension}
+              onDimensionChange={onDimensionChange}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Separate DimensionSelector - only in vertical orientation */}
+      {orientation === 'vertical' && currentDimension && onDimensionChange && (
+        <div className="bg-white rounded-xl shadow-soft border border-gray-200">
+          <DimensionSelector 
+            currentDimension={currentDimension}
+            onDimensionChange={onDimensionChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ToolBar; 

components/utils/canvasUtils.js

@@ -0,0 +1,230 @@
+// Get the correct coordinates based on canvas scaling
+export const getCoordinates = (e, canvas) => {
+  const rect = canvas.getBoundingClientRect();
+  
+  // Calculate the scaling factor between the internal canvas size and displayed size
+  const scaleX = canvas.width / rect.width;
+  const scaleY = canvas.height / rect.height;
+  
+  // Apply the scaling to get accurate coordinates
+  return {
+    x: (e.nativeEvent.offsetX || (e.nativeEvent.touches?.[0]?.clientX - rect.left)) * scaleX,
+    y: (e.nativeEvent.offsetY || (e.nativeEvent.touches?.[0]?.clientY - rect.top)) * scaleY
+  };
+};
+
+// Initialize canvas with white background
+export const initializeCanvas = (canvas) => {
+  const ctx = canvas.getContext("2d");
+  
+  // Fill canvas with white background
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+};
+
+// Draw the background image to the canvas
+export const drawImageToCanvas = (canvas, backgroundImage) => {
+  if (!canvas || !backgroundImage) return;
+  
+  const ctx = canvas.getContext("2d");
+  
+  // Fill with white background first
+  ctx.fillStyle = "#FFFFFF";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  
+  // Draw the background image
+  ctx.drawImage(
+    backgroundImage,
+    0, 0,
+    canvas.width, canvas.height
+  );
+};
+
+// Draw bezier curve
+export const drawBezierCurve = (canvas, points) => {
+  const ctx = canvas.getContext('2d');
+  
+  if (!points || points.length < 2) {
+    console.error('Need at least 2 points to draw a path');
+    return;
+  }
+  
+  ctx.beginPath();
+  ctx.strokeStyle = '#000000';
+  ctx.lineWidth = 4;
+  
+  // Start at the first anchor point
+  ctx.moveTo(points[0].x, points[0].y);
+  
+  // For each pair of anchor points (and their control points)
+  for (let i = 0; i < points.length - 1; i++) {
+    const current = points[i];
+    const next = points[i + 1];
+    
+    if (current.handleOut && next.handleIn) {
+      // If both points have handles, draw a cubic bezier
+      ctx.bezierCurveTo(
+        current.x + (current.handleOut?.x || 0), current.y + (current.handleOut?.y || 0),
+        next.x + (next.handleIn?.x || 0), next.y + (next.handleIn?.y || 0),
+        next.x, next.y
+      );
+    } else {
+      // If no handles, draw a straight line
+      ctx.lineTo(next.x, next.y);
+    }
+  }
+  
+  ctx.stroke();
+};
+
+// Draw bezier guides (control points and lines)
+export const drawBezierGuides = (ctx, points) => {
+  if (!points || points.length === 0) return;
+  
+  // Draw the path itself first (as a light preview)
+  ctx.save();
+  ctx.globalAlpha = 0.3;
+  ctx.strokeStyle = '#888888';
+  ctx.lineWidth = 1.5;
+  
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  
+  // For each pair of anchor points (and their control points)
+  for (let i = 0; i < points.length - 1; i++) {
+    const current = points[i];
+    const next = points[i + 1];
+    
+    if (current.handleOut && next.handleIn) {
+      // If both points have handles, draw a cubic bezier
+      ctx.bezierCurveTo(
+        current.x + (current.handleOut?.x || 0), current.y + (current.handleOut?.y || 0),
+        next.x + (next.handleIn?.x || 0), next.y + (next.handleIn?.y || 0),
+        next.x, next.y
+      );
+    } else {
+      // If no handles, draw a straight line
+      ctx.lineTo(next.x, next.y);
+    }
+  }
+  
+  ctx.stroke();
+  ctx.restore();
+  
+  // Draw guide lines between anchor points and their handles
+  ctx.strokeStyle = 'rgba(100, 100, 255, 0.5)';
+  ctx.lineWidth = 1;
+  
+  for (const point of points) {
+    // Draw line from anchor to in-handle if it exists
+    if (point.handleIn) {
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+      ctx.lineTo(point.x + point.handleIn.x, point.y + point.handleIn.y);
+      ctx.stroke();
+    }
+    
+    // Draw line from anchor to out-handle if it exists
+    if (point.handleOut) {
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+      ctx.lineTo(point.x + point.handleOut.x, point.y + point.handleOut.y);
+      ctx.stroke();
+    }
+  }
+  
+  // Draw anchor points (main points of the path)
+  for (const point of points) {
+    // Draw the main anchor point
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.8)';
+    ctx.lineWidth = 1;
+    
+    ctx.beginPath();
+    ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+    
+    // Draw the handle points if they exist
+    if (point.handleIn) {
+      ctx.fillStyle = 'rgba(100, 100, 255, 0.8)';
+      ctx.beginPath();
+      ctx.arc(point.x + point.handleIn.x, point.y + point.handleIn.y, 4, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    
+    if (point.handleOut) {
+      ctx.fillStyle = 'rgba(100, 100, 255, 0.8)';
+      ctx.beginPath();
+      ctx.arc(point.x + point.handleOut.x, point.y + point.handleOut.y, 4, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }
+};
+
+// Helper to create a new anchor point with handles
+export const createAnchorPoint = (x, y, prevPoint = null) => {
+  // By default, create a point with no handles
+  const point = { x, y, handleIn: null, handleOut: null };
+  
+  // If there's a previous point, automatically add symmetric handles
+  if (prevPoint) {
+    // Calculate the default handle length (as a percentage of distance to previous point)
+    const dx = x - prevPoint.x;
+    const dy = y - prevPoint.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const handleLength = distance * 0.3; // 30% of distance between points
+    
+    // Create handles perpendicular to the line between points
+    // For a smooth curve, make the previous point's out handle opposite to this point's in handle
+    const angle = Math.atan2(dy, dx);
+    
+    // Add an out handle to the previous point (if it doesn't already have one)
+    if (!prevPoint.handleOut) {
+      prevPoint.handleOut = {
+        x: Math.cos(angle) * -handleLength,
+        y: Math.sin(angle) * -handleLength
+      };
+    }
+    
+    // Add an in handle to the current point
+    point.handleIn = {
+      x: Math.cos(angle) * -handleLength,
+      y: Math.sin(angle) * -handleLength
+    };
+  }
+  
+  return point;
+};
+
+// Helper to check if a point is near a handle
+export const isNearHandle = (point, handleType, x, y, radius = 10) => {
+  if (!point || !point[handleType]) return false;
+  
+  const handleX = point.x + point[handleType].x;
+  const handleY = point.y + point[handleType].y;
+  
+  const dx = handleX - x;
+  const dy = handleY - y;
+  
+  return (dx * dx + dy * dy) <= radius * radius;
+};
+
+// Helper to update a handle position
+export const updateHandle = (point, handleType, dx, dy, symmetric = true) => {
+  if (!point || !point[handleType]) return;
+  
+  // Update the target handle
+  point[handleType].x += dx;
+  point[handleType].y += dy;
+  
+  // If symmetric and the other handle exists, update it to be symmetrical
+  if (symmetric) {
+    const otherType = handleType === 'handleIn' ? 'handleOut' : 'handleIn';
+    
+    if (point[otherType]) {
+      point[otherType].x = -point[handleType].x;
+      point[otherType].y = -point[handleType].y;
+    }
+  }
+}; 

docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3'
+
+services:
+  nextjs-app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - GEMINI_API_KEY=${GEMINI_API_KEY}
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:3000"]
+      interval: 30s
+      timeout: 10s
+      retries: 3 

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,36 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  output: 'standalone',
+  images: {
+    domains: ['localhost'],
+  },
+  // Ensure that Webpack handles the canvas properly
+  webpack: (config) => {
+    // Add any necessary webpack configurations here
+    return config;
+  },
+  // Development configuration
+  experimental: {
+    // Disable experimental features that might cause issues
+    turbo: false,
+    // Enable more stable features 
+    esmExternals: true,
+    // Improve module resolution
+    modularizeImports: {
+      '@material-ui/core/': {
+        transform: '@material-ui/core/{{member}}'
+      },
+      '@material-ui/icons/': {
+        transform: '@material-ui/icons/{{member}}'
+      }
+    }
+  },
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb' // Increase the size limit to 10MB
+    }
+  }
+};
+
+module.exports = nextConfig; 

package-lock.json

@@ -0,0 +1,1626 @@
+{
+  "name": "native-image",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "native-image",
+      "version": "0.1.0",
+      "dependencies": {
+        "@google/generative-ai": "^0.24.0",
+        "@types/react-dom": "^19.0.4",
+        "lucide-react": "^0.483.0",
+        "next": "15.2.3",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-hot-toast": "^2.5.2",
+        "react-masonry-css": "^1.0.16",
+        "use-debounce": "^10.0.4"
+      },
+      "devDependencies": {
+        "@tailwindcss/postcss": "^4",
+        "@types/node": "22.13.14",
+        "@types/react": "19.0.12",
+        "tailwind-scrollbar": "^4.0.1",
+        "tailwindcss": "^4",
+        "typescript": "5.8.2"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
+      "integrity": "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@google/generative-ai": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@google/generative-ai/-/generative-ai-0.24.0.tgz",
+      "integrity": "sha512-fnEITCGEB7NdX0BhoYZ/cq/7WPZ1QS5IzJJfC3Tg/OwkvBetMiVJciyaan297OvE4B9Jg1xvo0zIazX/9sGu1Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.2.3.tgz",
+      "integrity": "sha512-a26KnbW9DFEUsSxAxKBORR/uD9THoYoKbkpFywMN/AFvboTt94b8+g/07T8J6ACsdLag8/PDU60ov4rPxRAixw==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.2.3.tgz",
+      "integrity": "sha512-uaBhA8aLbXLqwjnsHSkxs353WrRgQgiFjduDpc7YXEU0B54IKx3vU+cxQlYwPCyC8uYEEX7THhtQQsfHnvv8dw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.2.3.tgz",
+      "integrity": "sha512-pVwKvJ4Zk7h+4hwhqOUuMx7Ib02u3gDX3HXPKIShBi9JlYllI0nU6TWLbPT94dt7FSi6mSBhfc2JrHViwqbOdw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.2.3.tgz",
+      "integrity": "sha512-50ibWdn2RuFFkOEUmo9NCcQbbV9ViQOrUfG48zHBCONciHjaUKtHcYFiCwBVuzD08fzvzkWuuZkd4AqbvKO7UQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.2.3.tgz",
+      "integrity": "sha512-2gAPA7P652D3HzR4cLyAuVYwYqjG0mt/3pHSWTCyKZq/N/dJcUAEoNQMyUmwTZWCJRKofB+JPuDVP2aD8w2J6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.2.3.tgz",
+      "integrity": "sha512-ODSKvrdMgAJOVU4qElflYy1KSZRM3M45JVbeZu42TINCMG3anp7YCBn80RkISV6bhzKwcUqLBAmOiWkaGtBA9w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.2.3.tgz",
+      "integrity": "sha512-ZR9kLwCWrlYxwEoytqPi1jhPd1TlsSJWAc+H/CJHmHkf2nD92MQpSRIURR1iNgA/kuFSdxB8xIPt4p/T78kwsg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.2.3.tgz",
+      "integrity": "sha512-+G2FrDcfm2YDbhDiObDU/qPriWeiz/9cRR0yMWJeTLGGX6/x8oryO3tt7HhodA1vZ8r2ddJPCjtLcpaVl7TE2Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.2.3.tgz",
+      "integrity": "sha512-gHYS9tc+G2W0ZC8rBL+H6RdtXIyk40uLiaos0yj5US85FNhbFEndMA2nW3z47nzOWiSvXTZ5kBClc3rD0zJg0w==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.15.tgz",
+      "integrity": "sha512-IODaJjNmiasfZX3IoS+4Em3iu0fD2HS0/tgrnkYfW4hyUor01Smnr5eY3jc4rRgaTDrJlDmBTHbFO0ETTDaxWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "tailwindcss": "4.0.15"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.15.tgz",
+      "integrity": "sha512-e0uHrKfPu7JJGMfjwVNyt5M0u+OP8kUmhACwIRlM+JNBuReDVQ63yAD1NWe5DwJtdaHjugNBil76j+ks3zlk6g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.15",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.15",
+        "@tailwindcss/oxide-darwin-x64": "4.0.15",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.15",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.15",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.15",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.15",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.15",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.15",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.15",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.15"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.15.tgz",
+      "integrity": "sha512-EBuyfSKkom7N+CB3A+7c0m4+qzKuiN0WCvzPvj5ZoRu4NlQadg/mthc1tl5k9b5ffRGsbDvP4k21azU4VwVk3Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.15.tgz",
+      "integrity": "sha512-ObVAnEpLepMhV9VoO0JSit66jiN5C4YCqW3TflsE9boo2Z7FIjV80RFbgeL2opBhtxbaNEDa6D0/hq/EP03kgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.15.tgz",
+      "integrity": "sha512-IElwoFhUinOr9MyKmGTPNi1Rwdh68JReFgYWibPWTGuevkHkLWKEflZc2jtI5lWZ5U9JjUnUfnY43I4fEXrc4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.15.tgz",
+      "integrity": "sha512-6BLLqyx7SIYRBOnTZ8wgfXANLJV5TQd3PevRJZp0vn42eO58A2LykRKdvL1qyPfdpmEVtF+uVOEZ4QTMqDRAWA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.15.tgz",
+      "integrity": "sha512-Zy63EVqO9241Pfg6G0IlRIWyY5vNcWrL5dd2WAKVJZRQVeolXEf1KfjkyeAAlErDj72cnyXObEZjMoPEKHpdNw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.15.tgz",
+      "integrity": "sha512-2NemGQeaTbtIp1Z2wyerbVEJZTkAWhMDOhhR5z/zJ75yMNf8yLnE+sAlyf6yGDNr+1RqvWrRhhCFt7i0CIxe4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.15.tgz",
+      "integrity": "sha512-342GVnhH/6PkVgKtEzvNVuQ4D+Q7B7qplvuH20Cfz9qEtydG6IQczTZ5IT4JPlh931MG1NUCVxg+CIorr1WJyw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.15.tgz",
+      "integrity": "sha512-g76GxlKH124RuGqacCEFc2nbzRl7bBrlC8qDQMiUABkiifDRHOIUjgKbLNG4RuR9hQAD/MKsqZ7A8L08zsoBrw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.15.tgz",
+      "integrity": "sha512-Gg/Y1XrKEvKpq6WeNt2h8rMIKOBj/W3mNa5NMvkQgMC7iO0+UNLrYmt6zgZufht66HozNpn+tJMbbkZ5a3LczA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.15.tgz",
+      "integrity": "sha512-7QtSSJwYZ7ZK1phVgcNZpuf7c7gaCj8Wb0xjliligT5qCGCp79OV2n3SJummVZdw4fbTNKUOYMO7m1GinppZyA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.15.tgz",
+      "integrity": "sha512-JQ5H+5MLhOjpgNp6KomouE0ZuKmk3hO5h7/ClMNAQ8gZI2zkli3IH8ZqLbd2DVfXDbdxN2xvooIEeIlkIoSCqw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.15.tgz",
+      "integrity": "sha512-qyrpoDKIO7wzkRbKCvGLo7gXRjT9/Njf7ZJiJhG4njrfZkvOhjwnaHpYbpxYeDysEg+9pB1R4jcd+vQ7ZUDsmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.0.15",
+        "@tailwindcss/oxide": "4.0.15",
+        "lightningcss": "1.29.2",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.0.15"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.13.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz",
+      "integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
+      "integrity": "sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
+      "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001707",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
+      "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/goober": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.16.tgz",
+      "integrity": "sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.483.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.483.0.tgz",
+      "integrity": "sha512-WldsY17Qb/T3VZdMnVQ9C3DDIP7h1ViDTHVdVGnLZcvHNg30zH/MTQ04RTORjexoGmpsXroiQXZ4QyR0kBy0FA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.2.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.2.3.tgz",
+      "integrity": "sha512-x6eDkZxk2rPpu46E1ZVUWIBhYCLszmUY6fvHBFcbzJ9dD+qRX6vcHusaqqDlnY+VngKzKbAiG2iRCkPbmi8f7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "15.2.3",
+        "@swc/counter": "0.1.3",
+        "@swc/helpers": "0.5.15",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.2.3",
+        "@next/swc-darwin-x64": "15.2.3",
+        "@next/swc-linux-arm64-gnu": "15.2.3",
+        "@next/swc-linux-arm64-musl": "15.2.3",
+        "@next/swc-linux-x64-gnu": "15.2.3",
+        "@next/swc-linux-x64-musl": "15.2.3",
+        "@next/swc-win32-arm64-msvc": "15.2.3",
+        "@next/swc-win32-x64-msvc": "15.2.3",
+        "sharp": "^0.33.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prism-react-renderer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz",
+      "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-hot-toast": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.5.2.tgz",
+      "integrity": "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.1.3",
+        "goober": "^2.1.16"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
+    "node_modules/react-masonry-css": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/react-masonry-css/-/react-masonry-css-1.0.16.tgz",
+      "integrity": "sha512-KSW0hR2VQmltt/qAa3eXOctQDyOu7+ZBevtKgpNDSzT7k5LA/0XntNa9z9HKCdz3QlxmJHglTZ18e4sX4V8zZQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwind-scrollbar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-4.0.1.tgz",
+      "integrity": "sha512-j2ZfUI7p8xmSQdlqaCxEb4Mha8ErvWjDVyu2Ke4IstWprQ/6TmIz1GSLE62vsTlXwnMLYhuvbFbIFzaJGOGtMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prism-react-renderer": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "4.x"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.15.tgz",
+      "integrity": "sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/use-debounce": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "native-image",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "dev:webpack": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.24.0",
+    "@types/react-dom": "^19.0.4",
+    "lucide-react": "^0.483.0",
+    "next": "15.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.5.2",
+    "react-masonry-css": "^1.0.16",
+    "use-debounce": "^10.0.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "22.13.14",
+    "@types/react": "19.0.12",
+    "tailwind-scrollbar": "^4.0.1",
+    "tailwindcss": "^4",
+    "typescript": "5.8.2"
+  }
+}

pages/_app.js

@@ -0,0 +1,5 @@
+import "../styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

pages/_document.js

@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from "next/document";
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body className="antialiased">
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

pages/api/analyze-image.js

@@ -0,0 +1,139 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+
+// Initialize Gemini API with error handling
+const initializeGeminiAI = () => {
+  const apiKey = process.env.GEMINI_API_KEY;
+  if (!apiKey) {
+    throw new Error('GEMINI_API_KEY is not set in environment variables');
+  }
+  return new GoogleGenerativeAI(apiKey);
+};
+
+// Configure API route options
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb' // Increase the body size limit to 10MB for larger images
+    }
+  }
+};
+
+export default async function handler(req, res) {
+  // Only allow POST requests
+  if (req.method !== 'POST') {
+    res.setHeader('Allow', ['POST']);
+    return res.status(405).json({ error: `Method ${req.method} Not Allowed` });
+  }
+
+  try {
+    const { image, customApiKey } = req.body;
+    if (!image) {
+      return res.status(400).json({ error: 'Image is required' });
+    }
+
+    // Extract base64 data
+    const base64Data = image.split(',')[1];
+    if (!base64Data) {
+      return res.status(400).json({ error: 'Invalid image format' });
+    }
+
+    // Initialize Gemini with the appropriate API key
+    const apiKey = customApiKey || process.env.GEMINI_API_KEY;
+    const genAI = new GoogleGenerativeAI(apiKey);
+    const model = genAI.getGenerativeModel({ model: 'gemini-2.0-flash' });
+
+    // Prepare the image parts
+    const imageParts = [
+      {
+        inlineData: {
+          data: base64Data,
+          mimeType: "image/jpeg"
+        }
+      }
+    ];
+
+    // Create the prompt - Updated for clarity and better results
+    const prompt = `Analyze this reference image/moodboard and create a detailed material prompt for a 3D rendering that captures its essence and visual qualities.
+    The prompt should follow this format and style, but be unique and creative:
+    
+    Example 1: "Recreate this doodle as a physical chrome sculpture made of chromium metal tubes or pipes in a professional studio setting. If it is typography, render it accordingly, but always have a black background and studio lighting. Render it in Cinema 4D with Octane, using studio lighting against a pure black background. Make it look like a high-end product rendering of a sculptural piece."
+    
+    Example 2: "Convert this drawing / text into a soft body physics render. Render it as if made of a soft, jelly-like material that responds to gravity and motion. Add realistic deformation, bounce, and squash effects typical of soft body dynamics. Use dramatic lighting against a black background to emphasize the material's translucency and surface properties. Make it look like a high-end 3D animation frame"
+    
+    Create a new, unique prompt based on the visual qualities of the uploaded image that follows a similar style but is completely different from the examples.
+    Focus on:
+    1. Material properties (metallic, glass, fabric, liquid, etc.)
+    2. Lighting and environment (studio, dramatic, moody, etc.)
+    3. Visual style (high-end, realistic, stylized, etc.)
+    4. Rendering technique (Cinema 4D, Octane, etc.)
+    
+    Also suggest a short, memorable name for this material style (1-2 words) based on the key visual characteristics.
+    
+    Format the response as JSON with 'prompt' and 'suggestedName' fields.`;
+
+    console.log('Calling Gemini Vision API for image analysis...');
+    
+    // Generate content
+    const result = await model.generateContent([prompt, ...imageParts]);
+    const response = result.response;
+    const responseText = response.text();
+    
+    console.log('Received response from Gemini');
+
+    // Try to parse as JSON, fallback to text if needed
+    try {
+      // First try direct parse
+      const jsonResponse = JSON.parse(responseText);
+      return res.status(200).json(jsonResponse);
+    } catch (e) {
+      console.log('Response not in JSON format, attempting to extract JSON');
+      
+      // Try to extract JSON from text response
+      try {
+        const jsonMatch = responseText.match(/\{[\s\S]*\}/);
+        if (jsonMatch) {
+          const extractedJson = JSON.parse(jsonMatch[0]);
+          return res.status(200).json(extractedJson);
+        }
+      } catch (extractError) {
+        console.error('Failed to extract JSON from response:', extractError);
+      }
+      
+      // If all parsing attempts fail, create structured response from text
+      const lines = responseText.split('\n');
+      let suggestedName = 'Custom Material';
+      
+      // Try to find a name in the response
+      for (const line of lines) {
+        if (line.toLowerCase().includes('name:') || line.toLowerCase().includes('suggested name:')) {
+          const namePart = line.split(':')[1];
+          if (namePart && namePart.trim()) {
+            suggestedName = namePart.trim();
+            // Remove quotes if present
+            suggestedName = suggestedName.replace(/^["'](.*)["']$/, '$1');
+            break;
+          }
+        }
+      }
+      
+      return res.status(200).json({
+        prompt: responseText,
+        suggestedName
+      });
+    }
+  } catch (error) {
+    console.error('Error in analyze-image:', error);
+    
+    // Check for quota exceeded errors
+    if (error.message?.includes('quota') || error.message?.includes('Resource has been exhausted')) {
+      return res.status(429).json({
+        error: 'API quota exceeded. Please try again later or use your own API key.'
+      });
+    }
+    
+    return res.status(500).json({ 
+      error: 'Failed to analyze image',
+      details: error.message 
+    });
+  }
+} 

pages/api/convert-to-doodle.js

@@ -0,0 +1,100 @@
+import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from "@google/generative-ai";
+import { NextResponse } from 'next/server';
+
+// Configuration for the API route
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb', // Increase limit to 10MB (adjust if needed)
+    },
+  },
+};
+
+export default async function handler(req, res) {
+  // Only allow POST requests
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { imageData, customApiKey } = req.body;
+
+    // Validate inputs
+    if (!imageData) {
+      return res.status(400).json({ error: 'Image data is required' });
+    }
+
+    // Set up the API key
+    const apiKey = customApiKey || process.env.GEMINI_API_KEY;
+    if (!apiKey) {
+      return res.status(500).json({ error: 'API key is required' });
+    }
+
+    // Initialize the Gemini API
+    const genAI = new GoogleGenerativeAI(apiKey);
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.0-flash-exp-image-generation",
+      generationConfig: {
+        temperature: 1,
+        topP: 0.95,
+        topK: 40,
+        maxOutputTokens: 8192,
+        responseModalities: ["image", "text"]
+      }
+    });
+
+    // Create the prompt for doodle conversion
+    const prompt = `Could you please convert this image into a black and white doodle.
+Requirements:
+- Use ONLY pure black lines on a pure white background
+- No gray tones or shading
+- Maintain the key shapes and outlines
+- Follow the original content but simplify if needed
+- IMPORTANT: If this image contains any text, logo, or wordmark:
+  * Simply convert it to black and white, and pass it through
+  * Preserve ALL text exactly as it appears in the original
+  * Maintain the exact spelling, letterspacing, and arrangement of letters
+  * Keep text legible and clear with high contrast
+  * Do not simplify or omit any text elements
+  * Text should remain readable in the final doodle, and true to the original :))`;
+
+    // Prepare the generation content
+    const generationContent = [
+      {
+        inlineData: {
+          data: imageData,
+          mimeType: "image/png"
+        }
+      },
+      { text: prompt }
+    ];
+
+    // Generate content
+    const result = await model.generateContent(generationContent);
+    const response = await result.response;
+    
+    // Process the response to extract image data
+    let convertedImageData = null;
+    for (const part of response.candidates[0].content.parts) {
+      if (part.inlineData) {
+        convertedImageData = part.inlineData.data;
+        break;
+      }
+    }
+
+    if (!convertedImageData) {
+      throw new Error('No image data received from the API');
+    }
+
+    // Return the converted image data
+    return res.status(200).json({
+      success: true,
+      imageData: convertedImageData
+    });
+  } catch (error) {
+    console.error("Error during doodle conversion:", error);
+    const errorMessage = error.message || "An unknown error occurred during conversion.";
+    // Ensure JSON response even on error
+    return res.status(500).json({ success: false, error: errorMessage });
+  }
+} 

pages/api/enhance-material.js

@@ -0,0 +1,108 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    // Extract material description from request body
+    const { materialDescription } = req.body;
+    
+    if (!materialDescription) {
+      return res.status(200).json({ 
+        name: 'Unknown Material',
+        details: 'Add standard material properties with accurate surface texturing.' 
+      });
+    }
+    
+    // Initialize the Google Generative AI with API key
+    const apiKey = process.env.GEMINI_API_KEY;
+    if (!apiKey) {
+      console.error("Missing GEMINI_API_KEY");
+      // Return a 200 with fallback data instead of error
+      return res.status(200).json({ 
+        name: materialDescription,
+        details: `Emphasize the characteristic properties of ${materialDescription.toLowerCase()} with accurate surface texturing.` 
+      });
+    }
+    
+    try {
+      const genAI = new GoogleGenerativeAI(apiKey);
+      const model = genAI.getGenerativeModel({
+        model: "gemini-pro",
+        generationConfig: {
+          temperature: 0.7,
+          topP: 0.8,
+          topK: 40
+        }
+      });
+
+      // Create prompt for material enhancement
+      const prompt = `Given the material description "${materialDescription}", provide:
+      1. A concise material name (2-3 words maximum, keep original name if simple enough)
+      2. Please provide contextual, specific material properties to enhance the existing prompt:
+      "Transform this sketch into a [material] material. Render it in a high-end 3D visualization style with professional studio lighting against a pure black background. Make it look like an elegant Cinema 4D and Octane rendering with detailed material properties and characteristics. The final result should be a premium product visualization with perfect studio lighting, crisp shadows, and high-end material definition."
+
+      Format response STRICTLY as JSON:
+      {
+        "name": "Material Name",
+        "details": "Only additional material properties,"
+      }
+
+      Requirements:
+      - Keep name simple if input is already concise (e.g., "rusted iron" stays as "Rusted Iron")
+      - Simplify complex descriptions (e.g., "glass beads made of fire" becomes "Molten Glass")
+      - Details should focus on physical properties, visual characteristics, and rendering techniques. Feel free to be creative! :)
+      - Do not repeat what's already in the base prompt (black background, lighting, etc)
+      - Keep details concise and technical`;
+
+      // Generate content with the model
+      const result = await model.generateContent(prompt);
+      const response = result.response;
+      const responseText = response.text();
+
+      try {
+        // Try to parse the response as JSON
+        const jsonResponse = JSON.parse(responseText);
+        
+        // Validate the response format
+        if (!jsonResponse.name || !jsonResponse.details) {
+          throw new Error('Invalid response format from AI');
+        }
+
+        return res.status(200).json(jsonResponse);
+      } catch (error) {
+        console.error('Error parsing AI response or invalid format:', error.message);
+        
+        // Fallback: Use the original description, capitalized, and provide empty details.
+        // This keeps the JSON structure consistent for the frontend.
+        const capitalizedName = materialDescription
+          .split(' ')
+          .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+          .join(' ');
+        
+        return res.status(200).json({
+          name: capitalizedName,
+          details: ""
+        });
+      }
+    } catch (aiError) {
+      console.error('Error calling Generative AI Model:', aiError);
+      // Fallback if the AI call itself fails
+      const capitalizedName = materialDescription
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+      
+      return res.status(500).json({
+        name: capitalizedName,
+        details: ""
+      });
+    }
+  } catch (error) {
+    // Catch errors before AI initialization (e.g., API key issue)
+    console.error('API handler setup error:', error);
+    return res.status(500).json({ error: 'Internal server error' });
+  }
+} 

pages/api/enhance-prompt.js

@@ -0,0 +1,119 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { materialName, basePrompt } = req.body;
+    // Use custom API key if provided, else use environment variable
+    // (Assuming customApiKey might be needed here too, like in other endpoints)
+    const apiKey = req.body.customApiKey || process.env.GEMINI_API_KEY;
+    const genAI = new GoogleGenerativeAI(apiKey);
+
+    // Use the specified flash model, configured for text-only output
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.0-flash-exp-image-generation", // Use the required model
+      generationConfig: {
+        // Configuration similar to generate.js's text-only mode
+        temperature: 0.8, // Adjust temperature for creativity if needed
+        topP: 0.95,
+        topK: 40,
+        maxOutputTokens: 8192, // Keep sufficient tokens for text
+        responseModalities: ["text"] // Explicitly request only text output
+      }
+    });
+
+    // --- Updated prompt with Simplified Classification (Material vs Style) ---
+    const enhancementPrompt = `CONTEXT: You are an expert AI assisting with 3D prompt generation. Your task is to analyze a user's input term, classify it as either MATERIAL or STYLE, and then generate an enhanced 3D rendering prompt for Cinema 4D and Octane based ONLY on that classification, rewriting the provided base prompt.
+
+USER INPUT TERM: "${materialName}"
+BASE PROMPT TO REWRITE: "${basePrompt}" // (Note: C4D/Octane, black background, studio lighting should generally be maintained unless STYLE dictates otherwise).
+
+DEFINITIONS:
+- MATERIAL: Describes the substance, texture, surface properties, or *essence* of a thing (e.g., 'chrome', 'bubbly glass', 'liquid honey', 'fur', 'horse', 'fish scales'). Applying this means rendering the sketch *as if made of* this substance or capturing its defining visual characteristics on the surface.
+- STYLE: Describes the overall artistic aesthetic or rendering technique (e.g., 'Studio Ghibli', 'cyberpunk', 'art deco', 'sketch'). Applying this means rendering the sketch *in* this aesthetic.
+
+TASK:
+1.  **Classify** the USER INPUT TERM ("${materialName}") into ONE category: MATERIAL or STYLE based on the DEFINITIONS. If it doesn't clearly fit STYLE, classify it as MATERIAL.
+2.  **Based ONLY on the category you chose**, follow the corresponding instructions below to rewrite the BASE PROMPT. Integrate the specific details smoothly.
+3.  **Generate a simple, descriptive 'suggestedName'**:
+    *   Capitalize the main words of the USER INPUT TERM ("${materialName}").
+    *   Keep it short and representative (usually 1-3 words).
+    *   If the input is complex (e.g., "plants made of copper beads"), simplify it concisely (e.g., "Copper Plants").
+    *   Examples: "fish" -> "Fish", "liquid honey" -> "Liquid Honey", "studio ghibli" -> "Studio Ghibli", "plants made of copper beads" -> "Copper Plants".
+4.  Output ONLY a single valid JSON object: {"enhancedPrompt": "...", "suggestedName": "..."}. Do not include your classification reasoning or any other text outside the JSON.
+
+--- CONDITIONAL INSTRUCTIONS ---
+
+➡️ IF CLASSIFIED AS **MATERIAL**:
+   Rewrite the base prompt to apply the characteristics or substance of '${materialName}' TO the sketched shape. Emphasize unique physical properties (texture, reflectivity, translucency, pattern, finish, etc.) and how they interact with professional studio lighting against a black background. Ensure the Cinema 4D / Octane rendering highlights these specific visual characteristics.
+   **Use these examples for inspiration on detail and phrasing (DO NOT COPY VERBATIM):**
+   *   *Chrome:* "Recreate this sketch as a physical chrome sculpture... highly reflective surfaces and sharp highlights characteristic of polished chrome."
+   *   *Liquid Honey:* "Transform this sketch... rendered as if made entirely of thick, viscous, translucent liquid honey... highlight the honey's golden color, internal light scattering, and glossy surface sheen."
+   *   *Soft Body:* "Convert this sketch into a soft body physics render made of a translucent, jelly-like material... highlight the material's subsurface scattering and wobbly surface properties."
+   *   *(Implicit Horse/Fish Example):* For terms like 'horse' or 'fish', focus on applying their characteristic textures (e.g., 'short dense hair', 'overlapping scales') or essence to the existing shape, rather than modeling the animal itself.
+
+➡️ IF CLASSIFIED AS **STYLE**:
+   Rewrite the base prompt to render the sketch IN the style of '${materialName}'. Follow this structure:
+   1.  **Interpretation:** State that the core elements from the sketch should be faithfully interpreted.
+   2.  **Style Application:** Detail how the '${materialName}' aesthetic should be applied (linework, color palette, mood, rendering techniques). Adapt lighting/background if the style requires. Use C4D/Octane techniques adapted to the style.
+   3.  **Goal:** The final image should clearly look like the '${materialName}' style applied to the specific sketch.
+   **Use this 'Studio Ghibli' example for structure/depth inspiration (DO NOT COPY VERBATIM):**
+   *   *Studio Ghibli Example Structure:* "First, faithfully interpret the core elements... Then, apply the following Studio Ghibli stylistic treatment: Aesthetic: Convert... Backgrounds: Use... Linework: Employ... Color: Utilize... Atmosphere: Infuse... Details: Add... Lighting: Implement... Goal: The final image must look like a high-quality Ghibli keyframe... Render using Cinema 4D and Octane..."
+
+--- END OF CONDITIONAL INSTRUCTIONS ---
+
+NOW, perform the classification for "${materialName}" (defaulting to MATERIAL if not clearly STYLE) and generate the required JSON output. Remember, ONLY the JSON.`;
+    // --- End of updated prompt ---
+
+    console.log(`Calling ${model.model} for simplified conditional prompt enhancement...`);
+    const result = await model.generateContent(enhancementPrompt);
+    const response = await result.response;
+    const responseText = response.text();
+    // --- Log the raw response ---
+    console.log("Raw AI response text:", responseText);
+    // ---
+
+    try {
+      let jsonResponse;
+      // --- Attempt to extract JSON more robustly ---
+      // 1. Look for JSON within ```json ... ``` markdown
+      const markdownMatch = responseText.match(/```json\s*([\s\S]*?)\s*```/);
+      if (markdownMatch && markdownMatch[1]) {
+        try {
+          jsonResponse = JSON.parse(markdownMatch[1]);
+          console.log("Parsed JSON from markdown block.");
+        } catch (e) {
+          console.warn("Failed to parse JSON from markdown block, trying direct parse.");
+          jsonResponse = JSON.parse(responseText); // Fallback to direct parse
+        }
+      } else {
+         // 2. If no markdown, try direct parse (might work if AI behaved)
+        jsonResponse = JSON.parse(responseText);
+        console.log("Parsed JSON directly.");
+      }
+      // --- End of robust extraction ---
+
+      // Basic validation
+      if (!jsonResponse || typeof jsonResponse.enhancedPrompt !== 'string' || typeof jsonResponse.suggestedName !== 'string') {
+        // Ensure fields exist and are strings
+        throw new Error("AI response missing required fields or fields are not strings.");
+      }
+      return res.status(200).json(jsonResponse);
+    } catch (e) {
+      console.error("Error parsing AI JSON response or invalid format:", e.message);
+      console.error("Original AI text that failed parsing:", responseText); // Log the text again on error
+      // Fallback if response isn't valid JSON after attempts
+      return res.status(200).json({
+        enhancedPrompt: basePrompt, // Use original base prompt
+        suggestedName: materialName // Use original material name
+      });
+    }
+  } catch (error) {
+    console.error('Error enhancing prompt:', error);
+    // Send 500 if anything in the main try block fails (API key, model call, etc.)
+    return res.status(500).json({ error: 'Failed to enhance prompt' });
+  }
+} 

pages/api/generate-thumbnail.js

@@ -0,0 +1,124 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+import fs from 'fs';
+import path from 'path';
+
+// Define a fallback shape in case no reference image is provided and the file doesn't exist
+// This is a simple white circle on black background encoded as base64
+const DEFAULT_SHAPE_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAi8SURBVHgB7d1NbFTXGcfxM8aACYSXQBEhUEkDESRKNggCaLuosmFTqUKq1KibLqtWXbTqolI3lbqoumm7qFREUTabsEGUDYIEUBohIV4SCiYhvAXwCzaGsX3vHXvseAnFzMw9c+/5faQrKImdGVme//M8595zuoqJ+wdHu4HCeXP4xIHuYnvwvWpbcePOZGVyfrHaXW3/WfNs81/T/trE3NNq8/NnS9X5xWq1+blRrVZnZ+uNmalarcwVbUBpCQAQyNbRkV07Rrt7do9Dj43s3DzSvfFH/T9YnGyHg6kNYeDZ8+qzqbnF6pPpZ9WHM5OK/qPCnioA2vp7u/vunRz9eVdn8deNY6/1DvV393//W0nf44VnQ4+fxpWH03Ofv/Powb9ynxVA7gkAAO9Y/NMQMDK4peeTdw+N9fV095w+2v/j7aSuQfvswMPJ+cc377343/sPF+6/rDYaEvq7u7Zs7u3q3be9d9vY9t5Txfbj8eKjNSz+FdpnBf59Z/rxrXsvHk/UZh8UeY8AQK4JAECJvQr906eP9v80ica/Dq3F/+f9w73F4l+prL/2RuP5i/p/7j6bvXXvxfP3H8zfLeLtAyF/BABgiaqLf9GKbp9a+Vr8KxvB4FX6X24EhH/cfnrr3vS1IpxlEPJFAAAE2/iPTQ5vPzY5/JM8LfybQeD6nWc3/nn76YeFx3MKPxCEAAAU1HAx8B8vtv3jOV78l+vV4n/9zrMb//riyYcPns4p/EACAgBQIMM7+iYmhred2Lmt91TZFv9lWov/P28/vXr9i+mP7k8/r3llAGyQAADk3PB2i/+rbeQ/v1i4eu3zh9fuTD+2QwBsQOqCm1/9d9Vf5/d/eSJI/Z+E99rQli8fd5wYGep7N59/LRvx/b6enl2jO3qLAWBkzeMFAG9N9E0q+hsMFtv//GpyfOLY9h8s///tNQlbzS9+evRH+zaP9ZXO3m39Pcd/uv2rL4pd49A51l47ZnZ0d/ecLIavfaO7duwt3TGDDdp2/EfRNwEi7/wGgA2ov/yLnX9x9uKJ0UNjO/vK+BkA3tTQ4Jbjrw32DF/5+P7l63ef3LBDAHwHOwDAJnXWZv9zvHf47NGxbSND20qdYtvQluNvt7YYOAMABbPZNmXbAGjfEjh7YmTnyNiwswAQjY+XbHFz9sTIrrGdrWcEvHdAEiWOlgBQYLs29/bOPZ07e/eTs2/XGtvK/JkB1qvVcLz6bMCVk2NDuw/s6ttVfNl3DYI34xYAUHDDQ1uqz56dffbRrZPXJmfPPZtfGIrbDHyb1pD+7h29w5uH+x4c3jvQ0/w9ADaHHQBA4XV3dxfD/K4Pjh/adXR8yxVnAaDzWmcBTh/d3l88Y+Kq3xfQOU7KgBLZta1v4dF07XHz9r8N9ffMxG4GltOakV2D9VYbsPRZAGcCYGPcAgBKxmcGYP0sf0DJTOzcPrhnW+8pnwXg63xh7wRHQFBCPjPA6xrNz/Mbp1UAQF45CoLS/g1o/o2YmDs3c/aPl+biyuXYzUAMi3MP52Zmrz797WxjIXYrEEOluq3a1jMVuwkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGIQM6C8+nsrhwf3Ns9frP7n7vPYvUBH/PbXE5WxXQPVm5dqc7GbgRj6D8duAGJonajde7Sw78JfprfNLzaitwMd8Yd3x7tHdw80ZmYXe2M3AzE4CoLSmnuyMPLLc1+sPmw8HY7dC2zM785O1o/s22btR3nZAYDSmpubHTt2a2Ru9OL09fqzheJDUYnYEwXOLdTjtwJp2QGAEmucnLn3+MXi6Lmbs+dnGwuuoAAQjQAApfb48eNdr03V9nffmr9e/K/MAABEIwBAqbUWgPGHC/t6bs3ZBQAgGgEASmxpcZjY0Xt9bnrfhemp5ofjgyIAkDIBAErt1QJwYv+2fRcfzRybU8cAiEQAgFJ7tQCM7urfNzG/YAcAgGgEACi1pQXg2NGdw9cezwkAAEQjAECpLS0AE/u3VYp11g4AANEIAFBqSwvA8V2D3b0VawcAwPswC4DSWloAuvs9JAYAYwcASu3VAjBjBwCA6KwAUGqvFoApzwEAICoBAAZEAACIxwoApSYAABCPAAClJgAAEI8VAKUmAAAQjwAApSYAABCPFQBKTQAAIB4BAEpNAAAgHisAlJoAAEA8AgCUmgAAQDxWACg1AQCAeAQAKDUBAIB4rABQagIAAPEIAFBqAgAA8VgBoNQEAADiEQCg1AQAAOKxAkCpCQAAxCMAQKkJAADEYwWAUhMAAIhHAIBSEwAAiMcKAKUmAAAQjwAApSYAABCPFQBKTQAAIB4BAEpNAAAgHisAlJoAAEA8AgCUmgAAQDxWACg1AQCAeAQAKDUBAIB4rABQagIAAPEIAFBqAgAA8VgBoNQEAADiEQCg1AQAAOKxAkCpCQAAxCMAQKkJAADEYwWAUhMAAIhHAIBSEwAAiMcKAKUmAAAQjwAApSYAABCPFQBKTQAAIB4BAEpNAAAgHisAlJoAAEA8AgCUmgAAQDxWACg1AQCAeAQAKDUBAIB4rABQagIAAPEIAFBqAgAA8VgBoNQEAADiEQCg1AQAAOKxAkCpCQAAxCMAQKkJAADEYwWAUhMAAIhHAIBSEwAAiMcKAFDSI2AeRxWdAABATsRuANKrx24AYnj1CbAZAq7G7gUAotpx/EfRNwEi7/wGgBIrtn//OLa/a+rWyZGZ4uBNBfVAJC9nYncAnfOd5/evv9j5z56bHKkVC2zRQdEJVHwIAMqo9eDvv04V535zbGLyq8qB4uMuhTWxFw9I9S/tLx4VfXFWqrHe1fU/bEAO49+azcIAAAAASUVORK5CYII=';
+
+// Helper function to read the image file
+const loadImageData = (filePath) => {
+  try {
+    const absolutePath = path.resolve('./public', filePath); // Adjust if your public dir is elsewhere
+    console.log(`Loading reference image from: ${absolutePath}`);
+    if (fs.existsSync(absolutePath)) {
+      const imageBuffer = fs.readFileSync(absolutePath);
+      return imageBuffer.toString('base64');
+    } else {
+      console.error(`Reference image not found at: ${absolutePath}`);
+      return null;
+    }
+  } catch (error) {
+    console.error('Error loading reference image:', error);
+    return null;
+  }
+};
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  console.log('Starting thumbnail generation request');
+  
+  try {
+    const { prompt, referenceImageData } = req.body;
+    
+    if (!prompt) {
+      console.error('Missing prompt in request');
+      return res.status(400).json({ error: 'Prompt is required' });
+    }
+
+    console.log('Received prompt:', prompt.substring(0, 100));
+    
+    // Initialize the model
+    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.0-flash-exp-image-generation",
+      generationConfig: {
+        temperature: 0.8,
+        topP: 0.9,
+        topK: 40,
+        maxOutputTokens: 8192,
+      }
+    });
+
+    // Get the base image data (either from request or default)
+    const baseImageData = referenceImageData || DEFAULT_SHAPE_DATA_URL;
+    console.log('Using reference image:', referenceImageData ? 'Custom' : 'Default');
+
+    // Construct the prompt for the image model
+    const imageGenerationPrompt = `Treat the object shown in the reference image (the white circle) as a simple 3D sphere. Apply the following material description or style directly onto this sphere...`;
+
+    console.log('Generated image prompt:', imageGenerationPrompt.substring(0, 100));
+
+    // Prepare generation content
+    const generationContent = [
+      { text: imageGenerationPrompt },
+      {
+        inlineData: {
+          data: baseImageData,
+          mimeType: "image/png"
+        }
+      },
+    ];
+
+    console.log('Calling Gemini API for image generation...');
+    
+    // Generate content
+    const result = await model.generateContent(generationContent);
+    const response = await result.response;
+
+    console.log('Received response from Gemini API');
+    
+    // Process response
+    let generatedImageData = null;
+    // Safely access parts
+    const parts = response?.candidates?.[0]?.content?.parts;
+    
+    if (!parts) {
+      console.error('No parts in response:', JSON.stringify(response));
+      throw new Error('No parts in response from Gemini API');
+    }
+    
+    console.log('Processing response parts:', parts.length);
+    
+    if (Array.isArray(parts)) {
+      for (const part of parts) {
+        if (part.inlineData && part.inlineData.mimeType?.startsWith('image/')) {
+          generatedImageData = part.inlineData.data;
+          console.log('Found image data in response');
+          break;
+        }
+      }
+    }
+
+    if (!generatedImageData) {
+      console.error('No image data in response parts:', JSON.stringify(parts));
+      throw new Error('No image data found in response parts');
+    }
+
+    console.log('Successfully generated thumbnail');
+    return res.status(200).json({
+      success: true,
+      imageData: generatedImageData
+    });
+    
+  } catch (error) {
+    console.error('Error in thumbnail generation:', error);
+    return res.status(500).json({
+      success: false,
+      error: error.message || 'An error occurred during thumbnail generation'
+    });
+  }
+} 

pages/api/generate.js

@@ -0,0 +1,197 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+// Configure API route options
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb' // Increase the body size limit to 10MB
+    }
+  }
+};
+
+export default async function handler(req, res) {
+  // Only allow POST requests
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  // Add retry configuration
+  const MAX_RETRIES = 2;
+  const RETRY_DELAY = 1000; // 1 second
+  let retryCount = 0;
+  
+  // Function to wait for a delay
+  const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+
+  try {
+    const { prompt, drawingData, customApiKey, generateTextOnly } = req.body;
+
+    // Validate prompt
+    if (!prompt) {
+      console.error('Missing prompt in request');
+      return res.status(400).json({ error: 'Prompt is required' });
+    }
+
+    // Log the API request details (excluding the full drawing data for brevity)
+    console.log('API Request:', {
+      prompt: prompt.substring(0, 100) + '...',
+      hasDrawingData: !!drawingData,
+      hasCustomApiKey: !!customApiKey,
+      generateTextOnly: !!generateTextOnly,
+      retryCount
+    });
+
+    // Check API key
+    const apiKey = customApiKey || process.env.GEMINI_API_KEY;
+    if (!apiKey) {
+      console.error('Missing Gemini API key');
+      return res.status(500).json({ error: 'API key is not configured' });
+    }
+
+    // Retry loop for handling transient errors
+    while (true) {
+      try {
+        console.log(`Initializing Gemini AI with API key (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`);
+        const genAI = new GoogleGenerativeAI(apiKey);
+        
+        // Configure the model with settings based on the request type
+        console.log('Configuring Gemini model');
+        const model = genAI.getGenerativeModel({
+          model: "gemini-2.0-flash-exp-image-generation",
+          generationConfig: {
+            temperature: 1,
+            topP: 0.95,
+            topK: 40,
+            maxOutputTokens: 8192,
+            responseModalities: generateTextOnly ? ["text"] : ["image", "text"]
+          }
+        });
+
+        // Handle text-only generation
+        if (generateTextOnly) {
+          console.log('Generating text-only response');
+          
+          // Make text-only API call
+          const result = await model.generateContent(prompt);
+          const response = await result.response;
+          
+          // Extract text from response
+          const textResponse = response.text();
+          
+          console.log('Generated text response:', textResponse.substring(0, 100) + '...');
+          
+          return res.status(200).json({
+            success: true,
+            textResponse: textResponse
+          });
+        }
+
+        // For image generation, proceed as normal
+        // Prepare the generation content
+        let generationContent;
+        if (drawingData) {
+          console.log('Including drawing data in generation request');
+          // If we have drawing data, include it in the request
+          generationContent = [
+            {
+              inlineData: {
+                data: drawingData,
+                mimeType: "image/png"
+              }
+            },
+            { text: prompt }
+          ];
+        } else {
+          console.log('Using text-only prompt for generation');
+          // Text-only prompt if no drawing
+          generationContent = [{ text: prompt }];
+        }
+
+        console.log(`Calling Gemini API for image generation (attempt ${retryCount + 1}/${MAX_RETRIES + 1})...`);
+        const result = await model.generateContent(generationContent);
+        console.log('Gemini API response received');
+        
+        const response = await result.response;
+        
+        // Process the response to extract image data
+        let imageData = null;
+        if (!response?.candidates?.[0]?.content?.parts) {
+          console.error('Invalid response structure:', response);
+          throw new Error('Invalid response structure from Gemini API');
+        }
+
+        for (const part of response.candidates[0].content.parts) {
+          if (part.inlineData) {
+            imageData = part.inlineData.data;
+            console.log('Found image data in response');
+            break;
+          }
+        }
+
+        if (!imageData) {
+          console.error('No image data in response parts:', response.candidates[0].content.parts);
+          throw new Error('No image data found in response parts');
+        }
+
+        console.log('Successfully generated image');
+        return res.status(200).json({
+          success: true,
+          imageData: imageData
+        });
+        
+        // If we reach here, we succeeded, so break out of the retry loop
+        break;
+        
+      } catch (attemptError) {
+        // Only retry certain types of errors that might be transient
+        const isRetryableError = 
+          attemptError.message?.includes('timeout') ||
+          attemptError.message?.includes('network') ||
+          attemptError.message?.includes('ECONNRESET') ||
+          attemptError.message?.includes('rate limit') ||
+          attemptError.message?.includes('503') ||
+          attemptError.message?.includes('500') ||
+          attemptError.message?.includes('connection');
+          
+        // Check if we should retry
+        if (retryCount < MAX_RETRIES && isRetryableError) {
+          console.log(`Retryable error encountered (${retryCount + 1}/${MAX_RETRIES}):`, attemptError.message);
+          retryCount++;
+          // Wait before retrying
+          await wait(RETRY_DELAY * retryCount);
+          continue;
+        }
+        
+        // If we've exhausted retries or it's not a retryable error, rethrow
+        throw attemptError;
+      }
+    }
+  } catch (error) {
+    console.error('Error in /api/generate:', error);
+    
+    // Check for specific error types
+    if (error.message?.includes('quota') || error.message?.includes('Resource has been exhausted')) {
+      return res.status(429).json({
+        error: 'API quota exceeded. Please try again later or use your own API key.'
+      });
+    }
+
+    if (error.message?.includes('API key')) {
+      return res.status(500).json({
+        error: 'Invalid or missing API key. Please check your configuration.'
+      });
+    }
+    
+    if (error.message?.includes('safety') || error.message?.includes('blocked') || error.message?.includes('harmful')) {
+      return res.status(400).json({
+        error: 'Content was blocked due to safety filters. Try a different prompt.'
+      });
+    }
+    
+    return res.status(500).json({
+      error: error.message || 'An error occurred during generation.',
+      details: error.stack,
+      retries: retryCount
+    });
+  }
+}

pages/api/hello.js

@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function handler(req, res) {
+  res.status(200).json({ name: "John Doe" });
+}

pages/api/refine.js

@@ -0,0 +1,88 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+// Configure API route options
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb' // Increase the body size limit to 10MB
+    }
+  }
+};
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { prompt, imageData, customApiKey } = req.body;
+
+    // Use custom API key if provided
+    const apiKey = customApiKey || process.env.GEMINI_API_KEY;
+    const genAI = new GoogleGenerativeAI(apiKey);
+    
+    // Configure the model with the correct settings
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.0-flash-exp-image-generation",
+      generationConfig: {
+        temperature: 1,
+        topP: 0.95,
+        topK: 40,
+        maxOutputTokens: 8192,
+        responseModalities: ["image", "text"]
+      }
+    });
+
+    // Prepare a more specific prompt for the refinement
+    const refinementPrompt = `Please refine this image according to the following instruction: "${prompt}". 
+    Maintain the artistic quality and style while applying the requested changes.
+    Ensure the output is a high-quality image that preserves the original intent while incorporating the refinement.`;
+
+    // Prepare the generation content with both image and prompt
+    const generationContent = [
+      {
+        inlineData: {
+          data: imageData,
+          mimeType: "image/png"
+        }
+      },
+      { text: refinementPrompt }
+    ];
+
+    // Generate content with the image and prompt
+    const result = await model.generateContent(generationContent);
+    const response = await result.response;
+    
+    // Process the response to extract image data
+    let refinedImageData = null;
+    for (const part of response.candidates[0].content.parts) {
+      if (part.inlineData) {
+        refinedImageData = part.inlineData.data;
+        break;
+      }
+    }
+
+    if (!refinedImageData) {
+      throw new Error('No image data received from the API');
+    }
+
+    // Return the refined image data
+    return res.status(200).json({
+      success: true,
+      imageData: refinedImageData
+    });
+  } catch (error) {
+    console.error('Error in /api/refine:', error);
+    
+    // Check for specific error types
+    if (error.message?.includes('quota') || error.message?.includes('Resource has been exhausted')) {
+      return res.status(429).json({
+        error: 'API quota exceeded. Please try again later or use your own API key.'
+      });
+    }
+    
+    return res.status(500).json({
+      error: 'An error occurred during image refinement.'
+    });
+  }
+} 

pages/api/validate-key.js

@@ -0,0 +1,63 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+export default async function handler(req, res) {
+  // Only allow POST requests
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  // Extract API key from request
+  const { apiKey } = req.body;
+
+  if (!apiKey) {
+    return res.status(400).json({ 
+      valid: false,
+      error: 'No API key provided'
+    });
+  }
+
+  try {
+    // Initialize the Gemini API
+    const genAI = new GoogleGenerativeAI(apiKey);
+    
+    // Use a simple model call with minimal tokens to check key validity
+    const model = genAI.getGenerativeModel({
+      model: "gemini-1.5-flash",
+      generationConfig: {
+        temperature: 0,
+        maxOutputTokens: 10
+      }
+    });
+
+    // Make a simple API call to test the key
+    const prompt = "Respond with 'valid' and nothing else.";
+    const result = await model.generateContent(prompt);
+    const response = await result.response;
+    
+    // If we get here, the key is valid
+    return res.status(200).json({
+      valid: true
+    });
+  } catch (error) {
+    console.error('API key validation error:', error.message);
+    
+    // Check if the error is due to an invalid API key
+    if (
+      error.message?.includes('invalid API key') || 
+      error.message?.includes('API key not valid') ||
+      error.message?.includes('403')
+    ) {
+      return res.status(200).json({
+        valid: false,
+        error: 'Invalid API key'
+      });
+    }
+    
+    // For other errors (like network issues), consider the key potentially valid
+    // to avoid disrupting users unnecessarily
+    return res.status(200).json({
+      valid: true,
+      warning: 'Could not fully validate key due to error: ' + error.message
+    });
+  }
+} 

pages/api/visual-enhance-prompt.js

@@ -0,0 +1,238 @@
+import { GoogleGenerativeAI } from '@google/generative-ai';
+
+// Configure API route options
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: '10mb' // Increase the body size limit to 10MB for larger images
+    }
+  }
+};
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { image, basePrompt } = req.body;
+    if (!image) {
+      return res.status(400).json({ error: 'Image is required' });
+    }
+
+    // Extract base64 data
+    const base64Data = image.split(',')[1];
+    if (!base64Data) {
+      return res.status(400).json({ error: 'Invalid image format' });
+    }
+
+    // Use custom API key if provided, else use environment variable
+    const apiKey = req.body.customApiKey || process.env.GEMINI_API_KEY;
+    const genAI = new GoogleGenerativeAI(apiKey);
+
+    // Use the image-capable model with text output configuration
+    const model = genAI.getGenerativeModel({
+      model: "gemini-2.0-flash-exp-image-generation", // Use the required model with image capabilities
+      generationConfig: {
+        temperature: 0.8,
+        topP: 0.95,
+        topK: 40,
+        maxOutputTokens: 8192,
+        responseModalities: ["text"] // Explicitly request only text output
+      }
+    });
+
+    // Prepare the image parts
+    const imageParts = [
+      {
+        inlineData: {
+          data: base64Data,
+          mimeType: "image/jpeg"
+        }
+      }
+    ];
+
+    // Create the prompt for analyzing the image and generating material details
+    const defaultBasePrompt = "Transform this sketch into a material with professional studio lighting against a pure black background. Render it in Cinema 4D with Octane for a high-end 3D visualization.";
+    const enhancementPrompt = `CONTEXT: You are an expert AI assisting with 3D prompt generation. Your task is to analyze the uploaded reference image, extract its key visual qualities, and generate an enhanced 3D rendering prompt for Cinema 4D and Octane based on these visual qualities.
+
+BASE PROMPT TO REWRITE: "${basePrompt || defaultBasePrompt}" // (Note: C4D/Octane, black background, studio lighting should generally be maintained unless the image style dictates otherwise).
+
+TASK:
+1. **Analyze the image** to identify its dominant visual characteristics:
+   * Material properties
+   * Texture patterns and surface details
+   * Color schemes and visual style
+   * Lighting and mood
+   * Any special effects or unique visual elements
+
+2. **Generate an enhanced prompt** that:
+   * Accurately captures the essence of the reference image's material/style
+   * Provides clear direction for a 3D artist to recreate similar visual qualities
+   * Includes specific details about textures, lighting, rendering techniques
+   * Maintains the Cinema 4D/Octane rendering requirements with studio lighting and black background (unless style requires otherwise)
+
+3. **Generate a simple, descriptive 'suggestedName'**:
+   * Create a concise, memorable name (1-3 words) that captures the essence of the material/style
+   * Capitalize main words
+   * Examples: "Liquid Gold", "Frosted Glass", "Neon Wire", "Velvet Fabric"
+
+4. Output ONLY a single valid JSON object: {"enhancedPrompt": "...", "suggestedName": "..."}. Do not include your analysis reasoning or any other text outside the JSON.
+
+EXAMPLES OF GOOD RESPONSES:
+* For a chrome metal image: {"enhancedPrompt": "Recreate this sketch as a physical chrome sculpture with highly reflective surfaces that catch and distort reflections. Render it in Cinema 4D with Octane, using professional studio lighting against a pure black background to highlight the mirror-like finish and metallic sheen.", "suggestedName": "Chrome Metal"}
+* For a honey-like substance: {"enhancedPrompt": "Transform this sketch into a form made of translucent amber honey with thick, viscous properties. Capture the way light penetrates and scatters within the golden material, creating rich internal glow. Render in Cinema 4D with Octane against a black background with dramatic studio lighting to emphasize the material's refraction, high-gloss surface, and organic flowing behavior.", "suggestedName": "Liquid Honey"}`;
+
+    console.log('Calling Gemini Vision API for image analysis and prompt enhancement...');
+    
+    // Generate content by sending both the text prompt and image
+    const result = await model.generateContent([enhancementPrompt, ...imageParts]);
+    const response = await result.response;
+    const responseText = response.text();
+    
+    console.log('Received response from Gemini');
+    console.log("Raw AI response text:", responseText);
+
+    try {
+      let jsonResponse;
+      // --- Attempt to extract JSON more robustly ---
+      // 1. Look for JSON within ```json ... ``` markdown
+      const markdownMatch = responseText.match(/```json\s*([\s\S]*?)\s*```/);
+      if (markdownMatch && markdownMatch[1]) {
+        try {
+          jsonResponse = JSON.parse(markdownMatch[1]);
+          console.log("Parsed JSON from markdown block.");
+        } catch (e) {
+          console.warn("Failed to parse JSON from markdown block, trying direct parse.");
+          jsonResponse = JSON.parse(responseText); // Fallback to direct parse
+        }
+      } else {
+        // 2. If no markdown, try direct parse (might work if AI behaved)
+        try {
+          jsonResponse = JSON.parse(responseText);
+          console.log("Parsed JSON directly.");
+        } catch (e) {
+          console.log('Response not in JSON format, attempting to extract JSON');
+          
+          // Try to extract JSON from text response
+          const jsonMatch = responseText.match(/\{[\s\S]*\}/);
+          if (jsonMatch) {
+            jsonResponse = JSON.parse(jsonMatch[0]);
+            console.log("Extracted JSON using regex.");
+          } else {
+            throw new Error("Could not extract JSON from response");
+          }
+        }
+      }
+      // --- End of robust extraction ---
+
+      // Basic validation
+      if (!jsonResponse || typeof jsonResponse.enhancedPrompt !== 'string' || typeof jsonResponse.suggestedName !== 'string') {
+        // Ensure fields exist and are strings
+        throw new Error("AI response missing required fields or fields are not strings.");
+      }
+
+      // Now let's generate a thumbnail using the enhanced prompt
+      console.log("Generating thumbnail with enhanced prompt");
+      
+      // Variable to store the thumbnail image data
+      let thumbnailImageData = null;
+      
+      try {
+        // Create a new model instance configured for image generation
+        const thumbnailModel = genAI.getGenerativeModel({
+          model: "gemini-2.0-flash-exp-image-generation",
+          generationConfig: {
+            temperature: 0.8,
+            topP: 0.9,
+            topK: 40,
+            maxOutputTokens: 8192,
+            responseModalities: ["image", "text"] // Include both image and text modalities
+          }
+        });
+
+        // Create a thumbnail generation prompt that applies the material to a sphere
+        const thumbnailPrompt = `Using this uploaded reference image only as visual inspiration for material properties, create a clean isolated 3D sphere with the following material applied to it:
+
+Material Description: "${jsonResponse.enhancedPrompt}"
+
+Requirements:
+- Create a simple 3D sphere (like a white ball) against a pure black background
+- Apply only the material described above to the sphere
+- Use professional studio lighting to showcase the material properties
+- The sphere should take up most of the frame
+- The final result should be a clean, professional material preview
+- Do NOT maintain the original shape or content of the reference image
+- Focus ONLY on accurately representing the material properties on a sphere`;
+
+        // Prepare the generation content - order is important!
+        const generationContent = [
+          {
+            inlineData: {
+              data: base64Data,
+              mimeType: "image/jpeg"
+            }
+          },
+          { text: thumbnailPrompt }
+        ];
+
+        // Generate content
+        const thumbnailResult = await thumbnailModel.generateContent(generationContent);
+        const thumbnailResponse = await thumbnailResult.response;
+        
+        // Extract the image data from the response
+        for (const part of thumbnailResponse.candidates[0].content.parts) {
+          if (part.inlineData) {
+            thumbnailImageData = part.inlineData.data;
+            break;
+          }
+        }
+
+        // Check if we got image data back
+        if (!thumbnailImageData) {
+          console.error('No image data received from the Gemini API for thumbnail generation');
+          // Continue without thumbnail but don't fail the whole request
+        }
+      } catch (thumbnailError) {
+        console.error('Error generating thumbnail:', thumbnailError);
+        // Continue without failing the whole request
+        // thumbnailImageData remains null
+      }
+
+      // Return the complete response with both text and image data
+      return res.status(200).json({
+        enhancedPrompt: jsonResponse.enhancedPrompt,
+        suggestedName: jsonResponse.suggestedName,
+        imageData: thumbnailImageData
+      });
+      
+    } catch (e) {
+      console.error("Error processing AI response:", e.message);
+      console.error("Original AI text that failed processing:", responseText);
+      
+      // Create a fallback response
+      const fallbackName = "Custom Material";
+      const fallbackPrompt = basePrompt || defaultBasePrompt;
+      
+      return res.status(200).json({
+        enhancedPrompt: fallbackPrompt,
+        suggestedName: fallbackName,
+        imageData: null // No thumbnail in fallback case
+      });
+    }
+  } catch (error) {
+    console.error('Error in visual-enhance-prompt:', error);
+    
+    // Check for quota exceeded errors
+    if (error.message?.includes('quota') || error.message?.includes('Resource has been exhausted')) {
+      return res.status(429).json({
+        error: 'API quota exceeded. Please try again later or use your own API key.'
+      });
+    }
+    
+    return res.status(500).json({ 
+      error: 'Failed to process image',
+      details: error.message 
+    });
+  }
+} 

pages/index.js

@@ -0,0 +1,18 @@
+import Head from "next/head";
+import dynamic from 'next/dynamic';
+
+// Dynamically import the CanvasContainer component with SSR disabled
+const CanvasContainer = dynamic(() => import('../components/CanvasContainer'), { ssr: false });
+
+export default function HomePage() {
+  return (
+    <>
+      <Head>
+        <title>Chrome Sketch Generator</title>
+        <meta name="description" content="Turn your sketches into chrome sculptures" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <CanvasContainer />
+    </>
+  );
+}

public/GoogleSans/GoogleSans-Medium.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0994842b75ad61e6e1fcc0c7a47b7dcce351be36b4f2456a6684648478b08692
+size 178132

public/GoogleSans/GoogleSans-MediumItalic.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b03977bc652e580acfe0edc7eadbf5004a6c7fd3e67356af48e1fe4a241661b7
+size 183516

public/GoogleSans/GoogleSans-Regular.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21af9156c5e5d661640cea25d851ceb3d866185ee038f5a1c8866c8ba4294e62
+size 178668

public/GoogleSans/GoogleSansDisplay-Bold.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e8b2e170cd91d732a24dfb69bfac10d410b0d765f12628ed9a70266c5da7830
+size 175860

public/GoogleSans/GoogleSansDisplay-BoldItalic.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:314d2f951e1bd1a0368b8f8d45589049e750cc3c10f2d366c0eb6d5fbc5697bc
+size 184800

public/GoogleSans/GoogleSansDisplay-Italic.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7ccb361856d661fb9a1a5fffbdf7441ae24c670b21aab5619c6f2a01d4e80c80
+size 184596

public/GoogleSans/GoogleSansDisplay-Regular.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a4c51691a0d484d5e2422554907122d267c8cfd65946994e5e3e26d80068cdc
+size 176520