Align results page to left

app.py

@@ -100,6 +100,12 @@ def main():
             margin-right: auto;
             width: 200px;
         }
+        /* Left-aligned logo for results page */
+        .header-logo-left {
+            display: block;
+            margin-right: auto;
+            width: 200px;
+        }
         .header-title {
             text-align: center;
             font-size: 2.8rem;
@@ -158,6 +164,13 @@ def main():
             50% { opacity: 1; }
             100% { opacity: 0.6; }
         }
+        /* Left-aligned results content */
+        .results-container h2 {
+            text-align: left;
+        }
+        .results-container p {
+            text-align: left;
+        }
         </style>
         """,
         unsafe_allow_html=True
@@ -170,12 +183,22 @@ def main():
         st.error("Please make sure all required scripts are in the same directory as this Streamlit app.")
         return
 
-    # Load logo for all pages
+    # Load logo path for all pages
     logo_path = "metamorphLogo_nobg.png"
-    if os.path.exists(logo_path):
+    logo_exists = os.path.exists(logo_path)
+    logo_base64 = None
+    
+    if logo_exists:
         try:
             logo = Image.open(logo_path)
             logo_base64 = get_img_as_base64(logo)
+        except Exception as e:
+            st.warning(f"Logo could not be loaded: {e}")
+
+    # =============== INPUT PAGE ===============
+    if st.session_state.page == 'input':
+        # Display centered logo and title for input page
+        if logo_exists and logo_base64:
             st.markdown(
                 f"""
                 <div style="text-align: center;">
@@ -184,13 +207,9 @@ def main():
                 """,
                 unsafe_allow_html=True
             )
-        except Exception as e:
-            st.warning(f"Logo could not be loaded: {e}")
-
-    st.markdown("<h1 class='header-title'>Metamorph Web App</h1>", unsafe_allow_html=True)
-
-    # =============== INPUT PAGE ===============
-    if st.session_state.page == 'input':
+        
+        st.markdown("<h1 class='header-title'>Metamorph Web App</h1>", unsafe_allow_html=True)
+        
         st.markdown(
             """
             <p style='text-align: center; font-size: 1.1rem;'>
@@ -350,6 +369,19 @@ def main():
 
     # =============== PROCESSING PAGE ===============
     elif st.session_state.page == 'processing':
+        # Display centered logo for processing page
+        if logo_exists and logo_base64:
+            st.markdown(
+                f"""
+                <div style="text-align: center;">
+                    <img src="data:image/png;base64,{logo_base64}" class="header-logo-large" alt="Metamorph Logo">
+                </div>
+                """,
+                unsafe_allow_html=True
+            )
+            
+        st.markdown("<h1 class='header-title'>Metamorph Web App</h1>", unsafe_allow_html=True)
+        
         st.markdown(
             """
             <div class="processing-container">
@@ -488,9 +520,21 @@ def main():
 
     # =============== RESULT PAGE ===============
     elif st.session_state.page == 'result':
+        # Display left-aligned logo for results page (no title)
+        if logo_exists and logo_base64:
+            st.markdown(
+                f"""
+                <div>
+                    <img src="data:image/png;base64,{logo_base64}" class="header-logo-left" alt="Metamorph Logo">
+                </div>
+                """,
+                unsafe_allow_html=True
+            )
+        
+        # Left-aligned content for results page
         st.markdown(
             """
-            <div style="text-align: center;">
+            <div class="results-container">
                 <h2>Morphing Complete! 🎉</h2>
                 <p>Your morphing video has been successfully generated. You can download it below.</p>
             </div>