Upload About.py

pages/About.py

@@ -0,0 +1,145 @@
+import streamlit as st
+import base64
+
+def main():
+    st.set_page_config(page_title="Neural Network Playground", page_icon="🧠", layout="centered")
+
+    def encode_image(image_path):
+        with open(image_path, "rb") as image_file:
+            return base64.b64encode(image_file.read()).decode()
+
+    def add_bg_from_local(image_file):
+        encoded_string = encode_image(image_file)
+        st.markdown(
+            f"""
+            <style>
+            .stApp {{
+                background-image: url(data:image/png;base64,{encoded_string});
+                background-size: cover;
+                background-position: center;
+                background-repeat: no-repeat;
+                background-attachment: fixed;
+            }}
+            </style>
+            """,
+            unsafe_allow_html=True
+        )
+
+    add_bg_from_local("Images/bkg13.jpg")
+
+    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)
+
+if __name__ == "__main__":
+    main()