Update src/app.py (#16)

- Update src/app.py (0bdecbdedf37f3eac4baae41d6bfcbb18c81068b)


Co-authored-by: Muhammad Khaqan Nasir <[email protected]>

src/app.py

@@ -35,577 +35,206 @@ from src.models.hybrid_model import HybridFakeNewsDetector
 from src.config.config import *
 from src.data.preprocessor import TextPreprocessor
 
-# Custom CSS for modern, enhanced styling
+# Custom CSS for clean, modern styling
 st.markdown("""
 <style>
     /* Import Google Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&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&display=swap');
+
     /* Global Styles */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
-    
-    .main {
-        padding: 0 !important;
-        max-width: 100% !important;
-    }
-    
+
     .stApp {
-        font-family: 'Inter', 'Poppins', sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B73FF 100%);
+        font-family: 'Inter', sans-serif;
+        background: #f8fafc;
         min-height: 100vh;
         color: #2d3748;
     }
-    
+
     /* Hide Streamlit elements */
     #MainMenu {visibility: hidden;}
     footer {visibility: hidden;}
     .stDeployButton {display: none;}
     header {visibility: hidden;}
     .stApp > header {visibility: hidden;}
-    
-    /* Header Navigation */
-    .header-nav {
-        background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(20px);
-        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-        padding: 1rem 2rem;
+
+    /* Container */
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 2rem;
+    }
+
+    /* Header */
+    .header {
+        background: #ffffff;
+        padding: 1.5rem 2rem;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         position: sticky;
         top: 0;
         z-index: 1000;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
     }
-    
-    .nav-brand {
-        font-family: 'Poppins', sans-serif;
+
+    .header-title {
         font-size: 1.8rem;
-        font-weight: 800;
-        background: linear-gradient(135deg, #667eea, #764ba2);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
+        font-weight: 700;
+        color: #1a202c;
     }
-    
+
     /* Hero Section */
-    .hero-container {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #6B73FF 100%);
-        padding: 6rem 2rem;
-        text-align: center;
-        color: white;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .hero-container::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 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23fff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23fff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
-        pointer-events: none;
-    }
-    
-    .hero-content {
-        position: relative;
-        z-index: 2;
-        max-width: 800px;
-        margin: 0 auto;
-    }
-    
-    .hero-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: rgba(255, 255, 255, 0.2);
-        padding: 0.5rem 1.5rem;
-        border-radius: 50px;
-        font-size: 0.9rem;
-        font-weight: 500;
-        margin-bottom: 2rem;
-        backdrop-filter: blur(10px);
-        border: 1px solid rgba(255, 255, 255, 0.3);
-    }
-    
-    .hero-title {
-        font-family: 'Poppins', sans-serif;
-        font-size: 4.5rem;
-        font-weight: 900;
-        margin-bottom: 1.5rem;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-        background: linear-gradient(45deg, #fff, #e0e7ff, #fff);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        line-height: 1.1;
-    }
-    
-    .hero-subtitle {
-        font-size: 1.4rem;
-        font-weight: 400;
+    .hero {
+        display: flex;
+        gap: 2rem;
         margin-bottom: 3rem;
-        opacity: 0.95;
-        line-height: 1.7;
-        max-width: 700px;
-        margin-left: auto;
-        margin-right: auto;
     }
-    
-    .hero-stats {
+
+    .hero-left {
+        flex: 1;
+        padding: 2rem;
+    }
+
+    .hero-right {
+        flex: 1;
         display: flex;
+        align-items: center;
         justify-content: center;
-        gap: 3rem;
-        margin-top: 2rem;
     }
-    
-    .stat-item {
-        text-align: center;
+
+    .hero-right img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
-    
-    .stat-number {
+
+    .hero-title {
         font-size: 2.5rem;
         font-weight: 700;
-        display: block;
-    }
-    
-    .stat-label {
-        font-size: 0.9rem;
-        opacity: 0.8;
-    }
-    
-    /* Features Section */
-    .features-section {
-        padding: 5rem 2rem;
-        background: #f8fafc;
-        position: relative;
-    }
-    
-    .section-header {
-        text-align: center;
-        margin-bottom: 4rem;
-    }
-    
-    .section-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: linear-gradient(135deg, #667eea, #764ba2);
-        color: white;
-        padding: 0.5rem 1.5rem;
-        border-radius: 50px;
-        font-size: 0.85rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-    
-    .section-title {
-        font-family: 'Poppins', sans-serif;
-        font-size: 3rem;
-        font-weight: 700;
         color: #1a202c;
         margin-bottom: 1rem;
-        line-height: 1.2;
     }
-    
-    .section-description {
-        font-size: 1.2rem;
+
+    .hero-text {
+        font-size: 1.1rem;
         color: #4a5568;
-        max-width: 600px;
-        margin: 0 auto;
         line-height: 1.6;
     }
-    
-    .features-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-        gap: 2rem;
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-    
-    .feature-card {
-        background: white;
-        padding: 2.5rem;
-        border-radius: 20px;
+
+    /* About Section */
+    .about-section {
+        margin-bottom: 3rem;
         text-align: center;
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        border: 1px solid #e2e8f0;
-        position: relative;
-        overflow: hidden;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-    }
-    
-    .feature-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(135deg, #667eea, #764ba2);
-    }
-    
-    .feature-card:hover {
-        transform: translateY(-12px);
-        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
-        border-color: #667eea;
-    }
-    
-    .feature-icon {
-        font-size: 3.5rem;
-        margin-bottom: 1.5rem;
-        display: block;
-        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
     }
-    
-    .feature-title {
-        font-family: 'Poppins', sans-serif;
-        font-size: 1.4rem;
+
+    .about-title {
+        font-size: 2rem;
         font-weight: 600;
         color: #1a202c;
         margin-bottom: 1rem;
     }
-    
-    .feature-description {
+
+    .about-text {
+        font-size: 1rem;
         color: #4a5568;
         line-height: 1.6;
-        font-size: 1rem;
-    }
-    
-    /* Main Content Section */
-    .main-content {
-        background: white;
-        margin: 3rem 2rem;
-        padding: 4rem;
-        border-radius: 24px;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .main-content::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 6px;
-        background: linear-gradient(135deg, #667eea, #764ba2, #6B73FF);
+        max-width: 800px;
+        margin: 0 auto;
     }
-    
-    /* Input Section Styling */
+
+    /* Input Section */
     .input-container {
         max-width: 800px;
         margin: 0 auto;
     }
-    
+
     .stTextArea > div > div > textarea {
-        border-radius: 16px !important;
-        border: 2px solid #e2e8f0 !important;
-        padding: 1.5rem !important;
-        font-size: 1.1rem !important;
+        border-radius: 12px !important;
+        border: 1px solid #e2e8f0 !important;
+        padding: 1rem !important;
+        font-size: 1rem !important;
         font-family: 'Inter', sans-serif !important;
-        transition: all 0.3s ease !important;
-        background: #fafafa !important;
-        resize: vertical !important;
-        min-height: 200px !important;
+        background: #ffffff !important;
+        min-height: 150px !important;
     }
-    
+
     .stTextArea > div > div > textarea:focus {
         border-color: #667eea !important;
-        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
-        background: white !important;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
         outline: none !important;
     }
-    
-    .stTextArea > div > div > textarea::placeholder {
-        color: #a0aec0 !important;
-        font-style: italic !important;
-    }
-    
-    /* Enhanced Button Styling */
+
     .stButton > button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+        background: #667eea !important;
         color: white !important;
-        border: none !important;
-        border-radius: 16px !important;
-        padding: 1rem 3rem !important;
-        font-size: 1.2rem !important;
-        font-weight: 600 !important;
-        font-family: 'Poppins', sans-serif !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+        border-radius: 8px !important;
+        padding: 0.75rem 2rem !important;
+        font-size: 1rem !important;
+        font-weight: 500 !important;
+        font-family: 'Inter', sans-serif !important;
+        transition: all 0.3s ease !important;
         width: 100% !important;
-        position: relative !important;
-        overflow: hidden !important;
     }
-    
+
     .stButton > button:hover {
-        transform: translateY(-3px) !important;
-        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6) !important;
-        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
-    }
-    
-    .stButton > button:active {
-        transform: translateY(-1px) !important;
+        background: #5a6fd8 !important;
+        transform: translateY(-2px) !important;
     }
-    
+
     /* Results Section */
     .results-container {
-        margin-top: 3rem;
-        padding: 2rem;
-        background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
-        border-radius: 20px;
-        border: 1px solid #e2e8f0;
+        margin-top: 2rem;
+        padding: 1.5rem;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     }
-    
+
     .result-card {
-        background: white;
-        padding: 2.5rem;
-        border-radius: 20px;
-        margin: 1.5rem 0;
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
-        border-left: 6px solid transparent;
-        transition: all 0.3s ease;
-    }
-    
-    .result-card:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
+        padding: 1.5rem;
+        border-radius: 12px;
+        border-left: 4px solid transparent;
     }
-    
-    .prediction-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.75rem;
-        padding: 1rem 2rem;
-        border-radius: 50px;
-        font-weight: 700;
-        font-size: 1.1rem;
-        margin-bottom: 1rem;
-    }
-    
+
     .fake-news {
-        background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
-        color: #c53030;
-        border-left-color: #e53e3e;
+        background: #fef2f2;
+        border-left-color: #ef4444;
     }
-    
+
     .real-news {
-        background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
-        color: #2f855a;
+        background: #f0fff4;
         border-left-color: #38a169;
     }
-    
-    .confidence-score {
-        font-size: 1.4rem;
-        font-weight: 700;
-        margin-left: auto;
-    }
-    
-    /* Analysis Cards */
-    .analysis-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-        gap: 2rem;
-        margin: 2rem 0;
-    }
-    
-    .analysis-card {
-        background: white;
-        padding: 2rem;
-        border-radius: 16px;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-        border-top: 4px solid #667eea;
-    }
-    
-    .analysis-title {
-        font-family: 'Poppins', sans-serif;
-        font-size: 1.3rem;
+
+    .prediction-badge {
         font-weight: 600;
-        color: #1a202c;
+        font-size: 1rem;
         margin-bottom: 1rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    
-    .analysis-content {
-        color: #4a5568;
-        line-height: 1.6;
     }
-    
-    .analysis-list {
-        list-style: none;
-        padding: 0;
-    }
-    
-    .analysis-list li {
-        padding: 0.5rem 0;
-        padding-left: 1.5rem;
-        position: relative;
-        border-bottom: 1px solid #f1f5f9;
-    }
-    
-    .analysis-list li:before {
-        content: '✓';
-        position: absolute;
-        left: 0;
-        color: #667eea;
-        font-weight: bold;
-    }
-    
-    .analysis-list li:last-child {
-        border-bottom: none;
+
+    .confidence-score {
+        font-weight: 600;
+        margin-left: auto;
     }
-    
+
     /* Chart Containers */
     .chart-container {
-        background: white;
-        padding: 2rem;
-        border-radius: 16px;
+        padding: 1.5rem;
+        border-radius: 12px;
+        background: #ffffff;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
         margin: 1rem 0;
-        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-        border: 1px solid #f1f5f9;
     }
-    
+
     /* Footer */
     .footer {
-        background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
-        color: white;
-        padding: 4rem 2rem 2rem;
+        margin-top: 3rem;
+        padding: 1rem;
         text-align: center;
-        margin-top: 5rem;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .footer::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 6px;
-        background: linear-gradient(135deg, #667eea, #764ba2, #6B73FF);
-    }
-    
-    .footer-content {
-        max-width: 1200px;
-        margin: 0 auto;
-        position: relative;
-        z-index: 2;
-    }
-    
-    .footer-title {
-        font-family: 'Poppins', sans-serif;
-        font-size: 2rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-        background: linear-gradient(135deg, #667eea, #764ba2);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-    }
-    
-    .footer-text {
-        color: #cbd5e0;
-        margin-bottom: 2rem;
-        line-height: 1.7;
-        font-size: 1.1rem;
-    }
-    
-    .footer-links {
-        display: flex;
-        justify-content: center;
-        gap: 3rem;
-        margin-bottom: 3rem;
-        flex-wrap: wrap;
-    }
-    
-    .footer-link {
-        color: #cbd5e0;
-        text-decoration: none;
-        transition: all 0.3s ease;
-        font-weight: 500;
-        padding: 0.5rem 1rem;
-        border-radius: 8px;
-    }
-    
-    .footer-link:hover {
-        color: white;
-        background: rgba(102, 126, 234, 0.2);
-        transform: translateY(-2px);
-    }
-    
-    .footer-bottom {
-        border-top: 1px solid #4a5568;
-        padding-top: 2rem;
-        color: #a0aec0;
-        font-size: 0.95rem;
-        line-height: 1.6;
-    }
-    
-    /* Loading Spinner Custom */
-    .stSpinner > div {
-        border-color: #667eea transparent #667eea transparent !important;
-    }
-    
-    /* Responsive Design */
-    @media (max-width: 768px) {
-        .hero-title {
-            font-size: 3rem;
-        }
-        
-        .hero-stats {
-            flex-direction: column;
-            gap: 1.5rem;
-        }
-        
-        .features-grid {
-            grid-template-columns: 1fr;
-        }
-        
-        .main-content {
-            margin: 2rem 1rem;
-            padding: 2rem;
-        }
-        
-        .section-title {
-            font-size: 2.2rem;
-        }
-        
-        .footer-links {
-            flex-direction: column;
-            gap: 1rem;
-        }
-        
-        .analysis-grid {
-            grid-template-columns: 1fr;
-        }
-    }
-    
-    @media (max-width: 480px) {
-        .hero-title {
-            font-size: 2.5rem;
-        }
-        
-        .section-title {
-            font-size: 2rem;
-        }
-        
-        .feature-card {
-            padding: 2rem 1.5rem;
-        }
+        border-top: 1px solid #e2e8f0;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -667,466 +296,155 @@ def predict_news(text):
     }
 
 def plot_confidence(probabilities):
-    """Plot prediction confidence with enhanced styling."""
-    colors = ['#22c55e', '#ef4444']
-    
+    """Plot prediction confidence with simplified styling."""
     fig = go.Figure(data=[
         go.Bar(
             x=list(probabilities.keys()),
             y=list(probabilities.values()),
             text=[f'{p:.1%}' for p in probabilities.values()],
             textposition='auto',
-            textfont=dict(size=16, family="Poppins", color="white"),
             marker=dict(
-                color=colors,
-                line=dict(color='rgba(255,255,255,0.3)', width=2),
-                pattern_shape="",
+                color=['#38a169', '#ef4444'],
+                line=dict(color='#ffffff', width=1),
             ),
-            hovertemplate='<b>%{x}</b><br>Confidence: %{y:.1%}<extra></extra>',
-            width=[0.6, 0.6]
         )
     ])
-    
     fig.update_layout(
-        title={
-            'text': '📊 Prediction Confidence',
-            'x': 0.5,
-            'xanchor': 'center',
-            'font': {'size': 24, 'family': 'Poppins', 'color': '#1a202c'}
-        },
-        xaxis=dict(
-            title='Classification',
-            titlefont=dict(size=16, family='Inter', color='#4a5568'),
-            tickfont=dict(size=14, family='Inter', color='#4a5568'),
-            showgrid=False,
-        ),
-        yaxis=dict(
-            title='Probability',
-            titlefont=dict(size=16, family='Inter', color='#4a5568'),
-            tickfont=dict(size=14, family='Inter', color='#4a5568'),
-            range=[0, 1],
-            tickformat='.0%',
-            showgrid=True,
-            gridcolor='rgba(0,0,0,0.05)',
-        ),
+        title={'text': 'Prediction Confidence', 'x': 0.5, 'xanchor': 'center'},
+        xaxis=dict(title='Classification'),
+        yaxis=dict(title='Probability', range=[0, 1], tickformat='.0%'),
         template='plotly_white',
-        plot_bgcolor='rgba(0,0,0,0)',
-        paper_bgcolor='rgba(0,0,0,0)',
-        font={'family': 'Inter'},
-        margin=dict(l=50, r=50, t=80, b=50),
-        height=400
+        height=300
     )
     return fig
 
 def plot_attention(text, attention_weights):
-    """Plot attention weights with enhanced styling."""
-    tokens = text.split()[:20]  # Limit to first 20 tokens for better visualization
+    """Plot attention weights with simplified styling."""
+    tokens = text.split()[:20]
     attention_weights = attention_weights[:len(tokens)]
-    
     if isinstance(attention_weights, (list, np.ndarray)):
         attention_weights = np.array(attention_weights).flatten()
-    
-    # Normalize attention weights
-    if len(attention_weights) > 0 and max(attention_weights) > 0:
-        normalized_weights = attention_weights / max(attention_weights)
-    else:
-        normalized_weights = attention_weights
-    
-    # Create gradient colors
+    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]
-    
     fig = go.Figure(data=[
         go.Bar(
             x=tokens,
             y=attention_weights,
             text=[f'{float(w):.3f}' for w in attention_weights],
             textposition='auto',
-            textfont=dict(size=12, family="Inter", color="white"),
-            marker=dict(
-                color=colors,
-                line=dict(color='rgba(102, 126, 234, 0.8)', width=1),
-            ),
-            hovertemplate='<b>%{x}</b><br>Attention: %{y:.3f}<extra></extra>',
+            marker=dict(color=colors),
         )
     ])
-    
     fig.update_layout(
-        title={
-            'text': '🎯 Attention Weights Analysis',
-            'x': 0.5,
-            'xanchor': 'center',
-            'font': {'size': 24, 'family': 'Poppins', 'color': '#1a202c'}
-        },
-        xaxis=dict(
-            title='Words/Tokens',
-            titlefont=dict(size=16, family='Inter', color='#4a5568'),
-            tickfont=dict(size=12, family='Inter', color='#4a5568'),
-            tickangle=45,
-            showgrid=False,
-        ),
-        yaxis=dict(
-            title='Attention Score',
-            titlefont=dict(size=16, family='Inter', color='#4a5568'),
-            tickfont=dict(size=14, family='Inter', color='#4a5568'),
-            showgrid=True,
-            gridcolor='rgba(0,0,0,0.05)',
-        ),
+        title={'text': 'Attention Weights', 'x': 0.5, 'xanchor': 'center'},
+        xaxis=dict(title='Words', tickangle=45),
+        yaxis=dict(title='Attention Score'),
         template='plotly_white',
-        plot_bgcolor='rgba(0,0,0,0)',
-        paper_bgcolor='rgba(0,0,0,0)',
-        font={'family': 'Inter'},
-        margin=dict(l=50, r=50, t=80, b=100),
-        height=450
+        height=400
     )
     return fig
 
 def main():
-    # Header Navigation
+    # Header
     st.markdown("""
-    <div class="header-nav">
-        <div class="nav-brand">
-            🛡️ TruthCheck
+    <div class="header">
+        <div class="container">
+            <h1 class="header-title">TruthCheck</h1>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
     # Hero Section
     st.markdown("""
-    <div class="hero-container">
-        <div class="hero-content">
-            <div class="hero-badge">
-                ⚡ Powered by Advanced AI Technology
-            </div>
-            <h1 class="hero-title">🛡️ TruthCheck</h1>
-            <h2 style="font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; opacity: 0.9;">Advanced Fake News Detector</h2>
-            <p class="hero-subtitle">
-                🔍 Leverage cutting-edge deep learning technology to instantly analyze and verify news articles. 
-                Our hybrid BERT-BiLSTM model delivers precise, trustworthy results with detailed explanations.
-            </p>
-            <div class="hero-stats">
-                <div class="stat-item">
-                    <span class="stat-number">95%+</span>
-                    <span class="stat-label">Accuracy</span>
-                </div>
-                <div class="stat-item">
-                    <span class="stat-number">&lt;3s</span>
-                    <span class="stat-label">Analysis Time</span>
-                </div>
-                <div class="stat-item">
-                    <span class="stat-number">24/7</span>
-                    <span class="stat-label">Available</span>
-                </div>
-            </div>
-        </div>
-    </div>
-    """, unsafe_allow_html=True)
-
-    # Features Section
-    st.markdown("""
-    <div class="features-section">
-        <div class="section-header">
-            <div class="section-badge">
-                🚀 Advanced Features
-            </div>
-            <h2 class="section-title">Why Choose TruthCheck?</h2>
-            <p class="section-description">
-                Our state-of-the-art AI combines multiple advanced technologies to deliver unparalleled accuracy in fake news detection
-            </p>
-        </div>
-        <div class="features-grid">
-            <div class="feature-card">
-                <span class="feature-icon">🤖</span>
-                <h3 class="feature-title">BERT Transformer</h3>
-                <p class="feature-description">
-                    Utilizes state-of-the-art BERT transformer architecture for deep contextual understanding and semantic analysis of news content with unprecedented accuracy.
+    <div class="container">
+        <div class="hero">
+            <div class="hero-left">
+                <h2 class="hero-title">Advanced 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.
                 </p>
             </div>
-            <div class="feature-card">
-                <span class="feature-icon">🧠</span>
-                <h3 class="feature-title">BiLSTM Networks</h3>
-                <p class="feature-description">
-                    Advanced bidirectional LSTM networks capture sequential patterns, temporal dependencies, and linguistic structures in news articles for comprehensive analysis.
-                </p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">👁️</span>
-                <h3 class="feature-title">Attention Mechanism</h3>
-                <p class="feature-description">
-                    Sophisticated attention layers provide transparent insights into model decision-making, highlighting key phrases and suspicious content patterns.
-                </p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">⚡</span>
-                <h3 class="feature-title">Real-time Processing</h3>
-                <p class="feature-description">
-                    Lightning-fast analysis delivers results in seconds, enabling immediate verification of news content without compromising accuracy or detail.
-                </p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">📊</span>
-                <h3 class="feature-title">Confidence Scoring</h3>
-                <p class="feature-description">
-                    Detailed confidence metrics and probability distributions provide clear insights into prediction reliability and uncertainty levels.
-                </p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">🔒</span>
-                <h3 class="feature-title">Privacy Protected</h3>
-                <p class="feature-description">
-                    Your data is processed securely with no storage or tracking. Complete privacy protection ensures your news analysis remains confidential.
-                </p>
+            <div class="hero-right">
+                <img src="/hero.png" alt="TruthCheck Illustration">
             </div>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
-    # Main Content Section
+    # About Section
     st.markdown("""
-    <div class="main-content">
-        <div class="section-header">
-            <div class="section-badge">
-                🔍 AI Analysis
-            </div>
-            <h2 class="section-title">Analyze News Article</h2>
-            <p class="section-description">
-                📝 Simply paste any news article below and our advanced AI will provide instant, detailed analysis with confidence scores, attention weights, and comprehensive insights.
+    <div class="container">
+        <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.
             </p>
         </div>
-        <div class="input-container">
+    </div>
     """, unsafe_allow_html=True)
 
     # Input Section
+    st.markdown('<div class="container"><div class="input-container">', unsafe_allow_html=True)
     news_text = st.text_area(
-        "",
-        height=250,
-        placeholder="📰 Paste your news article here for comprehensive AI analysis...\n\n💡 Tip: Longer articles (100+ words) typically provide more accurate results.\n\n🚀 Our AI will analyze linguistic patterns, factual consistency, and content structure to determine authenticity.",
-        key="news_input",
-        help="Enter the full text of a news article for analysis. The more complete the article, the more accurate the analysis will be."
+        "Paste News Article",
+        height=150,
+        placeholder="Paste your news article here for AI analysis...",
+        key="news_input"
     )
-    
-    st.markdown("</div>", unsafe_allow_html=True)
-    
-    # Enhanced Button Section
+    st.markdown('</div>', unsafe_allow_html=True)
+
+    # Analyze Button
+    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 with AI", 
-            key="analyze_button",
-            help="Click to start AI-powered analysis of the news article"
-        )
+        analyze_button = st.button("Analyze Article", key="analyze_button")
+    st.markdown('</div>', unsafe_allow_html=True)
 
     if analyze_button:
         if news_text and len(news_text.strip()) > 10:
-            with st.spinner("🤖 AI is analyzing the article... Please wait"):
+            with st.spinner("Analyzing article..."):
                 try:
                     result = predict_news(news_text)
+                    st.markdown('<div class="container"><div class="results-container">', unsafe_allow_html=True)
                     
-                    # Results Container
-                    st.markdown('<div class="results-container">', unsafe_allow_html=True)
-                    
-                    # Main Prediction Result
-                    col1, col2 = st.columns([1, 1], gap="large")
-                    
+                    # Prediction Result
+                    col1, col2 = st.columns([1, 1])
                     with col1:
-                        st.markdown("### 🎯 AI Prediction Result")
                         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>
-                                <div style="font-size: 1.1rem; color: #c53030; line-height: 1.6;">
-                                    <strong>⚠️ Warning:</strong> Our AI model has identified this content as likely misinformation based on linguistic patterns, structural analysis, and content inconsistencies.
-                                </div>
+                                <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>
                             ''', 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>
-                                <div style="font-size: 1.1rem; color: #2f855a; line-height: 1.6;">
-                                    <strong>✓ Verified:</strong> This content appears to be legitimate news based on professional writing style, factual consistency, and structural integrity.
-                                </div>
+                                <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>
                             ''', unsafe_allow_html=True)
                     
                     with col2:
-                        st.markdown("### 📈 Confidence Breakdown")
                         st.markdown('<div class="chart-container">', unsafe_allow_html=True)
                         st.plotly_chart(plot_confidence(result['probabilities']), use_container_width=True)
                         st.markdown('</div>', unsafe_allow_html=True)
                     
                     # Attention Analysis
-                    st.markdown("### 🎯 AI Attention Analysis")
-                    st.markdown("""
-                    <p style="color: #4a5568; text-align: center; margin-bottom: 2rem; font-size: 1.1rem; line-height: 1.6;">
-                        🧠 The visualization below reveals which words and phrases our AI model focused on during analysis. 
-                        <strong>Higher attention scores</strong> (darker colors) indicate words that significantly influenced the prediction.
-                    </p>
-                    """, unsafe_allow_html=True)
                     st.markdown('<div class="chart-container">', unsafe_allow_html=True)
                     st.plotly_chart(plot_attention(news_text, result['attention_weights']), use_container_width=True)
-                    st.markdown('</div>', unsafe_allow_html=True)
-                    
-                    # Detailed Analysis
-                    st.markdown("### 🔍 Comprehensive AI Analysis")
-                    
-                    if result['label'] == 'FAKE':
-                        st.markdown("""
-                        <div class="analysis-grid">
-                            <div class="analysis-card">
-                                <h4 class="analysis-title">⚠️ Misinformation Indicators</h4>
-                                <div class="analysis-content">
-                                    <ul class="analysis-list">
-                                        <li><strong>Linguistic Anomalies:</strong> Detected language patterns commonly associated with fabricated content and misinformation campaigns</li>
-                                        <li><strong>Structural Inconsistencies:</strong> Identified irregular text flow, unusual formatting, or non-standard journalistic structure</li>
-                                        <li><strong>Content Reliability:</strong> Found potential factual inconsistencies, exaggerated claims, or misleading statements</li>
-                                        <li><strong>Emotional Manipulation:</strong> High attention on emotionally charged language designed to provoke strong reactions</li>
-                                        <li><strong>Source Credibility:</strong> Writing style and presentation lack hallmarks of professional journalism</li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <div class="analysis-card">
-                                <h4 class="analysis-title">🛡️ Recommended Actions</h4>
-                                <div class="analysis-content">
-                                    <ul class="analysis-list">
-                                        <li><strong>Verify Sources:</strong> Cross-reference information with multiple reputable news outlets and official sources</li>
-                                        <li><strong>Check Facts:</strong> Use fact-checking websites like Snopes, PolitiFact, or FactCheck.org for verification</li>
-                                        <li><strong>Avoid Sharing:</strong> Do not share this content until authenticity is confirmed through reliable sources</li>
-                                        <li><strong>Report Misinformation:</strong> Consider reporting to platform moderators if shared on social media</li>
-                                        <li><strong>Stay Informed:</strong> Follow trusted news sources for accurate information on this topic</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        """, unsafe_allow_html=True)
-                    else:
-                        st.markdown("""
-                        <div class="analysis-grid">
-                            <div class="analysis-card">
-                                <h4 class="analysis-title">✅ Authenticity Indicators</h4>
-                                <div class="analysis-content">
-                                    <ul class="analysis-list">
-                                        <li><strong>Professional Language:</strong> Demonstrates standard journalistic writing style with balanced, objective reporting tone</li>
-                                        <li><strong>Structural Integrity:</strong> Follows conventional news article format with proper introduction, body, and conclusion</li>
-                                        <li><strong>Factual Consistency:</strong> Information appears coherent, logically structured, and factually consistent throughout</li>
-                                        <li><strong>Neutral Presentation:</strong> Maintains objectivity without excessive emotional language or bias indicators</li>
-                                        <li><strong>Credible Content:</strong> Contains specific details, proper context, and verifiable information patterns</li>
-                                    </ul>
-                                </div>
-                            </div>
-                            <div class="analysis-card">
-                                <h4 class="analysis-title">📋 Best Practices</h4>
-                                <div class="analysis-content">
-                                    <ul class="analysis-list">
-                                        <li><strong>Continue Verification:</strong> While likely authentic, always cross-reference important news from multiple sources</li>
-                                        <li><strong>Check Publication Date:</strong> Ensure the information is current and hasn't been superseded by newer developments</li>
-                                        <li><strong>Verify Author Credentials:</strong> Research the author's background and expertise in the subject matter</li>
-                                        <li><strong>Review Source Reputation:</strong> Confirm the publication's credibility and editorial standards</li>
-                                        <li><strong>Stay Updated:</strong> Monitor for any corrections, updates, or follow-up reporting on the topic</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        """, unsafe_allow_html=True)
-                    
-                    # Technical Details
-                    with st.expander("🔧 Technical Analysis Details", expanded=False):
-                        col1, col2, col3 = st.columns(3)
-                        
-                        with col1:
-                            st.metric(
-                                label="🎯 Prediction Confidence",
-                                value=f"{result['confidence']:.2%}",
-                                help="Overall confidence in the AI's prediction"
-                            )
-                        
-                        with col2:
-                            st.metric(
-                                label="📊 REAL Probability", 
-                                value=f"{result['probabilities']['REAL']:.2%}",
-                                help="Probability that the content is authentic news"
-                            )
-                        
-                        with col3:
-                            st.metric(
-                                label="⚠️ FAKE Probability", 
-                                value=f"{result['probabilities']['FAKE']:.2%}",
-                                help="Probability that the content is fake news"
-                            )
-                        
-                        st.markdown("---")
-                        st.markdown("""
-                        **🤖 Model Information:**
-                        - **Architecture:** Hybrid BERT + BiLSTM with Attention Mechanism
-                        - **Training Data:** Extensive dataset of verified real and fake news articles  
-                        - **Features:** Contextual embeddings, sequential patterns, attention weights
-                        - **Performance:** 95%+ accuracy on validation datasets
-                        """)
-                    
-                    st.markdown('</div>', unsafe_allow_html=True)
-                    
+                    st.markdown('</div></div></div>', unsafe_allow_html=True)
                 except Exception as e:
-                    st.error(f"""
-                    🚨 **Analysis Error Occurred**
-                    
-                    We encountered an issue while analyzing your article. This might be due to:
-                    - Technical server issues
-                    - Content formatting problems  
-                    - Model loading difficulties
-                    
-                    **Error Details:** {str(e)}
-                    
-                    Please try again in a few moments or contact support if the issue persists.
-                    """)
+                    st.error(f"Error: {str(e)}. Please try again or contact support.")
         else:
-            st.markdown('''
-            <div class="main-content">
-                <div style="background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%); color: #991b1b; padding: 2rem; border-radius: 16px; text-align: center; border-left: 6px solid #ef4444;">
-                    <h3 style="margin-bottom: 1rem;">⚠️ Input Required</h3>
-                    <p style="font-size: 1.1rem; line-height: 1.6;">
-                        Please enter a news article (at least 10 words) to perform AI analysis. 
-                        <br><strong>💡 Tip:</strong> Longer, complete articles provide more accurate results.
-                    </p>
-                </div>
-            </div>
-            ''', unsafe_allow_html=True)
-
-    st.markdown('</div>', unsafe_allow_html=True)
+            st.markdown('<div class="container">', unsafe_allow_html=True)
+            st.error("Please enter a news article (at least 10 words) for analysis.")
+            st.markdown('</div>', unsafe_allow_html=True)
 
     # Footer
     st.markdown("""
     <div class="footer">
-        <div class="footer-content">
-            <h3 class="footer-title">🛡️ TruthCheck AI</h3>
-            <p class="footer-text">
-                🌟 Empowering global communities with cutting-edge AI-driven news verification technology. 
-                Built with advanced deep learning models, natural language processing, and transparent machine learning practices 
-                to combat misinformation and promote media literacy worldwide.
-            </p>
-            <div class="footer-links">
-                <a href="#" class="footer-link">📖 About TruthCheck</a>
-                <a href="#" class="footer-link">🔬 How It Works</a>
-                <a href="#" class="footer-link">📊 Accuracy Reports</a>
-                <a href="#" class="footer-link">🔒 Privacy Policy</a>
-                <a href="#" class="footer-link">📞 Contact Support</a>
-                <a href="#" class="footer-link">🆘 Report Issues</a>
-            </div>
-            <div class="footer-bottom">
-                <p style="margin-bottom: 1rem;">
-                    &copy; 2025 TruthCheck AI. Built with ❤️ using Streamlit, BERT, PyTorch, and Advanced Machine Learning.
-                </p>
-                <p>
-                    <strong>🔍 Disclaimer:</strong> This tool provides AI-based analysis for informational purposes. 
-                    Always verify important information through multiple reliable sources and exercise critical thinking. 
-                    Our AI model achieves high accuracy but is not infallible - human judgment remains essential.
-                </p>
-            </div>
-        </div>
+        <p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2024</p>
     </div>
     """, unsafe_allow_html=True)