Update app.py

app.py

@@ -160,178 +160,295 @@ st.markdown("""
     <style>
     /* Main theme colors */
     :root {
-        --primary-color: #1f77b4;
-        --secondary-color: #2c3e50;
+        --primary-color: #2c3e50;
+        --secondary-color: #3498db;
         --accent-color: #e74c3c;
+        --success-color: #2ecc71;
+        --warning-color: #f1c40f;
         --background-color: #f8f9fa;
         --text-color: #2c3e50;
         --border-color: #e0e0e0;
+        --gradient-start: #2c3e50;
+        --gradient-end: #3498db;
     }
     
     /* General styling */
     .stApp {
         background-color: var(--background-color);
         color: var(--text-color);
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
     
     /* Header styling */
     .main-header {
-        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
         color: white;
-        padding: 2rem;
-        border-radius: 10px;
+        padding: 3rem 2rem;
+        border-radius: 15px;
         margin-bottom: 2rem;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .main-header::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="rgba(255,255,255,0.05)"/></svg>');
+        opacity: 0.1;
     }
     
     .main-title {
-        font-size: 2.5rem;
-        font-weight: bold;
+        font-size: 3rem;
+        font-weight: 800;
         text-align: center;
         margin-bottom: 1rem;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+        letter-spacing: 1px;
     }
     
     .sub-title {
-        font-size: 1.2rem;
+        font-size: 1.4rem;
         text-align: center;
         opacity: 0.9;
+        font-weight: 300;
     }
     
     /* Input styling */
     .stTextArea textarea {
         border: 2px solid var(--border-color);
-        border-radius: 8px;
-        padding: 1rem;
-        font-size: 1rem;
+        border-radius: 12px;
+        padding: 1.2rem;
+        font-size: 1.1rem;
         min-height: 150px;
         background-color: white;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+    
+    .stTextArea textarea:focus {
+        border-color: var(--secondary-color);
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.1);
     }
     
     /* Button styling */
     .stButton>button {
-        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
         color: white;
         border: none;
-        border-radius: 8px;
-        padding: 0.8rem 2rem;
-        font-size: 1.1rem;
-        font-weight: bold;
+        border-radius: 12px;
+        padding: 1rem 2.5rem;
+        font-size: 1.2rem;
+        font-weight: 600;
         transition: all 0.3s ease;
+        text-transform: uppercase;
+        letter-spacing: 1px;
     }
     
     .stButton>button:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 8px 16px rgba(52, 152, 219, 0.2);
     }
     
     /* Result box styling */
     .result-box {
         background-color: white;
-        border-radius: 12px;
-        padding: 2rem;
-        margin: 1rem 0;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border-radius: 15px;
+        padding: 2.5rem;
+        margin: 1.5rem 0;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        border: 1px solid rgba(0, 0, 0, 0.05);
+    }
+    
+    .result-box:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
     }
     
     .verdict {
-        font-size: 1.8rem;
-        font-weight: bold;
-        padding: 1rem;
-        border-radius: 8px;
-        margin: 1rem 0;
+        font-size: 2rem;
+        font-weight: 800;
+        padding: 1.5rem;
+        border-radius: 12px;
+        margin: 1.5rem 0;
         text-align: center;
+        transition: all 0.3s ease;
     }
     
     .verdict-supported {
-        background-color: #d4edda;
-        color: #155724;
+        background: linear-gradient(135deg, #2ecc71, #27ae60);
+        color: white;
+        box-shadow: 0 4px 8px rgba(46, 204, 113, 0.2);
     }
     
     .verdict-refuted {
-        background-color: #f8d7da;
-        color: #721c24;
+        background: linear-gradient(135deg, #e74c3c, #c0392b);
+        color: white;
+        box-shadow: 0 4px 8px rgba(231, 76, 60, 0.2);
     }
     
     .verdict-nei {
-        background-color: #fff3cd;
-        color: #856404;
+        background: linear-gradient(135deg, #f1c40f, #f39c12);
+        color: white;
+        box-shadow: 0 4px 8px rgba(241, 196, 15, 0.2);
     }
     
     /* Sidebar styling */
     .css-1d391kg {
         background-color: white;
-        padding: 2rem;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        padding: 2.5rem;
+        border-radius: 15px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
     }
     
     /* Stats box styling */
     .stats-box {
-        background-color: white;
-        border-radius: 8px;
-        padding: 1rem;
-        margin: 0.5rem 0;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin: 1rem 0;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
     }
     
     /* Code block styling */
     .code-block {
-        background-color: #f8f9fa;
-        border: 1px solid var(--border-color);
-        border-radius: 8px;
-        padding: 1rem;
-        font-family: monospace;
-        margin: 1rem 0;
+        background-color: #2c3e50;
+        border-radius: 12px;
+        padding: 1.5rem;
+        font-family: 'Fira Code', monospace;
+        margin: 1.5rem 0;
+        color: #ecf0f1;
+        overflow-x: auto;
     }
     
     /* Tab styling */
     .stTabs [data-baseweb="tab-list"] {
         gap: 2rem;
+        background-color: transparent;
     }
     
     .stTabs [data-baseweb="tab"] {
         background-color: white;
-        border-radius: 8px;
-        padding: 0.5rem 1rem;
+        border-radius: 12px;
+        padding: 0.8rem 1.5rem;
         margin: 0 0.5rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     }
     
     .stTabs [aria-selected="true"] {
-        background-color: var(--primary-color);
+        background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
         color: white;
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.2);
     }
     
     /* Analysis box styling */
     .analysis-box {
         background-color: white;
-        border-radius: 12px;
-        padding: 1.5rem;
-        margin: 1rem 0;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        border-radius: 15px;
+        padding: 2rem;
+        margin: 1.5rem 0;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        border-left: 4px solid var(--secondary-color);
     }
     
     /* Search box styling */
     .search-box {
         background-color: white;
-        border-radius: 8px;
-        padding: 1rem;
-        margin-bottom: 1rem;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        border-radius: 12px;
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
     }
     
     /* Comparison box styling */
     .comparison-box {
         background-color: white;
+        border-radius: 15px;
+        padding: 2rem;
+        margin: 1.5rem 0;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        border-left: 4px solid var(--secondary-color);
+    }
+    
+    /* Selectbox styling */
+    .stSelectbox select {
+        border-radius: 8px;
+        padding: 0.8rem;
+        font-size: 1rem;
+        border: 2px solid var(--border-color);
+        background-color: white;
+        transition: all 0.3s ease;
+    }
+    
+    .stSelectbox select:focus {
+        border-color: var(--secondary-color);
+        box-shadow: 0 4px 8px rgba(52, 152, 219, 0.1);
+    }
+    
+    /* Slider styling */
+    .stSlider > div > div {
+        background-color: var(--secondary-color);
+    }
+    
+    /* Checkbox styling */
+    .stCheckbox > label {
+        font-weight: 500;
+    }
+    
+    /* Info box styling */
+    .info-box {
+        background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+        border-radius: 15px;
+        padding: 2rem;
+        margin: 1.5rem 0;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Chart container styling */
+    .js-plotly-plot {
+        border-radius: 12px !important;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05) !important;
+    }
+    
+    /* Dataframe styling */
+    .dataframe {
         border-radius: 12px;
-        padding: 1.5rem;
-        margin: 1rem 0;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        border-left: 4px solid var(--primary-color);
+        overflow: hidden;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+    }
+    
+    .dataframe thead th {
+        background-color: var(--primary-color);
+        color: white;
+    }
+    
+    /* Download button styling */
+    .stDownloadButton > button {
+        background: linear-gradient(135deg, var(--success-color), #27ae60);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        padding: 0.8rem 2rem;
+        font-size: 1.1rem;
+        font-weight: 600;
+        transition: all 0.3s ease;
+    }
+    
+    .stDownloadButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(46, 204, 113, 0.2);
     }
     </style>
 """, unsafe_allow_html=True)
 
-# Main header
+# Main header with updated design
 st.markdown("""
     <div class="main-header">
         <div class="main-title">SemViQA</div>
@@ -339,11 +456,15 @@ st.markdown("""
     </div>
 """, unsafe_allow_html=True)
 
-# Sidebar
+# Sidebar with updated design
 with st.sidebar:
-    st.markdown("### ⚙️ Cài đặt Hệ thống")
+    st.markdown("""
+        <div class="info-box">
+            <h3>⚙️ Cài đặt Hệ thống</h3>
+        </div>
+    """, unsafe_allow_html=True)
     
-    # Model selection
+    # Model selection with updated styling
     st.markdown("#### 🧠 Chọn Mô hình")
     qatc_model_name = st.selectbox(
         "Mô hình QATC",
@@ -379,7 +500,7 @@ with st.sidebar:
         ]
     )
     
-    # Threshold settings
+    # Threshold settings with updated styling
     st.markdown("#### ⚖️ Ngưỡng Phân tích")
     tfidf_threshold = st.slider(
         "Ngưỡng TF-IDF",
@@ -393,7 +514,7 @@ with st.sidebar:
         help="Điều chỉnh độ dài tối đa của bằng chứng"
     )
     
-    # Display settings
+    # Display settings with updated styling
     st.markdown("#### 👁️ Hiển thị")
     show_details = st.checkbox(
         "Hiển thị Chi tiết Xác suất",
@@ -401,7 +522,7 @@ with st.sidebar:
         help="Hiển thị thông tin chi tiết về xác suất dự đoán"
     )
     
-    # Performance settings
+    # Performance settings with updated styling
     st.markdown("#### ⚡ Hiệu suất")
     num_threads = st.slider(
         "Số luồng CPU",