Update app.py

app.py

@@ -1,27 +1,101 @@
 import streamlit as st
 
-# Function to set a background image from a URL
-def set_background_from_url(image_url):
-    st.markdown(
-        f"""
-        <style>
-        .stApp {{
-            background-image: url("{image_url}");
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
+# Inject custom CSS for background and animations
+st.markdown(
+    f"""
+    <style>
+    /* General background with gradient and image overlay */
+    html, body, [data-testid="stAppViewContainer"] {{
+        background-image: 
+            linear-gradient(
+                to bottom right, 
+                rgba(135, 206, 250, 0.5),  /* Light Sky Blue */
+                rgba(255, 223, 186, 0.5),  /* Soft Peach */
+                rgba(192, 192, 192, 0.5),  /* Bright Silver */
+                rgba(169, 169, 169, 0.5),  /* Gray */
+                rgba(240, 248, 255, 0.5),  /* Alice Blue */
+                rgba(173, 216, 230, 0.5)   /* Light Blue */
+            ),
+            url("https://huggingface.co/spaces/tahirsher/wellbeing_GenAI/blob/main/1.png");
+        background-size: cover;
+        background-blend-mode: overlay;
+        font-family: 'Arial', sans-serif;
+    }}
+    /* Header slide-right animation */
+    @keyframes slide-right {{
+        0% {{
+            transform: translateX(-100%); /* Start off-screen to the left */
         }}
-        </style>
-        """,
-        unsafe_allow_html=True
-    )
+        100% {{
+            transform: translateX(0); /* End at the normal position */
+        }}
+    }}
+    /* Header slide-left animation */
+    @keyframes slide-left {{
+        0% {{
+            transform: translateX(100%); /* Start off-screen to the right */
+        }}
+        100% {{
+            transform: translateX(0); /* End at the normal position */
+        }}
+    }}
+    /* Header slide-right animation for the title */
+    .header-slide-right {{
+        display: inline-block;
+        animation: slide-right 2s ease-out;
+    }}
+    /* Subtitle slide-left animation */
+    .header_description {{
+        display: inline-block;
+        animation: slide-left 2s ease-out;
+    }}
+    /* Button styles */
+    .stButton button {{
+        background-color: #333333;
+        color: white;
+        border: 2px solid black;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+    }}
+    .stButton button:hover {{
+        background-color: #555555;
+    }}
+    .stSelectbox select {{
+        background-color: #333333;
+        color: white;
+        border: 2px solid black;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+    }}
+    .stSelectbox select:hover {{
+        background-color: #555555;
+    }}
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# Streamlit UI elements
+st.title("Word Cloud Application", anchor=None)
+st.markdown(
+    '<div class="header-slide-right">Welcome to the Word Cloud Application</div>',
+    unsafe_allow_html=True,
+)
+st.markdown(
+    '<div class="header_description">This app provides a beautiful interface to display word clouds.</div>',
+    unsafe_allow_html=True,
+)
 
-# Streamlit App
-st.title("Word Cloud Application")
-st.write("This application displays a word cloud with a custom background.")
+# Add some interactivity
+if st.button("Click Me"):
+    st.write("You clicked the button!")
 
-# Set background image from URL
-set_background_from_url("https://huggingface.co/spaces/tahirsher/wellbeing_GenAI/blob/main/1.png")
+# Add a select box
+option = st.selectbox(
+    "Choose an option:",
+    ["Option 1", "Option 2", "Option 3"]
+)
 
-st.header("Word Clouds Display")
-st.write("Use the images in your layout or add functionality.")
+st.write(f"You selected: {option}")