Create app-style Hugging Face interface

app.py

@@ -370,131 +370,181 @@ def _status_html() -> str:
 
 
 CSS = """
-:root { --accent:#f97316; --ink:#0f172a; --muted:#475569; --line:#dbe3ef; }
-.gradio-container { max-width:1240px !important; margin:auto !important; color:var(--ink); }
-#hero { border:1px solid var(--line); background:#f8fbff; border-radius:8px; padding:22px 28px; margin:10px 0 22px; }
-#hero h1 { margin:0 0 8px; font-size:30px; line-height:1.15; }
-#hero p { margin:0; color:#334155; }
-button.primary, .gradio-button.primary { background:var(--accent) !important; border-color:var(--accent) !important; color:white !important; font-weight:700 !important; }
-.status { border-radius:8px; padding:12px 14px; margin:8px 0 18px; border:1px solid var(--line); }
+:root {
+  --bg:#f5f7fb;
+  --surface:#ffffff;
+  --surface-2:#f8fafc;
+  --ink:#0f172a;
+  --muted:#64748b;
+  --line:#d9e2ef;
+  --accent:#f97316;
+  --accent-2:#fb923c;
+  --green:#16a34a;
+  --red:#dc2626;
+  --blue:#2563eb;
+  --shadow:0 18px 45px rgba(15,23,42,.08);
+}
+body, .gradio-container { background:var(--bg) !important; color:var(--ink); }
+.gradio-container { max-width:1280px !important; margin:auto !important; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
+footer { display:none !important; }
+#app-hero { margin:12px 0 18px; padding:24px 28px; border-radius:22px; background:linear-gradient(135deg,#111827 0%,#1e293b 55%,#f97316 160%); color:white; box-shadow:var(--shadow); }
+#app-hero .eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:#fed7aa; font-weight:800; margin-bottom:8px; }
+#app-hero h1 { margin:0; font-size:32px; line-height:1.12; letter-spacing:-.02em; }
+#app-hero p { margin:10px 0 0; color:#e2e8f0; max-width:840px; }
+#app-hero .hero-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
+#app-hero .hero-pills span { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:7px 11px; font-size:13px; }
+.status { border-radius:14px; padding:12px 14px; margin:8px 0 18px; border:1px solid var(--line); }
 .status.ok { background:#ecfdf5; border-color:#86efac; color:#065f46; }
 .status.bad { background:#fff1f2; border-color:#fda4af; color:#991b1b; }
-.product-card, .overall-card, .note-card { border:1px solid var(--line); border-radius:8px; padding:16px; background:white; }
+.app-section { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:8px 0 14px; }
+.app-section h2 { margin:0; font-size:24px; letter-spacing:-.02em; }
+.app-section p { margin:5px 0 0; color:var(--muted); }
+.app-badge { background:#fff7ed; color:#c2410c; border:1px solid #fed7aa; border-radius:999px; padding:7px 12px; font-weight:800; font-size:13px; }
+.app-card, .product-card, .overall-card, .note-card { border:1px solid var(--line); border-radius:18px; padding:18px; background:var(--surface); box-shadow:0 10px 24px rgba(15,23,42,.05); }
+.input-card { border:1px solid var(--line); border-radius:18px; padding:16px; background:var(--surface); box-shadow:0 10px 24px rgba(15,23,42,.05); }
+.panel-title { margin:0 0 12px; font-size:17px; font-weight:850; }
 .muted { color:var(--muted); }
 .meta-pills { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
-.meta-pills span { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:5px 9px; font-size:13px; }
-.chip { display:inline-block; border-radius:999px; padding:5px 10px; font-weight:700; font-size:13px; }
+.meta-pills span { background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:6px 10px; font-size:13px; }
+.chip { display:inline-block; border-radius:999px; padding:5px 10px; font-weight:800; font-size:13px; }
 .conf { color:#334155; font-size:13px; margin-left:8px; }
 .small-label { color:#475569; font-size:13px; margin-bottom:8px; }
-.prob-row { display:grid; grid-template-columns:82px 1fr 44px; gap:8px; align-items:center; font-size:13px; margin:6px 0; }
-.bar { height:8px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
-.bar i { display:block; height:100%; background:var(--accent); }
-.aspect-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
-.aspect-card { border:1px solid var(--line); border-top:4px solid #64748b; border-radius:8px; padding:13px; background:white; min-height:165px; }
-.aspect-card.focus { border-top-color:var(--accent); box-shadow:0 2px 10px rgba(15,23,42,.08); }
-.aspect-card.dim { opacity:.66; }
+.overall-card { margin-top:14px; background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); }
+.overall-main { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
+.prob-row { display:grid; grid-template-columns:82px 1fr 44px; gap:8px; align-items:center; font-size:13px; margin:7px 0; }
+.bar { height:9px; background:#e2e8f0; border-radius:999px; overflow:hidden; }
+.bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
+.aspect-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
+.aspect-card { border:1px solid var(--line); border-top:5px solid #64748b; border-radius:18px; padding:15px; background:white; min-height:172px; box-shadow:0 10px 22px rgba(15,23,42,.05); }
+.aspect-card.focus { border-top-color:var(--accent); box-shadow:0 18px 34px rgba(249,115,22,.13); }
+.aspect-card.dim { opacity:.58; }
 .aspect-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
 .aspect-head span, .source-line { color:#475569; font-size:12px; }
 .aspect-card p { margin:8px 0; color:#334155; font-size:13px; }
 .evidence-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
 .evidence-token { color:#1d4ed8; background:#eef2ff; border:1px solid #bfdbfe; border-radius:999px; padding:3px 8px; font-size:12px; }
-.review-box { border:1px dashed #cbd5e1; background:#f8fafc; border-radius:8px; padding:14px; line-height:1.6; }
-mark { background:#fde68a; color:#111827; border-radius:4px; padding:1px 3px; }
+.review-box { border:1px dashed #cbd5e1; background:#f8fafc; border-radius:14px; padding:15px; line-height:1.65; }
+mark { background:#fde68a; color:#111827; border-radius:5px; padding:1px 4px; }
 .metric-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:8px 0 18px; }
-.metric { border:1px solid var(--line); border-radius:8px; padding:16px; background:white; }
+.metric { border:1px solid var(--line); border-radius:18px; padding:18px; background:white; box-shadow:0 10px 24px rgba(15,23,42,.05); }
 .metric span { display:block; color:#334155; font-size:13px; }
-.metric b { display:block; font-size:28px; margin:6px 0; }
+.metric b { display:block; font-size:30px; margin:6px 0; letter-spacing:-.03em; }
 .metric small { color:#475569; }
-.table-wrap { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:white; }
+.table-wrap { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:white; box-shadow:0 10px 24px rgba(15,23,42,.05); }
 .kv-table { width:100%; border-collapse:collapse; }
-.kv-table td { border-bottom:1px solid #e2e8f0; padding:9px 12px; }
-.kv-table td:first-child { width:220px; color:#334155; font-weight:700; background:#f8fafc; }
-@media (max-width:860px) { .aspect-grid, .metric-grid { grid-template-columns:1fr; } }
+.kv-table td { border-bottom:1px solid #e2e8f0; padding:11px 13px; }
+.kv-table td:first-child { width:220px; color:#334155; font-weight:800; background:#f8fafc; }
+button.primary, .gradio-button.primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important; border:none !important; color:white !important; font-weight:850 !important; border-radius:13px !important; min-height:44px !important; box-shadow:0 12px 24px rgba(249,115,22,.22) !important; }
+.gradio-tabs { border-radius:18px !important; }
+.tab-nav button { font-weight:750 !important; }
+.gradio-dataframe, .wrap.svelte-1lcyrx4, .dataframe-container { border-radius:16px !important; overflow:hidden !important; }
+textarea, input, select { border-radius:12px !important; }
+@media (max-width:920px) { .aspect-grid, .metric-grid { grid-template-columns:1fr; } #app-hero h1 { font-size:26px; } }
 """
 
-
 def build_app() -> gr.Blocks:
     categories = ["All"] + sorted({p["category"] for p in PRODUCTS})
     tags = sorted({tag for p in PRODUCTS for tag in p.get("tags", [])})
-    with gr.Blocks(css=CSS, title="Clothing Sentiment Analysis") as demo:
-        gr.HTML('<div id="hero"><h1>Aspect-Level Sentiment Analysis for Clothing Reviews</h1><p>BERT + metadata cross-attention fusion for consumer decision support and merchant diagnostics.</p></div>')
+    with gr.Blocks(css=CSS, title="Clothing Sentiment Intelligence") as demo:
+        gr.HTML(
+            '<div id="app-hero">'
+            '<div class="eyebrow">BERT + Metadata Cross-Attention</div>'
+            '<h1>Clothing Review Sentiment Intelligence App</h1>'
+            '<p>Explore overall sentiment, six aspect-level opinions, metadata-driven risks, and research metrics from the 10W0715 experiment.</p>'
+            '<div class="hero-pills"><span>Consumer decision support</span><span>Merchant diagnostics</span><span>Research dashboard</span></div>'
+            '</div>'
+        )
         gr.HTML(_status_html())
         with gr.Tabs():
-            with gr.Tab("Consumer Interface"):
+            with gr.Tab("Consumer App"):
+                gr.HTML('<div class="app-section"><div><h2>Shopping Review Analyzer</h2><p>Select a product, inspect overall sentiment, and compare aspect-level strengths and weaknesses.</p></div><span class="app-badge">Consumer view</span></div>')
                 with gr.Row():
-                    with gr.Column(scale=4):
+                    with gr.Column(scale=4, elem_classes=["input-card"]):
+                        gr.HTML('<div class="panel-title">Product context</div>')
                         product_select = gr.Dropdown(_product_names(), value=_product_names()[0], label="Choose a product")
                         consumer_aspect = gr.Dropdown(["All"] + ASPECTS, value="All", label="Highlight aspect evidence")
                         product_detail = gr.HTML()
                         evidence_html = gr.HTML()
-                    with gr.Column(scale=6):
+                    with gr.Column(scale=7):
+                        gr.HTML('<div class="panel-title">Aspect sentiment cards</div>')
                         aspect_html = gr.HTML()
-                consumer_table = gr.Dataframe(headers=["Aspect", "Prediction", "Confidence", "Key review evidence"], datatype=["str", "str", "number", "str"], label="Aspect-level result table", interactive=False)
-                gr.Markdown("### Product Finder")
+                with gr.Accordion("Technical aspect result table", open=False):
+                    consumer_table = gr.Dataframe(headers=["Aspect", "Prediction", "Confidence", "Key review evidence"], datatype=["str", "str", "number", "str"], interactive=False)
+                gr.HTML('<div class="app-section"><div><h2>Product Finder</h2><p>Filter products by metadata and target sentiment signal.</p></div></div>')
                 with gr.Row():
-                    filter_aspect = gr.Dropdown(["Overall"] + ASPECTS, value="Overall", label="Target metric")
-                    filter_sentiment = gr.Radio(["Any", "Positive", "Negative", "Not_Mentioned", "Neutral"], value="Any", label="Preferred prediction")
-                    filter_category = gr.Dropdown(categories, value="All", label="Category")
-                with gr.Row():
-                    filter_tags = gr.CheckboxGroup(tags, label="Required metadata tags")
-                    min_rating = gr.Slider(3.0, 5.0, value=4.0, step=0.1, label="Minimum product rating")
-                filter_btn = gr.Button("Filter Products", variant="primary")
+                    with gr.Column(scale=3, elem_classes=["input-card"]):
+                        filter_aspect = gr.Dropdown(["Overall"] + ASPECTS, value="Overall", label="Target metric")
+                        filter_sentiment = gr.Radio(["Any", "Positive", "Negative", "Not_Mentioned", "Neutral"], value="Any", label="Preferred prediction")
+                    with gr.Column(scale=4, elem_classes=["input-card"]):
+                        filter_category = gr.Dropdown(categories, value="All", label="Category")
+                        filter_tags = gr.CheckboxGroup(tags, label="Required metadata tags")
+                    with gr.Column(scale=3, elem_classes=["input-card"]):
+                        min_rating = gr.Slider(3.0, 5.0, value=4.0, step=0.1, label="Minimum product rating")
+                        filter_btn = gr.Button("Find Matching Products", variant="primary")
                 filter_summary = gr.HTML()
                 filter_table = gr.Dataframe(headers=["Product", "Category", "Prediction", "Confidence", "Rating", "Price", "Metadata"], datatype=["str", "str", "str", "number", "number", "number", "str"], interactive=False, label="Filtered product candidates")
                 product_select.change(consumer_product_view, [product_select, consumer_aspect], [product_detail, aspect_html, evidence_html, consumer_table])
                 consumer_aspect.change(consumer_product_view, [product_select, consumer_aspect], [product_detail, aspect_html, evidence_html, consumer_table])
                 filter_btn.click(filter_products, [filter_aspect, filter_sentiment, filter_category, filter_tags, min_rating], [filter_table, filter_summary])
 
-            with gr.Tab("Merchant Interface"):
+            with gr.Tab("Merchant App"):
+                gr.HTML('<div class="app-section"><div><h2>Merchant Sentiment Operations</h2><p>Monitor products, screen new metadata, and test external customer reviews.</p></div><span class="app-badge">Business view</span></div>')
                 with gr.Row():
                     with gr.Column(scale=4):
-                        gr.Markdown("### Model Basic Information")
+                        gr.HTML('<div class="panel-title">Model basic information</div>')
                         gr.HTML(model_info_html())
-                    with gr.Column(scale=6):
-                        gr.Markdown("### Product Score Monitor")
+                    with gr.Column(scale=6, elem_classes=["input-card"]):
+                        gr.HTML('<div class="panel-title">Product score monitor</div>')
                         merchant_metric = gr.Dropdown(["Overall"] + ASPECTS, value="Overall", label="Choose overall or aspect")
-                        merchant_scores = gr.Dataframe(headers=["Product", "Category", "Metric", "Prediction", "Confidence", "Price", "Rating"], value=[["Click Refresh Product Scores", "", "", "", 0.0, 0.0, 0.0]], datatype=["str", "str", "str", "str", "number", "number", "number"], interactive=False)
                         refresh_scores = gr.Button("Refresh Product Scores", variant="primary")
-                gr.Markdown("### New Product Metadata Risk Screening")
-                with gr.Row():
-                    new_features = gr.Textbox("Cotton Polyester Blend, Slim Fit, Graphic Print, Machine Wash", label="New product features")
-                    new_categories = gr.Textbox("Clothing > Women > Tops > T-Shirts", label="New product categories")
+                        merchant_scores = gr.Dataframe(headers=["Product", "Category", "Metric", "Prediction", "Confidence", "Price", "Rating"], value=[["Click Refresh Product Scores", "", "", "", 0.0, 0.0, 0.0]], datatype=["str", "str", "str", "str", "number", "number", "number"], interactive=False)
+                gr.HTML('<div class="app-section"><div><h2>New Product Risk Screening</h2><p>Use metadata to preview which aspect may need QA or product-page clarification.</p></div></div>')
                 with gr.Row():
-                    new_price = gr.Number(29.99, label="Price")
-                    new_rating = gr.Number(4.1, label="Expected or early average rating")
-                    new_count = gr.Number(35, label="Expected or early rating count")
-                    new_focus = gr.Dropdown(["All"] + ASPECTS, value="All", label="Focus aspect")
-                screen_btn = gr.Button("Predict Metadata Risk", variant="primary")
+                    with gr.Column(scale=6, elem_classes=["input-card"]):
+                        new_features = gr.Textbox("Cotton Polyester Blend, Slim Fit, Graphic Print, Machine Wash", label="New product features")
+                        new_categories = gr.Textbox("Clothing > Women > Tops > T-Shirts", label="New product categories")
+                    with gr.Column(scale=4, elem_classes=["input-card"]):
+                        new_price = gr.Number(29.99, label="Price")
+                        new_rating = gr.Number(4.1, label="Expected or early average rating")
+                        new_count = gr.Number(35, label="Expected or early rating count")
+                        new_focus = gr.Dropdown(["All"] + ASPECTS, value="All", label="Focus aspect")
+                        screen_btn = gr.Button("Predict Metadata Risk", variant="primary")
                 risk_summary = gr.HTML()
                 risk_table = gr.Dataframe(headers=["Aspect", "Risk Level", "Model Signal", "Confidence", "Reason"], value=[["Click Predict Metadata Risk", "", "", 0.0, ""]], datatype=["str", "str", "str", "number", "str"], interactive=False)
-                gr.Markdown("### External Review Prediction")
-                external_review = gr.Textbox("The fabric is soft and the color looks good, but it runs small and the zipper feels weak.", label="External customer review", lines=4)
+                gr.HTML('<div class="app-section"><div><h2>External Review Prediction</h2><p>Paste any review and metadata to get overall and aspect-level predictions.</p></div></div>')
                 with gr.Row():
-                    ext_features = gr.Textbox("Cotton Blend, Slim Fit, Zipper Closure", label="Product features")
-                    ext_categories = gr.Textbox("Clothing > Women > Jackets", label="Product categories")
-                with gr.Row():
-                    ext_price = gr.Number(39.99, label="Price")
-                    ext_rating = gr.Number(4.2, label="Average rating")
-                    ext_count = gr.Number(312, label="Rating count")
-                    ext_aspect = gr.Dropdown(["All"] + ASPECTS, value="All", label="Highlight aspect")
-                external_btn = gr.Button("Analyze External Review", variant="primary")
-                ext_overall = gr.HTML()
-                ext_aspects = gr.HTML()
-                ext_table = gr.Dataframe(headers=["Aspect", "Prediction", "Confidence", "Key review evidence"], value=[["Click Analyze External Review", "", 0.0, ""]], datatype=["str", "str", "number", "str"], interactive=False)
+                    with gr.Column(scale=4, elem_classes=["input-card"]):
+                        external_review = gr.Textbox("The fabric is soft and the color looks good, but it runs small and the zipper feels weak.", label="External customer review", lines=5)
+                        ext_features = gr.Textbox("Cotton Blend, Slim Fit, Zipper Closure", label="Product features")
+                        ext_categories = gr.Textbox("Clothing > Women > Jackets", label="Product categories")
+                        with gr.Row():
+                            ext_price = gr.Number(39.99, label="Price")
+                            ext_rating = gr.Number(4.2, label="Average rating")
+                            ext_count = gr.Number(312, label="Rating count")
+                        ext_aspect = gr.Dropdown(["All"] + ASPECTS, value="All", label="Highlight aspect")
+                        external_btn = gr.Button("Analyze External Review", variant="primary")
+                    with gr.Column(scale=6):
+                        ext_overall = gr.HTML()
+                        ext_aspects = gr.HTML()
+                with gr.Accordion("External review raw table", open=False):
+                    ext_table = gr.Dataframe(headers=["Aspect", "Prediction", "Confidence", "Key review evidence"], value=[["Click Analyze External Review", "", 0.0, ""]], datatype=["str", "str", "number", "str"], interactive=False)
                 refresh_scores.click(merchant_product_scores, merchant_metric, merchant_scores)
                 merchant_metric.change(merchant_product_scores, merchant_metric, merchant_scores)
                 screen_btn.click(screen_new_product, [new_features, new_categories, new_price, new_rating, new_count, new_focus], [risk_summary, risk_table])
                 external_btn.click(external_review_predict, [external_review, ext_features, ext_categories, ext_price, ext_rating, ext_count, ext_aspect], [ext_overall, ext_aspects, ext_table])
 
             with gr.Tab("Research Metrics"):
-                gr.Markdown("Metrics are loaded from the bundled 10W0715 experiment reports.")
+                gr.HTML('<div class="app-section"><div><h2>Experiment Dashboard</h2><p>Metrics are loaded from the bundled 10W0715 reports on the same held-out test split.</p></div><span class="app-badge">Research view</span></div>')
                 research_cards = gr.HTML(research_cards_html())
-                gr.Markdown("### 1. Overall Sentiment Metrics")
-                overall_table = gr.Dataframe(headers=["Model", "Macro-F1", "Accuracy"], value=overall_metric_rows(), interactive=False)
-                gr.Markdown("### 2. Aspect-Level Overall Comparison")
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        gr.Markdown("### Overall Sentiment Metrics")
+                        overall_table = gr.Dataframe(headers=["Model", "Macro-F1", "Accuracy"], value=overall_metric_rows(), interactive=False)
+                    with gr.Column(scale=1):
+                        gr.Markdown("### Ablation Comparison")
+                        ablation_table = gr.Dataframe(headers=["Variant", "Mean Macro-F1", "Mean Accuracy"], value=ablation_rows(), interactive=False)
+                gr.Markdown("### Six-Aspect Comparison")
                 aspect_table = gr.Dataframe(headers=["Aspect", "No-meta F1", "Proposed F1", "F1 Delta", "No-meta Acc", "Proposed Acc", "Acc Delta"], value=aspect_metric_rows(), interactive=False)
-                gr.Markdown("### 3. Ablation Comparison")
-                ablation_table = gr.Dataframe(headers=["Variant", "Mean Macro-F1", "Mean Accuracy"], value=ablation_rows(), interactive=False)
                 refresh_research = gr.Button("Refresh Research Metrics", variant="primary")
                 refresh_research.click(lambda: (research_cards_html(), overall_metric_rows(), aspect_metric_rows(), ablation_rows()), outputs=[research_cards, overall_table, aspect_table, ablation_table])
         demo.load(consumer_product_view, [product_select, consumer_aspect], [product_detail, aspect_html, evidence_html, consumer_table])
@@ -502,9 +552,9 @@ def build_app() -> gr.Blocks:
         demo.load(filter_products, [filter_aspect, filter_sentiment, filter_category, filter_tags, min_rating], [filter_table, filter_summary])
     return demo
 
-
 demo = build_app()
 
 if __name__ == "__main__":
     demo.launch()
 
+