Spaces:
Sleeping
Sleeping
File size: 1,696 Bytes
9f7701f b90441b |
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 |
import streamlit as st
static_toxicity_path = "https://imagizer.imageshack.com/v2/480x360q70/r/924/L4Ditq.jpg"
animated_toxicity_path = (
"https://i.kym-cdn.com/photos/images/original/001/264/967/cdc.gif"
)
animated_enlighten_path = "https://gifdb.com/images/high/zen-meditation-chakras-illustration-6lujnenasnfmn8dt.gif"
static_enlighten_path = "https://imagizer.imageshack.com/v2/668x500q70/r/922/bpoy6G.jpg"
# Calculate the column widths dynamically
toxicity_html = f"""
<div class="toxicity-image-container">
<a href="review_predictor" target="_self" class="toxicity-link">
<img src="{static_toxicity_path}" class="toxicity-image" />
</a>
</div>
<style>
/* Define the hover state for column 1 */
.toxicity-image-container:hover .toxicity-image {{
content: url("{animated_toxicity_path}");
transform: scale(1.1); /* Enlarge the image by 10% */
transition: transform 0.5s ease; /* Add smooth transition */
}}
</style>
"""
enlighten_html = f"""
<div class="enlighten-image-container">
<a href="text_generator" target="_self" class="enlighten-link">
<img src="{static_enlighten_path}" class="enlighten-image" />
</a>
</div>
<style>
/* Define the hover state for column 2 */
.enlighten-image-container:hover .enlighten-image {{
content: url("{animated_enlighten_path}");
transform: scale(1.1); /* Enlarge the image by 10% */
transition: transform 0.5s ease; /* Add smooth transition */
}}
</style>
"""
# Display HTML code with Streamlit
st.markdown(toxicity_html, unsafe_allow_html=True)
st.markdown(enlighten_html, unsafe_allow_html=True)
# Display JavaScript code with Streamlit
|