fixing the debug modal + image upload

components/CanvasContainer.js

@@ -69,6 +69,7 @@ const CanvasContainer = () => {
   const [showErrorModal, setShowErrorModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [customApiKey, setCustomApiKey] = useState("");
+  const [debugMode, setDebugMode] = useState(false);
   const [styleMode, setStyleMode] = useState("material");
   const [strokeCount, setStrokeCount] = useState(0);
   const strokeTimeoutRef = useRef(null);
@@ -108,8 +109,37 @@ const CanvasContainer = () => {
       // Validate the API key silently
       validateApiKey(savedApiKey);
     }
+    
+    // Check if debug mode is enabled in localStorage or URL
+    const debugParam = new URLSearchParams(window.location.search).get('debug');
+    // Only look at localStorage if debug parameter is not explicitly set to false
+    const savedDebug = debugParam !== "false" && localStorage.getItem("debugMode") === "true";
+    
+    if (debugParam === "true" || savedDebug) {
+      // Set debug mode to true AND show error modal
+      setDebugMode(true);
+      setShowErrorModal(true);
+    } else {
+      // Ensure debug mode is OFF by default
+      setDebugMode(false);
+      // Also clean up any stale localStorage value
+      if (localStorage.getItem("debugMode") === "true") {
+        localStorage.setItem("debugMode", "false");
+      }
+    }
   }, []);
 
+  // Add effect to save debug mode to localStorage
+  useEffect(() => {
+    // Always save the current state to localStorage
+    localStorage.setItem("debugMode", debugMode.toString());
+    
+    // ONLY auto-show error modal when debug mode is enabled
+    if (debugMode === true) {
+      setShowErrorModal(true);
+    }
+  }, [debugMode]);
+
   // Add a function to validate the API key
   const validateApiKey = async (apiKey) => {
     if (!apiKey) return;
@@ -1608,6 +1638,8 @@ const CanvasContainer = () => {
         customApiKey={customApiKey}
         setCustomApiKey={setCustomApiKey}
         handleApiKeySubmit={handleApiKeySubmit}
+        debugMode={debugMode}
+        setDebugMode={setDebugMode}
       />
 
       <ApiKeyModal

components/ErrorModal.js

@@ -1,4 +1,4 @@
-import { X } from 'lucide-react';
+import { X, Bug } from 'lucide-react';
 import { useState, useEffect } from 'react';
 
 const ErrorModal = ({ 
@@ -6,7 +6,10 @@ const ErrorModal = ({
   closeErrorModal, 
   customApiKey, 
   setCustomApiKey, 
-  handleApiKeySubmit 
+  handleApiKeySubmit,
+  // Add debug toggle prop with default value
+  debugMode = false,
+  setDebugMode = () => {}
 }) => {
   const [localApiKey, setLocalApiKey] = useState(customApiKey);
   
@@ -29,29 +32,69 @@ const ErrorModal = ({
               closeErrorModal();
             }
           }}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              closeErrorModal();
+            }
+          }}
         >
-          <div className="bg-white p-6 rounded-xl shadow-medium max-w-md w-full mx-4 my-8">
+          <dialog 
+            open
+            className="bg-white p-6 rounded-xl shadow-medium max-w-md w-full mx-4 my-8 relative"
+            aria-labelledby="error-modal-title"
+          >
             <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>
+                <h2 id="error-modal-title" className="text-xl font-medium text-gray-800">This space is super popular</h2>
+                <div className="flex items-center gap-2">
+                  {/* Debug toggle button - only visible in development */}
+                  {process.env.NODE_ENV === 'development' && (
+                    <div className="relative group">
+                      <button
+                        type="button"
+                        onClick={() => setDebugMode(!debugMode)}
+                        className={`flex items-center justify-center p-1.5 rounded transition-colors ${
+                          debugMode 
+                            ? 'bg-blue-500 text-white hover:bg-blue-600' 
+                            : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
+                        }`}
+                        aria-label={debugMode ? "Debug mode on" : "Debug mode off"}
+                      >
+                        <Bug className="w-4 h-4" />
+                        <span className="ml-1 text-xs font-medium">{debugMode ? "ON" : "OFF"}</span>
+                      </button>
+                      
+                      {/* Tooltip */}
+                      <div className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 hidden group-hover:block w-48 p-2 bg-gray-800 text-xs text-white rounded shadow-lg z-10">
+                        <p className="text-center">
+                          Debug Mode: {debugMode ? "ON" : "OFF"}
+                        </p>
+                        <p className="mt-1">
+                          When enabled, this modal will automatically appear on page load for development purposes.
+                        </p>
+                        <div className="w-2 h-2 bg-gray-800 absolute left-1/2 -bottom-1 -ml-1 rotate-45" />
+                      </div>
+                    </div>
+                  )}
+                  <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>
               
               <div className="text-gray-600">
                 <p className="mb-2">
-                  You've exceeded your API quota. You can:
+                  Our free API key is currently at capacity. To continue:
                 </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>
+                <ol className="list-decimal pl-5 space-y-2 mb-0">
+                  <li>Get your own API key at <a href="https://ai.dev/app/apikey" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-800 underline">ai.dev/app/apikey</a></li>
+                  <li>Enter it below</li>
+                </ol>
               </div>
               
               <form onSubmit={handleSubmit} className="space-y-3">
@@ -70,7 +113,6 @@ const ErrorModal = ({
                     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
@@ -90,7 +132,7 @@ const ErrorModal = ({
                 </div>
               </form>
             </div>
-          </div>
+          </dialog>
         </div>
       )}
     </>

pages/api/convert-to-doodle.js

@@ -16,6 +16,14 @@ export default async function handler(req, res) {
     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 { imageData, customApiKey } = req.body;
 
@@ -30,21 +38,25 @@ export default async function handler(req, res) {
       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"]
-      }
-    });
+    // Retry loop for handling transient errors
+    while (true) {
+      try {
+        console.log(`Initializing Gemini AI for doodle conversion (attempt ${retryCount + 1}/${MAX_RETRIES + 1})`);
+        // 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.
+        // 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
@@ -58,43 +70,103 @@ Requirements:
   * 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"
+        // Prepare the generation content
+        const generationContent = [
+          {
+            inlineData: {
+              data: imageData,
+              mimeType: "image/png"
+            }
+          },
+          { text: prompt }
+        ];
+
+        // Generate content
+        console.log(`Calling Gemini API for doodle conversion (attempt ${retryCount + 1}/${MAX_RETRIES + 1})...`);
+        const result = await model.generateContent(generationContent);
+        const response = await result.response;
+        console.log('Gemini API response received for doodle conversion');
+        
+        // Process the response to extract image data
+        let convertedImageData = 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) {
+            convertedImageData = part.inlineData.data;
+            console.log('Found image data in doodle conversion response');
+            break;
+          }
         }
-      },
-      { 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) {
+          console.error('No image data in response parts:', response.candidates[0].content.parts);
+          throw new Error('No image data received from the API');
+        }
 
-    if (!convertedImageData) {
-      throw new Error('No image data received from the API');
+        // Return the converted image data
+        console.log('Successfully generated doodle');
+        return res.status(200).json({
+          success: true,
+          imageData: convertedImageData
+        });
+        
+      } 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('overloaded') ||
+          attemptError.message?.includes('connection');
+          
+        // Check if we should retry
+        if (retryCount < MAX_RETRIES && isRetryableError) {
+          console.log(`Retryable error encountered in doodle conversion (${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;
+      }
     }
-
-    // Return the converted image data
-    return res.status(200).json({
-      success: true,
-      imageData: convertedImageData
-    });
   } catch (error) {
     console.error("Error during doodle conversion:", 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.'
+      });
+    }
+    
     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 });
+    return res.status(500).json({ 
+      success: false, 
+      error: errorMessage,
+      details: error.stack,
+      retries: retryCount
+    });
   }
 }