Update app.py

app.py

@@ -115,12 +115,11 @@ isp_theme = gr.themes.Default().set(
 # Custom CSS for logo positioning and disclaimer footer
 custom_css = """
 #logo-img { 
-    position: absolute; 
-    top: 20px; 
-    right: 20px; 
-    width: 200px; 
+    display: block;
+    margin: 0 auto;
+    width: 150px; 
     height: auto;
-    z-index: 1000;
+    padding-bottom: 20px; /* Space below logo */
 }
 #disclaimer-footer { 
     width: 100%; 
@@ -136,25 +135,24 @@ custom_css = """
     max-width: 800px; 
     margin: 0 auto; 
     padding: 20px;
-    position: relative;
-    padding-top: 60px;
 }
 .title { 
     color: #003366; 
     margin-bottom: 10px;
+    text-align: center; /* Center the title */
 }
 .chatbot { 
-    border: none;  /* Remove the blue border */
+    border: none;  
     border-radius: 5px; 
-    padding: 5px;  /* Reduce padding around the chat area */
+    padding: 10px;  
     margin-bottom: 15px;
 }
 .button-row { 
     display: flex; 
     gap: 10px; 
+    justify-content: center; /* Center the buttons */
     margin-bottom: 15px;
 }
-/* Remove borders and shadows from chat bubbles */
 .chatbot .message,
 .chatbot .message::before,
 .chatbot .message::after {
@@ -165,18 +163,17 @@ custom_css = """
     border: none !important;
     box-shadow: none !important;
 }
-/* Adjust padding, margin, and width for chat bubbles */
 .chatbot .message-content {
-    padding: 5px 10px; /* Smaller padding for better sizing */
-    margin-bottom: 8px; /* Space between messages */
-    max-width: 70%; /* Restrict maximum width for better appearance */
-    word-wrap: break-word; /* Ensure text wraps properly */
+    padding: 5px 10px; 
+    margin-bottom: 8px; 
+    max-width: 70%; 
+    word-wrap: break-word;
 }
 .chatbot .message-bubble {
-    background-color: #FFFFFF; /* Ensure background is white */
-    border-radius: 8px; /* Rounded corners for messages */
-    box-sizing: border-box; /* Ensure padding is included in width */
-    display: inline-block; /* Align the bubble content properly */
+    background-color: #FFFFFF; 
+    border-radius: 8px; 
+    box-sizing: border-box; 
+    display: inline-block; 
 }
 """
 
@@ -188,33 +185,32 @@ assistant_logo = os.getenv('LOGO')
 # Gradio interface using Blocks
 with gr.Blocks(theme=isp_theme, css=custom_css) as iface:
     with gr.Column(elem_classes="container"):
-        with gr.Row():
-            # Logo and Title
-            gr.HTML(
-                f"""
-                <img id='logo-img' src='{assistant_logo}' alt='Assistant Logo' onerror="this.style.display='none';document.getElementById('logo-error').style.display='block';">
-                <div id='logo-error' style='display:none;'>Logo not found</div>
-                """, 
-                elem_id='logo-container'
-            )
-            gr.Markdown(f"# {assistant_title}", elem_classes="title")
+        # Logo and Title
+        gr.HTML(
+            f"""
+            <img id='logo-img' src='{assistant_logo}' alt='Assistant Logo' onerror="this.style.display='none';document.getElementById('logo-error').style.display='block';">
+            <div id='logo-error' style='display:none;'>Logo not found</div>
+            """,
+            elem_id='logo-container'
+        )
+        gr.Markdown(f"# {assistant_title}", elem_classes="title")
 
         gr.Markdown("Chat with a Historical Figure")
 
         # Chatbot and message input
         with gr.Row():
-            with gr.Column(scale=6):
-                chatbot = gr.Chatbot(
-                    height=500,
-                    avatar_images=(None, assistant_avatar),
-                    elem_classes="chatbot"
-                )
-            with gr.Column(scale=1):
-                msg = gr.Textbox(
-                    placeholder="Type your message here...",
-                    container=False
-                )
-                
+            chatbot = gr.Chatbot(
+                height=500,
+                avatar_images=(None, assistant_avatar),
+                elem_classes="chatbot"
+            )
+
+        msg = gr.Textbox(
+            placeholder="Type your message here...",
+            container=False,
+            scale=7
+        )
+
         with gr.Row(elem_classes="button-row"):
             submit = gr.Button("Submit", variant="primary")
             clear = gr.ClearButton([msg, chatbot], value="Clear", variant="secondary")