api recycling with refresh timeouts (fix2) (#5)

- api recycling with refresh timeouts (fix2) (ec3ea359b5501f062afc0d951d7b03305ec80bad)

Home.tsx

@@ -1,9 +1,8 @@
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
-*/
+ */
 /* tslint:disable */
-import {Content, GoogleGenAI, Modality} from '@google/genai';
 import {
   Library,
   LoaderCircle,
@@ -16,26 +15,34 @@ import {
 } from 'lucide-react';
 import {useEffect, useRef, useState} from 'react';
 
+// This function remains useful for parsing potential error messages from the proxy
 function parseError(error: string) {
-  const regex = /{"error":(.*)}/gm;
-  const m = regex.exec(error);
   try {
-    const e = m[1];
-    const err = JSON.parse(e);
-    return err.message || error;
+    const errObj = JSON.parse(error);
+    return errObj.message || error;
   } catch (e) {
-    return error;
+    const regex = /{"error":(.*)}/gm;
+    const m = regex.exec(error);
+    try {
+      const e = m[1];
+      const err = JSON.parse(e);
+      return err.message || error;
+    } catch (e) {
+      return error;
+    }
   }
 }
 
 export default function Home() {
-  const canvasRef = useRef(null);
-  const fileInputRef = useRef(null);
-  const backgroundImageRef = useRef(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const backgroundImageRef = useRef<HTMLImageElement | null>(null);
   const [isDrawing, setIsDrawing] = useState(false);
   const [prompt, setPrompt] = useState('');
   const [generatedImage, setGeneratedImage] = useState<string | null>(null);
-  const [multiImages, setMultiImages] = useState<string[]>([]);
+  const [multiImages, setMultiImages] = useState<{url: string; type: string}[]>(
+    [],
+  );
   const [isLoading, setIsLoading] = useState(false);
   const [showErrorModal, setShowErrorModal] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -43,15 +50,9 @@ export default function Home() {
     'canvas' | 'editor' | 'imageGen' | 'multi-img-edit'
   >('editor');
 
-  const [apiKey, setApiKey] = useState('');
-  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
-  const [tempApiKey, setTempApiKey] = useState('');
-  const submissionRef = useRef<(() => Promise<void>) | null>(null);
-
   // 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;
@@ -61,19 +62,18 @@ export default function Home() {
     }
   }, [generatedImage]);
 
-  // Initialize canvas with white background when component mounts
+  // Initialize canvas when component mounts or mode changes to canvas
   useEffect(() => {
-    if (canvasRef.current) {
+    if (mode === 'canvas' && canvasRef.current) {
       initializeCanvas();
     }
-  }, []);
+  }, [mode]);
 
   // Initialize canvas with white background
   const initializeCanvas = () => {
     const canvas = canvasRef.current;
+    if (!canvas) return;
     const ctx = canvas.getContext('2d');
-
-    // Fill canvas with white background
     ctx.fillStyle = '#FFFFFF';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
   };
@@ -81,15 +81,10 @@ 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');
-
-    // Fill with white background first
     ctx.fillStyle = '#FFFFFF';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // Draw the background image
     ctx.drawImage(
       backgroundImageRef.current,
       0,
@@ -100,15 +95,11 @@ export default function Home() {
   };
 
   // Get the correct coordinates based on canvas scaling
-  const getCoordinates = (e) => {
-    const canvas = canvasRef.current;
+  const getCoordinates = (e: any) => {
+    const canvas = canvasRef.current!;
     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 ||
@@ -119,34 +110,22 @@ export default function Home() {
     };
   };
 
-  const startDrawing = (e) => {
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+  const startDrawing = (e: any) => {
+    if (e.type === 'touchstart') e.preventDefault();
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
     const {x, y} = getCoordinates(e);
-
-    // Prevent default behavior to avoid scrolling on touch devices
-    if (e.type === 'touchstart') {
-      e.preventDefault();
-    }
-
-    // Start a new path without clearing the canvas
     ctx.beginPath();
     ctx.moveTo(x, y);
     setIsDrawing(true);
   };
 
-  const draw = (e) => {
+  const draw = (e: any) => {
     if (!isDrawing) return;
-
-    // Prevent default behavior to avoid scrolling on touch devices
-    if (e.type === 'touchmove') {
-      e.preventDefault();
-    }
-
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+    if (e.type === 'touchmove') e.preventDefault();
+    const canvas = canvasRef.current!;
+    const ctx = canvas.getContext('2d')!;
     const {x, y} = getCoordinates(e);
-
     ctx.lineWidth = 5;
     ctx.lineCap = 'round';
     ctx.strokeStyle = '#000000';
@@ -159,17 +138,16 @@ export default function Home() {
   };
 
   const handleClear = () => {
-    // For canvas, we must clear the actual drawing strokes
     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);
     }
-    // For all modes, we clear the background/uploaded/generated image state
     setGeneratedImage(null);
     setMultiImages([]);
     backgroundImageRef.current = null;
+    setPrompt('');
   };
 
   const processFiles = (files: FileList | null) => {
@@ -181,9 +159,10 @@ export default function Home() {
 
     if (mode === 'multi-img-edit') {
       const readers = fileArray.map((file) => {
-        return new Promise<string>((resolve, reject) => {
+        return new Promise<{url: string; type: string}>((resolve, reject) => {
           const reader = new FileReader();
-          reader.onload = () => resolve(reader.result as string);
+          reader.onload = () =>
+            resolve({url: reader.result as string, type: file.type});
           reader.onerror = reject;
           reader.readAsDataURL(file);
         });
@@ -192,17 +171,18 @@ export default function Home() {
         setMultiImages((prev) => [...prev, ...newImages]);
       });
     } else {
-      // single file modes
+      const file = fileArray[0];
       const reader = new FileReader();
       reader.onload = () => {
         setGeneratedImage(reader.result as string);
       };
-      reader.readAsDataURL(fileArray[0]);
+      reader.readAsDataURL(file);
     }
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     processFiles(e.target.files);
+    e.target.value = '';
   };
 
   const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
@@ -229,24 +209,10 @@ export default function Home() {
     );
   };
 
-  const handleApiKeySubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (tempApiKey) {
-      setErrorMessage(''); // Clear previous error message
-      setApiKey(tempApiKey);
-      setShowApiKeyModal(false);
-      setTempApiKey('');
-      if (submissionRef.current) {
-        await submissionRef.current();
-        submissionRef.current = null;
-      }
-    }
-  };
-
-  const handleSubmit = async (e) => {
+  // *** COMPLETELY REWRITTEN AND FIXED FUNCTION ***
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    // Pre-submission checks that don't require an API key
     if (mode === 'editor' && !generatedImage) {
       setErrorMessage('Please upload an image to edit.');
       setShowErrorModal(true);
@@ -259,135 +225,108 @@ export default function Home() {
       return;
     }
 
-    const submitAction = async () => {
-      setIsLoading(true);
-      try {
-        const ai = new GoogleGenAI({apiKey});
-
-        if (mode === 'imageGen') {
-          const response = await ai.models.generateImages({
-            model: 'imagen-4.0-generate-001',
-            prompt: prompt,
-            config: {
-              numberOfImages: 1,
-            },
-          });
+    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),
+        });
 
-          const base64ImageBytes: string =
-            response.generatedImages[0].image.imageBytes;
-          const imageUrl = `data:image/png;base64,${base64ImageBytes}`;
-          setGeneratedImage(imageUrl);
+        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 {
-          // Editor, Canvas, and Multi-Img modes
-          const parts: any[] = [];
-          if (mode === 'canvas') {
-            if (!canvasRef.current) return;
-            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 imageB64 = tempCanvas.toDataURL('image/png').split(',')[1];
-            parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
-          } else if (mode === 'editor') {
-            const imageB64 = generatedImage.split(',')[1];
-            parts.push({inlineData: {data: imageB64, mimeType: 'image/png'}});
-          } else if (mode === 'multi-img-edit') {
-            multiImages.forEach((img) => {
-              parts.push({
-                inlineData: {data: img.split(',')[1], mimeType: 'image/png'},
-              });
-            });
-          }
-
-          parts.push({text: prompt});
-
-          const contents: Content[] = [{role: 'USER', parts}];
+            throw new Error('Image generation failed to return an image.');
+        }
 
-          const response = await ai.models.generateContent({
-            model: 'gemini-2.5-flash-image-preview',
-            contents,
-            config: {
-              responseModalities: [Modality.TEXT, Modality.IMAGE],
-            },
+      } 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},
+            });
           });
+        }
+        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),
+        });
 
-          const data = {
-            success: true,
-            message: '',
-            imageData: null,
-            error: undefined,
-          };
-          for (const part of response.candidates[0].content.parts) {
-            if (part.text) {
-              data.message = part.text;
-            } else if (part.inlineData) {
-              data.imageData = part.inlineData.data;
+        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.');
+        }
 
-          if (data.imageData) {
-            const imageUrl = `data:image/png;base64,${data.imageData}`;
+        if (result.imageData) {
+            const imageUrl = `data:image/png;base64,${result.imageData}`;
             if (mode === 'multi-img-edit') {
-              setGeneratedImage(imageUrl);
-              setMultiImages([]);
-              setMode('editor');
+                setGeneratedImage(imageUrl);
+                setMultiImages([]);
+                setMode('editor');
             } else {
-              setGeneratedImage(imageUrl);
+                setGeneratedImage(imageUrl);
             }
-          } else {
-            setErrorMessage(
-              data.message || 'Failed to generate image. Please try again.',
-            );
-            setShowErrorModal(true);
-          }
-        }
-      } catch (error) {
-        console.error('Error submitting:', error);
-        const parsedError = parseError(error.message);
-        if (
-          parsedError &&
-          (parsedError.includes('API_KEY_INVALID') ||
-            parsedError.includes('API key not valid'))
-        ) {
-          setErrorMessage(
-            'Your API key is not valid. Please enter a valid key to continue.',
-          );
-          setApiKey(''); // Clear the invalid key
-          setShowApiKeyModal(true); // Re-show the modal
-          // submissionRef is not cleared, so user can retry.
         } else {
-          setErrorMessage(parsedError || 'An unexpected error occurred.');
-          setShowErrorModal(true);
+            setErrorMessage(result.message || 'Failed to generate image. Please try again.');
+            setShowErrorModal(true);
         }
-      } finally {
-        setIsLoading(false);
       }
-    };
-
-    if (!apiKey) {
-      submissionRef.current = submitAction;
-      setShowApiKeyModal(true);
-    } else {
-      await submitAction();
+    } catch (error: any) {
+      console.error('Error submitting:', error);
+      setErrorMessage(error.message || 'An unexpected error occurred.');
+      setShowErrorModal(true);
+    } finally {
+      setIsLoading(false);
     }
   };
 
-  // Close the error modal
   const closeErrorModal = () => {
     setShowErrorModal(false);
   };
 
-  // Add touch event prevention function
   useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
 
-    // Function to prevent default touch behavior on canvas
-    const preventTouchDefault = (e) => {
+    const preventTouchDefault = (e: TouchEvent) => {
       if (isDrawing) {
         e.preventDefault();
       }
@@ -400,7 +339,6 @@ export default function Home() {
       passive: false,
     });
 
-    // Remove event listener when component unmounts
     return () => {
       canvas.removeEventListener('touchstart', preventTouchDefault);
       canvas.removeEventListener('touchmove', preventTouchDefault);
@@ -408,16 +346,15 @@ export default function Home() {
   }, [isDrawing]);
 
   const baseDisplayClass =
-    'w-full sm:h-[60vh] h-[30vh] min-h-[320px] bg-white/90 touch-none flex items-center justify-center p-4 transition-colors';
+    'w-full sm:h-[60vh] h-[40vh] min-h-[320px] bg-white/90 touch-none flex items-center justify-center p-4 transition-colors';
 
   return (
     <>
-      <div className="min-h-screen notebook-paper-bg text-gray-900 flex flex-col justify-start items-center">
+      <div className="min-h-screen text-gray-900 flex flex-col justify-start items-center">
         <main className="container mx-auto px-3 sm:px-6 py-5 sm:py-10 pb-32 max-w-5xl w-full">
-          {/* Header section with title and tools */}
           <div className="flex flex-col sm:flex-row sm:justify-between sm:items-end mb-2 sm:mb-6 gap-2">
             <div>
-              <h1 className="text-2xl sm:text-3xl font-bold mb-0 leading-tight font-mega">
+              <h1 className="text-2xl sm:text-3xl font-bold mb-0 leading-tight">
                 Nano Banana AIO
               </h1>
               <p className="text-sm sm:text-base text-gray-500 mt-1">
@@ -432,7 +369,7 @@ export default function Home() {
                 by{' '}
                 <a
                   className="underline"
-                  href="https://www.linkedin.com/in/prithiv-sakthi/"
+                  href="https://huggingface.co/prithivMLmods"
                   target="_blank"
                   rel="noopener noreferrer">
                   prithivsakthi-ur
@@ -441,46 +378,50 @@ export default function Home() {
             </div>
 
             <menu className="flex items-center bg-gray-300 rounded-full p-2 shadow-sm self-start sm:self-auto">
-              <div className="flex items-center bg-gray-200/80 rounded-full p-1 mr-2">
+              <div className="flex flex-wrap justify-center items-center bg-gray-200/80 rounded-full p-1 mr-2">
                 <button
                   onClick={() => setMode('editor')}
-                  className={`px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                  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" /> Editor
+                  <PictureInPicture className="w-4 h-4" />
+                  <span className="hidden sm:inline">Editor</span>
                 </button>
-                <button
+                 <button
                   onClick={() => setMode('multi-img-edit')}
-                  className={`px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                  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" /> Multi-Image
+                  <Library className="w-4 h-4" />
+                   <span className="hidden sm:inline">Multi-Image</span>
                 </button>
                 <button
                   onClick={() => setMode('canvas')}
-                  className={`px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                  className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
                     mode === 'canvas'
                       ? 'bg-white shadow'
                       : 'text-gray-600 hover:bg-gray-300/50'
                   }`}
                   aria-pressed={mode === 'canvas'}>
-                  <Paintbrush className="w-4 h-4" /> Canvas
+                  <Paintbrush className="w-4 h-4" />
+                  <span className="hidden sm:inline">Canvas</span>
                 </button>
                 <button
                   onClick={() => setMode('imageGen')}
-                  className={`px-3 py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
+                  className={`p-2 sm:px-3 sm:py-1.5 rounded-full text-sm font-medium flex items-center gap-2 transition-colors ${
                     mode === 'imageGen'
                       ? 'bg-white shadow'
                       : 'text-gray-600 hover:bg-gray-300/50'
                   }`}
                   aria-pressed={mode === 'imageGen'}>
-                  <Sparkles className="w-4 h-4" /> Image Gen
+                  <Sparkles className="w-4 h-4" />
+                  <span className="hidden sm:inline">Image Gen</span>
                 </button>
               </div>
               <button
@@ -495,7 +436,6 @@ export default function Home() {
             </menu>
           </div>
 
-          {/* Main display section */}
           <div className="w-full mb-6">
             <input
               ref={fileInputRef}
@@ -518,7 +458,7 @@ export default function Home() {
                 onTouchStart={startDrawing}
                 onTouchMove={draw}
                 onTouchEnd={stopDrawing}
-                className="border-2 border-black w-full sm:h-[60vh] h-[30vh] min-h-[320px] bg-white/90 touch-none"
+                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",
@@ -565,7 +505,7 @@ export default function Home() {
                     {multiImages.map((image, index) => (
                       <div key={index} className="relative group aspect-square">
                         <img
-                          src={image}
+                          src={image.url}
                           alt={`upload preview ${index + 1}`}
                           className="w-full h-full object-cover rounded-md"
                         />
@@ -599,7 +539,7 @@ export default function Home() {
             ) : (
               // Image Gen mode display
               <div
-                className={`${baseDisplayClass} border-2 ${
+                className={`relative ${baseDisplayClass} border-2 ${
                   generatedImage ? 'border-black' : 'border-gray-400'
                 }`}>
                 {generatedImage ? (
@@ -628,9 +568,11 @@ export default function Home() {
                 placeholder={
                   mode === 'imageGen'
                     ? 'Describe the image you want to create...'
+                    : mode === 'multi-img-edit'
+                    ? 'Describe how to edit or combine the images...'
                     : 'Add your change...'
                 }
-                className="w-full p-3 sm:p-4 pr-12 sm:pr-14 text-sm sm:text-base border-2 border-black bg-white text-gray-800 shadow-sm focus:ring-2 focus:ring-gray-200 focus:outline-none transition-all font-mono"
+                className="w-full p-3 sm:p-4 pr-12 sm:pr-14 text-sm sm:text-base border-2 border-black bg-white text-gray-800 shadow-sm focus:ring-2 focus:ring-gray-200 focus:outline-none transition-all"
                 required
               />
               <button
@@ -652,54 +594,6 @@ export default function Home() {
             </div>
           </form>
         </main>
-        {/* 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">
-              <form onSubmit={handleApiKeySubmit}>
-                <div className="flex justify-between items-start mb-4">
-                  <h3 className="text-xl font-bold text-gray-700">
-                    Add Gemini API Key
-                  </h3>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setShowApiKeyModal(false);
-                      setErrorMessage('');
-                      submissionRef.current = null; // Cancel submission
-                    }}
-                    className="text-gray-400 hover:text-gray-500"
-                    aria-label="Close">
-                    <X className="w-5 h-5" />
-                  </button>
-                </div>
-                <p className="text-gray-600 mb-4 text-sm">
-                  Add the API key to process the request. The API key will be
-                  removed if the app page is refreshed or closed.
-                </p>
-                {errorMessage && (
-                  <p className="text-red-500 text-sm mb-2 font-medium">
-                    {errorMessage}
-                  </p>
-                )}
-                <input
-                  type="password"
-                  value={tempApiKey}
-                  onChange={(e) => setTempApiKey(e.target.value)}
-                  placeholder="Enter your Gemini API Key"
-                  className="w-full p-2 mb-4 border-2 border-gray-300 rounded focus:ring-2 focus:ring-gray-400 focus:outline-none transition-all"
-                  required
-                  aria-label="Gemini API Key"
-                />
-                <button
-                  type="submit"
-                  className="w-full p-2 bg-black text-white rounded hover:bg-gray-800 transition-colors">
-                  Save & Continue
-                </button>
-              </form>
-            </div>
-          </div>
-        )}
         {/* Error Modal */}
         {showErrorModal && (
           <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">