Update src/app.py (#18)

- Update src/app.py (d49dd8a2a1db9de373664fa2fc53aa508e51f7bb)


Co-authored-by: Muhammad Khaqan Nasir <KhaqanNasir@users.noreply.huggingface.co>

src/app.py

@@ -35,11 +35,11 @@ from src.models.hybrid_model import HybridFakeNewsDetector
 from src.config.config import *
 from src.data.preprocessor import TextPreprocessor
 
-# Custom CSS for clean, modern styling
+# Custom CSS for enhanced, modern styling
 st.markdown("""
 <style>
     /* Import Google Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 
     /* Global Styles */
     * {
@@ -50,9 +50,9 @@ st.markdown("""
 
     .stApp {
         font-family: 'Inter', sans-serif;
-        background: #f8fafc;
+        background: #ffffff;
         min-height: 100vh;
-        color: #2d3748;
+        color: #1a202c;
     }
 
     /* Hide Streamlit elements */
@@ -64,37 +64,45 @@ st.markdown("""
 
     /* Container */
     .container {
-        max-width: 1200px;
+        max-width: 1280px;
         margin: 0 auto;
-        padding: 2rem;
+        padding: 2rem 1.5rem;
     }
 
     /* Header */
     .header {
         background: #ffffff;
-        padding: 1.5rem 2rem;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        padding: 1rem 2rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
         position: sticky;
         top: 0;
         z-index: 1000;
     }
 
     .header-title {
-        font-size: 1.8rem;
-        font-weight: 700;
+        font-size: 2rem;
+        font-weight: 800;
         color: #1a202c;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
 
     /* Hero Section */
     .hero {
         display: flex;
-        gap: 2rem;
-        margin-bottom: 3rem;
+        align-items: center;
+        gap: 3rem;
+        margin-bottom: 4rem;
+        background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
+        padding: 4rem 2rem;
+        border-radius: 16px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     }
 
     .hero-left {
         flex: 1;
-        padding: 2rem;
+        padding: 1rem;
     }
 
     .hero-right {
@@ -108,95 +116,117 @@ st.markdown("""
         max-width: 100%;
         height: auto;
         border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease;
+    }
+
+    .hero-right img:hover {
+        transform: scale(1.02);
     }
 
     .hero-title {
-        font-size: 2.5rem;
-        font-weight: 700;
+        font-size: 3rem;
+        font-weight: 800;
         color: #1a202c;
-        margin-bottom: 1rem;
+        margin-bottom: 1.5rem;
+        line-height: 1.2;
     }
 
     .hero-text {
-        font-size: 1.1rem;
+        font-size: 1.2rem;
         color: #4a5568;
-        line-height: 1.6;
+        line-height: 1.7;
+        max-width: 500px;
     }
 
     /* About Section */
     .about-section {
         margin-bottom: 3rem;
         text-align: center;
+        padding: 2rem;
     }
 
     .about-title {
-        font-size: 2rem;
-        font-weight: 600;
+        font-size: 2.2rem;
+        font-weight: 700;
         color: #1a202c;
         margin-bottom: 1rem;
     }
 
     .about-text {
-        font-size: 1rem;
+        font-size: 1.1rem;
         color: #4a5568;
         line-height: 1.6;
-        max-width: 800px;
+        max-width: 700px;
         margin: 0 auto;
     }
 
     /* Input Section */
     .input-container {
-        max-width: 800px;
+        max-width: 900px;
         margin: 0 auto;
+        padding: 1.5rem;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     }
 
     .stTextArea > div > div > textarea {
-        border-radius: 12px !important;
-        border: 1px solid #e2e8f0 !important;
-        padding: 1rem !important;
+        border-radius: 10px !important;
+        border: 1px solid #d1d5db !important;
+        padding: 1.2rem !important;
         font-size: 1rem !important;
         font-family: 'Inter', sans-serif !important;
-        background: #ffffff !important;
-        min-height: 150px !important;
+        background: #f9fafb !important;
+        min-height: 180px !important;
+        transition: all 0.3s ease !important;
     }
 
     .stTextArea > div > div > textarea:focus {
-        border-color: #667eea !important;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
+        border-color: #6366f1 !important;
+        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
         outline: none !important;
     }
 
+    .stTextArea > div > div > textarea::placeholder {
+        color: #9ca3af !important;
+    }
+
+    /* Button Styling */
     .stButton > button {
-        background: #667eea !important;
+        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
         color: white !important;
-        border-radius: 8px !important;
-        padding: 0.75rem 2rem !important;
-        font-size: 1rem !important;
-        font-weight: 500 !important;
+        border-radius: 10px !important;
+        padding: 0.8rem 2.5rem !important;
+        font-size: 1.1rem !important;
+        font-weight: 600 !important;
         font-family: 'Inter', sans-serif !important;
         transition: all 0.3s ease !important;
+        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
         width: 100% !important;
+        border: none !important;
     }
 
     .stButton > button:hover {
-        background: #5a6fd8 !important;
+        background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
         transform: translateY(-2px) !important;
+        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4) !important;
     }
 
     /* Results Section */
     .results-container {
         margin-top: 2rem;
-        padding: 1.5rem;
+        padding: 2rem;
         background: #ffffff;
         border-radius: 12px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     }
 
     .result-card {
         padding: 1.5rem;
-        border-radius: 12px;
-        border-left: 4px solid transparent;
+        border-radius: 10px;
+        border-left: 5px solid transparent;
+        margin-bottom: 1rem;
     }
 
     .fake-news {
@@ -205,36 +235,41 @@ st.markdown("""
     }
 
     .real-news {
-        background: #f0fff4;
-        border-left-color: #38a169;
+        background: #ecfdf5;
+        border-left-color: #10b981;
     }
 
     .prediction-badge {
         font-weight: 600;
-        font-size: 1rem;
+        font-size: 1.1rem;
         margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
     }
 
     .confidence-score {
         font-weight: 600;
         margin-left: auto;
+        font-size: 1.1rem;
     }
 
     /* Chart Containers */
     .chart-container {
         padding: 1.5rem;
-        border-radius: 12px;
+        border-radius: 10px;
         background: #ffffff;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        margin: 1rem 0;
+        margin: 1.5rem 0;
     }
 
     /* Footer */
     .footer {
-        margin-top: 3rem;
-        padding: 1rem;
+        margin-top: 4rem;
+        padding: 1.5rem;
         text-align: center;
-        border-top: 1px solid #e2e8f0;
+        border-top: 1px solid #e5e7eb;
+        background: #f8fafc;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -304,17 +339,18 @@ def plot_confidence(probabilities):
             text=[f'{p:.1%}' for p in probabilities.values()],
             textposition='auto',
             marker=dict(
-                color=['#38a169', '#ef4444'],
+                color=['#10b981', '#ef4444'],
                 line=dict(color='#ffffff', width=1),
             ),
         )
     ])
     fig.update_layout(
-        title={'text': 'Prediction Confidence', 'x': 0.5, 'xanchor': 'center'},
-        xaxis=dict(title='Classification'),
-        yaxis=dict(title='Probability', range=[0, 1], tickformat='.0%'),
+        title={'text': 'Prediction Confidence', 'x': 0.5, 'xanchor': 'center', 'font': {'size': 20}},
+        xaxis=dict(title='Classification', titlefont={'size': 14}, tickfont={'size': 12}),
+        yaxis=dict(title='Probability', range=[0, 1], tickformat='.0%', titlefont={'size': 14}, tickfont={'size': 12}),
         template='plotly_white',
-        height=300
+        height=350,
+        margin=dict(t=80, b=80)
     )
     return fig
 
@@ -325,7 +361,7 @@ def plot_attention(text, attention_weights):
     if isinstance(attention_weights, (list, np.ndarray)):
         attention_weights = np.array(attention_weights).flatten()
     normalized_weights = attention_weights / max(attention_weights) if max(attention_weights) > 0 else attention_weights
-    colors = [f'rgba(102, 126, 234, {0.3 + 0.7 * float(w)})' for w in normalized_weights]
+    colors = [f'rgba(99, 102, 241, {0.4 + 0.6 * float(w)})' for w in normalized_weights]
     fig = go.Figure(data=[
         go.Bar(
             x=tokens,
@@ -336,11 +372,12 @@ def plot_attention(text, attention_weights):
         )
     ])
     fig.update_layout(
-        title={'text': 'Attention Weights', 'x': 0.5, 'xanchor': 'center'},
-        xaxis=dict(title='Words', tickangle=45),
-        yaxis=dict(title='Attention Score'),
-        template='plotly_white',
-        height=400
+        title={'text': 'Attention Weights', 'x': 0.5, 'xanchor': 'center', 'font': {'size': 20}},
+        xaxis=dict(title='Words', tickangle=45, titlefont={'size': 14}, tickfont={'size': 12}),
+        yaxis=dict(title='Attention Score', titlefont={'size': 14}, tickfont={'size': 12}),
+        template='plotly_white/pubs/DeepSearch/2025-07-25/4f0e5e9c-7e3f-4d87-9b50-3d7f1c7f5e6a.txt',
+        height=400,
+        margin=dict(t=80, b=100)
     )
     return fig
 
@@ -349,7 +386,7 @@ def main():
     st.markdown("""
     <div class="header">
         <div class="container">
-            <h1 class="header-title">TruthCheck</h1>
+            <h1 class="header-title">🛡️ TruthCheck</h1>
         </div>
     </div>
     """, unsafe_allow_html=True)
@@ -359,9 +396,9 @@ def main():
     <div class="container">
         <div class="hero">
             <div class="hero-left">
-                <h2 class="hero-title">Advanced Fake News Detection</h2>
+                <h2 class="hero-title">Instant Fake News Detection</h2>
                 <p class="hero-text">
-                    Use our AI-powered tool to verify news articles instantly. Powered by BERT and BiLSTM, TruthCheck provides accurate, transparent analysis of news authenticity.
+                    Discover the truth behind news articles with our cutting-edge AI. Powered by a hybrid BERT-BiLSTM model, TruthCheck delivers fast, accurate, and transparent analysis of news authenticity.
                 </p>
             </div>
             <div class="hero-right">
@@ -377,7 +414,7 @@ def main():
         <div class="about-section">
             <h2 class="about-title">About TruthCheck</h2>
             <p class="about-text">
-                TruthCheck leverages a hybrid BERT-BiLSTM model to detect fake news with high accuracy. Simply paste a news article, and our AI will analyze its authenticity, providing confidence scores and attention insights.
+                TruthCheck combines advanced BERT and BiLSTM technologies to detect fake news with over 95% accuracy. Paste any news article below to receive a detailed analysis, including confidence scores and attention insights, in seconds.
             </p>
         </div>
     </div>
@@ -386,9 +423,9 @@ def main():
     # Input Section
     st.markdown('<div class="container"><div class="input-container">', unsafe_allow_html=True)
     news_text = st.text_area(
-        "Paste News Article",
-        height=150,
-        placeholder="Paste your news article here for AI analysis...",
+        "Analyze a News Article",
+        height=180,
+        placeholder="Paste your news article here for instant AI analysis...",
         key="news_input"
     )
     st.markdown('</div>', unsafe_allow_html=True)
@@ -397,7 +434,7 @@ def main():
     st.markdown('<div class="container">', unsafe_allow_html=True)
     col1, col2, col3 = st.columns([1, 2, 1])
     with col2:
-        analyze_button = st.button("Analyze Article", key="analyze_button")
+        analyze_button = st.button("🔍 Analyze Now", key="analyze_button")
     st.markdown('</div>', unsafe_allow_html=True)
 
     if analyze_button:
@@ -408,20 +445,20 @@ def main():
                     st.markdown('<div class="container"><div class="results-container">', unsafe_allow_html=True)
                     
                     # Prediction Result
-                    col1, col2 = st.columns([1, 1])
+                    col1, col2 = st.columns([1, 1], gap="medium")
                     with col1:
                         if result['label'] == 'FAKE':
                             st.markdown(f'''
                             <div class="result-card fake-news">
-                                <div class="prediction-badge">FAKE NEWS DETECTED <span class="confidence-score">{result["confidence"]:.1%}</span></div>
-                                <p>Our AI model has identified this content as likely misinformation based on linguistic patterns and content analysis.</p>
+                                <div class="prediction-badge">🚨 Fake News Detected <span class="confidence-score">{result["confidence"]:.1%}</span></div>
+                                <p>Our AI has identified this content as likely misinformation based on linguistic patterns, structural analysis, and content inconsistencies.</p>
                             </div>
                             ''', unsafe_allow_html=True)
                         else:
                             st.markdown(f'''
                             <div class="result-card real-news">
-                                <div class="prediction-badge">AUTHENTIC NEWS <span class="confidence-score">{result["confidence"]:.1%}</span></div>
-                                <p>This content appears to be legitimate news based on professional writing style and factual consistency.</p>
+                                <div class="prediction-badge">✅ Authentic News <span class="confidence-score">{result["confidence"]:.1%}</span></div>
+                                <p>This content appears to be legitimate based on professional writing style, factual consistency, and structural integrity.</p>
                             </div>
                             ''', unsafe_allow_html=True)
                     
@@ -435,7 +472,9 @@ def main():
                     st.plotly_chart(plot_attention(news_text, result['attention_weights']), use_container_width=True)
                     st.markdown('</div></div></div>', unsafe_allow_html=True)
                 except Exception as e:
+                    st.markdown('<div class="container">', unsafe_allow_html=True)
                     st.error(f"Error: {str(e)}. Please try again or contact support.")
+                    st.markdown('</div>', unsafe_allow_html=True)
         else:
             st.markdown('<div class="container">', unsafe_allow_html=True)
             st.error("Please enter a news article (at least 10 words) for analysis.")
@@ -444,7 +483,7 @@ def main():
     # Footer
     st.markdown("""
     <div class="footer">
-        <p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2024</p>
+        <p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2025</p>
     </div>
     """, unsafe_allow_html=True)