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)