import streamlit as st

# Replace with the direct image URL
flower_image_url = "https://i.postimg.cc/hG2FG85D/2.png"

# Inject custom CSS for the background with blur effect
st.markdown(
    f"""
    <style>
    /* General background with flower image, centered, and blurred */
    html, body, [data-testid="stAppViewContainer"] {{
        background-image: url("{flower_image_url}");
        background-size: contain; /* Keep the image size proportional */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent tiling */
        filter: blur(10px); /* Apply blur effect - adjust manually */
        font-family: 'Arial', sans-serif;
    }}
    /* Adjust blur ratio for interactivity */
    .blur-adjust {{
        text-align: center;
        margin-top: 20px;
    }}
    </style>
    """,
    unsafe_allow_html=True
)

# Streamlit UI elements
st.title("Word Cloud Application")
st.markdown("Welcome to the Word Cloud Application with a blurred, centered flower background!")

# Add interactivity for blur ratio adjustment
st.markdown('<div class="blur-adjust">Adjust the blur ratio manually in the code using the <code>filter: blur()</code> property.</div>', unsafe_allow_html=True)

# Add some interactivity
if st.button("Click Me"):
    st.write("You clicked the button!")

# Add a select box
option = st.selectbox(
    "Choose an option:",
    ["Option 1", "Option 2", "Option 3"]
)

st.write(f"You selected: {option}")