Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 from transformers import pipeline
 import numpy as np
+import plotly.express as px
 import plotly.graph_objects as go
 
 # Load mô hình từ Hugging Face Model Hub
@@ -8,10 +9,10 @@ pipe = pipeline("text-classification", model="vanhai123/phobert-vi-comment-4clas
 
 # Map nhãn lại cho dễ đọc với emoji và màu sắc
 label_map = {
-    "LABEL_0": {"name": "Tích cực", "emoji": "😊", "color": "#10b981"},
-    "LABEL_1": {"name": "Tiêu cực", "emoji": "😞", "color": "#f59e0b"},
-    "LABEL_2": {"name": "Trung tính", "emoji": "😐", "color": "#6b7280"},
-    "LABEL_3": {"name": "Độc hại", "emoji": "😡", "color": "#ef4444"}
+    "LABEL_0": {"name": "Tích cực", "emoji": "😊", "color": "#22c55e"},
+    "LABEL_1": {"name": "Tiêu cực", "emoji": "😞", "color": "#ef4444"},
+    "LABEL_2": {"name": "Trung tính", "emoji": "😐", "color": "#64748b"},
+    "LABEL_3": {"name": "Độc hại", "emoji": "😡", "color": "#dc2626"}
 }
 
 def classify_comment(comment):
@@ -24,7 +25,7 @@ def classify_comment(comment):
         results = results[0] if results else {}
     
     # Lấy kết quả chi tiết cho tất cả các nhãn
-    all_scores = pipe(comment, top_k=None)
+    all_scores = pipe(comment, return_all_scores=True)
     if isinstance(all_scores, list):
         all_scores = all_scores[0] if all_scores else []
     
@@ -36,21 +37,20 @@ def classify_comment(comment):
         label_info = label_map[main_label]
         main_result = f"""
         <div style="
-            background: linear-gradient(135deg, {label_info['color']}15, {label_info['color']}08);
-            border: 1px solid {label_info['color']}40;
-            border-radius: 16px;
-            padding: 24px;
+            background: linear-gradient(135deg, {label_info['color']}22, {label_info['color']}11);
+            border: 2px solid {label_info['color']};
+            border-radius: 15px;
+            padding: 20px;
             text-align: center;
-            margin: 16px 0;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
+            margin: 10px 0;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         ">
-            <div style="font-size: 52px; margin-bottom: 12px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));">{label_info['emoji']}</div>
-            <div style="font-size: 26px; font-weight: 700; color: {label_info['color']}; margin-bottom: 8px; letter-spacing: -0.025em;">
+            <div style="font-size: 48px; margin-bottom: 10px;">{label_info['emoji']}</div>
+            <div style="font-size: 24px; font-weight: bold; color: {label_info['color']}; margin-bottom: 5px;">
                 {label_info['name']}
             </div>
-            <div style="font-size: 16px; color: #6b7280; font-weight: 500;">
-                Độ tin cậy: <span style="color: {label_info['color']}; font-weight: 700;">{round(main_score*100, 1)}%</span>
+            <div style="font-size: 18px; color: #666;">
+                Độ tin cậy: <strong>{round(main_score*100, 1)}%</strong>
             </div>
         </div>
         """
@@ -70,53 +70,46 @@ def classify_comment(comment):
                 scores.append(item['score'])
                 colors.append(label_map[label_key]['color'])
         
-        # Tạo biểu đồ thanh ngang với gradient
+        # Tạo biểu đồ thanh ngang
         fig = go.Figure(data=[
             go.Bar(
                 y=labels,
                 x=scores,
                 orientation='h',
-                marker=dict(
-                    color=colors,
-                    line=dict(width=0),
-                    opacity=0.8
-                ),
+                marker_color=colors,
                 text=[f"{s:.1%}" for s in scores],
                 textposition='inside',
-                textfont=dict(color='white', size=14, family='Inter'),
-                hovertemplate='<b>%{y}</b><br>Điểm số: %{x:.1%}<extra></extra>'
+                textfont=dict(color='white', size=12, family='Arial Black')
             )
         ])
         
         fig.update_layout(
             title={
-                'text': '📊 Phân phối điểm số dự đoán',
+                'text': 'Phân phối điểm số dự đoán',
                 'x': 0.5,
-                'font': {'size': 18, 'family': 'Inter', 'color': '#1f2937'}
+                'font': {'size': 16, 'family': 'Arial', 'color': '#333'}
             },
             xaxis_title="Điểm số",
-            yaxis_title="",
-            height=280,
-            margin=dict(l=20, r=20, t=60, b=40),
-            plot_bgcolor='rgba(255,255,255,0)',
-            paper_bgcolor='rgba(255,255,255,0)',
-            font=dict(family="Inter", size=13, color='#4b5563'),
+            yaxis_title="Loại bình luận",
+            height=300,
+            margin=dict(l=20, r=20, t=50, b=20),
+            plot_bgcolor='rgba(0,0,0,0)',
+            paper_bgcolor='rgba(0,0,0,0)',
+            font=dict(family="Arial", size=12),
             xaxis=dict(
                 showgrid=True,
                 gridwidth=1,
-                gridcolor='rgba(156,163,175,0.2)',
-                range=[0, 1],
-                tickformat=".0%"
+                gridcolor='rgba(128,128,128,0.2)',
+                range=[0, 1]
             ),
             yaxis=dict(
-                showgrid=False,
-                tickfont=dict(size=14)
+                showgrid=False
             )
         )
         
         # Chi tiết điểm số
-        details = "<div style='margin-top: 20px; padding: 0 4px;'>"
-        details += "<h4 style='color: #1f2937; margin-bottom: 16px; font-size: 18px; font-weight: 700; display: flex; align-items: center;'><span style='margin-right: 8px;'>📈</span> Chi tiết điểm số</h4>"
+        details = "<div style='margin-top: 15px;'>"
+        details += "<h4 style='color: #333; margin-bottom: 10px;'>📊 Chi tiết điểm số:</h4>"
         for item in sorted(all_scores, key=lambda x: x['score'], reverse=True):
             label_key = item['label']
             if label_key in label_map:
@@ -124,13 +117,13 @@ def classify_comment(comment):
                 percentage = item['score'] * 100
                 bar_width = int(item['score'] * 100)
                 details += f"""
-                <div style="margin-bottom: 16px; padding: 16px; background: #f9fafb; border-radius: 12px; border: 1px solid #e5e7eb;">
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                        <span style="font-weight: 600; color: #374151; font-size: 15px;">{info['emoji']} {info['name']}</span>
-                        <span style="font-weight: 700; color: {info['color']}; font-size: 16px;">{percentage:.1f}%</span>
+                <div style="margin-bottom: 8px;">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px;">
+                        <span style="font-weight: 500;">{info['emoji']} {info['name']}</span>
+                        <span style="font-weight: bold; color: {info['color']};">{percentage:.1f}%</span>
                     </div>
-                    <div style="background: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden;">
-                        <div style="background: linear-gradient(90deg, {info['color']}, {info['color']}cc); height: 100%; width: {bar_width}%; border-radius: 8px; transition: all 0.3s ease;"></div>
+                    <div style="background: #f0f0f0; border-radius: 10px; height: 8px; overflow: hidden;">
+                        <div style="background: {info['color']}; height: 100%; width: {bar_width}%; border-radius: 10px;"></div>
                     </div>
                 </div>
                 """
@@ -140,309 +133,128 @@ def classify_comment(comment):
     
     return main_result, None, None
 
-# Custom CSS cho giao diện tối ưu cả light và dark mode
+# Custom CSS cho giao diện
 custom_css = """
 /* Import Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 /* Global styles */
 * {
     font-family: 'Inter', sans-serif !important;
 }
 
-/* Main container */
+/* Header styling */
 .gradio-container {
-    background: var(--background, #f9fafb) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     min-height: 100vh;
 }
 
-@media (prefers-color-scheme: dark) {
-    .gradio-container {
-        --background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%) !important;
-        --text-color: #e5e7eb !important;
-        --secondary-text: #9ca3af !important;
-        --border-color: #4b5563 !important;
-        --card-bg: #1f2937 !important;
-        --card-border: #374151 !important;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .gradio-container {
-        --background: #f9fafb !important;
-        --text-color: #1f2937 !important;
-        --secondary-text: #6b7280 !important;
-        --border-color: #e5e7eb !important;
-        --card-bg: #ffffff !important;
-        --card-border: #e5e7eb !important;
-    }
-}
-
+/* Main container */
 #main_container {
-    background: var(--card-bg) !important;
-    backdrop-filter: blur(20px) !important;
-    border-radius: 24px !important;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
-    border: 1px solid var(--border-color) !important;
-    margin: 20px !important;
-    overflow: hidden !important;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    margin: 20px;
+    overflow: hidden;
 }
 
-/* Header với gradient hiện đại */
+/* Title area */
 .app-title {
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
-    color: white !important;
-    padding: 40px 30px !important;
-    text-align: center !important;
-    margin: -20px -20px 40px -20px !important;
-    position: relative !important;
-}
-
-.app-title::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') !important;
-    opacity: 0.1 !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 30px;
+    text-align: center;
+    margin: -20px -20px 30px -20px;
 }
 
 .app-title h1 {
-    font-size: 2.75rem !important;
-    font-weight: 800 !important;
-    margin-bottom: 12px !important;
-    text-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
-    letter-spacing: -0.025em !important;
-    position: relative !important;
-    z-index: 1 !important;
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
 }
 
 .app-title p {
-    font-size: 1.125rem !important;
-    opacity: 0.9 !important;
-    font-weight: 400 !important;
-    position: relative !important;
-    z-index: 1 !important;
+    font-size: 1.1rem;
+    opacity: 0.9;
+    font-weight: 300;
 }
 
-/* Input styling hiện đại */
+/* Input styling */
 .input-container textarea {
-    border: 2px solid var(--border-color) !important;
-    border-radius: 16px !important;
-    padding: 20px !important;
+    border: 2px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 15px !important;
     font-size: 16px !important;
-    line-height: 1.6 !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    transition: all 0.3s ease !important;
     resize: vertical !important;
-    background: var(--card-bg) !important;
-    font-weight: 400 !important;
-    color: var(--text-color) !important;
 }
 
 .input-container textarea:focus {
-    border-color: #6366f1 !important;
-    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
+    border-color: #667eea !important;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
     outline: none !important;
-    background: var(--card-bg) !important;
-    transform: translateY(-1px) !important;
 }
 
-/* Button styling với gradient và animation */
+/* Button styling */
 button.primary {
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     border: none !important;
-    border-radius: 14px !important;
-    padding: 16px 32px !important;
-    font-weight: 700 !important;
-    font-size: 15px !important;
-    letter-spacing: 0.025em !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35) !important;
-    position: relative !important;
-    overflow: hidden !important;
-    color: white !important;
-}
-
-button.primary::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-    transition: left 0.5s ease;
+    border-radius: 12px !important;
+    padding: 12px 30px !important;
+    font-weight: 600 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.5px !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
 }
 
 button.primary:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4) !important;
-}
-
-button.primary:hover::before {
-    left: 100%;
-}
-
-/* Section headers */
-h3 {
-    color: var(--text-color) !important;
-    font-weight: 700 !important;
-    font-size: 18px !important;
-    margin-bottom: 16px !important;
-    display: flex !important;
-    align-items: center !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
 }
 
 /* Examples styling */
 .examples-container {
-    background: var(--card-bg) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    margin-top: 24px !important;
+    background: #f8fafc;
+    border-radius: 12px;
+    padding: 20px;
+    margin-top: 20px;
 }
 
 .examples-container h3 {
-    color: var(--text-color) !important;
-    margin-bottom: 12px !important;
-    font-weight: 700 !important;
-    font-size: 16px !important;
-}
-
-.examples-container p {
-    color: var(--secondary-text) !important;
-    font-size: 14px !important;
-    margin-bottom: 16px !important;
-}
-
-/* Examples buttons */
-.examples-container button {
-    background: var(--card-bg) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 10px !important;
-    padding: 12px 16px !important;
-    margin: 4px !important;
-    font-size: 13px !important;
-    color: var(--text-color) !important;
-    transition: all 0.2s ease !important;
-    font-weight: 500 !important;
+    color: #334155;
+    margin-bottom: 15px;
+    font-weight: 600;
 }
 
-.examples-container button:hover {
-    border-color: #6366f1 !important;
-    color: #6366f1 !important;
-    background: var(--card-bg) !important;
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
-}
-
-/* Tabs styling */
-.tab-nav {
-    background: var(--card-bg) !important;
-    border-radius: 12px !important;
-    padding: 4px !important;
-    margin-bottom: 20px !important;
+/* Output styling */
+.output-container {
+    background: #ffffff;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    margin-top: 20px;
 }
 
+/* Tab styling */
 .tab-nav button {
-    border-radius: 8px !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    padding: 12px 20px !important;
-    transition: all 0.2s ease !important;
-    border: none !important;
-    background: transparent !important;
-    color: var(--secondary-text) !important;
+    border-radius: 8px 8px 0 0 !important;
+    font-weight: 500 !important;
 }
 
 .tab-nav button.selected {
-    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
     color: white !important;
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
-}
-
-/* Output containers */
-.output-container {
-    background: var(--card-bg) !important;
-    border-radius: 16px !important;
-    border: 1px solid var(--border-color) !important;
-    margin-top: 20px !important;
-    padding: 20px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
 }
 
 /* Footer */
 .footer {
-    text-align: center !important;
-    padding: 32px 20px !important;
-    color: var(--secondary-text) !important;
-    font-size: 14px !important;
-    background: var(--card-bg) !important;
-    border-top: 1px solid var(--border-color) !important;
-    margin: 40px -20px -20px -20px !important;
-    line-height: 1.6 !important;
-}
-
-.footer strong {
-    color: var(--text-color) !important;
-    font-weight: 600 !important;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .app-title h1 {
-        font-size: 2rem !important;
-    }
-    
-    .app-title p {
-        font-size: 1rem !important;
-    }
-    
-    #main_container {
-        margin: 10px !important;
-        border-radius: 20px !important;
-    }
-    
-    .input-container textarea {
-        padding: 16px !important;
-        font-size: 15px !important;
-    }
-    
-    button.primary {
-        padding: 14px 24px !important;
-        font-size: 14px !important;
-    }
-}
-
-/* Loading animation */
-@keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-}
-
-.loading {
-    animation: pulse 2s infinite;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--card-bg);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: linear-gradient(135deg, #6366f1, #8b5cf6);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    text-align: center;
+    padding: 20px;
+    color: #64748b;
+    font-size: 14px;
+    border-top: 1px solid #e2e8f0;
+    margin-top: 30px;
 }
 """
 
@@ -451,25 +263,25 @@ with gr.Blocks(css=custom_css, title="Phân loại bình luận tiếng Việt -
     # Header
     gr.HTML("""
     <div class="app-title">
-        <h1>🤖 Phân loại bình luận tiếng Việt</h1>
-        <p>Phân tích cảm xúc và độc hại trong bình luận với công nghệ PhoBERT</p>
+        <h1>🧠 Phân loại bình luận tiếng Việt</h1>
+        <p>Sử dụng mô hình PhoBERT để phân tích cảm xúc và độc hại trong bình luận mạng xã hội</p>
     </div>
     """)
     
     with gr.Row():
         with gr.Column(scale=1):
             # Input section
-            gr.HTML("<h3>✍️ Nhập bình luận để phân tích</h3>")
+            gr.HTML("<h3 style='color: #334155; font-weight: 600; margin-bottom: 15px;'>📝 Nhập bình luận cần phân tích</h3>")
             
             input_text = gr.Textbox(
                 lines=4,
-                placeholder="Nhập bình luận tiếng Việt tại đây...\n\nVí dụ: 'Sản phẩm này thật tuyệt vời, tôi rất hài lòng!'",
+                placeholder="Nhập bình luận tiếng Việt để phân tích cảm xúc và độ độc hại...\n\nVí dụ: 'Sản phẩm này thật tuyệt vời, tôi rất hài lòng!'",
                 label="",
                 elem_classes=["input-container"]
             )
             
             submit_btn = gr.Button(
-                "🔍 Phân tích ngay",
+                "🔍 Phân tích bình luận",
                 variant="primary",
                 size="lg"
             )
@@ -477,8 +289,8 @@ with gr.Blocks(css=custom_css, title="Phân loại bình luận tiếng Việt -
             # Examples section
             gr.HTML("""
             <div class="examples-container">
-                <h3>💡 Mẫu bình luận để thử nghiệm</h3>
-                <p>Chọn một ví dụ bên dưới để xem cách hoạt động:</p>
+                <h3>💡 Ví dụ mẫu:</h3>
+                <p style="color: #64748b; margin-bottom: 10px;">Nhấp vào các ví dụ bên dưới để thử nghiệm:</p>
             </div>
             """)
             
@@ -498,18 +310,18 @@ with gr.Blocks(css=custom_css, title="Phân loại bình luận tiếng Việt -
         
         with gr.Column(scale=1):
             # Output section
-            gr.HTML("<h3>📊 Kết quả phân tích</h3>")
+            gr.HTML("<h3 style='color: #334155; font-weight: 600; margin-bottom: 15px;'>📊 Kết quả phân tích</h3>")
             
             with gr.Tabs():
                 with gr.TabItem("🎯 Kết quả chính", elem_id="main_result_tab"):
                     result_output = gr.HTML(
-                        value="<div style='text-align: center; padding: 60px 20px; color: var(--secondary-text); background: var(--card-bg); border-radius: 16px; border: 2px dashed var(--border-color);'><div style='font-size: 48px; margin-bottom: 16px;'>🤔</div><div style='font-size: 18px; font-weight: 500;'>Nhập bình luận và nhấn 'Phân tích ngay' để xem kết quả</div></div>"
+                        value="<div style='text-align: center; padding: 40px; color: #64748b;'>Nhập bình luận và nhấn 'Phân tích' để xem kết quả</div>"
                     )
                 
-                with gr.TabItem("📈 Biểu đồ", elem_id="chart_tab"):
+                with gr.TabItem("📈 Biểu đồ phân phối", elem_id="chart_tab"):
                     chart_output = gr.Plot()
                 
-                with gr.TabItem("📋 Chi tiết", elem_id="details_tab"):
+                with gr.TabItem("📋 Chi tiết điểm số", elem_id="details_tab"):
                     details_output = gr.HTML()
     
     # Event handlers
@@ -529,10 +341,9 @@ with gr.Blocks(css=custom_css, title="Phân loại bình luận tiếng Việt -
     gr.HTML("""
     <div class="footer">
         <p>
-            <strong>🧠 Mô hình:</strong> PhoBERT fine-tuned cho phân loại bình luận tiếng Việt<br>
-            <strong>🏷️ Các nhãn:</strong> Tích cực • Tiêu cực • Trung tính • Độc hại<br>
-            <strong>⚡ Công nghệ:</strong> Transformers • Gradio • Plotly<br>
-            <em>Được phát triển bởi Ha Van Hai</em>
+            <strong>Mô hình:</strong> PhoBERT fine-tuned cho phân loại bình luận tiếng Việt<br>
+            <strong>Các nhãn:</strong> Tích cực • Tiêu cực • Trung tính • Độc hại<br>
+            <em>Được xây dựng bởi Ha Van Hai</em>
         </p>
     </div>
     """)