Update pages/About.py

pages/About.py

@@ -1,145 +1,148 @@
-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()
+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()