Update src/app.py (#12)

- Update src/app.py (d3f9626ae02a0891007513a299927e03ee263b66)


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

src/app.py

@@ -240,7 +240,6 @@
 # if __name__ == "__main__":
 #     main() 
 
-
 import streamlit as st
 import torch
 import pandas as pd
@@ -278,6 +277,281 @@ from src.models.hybrid_model import HybridFakeNewsDetector
 from src.config.config import *
 from src.data.preprocessor import TextPreprocessor
 
+# Set page config
+st.set_page_config(
+    page_title="TrueCheck - AI Fake News Detector",
+    page_icon="🔍",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# Custom CSS for 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');
+    
+    /* Global Styles */
+    .main {
+        padding: 0;
+    }
+    
+    .stApp {
+        font-family: 'Inter', sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+    }
+    
+    /* Hide Streamlit elements */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    .stDeployButton {display: none;}
+    header {visibility: hidden;}
+    
+    /* Hero Section */
+    .hero-container {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        padding: 4rem 2rem;
+        text-align: center;
+        color: white;
+        margin-bottom: 2rem;
+    }
+    
+    .hero-title {
+        font-size: 4rem;
+        font-weight: 700;
+        margin-bottom: 1rem;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        background: linear-gradient(45deg, #fff, #e0e7ff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
+    
+    .hero-subtitle {
+        font-size: 1.3rem;
+        font-weight: 400;
+        margin-bottom: 2rem;
+        opacity: 0.9;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+        line-height: 1.6;
+    }
+    
+    /* Features Section */
+    .features-container {
+        background: white;
+        padding: 3rem 2rem;
+        margin: 2rem 0;
+        border-radius: 20px;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    }
+    
+    .features-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        gap: 2rem;
+        margin-top: 2rem;
+    }
+    
+    .feature-card {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        padding: 2rem;
+        border-radius: 16px;
+        text-align: center;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        border: 1px solid #e2e8f0;
+    }
+    
+    .feature-card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+    }
+    
+    .feature-icon {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+        display: block;
+    }
+    
+    .feature-title {
+        font-size: 1.2rem;
+        font-weight: 600;
+        color: #1e293b;
+        margin-bottom: 0.5rem;
+    }
+    
+    .feature-description {
+        color: #64748b;
+        line-height: 1.5;
+        font-size: 0.95rem;
+    }
+    
+    /* Main Content Section */
+    .main-content {
+        background: white;
+        padding: 3rem;
+        border-radius: 20px;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        margin: 2rem 0;
+    }
+    
+    .section-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        text-align: center;
+        color: #1e293b;
+        margin-bottom: 1rem;
+    }
+    
+    .section-description {
+        text-align: center;
+        color: #64748b;
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+        line-height: 1.6;
+    }
+    
+    /* Input Section */
+    .stTextArea > div > div > textarea {
+        border-radius: 12px;
+        border: 2px solid #e2e8f0;
+        padding: 1rem;
+        font-size: 1rem;
+        transition: border-color 0.3s ease;
+        font-family: 'Inter', sans-serif;
+    }
+    
+    .stTextArea > div > div > textarea:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    }
+    
+    /* Button Styling */
+    .stButton > button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        border-radius: 12px;
+        padding: 0.75rem 2rem;
+        font-size: 1.1rem;
+        font-weight: 600;
+        font-family: 'Inter', sans-serif;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        width: 100%;
+    }
+    
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
+    }
+    
+    /* Results Section */
+    .result-card {
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        padding: 2rem;
+        border-radius: 16px;
+        margin: 1rem 0;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+    
+    .success-message {
+        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
+        color: #166534;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        border-left: 4px solid #22c55e;
+        font-weight: 500;
+        margin: 1rem 0;
+    }
+    
+    .error-message {
+        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
+        color: #991b1b;
+        padding: 1rem 1.5rem;
+        border-radius: 12px;
+        border-left: 4px solid #ef4444;
+        font-weight: 500;
+        margin: 1rem 0;
+    }
+    
+    /* Footer */
+    .footer {
+        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+        color: white;
+        padding: 3rem 2rem 2rem;
+        text-align: center;
+        margin-top: 4rem;
+    }
+    
+    .footer-content {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    
+    .footer-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin-bottom: 1rem;
+    }
+    
+    .footer-text {
+        color: #94a3b8;
+        margin-bottom: 2rem;
+        line-height: 1.6;
+    }
+    
+    .footer-links {
+        display: flex;
+        justify-content: center;
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+    
+    .footer-link {
+        color: #94a3b8;
+        text-decoration: none;
+        transition: color 0.3s ease;
+    }
+    
+    .footer-link:hover {
+        color: white;
+    }
+    
+    .footer-bottom {
+        border-top: 1px solid #475569;
+        padding-top: 2rem;
+        color: #94a3b8;
+        font-size: 0.9rem;
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .hero-title {
+            font-size: 3rem;
+        }
+        
+        .features-grid {
+            grid-template-columns: 1fr;
+        }
+        
+        .main-content {
+            padding: 2rem;
+        }
+        
+        .footer-links {
+            flex-direction: column;
+            gap: 1rem;
+        }
+    }
+</style>
+""", unsafe_allow_html=True)
+
 @st.cache_resource
 def load_model_and_tokenizer():
     """Load the model and tokenizer (cached)."""
@@ -342,15 +616,25 @@ def plot_confidence(probabilities):
             y=list(probabilities.values()),
             text=[f'{p:.2%}' for p in probabilities.values()],
             textposition='auto',
-            marker_color=['#4B5EAA', '#FF6B6B']
+            marker_color=['#22c55e', '#ef4444'],
+            marker_line_color='rgba(0,0,0,0.1)',
+            marker_line_width=1
         )
     ])
     fig.update_layout(
-        title='Prediction Confidence',
+        title={
+            'text': 'Prediction Confidence',
+            'x': 0.5,
+            'xanchor': 'center',
+            'font': {'size': 18, 'family': 'Inter'}
+        },
         xaxis_title='Class',
         yaxis_title='Probability',
         yaxis_range=[0, 1],
-        template='plotly_white'
+        template='plotly_white',
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        font={'family': 'Inter'}
     )
     return fig
 
@@ -361,114 +645,213 @@ def plot_attention(text, attention_weights):
     if isinstance(attention_weights, (list, np.ndarray)):
         attention_weights = np.array(attention_weights).flatten()
     formatted_weights = [f'{float(w):.2f}' for w in attention_weights]
+    
+    # Create color scale based on attention weights
+    colors = ['rgba(102, 126, 234, ' + str(0.3 + 0.7 * (w / max(attention_weights))) + ')' 
+              for w in attention_weights]
+    
     fig = go.Figure(data=[
         go.Bar(
             x=tokens,
             y=attention_weights,
             text=formatted_weights,
             textposition='auto',
-            marker_color='#4B5EAA'
+            marker_color=colors,
+            marker_line_color='rgba(102, 126, 234, 0.8)',
+            marker_line_width=1
         )
     ])
     fig.update_layout(
-        title='Attention Weights',
+        title={
+            'text': 'Attention Weights Analysis',
+            'x': 0.5,
+            'xanchor': 'center',
+            'font': {'size': 18, 'family': 'Inter'}
+        },
         xaxis_title='Tokens',
         yaxis_title='Attention Weight',
         xaxis_tickangle=45,
-        template='plotly_white'
+        template='plotly_white',
+        plot_bgcolor='rgba(0,0,0,0)',
+        paper_bgcolor='rgba(0,0,0,0)',
+        font={'family': 'Inter'}
     )
     return fig
 
 def main():
-    # Hero section
+    # Hero Section
     st.markdown("""
-    <div class="hero-section">
-        <div style="display: flex; align-items: center; gap: 2rem;">
-            <div style="flex: 1;">
-                <h1 style="font-size: 2.5rem; color: #333333;">TrueCheck</h1>
-                <p style="font-size: 1.2rem; color: #666666;">
-                    Detect fake news with our advanced AI-powered system using BERT, BiLSTM, and Attention mechanisms.
+    <div class="hero-container">
+        <h1 class="hero-title">🔍 TrueCheck</h1>
+        <p class="hero-subtitle">
+            Advanced AI-powered fake news detection using cutting-edge deep learning technology. 
+            Get instant, accurate analysis of news articles with our hybrid BERT-BiLSTM model.
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Features Section
+    st.markdown("""
+    <div class="features-container">
+        <h2 style="text-align: center; font-size: 2rem; font-weight: 700; color: #1e293b; margin-bottom: 1rem;">
+            Why Choose TrueCheck?
+        </h2>
+        <p style="text-align: center; color: #64748b; font-size: 1.1rem; margin-bottom: 2rem;">
+            Our advanced AI model combines multiple technologies for superior accuracy
+        </p>
+        <div class="features-grid">
+            <div class="feature-card">
+                <span class="feature-icon">🤖</span>
+                <h3 class="feature-title">BERT Technology</h3>
+                <p class="feature-description">
+                    Utilizes state-of-the-art BERT transformer for deep contextual understanding of news content
+                </p>
+            </div>
+            <div class="feature-card">
+                <span class="feature-icon">🧠</span>
+                <h3 class="feature-title">BiLSTM Processing</h3>
+                <p class="feature-description">
+                    Bidirectional LSTM networks capture sequential patterns and dependencies in text structure
                 </p>
             </div>
-            <div style="flex: 1;">
-                <img src="https://img.freepik.com/free-vector/fake-news-concept-illustration_114360-3189.jpg" style="width: 100%; border-radius: 12px;" alt="Fake News Detection">
+            <div class="feature-card">
+                <span class="feature-icon">👁️</span>
+                <h3 class="feature-title">Attention Mechanism</h3>
+                <p class="feature-description">
+                    Advanced attention layers provide interpretable insights into model decision-making process
+                </p>
             </div>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
-    # Sidebar info
-    st.sidebar.markdown("---")
-    st.sidebar.header("About TrueCheck")
-    st.sidebar.markdown("""
-    <div style="font-size: 0.9rem; color: #666666;">
-        <p>TrueCheck uses a hybrid deep learning model combining:</p>
-        <ul>
-            <li>BERT for contextual embeddings</li>
-            <li>BiLSTM for sequence modeling</li>
-            <li>Attention mechanism for interpretability</li>
-        </ul>
+    # Main Content Section
+    st.markdown("""
+    <div class="main-content">
+        <h2 class="section-title">Analyze News Article</h2>
+        <p class="section-description">
+            Paste any news article below and our AI will analyze it for authenticity. 
+            Get detailed insights including confidence scores and attention analysis.
+        </p>
     </div>
     """, unsafe_allow_html=True)
 
-    # Main content
-    st.header("Analyze News")
-    news_text = st.text_area(
-        "Enter the news article to analyze:",
-        height=200,
-        placeholder="Paste your news article here..."
-    )
-    
-    if st.button("Analyze", key="analyze_button"):
+    # Input Section
+    col1, col2, col3 = st.columns([1, 3, 1])
+    with col2:
+        news_text = st.text_area(
+            "",
+            height=200,
+            placeholder="📰 Paste your news article here for analysis...",
+            key="news_input"
+        )
+        
+        analyze_button = st.button("🔍 Analyze Article", key="analyze_button")
+
+    if analyze_button:
         if news_text:
-            with st.spinner("Analyzing the news article..."):
+            with st.spinner("🤖 Analyzing the news article..."):
                 result = predict_news(news_text)
+                
+                # Results Section
+                st.markdown('<div class="main-content">', unsafe_allow_html=True)
+                
                 col1, col2 = st.columns([1, 1], gap="large")
                 
                 with col1:
-                    st.markdown("### Prediction")
+                    st.markdown("### 📊 Prediction Result")
                     if result['label'] == 'FAKE':
-                        st.markdown(f'<div class="flash-message error-message">🔴 This news is likely FAKE (Confidence: {result["confidence"]:.2%})</div>', unsafe_allow_html=True)
+                        st.markdown(f'''
+                        <div class="error-message">
+                            🔴 <strong>FAKE NEWS DETECTED</strong><br>
+                            Confidence: {result["confidence"]:.2%}
+                        </div>
+                        ''', unsafe_allow_html=True)
                     else:
-                        st.markdown(f'<div class="flash-message success-message">🟢 This news is likely REAL (Confidence: {result["confidence"]:.2%})</div>', unsafe_allow_html=True)
+                        st.markdown(f'''
+                        <div class="success-message">
+                            🟢 <strong>AUTHENTIC NEWS</strong><br>
+                            Confidence: {result["confidence"]:.2%}
+                        </div>
+                        ''', unsafe_allow_html=True)
                 
                 with col2:
-                    st.markdown("### Confidence Scores")
+                    st.markdown("### 📈 Confidence Breakdown")
                     st.plotly_chart(plot_confidence(result['probabilities']), use_container_width=True)
                 
-                st.markdown("### Attention Analysis")
+                st.markdown("### 🎯 Attention Analysis")
                 st.markdown("""
-                <p style="color: #666666;">
-                    The attention weights show which parts of the text the model focused on while making its prediction. Higher weights indicate more important tokens.
+                <p style="color: #64748b; text-align: center; margin-bottom: 2rem;">
+                    The visualization below shows which words our AI model focused on while making its prediction. 
+                    Darker colors indicate higher attention weights.
                 </p>
                 """, unsafe_allow_html=True)
                 st.plotly_chart(plot_attention(news_text, result['attention_weights']), use_container_width=True)
                 
-                st.markdown("### Model Explanation")
+                st.markdown("### 🔍 Detailed Analysis")
                 if result['label'] == 'FAKE':
                     st.markdown("""
-                    <div style="background-color: #F4F7FA; padding: 1rem; border-radius: 8px;">
-                        <p>The model identified this as fake news based on:</p>
-                        <ul>
-                            <li>Linguistic patterns typical of fake news</li>
-                            <li>Inconsistencies in the content</li>
-                            <li>Attention weights on suspicious phrases</li>
+                    <div class="result-card">
+                        <h4 style="color: #ef4444; margin-bottom: 1rem;">⚠️ Fake News Indicators</h4>
+                        <ul style="color: #64748b; line-height: 1.8;">
+                            <li><strong>Linguistic Patterns:</strong> The model detected language patterns commonly associated with misinformation</li>
+                            <li><strong>Content Inconsistencies:</strong> Identified potential factual inconsistencies or misleading statements</li>
+                            <li><strong>Attention Analysis:</strong> High attention weights on suspicious phrases and emotionally charged language</li>
+                            <li><strong>Structural Analysis:</strong> Text structure and flow patterns typical of fabricated content</li>
                         </ul>
+                        <p style="color: #7c3aed; font-weight: 500; margin-top: 1rem;">
+                            💡 <strong>Recommendation:</strong> Verify this information through multiple reliable sources before sharing.
+                        </p>
                     </div>
                     """, unsafe_allow_html=True)
                 else:
                     st.markdown("""
-                    <div style="background-color: #F4F7FA; padding: 1rem; border-radius: 8px;">
-                        <p>The model identified this as real news based on:</p>
-                        <ul>
-                            <li>Credible language patterns</li>
-                            <li>Consistent information</li>
-                            <li>Attention weights on factual statements</li>
+                    <div class="result-card">
+                        <h4 style="color: #22c55e; margin-bottom: 1rem;">✅ Authentic News Indicators</h4>
+                        <ul style="color: #64748b; line-height: 1.8;">
+                            <li><strong>Credible Language:</strong> Professional journalistic writing style and balanced reporting tone</li>
+                            <li><strong>Factual Consistency:</strong> Information appears coherent and factually consistent</li>
+                            <li><strong>Attention Analysis:</strong> Model focused on factual statements and objective reporting</li>
+                            <li><strong>Structural Integrity:</strong> Well-structured content following standard news article format</li>
                         </ul>
+                        <p style="color: #7c3aed; font-weight: 500; margin-top: 1rem;">
+                            💡 <strong>Note:</strong> While likely authentic, always cross-reference important news from multiple sources.
+                        </p>
                     </div>
                     """, unsafe_allow_html=True)
+                
+                st.markdown('</div>', unsafe_allow_html=True)
         else:
-            st.markdown('<div class="flash-message error-message">Please enter a news article to analyze.</div>', unsafe_allow_html=True)
+            st.markdown('''
+            <div class="main-content">
+                <div class="error-message" style="text-align: center;">
+                    ⚠️ Please enter a news article to analyze
+                </div>
+            </div>
+            ''', unsafe_allow_html=True)
+
+    # Footer
+    st.markdown("""
+    <div class="footer">
+        <div class="footer-content">
+            <h3 class="footer-title">TrueCheck AI</h3>
+            <p class="footer-text">
+                Empowering users with AI-driven news verification technology. 
+                Built with advanced deep learning models for accurate fake news detection.
+            </p>
+            <div class="footer-links">
+                <a href="#" class="footer-link">About</a>
+                <a href="#" class="footer-link">How It Works</a>
+                <a href="#" class="footer-link">Privacy Policy</a>
+                <a href="#" class="footer-link">Contact</a>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 TrueCheck AI. Built with ❤️ using Streamlit, BERT, and PyTorch.</p>
+                <p>Disclaimer: This tool provides AI-based analysis. Always verify important information through multiple sources.</p>
+            </div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()