|
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" |
|
|
|
|
|
|
|
|
|
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> |
|
""" |
|
|
|
|
|
st.markdown(toxicity_html, unsafe_allow_html=True) |
|
st.markdown(enlighten_html, unsafe_allow_html=True) |
|
|
|
|
|
|
|
|
