update big UI figure

app.py

@@ -48,26 +48,53 @@ TASK_PRESETS = {
 }
 DEFAULT_PRESET = "Low-light Enhancement"
 
-# --- UI Header (严格限制为两行) ---
+# --- UI Header (大气版：字号放大，严格限制两行) ---
 TITLE_HTML = """
-<div style="text-align: center; margin-bottom: 20px;">
-    <h1 style="font-size: 2.5rem; margin: 0 0 5px 0; background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">RealRestorer</h1>
-    <p style="font-size: 1.05rem; color: var(--body-text-color-subdued); margin: 0; font-weight: 500;">A powerful image restoration model supporting deblurring, denoising, deflaring, low-light enhancement, and more.</p>
+<div style="text-align: center; margin-bottom: 30px;">
+    <h1 style="font-size: 3.2rem; margin: 0 0 10px 0; background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px;">RealRestorer</h1>
+    <p style="font-size: 1.15rem; color: var(--body-text-color-subdued); margin: 0; font-weight: 500;">A powerful image restoration model supporting deblurring, denoising, deflaring, low-light enhancement, and more.</p>
 </div>
 """
 
-# --- 极简 CSS，不破坏 Gradio 原生布局 ---
+# --- 宽屏大气 CSS ---
 CUSTOM_CSS = """
-.gradio-container { max-width: 1400px !important; margin: auto !important; padding-top: 20px !important; }
-/* 去除一些不必要的内边距让左右更紧凑 */
-.gr-box { border-radius: 12px !important; }
+/* 扩大最大宽度，增加顶部留白，营造呼吸感 */
+.gradio-container { max-width: 1600px !important; margin: auto !important; padding-top: 40px !important; }
+
+/* 调整面板圆角与阴影使其更大气 */
+.gr-box { border-radius: 16px !important; }
+
+/* 强化主按钮质感与视觉吸引力 */
+#run-btn {
+    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
+    color: white !important;
+    border: none !important;
+    font-size: 1.25rem !important;
+    font-weight: 700 !important;
+    padding: 16px !important;
+    border-radius: 12px !important;
+    box-shadow: 0 6px 15px -3px rgba(79, 70, 229, 0.4) !important;
+    transition: all 0.2s ease-in-out !important;
+}
+#run-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 10px 20px -3px rgba(79, 70, 229, 0.5) !important;
+}
+
+/* 优化状态栏的视觉 */
+.rr-status textarea {
+    font-size: 1.05rem !important;
+    color: #334155 !important;
+    background: #f8fafc !important;
+    font-family: ui-monospace, monospace !important;
+}
 """
 
 PIPELINE = None
 PIPELINE_LOCK = threading.Lock()
 INFERENCE_LOCK = threading.Lock()
 
-@spaces.GPU(duration=1)
+@spaces.GPU(duration=180)
 def _spaces_gpu_probe(): return None
 
 def _pick_device():
@@ -98,10 +125,10 @@ def _pil_to_data_url(image: Image.Image) -> str:
     return f"data:image/png;base64,{base64.b64encode(buffer.getvalue()).decode('utf-8')}"
 
 def _build_slider_html(before_image: Image.Image, after_image: Image.Image) -> str:
-    # 状态：未上传图片，占位符高度固定为 520px，与左侧对齐
+    # 状态：未上传图片。高度放大为 650px，与左侧对齐
     if before_image is None or after_image is None:
         return """
-        <div style='height: 520px; display:flex; align-items:center; justify-content:center; color: var(--body-text-color-subdued); border: 2px dashed var(--border-color-primary); border-radius: 12px; font-size: 1.1rem; background: var(--background-fill-secondary);'>
+        <div style='height: 650px; display:flex; align-items:center; justify-content:center; color: var(--body-text-color-subdued); border: 2px dashed var(--border-color-primary); border-radius: 16px; font-size: 1.25rem; background: var(--background-fill-secondary);'>
             Upload an image and run to see the comparison here.
         </div>
         """
@@ -115,24 +142,24 @@ def _build_slider_html(before_image: Image.Image, after_image: Image.Image) -> s
     
     on_input = f"var p=this.value; document.getElementById('{slider_id}_top').style.clipPath='inset(0 '+(100-p)+'% 0 0)'; document.getElementById('{slider_id}_line').style.left=p+'%';"
 
-    # 状态：渲染完成，高度同样固定为 520px
+    # 状态：渲染完成。高度同样放大为 650px，手柄也相应变大
     return f"""
-    <div style="position:relative; width:100%; height:520px; overflow:hidden; border-radius:12px; background:var(--background-fill-secondary); border: 1px solid var(--border-color-primary); margin: 0 auto;">
+    <div style="position:relative; width:100%; height:650px; overflow:hidden; border-radius:16px; background:var(--background-fill-secondary); border: 1px solid var(--border-color-primary); margin: 0 auto;">
       <!-- 底图: 修复后 -->
       <img src="{after_url}" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;" draggable="false" />
       <!-- 顶图: 原图 -->
       <img id="{slider_id}_top" src="{before_url}" style="position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain; clip-path:inset(0 50% 0 0);" draggable="false" />
       
       <!-- 拖拽线与把手 -->
-      <div id="{slider_id}_line" style="position:absolute; top:0; left:50%; width:4px; height:100%; background:white; box-shadow:0 0 10px rgba(0,0,0,0.3); transform:translateX(-50%); pointer-events:none; z-index:10;">
-        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:40px; height:40px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,0.4); font-weight:bold; color:#1e293b; font-size:1.1rem;">↔</div>
+      <div id="{slider_id}_line" style="position:absolute; top:0; left:50%; width:4px; height:100%; background:white; box-shadow:0 0 15px rgba(0,0,0,0.4); transform:translateX(-50%); pointer-events:none; z-index:10;">
+        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:48px; height:48px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.4); font-weight:bold; color:#1e293b; font-size:1.3rem;">↔</div>
       </div>
       
       <!-- 透明原生滑动条 -->
       <input type="range" min="0" max="100" value="50" oninput="{on_input}" style="position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:20; margin:0; appearance:auto;" />
     </div>
     
-    <div style="display:flex; justify-content:space-between; color:var(--body-text-color-subdued); font-size:0.95rem; padding-top:12px; font-weight:600;">
+    <div style="display:flex; justify-content:space-between; color:var(--body-text-color-subdued); font-size:1.05rem; padding-top:16px; font-weight:600;">
       <span>⬅️ Original</span>
       <span>Restored ➡️</span>
     </div>
@@ -176,8 +203,13 @@ def run_inference(image: Optional[Image.Image], task_name: str, prompt: str, ste
 
 
 def build_demo():
-    # 使用 Gradio 原生 Soft 主题，确保颜色一致且在各浏览器下不渲染崩溃
-    with gr.Blocks(css=CUSTOM_CSS, title="RealRestorer", theme=gr.themes.Soft()) as demo:
+    # 启用 text_lg 和 spacing_lg，让界面自带大气的留白和清晰的大字体
+    atmospheric_theme = gr.themes.Soft(
+        text_size=gr.themes.sizes.text_lg,
+        spacing_size=gr.themes.sizes.spacing_lg
+    )
+
+    with gr.Blocks(css=CUSTOM_CSS, title="RealRestorer", theme=atmospheric_theme) as demo:
         gr.HTML(TITLE_HTML)
 
         # 完美 1:1 对齐布局
@@ -187,8 +219,8 @@ def build_demo():
             with gr.Column(scale=1):
                 gr.Markdown("### ⚙️ 1. Setup & Control")
                 
-                # 高度设定为 320px
-                input_image = gr.Image(label="Upload Image", type="pil", height=320)
+                # 上传区域放大至 420px，提供更宽裕的拖拽空间
+                input_image = gr.Image(label="Upload Image", type="pil", height=420)
                 
                 task_dropdown = gr.Dropdown(choices=list(TASK_PRESETS.keys()), value=DEFAULT_PRESET, label="Task Preset")
                 prompt_box = gr.Textbox(label="Instruction", value=TASK_PRESETS[DEFAULT_PRESET], lines=2)
@@ -200,7 +232,7 @@ def build_demo():
                 with gr.Accordion("Advanced Settings", open=False):
                     seed_box = gr.Number(label="Seed (-1 for random)", value=DEFAULT_SEED, precision=0)
 
-                run_button = gr.Button("🚀 Run Restoration", variant="primary", size="lg")
+                run_button = gr.Button("🚀 Run Restoration", elem_id="run-btn")
 
 
             # ===== 右侧：展示面板 =====
@@ -211,17 +243,18 @@ def build_demo():
                     label="Status", 
                     value="💡 Ready. Upload an image and click Run.", 
                     interactive=False, 
-                    lines=1
+                    lines=1,
+                    elem_classes=["rr-status"]
                 )
                 
                 with gr.Tabs():
                     with gr.Tab("Compare View"):
-                        # 高度在 HTML 中已锁定为 520px
+                        # 高度在 HTML 中已锁定为巨大的 650px
                         slider_view = gr.HTML(_build_slider_html(None, None))
                     
                     with gr.Tab("Output Image"):
-                        # 高度设定为 520px，与 Compare View 严格一致
-                        output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=520, show_label=False)
+                        # 高度同步设定为 650px，与 Compare View 严格一致
+                        output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=650, show_label=False)
 
         # ===== 事件绑定 =====
         task_dropdown.change(fn=_on_preset_change, inputs=[task_dropdown], outputs=[prompt_box])