Update app.py

app.py

@@ -1,4 +1,5 @@
 import streamlit as st
+from PIL import Image
 
 # Streamlit interface with improved aesthetics
 st.set_page_config(page_title="Chatbot Interface", page_icon="🤖")
@@ -8,25 +9,59 @@ def chatbot_response(user_input):
     response = qa.run(user_input)
     return response
 
+# Custom CSS for dark mode and centering
+st.markdown(
+    """
+    <style>
+    body {
+        background-color: #1e1e1e;
+        color: #ffffff;
+    }
+    .stButton button {
+        background-color: #4CAF50;
+        color: white;
+    }
+    .stTextInput input {
+        background-color: #333333;
+        color: white;
+    }
+    .center-text {
+        text-align: center;
+    }
+    .input-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+    .input-container img {
+        margin-right: 10px;
+    }
+    .input-container input {
+        flex-grow: 1;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
 
 # Create columns for logos
 col1, col2, col3 = st.columns([2, 3, 2])
 
 with col1:
-    st.image("Design 3_22.png", width= 150, use_column_width=True)  # Adjust image path and size as needed
-    
+    st.image("Design 3_22.png", width=150, use_column_width=True)  # Adjust image path and size as needed
 
 with col3:
-    st.image("Altereo logo 2023 original - eau et territoires durables.png", width= 150, use_column_width=True)  # Adjust image path and size as needed
-st.markdown("### 🤖 ALTER-IA BOT, ")
-st.markdown("Votre Réponse à Chaque Défi Méthodologique 📈")
+    st.image("Altereo logo 2023 original - eau et territoires durables.png", width=150, use_column_width=True)  # Adjust image path and size as needed
+
+# Centered title and slogan
+st.markdown('<h3 class="center-text">🤖 ALTER-IA BOT,</h3>', unsafe_allow_html=True)
+st.markdown('<h4 class="center-text">Votre Réponse à Chaque Défi Méthodologique 📈</h4>', unsafe_allow_html=True)
+
 # Input and button for user interaction
-user_input = st.text_input("You:", "")
-submit_button = st.button("Send 📨")
+user_input = st.text_input("You:", "", placeholder="Type your question here...")
 
-# Handle user input
-if submit_button:
-    if user_input.strip() != "":
+if st.button("Send 📨"):
+    if user_input.strip():
         bot_response = chatbot_response(user_input)
         st.markdown("### You:")
         st.markdown(f"> {user_input}")
@@ -37,4 +72,33 @@ if submit_button:
 
 # Motivational quote at the bottom
 st.markdown("---")
-st.markdown("*La collaboration est la clé du succès. Chaque question trouve sa réponse, chaque défi devient une opportunité.*")
+st.markdown("*La collaboration est la clé du succès. Chaque question trouve sa réponse, chaque défi devient une opportunité.*")
+
+# Display icons and text input/output
+user_icon = "path/to/user_icon.png"  # Replace with your user icon path
+bot_icon = "path/to/bot_icon.png"  # Replace with your bot icon path
+
+# Input field with icon
+st.markdown(
+    f"""
+    <div class="input-container">
+        <img src="{user_icon}" alt="User Icon" width="30">
+        <input type="text" placeholder="Type your question here..." style="flex-grow: 1; background-color: #333333; color: white; padding: 10px; border: none; border-radius: 5px;">
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+
+# Output field with icon
+if submit_button:
+    if user_input.strip() != "":
+        bot_response = chatbot_response(user_input)
+        st.markdown(
+            f"""
+            <div class="input-container">
+                <img src="{bot_icon}" alt="Bot Icon" width="30">
+                <textarea style="flex-grow: 1; background-color: #333333; color: white; padding: 10px; border: none; border-radius: 5px;" rows="5">{bot_response}</textarea>
+            </div>
+            """,
+            unsafe_allow_html=True
+        )