Update app.py

app.py

@@ -153,42 +153,96 @@ SAVE_LOCK = threading.Lock()
 
 CUSTOM_CSS = """
 .gradio-container {
-    max-width: 1320px !important;
+    max-width: 1360px !important;
+    background:
+        radial-gradient(circle at 15% 10%, rgba(139, 92, 246, 0.20) 0%, transparent 36%),
+        radial-gradient(circle at 82% 14%, rgba(59, 130, 246, 0.18) 0%, transparent 40%),
+        linear-gradient(180deg, #070b16 0%, #0f1424 42%, #111827 100%);
+    min-height: 100vh;
+}
+.gradio-container h1,
+.gradio-container h2,
+.gradio-container h3,
+.gradio-container h4 {
+    letter-spacing: 0.2px;
 }
 #hero {
-    border: 1px solid #323a58;
-    border-radius: 18px;
-    padding: 22px 24px;
-    background: linear-gradient(132deg, #10172f 0%, #1b2550 52%, #2a1d49 100%);
-    margin-bottom: 12px;
-    box-shadow: 0 12px 30px rgba(6, 9, 26, 0.35);
+    border: 1px solid #334155;
+    border-radius: 20px;
+    padding: 24px 28px;
+    background:
+        linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(37, 51, 89, 0.95) 45%, rgba(59, 39, 97, 0.92) 100%);
+    margin-bottom: 16px;
+    box-shadow: 0 14px 38px rgba(2, 6, 23, 0.42);
 }
 #hero h1 {
-    margin: 0 0 10px 0;
+    margin: 0 0 8px 0;
     font-size: 2rem;
-    color: #f5f7ff;
+    font-weight: 700;
 }
 #hero p {
     margin: 0;
-    color: #ced6ee;
+    color: #dbe6ff;
+    line-height: 1.55;
+}
+.stats-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 14px;
+}
+.stat-chip {
+    border: 1px solid #475569;
+    border-radius: 999px;
+    padding: 6px 12px;
+    font-size: 0.85rem;
+    color: #dbeafe;
+    background: rgba(15, 23, 42, 0.45);
 }
 .panel {
-    border: 1px solid #2e3445 !important;
-    border-radius: 14px !important;
+    border: 1px solid #334155 !important;
+    border-radius: 16px !important;
     padding: 14px !important;
-    background: linear-gradient(180deg, #101625 0%, #0f1421 100%) !important;
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
+    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.28);
 }
 .hint {
-    color: #9aa7c9;
+    color: #a5b4d8;
     font-size: 0.9rem;
 }
+.gr-button {
+    border-radius: 10px !important;
+    border: 1px solid #3a475f !important;
+}
+.gr-button.primary {
+    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 45%, #3b82f6 100%) !important;
+    color: white !important;
+    border: none !important;
+}
+.gr-button:hover {
+    transform: translateY(-1px);
+    transition: all 0.15s ease;
+}
+.gr-accordion {
+    border: 1px solid #2f3a52 !important;
+    border-radius: 14px !important;
+    background: rgba(15, 23, 42, 0.64) !important;
+}
+.gr-accordion .label-wrap span {
+    font-weight: 600 !important;
+}
 .metric-card {
-    border: 1px solid #2f3958 !important;
-    border-radius: 12px !important;
-    background: linear-gradient(180deg, #111b31 0%, #101625 100%) !important;
+    border: 1px solid #2f3a52;
+    border-radius: 12px;
+    padding: 10px 12px;
+    margin-bottom: 8px;
+    background: rgba(15, 23, 42, 0.48);
 }
-#submit-row button.primary {
-    box-shadow: 0 8px 20px rgba(93, 106, 255, 0.28) !important;
+.footer-note {
+    margin-top: 14px;
+    color: #93a4c4;
+    font-size: 0.82rem;
+    text-align: right;
 }
 """
 
@@ -384,7 +438,12 @@ def create_app():
             """
             <div id="hero">
                 <h1>VideoEval · Movie-Level Evaluation</h1>
-                <p>统一电影级评测问卷，支持方法级均分统计（含 CL / CRh / AVG）</p>
+                <p>统一电影级评测问卷，支持方法级均分统计（含 CL / CRh / AVG）。界面已针对 Hugging Face Spaces 展示体验进行优化，适合评测、演示与数据回收。</p>
+                <div class="stats-strip">
+                    <span class="stat-chip">Movie-Level · 12 Metrics</span>
+                    <span class="stat-chip">Auto Aggregate · CL / CRh / AVG</span>
+                    <span class="stat-chip">Space Ready · Persistent Storage</span>
+                </div>
             </div>
             """
         )
@@ -399,7 +458,6 @@ def create_app():
         with gr.Row():
             with gr.Column(scale=5, elem_classes=["panel"]):
                 gr.Markdown("### 1) 评测员与样本")
-                gr.Markdown("<span class='hint'>先确认评测员身份与匿名样本，再开始打分。</span>")
                 with gr.Row():
                     evaluator_input = gr.Textbox(label="Evaluator ID", value="anonymous")
                     sample_dropdown = gr.Dropdown(
@@ -408,7 +466,7 @@ def create_app():
                         value=samples[0]["anon_id"] if samples else None,
                         interactive=True,
                     )
-                with gr.Row(elem_id="submit-row"):
+                with gr.Row():
                     prev_btn = gr.Button("← Previous")
                     next_btn = gr.Button("Next →")
                     submit_btn = gr.Button("提交当前评分并统计", variant="primary")
@@ -437,14 +495,16 @@ def create_app():
             with gr.Accordion(section_title, open=True):
                 for key in keys:
                     name, desc = criteria_map[key]
-                    with gr.Group(elem_classes=["metric-card"]):
-                        gr.Markdown(f"**{key} · {name}**")
-                        gr.Markdown(f"<span class='hint'>{desc}</span>")
+                    with gr.Group(elem_classes=["panel"]):
+                        gr.Markdown(
+                            f"<div class='metric-card'><strong>{key} · {name}</strong><br/><span class='hint'>{desc}</span></div>"
+                        )
                         with gr.Row():
                             score_widgets[key] = gr.Radio(choices=[1, 2, 3, 4, 5], label=f"{key} Score", scale=1)
                             reason_widgets[key] = gr.Textbox(label=f"{key} Reason（可选）", lines=2, placeholder="补充评分依据", scale=2)
 
         final_summary = gr.Textbox(label="Final Summary（可选）", lines=4, placeholder="总结该视频的主要优缺点")
+        gr.HTML("<div class='footer-note'>VideoEval Space UI · Crafted for clearer human evaluation workflow</div>")
 
         def _sync_sample_from_dropdown(anon_id: str) -> Tuple[str, str, int]:
             if not anon_id or anon_id not in sample_map: