line down layout

app.py

@@ -48,45 +48,51 @@ TASK_PRESETS = {
 }
 DEFAULT_PRESET = "Low-light Enhancement"
 
-# --- UI Header (大气版：字号放大，严格限制两行) ---
+# --- UI Header (Strictly 2 lines, centered) ---
 TITLE_HTML = """
-<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 style="text-align: center; margin-bottom: 20px;">
+    <h1 style="font-size: 3.5rem; 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.2rem; 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 ---
+# --- Full-Width Vertical CSS ---
 CUSTOM_CSS = """
-/* 扩大最大宽度，增加顶部留白，营造呼吸感 */
-.gradio-container { max-width: 1600px !important; margin: auto !important; padding-top: 40px !important; }
-
-/* 调整面板圆角与阴影使其更大气 */
-.gr-box { border-radius: 16px !important; }
+/* 放宽最大宽度，让网页横向占满 */
+.gradio-container { max-width: 1800px !important; margin: auto !important; padding: 40px 20px !important; }
+
+/* 定义区块的视觉卡片风格 */
+.rr-section {
+    background: #ffffff !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 16px !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
+    padding: 30px !important;
+    margin-bottom: 30px !important;
+}
 
-/* 强化主按钮质感与视觉吸引力 */
+/* 巨型行动按钮 */
 #run-btn {
     background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
     color: white !important;
     border: none !important;
-    font-size: 1.25rem !important;
+    font-size: 1.3rem !important;
     font-weight: 700 !important;
-    padding: 16px !important;
+    padding: 18px !important;
     border-radius: 12px !important;
-    box-shadow: 0 6px 15px -3px rgba(79, 70, 229, 0.4) !important;
+    box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.4) !important;
     transition: all 0.2s ease-in-out !important;
+    margin-top: 10px !important;
 }
 #run-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 10px 20px -3px rgba(79, 70, 229, 0.5) !important;
+    box-shadow: 0 10px 25px -4px 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;
+/* 标题样式 */
+.section-title {
+    font-size: 1.4rem; font-weight: 700; color: #1e293b; 
+    margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
 }
 """
 
@@ -125,11 +131,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:
-    # 状态：未上传图片。高度放大为 650px，与左侧对齐
     if before_image is None or after_image is None:
         return """
-        <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 style='height: 500px; width: 100%; 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.3rem; background: var(--background-fill-secondary);'>
+            Upload an image and run to see the full-width comparison here.
         </div>
         """
     
@@ -138,28 +143,31 @@ def _build_slider_html(before_image: Image.Image, after_image: Image.Image) -> s
 
     before_url = _pil_to_data_url(before_image)
     after_url = _pil_to_data_url(after_image)
+    width, height = after_image.size
     slider_id = f"slider_{int(time.time() * 1000)}"
     
     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+'%';"
 
-    # 状态：渲染完成。高度同样放大为 650px，手柄也相应变大
+    # 动态自适应：外层包裹居中，内层按原图比例撑开，最大高度限制为屏幕高度的 80% 防止竖图过长
     return f"""
-    <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 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 style="display: flex; justify-content: center; width: 100%; background: var(--background-fill-secondary); border-radius: 16px; padding: 20px; border: 1px solid var(--border-color-primary); box-sizing: border-box;">
+        <div style="position:relative; width:100%; max-height:80vh; aspect-ratio:{width}/{height}; overflow:hidden; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);">
+          <!-- 底图: 修复后 -->
+          <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 20px rgba(0,0,0,0.5); transform:translateX(-50%); pointer-events:none; z-index:10;">
+            <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:56px; height:56px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,0.4); font-weight:bold; color:#1e293b; font-size:1.5rem;">↔</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>
     
-    <div style="display:flex; justify-content:space-between; color:var(--body-text-color-subdued); font-size:1.05rem; padding-top:16px; font-weight:600;">
+    <div style="display:flex; justify-content:space-between; color:var(--body-text-color-subdued); font-size:1.1rem; padding-top:16px; font-weight:600;">
       <span>⬅️ Original</span>
       <span>Restored ➡️</span>
     </div>
@@ -201,9 +209,8 @@ def run_inference(image: Optional[Image.Image], task_name: str, prompt: str, ste
         traceback.print_exc()
         return None, f"❌ Failed: {exc}", _build_slider_html(None, None)
 
-
 def build_demo():
-    # 启用 text_lg 和 spacing_lg，让界面自带大气的留白和清晰的大字体
+    # 启用全局大号字体和间距
     atmospheric_theme = gr.themes.Soft(
         text_size=gr.themes.sizes.text_lg,
         spacing_size=gr.themes.sizes.spacing_lg
@@ -212,55 +219,61 @@ def build_demo():
     with gr.Blocks(css=CUSTOM_CSS, title="RealRestorer", theme=atmospheric_theme) as demo:
         gr.HTML(TITLE_HTML)
 
-        # 完美 1:1 对齐布局
-        with gr.Row(equal_height=False):
+        # ==========================================
+        # Section 1 & 2: 图像上传与控制参数 (纵向排列)
+        # ==========================================
+        with gr.Column(elem_classes=["rr-section"]):
+            gr.HTML("<div class='section-title'>📥 1. Upload & Settings</div>")
             
-            # ===== 左侧：控制面板 =====
-            with gr.Column(scale=1):
-                gr.Markdown("### ⚙️ 1. Setup & Control")
-                
-                # 上传区域放大至 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)
-                
-                with gr.Row():
+            # 1. 超宽的图片上传区域
+            input_image = gr.Image(label="Upload Image", type="pil", height=450)
+            
+            # 2. 控制参数横向铺开，充分利用宽度
+            with gr.Row():
+                with gr.Column(scale=1):
+                    task_dropdown = gr.Dropdown(choices=list(TASK_PRESETS.keys()), value=DEFAULT_PRESET, label="Task Preset")
+                with gr.Column(scale=2):
+                    prompt_box = gr.Textbox(label="Instruction(输入指令)", value=TASK_PRESETS[DEFAULT_PRESET], lines=1)
+            
+            with gr.Row():
+                with gr.Column(scale=1):
                     guidance_slider = gr.Slider(minimum=1.0, maximum=6.0, value=DEFAULT_CFG, step=0.1, label="CFG / Guidance Scale")
+                with gr.Column(scale=1):
                     steps_slider = gr.Slider(minimum=12, maximum=40, value=DEFAULT_STEPS, step=1, label="Inference Steps")
-
-                with gr.Accordion("Advanced Settings", open=False):
+                with gr.Column(scale=1):
                     seed_box = gr.Number(label="Seed (-1 for random)", value=DEFAULT_SEED, precision=0)
 
-                run_button = gr.Button("🚀 Run Restoration", elem_id="run-btn")
-
+            # 3. 占据一整行的巨型运行按钮
+            run_button = gr.Button("🚀 Run Restoration", elem_id="run-btn")
 
-            # ===== 右侧：展示面板 =====
-            with gr.Column(scale=1):
-                gr.Markdown("### 🖼️ 2. Results Preview")
-                
-                status_box = gr.Textbox(
-                    label="Status", 
-                    value="💡 Ready. Upload an image and click Run.", 
-                    interactive=False, 
-                    lines=1,
-                    elem_classes=["rr-status"]
-                )
+        # ==========================================
+        # Section 3: 结果展示 (横跨整个屏幕)
+        # ==========================================
+        with gr.Column(elem_classes=["rr-section"]):
+            gr.HTML("<div class='section-title'>🖼️ 2. Restoration Results</div>")
+            
+            status_box = gr.Textbox(
+                label="Status", 
+                value="💡 Ready. Upload an image, adjust settings, and click Run.", 
+                interactive=False, 
+                lines=1
+            )
+            
+            with gr.Tabs():
+                with gr.Tab("Compare View"):
+                    slider_view = gr.HTML(_build_slider_html(None, None))
                 
-                with gr.Tabs():
-                    with gr.Tab("Compare View"):
-                        # 高度在 HTML 中已锁定为巨大的 650px
-                        slider_view = gr.HTML(_build_slider_html(None, None))
-                    
-                    with gr.Tab("Output Image"):
-                        # 高度同步设定为 650px，与 Compare View 严格一致
-                        output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=650, show_label=False)
+                with gr.Tab("Output Image"):
+                    # 单纯展示的输出图也给足高度
+                    output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=700, show_label=False)
 
-        # ===== 事件绑定 =====
+        # ==========================================
+        # Events
+        # ==========================================
         task_dropdown.change(fn=_on_preset_change, inputs=[task_dropdown], outputs=[prompt_box])
         
         run_button.click(
-            fn=lambda: ("⏳ Running restoration, please wait...", _build_slider_html(None, None)), 
+            fn=lambda: ("⏳ Processing... Please wait.", _build_slider_html(None, None)), 
             outputs=[status_box, slider_view]
         ).then(
             fn=run_inference,
@@ -272,4 +285,5 @@ def build_demo():
 
 if __name__ == "__main__":
     demo = build_demo()
-    demo.queue(max_size=8).launch(server_name="0.0.0.0", show_error=True)
+    # default_concurrency_limit=1 prevents multiple heavy runs at once
+    demo.queue(max_size=8, default_concurrency_limit=1).launch(server_name="0.0.0.0", show_error=True)