Update app.py

app.py

@@ -10,14 +10,10 @@ def save_binary_file(file_name, data):
         f.write(data)
 
 def generate_edit(prompt, pil_image, api_key, model="gemini-2.0-flash-exp"):
-    # Initialize Gemini client with provided key or env fallback
     client = genai.Client(api_key=(api_key.strip() if api_key and api_key.strip() != "" else os.environ.get("GEMINI_API_KEY")))
-
-    # Save PIL Image to a temporary file path for upload
     with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp_file:
         image_path = tmp_file.name
         pil_image.save(image_path)
-
     files = [client.files.upload(file=image_path)]
     contents = [
         types.Content(
@@ -28,19 +24,16 @@ def generate_edit(prompt, pil_image, api_key, model="gemini-2.0-flash-exp"):
             ],
         ),
     ]
-
     generate_content_config = types.GenerateContentConfig(
         temperature=1,
         top_p=0.95,
         top_k=40,
         max_output_tokens=8192,
         response_modalities=["image", "text"],
-        response_mime_type="text/plain",  # Important for streaming image inline data
+        response_mime_type="text/plain",
     )
-
     text_response = ""
     image_path_result = None
-
     with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
         temp_path = tmp.name
         for chunk in client.models.generate_content_stream(
@@ -54,11 +47,10 @@ def generate_edit(prompt, pil_image, api_key, model="gemini-2.0-flash-exp"):
             if candidate.inline_data:
                 save_binary_file(temp_path, candidate.inline_data.data)
                 image_path_result = temp_path
-                break  # Stop on first image data chunk
+                break
             else:
                 text_response += chunk.text + "\n"
     del files
-
     return image_path_result, text_response
 
 def process_image_and_prompt(pil_image, prompt, api_key):
@@ -76,47 +68,92 @@ def process_image_and_prompt(pil_image, prompt, api_key):
 
 css_style = """
 .app-container {
-    max-width: 750px !important;
+    max-width: 900px !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding: 2rem 1rem;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+.header-text {
+    font-size: 2.4rem;
+    font-weight: 900;
+    background: linear-gradient(90deg, #FF6A00, #EE0979);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 1rem;
+    text-align: center;
 }
-.header-container {
+.gradient-button {
+    background: linear-gradient(90deg, #FF6A00, #EE0979);
+    border: none;
+    color: white;
+    font-weight: 700;
+    padding: 12px 25px;
+    border-radius: 10px;
+    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: 1em;
-    align-items: center;
+    gap: 2rem;
+    margin-top: 1rem;
 }
-.header-container img {
-    height: 40px;
+.column {
+    flex: 1;
 }
-.header-container div h1 {
-    margin: 0;
+.output-gallery {
+    min-height: 280px;
 }
 """
 
 with gr.Blocks(css=css_style) as demo:
-    with gr.Row(elem_classes="app-container"):
-        with gr.Column():
+    with gr.Row(elem_classes="app-container", equal_height=True):
+        # Sidebar left
+        with gr.Column(scale=3, elem_classes="sidebar"):
             gr.Markdown(
                 """
-                <div class="header-container">
-                    <img src="https://www.gstatic.com/lamda/images/gemini_favicon_f069958c85030456e93de685481c559f160ea06b.png" alt="Gemini logo"/>
-                    <div>
-                        <h1>Gemini for Image Editing</h1>
-                        <p>Powered by <a href="https://gradio.app/">Gradio</a> ⚡️</p>
-                    </div>
-                </div>
+                ### 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)
                 """
             )
-            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")
-
-            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)
-
+        # 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],