Update src/streamlit_app.py

src/streamlit_app.py

@@ -27,7 +27,7 @@ try:
 except ImportError:
     TENSORFLOW_AVAILABLE = False
 
-# ULTRA-AGGRESSIVE CSS FIX - Complete stability with UT Austin background
+# ULTRA-AGGRESSIVE CSS FIX - Complete stability with UT Austin background and Logo
 st.markdown("""
 <style>
     /* BACKGROUND IMAGE STYLING */
@@ -62,12 +62,8 @@ st.markdown("""
         pointer-events: none;
     }
     
-    /* FORCE HEADER TO BE COMPLETELY FIXED AND STABLE */
+    /* FORCE HEADER TO BE COMPLETELY FIXED AND STABLE WITH LOGO */
     .main-header {
-        font-size: 2.5rem !important;
-        color: #bf5700 !important; /* UT Austin burnt orange */
-        text-align: center !important;
-        margin-bottom: 2rem !important;
         position: fixed !important;
         top: 0 !important;
         left: 0 !important;
@@ -81,11 +77,37 @@ st.markdown("""
         box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
         transform: translateZ(0) !important;
         will-change: auto !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        flex-direction: column !important;
+        gap: 10px !important;
+    }
+    
+    /* LOGO STYLING */
+    .header-logo {
+        max-height: 80px !important;
+        max-width: 300px !important;
+        height: auto !important;
+        width: auto !important;
+        object-fit: contain !important;
+        border-radius: 8px !important;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
+    }
+    
+    /* HEADER TEXT STYLING */
+    .header-text {
+        font-size: 1.8rem !important;
+        color: #bf5700 !important; /* UT Austin burnt orange */
+        text-align: center !important;
+        margin: 0 !important;
+        font-weight: bold !important;
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
     }
     
-    /* ADD TOP MARGIN TO MAIN CONTENT TO AVOID OVERLAP */
+    /* ADD TOP MARGIN TO MAIN CONTENT TO AVOID OVERLAP - INCREASED FOR LOGO */
     .main > .block-container {
-        margin-top: 120px !important;
+        margin-top: 150px !important;  /* Increased from 120px to accommodate logo */
         padding-top: 20px !important;
         background: rgba(255, 255, 255, 0.9) !important;
         border-radius: 10px !important;
@@ -93,6 +115,22 @@ st.markdown("""
         backdrop-filter: blur(5px) !important;
     }
     
+    /* RESPONSIVE DESIGN FOR MOBILE */
+    @media (max-width: 768px) {
+        .header-logo {
+            max-height: 60px !important;
+            max-width: 250px !important;
+        }
+        
+        .header-text {
+            font-size: 1.4rem !important;
+        }
+        
+        .main > .block-container {
+            margin-top: 130px !important;
+        }
+    }
+    
     /* UT AUSTIN THEMING */
     .section-header {
         font-size: 1.5rem;
@@ -569,8 +607,15 @@ class OptimizedBubbleSimulation:
 
 # Main Streamlit App
 def main():
-    # Header - ULTRA-STABLE with fixed positioning and UT Austin branding
-    st.markdown('<h1 class="main-header">🫧 YANG Research Group - Bubble Dynamics Analysis</h1>', unsafe_allow_html=True)
+    # Header - ULTRA-STABLE with fixed positioning and UT Austin branding + Logo
+    st.markdown("""
+    <div class="main-header">
+        <img src="https://huggingface.co/spaces/lehuaaa/Bubble/resolve/main/src/group_logo.JPG" 
+             alt="YANG Research Group Logo" 
+             class="header-logo">
+        <h1 class="header-text">Bubble Dynamics Analysis</h1>
+    </div>
+    """, unsafe_allow_html=True)
 
     # Initialize current page in session state
     if 'current_page' not in st.session_state:
@@ -1262,18 +1307,6 @@ def show_ml_prediction():
 
         col1, col2 = st.columns([2, 1])
 
-#with col1:
-            #input_file_path = st.text_input(
-                #"Input file path:",
-                #placeholder="Select input file or use current data",
-                #key="input_file_path",
-                #value=st.session_state.get('input_file_path_var', '')
-            #)
-
-        #with col2:
-            #if st.button("📁 Browse Input"):
-                #st.info("Use the file uploader below to select a .txt file with R-t curve data")
-
         # File uploader for input data
         uploaded_input = st.file_uploader(
             "Upload input data file",