api recycling with refresh timeouts (#4)

- api recycling with refresh timeouts (484d16141fb459f21a28d2b2d8c3800e59d2fa87)

Home.tsx

@@ -56,6 +56,8 @@ export default function Home() {
     '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[]>([]);
@@ -256,6 +258,10 @@ export default function Home() {
     );
     if (fileArray.length === 0) return;
 
+    if (!apiKey) {
+      setShowApiKeyModal(true);
+    }
+
     if (mode === 'multi-img-edit') {
       const readers = fileArray.map((file) => {
         return new Promise<{url: string; type: string}>((resolve, reject) => {
@@ -311,6 +317,12 @@ export default function Home() {
   // *** MODIFIED FUNCTION ***
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
+    if (!apiKey) {
+      setShowApiKeyModal(true);
+      return;
+    }
+
     setIsLoading(true);
 
     try {
@@ -368,8 +380,7 @@ export default function Home() {
       };
 
       // Define the proxy endpoint
-      const proxyUrl =
-        '/api-proxy/v1beta/models/gemini-2.5-flash-image-preview:generateContent';
+      const proxyUrl = `/api-proxy/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`;
 
       // Use fetch to send the request to your proxy server
       const response = await fetch(proxyUrl, {
@@ -432,6 +443,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;
@@ -777,6 +797,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>
     </>
   );