tahirsher commited on
Commit
61d9513
·
verified ·
1 Parent(s): 56ba772

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +13 -4
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 the provided flower image
7
  st.markdown(
8
  f"""
9
  <style>
10
- /* General background with flower image positioned to the extreme left */
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: 0 center; /* Move image to the extreme left */
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 beautiful flower background aligned to the extreme left!")
 
 
 
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"):