Spaces:
Running
Running
File size: 3,032 Bytes
10e4cb6 d9181ed 72d0e7a d9181ed 72d0e7a d9181ed 72d0e7a 10e4cb6 72d0e7a 10e4cb6 72d0e7a 10e4cb6 72d0e7a 10e4cb6 72d0e7a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import streamlit as st
# Inject custom CSS for background with your image and gradient
st.markdown(
f"""
<style>
/* General background with gradient and your 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;
background-position: center;
font-family: 'Arial', sans-serif;
}}
/* Header slide-right animation */
@keyframes slide-right {{
0% {{
transform: translateX(-100%); /* Start off-screen to the left */
}}
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,
)
# 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}")
|