Update src/app.py

src/app.py

@@ -35,7 +35,7 @@ from src.models.hybrid_model import HybridFakeNewsDetector
 from src.config.config import *
 from src.data.preprocessor import TextPreprocessor
 
-# Custom CSS for enhanced, modern styling
+# Custom CSS for streamlined styling with sidebar
 st.markdown("""
 <style>
     /* Import Google Fonts */
@@ -50,13 +50,13 @@ st.markdown("""
 
     .stApp {
         font-family: 'Inter', sans-serif;
-        background: #ffffff;
+        background: #f8fafc;
         min-height: 100vh;
         color: #1a202c;
     }
 
-    /* Hide Streamlit elements */
-    #MainMenu {visibility: hidden;}
+    /* Ensure sidebar is visible */
+    #MainMenu {visibility: visible;}
     footer {visibility: hidden;}
     .stDeployButton {display: none;}
     header {visibility: hidden;}
@@ -64,26 +64,22 @@ st.markdown("""
 
     /* Container */
     .container {
-        max-width: 1280px;
+        max-width: 1200px;
         margin: 0 auto;
-        padding: 2rem 1.5rem;
+        padding: 1rem;
     }
 
     /* Header */
     .header {
-        background: #ffffff;
-        padding: 1rem 2rem;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-        position: sticky;
-        top: 0;
-        z-index: 1000;
+        padding: 1rem 0;
+        text-align: center;
     }
 
     .header-title {
         font-size: 2rem;
         font-weight: 800;
         color: #1a202c;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         gap: 0.5rem;
     }
@@ -92,12 +88,8 @@ st.markdown("""
     .hero {
         display: flex;
         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);
+        gap: 2rem;
+        margin-bottom: 2rem;
     }
 
     .hero-left {
@@ -115,76 +107,64 @@ st.markdown("""
     .hero-right img {
         max-width: 100%;
         height: auto;
-        border-radius: 12px;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-        transition: transform 0.3s ease;
-    }
-
-    .hero-right img:hover {
-        transform: scale(1.02);
+        border-radius: 8px;
     }
 
     .hero-title {
-        font-size: 3rem;
-        font-weight: 800;
+        font-size: 2.5rem;
+        font-weight: 700;
         color: #1a202c;
-        margin-bottom: 1.5rem;
-        line-height: 1.2;
+        margin-bottom: 0.5rem;
     }
 
     .hero-text {
-        font-size: 1.2rem;
+        font-size: 1rem;
         color: #4a5568;
-        line-height: 1.7;
-        max-width: 500px;
+        line-height: 1.5;
+        max-width: 450px;
     }
 
     /* About Section */
     .about-section {
-        margin-bottom: 3rem;
+        margin-bottom: 2rem;
         text-align: center;
-        padding: 2rem;
     }
 
     .about-title {
-        font-size: 2.2rem;
-        font-weight: 700;
+        font-size: 1.8rem;
+        font-weight: 600;
         color: #1a202c;
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
     }
 
     .about-text {
-        font-size: 1.1rem;
+        font-size: 1rem;
         color: #4a5568;
-        line-height: 1.6;
-        max-width: 700px;
+        line-height: 1.5;
+        max-width: 600px;
         margin: 0 auto;
     }
 
     /* Input Section */
     .input-container {
-        max-width: 900px;
+        max-width: 800px;
         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: 10px !important;
+        border-radius: 8px !important;
         border: 1px solid #d1d5db !important;
-        padding: 1.2rem !important;
+        padding: 1rem !important;
         font-size: 1rem !important;
         font-family: 'Inter', sans-serif !important;
-        background: #f9fafb !important;
-        min-height: 180px !important;
-        transition: all 0.3s ease !important;
+        background: #ffffff !important;
+        min-height: 150px !important;
+        transition: all 0.2s ease !important;
     }
 
     .stTextArea > div > div > textarea:focus {
         border-color: #6366f1 !important;
-        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
+        box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
         outline: none !important;
     }
 
@@ -194,38 +174,34 @@ st.markdown("""
 
     /* Button Styling */
     .stButton > button {
-        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
+        background: #6366f1 !important;
         color: white !important;
-        border-radius: 10px !important;
-        padding: 0.8rem 2.5rem !important;
-        font-size: 1.1rem !important;
+        border-radius: 8px !important;
+        padding: 0.75rem 2rem !important;
+        font-size: 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;
+        transition: all 0.2s ease !important;
         border: none !important;
+        width: 100% !important;
     }
 
     .stButton > button:hover {
-        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;
+        background: #4f46e5 !important;
+        transform: translateY(-1px) !important;
     }
 
     /* Results Section */
     .results-container {
-        margin-top: 2rem;
-        padding: 2rem;
-        background: #ffffff;
-        border-radius: 12px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        margin-top: 1rem;
+        padding: 1rem;
+        border-radius: 8px;
     }
 
     .result-card {
-        padding: 1.5rem;
-        border-radius: 10px;
-        border-left: 5px solid transparent;
+        padding: 1rem;
+        border-radius: 8px;
+        border-left: 4px solid transparent;
         margin-bottom: 1rem;
     }
 
@@ -241,8 +217,8 @@ st.markdown("""
 
     .prediction-badge {
         font-weight: 600;
-        font-size: 1.1rem;
-        margin-bottom: 1rem;
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
         display: flex;
         align-items: center;
         gap: 0.5rem;
@@ -251,25 +227,32 @@ st.markdown("""
     .confidence-score {
         font-weight: 600;
         margin-left: auto;
-        font-size: 1.1rem;
+        font-size: 1rem;
     }
 
     /* Chart Containers */
     .chart-container {
-        padding: 1.5rem;
-        border-radius: 10px;
-        background: #ffffff;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-        margin: 1.5rem 0;
+        padding: 1rem;
+        border-radius: 8px;
+        margin: 1rem 0;
     }
 
     /* Footer */
     .footer {
-        margin-top: 4rem;
-        padding: 1.5rem;
+        margin-top: 2rem;
+        padding: 1rem 0;
         text-align: center;
         border-top: 1px solid #e5e7eb;
-        background: #f8fafc;
+    }
+
+    /* Sidebar Styling */
+    .stSidebar {
+        background: #ffffff;
+        border-right: 1px solid #e5e7eb;
+    }
+
+    .stSidebar .sidebar-content {
+        padding: 1rem;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -345,12 +328,12 @@ def plot_confidence(probabilities):
         )
     ])
     fig.update_layout(
-        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}),
+        title={'text': 'Prediction Confidence', 'x': 0.5, 'xanchor': 'center', 'font': {'size': 18}},
+        xaxis=dict(title='Classification', titlefont={'size': 12}, tickfont={'size': 10}),
+        yaxis=dict(title='Probability', range=[0, 1], tickformat='.0%', titlefont={'size': 12}, tickfont={'size': 10}),
         template='plotly_white',
-        height=350,
-        margin=dict(t=80, b=80)
+        height=300,
+        margin=dict(t=60, b=60)
     )
     return fig
 
@@ -372,16 +355,27 @@ def plot_attention(text, attention_weights):
         )
     ])
     fig.update_layout(
-        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)
+        title={'text': 'Attention Weights', 'x': 0.5, 'xanchor': 'center', 'font': {'size': 18}},
+        xaxis=dict(title='Words', tickangle=45, titlefont={'size': 12}, tickfont={'size': 10}),
+        yaxis=dict(title='Attention Score', titlefont={'size': 12}, tickfont={'size': 10}),
+        template='plotly_white',
+        height=350,
+        margin=dict(t=60, b=80)
     )
     return fig
 
 def main():
+    # Sidebar
+    with st.sidebar:
+        st.markdown("## TruthCheck Menu")
+        st.markdown("Navigate through the options below:")
+        st.button("Home", disabled=True)
+        st.button("Analyze News", key="nav_analyze")
+        st.button("About", key="nav_about")
+        st.markdown("---")
+        st.markdown("**Contact**")
+        st.markdown("📧 [email protected]")
+
     # Header
     st.markdown("""
     <div class="header">
@@ -398,11 +392,11 @@ def main():
             <div class="hero-left">
                 <h2 class="hero-title">Instant Fake News Detection</h2>
                 <p class="hero-text">
-                    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.
+                    Verify news articles with our AI-powered tool, driven by BERT and BiLSTM for fast and accurate authenticity analysis.
                 </p>
             </div>
             <div class="hero-right">
-                <img src="/hero.png" alt="TruthCheck Illustration">
+                <img src="hero.png" alt="TruthCheck Illustration">
             </div>
         </div>
     </div>
@@ -414,7 +408,7 @@ def main():
         <div class="about-section">
             <h2 class="about-title">About TruthCheck</h2>
             <p class="about-text">
-                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.
+                TruthCheck uses a hybrid BERT-BiLSTM model to detect fake news with high accuracy. Paste an article below for instant analysis.
             </p>
         </div>
     </div>
@@ -424,7 +418,7 @@ def main():
     st.markdown('<div class="container"><div class="input-container">', unsafe_allow_html=True)
     news_text = st.text_area(
         "Analyze a News Article",
-        height=180,
+        height=150,
         placeholder="Paste your news article here for instant AI analysis...",
         key="news_input"
     )
@@ -451,14 +445,14 @@ def main():
                             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 has identified this content as likely misinformation based on linguistic patterns, structural analysis, and content inconsistencies.</p>
+                                <p>Our AI 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>
-                                <p>This content appears to be legitimate based on professional writing style, factual consistency, and structural integrity.</p>
+                                <p>This content appears to be legitimate based on professional writing style and factual consistency.</p>
                             </div>
                             ''', unsafe_allow_html=True)