pages/About.py

import streamlit as st

st.set_page_config(page_title="Neural Network Playground", page_icon="🧠", layout="centered")

def main():
    st.markdown(
        f"""
        <h1 style='text-align: center; color: white;'>
            🧠 Neural Network Playground
        </h1>
        """,
        unsafe_allow_html=True
    )
    
    st.markdown("""<h2 style='text-align: center;'>🔍 What is a Neural Network?</h2>""", unsafe_allow_html=True)
    st.markdown(
        "A neural network is a type of machine learning model inspired by how the human brain works. "
        "Think of it as a web of tiny processing units (neurons) that work together to recognize patterns, "
        "make predictions, and learn from data."
    )
    
    st.markdown("---")
    st.markdown("""<h2 style='text-align: center;'>⚙️ How Does This Playground Work?</h2>""", unsafe_allow_html=True)
    st.markdown(
        "This interactive app lets you experiment with a simple neural network. "
        "By adjusting various settings, you can see how different configurations affect learning and performance."
    )
    
    st.markdown("---")
    st.markdown("""<h2 style='text-align: center;'>🔧 Configuration Settings Explained</h2>""", unsafe_allow_html=True)
    st.markdown("Modify these settings to understand how neural networks learn:")
    
    st.markdown("**🧱 Number of Layers & Neurons**")
    st.markdown(
        "- More layers and neurons make the network more powerful but can lead to **overfitting**. "
        "Think of it like adding more people to solve a problem: sometimes helpful, but too many can cause confusion."
    )
    
    st.markdown("**⚡ Learning Rate**")
    st.markdown(
        "- Determines how fast the network learns. A high learning rate makes quick progress but might miss details, "
        "while a low one learns slowly but carefully. It's like choosing between sprinting and walking while learning something new."
    )
    
    st.markdown("**🚀 Activation Functions**")
    st.markdown("These control how neurons pass information. Common options include:")
    st.code(
        "ReLU (Rectified Linear Unit): Great for deep networks\n"
        "Sigmoid: Useful for probability-based problems\n"
        "Tanh: Works best when data is centered around zero"
    )
    
    st.markdown("**📆 Epochs & Batch Size**")
    st.markdown(
        "- **Epochs**: How many times the network sees the entire dataset. Too many can cause overfitting."
        "\n- **Batch Size**: How many data points the network processes at once. A larger batch makes training faster but uses more memory."
    )
    
    st.markdown("---")
    st.markdown("""<h2 style='text-align: center;'>💡 My Learning Experience</h2>""", unsafe_allow_html=True)
    st.markdown(
        "When I first started learning about neural networks, everything felt complicated. "
        "But after playing around with different settings and seeing how they change the learning process, "
        "things started making sense."
    )
    st.markdown(
        "One resource that helped me a lot was the **TensorFlow Playground**. "
        "It's an amazing interactive tool that lets you visualize how neural networks learn in real time!"
    )
    st.markdown("🌐 [Check out the TensorFlow Playground](https://playground.tensorflow.org/)")
    
    st.markdown("---")
    st.markdown("""<h2 style='text-align: center;'>🚀 Start Experimenting!</h2>""", unsafe_allow_html=True)
    st.markdown(
        "Now it's your turn! Adjust the settings, train the model, and see how small changes can make a big difference. "
        "The best way to learn is by doing—so have fun exploring!"
    )
    
    st.markdown("""
        <style>
        .footer {
            width: 100%;
            text-align: center;
            color: white;
            padding: 20px 0;
            background: linear-gradient(135deg, #f36f6f, #FF7F50);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            margin-top: 50px;
            border-radius: 10px 10px 0 0;
        }
        .footer p {
            font-size: 18px;
            font-weight: bold;
        }
        .footer a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
            transition: transform 0.3s ease, scale 0.2s;
        }
        .footer a:hover {
            transform: scale(1.2);
        }
        .footer img {
            margin-left: 8px;
        }
        </style>
        <div class="footer">
            <p>Created with 💡 by Aamer
                <a href='https://linkedin.com/mohd-suhaib-aamer' target='_blank'>
                    <img src='https://img.icons8.com/fluent/48/000000/linkedin.png' width='24' height='24'/>
                </a>
                <a href='https://github.com/Suhaib-Aamer' target='_blank'>
                    <img src='https://img.icons8.com/fluent/48/000000/github.png' width='24' height='24'/>
                </a>
            </p>
        </div>
    """, unsafe_allow_html=True)

# Adding a Background
st.markdown(
    """
    <style>
        .stApp {
            background-image: url("https://cdn-uploads.huggingface.co/production/uploads/673f5e166c2774fcc8a82f0b/VHiP7IHKe-9tIY2ZiLIAZ.jpeg");
            background-size: cover;
            background-position: center;
            height: 100vh;
            background-attachment: fixed;
        }
        
        /* Semi-transparent overlay */
        .stApp::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);  /* 40% transparency */
            z-index: -1;
        }
    </style>
    """, 
    unsafe_allow_html=True)

if __name__ == "__main__":
    main()