api recycling with refresh timeouts (fix3) (#6)

- api recycling with refresh timeouts (fix3) (911eec7e32093e71ab0e42be7277825d2fa0d151)

Home.tsx

@@ -4,23 +4,28 @@
  */
 /* tslint:disable */
 import {
+  ChevronDown,
   Library,
   LoaderCircle,
   Paintbrush,
   PictureInPicture,
+  Redo2,
   SendHorizontal,
   Sparkles,
   Trash2,
+  Undo2,
   X,
 } from 'lucide-react';
 import {useEffect, useRef, useState} from 'react';
 
-// This function remains useful for parsing potential error messages from the proxy
+// This function remains useful for parsing potential error messages
 function parseError(error: string) {
   try {
+    // Attempt to parse the error as a JSON object which the proxy might send
     const errObj = JSON.parse(error);
     return errObj.message || error;
   } catch (e) {
+    // If it's not JSON, return the original error string
     const regex = /{"error":(.*)}/gm;
     const m = regex.exec(error);
     try {
@@ -37,18 +42,54 @@ export default function Home() {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const backgroundImageRef = useRef<HTMLImageElement | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [prompt, setPrompt] = useState('');
   const [generatedImage, setGeneratedImage] = useState<string | null>(null);
-  const [multiImages, setMultiImages] = useState<{url: string; type: string}[]>(
-    [],
-  );
+  const [multiImages, setMultiImages] = useState<
+    {url: string; type: string}[]
+  >([]);
   const [isLoading, setIsLoading] = useState(false);
   const [showErrorModal, setShowErrorModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const [mode, setMode] = useState<
     'canvas' | 'editor' | 'imageGen' | 'multi-img-edit'
   >('editor');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
+
+  // State for canvas history
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIndex, setHistoryIndex] = useState(-1);
+
+  // When switching to canvas mode, initialize it and its history
+  useEffect(() => {
+    if (mode === 'canvas' && canvasRef.current) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // If an image already exists from another mode, draw it.
+      if (generatedImage) {
+        const img = new window.Image();
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          // Save this as the initial state for this session
+          const dataUrl = canvas.toDataURL();
+          setHistory([dataUrl]);
+          setHistoryIndex(0);
+        };
+        img.src = generatedImage;
+      } else {
+        // Otherwise, save the blank state as initial
+        const dataUrl = canvas.toDataURL();
+        setHistory([dataUrl]);
+        setHistoryIndex(0);
+      }
+    }
+  }, [mode, generatedImage]);
 
   // Load background image when generatedImage changes
   useEffect(() => {
@@ -57,17 +98,30 @@ export default function Home() {
       img.onload = () => {
         backgroundImageRef.current = img;
         drawImageToCanvas();
+        if (mode === 'canvas') {
+          // A small timeout to let the draw happen before saving
+          setTimeout(saveCanvasState, 50);
+        }
       };
       img.src = generatedImage;
     }
-  }, [generatedImage]);
+  }, [generatedImage, mode]);
 
-  // Initialize canvas when component mounts or mode changes to canvas
+  // Handle clicks outside the dropdown to close it
   useEffect(() => {
-    if (mode === 'canvas' && canvasRef.current) {
-      initializeCanvas();
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
     }
-  }, [mode]);
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [dropdownRef]);
 
   // Initialize canvas with white background
   const initializeCanvas = () => {
@@ -81,6 +135,7 @@ export default function Home() {
   // Draw the background image to the canvas
   const drawImageToCanvas = () => {
     if (!canvasRef.current || !backgroundImageRef.current) return;
+
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
     ctx.fillStyle = '#FFFFFF';
@@ -94,6 +149,46 @@ export default function Home() {
     );
   };
 
+  // Canvas history functions
+  const saveCanvasState = () => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const dataUrl = canvas.toDataURL();
+    const newHistory = history.slice(0, historyIndex + 1);
+    newHistory.push(dataUrl);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+  };
+
+  const restoreCanvasState = (index: number) => {
+    if (!canvasRef.current || !history[index]) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const dataUrl = history[index];
+    const img = new window.Image();
+    img.onload = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    };
+    img.src = dataUrl;
+  };
+
+  const handleUndo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+
+  const handleRedo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      restoreCanvasState(newIndex);
+    }
+  };
+
   // Get the correct coordinates based on canvas scaling
   const getCoordinates = (e: any) => {
     const canvas = canvasRef.current!;
@@ -111,10 +206,12 @@ export default function Home() {
   };
 
   const startDrawing = (e: any) => {
-    if (e.type === 'touchstart') e.preventDefault();
     const canvas = canvasRef.current!;
     const ctx = canvas.getContext('2d')!;
     const {x, y} = getCoordinates(e);
+    if (e.type === 'touchstart') {
+      e.preventDefault();
+    }
     ctx.beginPath();
     ctx.moveTo(x, y);
     setIsDrawing(true);
@@ -122,7 +219,9 @@ export default function Home() {
 
   const draw = (e: any) => {
     if (!isDrawing) return;
-    if (e.type === 'touchmove') e.preventDefault();
+    if (e.type === 'touchmove') {
+      e.preventDefault();
+    }
     const canvas = canvasRef.current!;
     const ctx = canvas.getContext('2d')!;
     const {x, y} = getCoordinates(e);
@@ -134,15 +233,17 @@ export default function Home() {
   };
 
   const stopDrawing = () => {
+    if (!isDrawing) return;
     setIsDrawing(false);
+    saveCanvasState();
   };
 
   const handleClear = () => {
     if (mode === 'canvas' && canvasRef.current) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext('2d');
-      ctx.fillStyle = '#FFFFFF';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      initializeCanvas();
+      const dataUrl = canvasRef.current.toDataURL();
+      setHistory([dataUrl]);
+      setHistoryIndex(0);
     }
     setGeneratedImage(null);
     setMultiImages([]);
@@ -209,105 +310,121 @@ export default function Home() {
     );
   };
 
-  // *** COMPLETELY REWRITTEN AND FIXED FUNCTION ***
+  // *** MODIFIED FUNCTION ***
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (mode === 'editor' && !generatedImage) {
-      setErrorMessage('Please upload an image to edit.');
-      setShowErrorModal(true);
-      return;
-    }
-
-    if (mode === 'multi-img-edit' && multiImages.length === 0) {
-      setErrorMessage('Please upload at least one image to edit.');
-      setShowErrorModal(true);
+    if (!apiKey) {
+      setShowApiKeyModal(true);
       return;
     }
 
     setIsLoading(true);
 
     try {
-      let response;
-      if (mode === 'imageGen') {
-        // Handle Image Generation using the 'imagen' model via the proxy
-        const proxyUrl = '/api-proxy/v1beta/models/imagen-4.0-generate-001:generateImages';
-        const requestBody = { prompt };
-        response = await fetch(proxyUrl, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(requestBody),
-        });
+      if (mode === 'editor' && !generatedImage) {
+        setErrorMessage('Please upload an image to edit.');
+        setShowErrorModal(true);
+        return;
+      }
 
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
-        }
-        const responseData = await response.json();
-        if (responseData.generatedImages && responseData.generatedImages.length > 0) {
-            const base64ImageBytes = responseData.generatedImages[0].image.imageBytes;
-            const imageUrl = `data:image/png;base64,${base64ImageBytes}`;
-            setGeneratedImage(imageUrl);
-        } else {
-            throw new Error('Image generation failed to return an image.');
-        }
+      if (mode === 'multi-img-edit' && multiImages.length === 0) {
+        setErrorMessage('Please upload at least one image to edit.');
+        setShowErrorModal(true);
+        return;
+      }
 
-      } else {
-        // Handle all other modes (edit, canvas, multi-image) via the proxy
-        const parts: any[] = [];
-        if (mode === 'canvas') {
-          if (!canvasRef.current) return;
-          const imageB64 = canvasRef.current.toDataURL('image/png').split(',')[1];
-          parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
-        } else if (mode === 'editor' && generatedImage) {
-          const mimeType = generatedImage.substring(generatedImage.indexOf(':') + 1, generatedImage.indexOf(';'));
-          const imageB64 = generatedImage.split(',')[1];
-          parts.push({inlineData: {data: imageB64, mimeType}});
-        } else if (mode === 'multi-img-edit') {
-          multiImages.forEach((img) => {
-            parts.push({
-              inlineData: {data: img.url.split(',')[1], mimeType: img.type},
-            });
+      const parts: any[] = [];
+
+      // This logic for building the 'parts' array is correct.
+      if (mode === 'imageGen') {
+        const tempCanvas = document.createElement('canvas');
+        tempCanvas.width = 960;
+        tempCanvas.height = 540;
+        const tempCtx = tempCanvas.getContext('2d')!;
+        tempCtx.fillStyle = '#FFFFFF';
+        tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+        tempCtx.fillStyle = '#FEFEFE';
+        tempCtx.fillRect(0, 0, 1, 1);
+        const imageB64 = tempCanvas.toDataURL('image/png').split(',')[1];
+        parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
+      } else if (mode === 'canvas') {
+        if (!canvasRef.current) return;
+        const canvas = canvasRef.current;
+        const imageB64 = canvas.toDataURL('image/png').split(',')[1];
+        parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
+      } else if (mode === 'editor' && generatedImage) {
+        const mimeType = generatedImage.substring(
+          generatedImage.indexOf(':') + 1,
+          generatedImage.indexOf(';'),
+        );
+        const imageB64 = generatedImage.split(',')[1];
+        parts.push({inlineData: {data: imageB64, mimeType}});
+      } else if (mode === 'multi-img-edit') {
+        multiImages.forEach((img) => {
+          parts.push({
+            inlineData: {data: img.url.split(',')[1], mimeType: img.type},
           });
-        }
-        parts.push({text: prompt});
-
-        const proxyUrl = '/api-proxy/v1beta/models/gemini-2.5-flash-image-preview:generateContent';
-        const requestBody = { contents: [{role: 'USER', parts}] };
-        response = await fetch(proxyUrl, {
-            method: 'POST',
-            headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(requestBody),
         });
+      }
 
-        if (!response.ok) {
-            const errorData = await response.json();
-            throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
-        }
-        const responseData = await response.json();
-        const result = { message: '', imageData: null };
-        if (responseData.candidates && responseData.candidates.length > 0) {
-            for (const part of responseData.candidates[0].content.parts) {
-                if (part.text) result.message = part.text;
-                else if (part.inlineData) result.imageData = part.inlineData.data;
-            }
-        } else {
-            throw new Error('Invalid response structure from API.');
+      parts.push({text: prompt});
+
+      // Construct the request body for the Gemini REST API
+      const requestBody = {
+        contents: [{role: 'USER', parts}],
+      };
+
+      // Define the proxy endpoint
+      const proxyUrl = `/api-proxy/v1beta/models/gemini-pro-vision:generateContent?key=${apiKey}`;
+
+      // Use fetch to send the request to your proxy server
+      const response = await fetch(proxyUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(
+          errorData.error?.message || `HTTP error! status: ${response.status}`,
+        );
+      }
+
+      const responseData = await response.json();
+
+      // Process the response
+      const result = {message: '', imageData: null};
+
+      if (responseData.candidates && responseData.candidates.length > 0) {
+        for (const part of responseData.candidates[0].content.parts) {
+          if (part.text) {
+            result.message = part.text;
+          } else if (part.inlineData) {
+            result.imageData = part.inlineData.data;
+          }
         }
+      } else {
+        throw new Error('Invalid response structure from API.');
+      }
 
-        if (result.imageData) {
-            const imageUrl = `data:image/png;base64,${result.imageData}`;
-            if (mode === 'multi-img-edit') {
-                setGeneratedImage(imageUrl);
-                setMultiImages([]);
-                setMode('editor');
-            } else {
-                setGeneratedImage(imageUrl);
-            }
+      if (result.imageData) {
+        const imageUrl = `data:image/png;base64,${result.imageData}`;
+        if (mode === 'multi-img-edit') {
+          setGeneratedImage(imageUrl);
+          setMultiImages([]);
+          setMode('editor');
         } else {
-            setErrorMessage(result.message || 'Failed to generate image. Please try again.');
-            setShowErrorModal(true);
+          setGeneratedImage(imageUrl);
         }
+      } else {
+        setErrorMessage(
+          result.message || 'Failed to generate image. Please try again.',
+        );
+        setShowErrorModal(true);
       }
     } catch (error: any) {
       console.error('Error submitting:', error);
@@ -322,6 +439,15 @@ export default function Home() {
     setShowErrorModal(false);
   };
 
+  const handleApiKeySubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newApiKey = (e.target as any).apiKey.value;
+    if (newApiKey) {
+      setApiKey(newApiKey);
+      setShowApiKeyModal(false);
+    }
+  };
+
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
@@ -379,28 +505,63 @@ export default function Home() {
 
             <menu className="flex items-center bg-gray-300 rounded-full p-2 shadow-sm self-start sm:self-auto">
               <div className="flex flex-wrap justify-center items-center bg-gray-200/80 rounded-full p-1 mr-2">
-                <button
-                  onClick={() => setMode('editor')}
-                  className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
-                    mode === 'editor'
-                      ? 'bg-white shadow'
-                      : 'text-gray-600 hover:bg-gray-300/50'
-                  }`}
-                  aria-pressed={mode === 'editor'}>
-                  <PictureInPicture className="w-4 h-4" />
-                  <span className="hidden sm:inline">Editor</span>
-                </button>
-                 <button
-                  onClick={() => setMode('multi-img-edit')}
-                  className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
-                    mode === 'multi-img-edit'
-                      ? 'bg-white shadow'
-                      : 'text-gray-600 hover:bg-gray-300/50'
-                  }`}
-                  aria-pressed={mode === 'multi-img-edit'}>
-                  <Library className="w-4 h-4" />
-                   <span className="hidden sm:inline">Multi-Image</span>
-                </button>
+                <div className="relative" ref={dropdownRef}>
+                  <button
+                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                    className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                      mode === 'editor' || mode === 'multi-img-edit'
+                        ? 'bg-white shadow'
+                        : 'text-gray-600 hover:bg-gray-300/50'
+                    }`}
+                    aria-haspopup="true"
+                    aria-expanded={isDropdownOpen}>
+                    {mode === 'multi-img-edit' ? (
+                      <>
+                        <Library className="w-4 h-4" />
+                        <span className="hidden sm:inline">Multi-Image</span>
+                      </>
+                    ) : (
+                      <>
+                        <PictureInPicture className="w-4 h-4" />
+                        <span className="hidden sm:inline">Editor</span>
+                      </>
+                    )}
+                    <ChevronDown className="w-4 h-4 opacity-70" />
+                  </button>
+                  {isDropdownOpen && (
+                    <div className="absolute top-full mt-2 w-48 bg-white rounded-lg shadow-xl z-10 border border-gray-200 py-1">
+                      <button
+                        onClick={() => {
+                          setMode('editor');
+                          setIsDropdownOpen(false);
+                        }}
+                        className={`w-full text-left px-3 py-2 text-sm flex items-center gap-3 transition-colors ${
+                          mode === 'editor'
+                            ? 'bg-gray-100 text-gray-900'
+                            : 'text-gray-700 hover:bg-gray-50'
+                        }`}
+                        aria-pressed={mode === 'editor'}>
+                        <PictureInPicture className="w-4 h-4" />
+                        <span>Single Image Edit</span>
+                      </button>
+                      <button
+                        onClick={() => {
+                          setMode('multi-img-edit');
+                          setIsDropdownOpen(false);
+                        }}
+                        className={`w-full text-left px-3 py-2 text-sm flex items-center gap-3 transition-colors ${
+                          mode === 'multi-img-edit'
+                            ? 'bg-gray-100 text-gray-900'
+                            : 'text-gray-700 hover:bg-gray-50'
+                        }`}
+                        aria-pressed={mode === 'multi-img-edit'}>
+                        <Library className="w-4 h-4" />
+                        <span>Multi-Image Edit</span>
+                      </button>
+                    </div>
+                  )}
+                </div>
+
                 <button
                   onClick={() => setMode('canvas')}
                   className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
@@ -447,23 +608,41 @@ export default function Home() {
               multiple={mode === 'multi-img-edit'}
             />
             {mode === 'canvas' ? (
-              <canvas
-                ref={canvasRef}
-                width={960}
-                height={540}
-                onMouseDown={startDrawing}
-                onMouseMove={draw}
-                onMouseUp={stopDrawing}
-                onMouseLeave={stopDrawing}
-                onTouchStart={startDrawing}
-                onTouchMove={draw}
-                onTouchEnd={stopDrawing}
-                className="border-2 border-black w-full sm:h-[60vh] h-[40vh] min-h-[320px] bg-white/90 touch-none"
-                style={{
-                  cursor:
-                    "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FF0000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>') 12 12, crosshair",
-                }}
-              />
+              <div className="relative w-full">
+                <canvas
+                  ref={canvasRef}
+                  width={960}
+                  height={540}
+                  onMouseDown={startDrawing}
+                  onMouseMove={draw}
+                  onMouseUp={stopDrawing}
+                  onMouseLeave={stopDrawing}
+                  onTouchStart={startDrawing}
+                  onTouchMove={draw}
+                  onTouchEnd={stopDrawing}
+                  className="border-2 border-black w-full sm:h-[60vh] h-[40vh] min-h-[320px] bg-white/90 touch-none"
+                  style={{
+                    cursor:
+                      "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FF0000\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>') 12 12, crosshair",
+                  }}
+                />
+                <div className="absolute top-2 right-2 flex gap-2">
+                  <button
+                    onClick={handleUndo}
+                    disabled={historyIndex <= 0}
+                    className="p-2 bg-white rounded-md shadow disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors"
+                    aria-label="Undo">
+                    <Undo2 className="w-5 h-5" />
+                  </button>
+                  <button
+                    onClick={handleRedo}
+                    disabled={historyIndex >= history.length - 1}
+                    className="p-2 bg-white rounded-md shadow disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-100 transition-colors"
+                    aria-label="Redo">
+                    <Redo2 className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
             ) : mode === 'editor' ? (
               <div
                 className={`${baseDisplayClass} ${
@@ -614,6 +793,41 @@ export default function Home() {
             </div>
           </div>
         )}
+        {/* API Key Modal */}
+        {showApiKeyModal && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
+              <div className="flex justify-between items-start mb-4">
+                <h3 className="text-xl font-bold text-gray-700">
+                  Add Gemini API Key
+                </h3>
+                <button
+                  onClick={() => setShowApiKeyModal(false)}
+                  className="text-gray-400 hover:text-gray-500">
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+              <p className="text-gray-600 mb-4">
+                Add the API key to process the request. The API key will be
+                removed if the app page is refreshed or closed.
+              </p>
+              <form onSubmit={handleApiKeySubmit}>
+                <input
+                  type="password"
+                  name="apiKey"
+                  className="w-full p-2 border-2 border-gray-300 rounded-md mb-4"
+                  placeholder="Enter your Gemini API Key"
+                  required
+                />
+                <button
+                  type="submit"
+                  className="w-full bg-black text-white p-2 rounded-md hover:bg-gray-800 transition-colors">
+                  Submit
+                </button>
+              </form>
+            </div>
+          </div>
+        )}
       </div>
     </>
   );