Update app.py

app.py

@@ -95,54 +95,57 @@ def main():
     st.markdown(
         """
         <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #f4f6f9;
+            color: #333;
+        }
         .main {
-            background-color: #f7f9fc;
-            padding: 20px;
+            background-color: #fff;
+            padding: 30px;
             border-radius: 10px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .sidebar .sidebar-content {
-            background-color: #ffffff;
-            color: #2c3e50;
+            background-color: #2c3e50;
+            color: white;
             padding: 20px;
             border-radius: 10px;
         }
         .sidebar .sidebar-content .title {
             font-size: 24px;
             font-weight: bold;
-            margin-bottom: 10px;
+            margin-bottom: 20px;
         }
         .sidebar .sidebar-content .button {
             background-color: #3498db;
             border: none;
             color: white;
-            padding: 10px 20px;
+            padding: 12px 20px;
             text-align: center;
             text-decoration: none;
             display: inline-block;
             font-size: 16px;
-            margin: 4px 2px;
+            margin: 8px 0;
             cursor: pointer;
-            border-radius: 16px;
+            border-radius: 8px;
+            transition: background-color 0.3s ease;
         }
         .sidebar .sidebar-content .button:hover {
             background-color: #2980b9;
         }
-        .sidebar .sidebar-content .file-uploader {
-            margin-bottom: 20px;
-        }
         .chat-message {
-            background-color: #ffffff;
+            background-color: #ecf0f1;
             padding: 15px;
             border-radius: 10px;
             margin-bottom: 10px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         .user-message {
-            background-color: #e0f7fa;
+            background-color: #d6eaf8;
         }
         .assistant-message {
-            background-color: #e8eaf6;
+            background-color: #d5dbdb;
         }
         </style>
         """,
@@ -153,8 +156,8 @@ def main():
     with st.sidebar:
         st.title("Menu")
         pdf_docs = st.file_uploader(
-            "Upload your PDF files", accept_multiple_files=True, className="file-uploader")
-        if st.button("Submit & Process", key="submit_button", className="button"):
+            "Upload your PDF files", accept_multiple_files=True)
+        if st.button("Submit & Process", key="submit_button"):
             if pdf_docs:
                 try:
                     with st.spinner("Processing..."):
@@ -170,7 +173,7 @@ def main():
     # Main content area for displaying chat messages
     st.title("Gemini PDF Chatbot")
     st.write("Welcome to the Gemini PDF Chatbot! Upload your PDFs and ask questions.")
-    st.sidebar.button('Clear Chat History', on_click=clear_chat_history, className="button")
+    st.sidebar.button('Clear Chat History', on_click=clear_chat_history)
 
     # Initialize chat history
     if "messages" not in st.session_state:
@@ -180,29 +183,25 @@ def main():
     # Display chat messages
     for message in st.session_state.messages:
         css_class = "user-message" if message["role"] == "user" else "assistant-message"
-        with st.container().className(f"chat-message {css_class}"):
-            st.write(message["content"])
+        st.markdown(f'<div class="chat-message {css_class}">{message["content"]}</div>', unsafe_allow_html=True)
 
     # Chat input
     if prompt := st.chat_input():
         st.session_state.messages.append({"role": "user", "content": prompt})
-        with st.container().className("chat-message user-message"):
-            st.write(prompt)
+        st.markdown(f'<div class="chat-message user-message">{prompt}</div>', unsafe_allow_html=True)
 
         # Generate bot response
         if st.session_state.messages[-1]["role"] != "assistant":
             try:
-                with st.container().className("chat-message assistant-message"):
-                    with st.spinner("Thinking..."):
-                        response = user_input(prompt)
-                        if response:
-                            full_response = ''.join(response['output_text'])
-                            st.write(full_response)
-                            message = {"role": "assistant", "content": full_response}
-                            st.session_state.messages.append(message)
+                with st.spinner("Thinking..."):
+                    response = user_input(prompt)
+                    if response:
+                        full_response = ''.join(response['output_text'])
+                        st.markdown(f'<div class="chat-message assistant-message">{full_response}</div>', unsafe_allow_html=True)
+                        message = {"role": "assistant", "content": full_response}
+                        st.session_state.messages.append(message)
             except RuntimeError as e:
                 st.error(str(e))
 
 if __name__ == "__main__":
     main()
-