Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -3,18 +3,24 @@ import streamlit as st
|
|
3 |
# Replace with the direct image URL
|
4 |
flower_image_url = "https://i.postimg.cc/hG2FG85D/2.png"
|
5 |
|
6 |
-
# Inject custom CSS for the background with
|
7 |
st.markdown(
|
8 |
f"""
|
9 |
<style>
|
10 |
-
/* General background with flower image
|
11 |
html, body, [data-testid="stAppViewContainer"] {{
|
12 |
background-image: url("{flower_image_url}");
|
13 |
background-size: contain; /* Keep the image size proportional */
|
14 |
-
background-position:
|
15 |
background-repeat: no-repeat; /* Prevent tiling */
|
|
|
16 |
font-family: 'Arial', sans-serif;
|
17 |
}}
|
|
|
|
|
|
|
|
|
|
|
18 |
</style>
|
19 |
""",
|
20 |
unsafe_allow_html=True
|
@@ -22,7 +28,10 @@ st.markdown(
|
|
22 |
|
23 |
# Streamlit UI elements
|
24 |
st.title("Word Cloud Application")
|
25 |
-
st.markdown("Welcome to the Word Cloud Application with a
|
|
|
|
|
|
|
26 |
|
27 |
# Add some interactivity
|
28 |
if st.button("Click Me"):
|
|
|
3 |
# Replace with the direct image URL
|
4 |
flower_image_url = "https://i.postimg.cc/hG2FG85D/2.png"
|
5 |
|
6 |
+
# Inject custom CSS for the background with blur effect
|
7 |
st.markdown(
|
8 |
f"""
|
9 |
<style>
|
10 |
+
/* General background with flower image, centered, and blurred */
|
11 |
html, body, [data-testid="stAppViewContainer"] {{
|
12 |
background-image: url("{flower_image_url}");
|
13 |
background-size: contain; /* Keep the image size proportional */
|
14 |
+
background-position: center; /* Center the image */
|
15 |
background-repeat: no-repeat; /* Prevent tiling */
|
16 |
+
filter: blur(10px); /* Apply blur effect - adjust manually */
|
17 |
font-family: 'Arial', sans-serif;
|
18 |
}}
|
19 |
+
/* Adjust blur ratio for interactivity */
|
20 |
+
.blur-adjust {{
|
21 |
+
text-align: center;
|
22 |
+
margin-top: 20px;
|
23 |
+
}}
|
24 |
</style>
|
25 |
""",
|
26 |
unsafe_allow_html=True
|
|
|
28 |
|
29 |
# Streamlit UI elements
|
30 |
st.title("Word Cloud Application")
|
31 |
+
st.markdown("Welcome to the Word Cloud Application with a blurred, centered flower background!")
|
32 |
+
|
33 |
+
# Add interactivity for blur ratio adjustment
|
34 |
+
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)
|
35 |
|
36 |
# Add some interactivity
|
37 |
if st.button("Click Me"):
|