Spaces:
Sleeping
Sleeping
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}") | |