fix texture

app.py

@@ -48,27 +48,27 @@ TASK_PRESETS = {
 }
 DEFAULT_PRESET = "Low-light Enhancement"
 
-# --- UI Header (Strictly 2 lines, centered) ---
+# --- UI Header ---
 TITLE_HTML = """
 <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>
+    <h1 style="font-size: 3rem; 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>
 """
 
-# --- Full-Width Vertical CSS ---
+# --- 核心修复：纯布局 CSS，不干扰 Gradio 原生颜色 ---
 CUSTOM_CSS = """
-/* 放宽最大宽度，让网页横向占满 */
-.gradio-container { max-width: 1800px !important; margin: auto !important; padding: 40px 20px !important; }
+/* 放宽最大宽度，横向占满 */
+.gradio-container { max-width: 1400px !important; margin: auto !important; padding-top: 30px !important; }
 
-/* 定义区块的视觉卡片风格 */
+/* 卡片容器：使用 Gradio 自带的 CSS 变量，完美适应深浅模式 */
 .rr-section {
-    background: #ffffff !important;
-    border: 1px solid #e2e8f0 !important;
+    background: var(--background-fill-primary) !important;
+    border: 1px solid var(--border-color-primary) !important;
     border-radius: 16px !important;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
-    padding: 30px !important;
-    margin-bottom: 30px !important;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
+    padding: 24px !important;
+    margin-bottom: 24px !important;
 }
 
 /* 巨型行动按钮 */
@@ -76,23 +76,29 @@ CUSTOM_CSS = """
     background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
     color: white !important;
     border: none !important;
-    font-size: 1.3rem !important;
+    font-size: 1.25rem !important;
     font-weight: 700 !important;
-    padding: 18px !important;
+    padding: 16px !important;
     border-radius: 12px !important;
-    box-shadow: 0 6px 20px -4px rgba(79, 70, 229, 0.4) !important;
-    transition: all 0.2s ease-in-out !important;
+    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4) !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
     margin-top: 10px !important;
 }
 #run-btn:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 10px 25px -4px rgba(79, 70, 229, 0.5) !important;
+    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5) !important;
 }
 
-/* 标题样式 */
-.section-title {
-    font-size: 1.4rem; font-weight: 700; color: #1e293b; 
-    margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
+/* 状态栏：使用主题变量 */
+.rr-status {
+    background: var(--background-fill-secondary) !important;
+    border: 1px solid var(--border-color-primary) !important;
+    border-radius: 8px !important;
+    padding: 12px 16px !important;
+    font-size: 1rem !important;
+    color: var(--body-text-color) !important;
+    margin-bottom: 20px !important;
+    font-family: ui-monospace, monospace !important;
 }
 """
 
@@ -131,9 +137,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:
+    # 巧妙利用 var(--body-text-color) 等变量，适配深色模式
     if before_image is None or after_image is None:
         return """
-        <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);'>
+        <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: 12px; font-size: 1.2rem; background: var(--background-fill-secondary);'>
             Upload an image and run to see the full-width comparison here.
         </div>
         """
@@ -148,18 +155,17 @@ 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+'%';"
 
-    # 动态自适应：外层包裹居中，内层按原��比例撑开，最大高度限制为屏幕高度的 80% 防止竖图过长
     return f"""
-    <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);">
+    <div style="display: flex; justify-content: center; width: 100%; background: var(--background-fill-secondary); border-radius: 12px; 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:8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
           <!-- 底图: 修复后 -->
           <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 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.5); 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 2px 10px rgba(0,0,0,0.4); font-weight:bold; color:#1e293b; font-size:1.3rem;">↔</div>
           </div>
           
           <!-- 透明原生滑动条 -->
@@ -167,7 +173,7 @@ def _build_slider_html(before_image: Image.Image, after_image: Image.Image) -> s
         </div>
     </div>
     
-    <div style="display:flex; justify-content:space-between; color:var(--body-text-color-subdued); font-size:1.1rem; padding-top:16px; font-weight:600;">
+    <div style="display:flex; justify-content:space-between; color:var(--body-text-color-subdued); font-size:1.05rem; padding-top:12px; font-weight:600;">
       <span>⬅️ Original</span>
       <span>Restored ➡️</span>
     </div>
@@ -210,30 +216,30 @@ def run_inference(image: Optional[Image.Image], task_name: str, prompt: str, ste
         return None, f"❌ Failed: {exc}", _build_slider_html(None, None)
 
 def build_demo():
-    # 启用全局大号字体和间距
-    atmospheric_theme = gr.themes.Soft(
-        text_size=gr.themes.sizes.text_lg,
-        spacing_size=gr.themes.sizes.spacing_lg
+    # 使用纯净的 Soft 主题，交由 Gradio 原生处理深浅色模式的颜色变化
+    theme = gr.themes.Soft(
+        primary_hue="indigo",
+        text_size=gr.themes.sizes.text_lg
     )
 
-    with gr.Blocks(css=CUSTOM_CSS, title="RealRestorer", theme=atmospheric_theme) as demo:
+    with gr.Blocks(css=CUSTOM_CSS, title="RealRestorer", theme=theme) as demo:
         gr.HTML(TITLE_HTML)
 
         # ==========================================
-        # Section 1 & 2: 图像上传与控制参数 (纵向排列)
+        # Section 1: 图像上传与控制参数 (纵向排列)
         # ==========================================
         with gr.Column(elem_classes=["rr-section"]):
-            gr.HTML("<div class='section-title'>📥 1. Upload & Settings</div>")
+            gr.Markdown("### 📥 1. Upload & Settings")
             
-            # 1. 超宽的图片上传区域
-            input_image = gr.Image(label="Upload Image", type="pil", height=450)
+            # 横向宽屏上传框
+            input_image = gr.Image(label="Upload Image", type="pil", height=420)
             
-            # 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)
+                    prompt_box = gr.Textbox(label="Instruction (输入指令)", value=TASK_PRESETS[DEFAULT_PRESET], lines=1)
             
             with gr.Row():
                 with gr.Column(scale=1):
@@ -243,20 +249,17 @@ def build_demo():
                 with gr.Column(scale=1):
                     seed_box = gr.Number(label="Seed (-1 for random)", value=DEFAULT_SEED, precision=0)
 
-            # 3. 占据一整行的巨型运行按钮
+            # 巨型运行按钮
             run_button = gr.Button("🚀 Run Restoration", elem_id="run-btn")
 
         # ==========================================
-        # Section 3: 结果展示 (横跨整个屏幕)
+        # Section 2: 结果展示 (横跨全屏)
         # ==========================================
         with gr.Column(elem_classes=["rr-section"]):
-            gr.HTML("<div class='section-title'>🖼️ 2. Restoration Results</div>")
+            gr.Markdown("### 🖼️ 2. Restoration Results")
             
-            status_box = gr.Textbox(
-                label="Status", 
-                value="💡 Ready. Upload an image, adjust settings, and click Run.", 
-                interactive=False, 
-                lines=1
+            status_box = gr.HTML(
+                value="<div class='rr-status'>💡 Status: Ready. Upload an image, adjust settings, and click Run.</div>"
             )
             
             with gr.Tabs():
@@ -264,8 +267,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=700, show_label=False)
+                    output_image = gr.Image(label="Restored Result", type="pil", interactive=False, height=600, show_label=False)
 
         # ==========================================
         # Events
@@ -273,17 +275,20 @@ def build_demo():
         task_dropdown.change(fn=_on_preset_change, inputs=[task_dropdown], outputs=[prompt_box])
         
         run_button.click(
-            fn=lambda: ("⏳ Processing... Please wait.", _build_slider_html(None, None)), 
+            fn=lambda: ("<div class='rr-status'>⏳ Status: Processing... Please wait.</div>", _build_slider_html(None, None)), 
             outputs=[status_box, slider_view]
         ).then(
             fn=run_inference,
             inputs=[input_image, task_dropdown, prompt_box, steps_slider, guidance_slider, seed_box],
             outputs=[output_image, status_box, slider_view],
+        ).then(
+            fn=lambda status: f"<div class='rr-status'>{status}</div>",
+            inputs=[status_box],
+            outputs=[status_box]
         )
 
     return demo
 
 if __name__ == "__main__":
     demo = build_demo()
-    # 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)