Update src/app.py

src/app.py

@@ -164,32 +164,251 @@ def plot_attention(text, attention_weights):
     return fig
 
 def main():
-    st.title("📰 Fake News Detection System")
-    st.write("""
-    This application uses a hybrid deep learning model (BERT + BiLSTM + Attention) 
-    to detect fake news articles. Enter a news article below to analyze it.
-    """)
-    
-    # Sidebar
-    st.sidebar.title("About")
-    st.sidebar.info("""
-    
-    The model combines:
-    - BERT for contextual embeddings
-    - BiLSTM for sequence modeling
-    - Attention mechanism for interpretability
-    """)
-    
-    # Main content
-    st.header("News Analysis")
-    
-    # Text input
+    # Main Container
+    st.markdown('<div class="main-container">', unsafe_allow_html=True)
+
+    # Custom CSS with Poppins font
+    st.markdown("""
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+
+        * {
+            font-family: 'Poppins', sans-serif !important;
+            box-sizing: border-box;
+        }
+
+        .stApp {
+            background: #ffffff;
+            min-height: 100vh;
+            color: #1f2a44;
+        }
+
+        #MainMenu {visibility: hidden;}
+        footer {visibility: hidden;}
+        .stDeployButton {display: none;}
+        header {visibility: hidden;}
+        .stApp > header {visibility: hidden;}
+
+        /* Main Container */
+        .main-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem 2rem;
+        }
+
+        /* Header Section */
+        .header-section {
+            text-align: center;
+            margin-bottom: 2.5rem;
+            padding: 1.5rem 0;
+        }
+
+        .header-title {
+            font-size: 2.25rem;
+            font-weight: 700;
+            color: #1f2a44;
+            margin: 0;
+        }
+
+        /* Section Styling */
+        .section {
+            margin-bottom: 2.5rem;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+            padding: 0 1rem;
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #1f2a44;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .section-text {
+            font-size: 0.95rem;
+            color: #6b7280;
+            line-height: 1.6;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        /* Sidebar */
+        .stSidebar {
+            background: #f4f7fa;
+            padding: 1rem;
+        }
+
+        /* Input Section */
+        .input-container {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .stTextArea > div > div > textarea {
+            border-radius: 8px !important;
+            border: 1px solid #d1d5db !important;
+            padding: 1rem !important;
+            font-size: 1rem !important;
+            background: #ffffff !important;
+            min-height: 200px !important;
+            transition: all 0.2s ease !important;
+        }
+
+        .stTextArea > div > div > textarea:focus {
+            border-color: #6366f1 !important;
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
+            outline: none !important;
+        }
+
+        .stTextArea > div > div > textarea::placeholder {
+            color: #9ca3af !important;
+        }
+
+        /* Button Styling */
+        .stButton > button {
+            background: #6366f1 !important;
+            color: white !important;
+            border-radius: 8px !important;
+            padding: 0.75rem 2rem !important;
+            font-size: 1rem !important;
+            font-weight: 600 !important;
+            transition: all 0.2s ease !important;
+            border: none !important;
+            width: 100% !important;
+            max-width: 300px;
+        }
+
+        .stButton > button:hover {
+            background: #4f46e5 !important;
+            transform: translateY(-1px) !important;
+        }
+
+        /* Results Section */
+        .results-container {
+            margin-top: 1rem;
+            padding: 1rem;
+            border-radius: 8px;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .result-card {
+            padding: 1rem;
+            border-radius: 8px;
+            border-left: 4px solid transparent;
+            margin-bottom: 1rem;
+        }
+
+        .fake-news {
+            background: #fef2f2;
+            border-left-color: #ef4444;
+        }
+
+        .real-news {
+            background: #ecfdf5;
+            border-left-color: #10b981;
+        }
+
+        .prediction-badge {
+            font-weight: 600;
+            font-size: 1rem;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .confidence-score {
+            font-weight: 600;
+            margin-left: auto;
+            font-size: 1rem;
+        }
+
+        /* Chart Containers */
+        .chart-container {
+            padding: 1rem;
+            border-radius: 8px;
+            margin: 1rem 0;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        /* Footer */
+        .footer {
+            border-top: 1px solid #e5e7eb;
+            padding: 1.5rem 0;
+            text-align: center;
+            max-width: 1200px;
+            margin: 2rem auto 0;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .main-container {
+                padding: 1rem;
+            }
+            .section {
+                padding: 0 0.5rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header-title {
+                font-size: 1.75rem;
+            }
+            .section-title {
+                font-size: 1.25rem;
+            }
+            .section-text {
+                font-size: 0.9rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header-title {
+                font-size: 1.5rem;
+            }
+            .section-title {
+                font-size: 1.1rem;
+            }
+            .section-text {
+                font-size: 0.85rem;
+            }
+        }
+    </style>
+    """, unsafe_allow_html=True)
+
+    # Header Section
+    st.markdown('<div class="header-section">', unsafe_allow_html=True)
+    st.markdown('<h1 class="header-title">📰 TruthCheck - Advanced Fake News Detection System</h1>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+
+    # Main Content
+    st.markdown('<div class="section">', unsafe_allow_html=True)
+    st.markdown('<p class="section-text">This application uses a hybrid deep learning model (BERT + BiLSTM + Attention) to detect fake news articles. Enter a news article below to analyze it.</p>', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
+
+
+    # News Analysis Section
+    st.markdown('<div class="section">', unsafe_allow_html=True)
+    st.markdown('<h2 class="section-title">📋 News Analysis</h2>', unsafe_allow_html=True)
+
+    # Input Section
+    st.markdown('<div class="input-container">', unsafe_allow_html=True)
     news_text = st.text_area(
         "Enter the news article to analyze:",
         height=200,
         placeholder="Paste your news article here..."
     )
-    
+    st.markdown('</div>', unsafe_allow_html=True)
+
     if st.button("Analyze"):
         if news_text:
             with st.spinner("Analyzing the news article..."):
@@ -200,42 +419,46 @@ def main():
                 col1, col2 = st.columns(2)
                 
                 with col1:
-                    st.subheader("Prediction")
+                    st.markdown('<div class="results-container">', unsafe_allow_html=True)
+                    st.markdown('<h3 class="section-title">🔍 Prediction</h3>', unsafe_allow_html=True)
                     if result['label'] == 'FAKE':
-                        st.error(f"🔴 This news is likely FAKE (Confidence: {result['confidence']:.2%})")
+                        st.markdown(f'<div class="result-card fake-news"><div class="prediction-badge">🚨 Fake News Detected <span class="confidence-score">{result["confidence"]:.2%}</span></div></div>', unsafe_allow_html=True)
                     else:
-                        st.success(f"🟢 This news is likely REAL (Confidence: {result['confidence']:.2%})")
+                        st.markdown(f'<div class="result-card real-news"><div class="prediction-badge">✅ Authentic News <span class="confidence-score">{result["confidence"]:.2%}</span></div></div>', unsafe_allow_html=True)
+                    st.markdown('</div>', unsafe_allow_html=True)
                 
                 with col2:
-                    st.subheader("Confidence Scores")
+                    st.markdown('<div class="results-container">', unsafe_allow_html=True)
+                    st.markdown('<h3 class="section-title">📊 Confidence Scores</h3>', unsafe_allow_html=True)
                     st.plotly_chart(plot_confidence(result['probabilities']), use_container_width=True)
+                    st.markdown('</div>', unsafe_allow_html=True)
                 
                 # Show attention visualization
-                st.subheader("Attention Analysis")
-                st.write("""
-                The attention weights show which parts of the text the model focused on 
-                while making its prediction. Higher weights indicate more important tokens.
-                """)
+                st.markdown('<div class="section">', unsafe_allow_html=True)
+                st.markdown('<h3 class="section-title">👁️ Attention Analysis</h3>', unsafe_allow_html=True)
+                st.markdown('<p class="section-text">The attention weights show which parts of the text the model focused on while making its prediction. Higher weights indicate more important tokens.</p>', 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)
                 
                 # Show model explanation
-                st.subheader("Model Explanation")
+                st.markdown('<div class="section">', unsafe_allow_html=True)
+                st.markdown('<h3 class="section-title">📝 Model Explanation</h3>', unsafe_allow_html=True)
                 if result['label'] == 'FAKE':
-                    st.write("""
-                    The model identified this as fake news based on:
-                    - Linguistic patterns typical of fake news
-                    - Inconsistencies in the content
-                    - Attention weights on suspicious phrases
-                    """)
+                    st.markdown('<p class="section-text">The model identified this as fake news based on:<ul><li>Linguistic patterns typical of fake news</li><li>Inconsistencies in the content</li><li>Attention weights on suspicious phrases</li></ul></p>', unsafe_allow_html=True)
                 else:
-                    st.write("""
-                    The model identified this as real news based on:
-                    - Credible language patterns
-                    - Consistent information
-                    - Attention weights on factual statements
-                    """)
+                    st.markdown('<p class="section-text">The model identified this as real news based on:<ul><li>Credible language patterns</li><li>Consistent information</li><li>Attention weights on factual statements</li></ul></p>', unsafe_allow_html=True)
+                st.markdown('</div>', unsafe_allow_html=True)
         else:
             st.warning("Please enter a news article to analyze.")
 
+    # Footer
+    st.markdown("---")
+    st.markdown(
+        '<div class="footer"><p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2025</p></div>',
+        unsafe_allow_html=True
+    )
+
+    st.markdown('</div>', unsafe_allow_html=True)  # Close main-container
+
 if __name__ == "__main__":
-    main() 
+    main()