File size: 3,119 Bytes
2a3f3ae 48060b4 2a3f3ae e31a786 48060b4 2a3f3ae e31a786 2a3f3ae e31a786 48060b4 e31a786 48060b4 2a3f3ae e31a786 2a3f3ae e31a786 48060b4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import streamlit as st
import base64
# Set Streamlit page config
st.set_page_config(page_title="🧠 Neural Network Playground", layout="wide")
# Function to blur only the background image (not the whole app)
def set_background_blur(image_path):
with open(image_path, "rb") as image_file:
encoded = base64.b64encode(image_file.read()).decode()
st.markdown(
f"""
<style>
/* Full screen blurred background image container */
.blur-background {{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}}
.blur-background::before {{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("data:image/png;base64,{encoded}");
background-size: cover;
background-position: center;
background-attachment: fixed;
filter: blur(8px);
z-index: -1;
}}
/* Typing animation */
.typing {{
font-family: 'Courier New', monospace;
color: #6A0DAD;
font-size: 45px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
border-right: 0.15em solid orange;
width: 0;
animation:
typing 3.5s steps(40, end) forwards,
blink-caret 0.75s step-end infinite;
}}
@keyframes typing {{
from {{ width: 0 }}
to {{ width: 100% }}
}}
@keyframes blink-caret {{
from, to {{ border-color: transparent }}
50% {{ border-color: orange }}
}}
</style>
<div class="blur-background"></div>
""",
unsafe_allow_html=True
)
# Call the background function with your image
set_background_blur("ann.jpeg") # Make sure ann.jpeg is in the same directory
# Typing animation title
st.markdown("<div class='typing'>⚡ Neural Network Lab</div>", unsafe_allow_html=True)
st.markdown("### 🧪 *Tinker. Train. Transform. — Explore neural networks like never before!*")
# Add a horizontal line
st.markdown("<hr style='border-top: 2px solid #bbb;'>", unsafe_allow_html=True)
# Collapsible section for details
with st.expander("📘 Click to Learn More About This App"):
st.markdown("""
### 🔧 What You Can Do Here
- 🧩 Choose from datasets like **Moons**, **Circles**, or **Custom Classification**
- 🔢 Tweak model structure: layers, neurons, activations, learning rate
- 📉 Train interactively and watch how it learns over time
- 🎨 Visualize decision boundaries and loss curves instantly
### 🎯 Why Use This?
- 👀 See neural network behavior come to life
- 🧠 Understand how changes impact learning
- 🎓 Perfect for education, demos, and self-learning
""")
# Add another subtle separator
st.markdown("<hr style='border-top: 1px dashed #ccc;'>", unsafe_allow_html=True)
|