Update app.py

app.py

@@ -250,31 +250,81 @@ def upscale_image(image_path, seed=666, cfg_scale=1.0):
 
 # Custom CSS for the "Top Tier" look
 custom_css = """
+/* Font Import handled by Theme, but custom tweaks here */
 .gradio-container {
-    font-family: 'Inter', sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif !important;
 }
+
+/* Header Styling */
 h1 {
     text-align: center; 
     color: #FF7043;
-    font-weight: 800;
+    font-weight: 700 !important;
+    font-size: 2.5rem !important;
+    margin-bottom: 0.5rem !important;
 }
-.contain {
-    background-color: #FAFAFA;
+h3 {
+    text-align: center;
+    color: #525252;
+    font-weight: 400 !important;
+    margin-top: 0 !important;
 }
+
+/* Button Styling - Vibrant Orange */
 button.primary {
-    background: linear-gradient(45deg, #FF7043, #FFAB91);
-    border: none;
-    box-shadow: 0 4px 15px rgba(255, 112, 67, 0.3);
+    background: linear-gradient(135deg, #FF7043 0%, #FF5722 100%) !important;
+    border: none !important;
+    box-shadow: 0 4px 6px -1px rgba(255, 87, 34, 0.2), 0 2px 4px -1px rgba(255, 87, 34, 0.1) !important;
+    transition: all 0.2s ease !important;
+}
+button.primary:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 15px -3px rgba(255, 87, 34, 0.3), 0 4px 6px -2px rgba(255, 87, 34, 0.15) !important;
+}
+
+/* UI Boxes (Groups/Columns) */
+.ui-box {
+    background: white;
+    border: 1px solid #E5E7EB;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Footer Styling */
+.footer-link {
+    color: #FF7043;
+    text-decoration: none;
+    font-weight: 600;
+}
+.footer-link:hover {
+    text-decoration: underline;
 }
 """
 
-# Fixed theme radius size
+# Refined Theme
 theme = gr.themes.Soft(
     primary_hue="orange",
-    secondary_hue="slate",
-    neutral_hue="stone",
-    radius_size="lg", # Changed from gr.themes.sizes.RADIUS_LG to string literal "lg"
+    secondary_hue="zinc",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("IBM Plex Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
+    radius_size="lg",
 ).set(
+    body_background_fill="#F9FAFB",
+    block_background_fill="white",
+    block_border_width="0px", # Clean look
+    block_shadow="none",
+    # Remove orange background from labels
+    block_label_background_fill="transparent",
+    block_label_text_color="#4B5563",
+    block_label_text_weight="600",
+    block_title_text_color="#1F2937",
+    # Input/Output styling
+    input_background_fill="#F3F4F6",
+    # Primary Button (Orange)
     button_primary_background_fill="#FF7043",
     button_primary_background_fill_hover="#F4511E",
     button_primary_text_color="white",
@@ -282,7 +332,7 @@ theme = gr.themes.Soft(
 
 with gr.Blocks(theme=theme, css=custom_css, title="SeedVR2 Image Upscaler") as demo:
     
-    with gr.Column(variant="panel"):
+    with gr.Column():
         gr.Markdown(
             """
             # 🍊 SeedVR2 Image Upscaler
@@ -291,23 +341,38 @@ with gr.Blocks(theme=theme, css=custom_css, title="SeedVR2 Image Upscaler") as d
         )
 
     with gr.Row(equal_height=True):
-        with gr.Column(scale=1):
+        # Left Column: Input
+        with gr.Column(scale=1, elem_classes="ui-box"):
+            gr.Markdown("#### Source", elem_id="input-header")
+            input_image = gr.Image(
+                label="Input Image", 
+                type="filepath", 
+                height=400,
+                sources=["upload", "clipboard"],
+                show_label=False
+            )
+            
+            gr.Markdown("#### Settings", elem_id="settings-header")
             with gr.Group():
-                input_image = gr.Image(
-                    label="Input Image", 
-                    type="filepath", 
-                    height=400,
-                    sources=["upload", "clipboard"]
-                )
-                with gr.Accordion("Advanced Settings", open=False):
-                    seed_input = gr.Number(label="Seed", value=666, precision=0)
-                    cfg_input = gr.Slider(label="CFG Scale", minimum=0.0, maximum=10.0, value=1.0, step=0.1)
-                
-                run_btn = gr.Button("✨ Upscale Image", variant="primary", size="lg")
-
-        with gr.Column(scale=1):
-            output_image = gr.Image(label="Restored Result", interactive=False, height=400)
-            download_file = gr.File(label="Download High-Res")
+                with gr.Row():
+                    seed_input = gr.Number(label="Seed", value=666, precision=0, container=True)
+                    cfg_input = gr.Slider(label="CFG Scale", minimum=0.0, maximum=10.0, value=1.0, step=0.1, container=True)
+            
+            # Spacer
+            gr.HTML("<div style='height: 20px;'></div>")
+            
+            run_btn = gr.Button("Upscale Image", variant="primary", size="lg")
+
+        # Right Column: Output
+        with gr.Column(scale=1, elem_classes="ui-box"):
+            gr.Markdown("#### Result", elem_id="output-header")
+            output_image = gr.Image(
+                label="Restored Result", 
+                interactive=False, 
+                height=400,
+                show_label=False
+            )
+            download_file = gr.File(label="Download High-Res", container=False)
 
     run_btn.click(
         fn=upscale_image,
@@ -315,10 +380,12 @@ with gr.Blocks(theme=theme, css=custom_css, title="SeedVR2 Image Upscaler") as d
         outputs=[output_image, download_file]
     )
 
-    gr.Markdown(
+    # Footer
+    gr.HTML(
         """
-        <div style="text-align: center; opacity: 0.6; margin-top: 20px; font-size: 0.8em;">
-        Powered by SeedVR2 | One-Step Diffusion Model
+        <div style="text-align: center; margin-top: 40px; margin-bottom: 20px; font-size: 0.9em; color: #6B7280;">
+            <p style="margin: 5px 0;">Powered by <b>SeedVR2</b> | One-Step Diffusion Model</p>
+            <p style="margin: 5px 0;">UI/UX by <a href="https://huggingface.co/bbqhan" target="_blank" class="footer-link">@bbqhan</a></p>
         </div>
         """
     )