Upload app.py

app.py

@@ -132,7 +132,34 @@ def undo_edit(image_history):
 
 # Create Gradio UI
 def create_ui():
-    with gr.Blocks(title="Gemini Image Editor") as app:
+    with gr.Blocks(title="Gemini Image Editor", js="""
+    function() {
+        // Wait for the DOM to be fully loaded
+        window.addEventListener('DOMContentLoaded', (event) => {
+            setTimeout(function() {
+                // Try to load saved API key from localStorage
+                const savedKey = localStorage.getItem('gemini_api_key');
+                const apiKeyInput = document.querySelector('input[placeholder="Enter your Gemini API key"]');
+                if (savedKey && apiKeyInput) {
+                    apiKeyInput.value = savedKey;
+                    // Dispatch an input event to make sure Gradio recognizes the change
+                    const event = new Event('input', { bubbles: true });
+                    apiKeyInput.dispatchEvent(event);
+                }
+                
+                // Add event listener to save API key when checkbox is checked
+                const saveKeyCheckbox = document.querySelector('input[type="checkbox"]');
+                if (apiKeyInput && saveKeyCheckbox) {
+                    apiKeyInput.addEventListener('change', function(e) {
+                        if (saveKeyCheckbox.checked) {
+                            localStorage.setItem('gemini_api_key', e.target.value);
+                        }
+                    });
+                }
+            }, 1000); // Small delay to ensure elements are loaded
+        });
+    }
+    """) as app:
         gr.Markdown("# Gemini Image Editor")
         gr.Markdown("Upload an image, enter a description of the edit you want, and let Gemini do the rest!")
         
@@ -166,24 +193,6 @@ def create_ui():
             inputs=[image_history],
             outputs=[output_image, image_history, status]
         )
-        
-        # JavaScript for saving API key in local storage
-        app.load(None, None, None, _js="""
-        function() {
-            // Try to load saved API key from localStorage
-            const savedKey = localStorage.getItem('gemini_api_key');
-            if (savedKey) {
-                document.querySelector('input[data-testid="textbox"]#api_key').value = savedKey;
-            }
-            
-            // Add event listener to save API key
-            document.querySelector('input[data-testid="textbox"]#api_key').addEventListener('change', function(e) {
-                if (document.querySelector('input[data-testid="checkbox"]#save_key').checked) {
-                    localStorage.setItem('gemini_api_key', e.target.value);
-                }
-            });
-        }
-        """)
     
     return app