Upload app.py

app.py

@@ -384,76 +384,97 @@ def outpaint_image(image, direction, extend_percent, custom_prompt, progress=gr.
 # GRADIO UI
 # ================================================================
 
-with gr.Blocks(title="CanvasAI") as demo:
-
-    gr.Markdown("# CanvasAI")
+with gr.Blocks(
+                title="CanvasAI",
+                theme= gr.themes.Soft(
+                    primary_hue= "violet",
+                    secondary_hue="blue",
+                    neutral_hue="slate",
+                    font= gr.themes.GoogleFont("Inter"),
+                    font_mono= gr.themes.GoogleFont("JetBrains Mono")
+                ),
+                js="""
+                function() {
+                    document.body.classList.add('dark');
+                }
+                """) as demo:
+
+    gr.Markdown("""# CanvasAI
+    ### AI-powered image enhancement, colorization, and outpainting""")
     gr.Markdown(
         "**Enhance** with Real-ESRGAN  |  "
         "**Colorize** B&W photos with DDColor  |  "
         "**Outpaint** to extend any scene with SD2"
     )
+    gr.Markdown("---")
 
     with gr.Tabs():
-
-        with gr.Tab("Enhance"):
-            gr.Markdown("Upscale and sharpen any image 2x or 4x using Real-ESRGAN.")
-            with gr.Row():
-                with gr.Column():
-                    enh_input = gr.Image(label="Upload Image", type="pil")
-                    enh_scale = gr.Dropdown(
-                        choices=["2x", "4x"], value="4x", label="Upscale Factor",
-                        info="4x recommended. Use 2x for very large inputs."
+        #---------Enhance----------------
+        with gr.Tab(" ✨ Enhance"):
+            gr.Markdown("### Upscale and sharpen any image 2x or 4x using Real-ESRGAN.")
+            with gr.Row(equal_height= True):
+                with gr.Column(scale= 1):
+                    enh_input = gr.Image(label="Upload Image", type="pil", height= 350)
+                    enh_scale = gr.Radio(
+                        choices=["2x", "4x"],
+                        value="4x",
+                        label="Upscale Factor",
+                        info="4x recommended for most images. Use 2x for very large inputs."
                     )
-                    enh_btn = gr.Button("Enhance", variant="primary")
-                with gr.Column():
-                    enh_output = gr.Image(label="Result", type="pil", interactive=False)
-                    enh_info   = gr.Textbox(label="Size Info", interactive=False)
+                    enh_btn = gr.Button("Enhance", variant="primary", size="lg")
+                with gr.Column(scale=1):
+                    enh_output = gr.Image(label="Result", type="pil", interactive=False, height=350, show_download_button=True,)
+                    enh_info   = gr.Textbox(label="Size Info", interactive=False, container=True,)
 
             enh_btn.click(fn=enhance_image, inputs=[enh_input, enh_scale], outputs=[enh_output, enh_info])
-
+        #--------Colourize---------------------------
         with gr.Tab("Colorize"):
-            gr.Markdown(
-                "Upload a black and white image. "
-                "DDColor adds natural, realistic colors while preserving the original structure."
+            gr.Markdown("""
+                ### B&W Photo Colorization
+                DDColor adds natural, realistic colors while preserving the original structure."""
             )
-            with gr.Row():
-                with gr.Column():
-                    col_input    = gr.Image(label="Upload B&W Image", type="pil")
+            with gr.Row(equal_height= True):
+                with gr.Column(scale=1):
+                    col_input    = gr.Image(label="Upload B&W Image", type="pil", height=350)
                     col_strength = gr.Slider(
                         minimum=0.5, maximum=1.0, value=0.9, step=0.05,
                         label="Color Strength",
                         # BUG 10 FIX: maximum changed from 0.7 to 1.0
-                        # User can now reach full DDColor output at 1.0
-                        info="0.5 = subtle tint. 1.0 = full vivid DDColor output."
+                        info="0.5 = subtle tint  ·  1.0 = full vivid color"
                     )
-                    col_btn = gr.Button("Colorize", variant="primary")
+                    col_btn = gr.Button("Colorize", variant="primary", size="lg")
                 with gr.Column():
-                    col_output = gr.Image(label="Colorized Result", type="pil", interactive=False)
+                    col_output = gr.Image(label="Colorized Result", type="pil", interactive=False, height=350,
+                        show_download_button=True,)
 
             col_btn.click(fn=colour_image, inputs=[col_input, col_strength], outputs=[col_output])
-
+        #----------Outpaint-----------------------------
         with gr.Tab("Outpaint"):
-            gr.Markdown(
-                "Upload an image and extend it in any direction. "
-                "BLIP reads the scene automatically — no prompt needed."
+            gr.Markdown("""### Extend Any Scene
+            Upload an image and extend it in any direction. 
+            BLIP reads the scene automatically — no prompt needed."""
             )
-            with gr.Row():
-                with gr.Column():
-                    out_input  = gr.Image(label="Upload Image", type="pil")
+            with gr.Row(equal_height= True):
+                with gr.Column(scale= 1):
+                    out_input  = gr.Image(label="Upload Image", type="pil", height=350)
                     out_dir    = gr.Radio(
                         choices=["Horizontal", "Vertical", "Both"], value="Horizontal",
                         label="Extension Direction",
                         info="Horizontal = left & right | Vertical = top & bottom | Both = all sides"
                     )
                     out_pct    = gr.Slider(minimum=10, maximum=50, value=25, step=5, label="Extend by (%)")
-                    out_prompt = gr.Textbox(
-                        label="Custom Prompt (optional)",
-                        placeholder="Leave empty — BLIP reads your image automatically",
-                        lines=2
-                    )
-                    out_btn = gr.Button("Outpaint", variant="primary")
-                with gr.Column():
-                    out_output  = gr.Image(label="Result", type="pil", interactive=False)
+                    with gr.Accordion("Advanced: Custom Prompt", open=False):
+                    # gr.Accordion = collapsible section
+                    # open=False = collapsed by default — keeps UI clean
+                    # Users who want it can expand, others aren't distracted
+                        out_prompt = gr.Textbox(
+                            label="Custom Prompt (optional)",
+                            placeholder="Leave empty — BLIP reads your image automatically. Or type: 'a forest with tall oak trees'",
+                            lines=3,
+                        )
+                    out_btn = gr.Button("Outpaint", variant="primary", size="lg")
+                with gr.Column(scale=1):
+                    out_output  = gr.Image(label="Result", type="pil", interactive=False, height= 350, show_download_button= True)
                     out_caption = gr.Textbox(label="Prompt Used", interactive=False, lines=4)
 
             out_btn.click(
@@ -461,5 +482,13 @@ with gr.Blocks(title="CanvasAI") as demo:
                 inputs=[out_input, out_dir, out_pct, out_prompt],
                 outputs=[out_output, out_caption]
             )
+    # Footer
+    gr.Markdown(
+        """
+        ---
+        Built with Real-ESRGAN · DDColor · Stable Diffusion 2 · BLIP · Gradio
+        """
+    )
+
 
 demo.launch()