update user api re-cycling

Home.tsx

@@ -98,8 +98,8 @@ const cropImage = (
 
 // FIX: Changed to an async function declaration to avoid JSX parsing issues with Promise return types.
 // FIX: Renamed `history` parameter to `descriptions` to avoid conflict with the browser's built-in `History` type.
-async function serviceDescribeImage(imageDataUrl: string, descriptions: ImageDescription[]): Promise<ImageDescription> {
-    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+async function serviceDescribeImage(imageDataUrl: string, descriptions: ImageDescription[], apiKey: string): Promise<ImageDescription> {
+    const ai = new GoogleGenAI({ apiKey });
     const parts = imageDataUrl.split(',');
     const mimeType = parts[0].match(/:(.*?);/)?.[1] || 'image/png';
     const base64Data = parts[1];
@@ -175,8 +175,8 @@ ${descriptions.length ? descriptions.filter(Boolean).map((desc,index)=>`${index+
 }
 
 // FIX: Changed to an async function declaration to avoid JSX parsing issues with Promise return types.
-async function serviceEnhance(croppedImageDataUrl: string, history: string[]): Promise<{ imageSrc: string }> {
-    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+async function serviceEnhance(croppedImageDataUrl: string, history: string[], apiKey: string): Promise<{ imageSrc: string }> {
+    const ai = new GoogleGenAI({ apiKey });
     const base64Data = croppedImageDataUrl.split(',')[1] || '';
     const imagePart = {
         inlineData: {
@@ -804,6 +804,10 @@ export default function Home() {
   const containerRef = useRef<HTMLDivElement>(null);
   const imageObjectURLRef = useRef<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  // New state for API key management
+  const [apiKey, setApiKey] = useState<string | null>(null);
+  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
 
   const loadInitialImage = useCallback(async () => {
     if (imageObjectURLRef.current) {
@@ -928,17 +932,34 @@ export default function Home() {
 
   const handleProcessClick = useCallback(() => {
     if (!stagedSelection) return;
-    startEnhancementProcess(stagedSelection.originalRect, stagedSelection.screenRect, stagedSelection.canvasDataUrl);
-    setStagedSelection(null);
-  }, [stagedSelection, startEnhancementProcess]);
+    if (apiKey) {
+      startEnhancementProcess(stagedSelection.originalRect, stagedSelection.screenRect, stagedSelection.canvasDataUrl);
+      setStagedSelection(null);
+    } else {
+      setShowApiKeyModal(true);
+    }
+  }, [stagedSelection, startEnhancementProcess, apiKey]);
+  
+  const handleApiKeySubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const newApiKey = e.currentTarget.apiKey.value;
+    if (newApiKey) {
+      setApiKey(newApiKey);
+      setShowApiKeyModal(false);
+      if (stagedSelection) {
+        startEnhancementProcess(stagedSelection.originalRect, stagedSelection.screenRect, stagedSelection.canvasDataUrl);
+        setStagedSelection(null);
+      }
+    }
+  };
 
   const runEnhancementJob = useCallback(async () => {
-    if (!enhancementJob || !image) return;
+    if (!enhancementJob || !image || !apiKey) return;
     setIsProcessing(true);
     try {
         const { originalRect, canvasWithSelectionDataUrl, pixelatedSrc } = enhancementJob;
         const descriptionHistory = history.slice(0, historyIndex + 1).map(h => h.description).filter((d): d is ImageDescription => d !== null);
-        const description = await serviceDescribeImage(canvasWithSelectionDataUrl, descriptionHistory);
+        const description = await serviceDescribeImage(canvasWithSelectionDataUrl, descriptionHistory, apiKey);
         setNewHistoryEntryData({ description, originalRect });
         const sourceImageWidth = image.naturalWidth;
         const sourceImageHeight = image.naturalHeight;
@@ -957,7 +978,7 @@ export default function Home() {
         const targetHeight = Math.round(targetWidth * aspect);
         const croppedForEnhancement = await cropImage(image, paddedRect, targetWidth, targetHeight, false);
         const prompts = [...descriptionHistory.map(d=>(d.prompt || '')), description.prompt || ''];
-        const { imageSrc: enhancedPaddedSrc } = await serviceEnhance(croppedForEnhancement, prompts);
+        const { imageSrc: enhancedPaddedSrc } = await serviceEnhance(croppedForEnhancement, prompts, apiKey);
 
         const enhancedPaddedImage = await new Promise<HTMLImageElement>((resolve, reject) => {
             const img = new Image();
@@ -988,7 +1009,7 @@ export default function Home() {
         setEnhancementJob(null);
         setIsProcessing(false);
     }
-  }, [enhancementJob, image, history, historyIndex]);
+  }, [enhancementJob, image, history, historyIndex, apiKey]);
   
   const handleEnhancementComplete = useCallback(() => {
     if (enhancedImageSrc && newHistoryEntryData) {
@@ -1046,7 +1067,7 @@ export default function Home() {
   }, [history, historyIndex, appState, isGeneratingGif]);
 
   const handleRegenerate = useCallback(async () => {
-    if (historyIndex <= 0 || appState === AppState.ENHANCING || isGeneratingGif) return;
+    if (historyIndex <= 0 || appState === AppState.ENHANCING || isGeneratingGif || !apiKey) return;
     setAppState(AppState.ENHANCING);
     setStagedSelection(null);
     const previousStep = history[historyIndex - 1];
@@ -1058,7 +1079,7 @@ export default function Home() {
       try {
         const descriptionHistory = history.slice(0, historyIndex).map(h => h.description).filter((d): d is ImageDescription => d !== null);
         const croppedForDescription = await cropImage(sourceImage, originalRect, originalRect.w, originalRect.h, false);
-        const description = await serviceDescribeImage(croppedForDescription, descriptionHistory);
+        const description = await serviceDescribeImage(croppedForDescription, descriptionHistory, apiKey);
         const sourceImageWidth = sourceImage.naturalWidth;
         const sourceImageHeight = sourceImage.naturalHeight;
         const padding = 0.5;
@@ -1076,7 +1097,7 @@ export default function Home() {
         const targetHeight = Math.round(targetWidth * aspect);
         const croppedForEnhancement = await cropImage(sourceImage, paddedRect, targetWidth, targetHeight, false);
         const prompts = [...descriptionHistory.map(d=>(d.prompt || '')), description.prompt || ''];
-        const { imageSrc: enhancedPaddedSrc } = await serviceEnhance(croppedForEnhancement, prompts);
+        const { imageSrc: enhancedPaddedSrc } = await serviceEnhance(croppedForEnhancement, prompts, apiKey);
 
         const enhancedPaddedImage = await new Promise<HTMLImageElement>((resolve, reject) => {
             const img = new Image(); img.crossOrigin = "anonymous"; img.onload = () => resolve(img); img.onerror = reject; img.src = enhancedPaddedSrc;
@@ -1100,7 +1121,7 @@ export default function Home() {
       } catch (error) { console.error("Regeneration failed:", error); setAppState(AppState.LOADED); }
     };
     sourceImage.src = previousStep.imageSrc;
-  }, [history, historyIndex, appState, isGeneratingGif]);
+  }, [history, historyIndex, appState, isGeneratingGif, apiKey]);
 
   const handleExportGif = useCallback(async () => {
     if (historyIndex < 1) return;
@@ -1169,6 +1190,42 @@ export default function Home() {
       )}
       <input type="file" ref={fileInputRef} onChange={handleFileSelect} style={{ display: 'none' }} accept="image/*" />
       <StatusBar state={appState} useFixedSelectionBox={useFixedSelectionBox} isInitialState={history.length <= 1} onUploadClick={handleUploadClick}/>
+      
+      {/* 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">
+                <span className="text-2xl">&times;</span>
+              </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 text-black"
+                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>
   );
 }