update app

Home.tsx

@@ -21,7 +21,7 @@ import {
 } from 'lucide-react';
 import {useState, useRef, useEffect} from 'react';
 
-const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
+// REMOVED: const ai = new GoogleGenAI({apiKey: process.env.API_KEY});
 
 const aspectRatios = ['1:1', '16:9', '9:16', '4:3', '3:4'];
 
@@ -59,6 +59,13 @@ export default function Home() {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // New state for API Key management
+  const [apiKey, setApiKey] = useState('');
+  const [showApiKeyModal, setShowApiKeyModal] = useState(false);
+  const [tempApiKey, setTempApiKey] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+
   // Canvas state
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isDrawing, setIsDrawing] = useState(false);
@@ -341,6 +348,43 @@ export default function Home() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (!apiKey) {
+      setShowApiKeyModal(true);
+      return;
+    }
+
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+    await generateOrEditImage();
+    setIsSubmitting(false);
+
+  }
+
+  const handleApiKeySubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!tempApiKey) {
+      setErrorMessage("Please enter an API key.");
+      return;
+    }
+    setApiKey(tempApiKey);
+    setShowApiKeyModal(false);
+    
+    // Use a timeout to allow state to update before triggering generation
+    setTimeout(() => {
+      if (isSubmitting) return;
+      setIsSubmitting(true);
+      generateOrEditImage(tempApiKey).finally(() => setIsSubmitting(false));
+    }, 0);
+  };
+
+
+  const generateOrEditImage = async (currentApiKey?: string) => {
+    const keyToUse = currentApiKey || apiKey;
+    if (!keyToUse) {
+      setShowApiKeyModal(true);
+      return;
+    }
+
     if (!prompt) {
       setErrorMessage('Please enter a prompt to continue.');
       return;
@@ -356,6 +400,7 @@ export default function Home() {
     setErrorMessage('');
 
     try {
+      const ai = new GoogleGenAI({apiKey: keyToUse});
       if ((mode === 'image-to-image' && sourceImages.length > 0) || mode === 'draw-to-image') {
 
         const parts = [];
@@ -378,16 +423,18 @@ export default function Home() {
         parts.push(textPart);
 
         const response = await ai.models.generateContent({
-          model: 'gemini-2.5-flash-image',
+          model: 'gemini-1.5-flash-latest',
           contents: {parts},
           config: {
-            responseModalities: [Modality.IMAGE, Modality.TEXT],
+            responseMimeType: 'application/json',
           },
         });
-
+        
         let foundImage = false;
-        if(response.candidates && response.candidates[0].content.parts) {
-          for (const part of response.candidates[0].content.parts) {
+        const parsedResponse = JSON.parse(response.text);
+
+        if(parsedResponse.candidates && parsedResponse.candidates[0].content.parts) {
+          for (const part of parsedResponse.candidates[0].content.parts) {
             if (part.inlineData) {
               const imageUrl = `data:${part.inlineData.mimeType};base64,${part.inlineData.data}`;
               setResultImages([imageUrl]);
@@ -398,7 +445,7 @@ export default function Home() {
         }
         
         if (!foundImage) {
-          const textMessage = response.text;
+          const textMessage = parsedResponse.text;
           setErrorMessage(
             textMessage ||
               'The model did not return an image. Please try a different prompt.',
@@ -406,7 +453,7 @@ export default function Home() {
         }
       } else { // Text-to-image
         const response = await ai.models.generateImages({
-          model: 'imagen-4.0-generate-001',
+          model: 'imagen-3.0-generate-001',
           prompt: prompt,
           config: {
             numberOfImages: numberOfImages,
@@ -644,7 +691,7 @@ export default function Home() {
                       <div className="info-tooltip-container">
                         <Info className="w-4 h-4 info-icon" />
                         <span className="info-tooltip">
-                          The model used for this mode is <code>imagen-4.0-generate-001</code>.
+                          The model used for this mode is <code>imagen-3.0-generate-001</code>.
                         </span>
                       </div>
                     )}
@@ -652,7 +699,7 @@ export default function Home() {
                       <div className="info-tooltip-container">
                         <Info className="w-4 h-4 info-icon" />
                         <span className="info-tooltip">
-                          The model used for image editing is <code>gemini-2.5-flash-image</code>.
+                          The model used for image editing is <code>gemini-1.5-flash-latest</code>.
                         </span>
                       </div>
                     )}
@@ -858,6 +905,43 @@ export default function Home() {
           </div>
         </div>
       )}
+
+      {showApiKeyModal && (
+        <div className="modal-backdrop">
+          <div className="card modal-card api-key-modal">
+            <div className="head">
+              <span>Add Your Gemini API Key</span>
+               <button
+                onClick={() => setShowApiKeyModal(false)}
+                className="modal-close-button">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="content">
+              <p className="api-key-info">
+                Your API key is only stored for this session and will be lost when you reload or exit the page. It is not shared or exposed anywhere.
+              </p>
+              <form onSubmit={handleApiKeySubmit} className="api-key-form">
+                <input
+                  type="password"
+                  value={tempApiKey}
+                  onChange={(e) => setTempApiKey(e.target.value)}
+                  className="input"
+                  placeholder="Enter your Gemini API Key"
+                  required
+                />
+                <button type="submit" className="button primary" disabled={isLoading}>
+                  {isLoading ? (
+                    <LoaderCircle className="w-5 h-5 animate-spin" />
+                  ) : (
+                    "Submit & Run"
+                  )}
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }