Spaces:
Sleeping
Sleeping
import streamlit as st | |
# Define the show() function to display the About page | |
def show(): | |
# Page title and content | |
st.markdown("<h2 style='text-align:center; color:#4B8BBE;'>π About TransPolymer</h2>", unsafe_allow_html=True) | |
st.markdown("---") | |
# Why TransPolymer Section | |
st.markdown(""" | |
<div style='background-color: #E0F7FA; padding: 15px; border-radius: 15px; text-align: center;'> | |
<h3 style='color: #00796B; margin-bottom: 10px;'>Why TransPolymer</h3> | |
<p style='font-size: 18px; color: #333333;'> | |
In TransPolymer, we use models like <b>ChemBERTa</b> to learn from SMILES strings β a special way to represent molecules. | |
This enables understanding of complex molecular structures and provides accurate predictions, even for new polymers. | |
</p> | |
</div> | |
""", unsafe_allow_html=True) | |
st.markdown("---") | |
# π¬ Properties Predicted Section with Animated Cards | |
st.markdown("### π¬ Properties Predicted by TransPolymer", unsafe_allow_html=True) | |
st.markdown(""" | |
<style> | |
.card-container { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
gap: 20px; | |
margin-top: 20px; | |
} | |
.card { | |
background: #f1f8ff; | |
border: 1px solid #d9e7f5; | |
border-radius: 20px; | |
padding: 20px; | |
text-align: center; | |
box-shadow: 0 4px 12px rgba(75, 139, 190, 0.15); | |
color: #4B8BBE; | |
font-weight: bold; | |
opacity: 0; | |
transform: scale(0.5) rotate(0deg); | |
animation: burst 6s ease-out forwards; | |
} | |
.card:nth-child(1) { animation-delay: 0.4s; } | |
.card:nth-child(2) { animation-delay: 1.2s; } | |
.card:nth-child(3) { animation-delay: 2.0s; } | |
.card:nth-child(4) { animation-delay: 2.8s; } | |
.card:nth-child(5) { animation-delay: 3.6s; } | |
.card:nth-child(6) { animation-delay: 4.4s; } | |
.card:hover { | |
transform: scale(1.05); | |
background-color: #e6f3ff; | |
box-shadow: 0 6px 18px rgba(75, 139, 190, 0.25); | |
text-shadow: 0px 0px 8px rgba(75, 139, 190, 0.5); | |
} | |
@keyframes burst { | |
0% { | |
opacity: 0; | |
transform: scale(0.5) rotate(-15deg); | |
} | |
40% { | |
opacity: 1; | |
transform: scale(1.1) rotate(5deg); | |
} | |
100% { | |
opacity: 1; | |
transform: scale(1) rotate(0deg); | |
} | |
} | |
</style> | |
<div class="card-container"> | |
<div class="card">Tensile Strength</div> | |
<div class="card">Ionization Energy</div> | |
<div class="card">Electron Affinity</div> | |
<div class="card">LogP</div> | |
<div class="card">Refractive Index</div> | |
<div class="card">Molecular Weight</div> | |
</div> | |
""", unsafe_allow_html=True) | |
st.markdown("---") | |
# π¨βπ« Mentor Section | |
st.markdown("### π¨βπ« Our Mentor", unsafe_allow_html=True) | |
st.markdown(""" | |
<div style='text-align: justify; font-size: 17px; color: #FFFFFF;;'> | |
We are deeply grateful to our mentor, Mrs. Navatha Kolisetti, for her constant guidance and support throughout the TransPolymer project. | |
</div> | |
""", unsafe_allow_html=True) | |
st.markdown("---") | |
# π SMILES Info and π Use Case with Pulse Animation | |
with st.container(): | |
col1, col2 = st.columns(2) | |
with col1: | |
if st.button("π Learn More About SMILES"): | |
st.markdown(""" | |
<div style='animation: pulse 1.5s infinite; background-color:#eef7fd; padding: 20px; border-radius: 15px; font-size: 16px; color: #333;'> | |
<b>SMILES</b> stands for <i>Simplified Molecular Input Line Entry System</i>.<br><br> | |
It encodes molecules as text strings like C1=CC=CC=C1 (for Benzene). | |
SMILES is simple yet powerful, making it perfect for AI training on chemical data. | |
</div> | |
""", unsafe_allow_html=True) | |
with col2: | |
if st.button("π Example Use Case"): | |
st.markdown(""" | |
<div style='animation: pulse 1.5s infinite; background-color:#eef7fd; padding: 20px; border-radius: 15px; font-size: 16px; color: #333;'> | |
Imagine you're working on a biodegradable polymer for packaging.<br><br> | |
You need one with low density and high flexibility. | |
Just enter the SMILES string and TransPolymer will predict its physical properties β instantly. | |
</div> | |
""", unsafe_allow_html=True) | |
st.markdown(""" | |
<style> | |
@keyframes pulse { | |
0% {transform: scale(1); opacity: 1;} | |
50% {transform: scale(1.05); opacity: 0.8;} | |
100% {transform: scale(1); opacity: 1;} | |
} | |
</style> | |
""", unsafe_allow_html=True) | |
st.markdown("---") | |
# π‘ Modern Footer | |
st.markdown(""" | |
<div style="text-align: center; padding-top: 20px; font-size: 14px; color: #4B8BBE;"> | |
Β© 2025 TransPolymer β’ Powered by AI & Polymer Science | |
</div> | |
""", unsafe_allow_html=True) | |