Update src/streamlit_app.py

src/streamlit_app.py

@@ -5,11 +5,7 @@ import numpy as np
 from transformers import AutoTokenizer, AutoModelForSequenceClassification
 from normalizer import normalize
 
-st.set_page_config(page_title="Political Sentiment", page_icon="
-
-![BangladeshFlagGifGIF](https://cdn-uploads.huggingface.co/production/uploads/68f7211464f27c4b507fff44/EJ1PKsOdbqmUx4FbiUzXm.gif)
-
-", layout="wide")
+st.set_page_config(page_title="Political Sentiment", page_icon="🇧🇩", layout="wide")
 
 st.markdown("""
 <style>
@@ -17,53 +13,68 @@ st.markdown("""
     
     html, body, [class*="css"] {
         font-family: 'Inter', sans-serif;
+        color: #000000;
     }
     
     .stApp {
-        background-color: #f0f2f6;
+        background-color: #f4f6f9;
+    }
+    
+    h1, h2, h3 {
+        color: #111827 !important;
     }
     
     .main-card {
         background-color: white;
         padding: 30px;
         border-radius: 15px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
         margin-bottom: 25px;
         text-align: center;
+        border: 1px solid #e5e7eb;
     }
     
     .result-title {
-        color: #6c757d;
-        font-size: 14px;
+        color: #374151;
+        font-size: 16px;
         text-transform: uppercase;
-        letter-spacing: 1px;
+        letter-spacing: 1.5px;
         margin-bottom: 10px;
-        font-weight: 600;
+        font-weight: 700;
     }
     
     .result-value {
-        font-size: 42px;
+        font-size: 48px;
         font-weight: 800;
         margin: 0;
     }
     
+    .section-header {
+        font-size: 20px;
+        font-weight: 700;
+        color: #1f2937;
+        margin-bottom: 20px;
+        border-left: 5px solid #2563eb;
+        padding-left: 10px;
+    }
+    
     .model-card {
         background-color: white;
         padding: 20px;
         border-radius: 12px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
         margin-bottom: 15px;
-        transition: transform 0.2s;
-        border: 1px solid #eee;
+        border: 1px solid #e5e7eb;
+        transition: all 0.2s ease;
     }
     
     .model-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
     }
     
     .model-name {
-        color: #1f2937;
+        color: #4b5563;
         font-size: 14px;
         font-weight: 600;
         margin-bottom: 8px;
@@ -71,36 +82,37 @@ st.markdown("""
         padding-bottom: 5px;
     }
     
+    .prob-row {
+        margin-bottom: 15px;
+    }
+    
     .prob-label {
-        font-size: 13px;
-        color: #4b5563;
-        margin-bottom: 4px;
+        font-size: 14px;
+        color: #111827;
+        font-weight: 600;
+        margin-bottom: 5px;
         display: flex;
         justify-content: space-between;
     }
     
     .prob-bar-bg {
         width: 100%;
-        height: 8px;
+        height: 10px;
         background-color: #e5e7eb;
-        border-radius: 4px;
+        border-radius: 5px;
         overflow: hidden;
     }
     
     .prob-bar-fill {
         height: 100%;
-        border-radius: 4px;
-        transition: width 0.5s ease;
+        border-radius: 5px;
     }
     
     .stTextArea textarea {
         border-radius: 12px !important;
-        border: 1px solid #d1d5db !important;
+        border: 2px solid #d1d5db !important;
         padding: 15px !important;
-    }
-    
-    div[data-testid="stMetricValue"] {
-        font-size: 20px !important;
+        font-size: 16px;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -149,7 +161,7 @@ def get_detailed_prediction(text):
     final_vote = max(set(votes), key=votes.count)
     return final_vote, votes, avg_probs
 
-st.markdown("<h1 style='text-align: center; color: #111827; margin-bottom: 30px;'>🇧🇩 BD Political Sentiment Analysis</h1>", unsafe_allow_html=True)
+st.markdown("<h1 style='text-align: center; margin-bottom: 10px;'>🇧🇩 BD Political Sentiment Analysis</h1>", unsafe_allow_html=True)
 
 with st.container():
     col_input, col_action = st.columns([4, 1])
@@ -163,29 +175,38 @@ if analyze_btn and user_input.strip():
     with st.spinner('Running Ensemble Analysis...'):
         final_res, all_votes, avg_probs = get_detailed_prediction(user_input)
         
-        st.markdown("<div style='height: 20px'></div>", unsafe_allow_html=True)
+        st.markdown("<div style='height: 30px'></div>", unsafe_allow_html=True)
         
         main_col, details_col = st.columns([1, 1.5], gap="large")
         
         with main_col:
             st.markdown(f"""
-            <div class="main-card" style="border-top: 5px solid {label_colors[final_res]}">
+            <div class="main-card" style="border-top: 6px solid {label_colors[final_res]}">
                 <div class="result-title">Ensemble Consensus</div>
                 <div class="result-value" style="color: {label_colors[final_res]}">{final_res}</div>
             </div>
             """, unsafe_allow_html=True)
             
-            st.markdown("### Probability Distribution")
+            st.markdown('<div class="section-header">Probability Distribution</div>', unsafe_allow_html=True)
+            
             for i in range(5):
                 label = id2label[i]
-                prob = avg_probs[i] * 100
+                raw_prob = avg_probs[i] * 100
+                
+                # Visual cleanup: Force 0% if extremely low to reduce noise
+                if raw_prob < 1.0:
+                    prob = 0.0
+                else:
+                    prob = raw_prob
+                
                 color = label_colors[label]
-                opacity = "1.0" if prob > 5 else "0.3"
+                # High opacity for significant numbers, low for 0-1%
+                opacity = "1.0" if prob > 1 else "0.3"
                 
                 st.markdown(f"""
-                <div style="margin-bottom: 12px; opacity: {opacity}">
+                <div class="prob-row" style="opacity: {opacity}">
                     <div class="prob-label">
-                        <span style="font-weight: 600;">{label}</span>
+                        <span>{label}</span>
                         <span>{prob:.1f}%</span>
                     </div>
                     <div class="prob-bar-bg">
@@ -195,7 +216,7 @@ if analyze_btn and user_input.strip():
                 """, unsafe_allow_html=True)
 
         with details_col:
-            st.markdown("### Individual Model Predictions")
+            st.markdown('<div class="section-header">Individual Model Predictions</div>', unsafe_allow_html=True)
             m_names = list(models_dict.keys())
             
             row1 = st.columns(2)
@@ -210,7 +231,7 @@ if analyze_btn and user_input.strip():
                     st.markdown(f"""
                     <div class="model-card">
                         <div class="model-name">{model_name}</div>
-                        <div style="color: {color}; font-weight: 700; font-size: 18px;">{vote}</div>
+                        <div style="color: {color}; font-weight: 700; font-size: 20px;">{vote}</div>
                     </div>
                     """, unsafe_allow_html=True)