update UI

app.py

@@ -48,165 +48,49 @@ TASK_PRESETS = {
 }
 DEFAULT_PRESET = "Low-light Enhancement"
 
-# --- UI Header ---
+# --- UI Header (Strictly 2 lines) ---
 TITLE_HTML = """
-<div style="text-align: center; margin-bottom: 30px;">
-    <h1 style="font-size: 2.5rem; margin: 0 0 8px 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: #64748b; margin: 0 auto; font-weight: 500; max-width: 860px; line-height: 1.65;">
-         A powerful open-source image restoration model for deblurring, denoising, deflaring,
-         low-light enhancement, and more.<br/>
-         Simply describe the restoration task you want in natural language and give it a try.
-    </p>
+<div style="text-align: center; margin-bottom: 24px;">
+    <h1 style="font-size: 2.6rem; margin: 0 0 8px 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: #64748b; margin: 0; font-weight: 500;">A powerful image restoration model supporting deblurring, denoising, deflaring, low-light enhancement, and more.</p>
 </div>
 """
 
-# --- Clean CSS (Expanded Width & Symmetrical Layout) ---
+# --- Clean CSS for custom components ---
 CUSTOM_CSS = """
-.gradio-container {
-    --body-background-fill: #f6f9fc !important;
-    --body-background-fill-dark: #f6f9fc !important;
-    --background-fill-primary: #ffffff !important;
-    --background-fill-secondary: #f8fbff !important;
-    --block-background-fill: #ffffff !important;
-    --block-background-fill-dark: #ffffff !important;
-    --block-border-color: #e2e8f0 !important;
-    --block-border-color-dark: #e2e8f0 !important;
-    --border-color-primary: #e2e8f0 !important;
-    --border-color-accent: #c7d2fe !important;
-    --input-background-fill: #ffffff !important;
-    --input-background-fill-focus: #ffffff !important;
-    --input-border-color: #d7dfeb !important;
-    --input-border-color-focus: #a5b4fc !important;
-    --body-text-color: #1e293b !important;
-    --body-text-color-subdued: #64748b !important;
-    --block-title-text-color: #0f172a !important;
-    --block-label-text-color: #334155 !important;
-    --block-info-text-color: #64748b !important;
-    --button-secondary-background-fill: #ffffff !important;
-    --button-secondary-background-fill-hover: #f8fbff !important;
-    --button-secondary-text-color: #334155 !important;
-    --button-secondary-border-color: #d7dfeb !important;
-}
-body { background-color: #f1f5f9 !important; color: #1e293b !important; }
-/* 扩大最大宽度，充分利用大屏幕 */
-.gradio-container { max-width: 1600px !important; margin: 0 auto !important; padding-top: 30px !important; }
-.gradio-container,
-.gradio-container .prose,
-.gradio-container .form,
-.gradio-container label,
-.gradio-container span,
-.gradio-container p,
-.gradio-container h1,
-.gradio-container h2,
-.gradio-container h3,
-.gradio-container h4 {
-    color: #1e293b !important;
-}
-.gradio-container svg {
-    color: inherit !important;
-}
+/* 扩大容器，匹配大屏 1:1 体验 */
+.gradio-container { max-width: 1500px !important; margin: auto !important; padding-top: 30px !important; }
+
+/* 自定义白底卡片面板 */
 .rr-panel {
-    background: white !important;
+    background: #ffffff !important;
     border: 1px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+    border-radius: 16px !important;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important;
     padding: 24px !important;
 }
+
+/* 标题小修饰 */
 .rr-panel-title {
-    font-size: 1.2rem !important; font-weight: bold !important; color: #1e293b !important;
-    margin-bottom: 20px !important; padding-bottom: 10px !important; border-bottom: 1px solid #e2e8f0 !important;
+    font-size: 1.15rem !important; font-weight: 700 !important; color: #1e293b !important;
+    margin-bottom: 16px !important; padding-bottom: 8px !important; border-bottom: 1px solid #e2e8f0 !important;
 }
+
+/* 漂亮的运行按钮 */
 #run-btn {
-    background: #4f46e5 !important; color: white !important; border: none !important;
-    font-size: 1.15rem !important; font-weight: bold !important; border-radius: 8px !important; padding: 14px !important;
-    margin-top: 20px !important; box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2) !important;
+    background: linear-gradient(135deg, #4f46e5, #4338ca) !important; 
+    color: white !important; border: none !important;
+    font-size: 1.1rem !important; font-weight: bold !important; 
+    border-radius: 8px !important; padding: 12px !important;
+    margin-top: 10px !important; transition: all 0.2s;
 }
-#run-btn:hover { background: #4338ca !important; }
-.rr-accordion { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
-.rr-accordion > button { padding: 15px 0 5px !important; border-top: 1px solid #e2e8f0 !important; font-size: 0.95rem !important;}
+#run-btn:hover { box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important; transform: translateY(-1px); }
+
+/* 状态栏 */
 .rr-status {
-    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 16px; 
-    font-size: 0.95rem; color: #475569; margin-bottom: 20px; font-family: monospace; white-space: pre-wrap;
-}
-.rr-panel input,
-.rr-panel textarea,
-.rr-panel select {
-    background: #ffffff !important;
-    color: #1e293b !important;
-    border-color: #d7dfeb !important;
-}
-.rr-panel textarea::placeholder,
-.rr-panel input::placeholder {
-    color: #94a3b8 !important;
-}
-.rr-panel button:not(#run-btn) {
-    background: #ffffff !important;
-    color: #334155 !important;
-    border-color: #d7dfeb !important;
-}
-.rr-panel [role="tab"],
-.rr-panel [role="tab"] * {
-    color: #475569 !important;
-}
-.rr-panel [role="tab"][aria-selected="true"],
-.rr-panel [role="tab"][aria-selected="true"] * {
-    color: #4f46e5 !important;
-}
-.rr-panel [role="tablist"],
-.rr-panel .tabs,
-.rr-panel .tabitem {
-    background: #ffffff !important;
-}
-.rr-panel details,
-.rr-panel summary,
-.rr-panel .accordion,
-.rr-panel .gr-accordion {
-    background: #ffffff !important;
-    color: #1e293b !important;
-}
-.rr-panel .progress-text,
-.rr-panel .progress-text * {
-    color: #334155 !important;
-}
-.rr-panel .loading,
-.rr-panel .pending,
-.rr-panel .spinner,
-.rr-panel .wrap,
-.rr-panel .empty,
-.rr-panel .placeholder,
-.rr-panel .toast-wrap,
-.rr-panel .message,
-.rr-panel .panel {
-    background: #ffffff !important;
-    color: #334155 !important;
-}
-.rr-panel [data-testid="image"] {
-    background: white !important;
-    border-radius: 10px !important;
-    border: 1px solid #e2e8f0 !important;
-}
-.rr-panel [data-testid="image"] > div,
-.rr-panel [data-testid="image"] canvas,
-.rr-panel [data-testid="image"] img,
-.rr-panel [data-testid="image"] video {
-    background: white !important;
-}
-.rr-panel [data-testid="image"] button,
-.rr-panel [data-testid="image"] label,
-.rr-panel [data-testid="image"] span,
-.rr-panel [data-testid="image"] div {
-    color: #334155 !important;
-}
-.rr-panel .tabitem,
-.rr-panel .tabs,
-.rr-panel .tabs > .tab-nav {
-    background: white !important;
-}
-.rr-panel .empty,
-.rr-panel .placeholder,
-.rr-panel .loading,
-.rr-panel .wrap {
-    background: white !important;
+    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; 
+    padding: 12px 16px; font-size: 0.95rem; color: #475569; 
+    margin-bottom: 16px; font-family: ui-monospace, monospace;
 }
 """
 
@@ -245,13 +129,15 @@ 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:
+    # 空白状态
     if before_image is None or after_image is None:
         return """
-        <div style='height: 450px; display:flex; align-items:center; justify-content:center; color:#94a3b8; border: 2px dashed #e2e8f0; border-radius: 10px; font-size: 1.1rem; background: #f8fafc;'>
-            The comparison will appear here
+        <div style='height: 480px; display:flex; align-items:center; justify-content:center; color:#94a3b8; border: 2px dashed #cbd5e0; border-radius: 12px; font-size: 1.1rem; background: #f8fafc;'>
+            Upload an image and run to see the comparison here.
         </div>
         """
     
+    # 对齐尺寸
     if before_image.size != after_image.size:
         before_image = before_image.resize(after_image.size, Image.LANCZOS)
 
@@ -260,25 +146,26 @@ def _build_slider_html(before_image: Image.Image, after_image: Image.Image) -> s
     width, height = after_image.size
     slider_id = f"slider_{int(time.time() * 1000)}"
     
+    # 交互 JavaScript
     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+'%';"
 
     return f"""
-    <div style="position:relative; width:100%; max-height:75vh; aspect-ratio:{width}/{height}; overflow:hidden; border-radius:10px; background:#ffffff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border: 1px solid #e2e8f0;">
+    <div style="position:relative; width:100%; max-height:75vh; aspect-ratio:{width}/{height}; overflow:hidden; border-radius:12px; background:#e2e8f0; border: 1px solid #cbd5e0; margin: 0 auto;">
       <!-- 底图: 修复后 -->
-      <img src="{after_url}" style="position:absolute; inset:0; width:100%; height:100%; object-fit:contain;" draggable="false" />
+      <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; inset:0; width:100%; height:100%; object-fit:contain; clip-path:inset(0 50% 0 0);" 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.5); transform:translateX(-50%); pointer-events:none; z-index:10;">
-        <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:44px; height:44px; border-radius:50%; background:white; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.3); font-weight:bold; color:#333; 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 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>
       
       <!-- 透明原生滑动条 -->
-      <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;" />
+      <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:#64748b; font-size:0.95rem; padding-top:12px; font-weight:bold;">
+    <div style="display:flex; justify-content:space-between; color:#64748b; font-size:0.95rem; padding-top:12px; font-weight:600;">
       <span>⬅️ Original</span>
       <span>Restored ➡️</span>
     </div>
@@ -320,38 +207,47 @@ 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)
 
+
+# --- 利用原生的 gr.themes.Soft() 来防止渲染崩溃 ---
+custom_theme = gr.themes.Soft(
+    primary_hue="indigo", 
+    neutral_hue="slate"
+).set(
+    body_background_fill="#f1f5f9",
+    block_background_fill="#ffffff",
+    block_border_color="#e2e8f0",
+    block_border_width="1px",
+    block_radius="12px",
+    input_background_fill="#f8fafc",
+)
+
 def build_demo():
-    with gr.Blocks(
-        css=CUSTOM_CSS,
-        title="RealRestorer",
-        theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="pink", neutral_hue="slate"),
-    ) as demo:
+    with gr.Blocks(css=CUSTOM_CSS, title="RealRestorer", theme=custom_theme) as demo:
         gr.HTML(TITLE_HTML)
 
         # 1:1 Symmetrical Layout
-        with gr.Row():
+        with gr.Row(equal_height=False):
             
             # Left Column: Setup & Control (scale=1)
-            with gr.Column(scale=1, min_width=500, elem_classes=["rr-panel"]):
+            with gr.Column(scale=1, elem_classes=["rr-panel"]):
                 gr.HTML("<div class='rr-panel-title'>1. Setup & Control</div>")
                 
-                input_image = gr.Image(label="Upload Image", type="pil", height=320)
+                input_image = gr.Image(label="Upload Image", type="pil", height=320, show_label=False)
                 
                 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=3)
                 
-                # 将两个滑动条放在一行节省空间
                 with gr.Row():
                     guidance_slider = gr.Slider(minimum=1.0, maximum=6.0, value=DEFAULT_CFG, step=0.1, label="CFG / Guidance Scale")
                     steps_slider = gr.Slider(minimum=12, maximum=40, value=DEFAULT_STEPS, step=1, label="Inference Steps")
 
-                with gr.Accordion("Advanced Settings", open=False, elem_classes=["rr-accordion"]):
+                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", elem_id="run-btn")
 
             # Right Column: Results Preview (scale=1)
-            with gr.Column(scale=1, min_width=500, elem_classes=["rr-panel"]):
+            with gr.Column(scale=1, elem_classes=["rr-panel"]):
                 gr.HTML("<div class='rr-panel-title'>2. Results Preview</div>")
                 
                 status_box = gr.HTML(
@@ -363,7 +259,7 @@ def build_demo():
                         slider_view = gr.HTML(_build_slider_html(None, None))
                     
                     with gr.Tab("Output Image"):
-                        output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=650)
+                        output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=520, show_label=False)
 
         # Event Bindings
         task_dropdown.change(fn=_on_preset_change, inputs=[task_dropdown], outputs=[prompt_box])
@@ -385,4 +281,4 @@ def build_demo():
 
 if __name__ == "__main__":
     demo = build_demo()
-    demo.queue(max_size=8).launch(server_name="0.0.0.0", show_error=True)
+    demo.queue(max_size=8).launch(server_name="0.0.0.0", show_error=True)