Update app.py

app.py

@@ -153,96 +153,57 @@ SAVE_LOCK = threading.Lock()
 
 CUSTOM_CSS = """
 .gradio-container {
-    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;
+    max-width: 1300px !important;
 }
 #hero {
-    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);
+    border: 1px solid #2b2f3a;
+    border-radius: 16px;
+    padding: 20px 22px;
+    background: linear-gradient(135deg, #121826 0%, #1d2540 55%, #2a1f45 100%);
+    margin-bottom: 14px;
 }
 #hero h1 {
     margin: 0 0 8px 0;
-    font-size: 2rem;
-    font-weight: 700;
+    font-size: 1.9rem;
 }
 #hero p {
     margin: 0;
-    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);
+    color: #d0d8f0;
 }
 .panel {
-    border: 1px solid #334155 !important;
-    border-radius: 16px !important;
+    border: 1px solid #2e3445 !important;
+    border-radius: 14px !important;
     padding: 14px !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);
+    background: #111522 !important;
 }
 .hint {
-    color: #a5b4d8;
+    color: #9aa7c9;
     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;
+.sample-brief {
+    display: grid;
+    gap: 10px;
+    margin-top: 8px;
 }
-.metric-card {
-    border: 1px solid #2f3a52;
+.sample-brief-card {
+    border: 1px solid rgba(150, 168, 210, 0.35);
     border-radius: 12px;
+    background: rgba(110, 130, 180, 0.12);
     padding: 10px 12px;
-    margin-bottom: 8px;
-    background: rgba(15, 23, 42, 0.48);
 }
-.footer-note {
-    margin-top: 14px;
-    color: #93a4c4;
-    font-size: 0.82rem;
-    text-align: right;
+.sample-brief-title {
+    margin: 0 0 6px 0;
+    font-size: 0.88rem;
+    font-weight: 600;
+    color: #c3d0f1;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+.sample-brief-text {
+    margin: 0;
+    color: #e5ebff;
+    line-height: 1.55;
+    white-space: pre-wrap;
 }
 """
 
@@ -419,9 +380,20 @@ def recompute_method_aggregates() -> Path:
 def build_sample_brief(sample: Dict[str, Any], index: int, total: int) -> str:
     story = sample.get("story_text") or "(未找到对应 story 文本，请检查 clip_movie_story 下是否有同名 txt)"
     return (
-        f"### 当前匿名样本 {index + 1}/{total}\n"
-        f"- **Sample ID**: `{sample['anon_id']}`\n\n"
-        f"### Story Description\n{story}"
+        "<div class='sample-brief'>"
+        "<div class='sample-brief-card'>"
+        "<p class='sample-brief-title'>当前匿名样本</p>"
+        f"<p class='sample-brief-text'>{index + 1}/{total}</p>"
+        "</div>"
+        "<div class='sample-brief-card'>"
+        "<p class='sample-brief-title'>Sample ID</p>"
+        f"<p class='sample-brief-text'><code>{sample['anon_id']}</code></p>"
+        "</div>"
+        "<div class='sample-brief-card'>"
+        "<p class='sample-brief-title'>Story Description</p>"
+        f"<p class='sample-brief-text'>{story}</p>"
+        "</div>"
+        "</div>"
     )
 
 
@@ -438,12 +410,7 @@ def create_app():
             """
             <div id="hero">
                 <h1>VideoEval · Movie-Level Evaluation</h1>
-                <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>
+                <p>统一电影级评测问卷，支持方法级均分统计（含 CL / CRh / AVG）</p>
             </div>
             """
         )
@@ -496,15 +463,13 @@ def create_app():
                 for key in keys:
                     name, desc = criteria_map[key]
                     with gr.Group(elem_classes=["panel"]):
-                        gr.Markdown(
-                            f"<div class='metric-card'><strong>{key} · {name}</strong><br/><span class='hint'>{desc}</span></div>"
-                        )
+                        gr.Markdown(f"**{key} · {name}**")
+                        gr.Markdown(f"<span class='hint'>{desc}</span>")
                         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: