Update app.py

app.py

@@ -60,11 +60,17 @@ def process_image_and_prompt(pil_image, prompt, api_key):
             result_img = Image.open(image_path)
             if result_img.mode == "RGBA":
                 result_img = result_img.convert("RGB")
-            return [result_img], ""
+            return [result_img], "", None
         else:
-            return None, text_output
+            # Show text output in info box
+            return None, text_output, None
     except Exception as e:
-        raise gr.Error(f"Generation failed: {str(e)}", duration=6)
+        # Show error message in popup
+        return None, None, gr.Error(f"Generation failed: {str(e)}")
+
+def reset_inputs(api_key_value):
+    # Reset all except API key
+    return None, "", None, api_key_value
 
 css_style = """
 .app-container {
@@ -75,13 +81,14 @@ css_style = """
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 .header-text {
-    font-size: 2.6rem;
+    font-size: 3rem;
     font-weight: 900;
     background: linear-gradient(90deg, #FF6A00, #EE0979);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 1.2rem;
+    margin-bottom: 1.5rem;
     text-align: center;
+    text-shadow: 1px 1px 5px rgba(255,106,0,0.6);
 }
 .gradient-button {
     background: linear-gradient(90deg, #FF6A00, #EE0979);
@@ -96,38 +103,74 @@ css_style = """
 .gradient-button:hover {
     background: linear-gradient(90deg, #EE0979, #FF6A00);
 }
-main-content {
+.main-content {
     display: flex;
     gap: 2rem;
     margin-top: 1rem;
 }
 .column {
     flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 .output-gallery {
-    min-height: 480px;
-    max-height: 480px;
+    width: 100% !important;
+    max-height: none !important;
     overflow: visible !important;
 }
+#text-info-box textarea {
+    height: 6.5rem !important;
+    resize: none !important;
+}
 """
 
 with gr.Blocks(css=css_style) as demo:
     with gr.Column(elem_classes="app-container"):
         gr.Markdown("<div class='header-text'>Image Editor (Powered by Gemini)</div>")
+        with gr.Accordion("App Usage Instructions", open=True):
+            gr.Markdown(
+                """
+                - Upload a PNG image you wish to edit.
+                - Enter a detailed prompt describing the edits.
+                - Provide your Gemini API Key (required).
+                - Click Generate Edit to process the image.
+                """
+            )
+        with gr.Accordion("API Key Instructions", open=False):
+            gr.Markdown(
+                """
+                - The Gemini API Key is **required** to use this app.
+                - Obtain your key from your Google Cloud Console.
+                - Keep the key private and do not share it publicly.
+                """
+            )
         with gr.Row(elem_classes="main-content"):
             with gr.Column(elem_classes="column"):
                 image_input = gr.Image(type="pil", label="Upload PNG Image", image_mode="RGBA")
                 prompt_input = gr.Textbox(label="Edit Prompt", placeholder="Describe how to edit the image", lines=2)
-                api_key_input = gr.Textbox(label="Gemini API Key (optional)", placeholder="Enter your Gemini API key here", type="password")
-                submit_btn = gr.Button("Generate Edit", elem_classes="gradient-button")
+                api_key_input = gr.Textbox(label="Gemini API Key (required)", placeholder="Enter your Gemini API key here", type="password")
+                with gr.Row():
+                    submit_btn = gr.Button("Generate Edit", elem_classes="gradient-button")
+                    reset_btn = gr.Button("Reset Inputs")
             with gr.Column(elem_classes="column"):
-                gallery_output = gr.Gallery(label="Generated Image", elem_classes="output-gallery")
-                text_output = gr.Textbox(label="Generation Status or Text Output", interactive=False, lines=6)
+                gallery_output = gr.Gallery(label="Generated Image", elem_classes="output-gallery", show_label=True)
+                text_info = gr.Textbox(label="Information / Logs", interactive=False, lines=6, elem_id="text-info-box")
+
+        def on_submit(pil_img, prompt, key):
+            if not key or key.strip() == "":
+                raise gr.Error("Gemini API Key is required!")
+            return process_image_and_prompt(pil_img, prompt, key)
 
         submit_btn.click(
-            fn=process_image_and_prompt,
+            fn=on_submit,
             inputs=[image_input, prompt_input, api_key_input],
-            outputs=[gallery_output, text_output]
+            outputs=[gallery_output, text_info, None]
+        )
+
+        reset_btn.click(
+            fn=reset_inputs,
+            inputs=[api_key_input],
+            outputs=[image_input, prompt_input, text_info, api_key_input]
         )
 
 demo.queue(max_size=50).launch()