Update app.py

app.py

@@ -7,6 +7,7 @@ from oauth2client.service_account import ServiceAccountCredentials
 import PyPDF2
 import io
 from datetime import datetime
+from PIL import Image
 
 # Constants
 WORD_LIMIT = 8000
@@ -225,38 +226,68 @@ if 'username' not in st.session_state:
 
 # Login system
 if st.session_state.username is None:
-    st.title("Login")
-    username_input = st.text_input("Enter your username:")
+    # Center align the content
+    col1, col2, col3 = st.columns([1,2,1])
+    
+    with col2:
+        # Display logo
+        st.image("logo.png", width=200)  # Assuming the image is saved as logo.png
+        
+        st.title("Login")
+        username_input = st.text_input("Enter your username:")
 
-    if st.session_state.login_step == 'username' and st.button("Login"):
-        if username_input:
-            if check_user_in_sheet(username_input):
-                stats = get_user_stats(username_input)
-                if stats:
-                    st.success(f"Welcome, {username_input}! 👋")
-                    st.info(f"""
-                    📊 Your API Usage Statistics:
-                    - Today's Usage: {stats['daily_count']}/{DAILY_API_LIMIT} generations
-                    - Total All-Time Usage: {stats['total_count']} generations
-                    """)
-                    st.session_state.login_step = 'enter_app'
+        if st.session_state.login_step == 'username' and st.button("Login", use_container_width=True):
+            if username_input:
+                if check_user_in_sheet(username_input):
+                    stats = get_user_stats(username_input)
+                    if stats:
+                        st.success(f"Welcome, {username_input}! 👋")
+                        st.info(f"""
+                        📊 Your API Usage Statistics:
+                        - Today's Usage: {stats['daily_count']}/{DAILY_API_LIMIT} generations
+                        - Total All-Time Usage: {stats['total_count']} generations
+                        """)
+                        st.session_state.login_step = 'enter_app'
+                else:
+                    st.warning("Username not found. Please try again.")
             else:
-                st.warning("Username not found. Please try again.")
-        else:
-            st.warning("Please enter a valid username.")
+                st.warning("Please enter a valid username.")
 
-    if st.session_state.login_step == 'enter_app':
-        if st.button("🎯 Enter GeneXam Application"):
-            st.session_state.username = username_input
-            st.rerun()
+        if st.session_state.login_step == 'enter_app':
+            if st.button("🎯 Enter GeneXam Application", use_container_width=True):
+                st.session_state.username = username_input
+                st.rerun()
+
+        # Show instructions
+        if st.session_state.login_step == 'username':
+            st.markdown("""
+            ### How to Login:
+            1. Enter your username and click 'Login' to verify your account
+            2. After verification, click 'Enter GeneXam Application' to start using the system
+            """)
+
+# Add some custom CSS to improve the layout
+st.markdown("""
+    <style>
+    .stImage {
+        text-align: center;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    .stTitle {
+        text-align: center;
+        padding-bottom: 20px;
+    }
+    
+    div[data-testid="stVerticalBlock"] > div:has(div.stButton) {
+        text-align: center;
+        padding: 10px 0;
+    }
+    </style>
+    """, unsafe_allow_html=True)
 
-    # Show instructions
-    if st.session_state.login_step == 'username':
-        st.markdown("""
-        ### How to Login:
-        1. Enter your username and click 'Login' to verify your account
-        2. After verification, click 'Enter GeneXam Application' to start using the system
-        """)
 else:
     # Main application code (ส่วนที่เหลือเหมือนเดิม)
     st.title(f"Welcome to GeneXam, {st.session_state.username}! 🎓")