Update app.py

app.py

@@ -68,19 +68,19 @@ def process_image_and_prompt(pil_image, prompt, api_key):
 
 css_style = """
 .app-container {
-    max-width: 900px !important;
+    max-width: 1000px !important;
     margin-left: auto !important;
     margin-right: auto !important;
-    padding: 2rem 1rem;
+    padding: 1.5rem 1rem;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 .header-text {
-    font-size: 2.4rem;
+    font-size: 2.6rem;
     font-weight: 900;
     background: linear-gradient(90deg, #FF6A00, #EE0979);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 1rem;
+    margin-bottom: 1.2rem;
     text-align: center;
 }
 .gradient-button {
@@ -88,24 +88,14 @@ css_style = """
     border: none;
     color: white;
     font-weight: 700;
-    padding: 12px 25px;
-    border-radius: 10px;
+    padding: 12px 30px;
+    border-radius: 12px;
     cursor: pointer;
     transition: background 0.5s ease;
 }
 .gradient-button:hover {
     background: linear-gradient(90deg, #EE0979, #FF6A00);
 }
-.sidebar {
-    background: #f7f7f7;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 2px 7px rgb(0 0 0 / 0.08);
-    max-width: 280px;
-}
-.sidebar h3 {
-    margin-top: 0;
-}
 main-content {
     display: flex;
     gap: 2rem;
@@ -115,49 +105,29 @@ main-content {
     flex: 1;
 }
 .output-gallery {
-    min-height: 280px;
+    min-height: 480px;
+    max-height: 480px;
+    overflow: visible !important;
 }
 """
 
 with gr.Blocks(css=css_style) as demo:
-    with gr.Row(elem_classes="app-container", equal_height=True):
-        # Sidebar left
-        with gr.Column(scale=3, elem_classes="sidebar"):
-            gr.Markdown(
-                """
-                ### Usage Instructions
-                - Upload a PNG input image.
-                - Enter a prompt describing the edit.
-                - Optionally enter your Gemini API key.
-                - Click the Generate Edit button.
-                
-                ### API Tips
-                - Use your own Gemini API key for best results.
-                - Do not use NSFW images.
-                - Outputs can include images or text messages.
-                
-                ### Links
-                - [Duplicate this repo](https://huggingface.co/spaces/ameerazam08/Gemini-Image-Edit?duplicate=true)
-                - [Get API Key](https://aistudio.google.com/apikey)
-                - Follow the author on [Twitter](https://x.com/Ameerazam18)
-                """
-            )
-        # Main panel right
-        with gr.Column(scale=7):
-            gr.Markdown("<div class='header-text'>Gemini for Image Editing</div>")
-            with gr.Row():
-                with gr.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")
-                with gr.Column():
-                    gallery_output = gr.Gallery(label="Generated Image", elem_classes="output-gallery", height=280)
-                    text_output = gr.Textbox(label="Generation Status or Text Output", interactive=False)
-            submit_btn.click(
-                fn=process_image_and_prompt,
-                inputs=[image_input, prompt_input, api_key_input],
-                outputs=[gallery_output, text_output]
-            )
+    with gr.Column(elem_classes="app-container"):
+        gr.Markdown("<div class='header-text'>Image Editor (Powered by Gemini)</div>")
+        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")
+            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)
+
+        submit_btn.click(
+            fn=process_image_and_prompt,
+            inputs=[image_input, prompt_input, api_key_input],
+            outputs=[gallery_output, text_output]
+        )
 
 demo.queue(max_size=50).launch()