Update src/about.py (#28)

- Update src/about.py (7c06e6b5265441c9623fc909d2e366a546f64c6d)


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

src/about.py

@@ -1,135 +1,116 @@
 import streamlit as st
-import os  # Missing import added
 
-# Set page configuration
-st.set_page_config(
-    page_title="About Us | AI News Generator",
-    page_icon="🌟",
-    layout="wide",
-    initial_sidebar_state="collapsed"
-)
-
-# Main Function
 def main():
-    # Apply Poppins font across the app
+    # Custom CSS for About page
     st.markdown("""
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
-    html, body, [class*="css"], * {
-        font-family: 'Poppins', sans-serif;
-    }
-    </style>
-    """, unsafe_allow_html=True)
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
 
-    # Add Font Awesome CDN for icons
-    st.markdown("""
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-    """, unsafe_allow_html=True)
+        .stApp {
+            font-family: 'Poppins', sans-serif;
+            background: #f8fafc;
+            min-height: 100vh;
+            color: #1a202c;
+        }
+
+        #MainMenu {visibility: visible;}
+        footer {visibility: hidden;}
+        .stDeployButton {display: none;}
+        header {visibility: hidden;}
+        .stApp > header {visibility: hidden;}
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1.5rem;
+        }
+
+        .header {
+            padding: 1.5rem 0;
+            text-align: center;
+        }
 
-    # Title Section
-    st.markdown("<h1 style='font-size: 60px; text-align: center;'>About Us</h1>", unsafe_allow_html=True)
-    st.markdown("<p style='font-size: 20px; text-align: center; color: gray;'>Learn more about the vision, mission, and team behind the AI News Generator. 🌍📰</p>", unsafe_allow_html=True)
+        .header-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #1a202c;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
 
-    # Section 1: Our Vision
-    st.markdown("<h2 style='font-size: 30px;'>🌟 Our Vision</h2>", unsafe_allow_html=True)
-    st.write("""
-    At **AI News Generator**, we aim to revolutionize the way news is created and consumed. 
-    By leveraging cutting-edge **Generative AI**, we aspire to provide **reliable, real-time, and personalized news content** that empowers individuals and organizations worldwide. 
-    We envision a world where technology enhances the accessibility and quality of information for everyone.
-    """)
+        .section {
+            margin-bottom: 2rem;
+        }
 
-    # Section 2: Our Mission
-    st.markdown("---")
-    st.markdown("<h2 style='font-size: 30px;'>🚀 Our Mission</h2>", unsafe_allow_html=True)
-    st.write("""
-    Our mission is simple: to deliver **AI-powered solutions** that make news creation faster, smarter, and more efficient. 
-    We believe in innovation, creativity, and the potential of AI to transform industries. Whether you're a journalist, an organization, or just someone seeking personalized content, 
-    **AI News Generator** is here to serve your needs with **accuracy, diversity, and creativity**.
-    """)
+        .section-title {
+            font-size: 2rem;
+            font-weight: 600;
+            color: #1a202c;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
 
-    # Team Section
-    st.header("Meet the Team")
-    team_members = [
-        {
-            "name": "Muhammad Khaqan Nasir",
-            "github": "KhaqanNasir",
-            "linkedin": "khaqan-nasir",
-            "image": os.path.join(os.path.dirname(__file__), 'assets', 'member01.jpg')
-        },
-        {
-            "name": "Muhammad Adnan Tariq",
-            "github": "adnaan-tariq",
-            "linkedin": "adnaantariq",
-            "image": os.path.join(os.path.dirname(__file__), 'assets', 'member02.JPG')
-        },
-        {
-            "name": "Muhammad Ibtisiam Afzal",
-            "github": "ibtisamafzal",
-            "linkedin": "ibtisamafzal",
-            "image": os.path.join(os.path.dirname(__file__), 'assets', 'member03.JPG')
+        .section-text {
+            font-size: 1.1rem;
+            color: #4a5568;
+            line-height: 1.5;
+            max-width: 800px;
+            margin: 0 auto;
         }
-    ]
 
-    cols = st.columns(len(team_members))
-    for col, member in zip(cols, team_members):
-        with col:
-            # Encode image to base64
-            encoded_image = encode_image(member['image'])
-        
-            # HTML structure with background color and adjusted image height
-            st.markdown(f"""
-            <div style='background-color: #f8f9fa; border-radius: 10px; padding: 20px; margin-bottom: 20px; text-align: center;'>
-                <div style='background-color: #ffffff; border-radius: 50%; width: 200px; height: 200px; margin: 0 auto; display: flex; justify-content: center; align-items: center;'>
-                    <img src="data:image/jpeg;base64,{encoded_image}" alt="{member['name']}" style='width: 100%; height: 100%; object-fit: cover; border-radius: 50%;'>
-                </div>
-                <div style='font-size: 22px; font-weight: 600; color: #5F6366; margin-top: 10px;'>{member['name']}</div>
-                <div style='font-size: 18px; color: #5F6366; margin-top: 5px;'>
-                    <a href='https://github.com/{member["github"]}' target='_blank' style='font-size: 20px; color: #000000; margin-right: 10px;'>
-                        <i class="fab fa-github" style="font-size: 20px; color: #000000; margin-right: 5px;"></i> GitHub
-                    </a>
-                    <a href='https://linkedin.com/in/{member["linkedin"]}' target='_blank' style='font-size: 20px; color: #0077B5;'>
-                        <i class="fab fa-linkedin" style="font-size: 20px; color: #0077B5; margin-right: 5px;"></i> LinkedIn
-                    </a>
-                </div>
-            </div>
-            """, unsafe_allow_html=True)
+        .stSidebar {
+            background: #ffffff;
+            border-right: 1px solid #e5e7eb;
+        }
 
-    # Section 4: Technology Stack
-    st.markdown("---")
-    st.markdown("<h2 style='font-size: 30px;'>🛠️ Technology Stack</h2>", unsafe_allow_html=True)
-    st.write("""
-    Our app uses cutting-edge **Generative AI models** combined with open-source tools to ensure high-quality performance. 
-    Below are some key technologies that power **AI News Generator**:
-    - **Streamlit**: For building the user interface.
-    - **Natural Language Processing (NLP)**: For generating accurate and readable news content.
-    - **Free APIs and Open-Source Models**: To make the app cost-efficient and widely accessible.
-    - **Python Libraries**: For seamless backend integration and feature enhancement.
-    """)
+        .stSidebar .sidebar-content {
+            padding: 1rem;
+        }
+    </style>
+    """, unsafe_allow_html=True)
 
-    # Section 5: Why Choose Us?
-    st.markdown("---")
-    st.markdown("<h2 style='font-size: 30px;'>💡 Why Choose Us?</h2>", unsafe_allow_html=True)
-    st.write("""
-    - **Free and Accessible**: We use free resources to ensure accessibility for all users.
-    - **Real-Time News**: Generate fresh, personalized news in seconds.
-    - **Innovative AI**: Powered by state-of-the-art generative AI.
-    - **User-Centric Design**: Intuitive and simple to use for anyone.
-    """)
 
-    # Footer
-    st.markdown("---")
-    st.markdown(
-        '<p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2024</p>',
-        unsafe_allow_html=True
-    )
-    st.sidebar.success("Select a page above.")
+    # Header
+    st.markdown("""
+    <div class="header">
+        <div class="container">
+            <h1 class="header-title">🛡️ TruthCheck</h1>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
 
-# Function to encode image to base64
-def encode_image(image_path):
-    with open(image_path, "rb") as image_file:
-        import base64
-        return base64.b64encode(image_file.read()).decode("utf-8")
+    # About Content
+    st.markdown("""
+    <div class="container">
+        <div class="section">
+            <h2 class="section-title">ℹ️ About TruthCheck</2>
+            <p class="section-text">
+                TruthCheck is an advanced fake news detection platform powered by cutting-edge AI technology. Our mission is to empower users to distinguish between authentic information and misinformation in an era of digital overload.
+            </p>
+        </div>
+        <div class="section">
+            <h3 class="section-title">🚀 Our Mission</h3>
+            <p class="section-text">
+                We aim to combat misinformation by providing a reliable, user-friendly tool that analyzes news articles with high accuracy. TruthCheck leverages a hybrid BERT-BiLSTM model to detect linguistic patterns and contextual cues, ensuring you can trust the news you read.
+            </p>
+        </div>
+        <div class="section">
+            <h3 class="section-title">🧠 Our Technology</h3>
+            <p class="section-text">
+                TruthCheck combines BERT's natural language understanding with BiLSTM's sequential processing to achieve state-of-the-art fake news detection. Our model analyzes text for credibility, sentiment, and context, delivering results with confidence scores and attention visualizations.
+            </p>
+        </div>
+        <div class="section">
+            <h3 class="section-title">🌍 Why It Matters</h3>
+            <p class="section-text">
+                In a world where misinformation spreads rapidly, TruthCheck stands as a guardian of truth. Whether you're a journalist, researcher, or concerned citizen, our tool helps you make informed decisions by verifying the authenticity of news content.
+            </p>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
 
-# Run the app
 if __name__ == "__main__":
     main()