Spaces:
Sleeping
Sleeping
File size: 5,250 Bytes
b9a26cf |
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 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
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)
|