Transpolymer2 / about.py
transpolymer's picture
Upload about.py
b9a26cf verified
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)